1. Introduzione

Il codice PDF del documento è disponibile |QUI|.

Gli esempi del documento sono disponibili |QUI|.

In questa sede ci proponiamo di presentare due framework utilizzando un esempio client/server:

AngularJS utilizzato per il client. Per semplificare, d'ora in poi verrà indicato come Angular;
Spring 4 utilizzato per il server. Per semplicità, d'ora in poi verrà indicato come Spring;

La comprensione di questo documento richiede alcuni prerequisiti:

un livello intermedio di conoscenza di Java EE;
la conoscenza di JPA (Java Persistence API), che verrà utilizzato per accedere a un database;
la conoscenza di almeno una versione precedente di Spring per comprendere la filosofia di questo framework;
l'utilizzo di Maven per configurare progetti Java;
una conoscenza di base degli scambi HTTP in un'applicazione web;
i tag più comuni del linguaggio HTML;
una conoscenza di base del linguaggio JavaScript;

Le altre conoscenze necessarie verranno introdotte e spiegate man mano che si procede con il caso di studio.

Il presente documento non è un corso ed è incompleto sotto molti aspetti. Per approfondire i due framework, è possibile consultare i seguenti riferimenti:

[ref1]: il libro "Pro AngularJS" scritto da Adam Freeman edito da Apress. È un libro eccellente. I codici sorgente degli esempi contenuti in questo libro sono disponibili gratuitamente su URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/];
[ref2]: la documentazione ufficiale di Angular JS [https://docs.angularjs.org/guide]
[ref3]: il libro "Spring Data" edito da O'Reilly [http://shop.oreilly.com/product/0636920024767.do], che illustra l'utilizzo del framework [Spring Data] per l'accesso ai dati, sia che si tratti di database relazionali che non (NoSQL);
[ref4]: il libro "Pro Spring 3" edito da Apress. Si tratta della versione precedente a Spring 4, ma i concetti principali sono già presenti;
[ref5]: la documentazione di riferimento di Spring 4 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

Le fonti su cui si basa questo documento sono quelle sopra citate, oltre all’indispensabile [http://stackoverflow.com/] per le numerosissime sessioni di debug.

1.1. L'architettura dell'applicazione

L’applicazione in esame avrà la seguente architettura:

in [1], un server web fornisce pagine statiche a un browser. Queste pagine contengono un'applicazione AngularJS costruita sul modello MVC (Modello – Vista – Controller). Il modello in questo caso è sia quello delle viste sia quello del dominio, qui rappresentato dal livello [Services];
L'utente interagirà con le viste che gli vengono presentate nel browser. Le sue azioni richiederanno talvolta l'invio di una richiesta al server Spring 4 [2]. Quest'ultimo elaborerà la richiesta e restituirà una risposta JSON (JavaScript Object Notation) [3]. Questa verrà utilizzata per aggiornare la vista presentata all'utente.

1.2. Gli strumenti utilizzati

In questo documento gli strumenti di sviluppo utilizzati sono i seguenti:

Spring Tool Suite per il server Spring: scaricabile gratuitamente;
Webstorm per il client Angular: è disponibile una versione di prova gratuita della durata di un mese;
Wampserver per la gestione del database MySQL 5: scaricabile gratuitamente;

L'installazione di questi e altri strumenti è descritta al paragrafo 6.

1.3. Le funzionalità dell’applicazione

Il codice dell’esempio è disponibile |ICI| sotto forma di file zip da scaricare.

il server è contenuto nelle cartelle [rdvmedecins-metier-dao-v2] e [rdvmedecins-webapi-v3];
il client è contenuto nella cartella [rdvmedecins-angular-v2];
lo script SQL per la generazione del database MySQL5 si trova nella cartella [database];

1.3.1. Creazione del database

Per testare l'applicazione, creiamo innanzitutto il database con lo script SQL [dbrdvmedecins.sql]. Utilizziamo lo strumento [PhpMyAdmin] di WampServer:

in [1], selezioniamo lo strumento [phpMyAdmin] da WampServer;
in [2], si sceglie l’opzione [Importer];

in [3], selezionare il file [database/dbrdvmedecins.sql];
in [4], lo si esegue;
in [5], viene creato il database.

1.3.2. Implementazione del server web / JSON

Con Spring Tool Suite (STS), si importano i due progetti Maven del server Spring 4:

in [1] e [2], si importano i progetti Maven;
in [3], si indica la cartella principale dei due progetti da importare;

in [3], i progetti importati. È possibile che i progetti presentino degli errori. Ciascuno di essi deve utilizzare un compilatore >=1.7:

È quindi necessario un JVM >=1.7:

Quando non ci sono più errori di JVM, è possibile eseguire il progetto [rdvmedecins-webapi-v3]:

in [4], [5] e [6] eseguiamo il progetto [rdvmedecins-webapi-v3] come un'applicazione Spring Boot;

Otteniamo quindi i seguenti log nella console di STS:

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.0.0.RELEASE)

2014-06-05 12:22:34.049  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot                : Starting Boot on Gportpers3 with PID 9296 (D:\data\istia-1314\polys\istia\angularjs-spring4\rdvmedecins-webapi\target\classes started by ST)
2014-06-05 12:22:34.122  INFO 9296 --- [           main] ationConfigEmbeddedWebApplicationContext : Refreshing org.springframework.boot.context.embedded.AnnotationConfigEmbeddedWebApplicationContext@4b4bee22: startup date [Thu Jun 05 12:22:34 CEST 2014]; root of context hierarchy
2014-06-05 12:22:35.083  INFO 9296 --- [           main] o.s.b.f.s.DefaultListableBeanFactory     : Overriding bean definition for bean 'org.springframework.boot.autoconfigure.AutoConfigurationPackages': replacing [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null] with [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null]
...
 s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080/http
2014-06-05 12:22:41.630  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot : Started Boot in 8.0 seconds (JVM running for 8.944)

righe 13-14: l'applicazione è stata avviata su un server Tomcat.

1.3.3. Implementazione del client Angular

Apriamo la cartella [rdvmedecins-angular-v2] con WebStorm:

in [1], si seleziona l'opzione [Open Directory];
in [2], si seleziona la cartella [rdvmedecins-angular-v2];

in [3], la struttura ad albero della cartella;
in [4], selezionare la pagina principale [app.html] dell'applicazione;
in [5], la si apre in un browser recente;

in [6], la pagina iniziale dell'applicazione. Si tratta di un'applicazione per la prenotazione di appuntamenti medici. Questa applicazione è già stata trattata nel documento Introduzione ai framework JSF2, Primefaces e Primefaces mobile;
in [7], una casella di controllo che consente di attivare o disattivare la modalità [debug]. Quest’ultima è caratterizzata dalla presenza del riquadro [8] che visualizza il modello della vista corrente;
in [9], un tempo di attesa artificiale espresso in millisecondi. Il valore predefinito è 0 (nessuna attesa). Se N è il valore di questo tempo di attesa, qualsiasi azione dell’utente verrà eseguita dopo un tempo di attesa di N millisecondi. Ciò consente di osservare la gestione dell’attesa implementata dall’applicazione;
in [10], l’URL del server Spring 4. Seguendo quanto detto in precedenza, si tratta di [http://localhost:8080];
in [11] e [12], l’identificativo e la password di chi desidera utilizzare l’applicazione. Ci sono due utenti: admin/admin (login/password) con un ruolo (ADMIN) e user/user con un ruolo (USER). Solo il ruolo ADMIN ha il diritto di utilizzare l’applicazione. Il ruolo USER serve solo a mostrare la risposta del server in questo caso d’uso;
in [13], il pulsante che consente di connettersi al server;
in [14], la lingua dell'applicazione. Ce ne sono due: il francese (predefinito) e l'inglese.

in [1], si effettua la connessione;

una volta effettuato l'accesso, è possibile scegliere il medico con cui si desidera fissare un appuntamento [2] e il giorno dell'appuntamento [3];
si richiede in [4] di visualizzare l’agenda del medico scelto per il giorno selezionato;

una volta ottenuto l’agenda del medico, è possibile prenotare una fascia oraria [5];

in [6], si seleziona il paziente per l’appuntamento e si conferma la scelta in [7];

Una volta confermato l'appuntamento, si torna automaticamente all'agenda dove il nuovo appuntamento è ora registrato. Questo appuntamento potrà essere successivamente cancellato con [7].

Le funzionalità principali sono state descritte. Sono semplici. Quelle che non sono state descritte sono funzioni di navigazione per tornare a una vista precedente. Concludiamo con la gestione della lingua:

in [1], si passa dal francese all’inglese;

in [2], la vista passa all’inglese, compreso il calendario;