Skip to end of metadata
Go to start of metadata

Neste tutorial mostraremos como criar uma aplicação mobile utilizando a plataforma CronApp. A aplicação criada será hibrida, utilizando a tecnologa Ionic do AngularJS, onde só após o final do processo você optará pelos sistemas Android ou iOS.

Configurando um Projeto Mobile

Clique em "Novo", selecione o tipo de projeto desejado e escolha o template.

Figura 1 - Escolhendo o tipo de projeto

 

Figura 2- Escolhendo o template do projeto

 

Aqui você irá configurar o tipo de autenticação de acesso e quais etapas de processo estarão inclusas. Neste caso, utilizaremos o padrão dos projetos mobile: inclusão de back-end e token como tipo de autenticação.


Figura 3 - Configurando os parâmetros do projeto


Com o projeto criado, será habilitada a aba respectiva aos mobiles.

Figura 4 - Aba: Dispositivos Móveis

 

Nesta tela deverão ser feitas as configurações para a publicação do projeto. Em Aplicativo você preenche com as informações básicas de cadastro do seu projeto mobile. Em Ionic você preenche com seus dados de sua conta cloud na plataforma Ionic, onde será feito o upload dos seus projetos mobile criados na plataforma CronApp. Caso você não tenha conta no Ionic, basta fazer seu cadastro em: https://apps.ionic.io/signup

Figura 5 - Configuração da compilação do projeto


Figura 6 - Cadastro no Ionic Cloud


Configurações finalizadas, é hora de criar, executar e publicar sua aplicação!

Criando um Projeto Mobile

Todos os novos projetos já vem com um diagrama de Pessoa como modelo e, caso deseje, você pode partir dele para criar sua aplicação. Inclusive, recomendamos que o você possua apenas um diagrama para construação da sua aplicação. Portanto, sempre utilize o diagrama que já vem como modelo. Nesse mesmo diagrama vamos incluir mais classes. Poderíamos criar um novo diagrama totalmente separado, porém não o faremos para reduzir o consumo de memória. Cada diagrama utilizado torna a aplicação mais ‘pesada’ em termos de uso de memória do servidor. Assim, por razões de desempenho da aplicação, é mais interessante utilizar o diagrama já existente.

Aqui no repositório de documentações do CronApp, você pode encontrar diversas informações sobre como manipular os dados (Modelagem de Dados) de sua aplicação e como fazer a edição do front-end (Editor de Front-End).


Com o projeto criado você poderá executar a sua aplicação. Para isso basta clicar no ícone de execução e aguardar que o sistema compile os dados do seu projeto.

 

Figura 7 - Executando o projeto criado

Executando um Projeto Mobile

Com o projeto executado, algumas ambas ficarão disponíveis para que seja possível fazer a visualização de como está a aplicação. Clicando em "Abrir Navegador" você terá a possibilidade de visualizar sua aplicação no próprio navegador ou, assim como na opção existente na aba Dispositivos Móveis, você poderá simular a visualização da aplicação em um dispositivo móvel. 

 

Figura 8 - Abrindo o projeto


 Clicando nas opções marcadas abaixo é possível fazer a simulação de visualização em um smartphone. Podendo, inclusive, escolher a orientação do aparelho: na vertical ou na horizontal.

Clicando nas opções marcadas abaixo é possível fazer a simulação de visualização em um smartphone. Podendo, inclusive, escolher a orientação do aparelho: na vertical ou na horizontal.

Figura 9 - Projeto mobile em formato de smartphone


Clicando na opção marcada abaixo é possível fazer a simulação de visualização em um tablet. Podendo, inclusive, escolher a orientação do aparelho: na vertical ou na horizontal.

 

Figura 10 - Projeto mobile em formato de tablet

Publicando um Aplicativo Mobile

Com a sua conta no Ionic é possível que você faça upload do seu projeto na Ionic Cloud, onde é possível manter um controle completo sobre informações e atualizações do projeto. Também é possível enviar o seu projeto para o Ionic View, um aplicativo mobile (disponível em: http://view.ionic.io/) onde, além de ter as informações que constam na Cloud, também poderá compartilhar um projeto mais facilmente. 


Figura 11 - Enviando projetos para o Ionic


 Figura 12 - Projeto no Iconic Cloud


Para compilar e publicar o seu aplicativo, basta selecionar para qual plataforma ele será lançado. O Ionic possui uma documentação (https://ionicframework.com/docs/guide/publishing.html) que explica quais cadastros são necessários para que seja possível colocar seus aplicativos disponíveis na Google Play Store ou App Store.


Figura 13 - Simulação 

 

No caso do sistema Android, seu aplicativo fica disponível na Ionic Cloud e de lá é possível fazer o download do arquivo apk. e fazer a instalação manualmente.


Figura 14 - Instalação

 

 

Nesta página

 

 

 

 

  • No labels