1. Вступ

PDF цього документа доступний за посиланням |TYT|.

Приклади з документа доступні за посиланням |TYT|.

Тут ми пропонуємо ознайомити вас із двома фреймворками на прикладі клієнт-серверної архітектури:

AngularJS, що використовується для клієнта. Для спрощення надалі його позначатимемо як Angular;
Spring 4, що використовується для сервера. Для спрощення надалі його позначатимемо як Spring;

Для розуміння цього документа необхідні певні попередні знання:

середній рівень володіння мовою Java EE;
знання JPA (Java Persistence API), який використовуватиметься для доступу до бази даних;
знання принаймні однієї попередньої версії Spring для розуміння філософії цього фреймворку;
досвід використання Maven для налаштування Java-проектів;
базові знання про обмін даними HTTP у веб-додатку;
знання поширених тегів мови HTML;
базові знання мови JavaScript;

Інші необхідні знання будуть представлені та пояснені в процесі розгляду кейсу.

Цей документ не є навчальним курсом і в багатьох аспектах є неповним. Для більш глибокого вивчення обох фреймворків можна скористатися такими джерелами:

[ref1]: книга «Pro AngularJS», автор — Адам Фріман, видавництво Apress. Це чудова книга. Вихідні коди прикладів з цієї книги доступні безкоштовно на URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/];
[ref2]: офіційна документація Angular JS [https://docs.angularjs.org/guide]
[ref3]: книга «Spring Data» видавництва O’Reilly [http://shop.oreilly.com/product/0636920024767.do], у якій розглядається використання фреймворку [Spring Data] для доступу до даних як у реляційних, так і в нереляційних базах даних (NoSQL);
[ref4]: книга «Pro Spring 3» від видавництва Apress. Це попередня версія Spring 4, але основні концепції вже там викладені;
[ref5]: довідкова документація до Spring 4 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

Джерелами, на яких базується цей документ, є зазначені вище матеріали, а також незамінний [http://stackoverflow.com/], який став у нагоді під час численних сеансів налагодження.

1.1. Архітектура додатка

Досліджуваний додаток матиме таку архітектуру:

у [1] веб-сервер надає статичні сторінки браузеру. Ці сторінки містять додаток AngularJS, побудований за моделлю MVC (Модель – Вигляд – Контролер). Модель тут є одночасно і моделлю представлень, і моделлю домену, представленого тут шаром [Services];
Користувач буде взаємодіяти з екранними формами, що відображаються в браузері. Його дії іноді вимагатимуть звернення до сервера Spring 4 [2]. Сервер обробить запит і поверне відповідь JSON (JavaScript — нотація об’єктів) [3]. Ця відповідь буде використана для оновлення сторінки, що відображається користувачеві.

1.2. Використані інструменти

У цьому документі використовуються такі інструменти розробки:

Spring Tool Suite для сервера Spring: можна завантажити безкоштовно;
Webstorm для клієнта Angular: пробну версію на один місяць можна завантажити безкоштовно;
Wampserver для управління базою даних MySQL 5: можна завантажити безкоштовно;

Встановлення цих та інших інструментів описано в розділі 6.

1.3. Функціональні можливості додатка

Код прикладу доступний |ICI|у вигляді файлу zip, який можна завантажити.

сервер міститься у папках [rdvmedecins-metier-dao-v2] та [rdvmedecins-webapi-v3];
клієнт міститься у папці [rdvmedecins-angular-v2];
скрипт SQL для створення бази даних MySQL5 знаходиться у папці [database];

1.3.1. Створення бази даних

Щоб протестувати додаток, спочатку створюємо базу даних за допомогою скрипту SQL [dbrdvmedecins.sql]. Використовуємо інструмент [PhpMyAdmin] з WampServer:

у [1] вибираємо інструмент [phpMyAdmin] з WampServer;
у [2] вибираємо опцію [Importer];

у [3] вибираємо файл [database/dbrdvmedecins.sql];
у [4] — запускаємо його;
у [5] створюється база даних.

1.3.2. Впровадження веб-сервера / JSON

За допомогою Spring Tool Suite (STS) імпортуємо два проекти Maven для сервера Spring 4:

у [1] та [2] імпортуємо проекти Maven;
у [3] ми вказуємо батьківську папку обох проектів, які потрібно імпортувати;

у [3] — імпортовані проекти. Можливо, у проектах є помилки. Кожен із них повинен використовувати компілятор версії >=1.7:

Тому потрібен JVM версії >=1.7:

Коли помилки у JVM зникнуть, можна запустити проект [rdvmedecins-webapi-v3]:

у [4], [5] та [6] ми запускаємо проект [rdvmedecins-webapi-v3] як додаток Spring Boot;

У результаті ми отримуємо такі журнали в консолі 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)

рядки 13–14: додаток запущено на сервері Tomcat.

1.3.3. Впровадження клієнта Angular

Відкриваємо папку [rdvmedecins-angular-v2] разом із WebStorm:

у [1] вибираємо опцію [Open Directory];
у [2] вибираємо папку [rdvmedecins-angular-v2];

у [3] — дерево папок;
у [4] вибираємо головну сторінку [app.html] додатка;
у [5] її відкривають у сучасному браузері;

у [6] — сторінка входу в додаток. Це додаток для запису на прийом до лікарів. Цей додаток уже розглядався в документі «Вступ до фреймворків JSF2, Primefaces та Primefaces mobile»;
у [7] — прапорець, що дозволяє ввімкнути або вимкнути режим [debug]. Останній характеризується наявністю фрейму [8], який відображає модель поточного виду;
у [9] — штучний час очікування в мілісекундах. За замовчуванням він дорівнює 0 (очікування відсутнє). Якщо N — значення цього часу очікування, будь-яка дія користувача буде виконана після очікування тривалістю N мілісекунд. Це дозволяє побачити, як додаток реалізує управління очікуванням;
у [10] — URL сервера Spring 4. Якщо слідувати попередньому, це [http://localhost:8080];
у [11] та [12] — ідентифікатор та пароль користувача, який бажає скористатися додатком. Є два користувачі: admin/admin (логін/пароль) з роллю (ADMIN) та user/user з роллю (USER). Лише роль ADMIN має право користуватися додатком. Роль USER наведено лише для того, щоб показати, що відповідає сервер у цьому випадку використання;
у [13] — кнопка, що дозволяє підключитися до сервера;
у [14] — мова додатка. Їх дві: французька (за замовчуванням) та англійська.

у [1] — підключення;

після входу в систему можна вибрати лікаря, до якого хочете записатися на прийом [2], та день прийому [3];
можна [4] переглянути розклад обраного лікаря на обраний день;

отримавши розклад лікаря, можна забронювати час прийому [5];

у [6] вибирають пацієнта для прийому та підтверджують цей вибір у [7];

Після підтвердження прийому система автоматично повертає до календаря, де новий прийом тепер занесено. Цей прийом можна буде пізніше видалити за допомогою [7].

Основні функції описано. Вони прості. Ті, що не були описані, — це функції навігації для повернення до попереднього екрана. На завершення розглянемо управління мовою:

у [1] можна перейти з французької на англійську;

на [2] — перегляд переходить на англійську, включаючи календар;