Vengono create nuove applicazioni web ogni giorno, ma qual è il loro ciclo di sviluppo e quali sono gli strumenti usati per ottenere un prodotto digitale degno di questo nome? Presentiamo con questo articolo gli strumenti e la vita di una web application, passando attraverso la creazione dei servizi REST, l’interfaccia grafica e il set up delle automazioni di ci /cd.
Il contesto in cui si muove l’esempio che riporteremo e che vedrete dagli snippets di codice è la gestione di un magazzino generico, che contiene una lista di prodotti.
Sviluppo della Web App: la parte backend
Per lo sviluppo della parte backend di questa applicazione, abbiamo utilizzato come linguaggio di programmazione il classico Java, affiancandolo al framework Spring che facilita lo sviluppo di servizi REST per applicazioni web.
Spring mette a disposizione un servizio, chiamato Initihttps://start.spring.io/alizr, che permette di generare un primo scheletro per il nostro progetto indicando solamente alcune proprietà necessarie.
Gli endpoint creati riproducono le operazioni CRUD (Create, Read, Update, Delete).
Nell’esempio sopra, viene mostrato il codice di una API che permette il recupero di tutte le informazioni per uno specifico prodotto andando ad inserire nell’URL della richiesta del suo ID.
Per verificare il corretto funzionamento dei servizi REST, oltre ai test abbiamo utilizzato Postman, un tool aggiuntivo che permette di testare le API non avendo necessariamente una parte frontend a disposizione.
Database
Per la persistenza dei dati abbiamo utilizzato un database relazionale MySql. Non avendo necessità particolari abbiamo deciso di affidarci ad esso per la sua scalabilità e resilienza, oltre a tutti i vantaggi offerti dal fatto di essere un software open-source.
Per comodità decidiamo di utilizzare il database con i dati già al suo interno. Per fare ciò viene utilizzato il file initialize.sql, che contiene la creazione del database, la relativa tabella e i dati che la popolano.
Per rendere il servizio database disponibile e portabile, decidiamo di creare un’immagine docker. Ciò permette di mantenere la banca dati isolata e portabile, rendendo quindi l’intera applicazione fruibile su qualsiasi macchina senza la necessità di eseguire configurazioni preliminari.
Il seguente comando configura ed esegue il container:
Frontend della We App
Per realizzare il frontend dell’applicazione abbiamo affiancato alle tradizionali tecnologie (HTML, CSS, Typescript) la libreria React.
React permette la creazione di componenti autonomi facilitando la comunicazione tra di essi, rendendo lo sviluppo di interfacce complesse più accessibile. Sebbene si tratti di una applicazione estremamente semplice, nel codice è possibile osservare un esempio dei principi appena descritti.
React inoltre introduce il concetto di stato per i suoi componenti, permettendo la creazione di elementi dinamici nell’interfaccia. Cambiare lo stato di un componente fa sì che solamente le parti dipendenti da esso vengano renderizzate nuovamente utilizzando lo stato aggiornato.
Per realizzare il modale abbiamo utilizzato Chakra-ui, una libreria di componenti React. Il componente Modal include tutta la logica necessaria al funzionamento del modale, rendendone l’utilizzo estremamente semplice.
Quando il back end viene eseguito, le API create vengono esposte all’indirizzo http://localhost:8080, rendendo disponibile il servizio.
React si occupa di fare le chiamate a questo indirizzo recuperando i dati sotto forma di JSON, per poi mostrarli a video in un formato migliore.
CI/CD
La pipeline che andremo a creare è un semplice automatismo utile in fase di pull request o merge request in base al servizio che usiamo per l’hosting del repository git. Generalmente quello di cui si ha necessità è una build maven che esegua i test e che comunichi eventuali regressioni del codice.
In questo modo, siamo sicuri che le feature che vogliamo introdurre non rompano qualcosa del nostro codice già preesistente.
Possiamo a questo punto pensare di pacchettizzare la nostra web application utilizzando docker, in modo da rendere portabile e riproducibile sia l’ambiente di sviluppo sia quello di produzione.
Per fare questo creiamo un Dockerfile, sia per il backend che per il frontend, in cui andiamo a definire quello che è necessario per rendere operativo il nostro prodotto. Ne riportiamo un esempio:
Se presente un ambiente di produzione o di test possiamo rilasciare il nostro prodotto utilizzando le immagini che rendiamo disponibili tramite docker.
Nel nostro caso andiamo a scaricare dal docker registry aziendale le immagini di backend e frontend in un server dedicato in modo da averle disponibili nella macchina. Per quanto riguarda invece il database dobbiamo eseguire una secure copy dell’initialize.sql usato per creare la prima istanza del db ed eseguire il comando docker spiegato nella sezione relativa al database dell’articolo.
Una volta che il db è operativo può essere usato per rendere disponibile il backend. Allo stesso modo il container frontend dovrà essere impostato per avere un link di comunicazione con il container backend. Se tutti i pezzi del puzzle combaciano, avremo il nostro servizio pubblico e disponibile ad essere usato.
Riferimenti
Tutto il codice dell’applicazione è presente su una repository Git visibile qui.
