banner

JHipster: Criando uma Aplicação de Finanças Pessoais.

No primeiro artigo desta série, vamos realizar a criação de uma aplicação em Java de finanças pessoais multiusuário. Utilizaremos um gerador de aplicação Open Source chamado JHipster que nos auxiliará em todo o desenvolvimento.

JHipster é um gerador para uso na criação de aplicações em Spring e AngularJS. Conta com um robusto gerador de aplicação que deixa qualquer um espantado pela facilidade e qualidade de tudo que é gerado.

JHipster não reinventa a roda, ele implementa arquitetura de mercado de maneira simples e inovadora e em alguns pontos, busca melhorar a implementação como a autenticação e internacionalização por exemplo.

Neste primeiro artigo vamos criar a aplicação e entender o que foi gerado pelo JHipster. Nos próximos artigos vamos implementar funcionalidades e ferramentas de monitoramento deixando a aplicação pronta para uso. No terceiro artigo criaremos um Dashboard das finanças e por último, vamos criar um aplicativo mobile com autenticação para o lançamento de despesas.

Montagem do Ambiente

Como IDE, utilizei o Eclipse Neon que pode ser baixado aqui Download Eclipse Neon

Também utilizei o plugin de terminal Download Plugin Terminal pois assim, não preciso alternar entre o cmd do Windows e o eclipse, posso realizar todas as operações em um só lugar.

Caso queira, você pode utilizar outra IDE como netbeans ou WebStorm por exemplo.

Java

O primeiro passo é ter o Java instalado na sua máquina, se você é um desenvolvedor provavelmente já deve estar com ele configurado, do contrário você pode realizar o download da última versão do JDK aqui Download Java JDK e instalar o mesmo na sua máquina. Provavelmente na instalação, o Java já será inserido nas suas variáveis de ambiente.

Teste com o comando:  

java -version

Maven

O JHipster trabalha com Maven (http://maven.apache.org/) ou Gradle (http://www.gradle.org/), como eu tenho afinidade com Maven por sempre trabalhar com ele, vamos realizar a instalação do mesmo no computador.

Realize o Download do Maven Download do Maven e descompacte em uma pasta do seu sistema de arquivos. Após realizar esta operação, insira o diretório no Path da sua variável de ambiente, no caso do Windows, ficaria assim: [DIR]:\Maven\apache-maven-3.3.3\bin;

Teste com o comando:

mvn -v

Git

Instale o Git, ele é um repositório de fontes que você já deve ter ouvido falar. Baixe o git aqui Download do Git

Teste com o comando:

git --version

Node.js

Baixe e instale o Node.js aqui Download do NodeJS vamos neste caso utilizar o node.js para instalar as outras ferramentas utilizadas neste tutorial.

Teste com o comando:

npm –v

Yeoman

Agora vamos instalar o Yeoman. http://yeoman.io/

O Yeoman resumidamente é uma ferramenta para criação de geradores. Há geradores para AngularJS, Mobile, ASP, Slide, WordPress e uma série de outros geradores que você pode estar conferindo aqui http://yeoman.io/generators/

Para instalar o Yeoman, digite o comando:

npm install –g yo

Bower

O Bower é um gerenciador de dependências javascript. É como se fosse o Maven do javascript. Vamos instalar o mesmo com o comando:

npm install -g bower

Grunt

Para a criação da camada visual em AngularJS há a opção do uso de Grunt ou Gulp.js, por questão de familiaridade eu recomendo o uso de Grunt portanto, instale com o comando:

npm install –g grunt-cli

JHipster

Por último, vamos instalar o gerador do JHipster com o comando:

npm install –g generator-jhipster

Pronto! Nosso ambiente está montado. Como vamos utilizar Maven para gerar nossa aplicação, podemos trabalhar com o Eclipse. Baixe o mesmo em Download Eclipse Neon JEE este eclipse já é voltado para JEE portanto já possuí o Maven embarcado.

Criando a Aplicação

Importante: Por se tratar de um tutorial, é importante verificar que não instalamos banco de dados no nosso ambiente local, vamos utilizar o banco (sqldb) que roda embarcado na aplicação. No meu caso, tenho um MySQL rodando para demonstrar como faremos para rodar em “produção”

O primeiro passo é criar uma pasta para criarmos nossa aplicação. Chamei a minha aplicação de finpesapp.

mkdir finpesapp

Feito isso, entre no diretório e digite:

yo jhipster

Exemplo:

I:\AmbienteSpringAngular\workspace\finpesapp>yo jhipster

Update:

Após a atualização do jHipster, criei uma nova app com as configurações abaixo. Se estiver fazendo este tutorial agora, crie utilizando estas configurações :)

