TOC

Intro à JHipster

Introduction à JHipster

1. introduction

Cet article vous donnera un aperçu rapide de JHipster et vous montrera comment créer une application monolithique simple et des entités personnalisées à l'aide d'outils de ligne de commande.

Nous examinerons également le code généré à chaque étape et couvrirons également les commandes de construction et les tests automatisés.

2. Qu'est-ce que Jhipster

JHipster est, en un mot,a high-level code generator built upon an extensive list of cutting-edge development tools and platforms.

Les principaux composants de l'outil sont:

JHipster crée, avec seulement quelques commandes de shell, un projet Web Java à part entière avec une API REST documentée conviviale et réactive, une couverture de test complète, une sécurité de base et une intégration de la base de données! Le code résultant est bien commenté et suit les meilleures pratiques de l’industrie.

Les autres technologies clés mises à profit sont:

Nous ne sommes pas obligés d'utiliser tous ces éléments dans notre application générée. Les éléments facultatifs sont sélectionnés lors de la création du projet.

JHipster App

Une belle application générée par JHipster. C'est le résultat du travail que nous allons accomplir tout au long de cet article.

3. Installation

Pour installer JHipster, nous devons d'abord installer toutes ses dépendances:

C’est assez de dépendances si vous décidez d’utiliser AngularJS 2. Cependant,if you prefer to go with AngularJS 1 instead, you would also need to install Bower and Gulp.

Maintenant, pour finir, il suffit d’installer JHipster lui-même. C'est la partie la plus facile. Puisque JHipster est unYeoman generator, qui à son tour est un package Javascript, l'installation est aussi simple que d'exécuter une simple commande shell: 

yarn global add generator-jhipster

C'est ça! Nous avons utilisé le gestionnaire de packages Yarn pour installer le générateur JHipster.

4. Créer un projet

To create a JHipster project essentially is to build a Yeoman project. Tout commence par la commandeyo: 

mkdir example-app && cd example-app
yo jhipster

Cela créera notre dossier de projet, nomméexample-app, et démarrera l'interface de ligne de commande de Yeoman qui nous guidera tout au long de la création du projet.

Le processus comprend 15 étapes. Je vous encourage à explorer les options disponibles à chaque étape. Dans le cadre de cet article, nous allons créer une application simple,Monolithic, sans trop s'écarter des options par défaut.

Voici les étapes les plus pertinentes pour cet article:

  • Type of application - ChoisissezMonolithic application (recommended for simple projects)

  • Installation of other generators from the JHipster Marketplace - TapezN. Dans cette étape, nous pourrions vouloir installer des modules complémentaires sympas. Parmi les plus populaires, citons l'audit d'entités qui permet le traçage des données; bootstrap-material-design, qui utilise les composants branchés de Material Design et les données angulaires

  • Maven or Gradle - ChoisissezMaven

  • Other technologies - Ne sélectionnez aucune option, appuyez simplement surEnter pour passer à l'étape suivante. Ici, nous pouvons choisir de connecter le login social avec Google, Facebook et Twitter, ce qui est une fonctionnalité très intéressante.

  • Client framework - Choisissez[BETA] Angular 2.x. Nous pourrions également utiliser AngularJS 1

  • Enable internationalization - TapezY, puis choisissezEnglish comme langue native. Nous pouvons choisir autant de langues que nous voulons comme deuxième langue

  • Test frameworks - SélectionnezGatling etProtractor

image

JHipster créera les fichiers du projet et commencera ensuite à installer les dépendances. Le message suivant sera affiché dans la sortie: 

I'm all done. Running npm install for you to install the required
   dependencies. If this fails, try running the command yourself.

L'installation des dépendances peut prendre un peu de temps. Une fois terminé, il affichera: 

Server application generated successfully.

Run your Spring Boot application:
 ./mvnw

Client application generated successfully.

Start your Webpack development server with:
npm start

Notre projet est maintenant créé. Nous pouvons exécuter les commandes principales sur le dossier racine de notre projet: 

./mvnw #starts Spring Boot, on port 8080
./mvnw clean test #runs the application's tests
yarn test #runs the client tests

JHipster generates a README file, placed right in the root folder of our project. Ce fichier contient des instructions pour exécuter de nombreuses autres commandes utiles liées à notre projet.

5. Présentation du code généré

Regardez les fichiers générés automatiquement. Vous remarquerez que le projet ressemble un peu à un projet Java / Spring standard, mais avec de nombreux extras.

Puisque JHipster s'occupe également de créer le code frontal, vous trouverez un fichierpackage.json, un dossierwebpack et d'autres éléments liés au Web.

Explorons rapidement certains des fichiers critiques.

5.1. Fichiers back-end

  • Comme prévu, le code Java est contenu dans le dossiersrc/main/java

  • Le dossiersrc/main/resources contient une partie du contenu statique utilisé par le code Java. Nous trouverons ici les fichiers d'internationalisation (dans le dossieri18n), les modèles d'e-mails et certains fichiers de configuration

  • Les tests unitaires et d'intégration se trouvent dans le dossiersrc/test/java

  • Les tests de performance (Gatling) sont ensrc/test/gatling. Cependant, à ce stade, il n'y aura pas beaucoup de contenu dans ce dossier. Une fois que nous avons créé certaines entités, les tests de performance de ces objets sont situés ici.

