SlideShare une entreprise Scribd logo
Prise en main de Jhipster
par James Kokou GAGLO
DevOps @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 git@github.com: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/jhi
pster-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/

Contenu connexe

Tendances

Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
tayebbousfiha1
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich
 
Présentation du pfe - Master spécialisé en ingénierie informatique
Présentation du pfe - Master spécialisé en ingénierie informatiquePrésentation du pfe - Master spécialisé en ingénierie informatique
Présentation du pfe - Master spécialisé en ingénierie informatique
Ismail BAKKALI
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
Abdoulaye Dieng
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
Lilia Sfaxi
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Nawres Farhat
 
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
XavierPestel
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
ENSET, Université Hassan II Casablanca
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Riadh K.
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Présentation PFE mohamed yosri yahyaoui
Présentation PFE  mohamed yosri yahyaouiPrésentation PFE  mohamed yosri yahyaoui
Présentation PFE mohamed yosri yahyaoui
Yahyaoui Mohamed Yosri
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammami
Donia Hammami
 
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsSpring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
Julien Wittouck
 
Développement d'une application de cartographie interactive sur internet
Développement d'une application de cartographie interactive sur internetDéveloppement d'une application de cartographie interactive sur internet
Développement d'une application de cartographie interactive sur internet
Khadim Mbacké
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats
Ayed CHOKRI
 

Tendances (20)

Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Présentation du pfe - Master spécialisé en ingénierie informatique
Présentation du pfe - Master spécialisé en ingénierie informatiquePrésentation du pfe - Master spécialisé en ingénierie informatique
Présentation du pfe - Master spécialisé en ingénierie informatique
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
 
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Présentation PFE mohamed yosri yahyaoui
Présentation PFE  mohamed yosri yahyaouiPrésentation PFE  mohamed yosri yahyaoui
Présentation PFE mohamed yosri yahyaoui
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammami
 
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsSpring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
 
Développement d'une application de cartographie interactive sur internet
Développement d'une application de cartographie interactive sur internetDéveloppement d'une application de cartographie interactive sur internet
Développement d'une application de cartographie interactive sur internet
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats
 

Similaire à Prise en main de Jhipster

Formation Greenhopper
Formation GreenhopperFormation Greenhopper
Formation GreenhopperOxylane
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
Nicolas wallerand
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
Julien Dubois
 
Configurer GitHub Actions avec Docker et DotNET 8.pdf
Configurer GitHub Actions avec Docker et DotNET 8.pdfConfigurer GitHub Actions avec Docker et DotNET 8.pdf
Configurer GitHub Actions avec Docker et DotNET 8.pdf
Hamida Rebai Trabelsi
 
Python application packaging @ MeilleursAgents
Python application packaging @ MeilleursAgentsPython application packaging @ MeilleursAgents
Python application packaging @ MeilleursAgents
Nicolas Mussat
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
Publicis Sapient Engineering
 
Introduction à TeamCity
Introduction à TeamCityIntroduction à TeamCity
Introduction à TeamCityUlrich VACHON
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
NeoXam Tunisia
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
Martin Latrille
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Microsoft
 
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPAGrunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Touchify
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Corinne Schillinger
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
MSDEVMTL
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
Stéphane Traumat
 
Angular 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders Battle20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders Battle
Arnaud Héritier
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
Stéphane HULARD
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
Frédéric Queudret
 
Les méthodes agiles dans TFS
Les méthodes agiles dans TFSLes méthodes agiles dans TFS
Les méthodes agiles dans TFS
Denis Voituron
 

Similaire à Prise en main de Jhipster (20)

Formation Greenhopper
Formation GreenhopperFormation Greenhopper
Formation Greenhopper
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
 
Configurer GitHub Actions avec Docker et DotNET 8.pdf
Configurer GitHub Actions avec Docker et DotNET 8.pdfConfigurer GitHub Actions avec Docker et DotNET 8.pdf
Configurer GitHub Actions avec Docker et DotNET 8.pdf
 
Python application packaging @ MeilleursAgents
Python application packaging @ MeilleursAgentsPython application packaging @ MeilleursAgents
Python application packaging @ MeilleursAgents
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Introduction à TeamCity
Introduction à TeamCityIntroduction à TeamCity
Introduction à TeamCity
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
 
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPAGrunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Angular 11
Angular 11Angular 11
Angular 11
 
20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders Battle20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders Battle
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
 
Les méthodes agiles dans TFS
Les méthodes agiles dans TFSLes méthodes agiles dans TFS
Les méthodes agiles dans TFS
 

Plus de Kokou Gaglo

IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)
IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)
IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)
Kokou Gaglo
 
Mybatis : Spring Data à la rescousse
Mybatis : Spring Data à la rescousse Mybatis : Spring Data à la rescousse
Mybatis : Spring Data à la rescousse
Kokou Gaglo
 
Spring Batch
Spring BatchSpring Batch
Spring Batch
Kokou Gaglo
 
Intégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec JenkinsIntégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec Jenkins
Kokou Gaglo
 
Java - Lombok
Java - LombokJava - Lombok
Java - Lombok
Kokou Gaglo
 
MyBatis, une alternative à JPA.
MyBatis, une alternative à JPA.MyBatis, une alternative à JPA.
MyBatis, une alternative à JPA.
Kokou Gaglo
 
Contributions aux environnements de développement de services de télécoms da...
Contributions aux environnements de développement de  services de télécoms da...Contributions aux environnements de développement de  services de télécoms da...
Contributions aux environnements de développement de services de télécoms da...
Kokou Gaglo
 
Design pattern
Design patternDesign pattern
Design pattern
Kokou Gaglo
 
Mise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMSMise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMS
Kokou Gaglo
 
Programmation evénementielle
Programmation evénementielleProgrammation evénementielle
Programmation evénementielleKokou Gaglo
 

Plus de Kokou Gaglo (11)

IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)
IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)
IP Multimedia Subsystem : Démarrer avec Mobicents JainSLEE (Partie 1)
 
Mybatis : Spring Data à la rescousse
Mybatis : Spring Data à la rescousse Mybatis : Spring Data à la rescousse
Mybatis : Spring Data à la rescousse
 
Spring Batch
Spring BatchSpring Batch
Spring Batch
 
Intégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec JenkinsIntégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec Jenkins
 
Java - Lombok
Java - LombokJava - Lombok
Java - Lombok
 
MyBatis, une alternative à JPA.
MyBatis, une alternative à JPA.MyBatis, une alternative à JPA.
MyBatis, une alternative à JPA.
 
Contributions aux environnements de développement de services de télécoms da...
Contributions aux environnements de développement de  services de télécoms da...Contributions aux environnements de développement de  services de télécoms da...
Contributions aux environnements de développement de services de télécoms da...
 
Design pattern
Design patternDesign pattern
Design pattern
 
Mise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMSMise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMS
 
Serveur http
Serveur httpServeur http
Serveur http
 
Programmation evénementielle
Programmation evénementielleProgrammation evénementielle
Programmation evénementielle
 

Prise en main de Jhipster

  • 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
  • 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
  • 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”
  • 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.
  • 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.
  • 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
  • 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
  • 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
  • 41. Ajout de nouveaux rôles Ajouter le nouveau rôle dans AuthoritiesConstants.java (microservice) Ajouter le rôle dans authorities.csv (gateway)