Atualização para criação da App

Atualização para criação da App

 

 

jhipster_home


Qual o nome base da aplicação? Coloquei o nome do meu diretório, este será o nome da app.
? (1/15) What is the base name of your application? finpesapp

Qual o pacote padrão? Informei referente ao meu site mas você pode modificar de acordo com o seu gosto.
? (2/15) What is your default Java package name? br.com.ticarpa.app

Qual o tipo de autenticação? Veja que temos aqui alguns tipos. Autenticação básica, Autenticação básica com integração social (Google, Facebook, Twitter), OAuth2 e Autenticação baseada em JWT. Escolhemos JWT.
? (3/15) Which *type* of authentication would you like to use? Token-based authentication (stateless, with a token)

Qual o tipo de banco de dados vamos utilizer na aplicação? Temos a opção de SQL e NOSQL. Utilizaremos o SQL pois vamos utilizar o MySQL em produção.
? (4/15) Which *type* of database would you like to use? SQL (H2, MySQL, PostgreSQL, Oracle)

Qual banco vamos utilizar em produção? Mysql
? (5/15) Which *production* database would you like to use? MySQL

Qual o banco utilizado em Desenvolvimento? H2 (Não necessita de instalar nenhum banco na máquina para o desenvolvimento).
? (6/15) Which *development* database would you like to use? H2 with disk-based persistence

Vamos utilizer o Segundo nível de cache do Hibernate? Deixaremos padrão.
? (7/15) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)

Vamos utilizer o motor de busca na aplicação? Sim, com ElasticSearch
? (8/15) Do you want to use a search engine in your application? Yes, with ElasticSearch

Vamos utilizer cluster nas sessões HTTP? Não
? (9/15) Do you want to use clustered HTTP sessions? No

Gostaria de usar WebSockets? Não
? (10/15) Do you want to use WebSockets? No

Gostaria de usar Maven ou Gradle para a compilação da aplicação Backend? Maven
? (11/15) Would you like to use Maven or Gradle for building the backend? Maven

Gostaria de usar o Grunt ou Gulp.js para o Frontend? Grunt
? (12/15) Would you like to use Grunt or Gulp.js for building the frontend? Gulp.js (will be the default in JHipster 3.0)

Gostaria de usar o processador de css LibSass? Marcaremos como No.
? (13/15) Would you like to use the LibSass stylesheet preprocessor for your CSS? No

Gostaria de habilitar a internacionalização? Sim
? (14/15) Would you like to enable translation support with Angular Translate? Yes

Qual framework de teste você quer utilizar? Gatling
? (15/15) Which testing frameworks would you like to use? Gatling

Aguarde a criação da sua app.

Se tudo der certo você terá a seguinte mensagem no final:

Figura 1

Figura 1. Criação com sucesso da aplicação

Importando a aplicação no Eclipse

Para importar a aplicação no eclipse, vá em File -> Import e selecione dentro da pasta Maven a opção “Existing Maven Projects” conforme a figura abaixo:

Figura 2

Figura 2 – Importando o projeto no Eclipse Passo 1

Selecione o seu projeto e clique em “Finish” conforme a imagem.

Figura 3

Figura 3 – Importando o projeto no Eclipse Passo 2

Após importar o projeto, vamos verificar se ele está compilando, então execute o Maven. Você pode executar via linha de comando porém para que a gente se familiarize com o plugin do Maven vamos criar duas configurações do Maven.

