Desenvolvedor Java Full Stack

AngularJS
HTML5
JavaScript
JAVANode.js
DESENVOLVEDOR JAVA
Full Stack

DESENVOLVEDOR JAVA
FULL STACK
Fillipe Cordeiro e Thiago Pagotto | Java Produtivo
1ª edição

Copyright © 2017, Java Produtivo
 
Todos os direitos reservados e protegidos pela Lei
9.610 de 19/02/1998
Nenhuma parte deste eBook, sem autorização
prévia por escrito do autor, poderá ser
reproduzida ou transmitida sejam quais forem os
meios empregados: eletrônicos, mecânicos,
fotográﬁcos, gravação ou quaisquer outros.
Os autores não possuem nenhum vínculo com as
instituições e produtos citados, utilizando-os
apenas para ilustrações.
Desenvolvedor Java Full Stack
AUTORES Fillipe Cordeiro e Thiago Pagotto
SITE www.javaprodutivo.com.br
E-MAIL contato@javaprodutivo.com.br

Sumário
Prefácio
Para quem é esse ebook?
O ambiente
Criando um App com o JHipster
Entidade Tarefas
Criando a aplicação
Criando as entidades
Entidade Projeto
Feedback!
Introdução
IntelliJ (IDE)
Arquitetura da App
As Camadas
O que esperar do ebook?
Componentes de Frontend
Angular JS
Bootstrap
Internacionalização
Componentes de Backend
Spring Framework
JPA

Segurança
Liquibase Migrations
Componentes Adicicionais - Angular Material
REST
Arquivos de conﬁguração
Spring Boot Actuator
MAVEN X GRADLE
Customizando uma Tela
Indo para Produção
Conclusão

Prefácio
Thiago Pagotto
Fatos envolvendo tecnologias costumam ser longos, mas vou tentar ser
breve. Quando iniciei profissionalmente com o Java EE (comecei a
programar em 2006 com Delphi) no ano de 2010 fiquei assustado com a
gama de tecnologias que eram necessárias para compor um sistema.
Em 2012 além de iniciar minha jornada na computação em nuvem, tive a
chance de conhecer mais o Spring Framework e em 2013 pude trabalhar
com o Fillipe Cordeiro em um projeto de missão crítica. Neste projeto
tivemos a possibilidade de arquitetar toda a aplicação e de trabalhar com
tecnologias recentes e de mercado. Fizemos escolhas felizes, como usar o
Spring, AngularJs e muitas outras como Websockets, StompJS e Flyway
Migration. Desde aquele ano, trabalhos juntos em outros projetos e sempre
optamos pelo Spring e AngularJS.
O projeto mais recente foi um middleware de integração de sistemas, onde
usamos todo o framework do Spring, como o Boot, Batch, REST e o
AngularJS. O mais incrível disso tudo foi a facilidade de usar o framework e
de criar frontends de alto nível sem ter conhecimentos aprofundados de UI
(um mal da grande maioria dos desenvolvedores backend). Por fim, por
sermos consultores, tínhamos prazos apertados e ao fim dos projetos
tínhamos que deixar o código com um alto nível de manutenibilidade, para
que os outros desenvolvedores pudessem entender o código e evoluir o
produto. E tudo isso nunca foi um obstáculo para nós, pois estas tecnologias
nos permitiram criar esses projetos com rapidez e facilidade.
Quando o Fillipe Cordeiro me mostrou o JHipster fiquei impressionado e ao
mesmo tempo contente. Todos aqueles frameworks que vínhamos usando
para desenvolver em Java era realmente o que os melhores
desenvolvedores Java do mundo usavam. Tanto que juntaram todas essas
tecnologias e muitas outras em um gerador de aplicações altamente
robusto, escalável e flexível.

E é por isso que escrevemos este ebook, para trazer para a comunidade
Java o gosto, a vontade e o conhecimento de usar as melhores tecnologias
do mercado, com rapidez e qualidade. gerador de aplicações altamente
robusto, escalável e flexível.

O que esperar do ebook?
Esperamos que você possa construir aplicações de forma rápida e escalável
ao usar o Jhipster e toda a pilha de tecnologias que ele introduz.
Garantimos a você que será possível criar uma aplicação e colocá-la em
produção em poucos dias.
Para quem é este ebook?
A Estimamos que ao ler este ebook você já tenha um conhecimento, de
básico para intermediário em Java. Saiba usar a orientação a objetos, bem
como conheça os frameworks mais famosos do mundo Java (JPA/
Hibernate, Spring ...) além de um banco de dados como o MySQL.
Também esperamos que você já escreva códigos em Java, saiba usar a API
do Java e tenha tido contato com um gerenciador de dependências (Ant,
Maven ou Gradle) e um versionador de código fonte (GIT).
Como ferramenta, usaremos o IntelliJ, que além de extremamente fácil é
bem didático e produtivo.
Feedback!
Encontrou um erro ? Quer fazer uma crítica, sugestão ou elogio?
Sua opinião é muito importante para nós! (é sério).
contato@javaprodutivo.com.br
www.javaprodutivo.com.br
www.facebook.com/JavaProdutivo

#ficadica: Neste link abaixo você encontra o repositório do código da nossa
app no Github, onde pode baixar o código e acompanhar a evolução do
nosso App. Existe uma branch para cada etapa do projeto.
https://github.com/JavaProdutivo/jirapster

Introdução
Para quem é este ebook?
Para nos acompanhar nessa jornada de criar uma aplicação com o Jhipster
você vai precisar de um computador com Linux, macOS ou Windows. No
seu S.O deverá estar instalado o NodeJS e o Java JDK. Preferencialmente
nas versões estáveis, este ebook usou o NodeJS com 6.8.1 e o Java JDK 8
update 101. Para seguir nosso código tenha o git também.
• A versão do Jhipster usada foi a 3.9.1;
• NPM na versão 3.10.8;
• Yeoman na versão 1.8.5;
• O Bower na 1.7.9;
• E por fim o Maven 3.3.9.
• Se preferir você pode usar este box do Vagrant com o ambiente de
desenvolvimento necessário pronto para usar.
• E se você já tem familiaridade com o Docker, pode usar este docker-
compose.

Criando um App com JHipster
Para que você possa acompanhar os passos a seguir precisamos ter em
mente o problema que vamos resolver. Neste momento estamos falando da
aplicação que vamos construir.
Há muito tempo atrás (cerca de 10 anos atrás) quando íamos aprender
alguma linguagem nova (geralmente desktop e cliente/servidor), via os
instrutores usar sistemas para controle de locadora de DVD, sistemas de
controle de despesas. Para aquela época eram bons exemplos para
demonstrar diversas partes de um sistema.
Hoje a realidade é outra, estamos em outro nível de aplicações, hoje as
aplicações possuem inteligência própria e fazem coisas incríveis, sem
contar o número de integrações com outros aplicativos e ou serviços.
Vamos criar um aplicativo para controle de tarefas de desenvolvimento de
software. Por que escolhemos um sistema de controle de tarefas de
desenvolvimento? Porque é simples, engloba vários módulos que devem
compor um app web e controlar nossas tarefas de desenvolvimento é algo
do nosso dia a dia. Do que adianta mostrar como construir um app para
controle de manufatura por exemplo se não conhecermos bem os
problemas que envolvem a manufatura?
Basicamente o que nossa aplicação de controle de tarefas irá fazer é algo
como o JIRA, Redmine (e até uns mais simples como Trello) ou qualquer
outro issue tracker faz. Teremos logins, cadastro de projetos e cadastro de
tarefas. Teremos uma tela de visualização destas tarefas. Nosso login terá
integração com os logins via redes sociais e nossa tela de visualização será
construída dentro da estrutura gerada pelo Jhipster, mas feita na mão, ou
seja, por nós mesmos, sem usar o gerador e assim poderemos entender
cada componente e como eles se relacionam dentro do aplicativo.
Por fim veremos como empacotar nossa aplicação e colocá-la em produção,

