Prise en main de Jhipster

Prise en main de Jhipster

par James Kokou GAGLODevOps @peopleinput

Juillet 2017

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

Jhipster version 4.6.1

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.

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

Création du projet

GATEWAY

SUBSCRIPTION PERSON

REGISTRY

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é.

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”

Création du projet

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

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

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 [email protected]:jhipster/jhipster-registry.git

cd jhipster-registry && ./mvnw

Démarrage des microservices

Pour démarrer les projets il suffit de lancer le script ./mvn dans

leur répertoire.

Interface du registry

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.

Ajout d’entités au projet

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.

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.

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

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

Ajout d’entités au projet

Entités JPA générés dans le projet person

Ajout d’entités au projet

Entités Angular générés dans le projet gateway

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.

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

Ajout d’entités au projet

Ajout d’entités au projet

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.

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.

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

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

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.

Ajouter du code : Angular 4

Avant la modification

● Sélection d’une Person lors de la création d’une MySubscription

Ajouter du code : Angular 4

Avant la modification

my-subscription-dialog.component.html

Ajouter du code : Angular 4

Après la modification

My-subscription-dialog.component.ts

Ajouter du code : Angular 4

Après la modification

My-subscription-dialog.component.html

Résultat :

Ajouter du code : Spring Boot

Ajout d’un nouveau controller

● Afficher toutes les MySubscription sur la page détails d’une Person

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

Ajouter du code : Angular

Ajout d’un nouveau service angular

● Afficher toutes les MySubscription sur la page détails d’une Person

Résultat :

Ajout de nouveaux rôles

Ajouter le nouveau rôle dans AuthoritiesConstants.java (microservice)

Ajouter le rôle dans authorities.csv (gateway)

Code source

https://github.com/freemanpolys/jhipster-labs.git

Documentation

• https://jhipster.github.io• https://www.supinfo.com/articles/single/3638-spri

ng-cloud-architecture-micro-services• https://jhipster.github.io/jhipster-registry/