Introdução ao Framework JHipster

Hoje em dia existe framework para quase tudo, desde o controle de migrações do banco de dados até gerenciadores de bibliotecas para o front-end. Daí quando vamos iniciar um projeto novo, ficamos horas tentando configurar tudo, deixando tudo alinhado, afim de integrar todos os frameworks. Dentro da comunidade Java já existem alguns projetos para facilitar esse pontapé inicial e dar o “bootstrap” na configuração, dente os quais podemos citar o JBoss e o Spring Roo.

O JBoss Forge foi criado pela Red Hat no ano de 2011 e tem forte adoção pelos padrões Java EE 6. Já o Spring ROO é um projeto do Spring, com lançamento em 2009, e é um dos seus pontos fortes é o trabalho com AspectJ: uma linguagem de programação orientada a aspectos.

Correndo por fora para tentar chegar no topo e ganhar desses concorrentes, surgiu JHipster, que é scaffolding do Yeoman para gerar aplicações baseada no Spring Boot e AngularJS.

Uma das principais singularidades entres essas três ferramentas é o uso baseado em linha de comando para a criação de toda a estrutura do projeto. Essa tal criação do projeto é chamada de scaffolding. Esse conceito vem da engenharia civil é tem o sentido de montar o “esqueleto” de um projeto. Então cada framework que foi citado é um scaffolding e cada um tem suas particularidades.

O JBoss Forge e o Spring ROO tem o próprio scaffolding. A Red Hat e a Spring criaram e fizeram a manutenção deles, enquanto o JHipster é atualizado pela comunidade.

O Yeoman foi a escolha para fazer esse “esqueleto” dentro do JHipster, pois tem foco na comunidade front-end, pois gera toda a estrutura necessária, e faz seu trabalho tanto no back-end como no front-end. Além disso gera todas as classes Java e arquivos de configurações necessários para o projeto.

Outro ponto relevante sobre essas ferramentas é a customização. É possível criar o projeto com vários tipos de setups diferentes, como Maven ou Gradle, Grunt ou Gulp, Banco relacional ou não relacional, isso porque o JHipster conta com várias opções de tecnologia, tanto do lado do cliente quanto do servidor.

Dentro de todas essas ferramentas, esse artigo vai apresentar o framework juntamente com as seguintes opções:

• OAuth2 como opção para o login dentro da aplicação;
• Banco relacional MySQL, tanto no ambiente de Produção como no ambiente de desenvolvimento;
• Ehcache para as caches de consultas no banco de dados;
• Apache Maven para gerenciamento do back-end;
• Grunt para tasks no front-end;
• Gatling como framework de teste para o front-end.

Essas opções são simplesmente para demostrar o framework por serem fáceis de mostrar, não sendo é uma receita de bolo a ser seguida obrigatoriamente. Fique à vontade para testar as outras opções que são apresentadas na home do framework (vide seçãoLinks).

Repare que comentamos que o MySQL será usado para os dois ambientes do sistema. Isso porque o framework permite escolher bancos diferentes. Para esses casos é comum escolher o H2, que é um banco de dados mais simples para desenvolver e outro banco mais complexo para produção, como o MySQL, por exemplo. A escolha do mesmo banco para ambos é apenas para deixar os dois ambientes bem parecidos.

Outra vantagem que se deve levar em conta é a integração para deploy em algumas nuvens conhecidas do mercado, como a AWS, Heroku, OpenShift, entre outras. Isso pode te ajudar a ter um ambiente em produção cada vez mais rápido.

Para otimizar ainda mais o desenvolvimento, o JHipster também oferece três tipos de “perfis” para sua rodar sua aplicação:

