Introduction à JHipster

1. Introduction

Cet article vous donnera un aperçu rapide de JHipster, 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, un générateur de code de haut niveau basé sur une longue liste d'outils et de plates-formes de développement de pointe.

Les principaux composants de l'outil sont:

  • Yeoman, un outil d'échafaudage frontal
  • Bonne vieille botte de printemps
  • AngularJS, le principal framework Javascript. JHipster fonctionne également avec AngularJS 2

JHipster crée, avec seulement quelques commandes shell, un projet Web Java complet avec une interface REST conviviale et réactive, une API REST documentée, une couverture de test complète, une sécurité de base et une intégration de base de données! Le code qui en résulte est bien commenté et suit les meilleures pratiques de l'industrie.

Les autres technologies clés mises à profit sont:

  • Swagger, pour la documentation API
  • Maven, Npm, Yarn, Gulp et Bower en tant que gestionnaires de dépendances et outils de création
  • Jasmine, Protractor, Cucumber et Gatling comme cadres de test
  • Liquibase pour la gestion des versions de base de données

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

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

3. Installation

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

  • Java - version 8 recommandée
  • Git - le système de contrôle de version
  • NodeJS
  • Yeoman
  • Fil

Cela suffit si vous décidez d'utiliser AngularJS 2. Cependant, si vous préférez utiliser AngularJS 1 à la place, vous devrez également installer Bower et Gulp .

Maintenant, pour finir, il nous suffit d'installer JHipster lui-même. C'est la partie la plus simple. Puisque JHipster est un générateur Yeoman, 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

Créer un projet JHipster consiste essentiellement à construire un projet Yeoman . Tout commence par la commande yo :

mkdir baeldung-app && cd baeldung-app yo jhipster

Cela créera notre dossier de projet, nommé baeldung-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 monolithique simple , sans trop s'écarter des options par défaut.

Voici les étapes les plus pertinentes pour cet article:

  • Type d'application - Choisissez une application monolithique (recommandée pour les projets simples)
  • Installation d'autres générateurs du JHipster Marketplace - Type N. Dans cette étape, nous pourrions vouloir installer des add-ons sympas. Certains d'entre eux sont l'audit d'entité qui permet le traçage des données; bootstrap-material-design, qui utilise les composants à la mode de Material Design et les tables de données angulaires
  • Maven ou Gradle - Choisissez Maven
  • Autres technologies - Ne sélectionnez aucune option, appuyez simplement sur Entrée pour passer à l'étape suivante. Ici, nous pouvons choisir de brancher la connexion sociale avec Google, Facebook et Twitter, ce qui est une fonctionnalité très intéressante.
  • Framework client - Choisissez [BETA] Angular 2.x. On pourrait aussi aller avec AngularJS 1
  • Activer l'internationalisation - Tapez Y , puis choisissez l' anglais comme langue maternelle. Nous pouvons choisir autant de langues que nous le souhaitons comme deuxième langue
  • Cadres de test - Sélectionnez Gatling et Protractor

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 génère un fichier README, placé directement dans le dossier racine de notre projet . Ce fichier contient des instructions pour exécuter de nombreuses autres commandes utiles liées à notre projet.

5. Aperçu du code généré

Take a look at the files automatically generated. You'll notice that the project looks quite a bit like a standard Java/Spring project, but with a lot of extras.

Since JHipster takes care of creating the front-end code as well, you'll find a package.json file, a webpack folder, and some other web related stuff.

Let's quickly explore some of the critical files.

5.1. Back-end Files

  • As expected, the Java code is contained in the src/main/java folder
  • The src/main/resources folder has some of the static content used by the Java code. Here we'll find the internationalization files (in the i18n folder), email templates and some configuration files
  • Unit and integration tests are located in the src/test/java folder
  • Performance (Gatling) tests are in src/test/gatling. However, at this point, there won't be much content in this folder. Once we have created some entities, the performance tests for those objects will be located here

