Введение в JHipster

1. Введение

Эта статья даст вам краткий обзор JHipster, покажет, как создать простое монолитное приложение и пользовательские объекты с помощью инструментов командной строки.

Мы также рассмотрим сгенерированный код на каждом этапе, а также рассмотрим команды сборки и автоматические тесты.

2. Что такое Джипстер

Короче говоря, JHipster — это высокоуровневый генератор кода, построенный на обширном списке передовых инструментов и платформ разработки.

Основными компонентами средства являются:

• Yeoman — интерфейсный инструмент для создания строительных лесов.
• Старый добрый весенний ботинок
• AngularJS , известный фреймворк Javascript. JHipster также работает с AngularJS 2 .

JHipster создает с помощью всего нескольких команд оболочки полноценный веб-проект Java с дружественным, отзывчивым внешним интерфейсом, документированным REST API, полным охватом тестов, базовой безопасностью и интеграцией с базой данных! Полученный код хорошо прокомментирован и соответствует лучшим отраслевым практикам.

Другими ключевыми технологиями, которые он использует, являются:

• Swagger для документации по API
• Maven , Npm , Yarn , Gulp и Bower в качестве менеджеров зависимостей и инструментов сборки
• Jasmine , Protractor , Cucumber и Gatling в качестве тестовых фреймворков
• Liquibase для управления версиями базы данных

Мы не обязаны использовать все эти элементы в нашем сгенерированном приложении. Необязательные элементы выбираются при создании проекта.

Красивое приложение, созданное JHipster. Это результат работы, которую мы будем выполнять в этой статье.

3. Установка

Чтобы установить JHipster, нам сначала нужно установить все его зависимости:

• Java – рекомендуется выпуск 8
• Git — система контроля версий
• NodeJS
• Йомен
• Пряжа

Этого достаточно, если вы решите использовать AngularJS 2. Однако, если вы предпочитаете вместо этого использовать AngularJS 1, вам также потребуется установить Bower и Gulp .

Теперь, чтобы закончить, нам просто нужно установить сам JHipster. Это самая легкая часть. Поскольку JHipster — это генератор Yeoman , который, в свою очередь, представляет собой пакет Javascript, установка выполняется так же просто, как запуск простой команды оболочки:

yarn global add generator-jhipster

Вот и все! Мы использовали менеджер пакетов Yarn для установки генератора JHipster.

4. Создание проекта

Создание проекта JHipster, по сути, означает создание проекта Yeoman . Все начинается с команды yo :

mkdir foreach-app && cd foreach-app
yo jhipster

Это создаст папку нашего проекта с именем foreach-app и запустит интерфейс командной строки Yeoman, который поможет нам создать проект.

Процесс включает 15 шагов. Я рекомендую вам изучить доступные варианты на каждом этапе. В рамках этой статьи мы создадим простое монолитное приложение, не слишком отклоняясь от параметров по умолчанию.

Вот шаги, наиболее важные для этой статьи:

• Тип приложения — выберите « Монолитное приложение» (рекомендуется для простых проектов) .
• Установка других генераторов из JHipster Marketplace — тип N. На этом этапе мы можем захотеть установить классные дополнения. Некоторые популярные из них: аудит сущностей, позволяющий отслеживать данные; bootstrap-material-design, в котором используются модные компоненты Material Design и angular-datatables.
• Maven или Gradle — выберите Maven
• Другие технологии — не выбирайте никаких параметров, просто нажмите Enter , чтобы перейти к следующему шагу. Здесь мы можем подключить вход через социальные сети с помощью Google, Facebook и Twitter, что является очень приятной функцией.
• Клиентская среда — выберите [BETA] Angular 2.x. Мы также могли бы использовать AngularJS 1.
• Включите интернационализацию — введите Y , затем выберите английский в качестве родного языка. Мы можем выбрать столько языков, сколько захотим, в качестве второго языка.
• Среды тестирования — выберите Gatling и Protractor

JHipster создаст файлы проекта, а затем начнет установку зависимостей. В выводе будет показано следующее сообщение:

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

Установка зависимостей может занять некоторое время. Как только он завершится, он отобразит:

Server application generated successfully.

Run your Spring Boot application:
 ./mvnw

Client application generated successfully.

Start your Webpack development server with:
npm start

Теперь наш проект создан. Мы можем запустить основные команды в корневой папке нашего проекта:

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

JHipster генерирует файл README, помещая его прямо в корневую папку нашего проекта . Этот файл содержит инструкции по запуску многих других полезных команд, связанных с нашим проектом.

5. Обзор сгенерированного кода

Взгляните на автоматически сгенерированные файлы. Вы заметите, что проект очень похож на стандартный проект Java/Spring, но с большим количеством дополнений.

Поскольку JHipster также позаботится о создании внешнего кода, вы найдете файл package.json , папку webpack и некоторые другие материалы, связанные с Интернетом.

Давайте быстро рассмотрим некоторые важные файлы.

5.1. Внутренние файлы

• Как и ожидалось, код Java содержится в папке src/main/java .
• Папка src/main/resources содержит некоторый статический контент, используемый кодом Java. Здесь мы найдем файлы интернационализации (в папке i18n ), шаблоны электронной почты и некоторые файлы конфигурации.
• Модульные и интеграционные тесты находятся в папке src/test/java .
• Тесты производительности (Gatling) находятся в src/test/gatling . Однако на данный момент в этой папке не будет большого количества контента. Как только мы создадим несколько сущностей, здесь будут расположены тесты производительности для этих объектов.