Clique no plugin do Maven e vá em Run Configurations… conforme figura 4.

Figura 4

Figura 4 – Criação da Tarefa do Maven

Informe:

(Tarefa para compilação)

Nome: Compilação ou o que desejar.
Base Directory: Eu costumo informar a variável pois assim, posso reutilizar a tarefa do Maven em vários projetos. A variável é recebida ao selecionar um projeto. Variável: ${project_loc}
Goals: clean install
Clique em Apply

Figura 5

Figura 5 – Criação da Tarefa de Compilação no Maven

(Tarefa para Rodar o App)

Nome: Run ou o que desejar.
Base Directory: Eu costumo informar a variável pois assim, posso reutilizar a tarefa do Maven em vários projetos. A variável é recebida ao selecionar um projeto. Variável: ${project_loc}
Goals: spring-boot:run
Clique em Apply

Figura 6

Figura 6 – Criação da Tarefa do Maven para Rodar a Aplicação utilizando Spring Boot

Agora selecione o projeto e execute a compilação.

Isto pode demorar um pouco, se preferir marque o checkbox Skip Tests que a aplicação irá compilar sem que os testes sejam executados.

O resultado será conforme figura abaixo.

Figura 8

Figura 8 – Sucesso na compilação da Aplicação

Após a compilação ser concluída, vamos subir a aplicação utilizando a tarefa que criamos de “run” do aplicativo. Quando o aplicativo estiver pronto, uma mensagem com os endereços do mesmo será lançada no console conforme imagem.

Figura 8

Figura 8 – Sucesso no Start da App com Spring Boot

Acesse a URL http://127.0.0.1:8080/ e veja a aplicação rodando localmente. Simples não?

Figura 9

Figura 9 – Pagina inicial da Aplicação Gerada

Nossa! Pena estar em inglês não é?

Calma jovem gafanhoto, vamos traduzir sua aplicação. Vá no terminal e navegue até o caminho da sua aplicação e digite yo jhipster:languages. Marque a opção Portuguese (Brazilian) utilizando a barra de espaços e aperte o Enter.

Figura 10

Figura 10 – Incluindo o idioma Português do Brasil na Aplicação

Vá nos idiomas da sua aplicação, selecione Português e cante o hino do Brasil de tanta emoção.

Figura 11

Figura 11 – Alterando o Idioma

Entendendo a Aplicação Gerada

A primeira vista, a aplicação gerada é muito simples de ser compreendida.

No canto superior esquerdo temos uma faixa dizendo que a aplicação está no ambiente de desenvolvimento assim como o título da aplicação e sua versão atual. No futuro, vamos gerar a versão de produção verificando que o banner é automaticamente retirado.

Figura 12

Figura 12 – Tarja de Desenvolvimento

No lado direito, temos o menu da aplicação que pode ser tranquilamente customizada pois utiliza Bootstrap como framework de Frontend.

Figura 13

Figura 13 – Menu sem autenticação

Realizando o login como administrador na aplicação podemos verificar que o nosso menu recebeu novos itens. Vamos entender cada um deles.

Figura 14

Figura 14 – Menu com autenticação

1. Início: Não precisamos falar deste item, ele apenas redireciona a aplicação para página principal.

2. Entidades: Neste item de menu, serão exibidos as entidades criadas no sistema. Como não temos nenhuma, este item não traz subitens.

3. Conta: Neste item de menu, temos as opções referentes ao usuário autenticado conforme figura abaixo:

Figura 15

Figura 15 – Menu de usuário

3.1. Configuração: Exibe as configurações do usuário como nome, sobrenome, e-mail e idioma.
3.2. Senha: Permite a troca de senha do usuário. Veja que os campos já possuem o indicador de nível de dificuldade de senha.
3.3. Sair: Realiza o Logout do usuário.

4. Administração: É responsável pela manutenção administrativa do sistema e também exibe informações de configurações e monitoração do sistema. Com as informações disponíveis neste módulo, podemos realizar toda a checagem da aplicação em tempo real.

Figura 16

Figura 16 – Menu de Administração

