Introduzione a JHipster

1. Introduzione

Questo articolo ti fornirà una rapida panoramica di JHipster, ti mostrerà come creare una semplice applicazione monolitica ed entità personalizzate utilizzando gli strumenti della riga di comando.

Esamineremo anche il codice generato durante ogni passaggio e copriremo anche i comandi di compilazione e i test automatici.

2. Cos'è Jhipster

JHipster è, in poche parole, un generatore di codice di alto livello costruito su un ampio elenco di strumenti e piattaforme di sviluppo all'avanguardia.

I componenti principali dello strumento sono:

  • Yeoman, uno strumento per ponteggi front-end
  • Buon vecchio Spring Boot
  • AngularJS, il famoso framework Javascript. JHipster funziona anche con AngularJS 2

JHipster crea, con pochi comandi shell, un vero e proprio progetto web Java con un front-end intuitivo e reattivo, API REST documentata, copertura di test completa, sicurezza di base e integrazione del database! Il codice risultante è ben commentato e segue le migliori pratiche del settore.

Altre tecnologie chiave da essa sfruttate sono:

  • Swagger, per la documentazione API
  • Maven, Npm, Yarn, Gulp e Bower come gestori delle dipendenze e strumenti di costruzione
  • Jasmine, Goniometro, Cucumber e Gatling come framework di test
  • Liquibase per il controllo delle versioni del database

Non siamo tenuti a utilizzare tutti questi elementi sulla nostra applicazione generata. Gli elementi opzionali vengono selezionati durante la creazione del progetto.

Una bellissima applicazione generata da JHipster. Questo è il risultato del lavoro che faremo in questo articolo.

3. Installazione

Per installare JHipster, dobbiamo prima installare tutte le sue dipendenze:

  • Java - versione 8 consigliata
  • Git - il sistema di controllo della versione
  • NodeJS
  • Yeoman
  • Filato

Sono sufficienti dipendenze se decidi di usare AngularJS 2. Tuttavia, se preferisci utilizzare AngularJS 1, dovresti anche installare Bower e Gulp .

Ora, per finire, dobbiamo solo installare JHipster stesso. Questa è la parte più semplice. Poiché JHipster è un generatore di Yeoman, che a sua volta è un pacchetto Javascript, l'installazione è semplice come eseguire un semplice comando di shell:

yarn global add generator-jhipster

Questo è tutto! Abbiamo utilizzato il gestore di pacchetti Yarn per installare il generatore di JHipster.

4. Creazione di un progetto

Creare un progetto JHipster essenzialmente è costruire un progetto Yeoman . Tutto inizia con il comando yo :

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

Questo creerà la nostra cartella del progetto, denominata baeldung-app , e avvierà l'interfaccia della riga di comando di Yeoman che ci guiderà attraverso la creazione del progetto.

Il processo prevede 15 passaggi. Ti incoraggio a esplorare le opzioni disponibili in ogni passaggio. Nell'ambito di questo articolo, creeremo una semplice applicazione monolitica , senza deviare troppo dalle opzioni predefinite.

Ecco i passaggi più rilevanti per questo articolo:

  • Tipo di applicazione : scegli l' applicazione monolitica (consigliata per progetti semplici)
  • Installazione di altri generatori da JHipster Marketplace - Tipo N. In questo passaggio potremmo voler installare fantastici componenti aggiuntivi. Alcuni popolari sono il controllo dell'entità che consente la tracciabilità dei dati; bootstrap-material-design, che utilizza i componenti di Material Design alla moda e angular-datatables
  • Maven o Gradle : scegli Maven
  • Altre tecnologie : non selezionare alcuna opzione, premere semplicemente Invio per passare alla fase successiva. Qui possiamo scegliere di collegare l'accesso social con Google, Facebook e Twitter, che è una caratteristica molto bella.
  • Framework client : scegli [BETA] Angular 2.x. Potremmo anche andare con AngularJS 1
  • Abilita internazionalizzazione : digita Y , quindi scegli l' inglese come lingua madre. Possiamo scegliere quante lingue vogliamo come seconda lingua
  • Framework di test : selezionare Gatling e Goniometro

JHipster creerà i file di progetto e inizierà quindi a installare le dipendenze. Nell'output verrà visualizzato il seguente messaggio:

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

L'installazione delle dipendenze può richiedere un po 'di tempo. Al termine verrà visualizzato:

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

Il nostro progetto è ora creato. Possiamo eseguire i comandi principali nella cartella principale del nostro progetto:

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

JHipster genera un file README, posizionato direttamente nella cartella principale del nostro progetto . Quel file contiene le istruzioni per eseguire molti altri comandi utili relativi al nostro progetto.

5. Panoramica del codice generato

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.

Il comando ci-cd può creare file di configurazione per i seguenti strumenti CI:

  • Jenkins: il file è JenkinsFile
  • Travis CI: il file è .travis.yml
  • Circle CI: il file è circle.yml
  • GitLab: il file è .gitlab-ci.yml

8. Conclusione

Questo articolo ha dato un po 'del gusto di ciò di cui è capace JHipster. Ovviamente c'è molto di più di quanto possiamo coprire qui, quindi continua ad esplorare il sito Web ufficiale di JHipster.

E come sempre, il codice è disponibile su GitHub.