Page tree
Skip to end of metadata
Go to start of metadata

Nessa página mostraremos uma visão geral o desenvolvimento no Cronapp e iniciaremos um mini projeto de reserva de livros para uma biblioteca.

Desenvolvimento

Um dos diferenciais do Cronapp é dar ao usuário a possibilidade de desenvolver seu projeto de diferentes formas. Desenvolvedores mais experientes ou que já tenham iniciado seu projeto em outra plataforma e queira migrar para o Cronapp pode se sentir a vontade de usar o modelo High code, enquanto que usuários menos experientes ou que desejam maior agilidade na criação de projetos podem preferir o modo Low code. O desenvolvedor também pode criar parte do seu projeto em Low code e outra parte em High code, se assim preferir. No Cronapp você é livre para escolher como deseja trabalhar.

Low code

Em projetos do tipo Low code são criados vários recursos e biblioteca que facilitam e agilizam o desenvolvimento em seu projeto, citamos alguns:

  • Diagrama de dados: gera as camadas de DAO e entity, já configurado com o JPA para criar as tabelas do Banco de Dados de acordo com a modelagem especificada no Diagrama de Classes;
  • Blocos de programação: criação da lógica de programação sem codificar em modo texto;
  • Editor visual: facilita a criação de telas apenas arrastando os componentes, inserindo eventos, fonte de dados e outros;
  • Fonte de dados: faz a ligação entre o conteúdo do banco de dados ou retorno de um bloco de programação para alimentar componentes na tela.
  • Permissão de acesso: define regras e autorizações para diferentes perfis de usuário do sistema.

High code

No modelo de projeto High code, o desenvolvimento ocorre como em outras IDE's, codificando todo o conteúdo e instalando plugins de acordo a necessidade do seu projeto. Por padrão, quando você criar seu projeto nesse modo, ele já vem com uma estrutura simples criada, porém sem banco configurado ou qualquer lógica de programação previamente montada.

Na Figura 1.1 vemos que só é possível trabalhar com Low code utilizando Java (Back-End) e JavaScript (Front-End), já em High code, é possível trabalhar com NodeJs, Java, Python e C#.Net* em Back-End; JavaScript e TypeScript* para o front-End e criar os plugins do Cronapp.


Figura 1.1 - Diferença entre as linguagens trabalhadas em Low e High code.


Informação:

* As linguagens C# e TypeScript ainda não estão disponíveis na plataforma, mas já estamos trabalhando para isso.

Telas / views

O Cronapp possui um facilitador e agilizador para a parte visual, possibilitando criar páginas web e gerar telas de aplicativos para smartphones em pouquíssimo tempo. Ao arrastar os componentes da aba lateral para a tela, os mesmo são convertidos em HTML, sendo possível configurar suas propriedades, adicionar eventos, modificar responsividade e estilo. Tudo isso de forma visual! (Figura 1.2)



Figura 1.2 - Arrastando o componente Grade logo abaixo do
componente Banner.

Web e Mobile em modo Low code

No momento que for iniciar um novo projeto low code, é necessário informar se o seu projeto será Web, Mobile ou Mobile com Web. Na última opção é possível compartilhar vários recursos em comum: banco de dados, funções dos blocos servidor, fontes de dados e outros; gerando no final um sistema web e um aplicativo para Android e/ou IOS. Na Figura 1.3 vemos os diretórios em um projeto que é tanto web quanto mobile.



Figura 1.3 - Diretórios do Back-End (Servidor), Mobile e Front-End (Web) respectivamente.



Passos

Acesse o site da IDE (ide.cronapp.io) e logue com seu usuário (ou crie um usuário Trial, caso ainda não tenha) (Figura 2.1), a plataforma ficará disponível para abrir um projeto existente, importar um criado em outra plataforma ou iniciar um novo. 

Figura 2.1 - Logue com seu usuário ou crie uma conta.

Seleção de memória

Após logar, você será direcionado para a tela de seleção da quantidade de memória ram que você deseja reservar para os servidores durante o desenvolvimento e execução de teste do seu projeto. A quantidade de memória esta diretamente ligado com o consumo de Cronunit.

