Come creare un Web App MEAN in 5 minuti
Creare una web app ormai è diventato molto semplice ed alla portata di tutti, con un po’ di impegno. E’ facile a dirlo, ma vederlo realizzato è ben diverso.
Un giorno mi trovai a pranzo con un mio amico, con pochissime esperienze di programmazione, mi disse di aver bisogno di un’applicazione molto semplice per gestire i clienti del suo team di lavoro. Così, conoscendo le mie esperienze da programmatore, abbiamo buttato giù insieme uno schizzo di ciò che necessitava realizzare…
Il progetto (sempre prima su carta)


Un’applicazione di due pagine, in grado di gestire una lista di clienti, ognuno di questi avente una lista di progetti, di cui mostrare le informazioni.
Come capo team, il mio amico avrebbe dovuto avere la possibilità di modificare tali informazioni e gestire le utenze.
I dati
Una volta definito cosa dovesse fare l’applicazione e con quale esperienza per l’utente, ci siamo dedicati a definire la base dati:

Un po’ di teoria sulle REST Web Application
A questo punto dovevamo creare la prima implementazione della nostra applicazione!
Il mio amico non era però a conoscenza delle basi teoriche dei componenti che vanno a comporre l’architettura di una web app.
Così ho iniziato a spiegargli in parole più o meno semplici cosa dovevamo realizzare tecnicamente. Ho iniziato quindi dallo User. Lui che apre il suo browser da pc o da mobile, e nel suo browser viene eseguita una parte della nostra web application! Questa è realizzata nel linguaggio Javascript e grazie al framework AngularJS.
In questa applicazione AngularJS ogni pagina è composta da un file .html dove viene rappresentata l’interfaccia grafica, ed un file .js dove inseriremo le logiche della nostra applicazione in componenti denominati controllers.
Questi controllers accedono ai dati della nostra app tramite dei componenti denominati services, ed esiste un service per ogni nostro tipo di dato (Customer, Project, User). Per reperire i dati i services fanno delle richieste HTTP al server, dova sarà in esecuzione un seconda parte della nostra applicazione che andrà a reperire i dati dal database (MongoDB) e li fornirà al services di AngularJS in formato JSON.

Iniziamo a realizzare il primo prototipo
Una volta progettata l’applicazione, ci è stato di grande aiuto il tool EasyDev, il quale ci ha dato la possibilità di realizzare in modo semplice e veloce il primo prototipo funzionante.
Abbiamo, quindi, inserito sulla piattaforma EasyDev, lo schema UML disegnato precedentemente su carta, che rappresenta la struttura dei dati della nostra applicazione (customer, project, user).

Dopodiché abbiamo inserito su EasyDev anche le informazioni riguardanti la struttura delle pagine (home e customer detail), specificando per la pagina home un template di tipo «lista di customer» e per la pagina customer detail un template di tipo «modifica/visualizza customer». Questo ultima fase è stata eseguita automaticamente cliccando sul pulsante “CREATE CRUD FROM DATABASE”, che in base al modello UML dai dati inseriti precedentemente, crea automaticamente le pagine di ricerca e modifica dei ogni modello dati.

Scarichiamo il codice sorgente generato
A questo punto la piattaforma EasyDev è pronta per generare il codice sorgente del nostro primo prototipo. Per fare ciò abbiamo creato un nuovo «generator» scegliendo il template MEAN tra quelli disponibili (PHP, Java, NodeJS) e lo abbiamo collegato ad un nostro repository GIT, ottenuto gratuitamente su Github.

Cliccando su «Generate Code On Repository», EasyDev invia al nostro repository il codice sorgente funzionante. Utilizzando lo strumento Sourcetree abbiamo scaricato sul pc locale il codice sorgente della nostra applicazione.
In alternativa è possibile non collegare alcun repository GIT e scaricare il codice sorgente in uno zip.
Installiamo i Prerequisiti
Ora è il momento di installare i prerequisiti specificati nel file. Niente di preoccupante, installiamo NodeJS e MongoDB eseguendo i relativi installer disponibili qui (NodeJS download, MongoDB download ).
A questo punto avviamo MongoDB eseguendo il file mongod.exe nella cartella bin dove abbiamo eseguito l’installazione.
Avviamo il progetto
Dalla cartella del nostro codice sorgente eseguiamo il comando
npm install
per installare i moduli NodeJS del nostro progetto, specificati nel file package.json.
Avviamo quindi il nostro server con il comando
npm start

Il nostro progetto è quindi avviato sulla porta 3000. Andando sull’URL http://localhost:3000 abbiamo il nostro prototipo pronto e funzionante!


A questo punto il mio amico si è stupito di avere già un’applicazione funzionante ed utile al suo scopo. Nella prossima guida andremo a vedere come personalizzare il prototipo generato con poco effort e completare ciò che era stato ideato su carta.
Restate in contatto! E nel frattempo potete divertivi nel prendere familiarità con EasyDev.