1. Einführung

Die PDF des Dokuments ist verfügbar |HIER|.

Die Beispiele des Dokuments sind verfügbar |HIER|.

Wir möchten hier zwei Frameworks anhand eines Client-Server-Beispiels vorstellen:

AngularJS, das für den Client verwendet wird. Der Einfachheit halber wird es im Folgenden als Angular bezeichnet;
Spring 4 wird für den Server verwendet. Der Einfachheit halber wird es im Folgenden als „Spring“ bezeichnet;

Zum Verständnis dieses Dokuments sind bestimmte Vorkenntnisse erforderlich:

mittlere Kenntnisse in Java EE;
Kenntnisse in JPA (Java Persistence API), das für den Zugriff auf eine Datenbank verwendet wird;
Kenntnisse über mindestens eine frühere Version von Spring, um die Philosophie dieses Frameworks zu verstehen;
die Verwendung von Maven zur Konfiguration von Java-Projekten;
Grundkenntnisse über den Datenaustausch in einer Webanwendung;
die gängigen Tags der Sprache HTML;
Grundkenntnisse der Sprache JavaScript;

Weitere erforderliche Kenntnisse werden im Laufe der Fallstudie vorgestellt und erläutert.

Dieses Dokument ist kein Lehrgang und in vielerlei Hinsicht unvollständig. Um sich näher mit den beiden Frameworks zu befassen, können die folgenden Quellen herangezogen werden:

[ref1]: das Buch „Pro AngularJS“ von Adam Freeman, erschienen bei Apress. Es ist ein ausgezeichnetes Buch. Der Quellcode der Beispiele aus diesem Buch ist kostenlos unter URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/] verfügbar;
[ref2]: die offizielle Dokumentation zu Angular JS [https://docs.angularjs.org/guide]
[ref3]: das Buch „Spring Data“ bei O’Reilly ([http://shop.oreilly.com/product/0636920024767.do]), das die Verwendung des Frameworks ([Spring Data]) für den Zugriff auf Daten – sei es aus relationalen oder nicht-relationalen Datenbanken (NoSQL) – behandelt;
[ref4]: das Buch „Pro Spring 3“ aus dem Apress-Verlag. Es handelt sich um die Vorgängerversion von Spring 4, aber die wichtigsten Konzepte sind bereits enthalten;
[ref5]: die Referenzdokumentation zu Spring 4 ([http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf]).

Die Quellen, auf denen dieses Dokument basiert, sind die oben genannten sowie das unverzichtbare [http://stackoverflow.com/] für die zahlreichen Debugging-Sitzungen.

1.1. Die Architektur der Anwendung

Die untersuchte Anwendung wird folgende Architektur aufweisen:

In [1] liefert ein Webserver statische Seiten an einen Browser aus. Diese Seiten enthalten eine Anwendung AngularJS, die auf dem Muster MVC (Model-View-Controller) basiert. Das Modell ist hier sowohl das der Ansichten als auch das des Domänenmodells, das hier durch die Schicht [Services] dargestellt wird;
Der Benutzer interagiert mit den Ansichten, die ihm im Browser angezeigt werden. Seine Aktionen erfordern manchmal eine Abfrage des Spring-4-Servers [2]. Dieser verarbeitet die Anfrage und gibt eine Antwort JSON (JavaScript Object Notation) [3] zurück. Diese wird verwendet, um die dem Benutzer angezeigte Ansicht zu aktualisieren.

1.2. Die verwendeten Tools

In diesem Dokument werden folgende Entwicklungstools verwendet:

Spring Tool Suite für den Spring-Server: kostenlos zum Herunterladen;
WebStorm für den Angular-Client: Eine einmonatige Testversion steht kostenlos zum Download bereit;
Wampserver für die Verwaltung der Datenbank MySQL 5: kostenlos zum Herunterladen;

Die Installation dieser und weiterer Tools wird in Abschnitt 6 beschrieben.

1.3. Die Funktionen der Anwendung

Der Beispielcode ist |ICI| als herunterladbare Datei zip verfügbar.

Der Server befindet sich in den Ordnern [rdvmedecins-metier-dao-v2] und [rdvmedecins-webapi-v3];
Der Client befindet sich im Ordner „[rdvmedecins-angular-v2]“;
Das Skript SQL zur Erstellung der Datenbank MySQL5 befindet sich im Ordner [database];

1.3.1. Erstellung der Datenbank

Um die Anwendung zu testen, erstellen wir zunächst die Datenbank mit dem Skript SQL [dbrdvmedecins.sql]. Wir verwenden das Tool [PhpMyAdmin] von WampServer:

in [1] wählen wir das Tool [phpMyAdmin] aus WampServer aus;
in [2] wählt man die Option [Importer];

In [3] wählt man die Datei [database/dbrdvmedecins.sql] aus;
Bei [4] wird das Skript ausgeführt;
in [5] wird die Datenbank erstellt.

1.3.2. Einrichtung des Webservers / JSON

Mit der Spring Tool Suite (STS) importiert man die beiden Maven-Projekte des Spring 4-Servers:

In [1] und [2] importieren wir die Maven-Projekte;
in [3] geben wir den übergeordneten Ordner der beiden zu importierenden Projekte an;

in [3] die importierten Projekte. Es kann sein, dass die Projekte Fehler enthalten. Jedes von ihnen muss einen Compiler >=1.7 verwenden:

Daher ist ein JVM >= 1.7 erforderlich:

Wenn keine Fehler mehr bei JVM auftreten, kann das Projekt [rdvmedecins-webapi-v3] ausgeführt werden:

In [4], [5] und [6] führen wir das Projekt [rdvmedecins-webapi-v3] als Spring-Boot-Anwendung aus;

Daraufhin erhalten wir die folgenden Protokolle in der Konsole von 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)

Zeilen 13–14: Die Anwendung wurde auf einem Tomcat-Server gestartet.

1.3.3. Implementierung des Angular-Clients

Wir öffnen den Ordner „[rdvmedecins-angular-v2]“ mit „WebStorm“:

In [1] wählen wir die Option [Open Directory];
in [2] wählen wir den Ordner [rdvmedecins-angular-v2] aus;

Bei [3] die Ordnerstruktur;
in [4] wählt man die Hauptseite [app.html] der Anwendung aus;
in [5] wird sie in einem aktuellen Browser geöffnet;

in [6] die Startseite der Anwendung. Es handelt sich um eine Terminvereinbarungsanwendung für Ärzte. Diese Anwendung wurde bereits im Dokument „Einführung in die Frameworks JSF2, PrimeFaces und PrimeFaces Mobile“ behandelt;
in [7] ein Kontrollkästchen, mit dem festgelegt werden kann, ob sich die Anwendung im Modus [debug] befindet oder nicht. Letzterer zeichnet sich durch das Vorhandensein des Rahmens [8] aus, der das Modell der aktuellen Ansicht anzeigt;
in [9] eine künstliche Wartezeit in Millisekunden. Der Standardwert beträgt 0 (keine Wartezeit). Wenn N der Wert dieser Wartezeit ist, wird jede Benutzeraktion nach einer Wartezeit von N Millisekunden ausgeführt. So lässt sich die von der Anwendung implementierte Wartezeitverwaltung beobachten;
in [10] die URL des Spring-4-Servers. Folgt man dem Vorhergehenden, ist dies [http://localhost:8080];
in [11] und [12] die Benutzer-ID und das Passwort desjenigen, der die Anwendung nutzen möchte. Es gibt zwei Benutzer: admin/admin (Login/Passwort) mit einer Rolle (ADMIN) und user/user mit einer Rolle (USER). Nur die Rolle ADMIN ist berechtigt, die Anwendung zu nutzen. Die Rolle USER dient lediglich dazu, zu veranschaulichen, welche Antwort der Server in diesem Anwendungsfall zurückgibt;
in [13] die Schaltfläche, über die man sich beim Server anmelden kann;
in [14] die Sprache der Anwendung. Es gibt zwei: standardmäßig Französisch und Englisch.

in [1] wird die Verbindung hergestellt;

Sobald man angemeldet ist, kann man den Arzt auswählen, bei dem man einen Termin vereinbaren möchte ([2]), sowie den Tag des Termins ([3]);
man fordert [4] den Terminkalender des ausgewählten Arztes für den gewählten Tag an;

Sobald der Terminkalender des Arztes angezeigt wird, kann man einen Termin [5] buchen;

In [6] wählt man den Patienten für den Termin aus und bestätigt diese Auswahl in [7];

Sobald der Termin bestätigt ist, kehrt man automatisch zum Kalender zurück, in dem der neue Termin nun eingetragen ist. Dieser Termin kann später mit [7] gelöscht werden.

Die wichtigsten Funktionen wurden beschrieben. Sie sind einfach. Die nicht beschriebenen Funktionen sind Navigationsfunktionen, um zu einer vorherigen Ansicht zurückzukehren. Schließen wir mit der Sprachverwaltung ab:

In [1] wechselt man von Französisch zu Englisch;

zu [2] wechselt die Ansicht ins Englische, einschließlich des Kalenders;