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

Nessa página veremos as partes que compõe a janela do Cronapp.

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

Visão Geral

Antes de começarmos a meter a mão na massa, vamos detalhar as partes do ambiente de desenvolvimento do Cronapp, assim você terá mais familiaridade durante os passos desse tutorial.

Como na maioria dos ambientes de desenvolvimento, o Cronapp possui áreas bem distintas e funcionais para facilitar o trabalho do desenvolvedor. Iremos destacar algumas dessas áreas e detalharemos nas próximas páginas. Na Figura 1.1 destacamos as áreas e a enumeramos, a lista logo abaixo reflete essa enumeração.


Figura 1.1 - Ambiente de desenvolvimento do Cronapp


  1. Menu do sistema.
  2. Menu do usuário: contém informações do usuário, plano adquirido, consumo de recurso e atalhos para outros locais dentro da plataforma Cronapp.
  3. Botões de atalho: atalho para os recursos mais utilizados durante o desenvolvimento.
  4. Modo Avançado: quando desabilitado, oculta os recursos não visuais do Cronapp.
  5. Árvore hierárquica: estrutura de arquivos dos projetos Cronapp.
  6. Área de trabalho: espaço onde são exibidas as janelas abertas, separadas por suas abas.
  7. Área de informações: local onde são apresentadas as janelas de console, depuração, erros, expressões, breakpoints e outras.
  8. Chat colaborativo: chat online para comunicação de texto, áudio, vídeo e compartilhamento de tela entre usuários do Cronapp.
  9. Barra de status: processos que rodam em segundo plano na IDE, como carregamento de bibliotecas, preparação do ambiente de trabalho, detecção de erros do projeto e avisos de warnings.

Botões de atalho

Como estamos sempre acessando os botões do atalho durante o desenvolvimento, identificaremos essa sequência de botões.


Figura 1.2 - Botões de atalho


  1. Novo: cria um projeto.
  2. Abrir projeto: abre um projeto já criado.
  3. Salvar: salvar o conteúdo da aba ativa na área de trabalho.

  4. Salvar todos: salva o conteúdo de todas as abas abertas.

  5. Executar: roda o projeto em modo debug.
  6. Abrir Selenium IDE: abre o Selenium IDE.
  7. Rodar os testes: executa os testes existentes no Selenium IDE.
  8. Prosseguir execução: (debug) executa a aplicação normalmente, ignorando os breakpoints.
  9. Próximo passo: (debug) segue para a próxima linha do código ou bloco de programação, mas não entra no método se houver.
  10. Entrar: (debug) segue para a próxima linha do código ou bloco de programação e entra no método.
  11. Sair: (debug) caso esteja dentro de método, clicando em sair, você segue para a primeira linha de código ou bloco de programação que fica fora do método.
  12. Terminal: acessa o terminal Linux, onde você tem acesso a todos os arquivos do seu projeto utilizando os comandos do Linux.
  13. Fonte de Dados: abre a janela de fontes de dados, onde é possível criar, busca, remover e alterar as fontes do sistema.
  14. Banco de Dados: abre a janela de configuração do banco de dados.
  15. Serviços de Cloud: abre a janela de serviços da nuvem Cronapp: publicação, configuração de domínios, geração de certificados SSL, criação de banco de dados, armazenamento e gerenciamento de backup de banco de dados.
  16. Iniciar assistente: Abre o menu com opções para habilitar ou desativar o assistente que faz um tour pela IDE.


Após executar a aplicação, serão exibidos também os botões:


Figura 1.3 - Botões de atalho exibidos apenas com o projeto em execução


  1. Parar: para a execução do projeto.
  2. Abrir navegador: clique para decidir onde abrir o seu projeto:
    • Navegador [web]: abre o projeto web em outra aba do navegador;
    • Navegador [mobile]: abre o projeto mobile em outra aba do navegador;
    • Simulador: abre o projeto mobile utilizando o simulador Cronapp.

Opção de Modo Avançado

Esse recurso é uma ótima opção para diminuir ainda mais a sua curva de aprendizado dentro do Cronapp. Ao desabilitar, o Cronapp oculta todos os arquivos que necessitam de desenvolvimento high code, exibindo apenas os arquivos que possuem recursos visuais. (Figura 1.4)


Figura 1.4 - Ao desativar a opção Modo Avançado, o Cronapp exibe apenas os recursos visuais