1. Desenvolvimento: Esse é o perfil usado para a criação do projeto. As configurações ficam dentro de um arquivo chamado application-dev.yml. Nele é possível configurar vários elementos, desde a conexão com o banco de dados até a cache escolhida;
2. Produção: Esse perfil é usado para colocar sua aplicação em produção. Vale rodar esse perfil localmente para ver como vai ficar em produção, economizando assim um tempo, pois caso tenha algum erro, por exemplo, é possível identificar e rapidamente. As configurações desse perfil ficam no arquivo application-prod.yml, que é bem parecido com o arquivo do perfil de desenvolvimento, porém com os dados que devem conter no ambiente de produção;
3. Fast: Nesse perfil ele roda o Undertown ao invés do Tomcat, que é um servidor web mais flexível. Este desabilita algumas ferramentas, como o Liquibase (gerenciador de alterações do banco de dados), para deixar o start mais rápido. Ele usa as configurações do arquivo application-dev.yml como base. Se você está querendo subir algo rápido, que não tenha impacto no banco de dados, recomendamos usar esse perfil, pois é bem mais rápido e ajuda muito no nosso dia a dia, facilitando toda vez que temos que parar e subir a aplicação localmente.

Para entender melhor como funciona essa integração, passaremos para as configurações na prática. Veremos como é fácil integrar com poucos cliques. Configuraremos tudo em um ambiente Linux.

Para este artigo criamos uma máquina virtual para construir esse tutorial, então se algum momento você já tiver aquela ferramenta instalada no seu ambiente, você pode pular (por exemplo, se você já estiver com o node.js instalado, é bom pular essa parte).

Pré-requisitos

Para iniciar precisamos instalar o servidor Node.js e o seu gerenciador de pacotes npm.

No momento da escrita desse artigo a versão do node que está no repositório do Ubuntu é a 0.10, porém para rodar o projeto precisamos da versão 0.12 ou superior, então primeiro vamos baixar a versão certa a partir do site da própria, utilizando o comando a seguir no terminal:

curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -

Em seguida instale usando o comando a seguir:

sudo apt-get install -y nodejs

Agora precisamos instalar o npm usando o seguinte comando:

sudo apt-get install npm

Instalação

Agora podemos instalar o Yeoman com o seguinte comando usando o npm:

 sudo npm install -g yo

Em seguida podemos rodar o scaffolding do JHipster usando o comando a seguir:

 npm install -g generator-jhipster

Agora criei uma pasta chamada loja para rodar a aplicação lá dentro. Pelo terminal e dentro desta pasta rode o comando yo jhipster para começar a configuração, como mostra a Figura 1.

Figura 1. Iniciando a configuração

A primeira pergunta que o JHipster fará é se desejamos ou não enviar dados para serem usados nas estatísticas. Fica a seu critério enviar ou não.

Logo depois iniciamos a configuração do JHipster inserindo o nome do projeto e o caminho, como vemos na Figura 2.

Figura 2. Nome e caminho do projeto

Nesse ponto ele te pergunta tipo de autenticação você quer usar. O JHipster oferece quatro opções: Autorização Sessão HTTP, Autorização Sessão HTTP com Login Social (Facebook, Google Plus e Twitter), Autenticação OAuth2 e Autenticação baseado em token. Não entraremos em detalhes sobre cada uma, pois daria um artigo a parte, porém faça a sua escolha com segurança já que é difícil voltar atrás nisso. As duas primeiras opções são Stateful e as duas últimas são Stateless. Para esse artigo escolhemos OAuth2 Authentication, como mostra a Figura 3.

Figura 3. Escolha da autenticação

Agora escolheremos qual banco de dados utilizaremos, se relacional ou não relacional.Para o nosso artigo escolheremos a primeira opção. A seguir é perguntado sobre o banco para a produção e, no nosso caso, vamos escolher o MySQL. Há um aviso sobre a escolha do Oracle como banco, já que ele não é open source, como mostra a Figura 4.

Figura 4. Escolha do banco e seu tipo

A mesma pergunta é feita para o banco de dados do ambiente de desenvolvimento e novamente escolhemos o MySQL.

Nesse ponto do setup ele pergunta se você quer usar o segundo nível de cache do Hibernate. Se sim, qual opção você quer: ehcache ou Hazelcast? Eu vou escolher o ehcache, como mostra a Figura 5.

