Pengenalan kepada JHipster

1. Pengenalan

Artikel ini akan memberi gambaran ringkas mengenai JHipster, menunjukkan kepada anda cara membuat aplikasi monolitik sederhana dan entiti khusus menggunakan alat baris perintah.

Kami juga akan memeriksa kod yang dihasilkan selama setiap langkah, dan juga merangkumi perintah build dan ujian automatik.

2. Apa itu Jhipster

JHipster, ringkasnya, penjana kod tahap tinggi yang dibina berdasarkan senarai alat dan platform pembangunan canggih yang luas.

Komponen utama alat ini adalah:

  • Yeoman, alat perancah depan
  • Spring Boot yang baik
  • AngularJS, kerangka kerja Javascript yang terkenal. JHipster juga berfungsi dengan AngularJS 2

JHipster membuat, dengan hanya beberapa perintah shell, projek web Java lengkap dengan front-end yang mesra, responsif, REST API yang didokumentasikan, liputan ujian komprehensif, keselamatan asas dan integrasi pangkalan data! Kod yang dihasilkan dikomentari dengan baik dan mengikuti amalan terbaik industri.

Teknologi utama lain yang digunakan adalah:

  • Swagger, untuk dokumentasi API
  • Maven, Npm, Benang, Gulp dan Bower sebagai pengurus pergantungan dan membina alat
  • Jasmine, Protractor, Timun dan Gatling sebagai kerangka ujian
  • Liquibase untuk versi pangkalan data

Kami tidak diminta untuk menggunakan semua item tersebut pada aplikasi yang dihasilkan. Item pilihan dipilih semasa membuat projek.

Aplikasi buatan JHipster yang indah. Ini adalah hasil kerja yang akan kami laksanakan sepanjang artikel ini.

3. Pemasangan

Untuk memasang JHipster, pertama-tama kita perlu memasang semua kebergantungannya:

  • Java - keluaran 8 disyorkan
  • Git - sistem kawalan versi
  • NodeJS
  • Yeoman
  • Benang

Itu cukup bergantung jika anda memutuskan untuk menggunakan AngularJS 2. Namun, jika anda lebih suka menggunakan AngularJS 1, anda juga perlu memasang Bower dan Gulp .

Sekarang, untuk menyelesaikannya, kita hanya perlu memasang JHipster itu sendiri. Itulah bahagian yang paling mudah. Oleh kerana JHipster adalah penjana Yeoman, yang seterusnya adalah pakej Javascript, pemasangan semudah menjalankan perintah shell sederhana:

yarn global add generator-jhipster

Itu sahaja! Kami telah menggunakan pengurus pakej Benang untuk memasang penjana JHipster.

4. Membuat Projek

Untuk membuat projek JHipster pada dasarnya adalah membina projek Yeoman . Semuanya bermula dengan arahan yo :

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

Ini akan membuat folder projek kami, bernama baeldung-app , dan memulakan antara muka baris perintah Yeoman yang akan memandu kami membuat projek.

Prosesnya melibatkan 15 langkah. Saya mendorong anda untuk meneroka pilihan yang ada pada setiap langkah. Dalam ruang lingkup artikel ini, kami akan membuat aplikasi Monolitik yang mudah , tanpa menyimpang terlalu banyak dari pilihan lalai.

Berikut adalah langkah-langkah yang paling relevan dengan artikel ini:

  • Jenis aplikasi - Pilih aplikasi Monolitik (disyorkan untuk projek sederhana)
  • Pemasangan penjana lain dari JHipster Marketplace - Type N. Pada langkah ini, kita ingin memasang add-on yang sejuk. Beberapa yang popular adalah audit entiti yang membolehkan pengesanan data; bootstrap-material-design, yang menggunakan komponen Reka Bentuk Bahan yang bergaya, dan jadual sudut
  • Maven atau Gradle - Pilih Maven
  • Teknologi lain - Jangan pilih pilihan, tekan Enter untuk beralih ke langkah seterusnya. Di sini kita boleh memilih untuk memasukkan log masuk Sosial dengan Google, Facebook, dan Twitter, yang merupakan ciri yang sangat bagus.
  • Kerangka pelanggan - Pilih [BETA] Sudut 2.x. Kami juga boleh menggunakan AngularJS 1
  • Dayakan pengantarabangsaan - Taip Y , kemudian pilih Bahasa Inggeris sebagai bahasa ibunda. Kita boleh memilih seberapa banyak bahasa yang kita mahukan sebagai bahasa kedua
  • Kerangka ujian - Pilih Gatling dan Protractor

JHipster akan membuat fail projek dan kemudian akan mula memasang dependensi. Mesej berikut akan ditunjukkan dalam output:

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

Pemasangan pergantungan boleh memakan masa sedikit. Setelah selesai, ia akan memaparkan:

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

Projek kami kini dibuat. Kami boleh menjalankan perintah utama pada folder root projek kami:

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

JHipster menghasilkan fail README, diletakkan tepat di folder root projek kami . Fail itu mengandungi arahan untuk menjalankan banyak arahan berguna lain yang berkaitan dengan projek kami.

5. Tinjauan Kod Terhasil

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.

Perintah ci-cd dapat membuat fail konfigurasi untuk alat CI berikut:

  • Jenkins: failnya adalah JenkinsFile
  • Travis CI: failnya adalah .travis.yml
  • Bulatan CI: failnya adalah circle.yml
  • GitLab: failnya adalah .gitlab-ci.yml

8. Kesimpulannya

Artikel ini memberi sedikit gambaran tentang kemampuan JHipster. Sudah tentu ada lebih banyak daripada yang dapat kita bahas di sini, jadi pasti terus meneroka laman web JHipster rasmi.

Dan seperti biasa, kodnya tersedia di GitHub.