Créer un projet Spring Boot+ Angular 4 Ajouter des entités Ajouter de la logique côté Spring Boot Ajouter du code côté Angular

1. Prise en main de Jhipster
par James Kokou GAGLO
DevOps @peopleinput
Juillet 2017

2. Objectifs
• Créer un projet Spring Boot+ Angular 4
• Ajouter des entités
• Ajouter de la logique côté Spring Boot
• Ajouter du code côté Angular

3. Jhipster version 4.6.1

4. Introduction
Jhipster est un générateur de projet basé sur Spring
Boot pour le backend et Angular pour le front.
Il génère des projets avec des configurations plus
poussées que celles générées par le Spring Initializr.

5. Création du projet
● Pré-requis : installer yarn puis jhipster (voir le
quick start sur le site de jhipster)
● Pour notre projet, nous allons créer 2
microservices puis un frontend

6. Création du projet
GATEWAY
SUBSCRIPTION PERSON
REGISTRY

7. Création du projet
Dès qu’on crée un projet de type microservice, jhipster génère la
configuration d’un registry au choix (Jhipster registry basé sur du
Eureka ou Consul) afin de localiser les microservices.
Un registry est un annuaire ou un dns de services. Il permet de
contacter/retrouver les services dans un environnement distribué.

8. Création du projet
• Créer 3 dossiers gateway , person et subscription
• Générer un projet de type “Microservice application”
pour les 2 micro-services
• Pour le gateway, générer un projet de type
“Microservice gateway”

9. Création du projet

10. Démarrage des services
● Le registry doit être démarré en premier (jhipster-registry
dans mon cas)
● Le registry peut être cloné depuis le dépôt github de jhipster
(à démarrer avec maven ou à partir du war) ou démarré à
partir du fichier docker-compose dans le dossier
src/main/docker de l’un des projets

11. Démarrage des services
Tous les services s’enregistrent au niveau du registry dès qu’ils
sont démarrés.
Le registry est accessible à l’adresse : http://localhost:8761

12. Démarrage du registry
● A partir du docker-compose du projet gateway :
docker-compose -f src/main/docker/jhipster-registry.yml up -d
● A partir de github :
git clone git@github.com:jhipster/jhipster-registry.git
cd jhipster-registry && ./mvnw

13. Démarrage des microservices
Pour démarrer les projets il suffit de lancer le script ./mvn dans
leur répertoire.

14. Interface du registry

15. Ajout d’entités au projet
Afin de développer la logique métier dans projet généré il est
nécessaire d’ajouter ses entités.
Pour ce faire jhipster propose un éditeur en ligne nommé
jdl-studio qui permet à la fois d’avoir son diagramme de classe
puis d’avoir un fichier permettant de générer les entités JPA
correspondants dans le projet.

16. Ajout d’entités au projet

17. Ajout d’entités au projet
● L’icône représentée par un appareil photo permet de télécharger son diagramme
de classe en version png
● L’icône représentée par une flèche vers le bas permet de télécharger le
diagramme au fichier jh qui servira plus tard à jhipster pour la génération des
entités dans le projet.
● L’icône représentée par une flèche vers le haut permet d’importer un jdl existant
afin de le modifier.

18. Ajout d’entités au projet
Ici les entités sont créées avec l’instruction entity , les énumération avec l’instruction
enum, la relation one to many avec l’instruction relationship OneToMany.
L’instruction paginate nous permet d’avoir une pagination lors de l’affichage des Person.
Les instructions dto et service permet à jhipster de nous implémenter les patterns
associé.
L’instruction microservice permet d’associer les entités au microservice person. Cette
association sera utile à la gateway pour déterminer le microservice qui fournit l’api pour
ces entités.

