Einführung in JHipster

1. Einleitung

Dieser Artikel gibt Ihnen einen schnellen Überblick über JHipster und zeigt Ihnen, wie Sie mit Befehlszeilentools eine einfache monolithische Anwendung und benutzerdefinierte Entitäten erstellen.

Wir werden auch den generierten Code in jedem Schritt untersuchen und auch die Build-Befehle und automatisierten Tests behandeln.

2. Was ist Jhipster?

Kurz gesagt, JHipster ist ein High-Level-Codegenerator, der auf einer umfangreichen Liste innovativer Entwicklungstools und -plattformen basiert .

Die Hauptkomponenten des Tools sind:

  • Yeoman, ein Front-End-Gerüstwerkzeug
  • Guter alter Frühlingsstiefel
  • AngularJS, das bekannte Javascript-Framework. JHipster funktioniert auch mit AngularJS 2

JHipster erstellt mit nur wenigen Shell-Befehlen ein vollwertiges Java-Webprojekt mit einer benutzerfreundlichen, reaktionsschnellen, dokumentierten REST-API, umfassender Testabdeckung, grundlegender Sicherheit und Datenbankintegration! Der resultierende Code ist gut kommentiert und folgt den Best Practices der Branche.

Weitere Schlüsseltechnologien sind:

  • Swagger für die API-Dokumentation
  • Maven, Npm, Yarn, Gulp und Bower als Abhängigkeitsmanager und Build-Tools
  • Jasmin, Winkelmesser, Gurke und Gatling als Test-Frameworks
  • Liquibase für die Datenbankversionierung

Wir sind nicht verpflichtet, alle diese Elemente in unserer generierten Anwendung zu verwenden. Die optionalen Elemente werden bei der Projekterstellung ausgewählt.

Eine wunderschöne, von JHipster generierte Anwendung. Dies ist das Ergebnis der Arbeit, die wir in diesem Artikel leisten werden.

3. Installation

Um JHipster zu installieren, müssen wir zuerst alle seine Abhängigkeiten installieren:

  • Java - Release 8 empfohlen
  • Git - das Versionskontrollsystem
  • NodeJS
  • Yeoman
  • Garn

Das sind genug Abhängigkeiten, wenn Sie sich für AngularJS 2 entscheiden. Wenn Sie jedoch lieber AngularJS 1 verwenden möchten, müssen Sie auch Bower und Gulp installieren .

Zum Abschluss müssen wir nur noch JHipster selbst installieren. Das ist der einfachste Teil. Da JHipster ein Yeoman-Generator ist, der wiederum ein Javascript-Paket ist, ist die Installation so einfach wie das Ausführen eines einfachen Shell-Befehls:

yarn global add generator-jhipster

Das ist es! Wir haben Yarn Package Manager verwendet, um den JHipster-Generator zu installieren.

4. Erstellen eines Projekts

Um ein JHipster-Projekt zu erstellen, muss im Wesentlichen ein Yeoman-Projekt erstellt werden . Alles beginnt mit dem Befehl yo :

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

Dadurch wird unser Projektordner mit dem Namen baeldung-app erstellt und die Befehlszeilenschnittstelle von Yeoman gestartet, die uns durch die Erstellung des Projekts führt.

Der Prozess umfasst 15 Schritte. Ich ermutige Sie, die verfügbaren Optionen für jeden Schritt zu erkunden. Im Rahmen dieses Artikels erstellen wir eine einfache monolithische Anwendung, ohne zu stark von den Standardoptionen abzuweichen.

Hier sind die Schritte, die für diesen Artikel am relevantesten sind:

  • Art der Anwendung - Wählen Sie die monolithische Anwendung (empfohlen für einfache Projekte).
  • Installation anderer Generatoren vom JHipster Marketplace - Typ N. In diesem Schritt möchten wir möglicherweise coole Add-Ons installieren. Einige beliebte sind Entity-Audits, die die Datenverfolgung ermöglichen. Bootstrap-Material-Design, das die trendigen Material Design-Komponenten und Winkel-Datentabellen verwendet
  • Maven oder Gradle - Wählen Sie Maven
  • Andere Technologien - Wählen Sie keine Optionen aus. Drücken Sie einfach die Eingabetaste , um zum nächsten Schritt zu gelangen. Hier können wir wählen, ob wir das soziale Login bei Google, Facebook und Twitter einbinden möchten, was eine sehr schöne Funktion ist.
  • Client-Framework - Wählen Sie [BETA] Angular 2.x. Wir könnten auch mit AngularJS 1 gehen
  • Internationalisierung aktivieren - Geben Sie Y ein und wählen Sie dann Englisch als Muttersprache. Wir können so viele Sprachen wählen, wie wir wollen, wie die zweite Sprache
  • Test-Frameworks - Wählen Sie Gatling und Winkelmesser

JHipster erstellt die Projektdateien und beginnt dann mit der Installation der Abhängigkeiten. Die folgende Meldung wird in der Ausgabe angezeigt:

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

Die Installation der Abhängigkeiten kann einige Zeit dauern. Sobald es fertig ist, wird angezeigt:

Server application generated successfully. Run your Spring Boot application: ./mvnw Client application generated successfully. Start your Webpack development server with: npm start

Unser Projekt ist jetzt erstellt. Wir können die Hauptbefehle in unserem Projektstammordner ausführen:

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

JHipster generiert eine README-Datei, die direkt im Stammordner unseres Projekts abgelegt wird . Diese Datei enthält Anweisungen zum Ausführen vieler anderer nützlicher Befehle für unser Projekt.

5. Übersicht über den generierten Code

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.

Mit dem Befehl ci-cd können Konfigurationsdateien für die folgenden CI-Tools erstellt werden:

  • Jenkins: Die Datei ist JenkinsFile
  • Travis CI: Die Datei ist .travis.yml
  • Kreis CI: Die Datei ist circle.yml
  • GitLab: Die Datei ist .gitlab-ci.yml

8. Fazit

Dieser Artikel gab einen kleinen Vorgeschmack darauf, wozu JHipster in der Lage ist. Es steckt natürlich viel mehr dahinter, als wir hier behandeln können. Erkunden Sie also unbedingt die offizielle JHipster-Website.

Und wie immer ist der Code auf GitHub verfügbar.