Cronunit é a unidade consumida por tempo de desenvolvimento na plataforma Cronapp, ao selecionar 512mb será consumido um cronunit por hora, logo, se selecionar 1gb estará utilizando dois cronunits por hora. 

Na versão antiga do Cronapp era possível utilizar 512mb de memória para pequenos projetos, porém a versão atual está mais robusta e por possuir mais recursos, necessita de no mínimo 1gb de memória. Nesse caso, selecione selecione a opção de 1gb.

Figura 2.2 - Seleção de memória para rodar o projeto

Termo, ajuda e exemplo

Após selecionar a memória, uma janela com os termos e serviços Beta do Cronapp será exibido, leia o termo e Concorde para prosseguir. 

Uma assistente exibirá informações sobre o Cronapp para cada janela aberta, você pode clicar em Próximo para ver as informações ou para em Clique para fechar.

Figura 2.3 - Assistente de ajuda


Caso não queira exibir mais o assistente, clique no botão atalho Assistente > Parar todos os Assistentes (Figura 2.4)

Figura 2.4 - Parar todos os Assistentes


Por fim, no primeiro acesso o Cronapp sugere que você baixe um projeto exemplo de farmácia, com várias funcionalidades. Nesse momento clique em Não.

Caso queira, você pode importar o projeto através do Github posteriormente: https://github.com/cronapp-samples/farmacia-sample.git

Definindo o projeto

Seguindo os passos como na Figura 2.5: clique no ícone Novo Projeto (1) e na janela que abrir, selecione o projeto mobile e Web do tipo Low-code (2), informe o nome do projeto (Get_Started) e por fim, selecione a opção Copiar do Modelo (4). Após isso, clique em Finalizar.

Abrir projeto versionado

Se fossemos importar um novo projeto versionado (GIT ou SVN), deveríamos selecionar a opção O projeto está sob controle de versão? e na tela seguinte informar os dados do projeto. Caso fossemos importar um projeto compactado, deveríamos selecionar a opção O projeto está em um arquivo ZIP? e na tela seguinte importar o projeto.


Figura 2.5 - Definições iniciais do novo projeto

Modelo

A próxima tela é a de seleção do modelo, cada modelo possuem uma série de tecnologias que facilitarão o desenvolvimento de seu sistema. Atualmente o Cronapp Low code trabalha apenas com o modelo Mobile Low Code Project, selecione-o e clique em Avançar, como na Figura 2.6.

Figura 2.6 - Seleção do modelo do projeto

Informações do projeto

Na janela de definições do projeto mobile (Figura 2.7), informe o Identificador da sua aplicação, por exemplo: "br.com.minhaempresa.nomedomeuapp" ou deixe o padrão. Ao selecionar a opção Incluir Front-End será criado a parte web da sua aplicação, já a opção Incluir Back-End adicionará o lado servidor. No nosso caso vamos criar um projeto completo, com servidor, web e mobile, então deixe as duas opções selecionadas.

Deixe também a opção Tipo de Autenticação selecionada como Token, exigindo que o usuário logue no sistema.


Figura 2.7 - Configurações do projeto

Temas

As opções de temas foram importadas do Bootstrap, ao selecionar um tema, tanto o projeto web quanto o mobile seguirão o mesmo padrão. Nesse projeto usaremos o tema Material.

Figura 2.8 - Seleção de temas do Bootstrap


Clique em Finalizar e aguarde o Cronapp configurar todo o projeto para você!

Atualizações de bibliotecas

Sempre que abrir ou criar um projeto, o Cronapp irá verificar se existem atualizações a serem feitas em suas bibliotecas. Sempre atualize-as clicando em Sim (Figura 2.9) para garantir as correções e melhorias que são feitas constantemente.

Figura 2.9 - Atualizando as bibliotecas do projeto.


Após isso aguarde a barra de status (barra inferior azul) parar de exibir as atualizações que estão sendo feitas no projeto para iniciar as atividades.


  • No labels