19. Ajout d’entités au projet
Pour générer les entités du diagramme ainsi que leur service et dto il faut faire appel au
sous générateur import-jdl de jhipster dans le microservice person et dans le projet
gateway comme suit : jhipster import-jdl ../diagram/person.jh
Pour finir, il faut importer l’entité MySubscription dans le microservice subscription
ainsi que dans la gateway en tapant la commande :
jhipster import-jdl ../diagram/subscription.jh
Pour chaque entité générée, jhipster associe une ressource rest pour le CRUD ainsi qu’un
fichier liquibase pour le versionning de la base de données

20. Ajout d’entités au projet
Le “master” changelog de liquibase se trouvent dans le fichier
src/main/resources/config/liquibase/master.xml. Il inclut les autres changelogs.
Pour supprimer la base de données H2 en dev il faut supprimer le dossier target/h2db

21. Ajout d’entités au projet
Entités JPA générés dans le projet person

22. Ajout d’entités au projet
Entités Angular générés dans le projet gateway

23. Ajout d’entités au projet
Le sous générateur d’entités crée également des représentations json des entités dans le
dossier .jhipster afin de savoir si elles ont été modifiées ou pas. Il suffit donc de
supprimer le fichier json correspondant à une entité et relancer le sous générateur pour la
réinitialiser.

24. Ajout d’entités au projet
Si dans votre jdl vous avez décidé d’utiliser le pattern dto avec mapstruct, il faudra activer
les profils dev et IDE afin de pouvoir lancer le projet dans Intellij

25. Ajout d’entités au projet

26. Ajout d’entités au projet

27. Ajout d’entités au projet
On peut voir dans les logs que le microservice person a été appelé par le front end Angular
pour créer une nouvelle entrée de Person.

28. Ajout d’entités au projet
On peut voir dans les logs que le microservice subscription a été appelé par le front end
Angular pour créer une nouvelle entrée de MySubscription.

29. Ajouter de codes métiers
Voici ce que nous allons implémenter dans cette démo :
● Sélection d’une Person lors de la création d’une MySubscription
● Afficher toutes les MySubscription sur la page détails d’une Person
● Ajouter un rôle MANAGER et rediriger tous les MANGER sur la liste des
MySubscription

30. Ajouter du code : Angular 4
Pour mieux travailler sur le front, il vaut mieux démarrer le
serveur de dev webpack pour avoir le livereload quand un
fichier est modifié. Il écoute sur le port 9000 et il peut être
démarré en tapant la commande :
yarn start

31. Ajouter du code : Angular 4
Toutes les entités de notre diagramme de classe générées
par jhipster au niveau du projet Angular se trouvent dans le
répertoire src/main/webapp/app/entities. Chaque
entité a un dossier dans lequel se trouve son modèle, son
service, ses routes et ses composants pour le CRUD.

32. Ajouter du code : Angular 4
Avant la modification
● Sélection d’une Person lors de la création d’une MySubscription

33. Ajouter du code : Angular 4
Avant la modification
my-subscription-dialog.component.html

34. Ajouter du code : Angular 4
Après la modification
My-subscription-dialog.component.ts

35. Ajouter du code : Angular 4
Après la modification
My-subscription-dialog.component.html

36. Résultat :

37. Ajouter du code : Spring Boot
Ajout d’un nouveau controller
● Afficher toutes les MySubscription sur la page détails d’une Person

38. Ajouter du code : Spring Boot
Ajout d’une nouvelle méthode au repository
● Afficher toutes les MySubscription sur la page détails d’une Person

39. Ajouter du code : Angular
Ajout d’un nouveau service angular
● Afficher toutes les MySubscription sur la page détails d’une Person

40. Résultat :

41. Ajout de nouveaux rôles
Ajouter le nouveau rôle dans AuthoritiesConstants.java (microservice)
Ajouter le rôle dans authorities.csv (gateway)

42. Code source
https://github.com/freemanpolys/jhi
pster-labs.git

43. Documentation
• https://jhipster.github.io
• https://www.supinfo.com/articles/single/3638-spri
ng-cloud-architecture-micro-services
• https://jhipster.github.io/jhipster-registry/