5.2. Внешний интерфейс

• Корневая папка внешнего интерфейса — src/main/webapp.
• Папка приложения содержит большую часть модулей AngularJS.
• i18n содержит файлы интернационализации для передней части.
• Модульные тесты (Karma) находятся в папке src/test/javascript/spec .
• Сквозные тесты (Protractor) находятся в папке src/test/javascript/e2e

6. Создание пользовательских объектов

Сущности являются строительными блоками нашего приложения JHipster. Они представляют бизнес-объекты, такие как User , Task , Post , Comment и т. д.

Создание объектов с помощью JHipster — безболезненный процесс. Мы можем создать объект с помощью инструментов командной строки, аналогично тому, как мы создали сам проект, или с помощью JDL-Studio , онлайн-инструмента, который генерирует JSON-представление объектов, которые впоследствии можно импортировать в наш проект.

В этой статье давайте воспользуемся инструментами командной строки для создания двух объектов: Post и Comment .

Пост должен иметь заголовок , текстовое содержание и дату создания. Это также должно быть связано с пользователем, который является создателем публикации . Пользователь может иметь много сообщений , связанных с ним.

Пост также может иметь ноль или много комментариев . Каждый комментарий имеет текст и дату создания.

Чтобы запустить процесс создания нашей сущности Post , перейдите в корневую папку нашего проекта и введите:

yo jhipster:entity post

Теперь следуйте шагам, представленным в интерфейсе.

• Добавьте поле с именем title типа String и добавьте в поле несколько правил проверки ( обязательно , минимальная длина и максимальная длина ) .
• Добавьте еще одно поле с именем content типа String и сделайте его также обязательным
• Добавьте третье поле с именем createDate и типом LocalDate.
• Теперь давайте добавим отношения с User . Обратите внимание, что объект User уже существует. Он создается во время концепции проекта. Имя другой сущности — user , имя отношения — создатель , тип — many-to-one , поле отображения — имя, и лучше сделать отношение обязательным .
• Не выбирайте использование DTO, вместо этого используйте прямой объект .
• Выберите внедрение репозитория непосредственно в класс обслуживания . Обратите внимание, что в реальном приложении, вероятно, было бы более разумно отделить контроллер REST от класса обслуживания.
• Чтобы закончить, выберите бесконечную прокрутку в качестве типа нумерации страниц.
• Дайте JHipster разрешение на перезапись существующих файлов, если это необходимо

Повторите описанный выше процесс, чтобы создать объект с именем comment с двумя полями: text типа String и createDate типа LocalDate . Комментарий также должен иметь требуемую связь « многие к одному » с Post .

Вот и все! В этом процессе много шагов, но вы увидите, что их выполнение не займет много времени.

Вы заметите, что JHipster создает кучу новых файлов и изменяет несколько других как часть процесса создания сущностей:

• А . создается папка jhipster , содержащая файл JSON для каждого объекта. Эти файлы описывают структуру сущностей
• Фактические аннотированные классы @Entity находятся в пакете домена .
• Репозитории создаются в пакете репозитория
• Контроллеры REST входят в пакет web.rest
• Журналы изменений Liquibase для каждого создания таблицы находятся в папке resources/config/liquibase/changelog.
• Во фронтальной части создается папка для каждой сущности в директории сущностей
• Файлы интернационализации настраиваются в папке i18n (не стесняйтесь изменять их, если хотите)
• Несколько тестов, front-end и back-end создаются в папке src/test .

Это довольно много кода!

Не стесняйтесь запускать тесты и дважды проверять, все ли проходят. Теперь мы также можем запустить тесты производительности с помощью Gatling, используя команду (приложение должно быть запущено, чтобы эти тесты прошли):

mvnw gatling:execute

Если вы хотите проверить интерфейс в действии, запустите приложение с расширением . /mvnw , перейдите по адресу http://localhost:8080 и войдите в систему как администратор (пароль admin ).

Выберите « Опубликовать » в верхнем меню в разделе « Сущности » . Вам будет показан пустой список, который позже будет содержать все сообщения. Нажмите кнопку « Создать новую публикацию» , чтобы открыть форму добавления:

Обратите внимание, как тщательно JHipster относится к компонентам формы и сообщениям проверки. Конечно, мы можем модифицировать интерфейс как угодно, но форма и так очень хорошо построена.

7. Непрерывная поддержка интеграции

JHipster может автоматически создавать файлы конфигурации для наиболее часто используемых инструментов непрерывной интеграции. Просто запустите эту команду:

yo jhipster:ci-cd

И ответьте на вопросы. Здесь мы можем выбрать, для каких инструментов CI мы хотим создать файлы конфигурации, хотим ли мы использовать Docker, Sonar и даже развернуть их на Heroku как часть процесса сборки.

Команда ci-cd может создавать файлы конфигурации для следующих инструментов CI:

• Дженкинс: файл JenkinsFile
• Travis CI: файл .travis.yml
• Circle CI: файл круг.yml
• GitLab: файл .gitlab-ci.yml

8. Заключение

Эта статья дала небольшое представление о том, на что способен JHipster. Конечно, это намного больше, чем мы можем рассказать здесь, поэтому обязательно продолжайте изучать официальный сайт JHipster .

И, как всегда, код доступен на GitHub .