Abaixo algumas vantagens de se trabalhar com a opção Modo Avançado desabilitada:

  1. A árvore de arquivos lateral passa a organizar o conteúdo por funcionalidades e não por hierarquia de diretórios do projeto.
  2. A localização dos arquivos são exibidos com base na hierarquia de funcionalidades, ficando mais legível.
    Abaixo vemos a localização da página home (web) com a opção Modo Avançado desabilitada e o seu endereço real, após habilitar o modo:
    • Localização: Formulários / Mobile / Autenticado / home
    • Endereço: src / main / mobileapp / www / views / logged / home.view.html
  3. As funcionalidades da árvore estão ordenadas com base na recomendação de desenvolvimento do Cronapp: primeiro criamos o diagrama do projeto, as páginas e, em paralelo, os blocos de programação.
  4. As extensões de arquivos mapeados pelo Cronapp ficam ocultas, melhorando a legibilidade. 
  5. Para visualizar ou editar algum arquivo oculto, basta alternar entre os modos a qualquer momento durante o desenvolvimento.


Na figura 1.5 é possível visualizar a localização da página login (web) com o modo desativado (esquerda) e o caminho do endereço real ao ativar o modo Avançado (direita). 


Figura 1.5 - Árvore de arquivos com o modo Avançado desativado (esquerda) e ativado (direita)


Vale ressaltar que essa opção tem o objetivo de tornar o desenvolvimento dentro da nossa plataforma visualmente mais fácil. Independentemente do modo em que escolher trabalhar, o resultado será o mesmo.

Árvore de arquivos

A árvore de arquivos exibe os diretórios e arquivos pertencentes ao seu projeto. Porém, como informado no tópico anterior, a forma como o conteúdo será exibido na árvore de arquivos dependerá da configuração da opção Modo Avançado.


Figura 1.6 - Atalhos e os diretórios que serão expandidos na árvore de arquivos


No topo dessa janela (Figura 1.6) encontramos botões de atalho para algumas pastas.

  1. Ir para Código Fonte: expande o diretório dos blocos de programação servidor.
  2. Ir para Pasta Relatórios: expande o diretório onde recomenda-se arquivar os relatórios.
  3. Ir para blocos do tipo servidor: expande o diretório dos blocos de programação servidor. Possui a mesma função do atalho Ir para Código Fonte quando o modo Avançado está desabilitado.
  4. Ir para Pasta de Diagrama: expande a pasta dos diagramas de dados.
  5. Ir para Pasta Mobile: encaminha para o diretório de telas autenticadas do projeto mobile.
  6. Ir para blocos do tipo mobile: expande o diretório dos blocos de programação mobile.
  7. Ir para Pasta de Views: encaminha para o diretório de páginas autenticadas do projeto web.
  8. Ir para blocos tipo cliente: expande o diretório dos blocos de programação web
  9. Visualização da árvore: exibe o nome de alguns diretórios e arquivos com seu nome real ou amigável. Disponível apenas no Modo Avançado.

Menu de contexto

Algumas funcionalidades são encontradas exclusivamente através do menu de contexto (menu do botão direito do mouse) (Figura 1.7), como por exemplo: operações de versionamento, compilação, importação e exportação de projeto e abrir arquivo em modo texto e outros.

As opções do menu de contexto podem variar de acordo ao arquivo clicado.


Figura 1.7 - Menu de contexto da árvore de arquivos

Abas e seu menu de contexto

Ao abrir um arquivo, o Cronapp exibe seu conteúdo em janelas com abas na área de trabalho. Essas abas possuem menu de contexto com algumas funcionalidades, por exemplo: fechamento de janelas de acordo com as condições apresentadas, restaurar para um determinado ponto no histórico de alterações, comparativo entre os pontos de alteração e exibição do arquivo dentro da árvore de arquivos do projeto (Figura 1.8).


Figura 1.8 - Menu de contexto da aba das janelas


O nome na aba ficará em itálico enquanto seu conteúdo não tiver sido salvo.

Área de informações da IDE

A área de informações na parte debaixo da IDE traz diversas abas e uma barra de status com a situação atual do projeto. 

Apesar dos ícones de maximizar, restaurar e minimizar serem padrões como em outras aplicações, elas podem estar posicionadas em locais diferentes. Por exemplo, a janela de informações apresenta o ícone de minimizar (1) em cima e o de maximizar (2) embaixo. (Figura 1.9)


Figura 1.9 - Barra de status da IDE

Chat colaborativo

O chat colaborativo permite adicionar outros usuários da plataforma Cronapp, criar grupos de conversa, realizar chamadas por áudio ou webcam e compartilhamento de tela do usuário.


Figura 1.10 - Exemplo de conversa "espontânea" usando o Chat colaborativo


Para utilizar os recursos de chamada por áudio, vídeo ou compartilhamento de tela é necessário instalar a extensão Screen Capturing em seu navegador. Alguns navegadores já possuem essa extensão nativamente, como é o caso do Firefox. Ao executar algumas dessas funções pela primeira vez, o navegar solicita a instalação dessa extensão automaticamente.


  • No labels