Experimente Grátis

Criando uma Aplicação em 5 minutos

Equipe Cronapp

28/07/2016

Olá, novo usuário da plataforma CronApp!

Neste tutorial você irá aprender a criar uma aplicação para registro de cidades e pessoas e ao final já terá ela pronta para o deploy.

 

  A Modelagem de Dados é um dos principais recursos do CronApp IDE porque se trata de uma ferramenta completa para geração de código back-end e front-end ao ser um facilitador para a criação de uma aplicação, realizando todos os processos iniciais e genéricos de uma aplicação com uso de banco de dados. Nessa ferramenta o usuário poderá definir e desenhar o domínio da sua aplicação e, com isso, após a definição de todas as entidades que serão necessárias para a construção da mesma, o usuário poderá criar uma aplicação usual com uso de recursos de banco de dados e telas de cadastro. Sendo necessário, praticamente, para a utilização da aplicação já em produção, apenas a inserção de links e alguns ajustes visuais a sua aplicação. Deste modo, o ganho em produtividade para se criar uma aplicação do zero é muito grande, não sendo necessário ao usuário codificar grande quantidade de códigos HTML, Java e JavaScript, visto que o mesmo será gerado pelo CronApp IDE.

 

 

 

Primeiro Passo: Configurar o projeto

Você pode selecionar um dos modelos que serão constantemente disponibilizados no CronApp, importar seu projeto pré-existente ou criar tudo do zero. Selecione a opção “copiar do modelo”, para poder selecionar o modelo “JPA+Spring Boot+Angular JS” que contém tudo o que é necessário para que o seu projeto funcione, escolha o tema que mais lhe agrade e clique em finalizar para que o projeto seja criado com a estrutura do template e que seja executado o maven para buscar as dependências.

Figura 1 – Escolhendo o modelo do projeto

 

 Com o projeto criado você poderá criar um diagrama de classes que será responsável pela configuração das páginas de registro. Criaremos um diagrama de “Pessoa” e dentro dele criaremos duas classes: pessoa e cidade

Figura 2 – Criando o diagrama

 

Vamos configurar a classe “pessoa” com os elementos: id (gerado automaticamente), nome e CPF. Outra função existente no menu de configurações é o de selecionar o tipo de atributo que está sendo criado, além de ser possível gerar uma consulta (querie) ao clicar no último botão. Em CPF iremos adicionar uma máscara de digitação e em nome uma consulta, sendo que o atributo final está vinculado à classe cidade.

Figura 3 – Configurando a classe “pessoa”

 

Para a classe “cidade” configuraremos apenas o atributo “nome”.

13

Figura 4 – Configurando a classe “cidade”

 

Pronto! Feita a ligação 1 para N entre as classes e seu diagrama está configurado.

Figura 5 – Diagrama configurado

 

 

Segundo Passo: Gerar a Camada de Dados

Vamos alterar o namespace, confirmar o banco de dados selecionado e salvar o procedimento. Agora é possível criar a camada de persistência, que já vem configurada, possibilitando que a mesma seja gerada com seus valores padrão.

Figura 6 – Gerando camada de persistência

 

Para gerar as páginas do diagrama que estávamos editando, selecione o modelo AngularJs Crud View, em “Wizard Diagram Crud View”, e configure as páginas para as duas entidades. Selecione os campos e as buscas (querries) que desejar para a grid de pessoa e, em seguida, selecione os campos para o formulário. Por enquanto nada será alterado em Cidade, então basta finalizar.

Figura 7 – Gerando as páginas do diagrama

 

Powered by Rock Convert

 

Terceiro Passo: Executar a Aplicação

Pode-se observar no Editor de Front-End, na pasta logged, que a página pessoa foi criada com diversos elementos e está pronta para uso. Para acessá-la basta executar a aplicação e colocar o caminho da página no navegador, onde o usuário padrão para esse template é admin com senha admin.

Figura 8 – Verificando a página criada

 

Com as telas configuradas podemos criar um novo registo de “pessoa” em nossa página. Temos todos os campos que selecionamos no momento de criação de crud view e podemos observar que o campo CPF possui a máscara que configuramos. Os registros do campo cidade foram inseridos anteriormente seguindo os mesmos procedimentos.

Figura 9 – Executando a página e criando registros (1)

 

Criamos o registro. Há o campo de busca que selecionamos e ao preenchermos com um nome, os valores abaixo serão filtrados. Nesta tela estão os outros elementos que selecionamos no momento de criação de crud view.

Figura 10 – Executando a página e criando registros (2)

 

 

Pronto!

  Com isso, a aplicação está pronta para deploy. Passamos pela importação do modelo, configuração de diagrama, criação de página e registro. No próximo tutorial passaremos por Deploy.

 

 

Artigos recentes

Como fazer a gestão de tempo da equipe de TI?

23/05/2019

5 tendências para chatbot que você precisa conhecer!

21/05/2019

Aplicativo em nuvem ou site mobile: qual o ideal para o seu cliente?

17/05/2019

Artigos recentes

Como fazer a gestão de tempo da equipe de TI?

23/05/2019

5 tendências para chatbot que você precisa conhecer!

21/05/2019

Aplicativo em nuvem ou site mobile: qual o ideal para o seu cliente?

17/05/2019