4.1. Gerenciamento de usuário: Responsável pela manutenção de usuários na aplicação. Veja que por padrão, duas “ROLES” já são criadas. Uma para atribuir um usuário comum e outra para atribuir um usuário como Administrador.

Figura 17

Figura 17 – Lista de usuários

4.2. Métricas: Exibe as métricas em tempo real da aplicação. São exibidas métricas da JVM, métricas de requisições HTTP, estatísticas de serviços e outras estatísticas importantes para o administrador da aplicação.

Figura 18

Figura 18 – Métricas da Aplicação

4.3 Estado do Sistema: Neste item, é exibido o estado real da “infraestrutura” da aplicação como por exemplo, servidor de e-mail, espaço em disco, banco de dados e outros itens. Até o final desta série de tutoriais, vamos criar novos “estados” para verificar por exemplo se o serviço do site que verifica e recebe dados de cotações de moedas está no ar por exemplo.

Figura 19

Figura 19 – Estado do Sistema

4.4 Configuração: Exibe as configurações da aplicação como informações de segurança e banco de dados por exemplo. É muito útil para verificar sem ter que abrir o código da aplicação ou arquivos de propriedades.

Figura 20

Figura 20 – Configuração

4.5. Auditorias: Exibe informações de auditoria da aplicação. Por padrão esta funcionalidade exibe as informações de autenticação do usuário. Nos próximos artigos, vamos criar novos logs de auditoria.

Figura 21

Figura 21 – Auditoria

4.6. Logs: Está é uma funcionalidade muito bacana da aplicação. Conseguimos por aqui informar o nível de log da aplicação em nível de pacotes ou classes. No geral, estas configurações são realizadas através de xml porém com o JHipster conseguimos fazer isto pela interface gráfica. Na imagem, realizei a filtragem da classe UserService e nela, posso definir o nível de log desejado.

Figura 22

Figura 22 – Logs

4.7. API: Exibe todas as APIs RESTful disponíveis na aplicação. Utiliza o Swagger como catálogo das APIs. Através desta interface é possível verificar e testar os serviços disponíveis além de visualizar os inputs de entrada e saída dos serviços RESTful.

Figura 23

Figura 23 – Catálogo de Serviços (API)

4.8. Banco de Dados: Está opção aparece quando utilizamos o H2 como base de dados de desenvolvimento. É o administrador do H2, com ele conseguimos verificar a estrutura da base, executar instruções e ter acesso às informações do banco de dados.

Figura 24

Figura 24 – Administração do H2

5. Idioma: É onde selecionamos o idioma que a aplicação deve estar. Não há nada de novo aqui.

Com isso finalizamos este artigo. No próximo artigo vamos criar as funcionalidades da aplicação e um Dashboard para o usuário visualizar a sua “vida” financeira. Não deixem de compartilhar e comentem em caso de qualquer tipo de problema.

Tiago Carpanese
Tiago Carpanese
Criador deste site, apaixonado por tecnologia, busco contribuir para a segregação do conhecimento. Não deixe de curtir este site no Facebook clicando em Curtir na Barra da Direita. Siga-me no Twitter para ficar por dentro das novidades. Não deixe de comentar !
  • Stenio Soares

    Quando vc vai dar continuidade ao artigo?

    • Tiago Carpanese

      Olá amigo.

      Estou finalizando a segunda parte com os cadastros.

      Logo mais finalizo. Está ficando muito bacana, vocês vão gostar.

      Abraços

  • Paulo Jorge Nascimento

    Parabéns pela iniciativa.

    • Tiago Carpanese

      Muito obrigado.

  • Maria

    segui todos os passos, mas na hora que vou logar da erro na autenticação, e nao consigo gerar um novo usuário, como resolver isso?

    • Tiago Carpanese

      Usou admin admin como login e senha? Qual o erro?

  • João Víctor Puggian

    Muito bom artigo. Parabéns e obrigado!

    • Tiago Carpanese

      De nada. Obrigado pela visita.

  • fransouza ti

    Muito bom o post. Muito bem explicado.
    Valeu por compartilhar.