1. Wprowadzenie

Plik PDF dokumentu jest dostępny pod nazwą |TUTAJ|.

Przykłady z dokumentu są dostępne pod numerem |TUTAJ|.

W niniejszym dokumencie zamierzamy przedstawić dwa frameworki na przykładzie architektury klient-serwer:

AngularJS wykorzystywany po stronie klienta. Dla uproszczenia będzie on dalej oznaczany jako Angular;
Spring 4 wykorzystywany po stronie serwera. Dla uproszczenia będzie on dalej oznaczany jako Spring;

Zrozumienie niniejszego dokumentu wymaga pewnej wiedzy wstępnej:

średniozaawansowaną znajomość języka Java EE;
znajomość JPA (Java Persistence API), który będzie wykorzystywany do uzyskiwania dostępu do bazy danych;
znajomość co najmniej jednej poprzedniej wersji Springa, aby zrozumieć filozofię tego frameworka;
umiejętność korzystania z Mavena do konfiguracji projektów Java;
podstawowa znajomość komunikacji HTTP w aplikacji internetowej;
znajomość popularnych tagów języka HTML;
podstawowa znajomość języka JavaScript;

Pozostała niezbędna wiedza zostanie przedstawiona i wyjaśniona w trakcie analizy przypadku.

Niniejszy dokument nie stanowi kursu i pod wieloma względami jest niekompletny. Aby pogłębić wiedzę na temat obu frameworków, można skorzystać z następujących źródeł:

[ref1]: książka „Pro AngularJS” autorstwa Adama Freemana, wydana przez wydawnictwo Apress. Jest to doskonała pozycja. Kody źródłowe przykładów z tej książki są dostępne bezpłatnie na stronie URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/];
[ref2]: oficjalna dokumentacja Angular JS [https://docs.angularjs.org/guide]
[ref3]: książka „Spring Data” wydawnictwa O’Reilly ([http://shop.oreilly.com/product/0636920024767.do]), która przedstawia wykorzystanie frameworka ([Spring Data]) do uzyskiwania dostępu do danych, zarówno z relacyjnych baz danych, jak i innych (NoSQL);
[ref4]: książka „Pro Spring 3” wydana przez Apress. Jest to poprzednia wersja Spring 4, ale główne koncepcje są już w niej zawarte;
[ref5]: dokumentacja referencyjna Spring 4 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

Źródła, na których opiera się niniejszy dokument, to te wymienione powyżej oraz niezbędny plik [http://stackoverflow.com/], który okazał się nieoceniony podczas licznych sesji debugowania.

1.1. Architektura aplikacji

Analizowana aplikacja będzie miała następującą architekturę:

W [1] serwer WWW dostarcza statyczne strony do przeglądarki. Strony te zawierają aplikację AngularJS zbudowaną w oparciu o model MVC (Model – Widok – Kontroler). Model w tym przypadku obejmuje zarówno widoki, jak i domenę, reprezentowaną tutaj przez warstwę [Services];
Użytkownik będzie wchodził w interakcję z widokami wyświetlanymi w przeglądarce. Jego działania będą czasami wymagały wysłania zapytania do serwera Spring 4 [2]. Serwer ten przetworzy żądanie i zwróci odpowiedź JSON (JavaScript w notacji obiektowej) [3]. Odpowiedź ta zostanie wykorzystana do aktualizacji widoku wyświetlanego użytkownikowi.

1.2. Wykorzystane narzędzia

W niniejszym dokumencie wykorzystano następujące narzędzia programistyczne:

Spring Tool Suite dla serwera Spring: dostępne do pobrania za darmo;
Webstorm dla klienta Angular: miesięczną wersję próbną można pobrać bezpłatnie;
Wampserver do zarządzania bazą danych MySQL 5: dostępny do pobrania za darmo;

Instalacja tych i innych narzędzi została opisana w punkcie 6.

1.3. Funkcjonalność aplikacji

Kod przykładowy jest dostępny pod nazwą |ICI| w postaci pliku zip do pobrania.

serwer znajduje się w folderach [rdvmedecins-metier-dao-v2] i [rdvmedecins-webapi-v3];
klient znajduje się w folderze [rdvmedecins-angular-v2];
skrypt SQL służący do generowania bazy danych MySQL5 znajduje się w folderze [database];

1.3.1. Tworzenie bazy danych

Aby przetestować aplikację, najpierw tworzymy bazę danych za pomocą skryptu SQL [dbrdvmedecins.sql]. Korzystamy z narzędzia [PhpMyAdmin] z WampServer:

w [1] wybieramy narzędzie [phpMyAdmin] z WampServer;
w [2] wybieramy opcję [Importer];

w [3] wybieramy plik [database/dbrdvmedecins.sql];
w przypadku pliku [4] należy go uruchomić;
w pliku [5] tworzona jest baza danych.

1.3.2. Wdrożenie serwera WWW / JSON

Za pomocą Spring Tool Suite (STS) importujemy dwa projekty Maven serwera Spring 4:

w plikach [1] i [2] importujemy projekty Maven;
w [3] wskazujemy folder nadrzędny obu projektów do zaimportowania;

w pliku [3] znajdują się zaimportowane projekty. Projekty mogą zawierać błędy. Każdy z nich musi korzystać z kompilatora w wersji >=1.7:

Wymagany jest zatem JVM w wersji >=1.7:

Gdy nie ma już błędów w pliku JVM, można uruchomić projekt [rdvmedecins-webapi-v3]:

w [4], [5] i [6] uruchamiamy projekt [rdvmedecins-webapi-v3] jako aplikację Spring Boot;

W konsoli STS otrzymujemy wówczas następujące logi:

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: 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)

wiersze 13–14: aplikacja uruchomiła się na serwerze Tomcat.

1.3.3. Wdrożenie klienta Angular

Otwieramy folder [rdvmedecins-angular-v2] wraz z WebStorm:

w pliku [1] wybieramy opcję [Open Directory];
w pliku [2] wybieramy folder [rdvmedecins-angular-v2];

w przypadku [3] – drzewo folderów;
w pliku [4] wybieramy stronę główną aplikacji [app.html];
w pliku [5] otwiera się ją w nowszej przeglądarce;

w [6] – strona startowa aplikacji. Jest to aplikacja do umawiania wizyt u lekarzy. Aplikacja ta została już omówiona w dokumencie „Wprowadzenie do frameworków JSF2, Primefaces i Primefaces mobile”;
w [7] – pole wyboru, które pozwala włączyć lub wyłączyć tryb [debug]. Ten ostatni charakteryzuje się obecnością ramki [8], która wyświetla model bieżącego widoku;
w [9] – sztuczny czas oczekiwania w milisekundach. Domyślnie wynosi 0 (brak oczekiwania). Jeśli N jest wartością tego czasu oczekiwania, każda akcja użytkownika zostanie wykonana po upływie czasu oczekiwania wynoszącego N milisekund. Pozwala to zaobserwować sposób zarządzania oczekiwaniem zaimplementowany przez aplikację;
w [10] – identyfikator serwera Spring 4 (URL). Zgodnie z powyższym jest to [http://localhost:8080];
w [11] i [12] – identyfikator i hasło osoby, która chce korzystać z aplikacji. Istnieją dwaj użytkownicy: admin/admin (login/hasło) z rolą (ADMIN) oraz user/user z rolą (USER). Tylko rola ADMIN ma uprawnienia do korzystania z aplikacji. Rola USER służy wyłącznie do pokazania, jaką odpowiedź zwraca serwer w tym przypadku użycia;
w [13] znajduje się przycisk umożliwiający połączenie z serwerem;
w [14] – język aplikacji. Dostępne są dwa: domyślnie francuski oraz angielski.

w [1] nawiązuje się połączenie;

Po zalogowaniu się można wybrać lekarza, u którego chce się umówić na wizytę [2], oraz dzień wizyty [3];
można poprosić o wyświetlenie harmonogramu wybranego lekarza na wybrany dzień;

po uzyskaniu harmonogramu lekarza można zarezerwować termin [5];

w [6] wybiera się pacjenta na wizytę i potwierdza ten wybór w [7];

Po zatwierdzeniu wizyty następuje automatyczny powrót do kalendarza, w którym nowa wizyta jest już zapisana. Wizytę tę można później usunąć za pomocą kodu [7].

Opisano już główne funkcje. Są one proste. Funkcje, które nie zostały opisane, to opcje nawigacyjne służące do powrotu do poprzedniego widoku. Na koniec omówimy zarządzanie językiem:

w [1] przechodzi się z języka francuskiego na angielski;

na [2] – widok przełącza się na angielski, łącznie z kalendarzem;