implantando em um servidor na nuvem, com acesso público e até
monitoramento.
Criando a aplicação
Com o ambiente pronto e com o que vamos fazer em mente hora de
começar.
Abra um terminal de linha de comando e entre dentro do diretório onde você
organiza seus códigos.
Crie uma pasta para abrigar o código da nossa aplicação, nomeando com o
nome que lhe agradar, nós usamos o JIRAPSTER:
Depois digite e repare a imagem abaixo:
$ yo jhipster

Como mostrado na imagem acima vemos a interface de linha de comando
do JHipster. Nesse ponto é mostrado a versão atual do gerador (v3.12.2) e
em qual diretório ele irá criar a pasta da nossa aplicação contendo o código
fonte.
A interação com o JHipster é bem simples, ele faz perguntas e vai dando as
opções que ele suporta abaixo para você escolher. Conforme você vai
escolhendo as respostas (com as setas de up e down do teclado) ele vai
criando a aplicação e ligando os componentes uns aos outros, prontinho pra
você usar.
Para nosso aprendizado vamos usar uma aplicação monolítica.
Hoje, o hype do mercado são os microservices, ou micro-serviços, o
JHipster é altamente customizável, ao ponto de você criar micro-serviços
com ele, porém todo esse conceito de micro-serviços aumentaria muito
nossa curva de aprendizado e leitura deste ebook. Sendo assim
escolhemos o modo monolítico, que não deixará de criar uma App
escalável. Então deixe o cursor sobre a opção "Monolithic application
(recommended for simple projects)" e pressione enter.
#ficadica: Leia este artigo para melhor entender o conceito de micro-
serviços X monolítico
A próxima pergunta: (2/14) What is the base name of your application? é
o nome da aplicação, e por padrão o JHipster vai pegar o nome da pasta de
onde você executou o comando invocando-o. Como anteriormente, criamos
um diretório chamado JIRAPSTER e entramos nele para executar o
comando, o nome que ele sugere para app é o nome da pasta. Sendo
assim, apenas prossiga pressionando enter.
Na pergunta (3/14) Would you like to install other generators from the
JHipster Market Place?, nesse ponto o JHipster gostaria de saber se você
gostaria de instalar algum módulo adicional. Esses módulos (chamados de
geradores) são do próprio JHispter e ficam disponíveis em um Market Place.
Não vamos instalar nenhum módulo por enquanto, mas é possível instalar a

qualquer momento. Faremos isso mais adiante, mas por hora responda com
"N" e pressione enter.
Continuando, temos a (3/14) What is your default Java package name?
Que seria o nome padrão do pacote para a organização das classes. Vamos
digitar, br.com.javaprodutivo.jirapster e pressione enter.
Vamos avançando e agora temos (4/14) Which *type* of authentication
would you like to use? E agora o JHipster quer saber que tipo de
autenticação vamos querer na nossa aplicação. As 3 opções fornecem um
alto nível de segurança para nossa App, e como queremos que o nosso
usuário se autentique por redes sociais, devemos escolher a primeira opção
que é a:
› HTTP Session Authentication (stateful, default Spring Security
mechanism)
Agora o próximo passo é responder (5/14) Which *type* of database
would you like to use? Ou seja, qual o tipo de banco de dados queremos
para nossa aplicação, Vamos escolher a primeira opção:
› SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
A definição de nossa App continua evoluindo, e devemos responder (6/14)
Which *production* database would you like to use? O JHipster quer
saber qual o banco de dados vamos usar em produção. Anteriormente
dissemos que seria um banco SQL, e agora qual é o motor, a engine, de
produção? Sinta-se livre para ser o MySQL ou MariaDB. Vamos de MySQL.
› MySQL
(7/14) Which *development* database would you like to use?
E já que respondemos qual o banco de dados de produção, ele quer saber
agora, qual o banco de dados de desenvolvimento.
Eu gosto do MySQL para ambientes de desenvolvimento também, mas
alguns preferem o H2, persistindo no disco, ou não. Vamos de MySQL
também.
› MySQL

Legal, já estamos praticamente na metade da definição de nossa App, agora
o Jhipster já sabe o nome da App, e qual banco de dados vamos usar. Por
padrão ele usa o Hibernate como ORM e ele já pergunta se você deseja
usar cache de segundo nível. Podendo ser o ehcache, ou o HazelCast.
Devemos ter ideia de como vamos implantar nossa app, pois se formos usar
um cache distribuído, somente o HazelCast nos atenderia, como vamos
usar uma estrutura mais simples para nossa app, podemos ir de ehcache.
Então, para esta pergunta: (8/14) Do you want to use Hibernate 2nd level
cache? Vamos responder:
› Yes, with ehcache (local cache, for a single node)
Como informamos, o JHipster é um gerador de aplicação que usa o que há
de melhor de uma pilha de soluções Java bem conhecidas no mercado. A
próxima pergunta agora é sobre o gerenciador de dependências e de build
da nossa aplicação.As opções são, Maven ou Gradle. Vamos de Maven!
(9/14) Would you like to use Maven or Gradle for building the backend?
› Maven
Agora vem outro ponto importante também. Como o JHipster vai moldando
nossa aplicação conforme vamos escolhendo as soluções, a pergunta 19,
pode variar, dependendo do que você escolheu como método de
autenticação la na pergunta 4.
(10/14) Which other technologies would you like to use?
Vamos marcar somente a primeira opção usando a barra de espaço e
pressionando enter:
›◉ Social login (Google, Facebook, Twitter)
Agora termos uma pergunta relacionada a camada web de nossa aplicação:
(11/14) Would you like to use the LibSass stylesheet preprocessor for
your CSS?
Ele quer saber se gostaríamos de usar o LibSass para processar nosso
CSS. Aqui é algo muito pessoal, se você usar ou não, o JHipster vai gerar
toda integração entre Maven, Grunt/Gulp/Bower e o LibSass. Eu escolho
não.

"N" e pressione enter.
Agora vem um ponto bem legal, suporte e internacionalização:
(12/14) Would you like to enable internationalization support?
Eu gosto de usar, pois isso funciona muito bem, e já deixa nossa app apta
para ser disponibilizada em outros idiomas. Então responda Y e pressione
enter, e em seguida, verá esta mensagem:
Please choose the native language of the application? (Use arrow keys)
Ele está pedindo para você definir o idioma nativo, ou seja, o padrão do
sistema. Eu geralmente deixo:
› Portuguese (Brazilian)
Na sequência, ele pede, quais idiomas adicionais deseja suportar.
Please choose additional languages to install
Eu adiciono o Inglês.
›◉ English
Por fim temos que escolher qual framework de testes queremos usar.
Sim, para cada código gerado pelo JHipster, ele gera os testes unitários.
(13/14) Which testing frameworks would you like to use?
Eu geralmente troco o Catling pelo Cucumber.
›◉ Cucumber
Seu terminal deve estar parecido com esse:

Agora é que acontece a mágica, o JHipster vai gerar toda a estrutura da
aplicação, desde o lado do Java (o nosso backend) quanto o lado do
AngularJS no frontend, com base nas escolhas que fizemos nas 14
perguntas.
Como o conteúdo do log é bem extenso, fica inviável colocar aqui, mas vou
tentar resumir tudo que aconteceu.
Foram gerados arquivos de dependências do Maven e do Bower com tudo
que o escolhemos e tudo o que o JHipster já traz por padrão.
Já temos arquivos de configuração do Spring Boot, do AngularJS, do GIT,
em fim, tudo, tudo que tínhamos que nos preocupar antes e que nos tomava
as vezes 1 ou 2 dias de trabalho para configurar uma app ele fez em menos
de 5 minutos!!!!!!

Até a autenticação de usuários usando o Spring Security ele já criou, telas
de login e de administração de usuários, bem como monitoramento da
aplicação usando o módulo Metrics do framework Dropwizard.
Lembrando que mesmo que optamos por uma aplicação monolítica, na
nossa primeira pergunta, a comunicação entre a camada web (AngularJS) e
a camada backend (Java) é usando REST e toda a configuração do REST,
bem como sua segurança já está configurada.
A internacionalização também já está pronta, suportando 2 idiomas,
Português e Inglês.
Agora faça uma pergunta para você mesmo, quanto tempo você levaria até
ter uma app com todos esses frameworks funcionando ?
#ficadica: Se quiser acompanhar o código gerado até aqui, separamos uma
branch no Github até este ponto.
https://github.com/JavaProdutivo/jirapster/tree/estrutura-inicial
Criando as entidades
Até Já vimos no capítulo anterior como criar a aplicação. Respondemos
cerca de 14 perguntas e o gerador do Jhipster montou uma aplicação com
os componentes escolhidos e todos configurados.
O próximo passo de um app com Jhipster são as entidades. Vamos ter no
mínimo duas. A entidade Projeto e a entidade Tarefas. Elas serão ligadas
através de relacionamento, onde um Projeto, pode ter "n" Tarefas.
Sempre que criamos uma entidade no JHipster muita coisa acontece por
baixo dos panos, vamos listar tudo que é feito pelo gerador:
• Uma tabela no banco de dados;
• Uma alteração no Liquibase;

• Uma entidade JPA;
• Uma classe Spring Data JPA Repository;
• Uma classe Spring MVC Rest Controller com as operações CRUD
mapeadas;
• Um Router, um Controller e um Service no AngularJS para manusearmos
essa entidade;
• Uma tela/view HTML
• Testes!
Entidade Projeto
Imaginando que você já está com seu terminal na pasta do nosso projeto
vamos digitar o comando abaixo. Este comando vai chamar um sub gerador,
que é o de entidades, e o nome que informamos foi “projeto".
$ yo jhipster:entity projeto
Novamente voltamos ao modelo de perguntas e respostas que usamos para
gerar a estrutura básica da nossa App. A pergunta que vemos é:
? Do you want to add a field to your entity? (Y/n)
O Jhipster quer saber se queremos adicionar campos a nossa entidade e é
claro que queremos, então vamos responder Y, ou seja, sim.
? What is the name of your field?
Agora ele quer saber o nome do nosso campo, deixa eu adiantar uma coisa,
todas as entidades do Jhipster possuem ID, então não precisamos nos
preocupar com isso.
Então vamos digitar "nome". Que vai representar o nome do nosso
projeto no nosso sistema de controle de tarefas. Respeite a convenção para
nomes de entidades.

? What is the type of your field? (Use arrow keys)
› String
Integer
Long
Float
Double
BigDecimal
LocalDate
Em seguida devemos informar o tipo do nosso campo. Vemos que ele aceita
todos os tipos de campos do Java. Desde String até campos para valor,
data e enumerados.
Vamos deixar o campo String marcado, e pressione enter.
? Do you want to add validation rules to your field? (y/N)
Agora temos que informar se queremos adicionar validações no nosso
campo. E queremos, então responda Y
? Which validation rules do you want to add?
›⃝ Required
⃝ Minimum length
⃝ Maximum length
⃝ Regular expression pattern
Nós vamos marcar 3 validações. Required, Minimum e Maximum
length.
Vamos detalhar essas validações:
Queremos que o campo seja obrigatório, então ele é Required e queremos
que ele tenha um valor mínimo (3 caracteres) e um valor máximo (100
caracteres). Isso deve garantir que o nome do projeto sempre nos diga algo
fácil de entender.
Essas serão as perguntas que vamos responder na sequência:
? What is the minimum length of your field? 3
? What is the maximum length of your field? 100
.

#ficadica: Essas validações impactam em 3 partes do sistema.
1. Na tabela no banco de dados;
2. Na entidade JPA, através do Bean Validation;
3. No frontend com as tags de validação de HTML e JS.
Após essas respostas, já temos o único campo do nosso objeto Projeto.
Veja a tela abaixo, a sua deve estar parecida com essa:
Nossa entidade "projeto" terá apenas o campo "nome" então para a
pergunta abaixo, devemos responder No.
? Do you want to add a field to your entity? No
A próxima pergunta é sobre relacionamentos com outras entidades e nesse
ponto, nossa entidade "projeto" ainda não terá relacionamento com outra
entidade, com isso a pergunta abaixo, também responderemos com N.
? Do you want to add a relationship to another entity? (Y/n)
N
.

Na sequência o Jhipster pergunta sobre o uso de DTO. Bem, como essa
funcionalidade está em BETA, vamos responder com:
› No, use the entity directly
Agora temos a seguinte pergunta:
? Do you want to use separate service class for your business logic?
(Use arrow keys)
Devemos responder se queremos que o Jhipster separe as classes de
serviço da camada de negócio. Como nossa App é simples e para fins de
aprendizado vamos responder com:
› No, the REST controller should use the repository directly
Depois temos uma pergunta relativa a paginação da nossa entidade:
? Do you want pagination on your entity? (Use arrow keys)
Opte sempre por paginar os resultados da sua API e sua view de HTML e a
paginação simples do JHipster é o suficiente, então escolha:
› Yes, with a simple pager
Feito! As perguntas necessárias para respondermos para o Jhipster criar
nossa entidade chegaram ao fim e você deve estar vendo a mensagem
abaixo:
[21:39:31] Using gulpfile ~/jirapster/gulpfile.js
[21:39:31] Starting 'inject:app'...
[21:39:31] gulp-inject 111 files into index.html.
[21:39:31] Finished 'inject:app' after 282 ms
Não sei se você respondeu a pergunta no final do capítulo anterior, mas
quanto tempo você levaria para criar uma entidade, passando pelo script de
alteração do banco de dados, criar o Repository, o Rest Controller, a
camada Web (com AngularJS) e os testes?
Viu como isso é rápido no JHipster?!

