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

Nesse último passo, iremos verificar se está tudo funcionando corretamente em nosso projeto. tanto na parte web quanto mobile.

Essa página é parte de um tutorial, veja mais detalhes sobre o conteúdo abordado aqui em Executar, compilar e publicar.


Os sistemas web criados pelo Cronapp são responsivos e se adequam aos diferentes tamanhos de telas através dos navegadores do smartphone, tablets ou TVs; já os projetos mobile possibilitam criar aplicativos nativos para rodar diretamente nos sistemas Android e IOS.

Veremos que o Cronapp nos permite testar os sistemas mobiles em pelo menos três formas distintas, sem a necessidade de gerar arquivos nativos.

Inicializar servidor

Você pode Rodar (1) ou Debugar (2) seu projeto clicando nos botões de atalho ou através da opção Executar no menu do sistema. Dê preferência ao modo Debug, pois nesse modo é possível realizar diversas alterações no sistema e ver as modificações sem a necessidade de rodar o projeto novamente.


Figura 1.1 - Maneiras de executar o projeto


Assim que o projeto começar a compilar, a barra de status mudará de azul para verde e em seguida aparecerá o status "Starting Tomcat..." (destaque 1 da figura 1.2). Aguarde até o ícone Abrir Navegador ficar ativo (2).


Figura 1.2 - Compilando projeto para teste

Abrir aplicação

Assim que o servidor for iniciado, os botões Parar Aplicação (1) e Abrir Navegador (2) ficarão habilitados. Ao clicar no botão Abrir Navegador (2), um menu é aberto para selecionar uma das opções para testar o projeto. (Figura 2.1)


Figura 2.1 - principais formas de testes


Botões de atalho:

  1. Parar Aplicação: finaliza o servidor Tomcat;
  2. Abrir Navegador: expande o menu de execução;
  3. Navegador [webapp]: abre outra aba do navegador com o projeto web;
  4. Navegador [mobile]: abre outra aba do navegador com o projeto mobile;
  5. Simulador: abre outra aba dentro do Cronapp para rodar o projeto mobile no simulador.


Dispositivos Móveis do menu do sistema:

5. Simulador: abre outra aba dentro do Cronapp para rodar o projeto mobile no simulador;
6. Cronapp Browser: exibe uma janela com o código QR para abrir a aplicação diretamente do seu Smartphone através do aplicativo Cronapp Browser.

Navegador

Ao testar sua aplicação pelo navegador, é possível utilizar as propriedades de depuração do browser para verificar como a aplicação irá se comportar com diferentes resoluções de tela.

Durante a execução do projeto, o Cronapp cria um domínio temporário (destaque 1 da figura 2.2) e público. 


Figura 2.2 - Aplicação sendo executada no Navegador

Simulador

Utilize o simulador para testar sua aplicação mobile com uma resolução de tela de tamanho padrão para Smartphones.


Figura 2.2 - Aplicação sendo executada no simulador 

Cronapp Browser

Para usar essa opção de teste, é necessário que você tenha o aplicativo Cronapp Browser instalado em seu Smartphone e assim que for acionado, seu projeto será baixado em seu smartphone e rodará em uma camada acima do aplicativo. O app Cronapp Browser é a melhor opção para testar, não nativamente, seu projeto mobile, pois consegue simular e usar praticamente todos os recursos do Smartphone exigidos pela aplicação.

Baixa instalar o aplicativo, acesse a loja virtual iOS ou Android através dos links abaixo, faça o download e instale a aplicação Cronapp Browser em seu dispositivo.


Links para o aplicativo de teste Cronapp Browser

Como usar

Abra o aplicativo Cronapp Browser instalado em seu Smartphone e clique no botão Acionar Leitura para ativar o recurso da câmera que faz a leitura do QRCode.


Figura 2.3 - Tela inicial do Cronapp Browser


Com o projeto rodando, acesse no menu de sistemas Dispositivos Móveis > Executar > Cronapp Browser (destaque 6 na Figura 2.1) para abrir a janela com o QRcode da sua aplicação. Aponte a câmera do smartphone para o seu monitor para efetuar a leitura do QRCode gerado pela IDE. 



Figura 2.4 - Realizando a leitura do QRCode gerado pelo Cronapp através do Cronapp Browser


Após a leitura, o projeto é baixado temporariamente no smartphone e executado por cima da aplicação Cronapp Browser.


Figura 2.5 - Aplicação Get Started executando com o Cronapp Browser

Passos para testar

Execute o projeto no Cronapp (Figura 1.1) e rode a aplicação em modo navegador web (destaque 3 da figura 2.1).

Por padrão, ao abrir o projeto web ou mobile, a primeira tela a ser apresentada é a de login.view.html e você pode usar o usuário administrador que já vem cadastrado em todos os projetos:

  • login: admin
  • senha: admin


Figura 3.1 - Tela de login da aplicação

Cadastro de usuários e livros

Ao realizar o login, você será redirecionado para a página inicial (ou página home.view.html). Na barra de navegação, selecione AdminUsuários (destaques 1 e 2 da Figura 3.2) para ser redirecionado a página de usuários.


Figura 3.2 - Redirecionando para a página de usuários


Clique no botão de Adicionar (em destaque na Figura 3.3) para abrir a tela de adição de usuários.


Figura 3.3 - Lista de usuários do sistema


Preencha os dados de um usuário e no campo Função (destaque 1 da figura 3.4), selecione o grupo "Alunos". O campo Seguro representa os permissionáveis do sistema, deixe esse campo em branco pois já vinculados o usuário ao permissionável "Aluno" através do grupo (Função) "Alunos".


Figura 3.4 - Cadastro de usuário


Na barra de navegação, selecione AdminLivros para ser redirecionado a página de livros e cadastre alguns livros (Figura 3.5).


Figura 3.5 - Página CRUD de livros

Nova Reserva

Acesse a aplicação mobile através do navegador (destaque 4 da figura 2.1), simulador (5 da figura 2.1) ou Cronapp Browser (6 da figura 2.1), efetue o login com o usuário aluno cadastrado no passo acima.

Acesse o menu do usuário e selecione Minhas Reservas.


Figura 3.6 - Acesso a tela Minhas reservas pelo menu do usuário


Na tela de reservas do usuário, clique no ícone "+" e selecione um livro para exibir na lista. Deslize o item da lista para esquerda para exibir o botão de Remover.


Figura 3.7 - Tela de reserva de livros da aplicação

Conclusão

Finalizamos o nosso sistema de exemplo.

Para se aprofundar nos recursos do Cronapp, acesse a nossa plataforma academy.cronapp.io e assista nossas vídeo-aulas ou tire suas dúvidas em nosso fórum.



  • No labels