TOC

Introdução ao JHipster

Introdução ao JHipster

1. Introdução

Este artigo fornece uma visão geral rápida do JHipster, mostra como criar um aplicativo monolítico simples e entidades personalizadas usando ferramentas de linha de comando.

Também examinaremos o código gerado durante cada etapa e também cobriremos os comandos de compilação e testes automatizados.

2. O que é Jhipster

JHipster é, em poucas palavras,a high-level code generator built upon an extensive list of cutting-edge development tools and platforms.

Os principais componentes da ferramenta são:

O JHipster cria, com apenas alguns comandos de shell, um projeto completo da Web Java com uma API REST documentada amigável e responsiva, cobertura abrangente de testes, segurança básica e integração de banco de dados! O código resultante é bem comentado e segue as melhores práticas do setor.

Outras principais tecnologias alavancadas por ele são:

Não somos obrigados a usar todos esses itens em nosso aplicativo gerado. Os itens opcionais são selecionados durante a criação do projeto.

JHipster App

Um lindo aplicativo gerado pelo JHipster. Este é o resultado do trabalho que faremos ao longo deste artigo.

3. Instalação

Para instalar o JHipster, primeiro precisamos instalar todas as suas dependências:

Isso é dependências suficientes se você decidir usar AngularJS 2. No entanto,if you prefer to go with AngularJS 1 instead, you would also need to install Bower and Gulp.

Agora, para finalizar, basta instalar o próprio JHipster. Essa é a parte mais fácil. Como JHipster é umYeoman generator, que por sua vez é um pacote Javascript, a instalação é tão simples quanto executar um comando shell simples: 

yarn global add generator-jhipster

É isso aí! Usamos o gerenciador de pacotes Yarn para instalar o gerador JHipster.

4. Criando um projeto

To create a JHipster project essentially is to build a Yeoman project. Tudo começa com o comandoyo: 

mkdir example-app && cd example-app
yo jhipster

Isso criará nossa pasta de projeto, chamadaexample-app, e iniciará a interface de linha de comando do Yeoman que nos guiará pela criação do projeto.

O processo envolve 15 etapas. Convido você a explorar as opções disponíveis em cada etapa. No escopo deste artigo, criaremos um aplicativo simples,Monolithic, sem nos desviar muito das opções padrão.

Aqui estão as etapas mais relevantes para este artigo:

  • Type of application - EscolhaMonolithic application (recommended for simple projects)

  • Installation of other generators from the JHipster Marketplace - DigiteN. Nesta etapa, podemos querer instalar complementos legais. Alguns populares são a auditoria de entidades que permite o rastreamento de dados; bootstrap-material-design, que usa os modernos componentes do Material Design e as tabelas de dados angulares

  • Maven or Gradle - EscolhaMaven

  • Other technologies - Não selecione nenhuma opção, apenas pressioneEnter para passar para a próxima etapa. Aqui podemos optar por conectar o Login social ao Google, Facebook e Twitter, que é um recurso muito bom.

  • Client framework - Escolha[BETA] Angular 2.x. Também poderíamos escolher AngularJS 1

  • Enable internationalization - DigiteY e escolhaEnglish como idioma nativo. Podemos escolher quantos idiomas quisermos como o segundo idioma

  • Test frameworks - SelecioneGatling eProtractor

image

O JHipster criará os arquivos do projeto e começará a instalar as dependências. A seguinte mensagem será mostrada na saída: 

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

A instalação das dependências pode demorar um pouco. Quando terminar, será exibido: 

Server application generated successfully.

Run your Spring Boot application:
 ./mvnw

Client application generated successfully.

Start your Webpack development server with:
npm start

Nosso projeto foi criado. Podemos executar os principais comandos na pasta raiz do projeto: 

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

JHipster generates a README file, placed right in the root folder of our project. Esse arquivo contém instruções para executar muitos outros comandos úteis relacionados ao nosso projeto.

5. Visão geral do código gerado

Dê uma olhada nos arquivos gerados automaticamente. Você notará que o projeto se parece um pouco com um projeto Java / Spring padrão, mas com muitos extras.

Como o JHipster também se encarrega de criar o código de front-end, você encontrará um arquivopackage.json, uma pastawebpack e algumas outras coisas relacionadas à web.

Vamos explorar rapidamente alguns dos arquivos essenciais.

5.1. Arquivos de back-end

  • Como esperado, o código Java está contido na pastasrc/main/java

  • A pastasrc/main/resources possui parte do conteúdo estático usado pelo código Java. Aqui encontraremos os arquivos de internacionalização (na pastai18n), modelos de e-mail e alguns arquivos de configuração

  • Os testes de unidade e integração estão localizados na pastasrc/test/java

  • Os testes de desempenho (Gatling) estão emsrc/test/gatling. No entanto, neste ponto, não haverá muito conteúdo nesta pasta. Depois de criarmos algumas entidades, os testes de desempenho para esses objetos serão localizados aqui

5.2. A parte dianteira

  • A pasta raiz do front end ésrc/main/webapp

  • A pastaapp contém muitos dos módulos AngularJS

  • i18n contém os arquivos de internacionalização para a parte do front end

  • Os testes de unidade (Karma) estão na pastasrc/test/javascript/spec

  • Testes ponta a ponta (transferidor) estão na pastasrc/test/javascript/e2e