Entidade Tarefas
Muito bem, já criamos nossa primeira entidade a Projeto. Agora vamos criar
a entidade Tarefas, ela será um pouco mais complexa que a Projeto, pois
vamos usar relacionamentos e campos enumerados. Mas você verá como o
Jhipster torna tudo mais fácil.
Vamos invocar o mesmo comando, porém informando o nome da nossa
nova entidade.
$ yo jhipster:entity tarefas
? Do you want to add a field to your entity? Y
Vamos adicionar o campo "titulo", ele servirá apenas como um campo
simples para darmos um nome a nossa tarefa, como por exemplo, "Corrigir
campo data de nascimento no cadastro de pessoas”.
? What is the name of your field? titulo
? What is the type of your field? String
? Do you want to add validation rules to your field? Yes
Vamos adicionar validação para "required, minimum e maximum length".
Sendo no mínimo 10 caracteres e no máximo 100.
◉ Required
◉ Minimum length
◉ Maximum length

Para nosso campo titulo é isso.
Vamos criar o próximo campo, que é o "descricao", este campo servirá para
darmos mais detalhes sobre nossa tarefa. Como por exemplo; "No campo
data de nascimento da tela de cadastro de pessoas, ao informar a data o
formato data fica yyyy-mm-dd sendo que o esperado é dd-mm-yyyy”
Ele será uma string, com tamanho mínimo de 100 e máximo de 255 e
requerido, assim garantimos que criar uma tarefa, o campo descricao,
contenha bastante detalhes. Afinal, sabemos o quanto é ruim tarefas sem
detalhes suficientes para implementarmos.
Então responda Y para: ? Do you want to add a field to your entity?
? What is the name of your field? descricao
? What is the type of your field? String
◉ Required
◉ Minimum length
◉ Maximum length
O próximo atributo da nossa entidade é o "prioridade", esse atributo indica o
nível de prioridade da nossa tarefa, e ele será um Enum, e teremos 3 níveis
de prioridade; baixo, normal e alta. Além disso ele será required.
A criação deste atributo ficará assim:
? Do you want to add a field to your entity? Yes
? What is the name of your field? prioridade
? What is the type of your field? Enumeration (Java enum type)
? What is the class name of your enumeration? PrioridadeTarefa
? What are the values of your enumeration (separated by comma)?
Baixa,Normal,Alta

? Which validation rules do you want to add? Required
Acabamos de criar nosso atributo "prioridade" do tipo enumerado. Vimos
que novas perguntas foram feitas como qual o nome da classe que
representará nosso enum, e quais valores compõe este enum. Por fim
adicionamos a validação de "required" para ele.
Agora vamos criar o próximo atributo que será responsável por indicar o
status da nossa tarefa. Ele também será um Enum e terá os seguintes
valores; Backlog, Fazendo, Feito, Cancelado.
Bem, o valor Backlog indicará o que está para ser feito.
O Fazendo e Feito não precisa de muita explicação. E o cancelado é para
indicarmos que uma tarefa foi cancelada. Afinal, não é bom excluir uma
tarefa e não se ter mais registros sobre ela.
Sua tela deverá estar como esta abaixo.
? What is the name of your field? status
? What is the type of your field? Enumeration (Java enum type)
? What is the class name of your enumeration? StatusTarefa
? What are the values of your enumeration (separated by comma)?
Backlog,Fazendo,Feito,Cancelada
O próximo atributo é o campo dataCriacao e ele é o campo que irá nos
indicar quando a tarefa foi criada. Campos datas são bem simples no
Jhipster, e vamos indicar que ele é “required".
? What is the name of your field? dataCriacao
? What is the type of your field? LocalDate

Agora vamos fazer nosso primeiro relacionamento entre entidades.
Vamos criar um relacionamento para representar quem criou nossa tarefa.
O intuito deste campo é termos na tarefa a referência do solicitante, para
caso tenhamos dúvidas, saber para quem perguntar sobre como
implementar aquela tarefa.
Então ao terminar o campo dataCriacao a próxima pergunta foi se
queríamos criar campos a nossa entidade, e devemos responder N.
Na sequência ele pergunta se queremos criar relacionamentos e devemos
responder Y:
? Do you want to add a relationship to another entity? Y
? What is the name of the other entity? User
Esta pergunta quer saber qual é a outra entidade com a qual vamos
relacioná-la. Até o momento não criamos entidade para usuários, criamos?
Não, mas o JHipster sim, no momento quando escolhemos que
gostaríamos de ter o Spring Security, então vamos utilizar a entidade que
ele criou, ela se chama User.
Não se preocupe, em outro capítulo mostrarei toda a arquitetura da
aplicação e abordaremos essa e outras tabelas e configurações do JHipster.
? What is the name of the relationship? usuarioReq
Devemos dar um nome para o relacionamento na nossa entidade tarefa,
vamos chamar de usuarioReq. Que é o usuário que abriu, ou seja, que está
requerendo aquela tarefa.
Agora ele quer saber qual o tipo do relacionamento. Vamos usar o many-to-
one, já que somente um usuário, pode abrir uma tarefa.
? What is the type of the relationship?
› many-to-one
many-to-many
one-to-one

? When you display this relationship with AngularJS, which field from
'User' do you want to use? login
Essa pergunta mostra bem o poder de flexibilização do JHipster. Ele está
dando a possibilidade de mostrarmos o campo que desejarmos na camada
Web. E isto nos permite fazer a amarração entre os relacionamentos
através dos IDs e mostrar na tela um campo mais legível e entendível para
o usuário da nossa aplicação.
Na nossa entidade User, temos login, firstName e lastName além de outros.
Podemos mostrar qualquer um desses, mas acredito que o mais indicado é
o login, já que firstName e lastName podem se repetir com outros usuários.
Vamos criar mais um relacionamento, que será o campo que mostrará para
quem nossa tarefa foi atribuída. Ou seja, teremos "n" usuários cadastrados
em nosso Jirapster , uns serão responsáveis por abrir as tarefas, mas pode
ser que seja outros usuários que irão desenvolver a tarefa.
Já deu pra perceber que este relacionamento será basicamente como o
outro.
? Do you want to add a relationship to another entity? Yes
? What is the name of the other entity? User
? What is the name of the relationship? userDev
? What is the type of the relationship? many-to-one
'User' do you want to use? login
? Do you want to add any validation rules to this relationship? Yes
Vamos adicionar o último relacionamento, que é entre o projeto e a tarefa.
? Do you want to add a relationship to another entity? Yes
? What is the name of the other entity? Projeto
? What is the name of the relationship? projeto
? What is the type of the relationship? many-to-one
'Projeto' do you want to use? nome

? Do you want to add any validation rules to this relationship? Yes
Agora seguimos com a criação de uma entidade normalmente.
? Do you want to use a Data Transfer Object (DTO)?
No, use the entity directly
? Do you want to use separate service class for your business logic?
No, the REST controller should use the repository directly
? Do you want pagination on your entity? No **
Não vamos adicionar paginação na listagem de tarefas pois em outro
capítulo vamos reestruturar a tela de listagem de tarefas para que ela se
pareça com um quadro Kanban.
Feito!
Everything is configured, generating the entity…
E agora, já sabe quanto tempo gastaria para criar uma entidade, com Enum,
relacionamentos, o front end desta entidade, com validações, paginação e
testes?
Deixa eu responder para você, MINUTOS! E não mais horas ou até dias
criando uma entidade.
IntelliJ (IDE)
Muito bem, já temos nossa aplicação criada e suas entidades, é hora de
importar para uma IDE e conhecer cada pedacinho de código que o JHipster
gerou pra gente.
Vamos usar o IntelliJ como nossa IDE. Mas se você quiser usar o Eclipse ou
o STS (Spring Tooi Suite) sinta-se avontade, o Jhipster como já vimos usa
Maven, então a importação do projeto em IDEs modernas é algo tranquilo.

