1. Inleiding

De PDF van het document is beschikbaar |HIER|.

De voorbeelden uit het document zijn beschikbaar |HIER|.

We stellen hier voor om twee frameworks te introduceren aan de hand van een client/server-voorbeeld:

AngularJS, gebruikt voor de client. Voor het gemak wordt dit hierna Angular genoemd;
Spring 4 wordt gebruikt voor de server. Om het eenvoudig te houden, wordt dit hierna aangeduid als Spring;

Om dit document te kunnen begrijpen, zijn bepaalde voorkennis vereist:

een gemiddeld niveau in Java EE;
kennis van JPA (Java Persistence API), dat wordt gebruikt om toegang te krijgen tot een database;
kennis van ten minste één eerdere versie van Spring om de filosofie van dit framework te begrijpen;
het gebruik van Maven om Java-projecten te configureren;
basiskennis van HTTP-uitwisselingen in een webapplicatie;
de gangbare tags van de taal HTML;
basiskennis van de taal JavaScript;

De overige benodigde kennis wordt gaandeweg de casestudy geïntroduceerd en uitgelegd.

Dit document is geen cursus en is in veel opzichten onvolledig. Om de twee frameworks verder te verdiepen, kunt u de volgende bronnen raadplegen:

[ref1]: het boek "Pro AngularJS" geschreven door Adam Freeman, uitgegeven door Apress. Dit is een uitstekend boek. De broncodes van de voorbeelden uit dit boek zijn gratis beschikbaar op URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/];
[ref2]: de officiële documentatie van Angular JS [https://docs.angularjs.org/guide]
[ref3]: het boek "Spring Data" bij O'Reilly [http://shop.oreilly.com/product/0636920024767.do], waarin het gebruik van het framework [Spring Data] wordt beschreven voor toegang tot gegevens, of het nu gaat om relationele databases of niet (NoSQL);
[ref4]: het boek "Pro Spring 3" van uitgeverij Apress. Dit is de voorganger van Spring 4, maar de belangrijkste concepten komen er al in aan bod;
[ref5]: de referentiedocumentatie van Spring 4 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

De bronnen waarop dit document is gebaseerd, zijn de hierboven genoemde, plus het onmisbare [http://stackoverflow.com/] voor de talloze debug-sessies.

1.1. De architectuur van de applicatie

De onderzochte applicatie zal de volgende architectuur hebben:

In [1] levert een webserver statische pagina’s aan een browser. Deze pagina’s bevatten een applicatie AngularJS die is opgebouwd volgens het MVC-model (Model – View – Controller). Het model is hier zowel dat van de weergaven als dat van het domein, hier vertegenwoordigd door de laag [Services];
De gebruiker zal interactie hebben met de weergaven die in de browser worden getoond. Zijn acties zullen soms een verzoek aan de Spring 4-server [2] vereisen. Deze verwerkt het verzoek en retourneert een antwoord JSON (JavaScript Object Notation) [3]. Dit antwoord wordt gebruikt om de aan de gebruiker getoonde weergave bij te werken.

1.2. De gebruikte tools

In dit document worden de volgende ontwikkeltools gebruikt:

Spring Tool Suite voor de Spring-server: gratis te downloaden;
Webstorm voor de Angular-client: een proefversie voor één maand is gratis te downloaden;
Wampserver voor het beheer van de database MySQL 5: gratis te downloaden;

De installatie van deze en andere tools wordt beschreven in paragraaf 6.

1.3. De functionaliteiten van de applicatie

De voorbeeldcode is beschikbaar |ICI| in de vorm van een bestand zip dat kan worden gedownload.

de server bevindt zich in de mappen [rdvmedecins-metier-dao-v2] en [rdvmedecins-webapi-v3];
de client bevindt zich in de map [rdvmedecins-angular-v2];
het script SQL voor het genereren van de database MySQL5 bevindt zich in de map [database];

1.3.1. Het aanmaken van de database

Om de applicatie te testen, maken we eerst de database aan met het script SQL [dbrdvmedecins.sql]. We gebruiken de tool [PhpMyAdmin] van WampServer:

in [1] selecteren we de tool [phpMyAdmin] van WampServer;
in [2] kiest men de optie [Importer];

in [3] selecteer je het bestand [database/dbrdvmedecins.sql];
bij [4] voert u het uit;
in [5] wordt de database aangemaakt.

1.3.2. Implementatie van de webserver / JSON

Met Spring Tool Suite (STS) importeren we de twee Maven-projecten van de Spring 4-server:

in [1] en [2] importeren we de Maven-projecten;
in [3] geven we de bovenliggende map aan van de twee te importeren projecten;

in [3], de geïmporteerde projecten. Het is mogelijk dat de projecten fouten bevatten. Elk project moet een compiler >=1.7 gebruiken:

Er is dus een JVM >=1.7 nodig:

Zodra er geen fouten meer zijn in JVM, kan het project [rdvmedecins-webapi-v3] worden uitgevoerd:

in [4], [5] en [6] voeren we het project [rdvmedecins-webapi-v3] uit als een Spring Boot-applicatie;

We krijgen dan de volgende logberichten te zien in de console van 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)

regels 13-14: de applicatie is gestart op een Tomcat-server.

1.3.3. Implementatie van de Angular-client

We openen de map [rdvmedecins-angular-v2] met WebStorm:

in [1] kiezen we de optie [Open Directory];
in [2] selecteren we het dossier [rdvmedecins-angular-v2];

in [3], de mappenstructuur;
in [4] selecteert u de hoofdpagina [app.html] van de applicatie;
in [5] wordt deze geopend in een recente browser;

in [6], de startpagina van de applicatie. Dit is een applicatie voor het maken van afspraken bij artsen. Deze applicatie is al behandeld in het document Inleiding tot de frameworks JSF2, Primefaces en Primefaces Mobile;
in [7], een selectievakje waarmee je kunt kiezen of je al dan niet in de modus [debug] wilt werken. Deze modus wordt gekenmerkt door de aanwezigheid van het kader [8], dat het model van de huidige weergave weergeeft;
in [9], een kunstmatige wachttijd in milliseconden. De standaardwaarde is 0 (geen wachttijd). Als N de waarde van deze wachttijd is, wordt elke actie van de gebruiker uitgevoerd na een wachttijd van N milliseconden. Zo kunt u zien hoe de wachttijd door de applicatie wordt beheerd;
in [10], de URL van de Spring 4-server. Als we het voorgaande volgen, is dit [http://localhost:8080];
in [11] en [12], de gebruikersnaam en het wachtwoord van degene die de applicatie wil gebruiken. Er zijn twee gebruikers: admin/admin (login/wachtwoord) met een rol (ADMIN) en user/user met een rol (USER). Alleen de rol ADMIN heeft het recht om de applicatie te gebruiken. De rol USER is er alleen om te laten zien wat de server in dit gebruiksscenario antwoordt;
in [13], de knop waarmee je verbinding kunt maken met de server;
in [14], de taal van de applicatie. Er zijn er twee: standaard Frans en Engels.

in [1] wordt verbinding gemaakt;

Zodra je bent ingelogd, kun je de arts kiezen bij wie je een afspraak wilt maken [2] en de dag waarop die afspraak plaatsvindt [3];
je vraagt in [4] om de agenda van de gekozen arts voor de gekozen dag te bekijken;

zodra je de agenda van de arts hebt ontvangen, kun je een tijdvak reserveren [5];

in [6] kiest men de patiënt voor de afspraak en bevestigt men deze keuze in [7];

Zodra de afspraak is bevestigd, keert men automatisch terug naar de agenda, waar de nieuwe afspraak nu is opgenomen. Deze afspraak kan later worden verwijderd met [7].

De belangrijkste functies zijn nu beschreven. Ze zijn eenvoudig. De functies die niet zijn beschreven, zijn navigatiefuncties om terug te keren naar een vorige weergave. Laten we afsluiten met het taalbeheer:

in [1] schakelt u over van het Frans naar het Engels;

naar [2], wordt de weergave in het Engels weergegeven, inclusief de kalender;