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.

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

Inicializar servidor

Para executar o servidor de teste da aplicação, basta clicar no botão (verde) Debug (destaque 1 da figura 1.1) localizado na lista de botões de atalhos. Também é possível executar através do menu Executar > Rodar ou Executar > Debug (2). Recomendamos sempre executar sua aplicação em modo Debug, pois neste 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


Durante o processo de compilação o botão de Debug mudará para Parar Aplicação (1 da figura 1.2); a barra de status mudará da cor azul para verde, exibindo o texto "Iniciando 'Get_started'" (2) e uma pequena janela na parte inferior da IDE mostrará uma barra com o progresso para finalizar a compilação (3).


Figura 1.2 - Compilando projeto para teste

Abrir aplicação

Logo que o servidor de testes finalizar o processo de compilação, uma janela mostrará 3 opções: as 2 primeiras abrem o projeto web e mobile em uma nova guia do seu navegador, enquanto a última abre a aplicação mobile pelo simulador dentro do próprio Cronapp. 


Figura 2.1 - Janela de acesso rápido às aplicações do sistema


Após fechar a janela de acesso rápido, o botão Abrir Navegador ficará disponível, clique nele para exibir um menu com as mesmas opções da janela de acesso rápido. 


Figura 2.2 - Opções de acesso as aplicações


Botões de atalho:

  1. Botão Parar Aplicação: finaliza o servidor Tomcat;
  2. Botão 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.


Menu do sistema Dispositivos Móveis > Executar:

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

Durante a execução do projeto o Cronapp cria um domínio público temporário (destaque 1 da figura 2.3) para a sua aplicação. Enquanto o servidor de testes estiver rodando, é possível enviar esse link para outra pessoa visualizar sua aplicação em desenvolvimento.

Ao testar sua aplicação (web ou mobile) pelo navegador, é possível utilizar as propriedades de depuração do próprio navegador para, por exemplo, verificar como a aplicação irá se comportar com diferentes resoluções de tela.



Figura 2.3 - Aplicação web 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 ou Tablets.


Figura 2.4 - 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.

Para 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 código QR gerado pelo Cronapp.


Figura 2.5 - 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.2) para abrir a janela com o QRcode da sua aplicação. Aponte a câmera do smartphone para o seu monitor e efetue a leitura do QRCode gerado pela IDE. 



Figura 2.6 - 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.7 - Aplicação Get Started executando com o Cronapp Browser

Passos para testar

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

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

  • Usuário: 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 home. 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.2), simulador (5 da figura 2.2) ou Cronapp Browser (6 da figura 2.2), 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 "+" (destaque 1 da figura 3.7) 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 videoaulas ou tire suas dúvidas em nosso fórum.



  • No labels