Com o IntelliJ aberto vamos em "Import Project", aponte para a pasta raiz
do nosso projeto Jirapster e em seguida escolha a opção "Import Project
from external model" escolha o "Maven" e clique em “Next".
Na tela a seguir eu costumo deixar a opção "Import Maven projects
automatically" pois sempre que eu editar o POM.xml o IntelliJ ja vai baixar
todas as dependências do projeto automaticamente. Clique em “Next".
Próxima tela e ela se refere aos profiles da aplicação. Sim, o Jhipster já
criou nossa aplicação com alguns profiles. Estes profiles permitem que
quando você estiver desenvolvendo use o profile "dev" e a aplicação se
comporta usando variáveis de desenvolvimento, como por exemplo conexão
ao banco de dados local. E quando estiver no profile "prod" a aplicação
automaticamente vai utilizar variáveis de produção, como no nosso
exemplo, apontar para o banco de dados de produção.
Neste momento mantenha checado o checkbox dev e clique em Next.
Muito bem, agora vemos mais uma tela deste wizard de importação, "Select
Maven projects to import". Como só temos um projeto dentro dessa
estrutura apenas clicamos em “Next."
Agora vamos configurar o SDK da para nossa aplicação. Pode ser que o
seu IntelliJ esteja sem nenhum SDK, como a imagem abaixo:

Adicionar uma SDK é simples, basta clicar no sinal de + logo no topo
esquerdo da tela. Escolher JDK e apontar o diretório de instalação do
seu Java.
Por fim a tela em que damos o nome do projeto dentro do IntelliJ, e sempre
mantenho o mesmo que vem do POM.xml, então é só clicar em Finish.
Muito bem, terminamos de importar para o IntelliJ nosso projeto, agora o
IntelliJ vai invocar o Maven que "vai baixar a toda a internet para seu
computador". rsrsrs Essa é uma piada do mundo Java, você já deve ter
escutado. Assim que este processo terminar sua tela deve estar como essa:

Preparando o banco de dados:
O JHipster prepara muita coisa para gente, porém ele não tem acesso a
alguns recursos do ambiente da aplicação, sendo assim temos que dar uma
forcinha para ele.
O que devemos fazer é criar somente o esquema (schema), ou banco de
dados no MySQL. Não precisamos criar a estrutura do banco de dados,
quem irá fazer isso é o Jhipster através do Liquibase que é uma biblioteca
de migrations e database source control de banco de dados.
Então execute a linha abaixo. Pode ser no seu editor SQL preferido (como o
MySQL Workbench) ou no terminal mesmo.
$ CREATE SCHEMA `jirapster` ;
Voltando ao IntelliJ:
Agora já temos o banco de dados criado para receber a estrutura de tabelas
que o Jhipster vai gerar, podemos voltar para o IntelliJ e vamos rodar nossa
aplicação pela primeira vez.

Quando instalamos o MySQL em nosso computador, definimos uma senha
para o usuário root. Para nossa aplicação se conectar em nossa base
precisamos informar qual usuário e senha do banco.
Com o IntelliJ aberto vamos procurar por um arquivo de configuração que
armazena os dados de conexão com o banco.
Navegue por src/main/resources/config.
Esse arquivo se chama application-dev.yml, e existem mais 2 arquivos
como ele, que são o application.yml e o application-prod.yml, pois como
dissemos o Jhipster ja faz uso de profiles. Então temos um arquivo para
cada profile com o qual vamos trabalhar.
Com o arquivo application-dev.yml aberto, vamos procurar pela seção
datasource, que fica dentro da seção raiz, spring.
Como podem ver na imagem abaixo devemos preencher o campo
password com a senha do nosso MySQL, feito isso, salve o arquivo.

Por ser uma aplicação Spring Boot poderíamos simplesmente rodar a classe
que contém o método main. No nosso caso, essa classe se chama,
JirapsterApp. Outra opção seria adicionar uma configuração no menu de
Run/Debug Configurations.
Iniciando através da classe:
Esta classe está em src/main/java/br/com/javaprodutivo/jirapster/
Clique com o botão direito sobre a classe JirapsterApp e escolha Run
'Jirapster':
Iniciando através de um Run Configurations:
Acesse o menu Run, depois escolha "Edit Configurations". Na tela que
abrir, clique no sinal + no topo esquerdo da tela e escolha "Application" e
deixe como a tela abaixo:

Se tudo correu bem, você deve estar vendo uma saída como esta no
console do seu IntelliJ:

Então faremos como está proposto nas últimas linhas do console, abra o
seu navegador favorito e acesse:
http://localhost:8080
Le voilà !
Muito bom não é mesmo? Nossa aplicação está pronta e no ar.
Vamos lá, vamos testá-la!
Efetue log in com o usuário admin e senha admin:

Veja, que já temos mecanismos de login com redes sociais, checkbox de
Lembrar senha (ele vai gravar um cookie no browser) e fluxos para
recuperar senha, tudo prontinho sem termos escrito uma linha de código.
Também percebemos no canto esquerdo uma faixa vermelha que indica que
estamos no modo, ou profile, de desenvolvimento. E no canto direito da tela
temos o menu Idioma que foi aquela configuração que escolhemos no início
da nossa App, que ela tivesse 2 idiomas, pt-br e en-us.
Logado como administrador vemos que temos mais menus a disposição,
como o menu Entidades, Conta e Administração.
O menu Administração possui diversas funcionalidades, como;
Em Gerenciamento de Usuário, onde podemos gerenciar todos os
usuários da aplicação, desde criar novos usuários, até editar e excluir.

O submenu Métricas mostra detalhes da aplicação e da JVM, como
detalhes da memória, threads, requisições. cache e muito mais.
O submenu Estado do sistema mostra 2 checks que ele faz no sistema,
como espaço em disco e banco de dados.
O submenu Configuração mostra todas as variáveis e seu valores,
permitindo assim entender determinados comportamentos da aplicação
ajudando bastante no troubleshooting.

O submenu Auditorias mostra registros de auditorias do sistema, como
tentativas de login e outros.
O submenu Logs mostra registros e eventos do sistema.
E pra mim, a cereja do bolo está aqui, o submenu API. que é o uso do
Swagger gerenciando toda a camada de API entre o backend em Spring e o
frontend com o AngularJS.

Quantas linhas programamos para ter tudo isso? Nenhuma! Mas o conceito
do JHipster é esse, criar uma aplicação para você com tudo que você
precisa para ter uma aplicação moderna e de forma rápida. Logs, Login/
Logout, Gerenciamento de Usuários, e muito mais que veremos.
O menu Conta mostra detalhes do perfil do usuário logado, como troca de
senha e até invalidar sessões ativas no sistema e logout.
O menu Entidades é onde ficará todas as entidades que criamos com o
comando:
$ yo jhipster:entity
Nossas entidades:
PROJETO

Essa é nossa tela principal da entidade Projeto.
Veja que temos as operações CRUD dispostas nesta tela, como Novo
Projeto, Visualizar, Editar e Excluir.
Outro ponto que o Jhipster nos dá, a paginação, ordenação e a pluralização.
Sim, pluralização, quando criamos nossa entidade Projeto não colocamos
ela no plural, foi o Jhipster através de um componente do AngularJs que
colocou nossa entidade no plural.
Faça um teste, adicione um registro representando um projeto.
Nossa entidade Tarefa segue logo abaixo:

Veja que todos os parâmetros que informamos na criação da entidade foram
implementados, como os campos required, e até os campos Enuns.
Na imagem abaixo também vemos que os campos de data o JHipster
adicionou o componente de calendário, conhecido com DatePicker.

E para os relacionamentos entre tabelas, vemos que nossa configuração
também funcionou corretamente, e nos campos de Usuário Req e Usuário
Dev são listados os logins dos usuários e não os IDs.
E o último campo é o relacionamento com o projeto.
#ficadica: temos uma branch no Github com todas as alterações de códigos
até aqui.
Aproveito para te parabenizar! Se dedicar e ler nosso ebook até aqui é algo
muito satisfatório para nós. Esperamos que tenha se empolgado com o
poder do JHipster, com tudo que ele pode fazer pra você, tudo aquilo que é
essencial para qualquer App moderna e que gastamos horas e até dias para
fazer sozinhos e o JHipster nos permitiu fazer em minutos.
Continue para os próximos capítulos, pois vamos detalhar a arquitetura da
aplicação gerada, passando pelo backend até o frontend e vamos ainda
adicionar um módulo externo do JHipster que é o Angular Material além de
customizar uma tela inteirinha e colocar nosso aplicativo em produção nas
nuvens.

Arquitetura da App
As Camadas
Aplicações Web modernas são construídas em muitas camadas. Isto
permite que você escale sua aplicação facilmente, permitindo por exemplo
implantação em ambientes de cloud computing. Vamos ver abaixo as
camadas que compõem nossa aplicação.
Componentes de Frontend
AngularJS
AngularJS, ou somente Angular, é um framework MVC usado pelo JHipster.
Ele foi escrito em JavaScript e é hoje um dos frameworks mais badalados
do mercado.
Ele é mantido pelo Google, foi lançado em 2010 por um funcionário do
Google e seus amigos. Hoje possui 2 vertentes, o AngularJS na versão 1.x
(angularjs.org) e outro na versão 2.x (angular.io) onde várias mudanças
foram introduzidas no framework como suporte ao TypeScript.
Segundo o showcase do github, vemos o AngularJS em segundo lugar,
atrás do React do Facebook.
Este conceito que o Angular usa, é o SPA (single page application) e você
não só pode, como deve, olhar outros frameworks do gênero, como o já
citado; React. Dentro do JHipster o módulo web, com o AngularJS fica em
jirapster/src/main/webapp.
Quando nossa aplicação é iniciada, através do Spring Boot, é um Tomcat
embedado que é iniciado. e serve nossa aplicação. Tanto o backend quanto

o frontend. O Tomcat como sabemos também pode ser utilizado para servir
conteúdo estático. e é isso que acontece com nosso módulo web, ele é
servido pelo Tomcat, que está embedado no Spring Boot.
Na categoria de frameworks web no nosso blog JavaProdutivo, mostramos
mais detalhes sobre o AngularJS e seus componentes como $controllers,
$services, $filers e $directives.
Bootstrap
Outro componente da nossa camada Web é o Twitter Bootstrap. Ele é um
framework para estilização de páginas. Também nasceu dentro de uma
empresa, que no caso é o Twitter.
O Jhipster nos dá agilidade como um todo, ao gerar nossa aplicação. Já o
Bootstrap nos dá agilidade ao construir nossas páginas HTML. Não
precisamos ficar escrevendo CSS para criar botões, caixas de diálogo,
formulários e outros recursos que vemos nas aplicações web modernas.
Incorpora ícones e padrões de interface rica para web. Além de suportar
layout responsivo, ser crossbrowser e muito mais.
Caso você queira customizar o estilo da sua aplicação, como estilo de cores
basta alterar o arquivo main.css que fica localizado em src/main/content/
css/main.css.
Intenacionalização (i18n)
Como vimos, na configuração da nossa App, o JHipster suporta
internacionalização, tanto que definimos Portugues e Ingles como idiomas
da nossa App. Para realizar esta tarefa o JHipster usa um componente, que
é o Angular Translate.
Pode ser que alguma tradução não fique bem feita, e caso você precise
ajustar algo manualmente, basta navegar até o diretório jirapster/src/main/
webapp/i18n/pt-br e verificar que temos vários arquivos .json nesta pasta.
Basta abrir o arquivo do módulo desejado e fazer os ajustes manualmente.

Componentes de Backend
Vamos falar de backend. O backend do JHipster é Java com o Spring
Framework. Mas ele é composto de muito mais componentes. Vamos ver
detalhes de cada um deles.

Spring Framework
O Spring framework é um framework completo baseado em Java que tem
sido uma alternativa ao Java EE por anos. Inclusive várias especificações
do Java EE vieram de soluções dadas no Spring Framework.
O JHipster usa principalmente o Spring Boot. O Spring Boot torna fácil criar
aplicações baseadas no Spring Framework com pouco esforço. Com ele
temos dependências auto-configuráveis que nos permite escrever pouco
código sem perder o poder do framework.
Os objetivos principais do Spring Boot são;
• Fornecer uma experiência de "começar" mais rápida e amplamente
acessível para todo o desenvolvimento com o Spring.
• Ser opinativo e fornecer uma série de recursos não funcionais
comuns a grandes projetos (por exemplo, servidores embedados,
segurança, métricas, verificações de integridade (health checks),
configuração externalizada).
Caso você queira usar o Spring boot em seu próprio aplicativo, indicamos o
Spring Initializr. Você configura todas as dependências Spring que deseja no
seu projeto e ele gera a aplicação inicial para você baixar.
Você pode usar o site ou via curl:
$ curl start.spring.io
Vamos conhecer a estrutura da nossa aplicação Spring Boot gerada pelo
JHipster.
A classe principal é a JirapsterApp.java, que deve obrigatoriamente estar
em jirapster/src/main/java/br/com/javaprodutivo/jirapster.
É esta classe que possui o método public static void main que instancia
um objeto SpringApplication invocando seu método run.

JPA
Outro aspecto que devemos notar são nossas entidades. Elas foram
geradas pelo comando $ yo jhipster:entity {entidade}
O JHipster organizou nossas entidades em, src/main/java/br/com/
javaprodutivo/jirapster/domain
Ao abrir a entidade Projeto.java vemos as anotações do JPA em nossa
classe, indicando que ela é uma entidade, anotação sobre cache, e vemos
que mesmo que não indicamos um campo ID, o JHipster sempre vai criar
um ID para nossas entidades.
Também vemos anotações sobre as validações que dissemos que
queríamos em nossos campos, como o @NotNull entre outros. E por fim,
temos os métodos equals, hashcode e toString.
Se abrirmos nossa entidade Tarefa.java, veremos além das anotações
citadas acima, mas também o relacionamento entre as entidades, como é o
caso dos campos usuarioReq, usuarioDev e projeto.
Vemos que juntamente com nossas entidades Tarefa e Projeto, temos
outras entidade, como aquela que citei, responsável por gerenciar os
usuários de nossa aplicação; a User.java.
ENUMs
Aproveito para falar dos Enumerados que criamos com o JHipster, eles
ficam em uma pasta abaixo desta que estamos, e se chama enumeration,
E caso você queira editar os itens em nossos ENUMs que já existem, basta
editar essas classes ai dentro deste pacote.
Padrão Repository.
O JHipster aplica o padrão de projeto Repository, então os métodos que
manipulam nossas entidades estão em classes (ou interfaces) dentro deste
pacote.

