Pengantar JHipster

1. Perkenalan

Artikel ini akan memberi Anda gambaran umum singkat tentang JHipster, menunjukkan cara membuat aplikasi monolitik sederhana dan entitas kustom menggunakan alat baris perintah.

Kami juga akan memeriksa kode yang dihasilkan selama setiap langkah, dan juga mencakup perintah build dan pengujian otomatis.

2. Apa Itu Jhipster

Singkatnya, JHipster adalah generator kode tingkat tinggi yang dibangun di atas daftar lengkap alat dan platform pengembangan mutakhir.

Komponen utama alat ini adalah:

  • Yeoman, alat perancah ujung depan
  • Spring Boot tua yang bagus
  • AngularJS, kerangka Javascript terkemuka. JHipster juga bekerja dengan AngularJS 2

JHipster membuat, hanya dengan beberapa perintah shell, proyek web Java lengkap dengan REST API terdokumentasi yang ramah, responsif, dan cakupan pengujian komprehensif, keamanan dasar, dan integrasi database! Kode yang dihasilkan dikomentari dengan baik dan mengikuti praktik terbaik industri.

Teknologi utama lainnya yang dimanfaatkan olehnya adalah:

  • Kesombongan, untuk dokumentasi API
  • Maven, Npm, Yarn, Gulp dan Bower sebagai manajer ketergantungan dan alat pembuat
  • Jasmine, Busur Derajat, Mentimun dan Gatling sebagai kerangka uji
  • Liquibase untuk pembuatan versi database

Kami tidak diharuskan untuk menggunakan semua item tersebut pada aplikasi yang kami buat. Item opsional dipilih selama pembuatan proyek.

Aplikasi cantik buatan JHipster. Ini adalah hasil dari pekerjaan yang akan kami lakukan sepanjang artikel ini.

3. Instalasi

Untuk menginstal JHipster, pertama-tama kita harus menginstal semua dependensinya:

  • Java - direkomendasikan rilis 8
  • Git - sistem kontrol versi
  • NodeJS
  • Petani kecil
  • Benang

Dependensi itu cukup jika Anda memutuskan untuk menggunakan AngularJS 2. Namun, jika Anda lebih suka menggunakan AngularJS 1, Anda juga perlu menginstal Bower dan Gulp .

Sekarang, untuk menyelesaikannya, kita hanya perlu menginstal JHipster itu sendiri. Itu bagian yang paling mudah. Karena JHipster adalah generator Yeoman, yang pada gilirannya merupakan paket Javascript, menginstalnya semudah menjalankan perintah shell sederhana:

yarn global add generator-jhipster

Itu dia! Kami telah menggunakan pengelola paket Yarn untuk menginstal generator JHipster.

4. Membuat Proyek

Untuk membuat proyek JHipster pada dasarnya adalah membangun proyek Yeoman . Semuanya dimulai dengan perintah yo :

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

Ini akan membuat folder proyek kita, bernama baeldung-app , dan memulai antarmuka baris perintah Yeoman yang akan memandu kita dalam membuat proyek.

Prosesnya melibatkan 15 langkah. Saya mendorong Anda untuk menjelajahi opsi yang tersedia di setiap langkah. Dalam cakupan artikel ini, kami akan membuat aplikasi Monolitik sederhana , tanpa terlalu banyak menyimpang dari opsi default.

Berikut langkah-langkah yang paling relevan dengan artikel ini:

  • Jenis aplikasi - Pilih aplikasi Monolitik (disarankan untuk proyek sederhana)
  • Instalasi generator lain dari JHipster Marketplace - Ketik N. Pada langkah ini kita mungkin ingin menginstal add-ons keren. Beberapa yang populer adalah audit entitas yang memungkinkan penelusuran data; bootstrap-material-design, yang menggunakan komponen Material Design yang trendi, dan angular-datatables
  • Maven atau Gradle - Pilih Maven
  • Teknologi lainnya - Jangan pilih opsi apa pun, cukup tekan Enter untuk pindah ke langkah berikutnya. Di sini kita dapat memilih untuk memasukkan login Sosial dengan Google, Facebook, dan Twitter, yang merupakan fitur yang sangat bagus.
  • Kerangka kerja klien - Pilih [BETA] Angular 2.x. Kami juga bisa menggunakan AngularJS 1
  • Aktifkan internasionalisasi - Ketik Y , lalu pilih bahasa Inggris sebagai bahasa ibu. Kita dapat memilih bahasa sebanyak yang kita inginkan sebagai bahasa kedua
  • Kerangka uji - Pilih Gatling dan Busur derajat

JHipster akan membuat file proyek dan kemudian akan mulai menginstal dependensi. Pesan berikut akan ditampilkan di output:

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

Penginstalan dependensi dapat memakan waktu cukup lama. Setelah selesai maka akan ditampilkan:

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

Proyek kami sekarang dibuat. Kami dapat menjalankan perintah utama di folder root proyek kami:

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

JHipster menghasilkan file README, ditempatkan tepat di folder root proyek kami . File itu berisi instruksi untuk menjalankan banyak perintah berguna lainnya yang terkait dengan proyek kita.

5. Gambaran Umum Kode yang Dihasilkan

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 file konfigurasi untuk alat CI berikut:

  • Jenkins: filenya adalah JenkinsFile
  • Travis CI: filenya adalah .travis.yml
  • Circle CI: file tersebut adalah circle.yml
  • GitLab: filenya adalah .gitlab-ci.yml

8. Kesimpulan

Artikel ini memberikan sedikit gambaran tentang kemampuan JHipster. Tentu saja ada lebih banyak dari yang bisa kita bahas di sini, jadi pasti terus menjelajahi situs web resmi JHipster.

Dan seperti biasa, kode tersedia di GitHub.