Figura 5. Escolha do nível de cache

Agora ele quer saber se você quer usar o ElasticSearch, que é um mecanismo de busca full-text. Porém, como nosso exemplo não vai precisar, escolhemos No.

Ele pergunta se você quer usar o Hazelcast para clusterizar as sessões HTTP, mas não vai ser preciso nesse nosso exemplo.

A próxima pergunta é com relação ao uso do Websocket para as conexões entre um navegador web e um servidor, mas esse também não usaremos.

Agora chegamos as escolhas do back-end e front end. Você poderá escolher entre Maven ou Gradle e Grunt ou Gulp.js, como mostra a Figura 6.

Figura 6. Escolha do back-end e front-end

Em seguida precisamos escolher se queremos usar a biblioteca escrita em ruby LibSass para seu CSS: escolhemos No.

A próxima pergunta é com relação ao AngularJS, que tem suporte a internacionalização da aplicação: como não usaremos, escolha No.

E quais frameworks para testes você quer usar: Gatling, cucumber ou Protractor? Conforme a Figura 7, você pode escolher todos e não apenas só um. Para esse artigo usaremos o Gatling, que é um framework baseado no Scala e com reports em HTML.

Figura 7. Escolha dos frameworks de teste

Pronto, agora ele vai criar e configurar todo o projeto. Depois de tudo gerado, a estrutura do projeto será igual à da Figura 8.

Figura 8. Estrutura do projeto.

Rodando a aplicação

Para rodarmos a nossa aplicação precisamos configurar o nosso banco de dados. Por isso crie um banco de dados chamado lojacomum no MySQL e coloque a configuração no arquivo de configuração application-dev.yml (Figura 9).

Figura 9. Arquivo application-dev.yml

Já dentro do arquivo é só alterar a URL do banco de dados, usuário e senha, conforme mostra a Figura 10.

Figura 10. Estrutura do arquivo

Pelo terminal basta rodar o comando mvn do Maven e tudo vai rodar perfeitamente. Esse processo demora um pouco, pois ele vai baixar todas as dependências na primeira vez que rodar. A tela no console será algo como a Figura 11.

Figura 11. Rodando o Maven

Em seguida abra o browser e a cara da aplicação padrão será igual à da Figura 12.

Figura 12. Aplicação no browser

Por padrão, o JHipster já vem com alguns usuários para testarmos e ver como está sua aplicação. Vamos então começar usando o login admin (use também para a senha). Em seguida, vá até o último menu, conforme mostra a Figura 13.

Figura 13. Menu de ferramentas

Nesse menu você encontra várias ferramentas que o JHipster criou. Vamos entender cada uma.

A opção API mostra todos os endpoints da aplicação usando o Swagger (Figura 14), que é uma API RESTful de documentação interativa e geração de SKD.

Figura 14. Swagger

Veja que o mesmo já tem os endpoints listados e prontos para testar e usar em outros dispositivos. Vamos ver o endpoint do user, presente na Figura 15.

Figura 15. Endpoint user

Clicando em algum endpoint desses teremos a descrição dos parâmetros e ainda uma opção de teste para ver o retorno, como mostram as Figuras 16 e 17.

Figura 16. Parâmetros

Figura 17. Opção de teste

Agora vamos passar para o outro Métrica, que mostra como está sua máquina virtual Java (JVM), como mostra a Figura 18. Isso é muito útil para quando sua aplicação for para produção.

Figura 18. Menu Métrica

Já o menu de auditoria serve para ver o que está acontecendo com sua aplicação, como mostra a Figura 19.

Figura 19. Menu Auditoria

Criando um CRUD

Como podemos ver, o segundo menu está vazio, pois não criamos nenhuma entidade. Para isso criaremos de forma fácil um CRUD completo pela linha de comando.

Essa entidade vai ser chamar PRODUTO e é um objeto da nossa loja, que terá um nome, uma descrição, um valor e uma data de vencimento.

