Dede Blog: just another Software Development Engineer

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 4

Integrazione tra il front-end Angular4 e il back-end Spring Boot

La lista di utenti che visualizziamo nella pagina non sarà più definita staticamente all’interno della main application Angular ma verrà recuperata tramite una API Rest esposta dal nostro back-end Spring Boot.

Procederemo per gradi, con una prima versione dove, per semplicità, la lista di utenti sarà definita all’interno dello stesso controller che avrà il compito di restituirla, per passare poi alla versione finale in cui la lista di utenti verrà recuperata da un database MongoDB.

Definizione del ViewModel

Creiamo un nuovo package che chiamiamo “viewmodels” al cui interno creiamo la classe UserViewModel che rappresenta il nostro DTO, Data Transfer Object, che passeremo alla vista per la visualizzazione in pagina. La sua struttura deve mappare quella del model Typescript che abbiamo creato nel progetto Angular di front-end.

Definiamo quindi il contenuto della classe come:

public class UserViewModel {

	private String firstname;
	private String lastname; 
	private String country;
	private int age;

}

Al momento abbiamo definito solo le variabili di istanza della classe. Utilizzeremo infatti Lombok e le sue annotazioni per farci generare getters e setters e i costruttori che ci servono. In questo modo riduciamo la quantità di codice boilerplate e i nostri POJO (Plain Old Java Object) restano minimali e, di conseguenza, più “puliti”.

Procediamo passo passo per vedere all’opera Lombok.

Per prima cosa, in Spring Tool Suite, abilitiamo la view “Outline” che di default non è attiva nella perspective “Angular” che stiamo utilizzando. Per farlo, selezioniamo dal menù “Windows” -> “Show View” -> “Outline”Attivata questa view possiamo vedere, nel relativo riquadro all’interno del nostro ambiente di sviluppo, la struttura della nostra classe, con le sue variabili di istanza e i suoi metodi. Al momento non abbiamo definito nessun metodo, neanche i getters e i setters delle proprietà, per cui quello che vedremo sarà semplicemente quanto illustrato nella figura seguente.
A questo punto introduciamo Lombok, aggiungendo alla nostra classe “UserViewModel” l’annotazione @Data che importiamo dal package “lombok”.

package net.davismol.springangulardemo.viewmodels;

import lombok.Data;

@Data
public class UserViewModel {

	private String firstname;
	private String lastname; 
	private String country;
	private int age;
}

Come possiamo vedere dalla nuova situazione della finestra “Outline”, semplicemente aggiungendo questa annotazione, otteniamo l’implementazione dei getters e dei setters per tutte le variabili di istanza della classe e del costruttore di zero argomenti, oltre ad una implementazione dei default dei principali metodi ereditati da Object, come equals(), hashCode(), ecc..

Lombok prevede una serie più ampia di annotazioni come ad esempio @Getter e @Setter, da utilizzare a livello di singola variabile di istanza per andare a definire puntualmente solo i metodi get e set necessari. Un’annotazione che ci può essere utile è quella per creare il costruttore con tutti gli argomenti, al posto del costruttore vuoto. Tale annotazione si chiama @AllArgsConstructor.

Creazione di un Controller REST con Spring Boot

Andiamo nel package “controllers” e creiamo una nuova classe che chiamiamo “UserController”. Annotiamo la nuova classe con @RestController, che è quella che viene chiamata una “convenience annotation”, che altro non fa che aggiungere alla classe entrambe le annotation @Controller e @ResponseBody per indicare che i metodi definiti all’interno del controller non restituiscono delle view MVC ma degli oggetti di dominio.

Definiamo un metodo chiamato “listAllUsers” che restituisce la lista di tutti gli utenti. La sua signature sarà quindi:

    public List listAllUsers()

Ora definiamo quale sarà l’endpoint su cui sarà attestato questo metodo del controller e a quale verbo http risponderà. In questo caso, essendo un’operazione di recupero dei dati relativi agli utenti definiamo l’endpoint “/users” sul quale dovrà essere eseguita una chiamata HTTP GET.
Questi due aspetti li definiamo tramite l’annotazione @RequestMapping e i suoi attributi “value” e “method”. Annotiamo quindi il metodo in questo modo:

    @RequestMapping(value = "/users", method = { RequestMethod.GET })
    public List listAllUsers()

Come abbiamo detto a inizio articolo, come primo passo nell’integrazione tra progetto Angular4 di front-end e back-end Spring Boot, definiamo direttamente in modo statico all’interno del controller la lista degli utenti da restituire. Nella prossima parte del tutorial li recupereremo poi invece da MongoDB.

Quindi, all’interno del metodo listAllUsers() creiamo un ArrayList di UserViewModel, in cui inseriamo gli utenti che in precedenza avevamo definito nel progetto Angular, all’interno della classe TypeScript “app.component.ts”. Tale lista verrà ritornata dal metodo.

@RestController
public class UserController {

    @RequestMapping(value = "/users", method = { RequestMethod.GET })
    public List listAllUsers() {
    	
    	List userList = new ArrayList<>();
    	
    	userList.add(new UserViewModel("Davis", "Molinari", "Italy", 34));
    	userList.add(new UserViewModel("Lionel", "Messi", "Argentina", 30));
    	userList.add(new UserViewModel("Jason", "Bourne", "US", 30));

    	return userList;
    }
}

A questo punto abbiamo un controller REST pronto a ricevere una richiesta per la restituzione della lista di tutti gli utenti e possiamo quindi verificarne il funzionamento.

Eseguiamo il progetto Spring Boot e, dai log di startup, possiamo notare il nuovo controller che abbiamo creato, mappato correttamente sull’endpoint definito. Di seguito la relativa riga estratta dai log:

Mapped "{[/users],methods=[GET]}" onto public java.util.List net.davismol.springangulardemo.controllers.UserController.listAllUsers()

Una volta avviato il progetto Spring Boot, apriamo il browser e puntiamo all’indirizzo che avevamo definito come endpoint per la nostra API, cioè “/users”.

Come possiamo vedere dall’immagine sottostante, il risultato che otteniamo è un array JSON contenente tutti gli oggetti relativi agli utenti che avevamo inserito nell’implementazione del controller.
Con la parte di back-end per ora siamo a posto.

Vai alla parte successiva dell’articolo: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 6