Padrão Repository.
O JHipster aplica o padrão de projeto Repository, então os métodos que
manipulam nossas entidades estão em classes (ou interfaces) dentro deste
pacote: src/main/java/br/com/javaprodutivo/jirapster/repository
Ao abrir qualquer um dos nossos Repository's podemos ver os métodos
criados pelo JHipster. Não estamos vendo ai os métodos de Save, Find,
Delete ou Edit certo? Certo! Eles estã na classe da qual nosso repository foi
estendida que é a JpaRepository.
REST
Como sabemos desde o início o JHipster separa nossa aplicação em 2
camadas, API REST no backend, e o AngularJS no frontend. A biblioteca
para Web Services REST usado no JHipster do Spring Framework é o
módulo Spring Boot Starter Web.
Nossos Web Services REST criados pelo JHipster estão localizados em src/
main/java/br/com/javaprodutivo/jirapster/web/rest
Abra nossa classe TarefaResource.java.
Veja anotações de @RestController e @RequestMapping em nossa classe.
Logo no início já vemos o @Inject do nosso @TarefaRepository.
Também vemos sob nossos métodos a anotações @GetMapping quando
queremos um GET, @PutMapping para PUT, @PostMapping quando
vamos implementar o método POST e até o @DeleteMapping para
exclusão.
Arquivos de configuração.
É muito comum aplicações usarem arquivos externos para configurações.
Usar arquivos externos permite que você deixe sua aplicação mais dinâmica
e flexível.

Os arquivos principais de configuração estão em src/main/resources/
config e são eles;
application.yml
application-dev.yml
application-prod.yml
Esses arquivos usam o modelo de formatação de YAML e tem sido um
formato de arquivo muito utilizado nos recentes frameworks e ferramentas.
Cada arquivo deste traz suas particularidades e cada arquivo deste é usado
no momento do build gerando a aplicação com suas configurações
específicas para cada ambiente. Lembra que o JHipster aplica o conceito de
profiles no nosso APP? Cada arquivo deste é pra um profile.
Faça um overview de cada arquivo de configuração do Spring Boot e veja
todas as variáveis de podemos configurar no nosso App.
Spring Boot Actuator
Este é um sub-módulo do Spring Boot e adiciona várias métricas sobre
nossa aplicação com praticamente sem esforço nenhum. Basta adicionar
spring-boot-starter- actuator no seu POM.xml e já teremos um endpoint com
um json com todas as métricas sobre a aplicação.
Esses são os endpoints adicionados:
• /autoconfig - Retorna um relatório de configuração automática que
mostra todos os candidatos de configuração automática.
• /beans - Retorna uma lista completa de todos os Spring beans em
nossa APP.
• / c o n f i g p r o p s - R e t o r n a u m a l i s t a d e t o d o s o s
@ConfigurationProperties.
• /dump - Realiza um dump de thread.
• /env - Retorna as propriedades ConfigurableEnvironment.
• /health - Retorna informações sobre a saúde da aplicação.
• /info - Retorna informações básicas sobre a aplicação.
• /metrics - Retorna informações sobre performance da aplicação
• /mappings - Retorna uma lista de todos os @RequestMapping.

• /shutdown - Shuts down na aplicação de forma graciosa (desativado
por padrão). UFA!
• /trace - Retorna informações de trace (por padrão, os últimos
requests HTTP).
Caso não esteja se lembrando, essas métricas estão disponíveis numa
interface web no menu de administração da nossa aplicação.
MAVEN X GRADLE
Uma das ferramentas indispensáveis no mundo Java dos últimos tempos!
O JHipster nos deu 2 opções para gerenciar as dependências do nosso
projeto, Maven e Gradle. Eu sou muito fã do Maven, nada contra o Gradle,
tanto que ele é o gerenciador padrão de dependencias do mundo Android,
mas por já estar familiarizado com o Maven, e o Maven geralmente ser a
escolha da maioria dos Devs Java, ele será sempre uma boa escolha.
O Gradle também é um ótimo gerenciador de dependências, possui
diversas "integrações" com o Maven e funciona muito bem. Deixamos um
conselho, dê uma olhada nos dois, principalmente se você já domina um.
Existem ferramentas que convertem projetos Maven em Gradle, como é o
caso do Polyglot. Com ele você pode executar o comando abaixo e
converter seu projeto.:
$ mvn io.takari.polyglot:polyglot-translate-plugin:translate -Dinput=pom.xml
-Doutput=pom.${format}
#ficadica: Aqui vai um link de um comparativo entre as funcionalidade entre
Maven e Gradle. Vai te ajudar a entender as diferenças entre um e outro!
Foi escrito pelo Benjamin Muschko, principal engenheiro do Gradle.
Segurança
O Spring Boot possui várias funcionalidades de segurança graças a sua
integração com o Spring Security. Quando criamos uma aplicação Spring
Boot com a dependência no spring-boot-starter-security no nosso POM.xml,
nós já temos autenticação HTTP Basic.

Por padrão, um usuário com o nome user e a senha são mostrados na
saída de log e você pode definir no arquivo de configuração (.yml) a senha
através da chave: security.user.password. Mais funcionalidades você pode
encontrar na seção de segurança no guia do Spring Boot.
A classe responsável pela segurança no nosso projeto é a
SecurityConfiguration ela fica em src/main/java/br/com/javaprodutivo/
jirapster/config. Perceba que ela leva a anotação @EnableWebSecurity e
ela possui 2 métodos configure, onde podemos ver toda a configuração de
segurança da APP, como quais diretórios são protegidos, quais não são,
como também a configuração do CSRF, do formulário de login e
configuração de lembrete de senha e logout.
Liquibase Migrations
O Liquibase é o controlador de mudanças do nosso banco de dados. Ele
permite escrevermos todos nossos scripts de alteração de banco de dados,
e aplicar esses scripts a cada build/deploy de nossa aplicação. Dessa forma
temos um maior controle de todas as versões do banco de dados. E sempre
que vamos rodar nossa aplicação ela irá checar se os scripts de alteração
de banco de dados foram aplicados, e assim iniciar corretamente.
Todos esses scripts ficam em src/main/resources/config/liquibase/
changelog.
Podemos ver que a cada entidade que criamos, um arquivo XML
representando essa entidade foi criado. O Liquibase é compatível com
arquivos XML, YAML, JSON e SQL.
Componentes Adicionais - Angular Material
O JHipster conta ainda com um poderoso sistema de módulos. Esses
módulos são componentes que podem ser adicionados a nossa aplicação.
Ao visitar a página de módulos vemos os módulos mais baixados, porém um
campo acima temos a busca.

Um dos módulos que mais gosto é o Bootstrap Material Design. Como
devemos perceber, esse módulo aplica os recursos de layout do Material
Design do Google ao JHipster.
Para instalar qualquer componente basta escolher o módulo e dentro de sua
documentação temos o processo de instalação.
Então seguindo o guia do Bootstrap Material Design vamos começar
instalando o gerador do módulo. Dentro da pasta do projeto digite:
$ npm install -g generator-jhipster-bootstrap-material-design
E então, inicie o gerador:
$ yo jhipster-bootstrap-material-design
Caso você veja mensagens de confirmação de sobrescrita de arquivos,
pode confirmar respondendo Y para todas. Ao fim do processo você verá
uma tela como a seguir:
Agora basta iniciar a aplicação e teremos um novo layout em nosso
aplicativo.

