Come creare un Web App MEAN in 5 minuti

EasyDev Info
Aug 23, 2017 · 5 min read

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)

L’interfaccia della nostra app

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:

Modello 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).

Il modello dati della nostra applicazione

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.

Le pagine web della nostra applicazione

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

Console started

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

Pagina di ricerca progetto & pagina di modifica cliente

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.

http://easydev.org

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade