Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 11

Qui la parte precedente dell’articolo: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 10

Ricordiamo che avevamo definito il database MongoDB nel file application.settings, e l’avevamo chiamato “tutorialDB”

### MONGODB ###
spring.data.mongodb.uri=mongodb://localhost:28000/tutorialDB

Avevamo inoltre dichiarato che i documenti relativi agli oggetti della nostra entità di business User sarebbero stati storicizzati a db all’interno della collection “users”, annotando la classe in questo modo:

@Document(collection="users")
public class User extends ABaseModel

Spring-Data-MongoDB gestisce per noi la creazione dei db e delle collections necessarie, però lo fa solo al momento dell’inserimento del primo documento nella collection. Connettendoci a MongoDB dopo aver semplicemente fatto il Run dell’applicazione non vediamo infatti apparire il database “TutorialDB” che avevamo configurato nel file application.settings.

Al fine di prendere confidenza con MongoDB e con gli strumenti per interagire con esso, creiamo manualmente tutto il necessario.

Accediamo a MongoChef (Studio 3T) e clicchiamo nella toolbar il pulsante della “IntelliShell” che ci apre un tab sulla destra dove sottomettere i nostri comandi. Eseguiamo il comando

use tutorialDB

per dire che vogliamo passare ad utilizzare questo database. In realtà questo database non esiste ancora e, nonostante la shell ci risponda “switched to db tutorialDB”, se facciamo refresh sulla lista dei db disponibili sulla sinistra ancora non lo vediamo. Lo vedremo apparire non appena inseriremo al suo interno un documento in una collection.
85 - SpringBoot Angular example MongoDB use database switched

Per inserire i documenti, prendiamo il JSON cosi come ci era stato restituito dal controller REST e lo passiamo come parametro del comando insertMany() che eseguiamo dalla shell di MongoDB sulla collection “users”.

db.users.insertMany()

L’immagine seguente mostra l’esecuzione del comando e il suo risultato. Come possiamo vedere i 3 documenti sono stati inseriti correttamente (“acknowledged”: true) e ci vengono mostrati gli id con cui sono stati inseriti. Facendo un refresh della lista dei database disponibili (tasto destro sulla connessione e poi “Refresh All” nel menù contestuale che si apre) vediamo comparire il “TutorialDB” contenente la collection “users”
86 - SpringBoot Angular example MongoDB insertMany command and result
Ora che abbiamo i dati nella collection del nostro database MongoDB possiamo testare la nuova versione dell’applicazione. Eseguiamo quindi il progetto Spring Boot e, ancora una volta, puntiamo il browser all’indirizzo localhost:8080/users

Come possiamo vedere, la lista con i 3 utenti ci viene ancora ritornata correttamente come JSON dal servizio REST.
87 - SpringBoot Angular example MongoDB rest controller json result OK
Possiamo fare una rapida verifica che l’applicazione stia effettivamente leggendo dal database MongoDB: da MongoChef cancelliamo uno degli utenti dal database e poi refreshamo la pagina nel browser.

Per farlo usiamo il comando deleteOne(), passandogli come parametro l’id del documento che vogliamo cancellare. Se non specifichiamo noi un id differente, l’id di default di MongoDB è di tipo ObjectId. Per cancellare un documento tramite il suo ObjectId dobbiamo quindi eseguire il comando:

db.users.deleteOne({ _id: ObjectId("5a0c7a41c6808712e1c71629")})

88 - SpringBoot Angular example MongoDB deleteOne document by objectId
Il risultato restituito dall’esecuzione del comando ci conferma che è stato cancellato un documento (“deletedCount” : 1).

Se adesso eseguiamo il comando db.users.find() vediamo che nella collection “users” sono rimasti solo due documenti.

db.users.find()

89 - SpringBoot Angular example MongoDB find command
Se adesso torniamo nel browser e facciamo il refresh della pagina, vediamo che questa volta ci vengo restituiti i due soli oggetti rimasti nel database.
90 - SpringBoot Angular example JSON Result with 2 MongoDB User documents
A questo punto, lanciamo anche l’applicazione Angular di front-end che, ricordiamo, gira ancora su una porta differente, la 4200, e vediamo i soli due utenti rimasti nel db popolare la tabella.
91 - SpringBoot Angular example show the List of Users

Siamo quindi arrivati ad ottenere la versione dell’applicazione che mostra i dati in tabella recuperandoli da un database MongoDB.
La cosa interessante è che, a parte la definizione delle classi, le annotazioni e i setters del converter (che abbiamo però detto che andremo ad ottimizzare), abbiamo scritto soltanto 1 riga di codice nel Controller e 2 righe nel Service, per quanto riguarda la parte di back-end Spring Boot.

This entry was posted in $1$s. Bookmark the permalink.

One thought on “Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 11

  1. Pingback: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 10 | Dede Blog

Leave a Reply

Your email address will not be published. Required fields are marked *