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

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

Essa página é parte de um tutorial, veja mais detalhes sobre o conteúdo abordado aqui em Criar projeto.

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 queiram migrar para o Cronapp pode se sentir à vontade de usar o modelo high code, enquanto 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 textual;
  • Editor visual: facilita a criação de telas apenas arrastando os componentes, aplicando eventos, adicionando estilos 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 outros ambientes de desenvolvimento integrado, como a codificação de todo o conteúdo e instalação de 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); no caso do high code, é possível trabalhar com NodeJs, Java, Python e em back-end; JavaScript e TypeScript para o front-end e criar os plugins Cronapp.



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

Páginas e telas

O Cronapp possui diversos recursos que agilizam e facilitam o desenvolvimento da 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, eles 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 Low code

No momento que for iniciar um novo projeto low code, é necessário informar se o seu projeto será Mobile com Web ou Apenas Web. Na primeira 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 os sistemas Android e 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 web respectivamente



Passos

Acesse o site da IDE (ide.cronapp.io) e logue com seu usuário (ou crie um usuário, 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.

No geral, 1gb é suficiente para a maioria dos projetos. Porém, projetos grandes e com muitos recursos podem demandar mais memória. Contas com plano free tem só podem utilizar 1gb de memória ram, e não visualizarão essa tela.



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

Ajuda e exemplo

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



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 ao Cronapp será aberta uma janela que irá sugerir que você baixe um projeto exemplo de farmácia com várias funcionalidades. Mas para esse tutorial, clique em Não.

Caso queira acessar o nosso projeto de exemplo mais tarde, clique no botão Projeto Exemplo na aba de Bem-vindo.


Figura 2.5 - Na aba Bem Vindo é possível baixar o projeto exemplo

Definindo o projeto

Seguindo os passos como na Figura 2.6: 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, 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.6 - 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.7 - 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. Deixe as opções de Login por redes sociais e Autenticação Mútua como Não.



Figura 2.8 - 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, padrão do Cronapp e com suporte à acessibilidade.


Figura 2.9 - Seleção de temas do Bootstrap


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


  • No labels