5.2. Front-end

  • The root front end folder is src/main/webapp
  • The app folder contains much of the AngularJS modules
  • i18n contains the internationalization files for the front end part
  • Unit tests (Karma) are in the src/test/javascript/spec folder
  • End-to-end tests (Protractor) are in the src/test/javascript/e2e folder

6. Creating Custom Entities

Entities are the building blocks of our JHipster application. They represent the business objects, like a User, a Task, a Post, a Comment, etc.

Creating entities with JHipster it's a painless process. We can create an object using command line tools, similarly to how we've created the project itself, or via JDL-Studio, an online tool that generates a JSON representation of the entities that can later be imported into our project.

In this article, let's use the command line tools to create two entities: Post and Comment.

A Post should have a title, a text content and a creation date. It should also be related to a user, who is the creator of the Post. A User can have many Posts associated with them.

A Post can also have zero or many Comments. Each Comment has a text and creation date.

To fire up the creation process of our Post entity, go to the root folder of our project and type:

yo jhipster:entity post

Now follow the steps presented by the interface.

  • Add a field named title of type String and add some validation rules to the field (Required, Minimum length and Maximum length)
  • Add another a field called content of type String and make it also Required
  • Add a third field named creationDate, of type LocalDate
  • Now let's add the relationship with User. Notice that the entity User already exists. It's created during the conception of the project. The name of the other entity is user, the relationship name is creator, and the type is many-to-one, the display field is name, and it's better to make the relationship required
  • Do not choose to use a DTO, go with Direct entity instead
  • Choose to inject the repository directly into the service class. Notice that, in a real world application, it would probably be more reasonable to separate the REST controller from the service class
  • To finish up, select infinite scroll as the pagination type
  • Give JHipster permission to overwrite existent files if required

Repeat the process above to create an entity named comment, with two fields, text, of type String, and creationDate of type LocalDate. Comment should also have a required many-to-one relationship with Post.

That's it! There are many steps to the process, but you'll see that it doesn't take that much time to complete them.

You will notice that JHipster creates a bunch of new files, and modifies a few others, as part of the process of creating the entities:

  • A .jhipster folder is created, containing a JSON file for each object. Those files describe the structure of the entities
  • The actual @Entity annotated classes are in the domain package
  • Repositories are created in the repository package
  • REST controllers go in the web.rest package
  • Liquibase changelogs for each table creation are in the resources/config/liquibase/changelog folder
  • In the front-end part, a folder for each entity is created in the entities directory
  • Internationalization files are set up in the i18n folder (feel free to modify those if you want to)
  • Several tests, front-end, and back-end are created in the src/test folder

That's quite a lot of code!

Feel free to run the tests and double check that all are passing. Now we can also run performance tests with Gatling, using the command (the application has to be running for these tests to pass):

mvnw gatling:execute

If you want to check the front-end in action, start up the application with ./mvnw, navigate to //localhost:8080 and log in as the admin user (password is admin).

Choose Post on the top menu, under the Entities menu item. You will be shown an empty list, that will later contain all posts. Click on the Create a new Post button to bring up the inclusion form:

Notice how careful JHipster is on the form components and validation messages. Off course we can modify the front end as much as we want, but the form is very well built as it is.

7. Continuous Integration Support

JHipster can automatically create configuration files for the most used Continuous Integration tools. Just run this command:

yo jhipster:ci-cd

And answer the questions. Here we can choose which CI tools we want to create config files for, whether we want to use Docker, Sonar and even deploy to Heroku as part of the build process.

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

  • Jenkins: le fichier est JenkinsFile
  • Travis CI: le fichier est .travis.yml
  • Circle CI: le fichier est circle.yml
  • GitLab: le fichier est .gitlab-ci.yml

8. Conclusion

Cet article a donné un petit aperçu de ce dont JHipster est capable. Il y a bien sûr beaucoup plus que ce que nous pouvons couvrir ici, alors continuez à explorer le site officiel de JHipster.

Et comme toujours, le code est disponible over sur GitHub.