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. Botões de atalho: atalho das principais funções durante o desenvolvimento.
  3. 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.
  4. Árvore hierárquica: estrutura de arquivos dos projetos Cronapp.
  5. Área de trabalho: espaço onde são exibidas as janelas abertas, separadas por suas abas.
  6. Área de informações: local onde são apresentadas as janelas de console, depuração, erros, expressões, breakpoints e outras.
  7. 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.
  8. Chat colaborativo: chat online para comunicação de texto, áudio, vídeo e compartilhamento de tela entre usuários do Cronapp.

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 da IDE


  1. Novo: cria um projeto;
  2. Abrir projeto: abre um projeto 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. Rodar: roda o projeto;
  6. Debug: roda o projeto em modo de depuração;
  7. Parar aplicação: para a execução da aplicação no servidor Tomcat;
  8. Abrir navegador: abre o projeto no browser ou no simulador mobile;
  9. Abrir Selenium IDE: abre o Selenium IDE;
  10. Rodar o(s) teste(s): executa os testes existentes no Selenium IDE;
  11. Prosseguir execução: (debug) executa a aplicação normalmente, ignorando os breakpoints;
  12. 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;
  13. Entrar: (debug) segue para a próxima linha do código ou bloco de programação e entra no método;
  14. 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;
  15. Terminal: acessa o terminal Linux, onde você tem acesso a todos os arquivos do seu projeto utilizando os comandos do Linux;
  16. Fonte de Dados: abre a janela de fontes de dados, onde é possível criar, busca, remover e alterar as fontes do sistema;
  17. Banco de Dados: abre o arquivo context.xml em modo low code, permitindo criar bancos de dados, removê-los, manipulá-los, verificar e adicionar perfis dos bancos;
  18. Serviços de Cloud: abre a janela com os serviços disponíveis do Cronapp, como 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;
  19. Iniciar assistente: Abre o menu com opções para habilitar ou desativar o assistente que faz um tour pela IDE.

Árvore de arquivos

A árvore de arquivos exibe todos os diretórios e arquivos pertencentes ao seu projeto em modo hierárquico. No topo dessa janela (Figura 1.3) encontramos botões de atalho para algumas pastas.

Atalhos

Apesar dos ícones de atalhos serem originados logo após a criação do projeto, o mesmo não ocorrer com alguns diretórios - eles não são gerados após a criação do projeto. Caso isso ocorra, basta clicar no atalho correspondente desse diretório para que ele seja gerado. 



Figura 1.3 - Definição dos atalhos da árvore de arquivos


  1. Ir para Código Fonte: expande o diretório java nos arquivos do servidor.
  2. Ir para Pasta Relatórios: expande o diretório reports nos arquivos do servidor. Esse atalho criará esse diretório caso ele não exista.
  3. Ir para blocos do tipo servidor: expande o diretório blockly do lado servidor.
  4. Ir para Pasta de Diagrama: expande a pasta Diagram que contém o(s) diagrama(s) do projeto.
  5. Ir para Pasta Mobile: acessa a pasta views do projeto mobile.
  6. Ir para blocos do tipo mobile: expande o diretório blockly do projeto mobile.
  7. Ir para Pasta de Views: expande para a pasta de views logged (Autenticado), dentro do projeto web.
  8. Ir para blocos tipo cliente: expande o diretório blockly do projeto web
  9. Visualização da árvore: (Figura 1.4)
    • Visualização de pasta: exibe os diretórios e arquivos com seus nomes originais;
    • Visualização de categoria: exibe alguns diretórios e arquivos com nomes mais amigáveis.

  10. Diretório do projeto: pasta raiz do projeto.


Na parte superior esquerda (destaque 9 da figura 1.3) encontramos a opção de visualizar o nome dos diretórios e arquivos de duas formas diferentes: visualização de pasta, exibe os nomes originais e visualização de categoria exibe os nomes de forma mais amigável para o desenvolvedor. Veja na figura abaixo a diferença entre os dois modos.


Figura 1.4 - Diferença entre a visualização por pastas e categorias


Atenção

Ao utilizar o modo visualização de categorias, os arquivos não são renomeados e sempre que precisar informar o endereço de um arquivo, deverá usar os nomes originais, ou seja, o da visualização por pastas.

Menu de contexto da árvore

Algumas funcionalidades são encontradas exclusivamente através do menu de contexto (menu do botão direito do mouse) (Figura 1.5), como por exemplo:

  • operações de versionamento;
  • compilação, importação e exportação de projeto;
  • abrir arquivo em modo texto e outros.

As opções do menu de contexto podem variar de acordo ao arquivo clicado, por exemplo, o arquivo pom.xml (Definições Maven) é o único que irá exibir as opções referentes ao Maven.


Figura 1.5 - Menu de contexto da árvore de arquivos

Abas e seu menu de contexto

Ao abrir o menu de contexto em uma das abas na área de trabalho encontramos algumas funcionalidades interessantes, 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.6).

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


Figura 1.6 - Menu de contexto da aba das janelas

Maximizar e minimizar janelas

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) em baixo. (Figura 1.7)


Figura 1.7 - Botões minimizar e maximizar

Área de informações da IDE

A área de informações traz diversas sessões da plataforma, relacionada principalmente a execução do projeto como threads, depuração, variáveis e entre outros.

Figura 1.8 - 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 web cam e compartilhamento de tela do usuário.


Figura 1.9 - 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