Vamos voltar para o terminal e rodar o comando yo jhipster:entity Produto. Assim, ele vai começar a perguntar o que desejamos fazer. As perguntas serão:

1. A primeira pergunta é se queremos criar um novo atributo, vamos dizer sim.
2. Qual é nome desse campo? Vamos colocar nome.
3. Qual é tipo desse atributo? Ele aceita uma lista bem completa de opções, tais como:
   
   • String;
   • Integer;
   • Long;
   • Float;
   • Double;
   • BigDecimal;
   • LocalDate;
   • ZonedDateTime;
   • Boolean;
   • Enum;
   • Blob (nessa edição, essa opção ainda é BETA);
   
   Para o nosso exemplo escolhemos String, como mostra a Figura 20.
   
   Figura 20. Escolha do tipo
4. Agora ele quer saber se você quer colocar algum tipo de validação. Aqui o campo será obrigatório, ou seja, não pode ser deixado nulo. Para isso ele usará o Bean Validation para esta tarefa. Veja como fica a configuração na Figura 21.
   
   Figura 21. Configuração da validação
5. Repare que ao final o JHipster deixa um pequeno resumo do atributo, como mostra a Figura 22.
   
   Figura 22. Resumo do atributo
6. Em seguida ele pergunta se queremos adicionar outro atributo. Respondemos sim para continuar. Vamos repetir os passos para a criação dos atributos preço e dataVencimento, como mostram os resumos das Figuras 23 e 24, respectivamente.
   
   Figura 23. Atributo preço
   
   Figura 24. Atributo dataVencimento.
7. Com os atributos criados, na próxima vez que perguntar se queremos criar outro atributo, responda não.

Depois de colocar todos os atributos dessa entidade ele vai perguntar se você quer fazer algum relacionamento com outra entidade, mas como não temos outra entidade, vamos responder não para essa pergunta também.

Agora ele quer saber se você quer usar um DTO (ainda em BETA no momento da escrita desse artigo) para acessar os dados no banco de dados. Como não usaremos, escolha não.

Em seguida ele perguntará sobre o uso de um SERVICE para essa entidade. Como não usaremos, escolha a primeira opção, conforme mostra a Figura 25.

Figura 25. Escolha do service

Essa parte agora é sobre seu front-end. Que tipo de paginação você quer para essa entidade? Ele te dá algumas opções: paginação simples, paginação com links, scroll infinito (tipo o Facebook) ou sem paginação. Vamos escolher a opção de scroll infinito.

Com tudo terminado, repare no tanto de arquivos que ele criou sozinho na Figura 26.

Figura 26. Criação de arquivos

Foram criados tanto o back-end como o front-end da aplicação. Para vermos como ficou, atualize a página no browser, como mostra a Figura 27.

Figura 27. Novo menu

Agora a listagem (ainda vazia, claro) e o botão para criar um novo produto estão prontos, como mostra a Figura 28.

Figura 28. Cadastro de produtos.

A aparência do cadastro será igual à da Figura 29.

Figura 29. Aparência do cadastro.

Após cadastrar um exemplo qualquer, veja na Figura 30 como ficou o cadastro.

Figura 30. Cadastro do item

Veja que os botões ao lado correspondem as demais opções do CRUD, assim temos um CRUD completo.

Como vimos, o JHipster tem muitas opções para escolher. O objetivo deste artigo foi demostrar um pouco de um stack bem simples e bem usado no mercado pela gama de tecnologias atreladas a ele.

É um framework ainda novo, então temos que tomar cuidados, pois ainda pode ter vários bugs. Como é um projeto open-source, você pode contribuir para a evolução dele na comunidade.

É uma ótima opção para projetos Java e AngularJS. Outro ponto positivo é a facilidade de manutenção, pois tudo que está nele á é padrão na comunidade Java, então é fácil a procura por ajuda.

Um ponto negativo é que ele te pede uma bagagem do desenvolvedor, dificultando para programadores iniciantes. A documentação ainda não é uma das melhores, mas está em evolução.

Links

JHipster
http://jhipster.github.io/