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.
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”
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.
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")})
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()
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.
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.
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.
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
ciao ,
cercavo la parte di deploy su Azure .
Me la sono persa ?
O non c’è ?
Grazie mille