Agora basta iniciar a aplicação e teremos um novo layout em nosso
aplicativo.
#ficadica: Temos uma branch específica para esta alteração.
Além dele, também indicamos o módulo do Google Maps que permite
embedar facilmente os mapas do Google dentro da estrutura da aplicação.

Customizando uma Tela
A nossa tela de listagem de tarefas é extremamente funcional. Possui as
colunas, ou campos de nossa entidade, e botões de ação para cada linha.
Porém sabemos que as metodologias para gestão de projetos aplicam
conceitos como o quadro Kanban, como a figura abaixo.
Queremos deixar nossa tela de listagem de tarefas como essa! Vamos ter
uma visão mais ampla e simples de todas as tarefas do projeto, em quais
estágios elas estão e como está fluindo o fluxo de trabalho.
Para isso teremos que mudar o layout da nossa tela, onde de listagem,
vamos ter colunas. Essas colunas serão o valores daquele ENUM que
criamos, para representar o Status da tarefa. Estamos falando do ENUM,
StatusTarefa.
Se lembrarmos dele, caso não lembre ele está em src/main/java/
br.com.javaprodutivo.jirapster/domain/enumeration/StatusTarefa.java,
veremos que temos os seguintes itens Backlog, Fazendo, Feito e
Cancelada. Cada um desses itens serão uma coluna, e cada coluna terá
suas respectivas tarefas.
Ok, já temos em mente que temos que fazer, então vamos editar nossa tela.

A Para isso abra o arquivo tarefas.html, ele fica em src/main/
br.com.javaprodutivo.jirapster/webapp/app/entities/tarefa/tarefas.html.
Vamos remover o código:
<div class="table-responsive">
…
</div>
E adicionar este bloco de código:
<div class="row">
<div class="col-md-3">
<p>Backlog</p>
<div ng-repeat="tarefa in vm.tarefas track by
tarefa.id">
<a href="#" ng-if="tarefa.status=='Backlog'"
ui-sref="tarefa.edit({id:tarefa.id})">
#{{tarefa.id}} - {{tarefa.titulo}}
</a>
</div>
</div>
<p>Fazendo</p>
tarefa.id">
<a href="#" ng-if="tarefa.status=='Fazendo'"
</a>
</div>
</div>
<p>Feito</p>
tarefa.id">
<a href="#" ng-if="tarefa.status=='Feito'"
</a>
</div>
</div>
<p>Cancelada</p>
tarefa.id">
<a href="#" ng-if="tarefa.status=='Cancelar'"
</a>
</div>
</div>
</div>

Dessa forma nossa tela fica organizada desta maneira:
E se você estiver usando a branch com o Bootstrap Material sua tela deve
estar parecida com essa:
#ficadica: aqui está a branch com o quadro kanban de tarefas no layout
original do Jhipster, e aqui está a branch do mesmo quadro de tarefas
porém com o layout Bootstrap Material.

Indo para Produção
Fizemos grandes coisas, e imagino que você percebeu o quanto isso é fácil
e rápido usando o Jhipster. Podemos usar o Jhipster para gerar desde
aplicações reais, para usá-las como produto final, ou, para gerar os famosos
MVP, ou seja, você tem uma ideia, mas não sabe se ela vai dar certo, você
precisa fazer um teste sem perder muito tempo, você precisa saber
rapidamente se ela é viável ou não.
O Jhipster tem esse propósito, produzir algo rápido, sem muito esforço, com
tudo que uma aplicação deve ter. Mas chegou a grande hora, colocar nossa
aplicação no ar, ou seja em produção!
O Jhipster facilitou essa tarefa também, e por usar profiles, podemos gerar
um build da aplicação pronta para rodar em produção. Com dados do banco
de dados de produção, sem aquele banner vermelho na lateral indicando o
modo de desenvolvimento, enfim, um sistema pronto!
Dentro do diretório da nossa aplicação, digite:
$ mvn -Pprod package
Neste comando estamos invocando o Maven e passando por parâmetro o
profile de produção (prod).
Não se esqueça de colocar os dados de acesso do banco de dados de
produção, como o ip ou hostname, usuário e senha, no arquivo application-
prod.yml que fica em, src/main/resources/config.
Este processo é um pouco demorado, e muitas coisas acontecem por baixo
dos panos, desde invocação do npm e outras tarefas do frontend, até os
testes criado pelo JHipster de acordo com nossas entidades.
Ao fim dele, serão gerados os artefatos, ou seja, o nosso código fonte
compilado, pronto para ser implantado. O caminho destes artefatos é,
target, dentro da raiz da pasta do nosso projeto.

Caso você esteja no Linux (no qual recomendamos!) ou MacOS basta
executar:
$ ./jirapster-0.0.1-SNAPSHOT.war
Agora se você estiver no Windows você deve invocar o Java e passar o
nome do artefato.
$ java -jar jirapster-0.0.1-SNAPSHOT.war
Você pode usar estes comandos para iniciar sua aplicação no seu servidor,
isto pode ser em uma instância de EC2 na AWS, uma Droplet na Digital
Ocean, uma VM na Microsoft Azure. Enfim, o processo é o mesmo em
qualquer distribuição Linux, com Java e MySQL instalado.
Para você testar sua aplicação nas nuvens, deixamos aqui um link, para
você se cadastrar na Digital Ocean, e ganhar U$ 10,00, (isso mesmo dez
dólares!) em créditos. Esses créditos são suficientes para você usar por 1
mês a Droplet, ou VM de 1GB de RAM.
O próximo passo agora é implantar um pipeline de Continuous Integration e
Continuous Delivery, CI e CD, traduzindo, Integração Contínua e Entrega
Contínuo. A ferramenta mais famosa é o Jenkins, e o JHipster já traz
integração para o Jenkins (outros). Vamos abordar este assunto fora deste
ebook, para não estender muito o ebook e tornar cansativo. Até porque
nada impede você de usar ou não alguma ferramenta para implantar CI/CD
no seu projeto.
#ficadica: Caso queira conhecer mais sobre Cloud Computing (computação
nas nuvens) e tecnologias relacionadas como a cultura DevOps,
acompanhe o site AprendaCloud.com.br

Conclusão
Agradecemos por ter chegado até o final do nosso ebook.
Esperamos que tenha percebido todo o poder o JHipster, o quanto ele pode
te ajudar a criar facilmente aplicações e testar suas ideias.
O JHipster tem sempre se atualizado perante ao Java e ao AngularJS, seus
componentes chave, e no momento da produção deste ebook, foi lançada a
nova versão do Jhipster cobrindo o AngularJS 2.
Como este ebook é algo "estático" sua atualização é complexa (manter
todos os leitores com a última versão não é fácil), então não se esqueça de
sempre acompanhar o nosso blog sobre Java Produtivo, onde falamos tudo
sobre o ecossistema Java sob o Spring (até micro serviços), além do próprio
JHipster.
Este processo é um pouco demorado, e muitas coisas acontecem por baixo
dos panos, desde invocação do npm e outras tarefas do frontend, até os
testes criado pelo JHipster de acordo com nossas entidades.
Ao fim dele, serão gerados os artefatos, ou seja, o nosso código fonte
compilado, pronto para ser implantado. O caminho destes artefatos é,
target, dentro da raiz da pasta do nosso projeto.

Desenvolvedor Java Full Stack

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Desenvolvedor Java Full Stack