6. Criação de entidades personalizadas

As entidades são os blocos de construção do nosso aplicativo JHipster. Eles representam os objetos de negócios, como aUser, aTask, aPost, aComment, etc.

Criar entidades com JHipster é um processo indolor. Podemos criar um objeto usando ferramentas de linha de comando, da mesma forma como criamos o próprio projeto, ou viaJDL-Studio, uma ferramenta online que gera uma representação JSON das entidades que podem ser importadas posteriormente para o nosso projeto.

Neste artigo, vamos usar as ferramentas de linha de comando para criar duas entidades:PosteComment.

UmPost deve ter um título, um conteúdo de texto e uma data de criação. Ele também deve estar relacionado a um usuário, que é o criador dosPost. UmUser pode ter muitosPosts associados a eles.

UmPost também pode ter zero ou muitosComments. CadaComment possui um texto e uma data de criação.

Para iniciar o processo de criação de nossa entidadePost, vá para a pasta raiz do nosso projeto e digite: 

yo jhipster:entity post

Agora siga as etapas apresentadas pela interface.

  • Adicione um campo denominadotitle do tipoString e adicione algumas regras de validação ao campo (Required,Minimum lengtheMaximum length)

  • Adicione outro campo chamadocontent do tipoString e torne-o tambémRequired

  • Adicione um terceiro campo chamadocreationDate, do tipoLocalDate

  • Agora vamos adicionar a relação comUser. Observe que a entidadeUser já existe. É criado durante a concepção do projeto. O nome da outra entidade éuser, o nome do relacionamento écreator e o tipo émany-to-one, o campo de exibição éname, e é melhor fazer o relacionamentorequired

  • Não escolha usar um DTO, vá comDirect entity ao invés

  • Escolha injetar o repositório diretamente na classe de serviço. Observe que, em um aplicativo do mundo real, provavelmente seria mais razoável separar o controlador REST da classe de serviço

  • Para terminar, selecioneinfinite scroll como o tipo de paginação

  • Permita ao JHipster substituir arquivos existentes, se necessário

Repita o processo acima para criar uma entidade chamadacomment, com dois campos, texto, do tipoString,ecreationDate do tipoLocalDate. Comment também deve ter um relacionamentomany-to-one obrigatório comPost.

É isso aí! O processo envolve muitas etapas, mas você verá que não leva muito tempo para concluí-las.

Você notará que o JHipster cria vários novos arquivos e modifica alguns outros, como parte do processo de criação das entidades:

  • É criada uma pasta.jhipster, contendo um arquivoJSON para cada objeto. Esses arquivos descrevem a estrutura das entidades

  • As classes anotadas de@Entity reais estão no pacotedomain

  • Repositórios são criados no pacoterepository

  • Controladores REST vão no pacoteweb.rest

  • Os changelogs da Liquibase para cada criação de tabela estão na pastaresources/config/liquibase/changelog

  • Na parte front-end, uma pasta para cada entidade é criada no diretórioentities

  • Os arquivos de internacionalização são configurados na pastai18n (sinta-se à vontade para modificá-los se quiser)

  • Vários testes, front-end e back-end são criados na pastasrc/test

Isso é muito código!

Sinta-se livre para executar os testes e verifique se todos estão passando. Agora também podemos executar testes de desempenho com o Gatling, usando o comando (o aplicativo deve estar em execução para que esses testes sejam aprovados): 

mvnw gatling:execute

Se você deseja verificar o front-end em ação, inicie o aplicativo com./mvnw, navegue atéhttp://localhost:8080e faça login como o usuárioadmin (a senha éadmin )

EscolhaPost no menu superior, sob o item de menuEntities. Você verá uma lista vazia, que posteriormente conterá todas as postagens. Clique no botãoCreate a new Post para abrir o formulário de inclusão:

image

Observe como o JHipster é cuidadoso nos componentes do formulário e nas mensagens de validação. É claro que podemos modificar o front end o quanto quisermos, mas o formulário é muito bem construído.

7. Suporte de integração contínua

O JHipster pode criar automaticamente arquivos de configuração para as ferramentas de Integração Contínua mais usadas. Basta executar este comando: 

yo jhipster:ci-cd

E responda as perguntas. Aqui, podemos escolher para quais ferramentas de IC queremos criar arquivos de configuração, se queremos usar o Docker, o Sonar e até mesmo implantar no Heroku como parte do processo de compilação.

O comandoci-cd pode criar arquivos de configuração para as seguintes ferramentas de CI:

  • Jenkins: o arquivo éJenkinsFile

  • Travis CI: o arquivo é.travis.yml

  • Círculo CI: o arquivo écircle.yml

  • GitLab: o arquivo é.gitlab-ci.yml

8. Conclusão

Este artigo forneceu um pouco do gosto do que o JHipster é capaz. É claro que há muito mais coisas do que podemos cobrir aqui, portanto, continue explorandoofficial JHipster website.

E como sempre, o código está disponívelover on GitHub.

Related