5.2. L'extrémité avant

  • Le dossier frontal racine estsrc/main/webapp

  • Le dossierapp contient la plupart des modules AngularJS

  • i18n contient les fichiers d'internationalisation pour la partie frontale

  • Les tests unitaires (Karma) sont dans le dossiersrc/test/javascript/spec

  • Les tests de bout en bout (rapporteur) se trouvent dans le dossiersrc/test/javascript/e2e

6. Création d'entités personnalisées

Les entités sont les blocs de construction de notre application JHipster. Ils représentent les objets métier, comme unUser, unTask, unPost, unComment, etc.

Créer des entités avec JHipster est un processus sans douleur. Nous pouvons créer un objet à l’aide des outils de ligne de commande, de la même manière que nous avons créé le projet lui-même, ou viaJDL-Studio, un outil en ligne qui génère une représentation JSON des entités qui peuvent être importées ultérieurement dans notre projet.

Dans cet article, utilisons les outils de ligne de commande pour créer deux entités:Post etComment.

UnPost doit avoir un titre, un contenu textuel et une date de création. Il doit également être lié à un utilisateur, qui est le créateur desPost. UnUser peut être associé à plusieursPosts.

UnPost peut également avoir zéro ou plusieursComments. ChaqueComment a un texte et une date de création.

Pour lancer le processus de création de notre entitéPost, allez dans le dossier racine de notre projet et tapez: 

yo jhipster:entity post

Suivez maintenant les étapes présentées par l'interface.

  • Ajoutez un champ nommétitle de typeString et ajoutez quelques règles de validation au champ (Required,Minimum length etMaximum length)

  • Ajoutez un autre champ appelécontent de typeString et faites-en égalementRequired

  • Ajoutez un troisième champ nommécreationDate, de typeLocalDate

  • Ajoutons maintenant la relation avecUser. Notez que l'entitéUser existe déjà. Il est créé lors de la conception du projet. Le nom de l'autre entité estuser, le nom de la relation estcreator et le type estmany-to-one, le champ d'affichage estname, et il est préférable de faire la relationrequired

  • Ne choisissez pas d'utiliser un DTO, utilisez plutôtDirect entity

  • Choisissez d'injecter le référentiel directement dans la classe de service. Notez que, dans une application du monde réel, il serait probablement plus raisonnable de séparer le contrôleur REST de la classe de service

  • Pour terminer, sélectionnezinfinite scroll comme type de pagination

  • Autoriser JHipster à écraser les fichiers existants si nécessaire

Répétez le processus ci-dessus pour créer une entité nomméecomment, avec deux champs, texte, de typeString, etcreationDate de typeLocalDate. Comment doit également avoir une relationmany-to-one obligatoire avecPost.

C'est ça! Le processus comporte de nombreuses étapes, mais vous verrez que cela ne prend pas beaucoup de temps pour les terminer.

Vous remarquerez que JHipster crée un groupe de nouveaux fichiers et en modifie quelques autres dans le cadre du processus de création des entités:

  • Un dossier.jhipster est créé, contenant un fichierJSON pour chaque objet. Ces fichiers décrivent la structure des entités

  • Les classes annotées@Entity réelles sont dans le packagedomain

  • Les référentiels sont créés dans le packagerepository

  • Les contrôleurs REST vont dans le packageweb.rest

  • Les changelogs Liquibase pour chaque création de table se trouvent dans le dossierresources/config/liquibase/changelog

  • Dans la partie frontale, un dossier pour chaque entité est créé dans le répertoireentities

  • Les fichiers d'internationalisation sont mis en place dans le dossieri18n (n'hésitez pas à les modifier si vous le souhaitez)

  • Plusieurs tests, frontaux et back-end sont créés dans le dossiersrc/test

C'est beaucoup de code!

N'hésitez pas à exécuter les tests et à vérifier que tout va bien. Maintenant, nous pouvons également exécuter des tests de performance avec Gatling, en utilisant la commande (l'application doit être en cours d'exécution pour que ces tests réussissent): 

mvnw gatling:execute

Si vous souhaitez vérifier le front-end en action, démarrez l'application avec./mvnw, accédez àhttp://localhost:8080 et connectez-vous en tant qu'utilisateuradmin (le mot de passe estadmin ).

ChoisissezPost dans le menu supérieur, sous l'élément de menuEntities. Vous verrez une liste vide, qui contiendra plus tard tous les messages. Cliquez sur le boutonCreate a new Post pour afficher le formulaire d'inclusion:

image

Notez à quel point JHipster est attentif aux composants de formulaire et aux messages de validation. Bien sûr, nous pouvons modifier le front-end autant que nous le souhaitons, mais le formulaire est très bien construit.

7. Support d'intégration continue

JHipster peut créer automatiquement des fichiers de configuration pour les outils d'intégration continue les plus utilisés. Il suffit de lancer cette commande: 

yo jhipster:ci-cd

Et répondez aux questions. Ici, nous pouvons choisir les outils de configuration pour lesquels nous voulons créer des fichiers de configuration, utiliser Docker, Sonar ou même le déployer sur Heroku dans le cadre du processus de construction.

La commandeci-cd peut créer des fichiers de configuration pour les outils CI suivants:

  • Jenkins: le fichier estJenkinsFile

  • Travis CI: le fichier est.travis.yml

  • Cercle CI: le fichier estcircle.yml

  • GitLab: le fichier est.gitlab-ci.yml

8. Conclusion

Cet article donnait un peu le goût de ce dont JHipster est capable. Il y a bien sûr beaucoup plus que ce que nous pouvons couvrir ici, alors continuez à explorer lesofficial JHipster website.

Et comme toujours, le code est disponibleover on GitHub.

Related