Visão Geral

Como na maioria dos Ambiente Ambientes de desenvolvimento Integrado (IDE), o Cronapp possui áreas bem distintas e funcionais para facilitar o trabalho do desenvolvedor em seus projetos. Na figura abaixo são especificadas as principais áreas do ambiente.

Image Modified

Figura 1 - Ambiente de desenvolvimento do Cronapp

1. Menu do sistema;Botões de atalho: atalho para as principais funções usadas durante o desenvolvimento;
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;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  espaço onde são exibidos as ferramentas do Cronapp;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 Barra de status: processos que rodam em segundo plano na no IDE, como carregamento de bibliotecas, preparação do ambiente de trabalho, detecção de erros do projeto e warnings;Chat colaborativo: Chat online para comunicação de texto, áudio, vídeo e compartilhamento de tela entre usuários do Cronapp.

Menu do sistema

Arquivo

Realiza algumas ações no arquivo aberto na área de trabalho.

• Buscar: procura pelo nome de um arquivo ou pelo tipo de arquivo (Java, HTML, txt, entre outros);.
• Buscar símbolos: procura por arquivos dentro do projeto e dentro de dependências do projeto;.
• Buscar conteúdo: procura pelo conteúdo em todos os arquivos do projeto;.
• Índice de métodos: lista os métodos do arquivo, facilitando a navegação. Só fica habilitado em arquivos Java;Opção disponível apenas quando um arquivo *.java estiver aberto.
• Abrir recentes: lista os últimos arquivos fechados;.

• Salvar: salvar o conteúdo da aba ativa na área de trabalho;.

• Salvar como: cria uma cópia do arquivo em edição, permitindo a alterar o nome e local de salvamento;.

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

• Fechar: fecha a aba do arquivo exibida da área de trabalho ativa no momento.

Editar

• Desfazer: desfaz a última ação feita;.
• Refazer: refaz a última ação desfeita;.
• Recortar: recorta algum conteúdo selecionado;.
• Copiar: copia um conteúdo selecionado;.
• Colar: cola um conteúdo copiado ou recortado;.
• Pesquisar: pesquisa por um conteúdo na janela aberta;.
• Substituir: pesquisa por um conteúdo na janela aberta e o substitui por outro.

Projeto

Menu responsável por gerenciar e configurar o projeto aberto, além de abrir algumas funcionalidades.

• Novo Projeto: cria um projeto;.
• Abrir Projeto: abre um projeto criado;.
• Abrir Recentes: apresenta uma lista de projetos que foram utilizados recentemente na IDE;.
• Fonte de dados: abre a janela de fontes de dados, onde é possível criar, busca, remover e alterar as fontes do sistema;.
• 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;.

• Chaves de internacionalização: exibe as chaves de internacionalização (mobile, cliente e servidor). Permitindo adicionar novas ou editar as já existentes;.

• Permissões de segurança: cria grupos de acessos e permissões de acessos a diretórios e páginas;.
• Eventos e ações: abre uma janela com para criar eventos e ações as propriedades existentes através dos blocos de programação. Por padrão, os eventos não são definidos e as ações utilizam o padrão do framework. Alguns eventos são criados no lado do cliente, enquanto o restante é criado no lado do servidor;.
• Parâmetros do sistema: abre a janela de parâmetros do sistema, através dela é possível criar parâmetros e vinculá-los aos perfis de banco de dados, permitindo gerar .war com parâmetros diferentes para cada perfil;.
• Agendador de tarefas: abre uma janela para criação de jobs, permitindo definir tempo para executar ações geradas por bloco de programação;.
• Configurações: abre a janela de configurações do projeto, permitindo editar algumas informações gerais, versionamento do sistema e autenticação;.
• Limpar todos os caches: limpa todos os dados do cache da IDE;.
• Compartilhar projeto: cria uma cópia compactada do projeto por 24 horas, um link público é gerado para permitir seu compartilhamento;.

• Conceder acesso remoto: cria um link para permitir que outro usuário trabalhe ao mesmo tempo no mesmo projeto, usado para suporte;.

• Fechar: fecha o projeto atualmente aberto na IDE.

Plugin

O plugin do Cronapp é uma pequena aplicação desenvolvida e disponibilizada para provê funcionalidade bem específica a aos projetos Cronapp. Existem vários plugins que facilitam a integração com sistemas externos, podendo ser gratuitos ou pagos. Você é livre para criar plugins e disponibilizá-los com outros usuários e projetos.

• Meus plugins: lista de plugins criados pelo usuário, informando seu tipo e sua licença. É possível adicionar o seu plugin ao Marketplace do Cronapp.
• Plugins instalados: exibe os plugins instalados no projeto;.
• Adicionar novo plugin: abre uma janela para adicionar um plugin ao projeto aberto.

Espaço de Trabalho

Possui algumas configurações do ambiente Cronapp.

• Idiomas: define o idioma da IDE, atualmente estão disponíveis os idiomas inglês e português;.
• Perfil do Usuário: abre uma janela para mostrar o seu perfil, onde tem as exibir algumas informações de sua conta;.
• Mudar senha: altera a senha para acessar a IDE;do seu usuário Cronapp.
• Memória de Run/Debug: seleciona a porcentagem de memória reservada para a execução do projeto;.
• Memória de Desenvolvimento: seleciona a porcentagem de memória destinada para o desenvolvimento do projeto;.

• Modo de uso da IDE: escolhe define o tipo de modo que você irá utilizar na IDE, podendo ser analista ou avançado. O modo analista oculta funcionalidades avançadas do Cronapp.

Executar

Menu que reúne algumas funcionalidades necessárias para executar a aplicação.

• modo de desenvolvimento no Cronapp. Equivale a desativar ou ativar o botão de alternância Modo Avançado (destaque 4 da figura 1).
  Acesse o tópico Opção de Modo Avançado para mais detalhes.

  • Analista: oculta os recursos high-code e destaca os recursos visuais do Cronapp.
  • Avançado: exibe todo o conteúdo do projeto.

Executar

Menu que reúne algumas funcionalidades necessárias para executar a aplicação.

• Rodar: roda o projeto.
• Debug:
• Rodar: roda o projeto;
• Debug: roda o projeto em modo de depuração;.
• Parar Aplicação: para a execução da aplicação no servidor Tomcat;.
• Prosseguir execução: usado em modo debug. executa a aplicação ignorando os breakpoints;.
• Próximo passo: segue para a próxima linha do código, mas não entra no método, se houver;.
• Entrar: segue para a próxima linha do código e entra no método, se houver;.
• Sair: caso esteja dentro de método, clicando em sair, você segue para a próxima linha de código após a chamada do método;.
• Abrir Navegador: Abre o projeto web em outra aba do navegador.

Ferramentas

Em ferramentas é possível fazer o gerenciamento dos tipos de bancos de dados e dos backups automáticos, além de abrir o terminal.

• Gerenciador de SQL: abre o Sistema de Gerenciamento de Banco de Dados (SGBD) online;.
• Terminal: acessa o terminal Linux, onde você tem acesso a todos os arquivos do seu projeto;.
• Gerenciamento de Backups: gerencia os backups que foram feitos, podendo ser baixados, removidos ou restaurados de seus projetos, permitindo baixar, remover ou restaura-los.

Deploy

Responsável por publicar a aplicação e configurar o banco de dadosAcesso aos recursos na nuvem e publicação na App Store.

• Serviços de Cloud: abre a janela com os serviços disponíveis do Cronapp , como cloud: 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;.
• Publicar Aplicação na App Store: faz a publicação aplicativo do seu projeto mobile diretamente na loja da Apple.

Dispositivos Móveis

Esse menu somente estará ativo para projetos mobile.

• Compilar: compila o projeto e gera um arquivo .apk para dispositivos Android e .zip ou .ipa para iOS;arquivo binário para as plataformas mobile.
  • Android: gera arquivos .apk utilizado na plataforma Android.
  • iOS: gera arquivos .ipa utilizados na plataforma iOS.

• Executar: traz a opção de executar o projeto em um simulador uma aba dentro do Cronapp ou simular a execução no próprio smartphone através do aplicativo de testes Cronapp Browser;
  

  Informações
  title Dica:
  Baixe o Aplicativo de desenvolvimento do Cronapp nas lojas oficiais do Android (Play Store) ou iOS (Apple Store).

  
  

• Gerar Projeto Nativo: gera arquivo .zip para abrir o projeto mobile no Xcode.
• Limpar workspace:Limpar workspace: apaga as modificações feitas nos plugins do Cordova;.
• Configurações: traz as informações do aplicativo e permite adicionar a URL back-endabre a janela de configurações dos projetos mobile. Nela é possível inserir a URL do servidor do sistema em projeto, além de inserir a chave do Android ou a assinatura do iOS.

Ajuda

• Lista de atalhos: exibe todas as teclas de atalho que são suportadas nas janelas de edição de códigos do Cronapp;
• Suporte online: abre uma caixa de diálogo para mandar mensagem a equipe de suporte da Cronapp;
• Iniciar Assistente: habilita um o assistente que informa sobre algumas funcionalidades da IDE e informa a localidade dessas funcionalidades;os passos iniciais dentro do Cronapp.
• Sobre: abre uma janela com as informações da IDE;informações sobre a versão atual do Cronapp e o servidor no qual o Cronapp está sendo executado.
• Termos de Serviço Beta do Cronapp: exibe Exibe os termos para uso da versão Beta do Cronapp. Opção disponível apenas nas versões beta do Cronapp.

Botões de Atalho

Apresenta as funcionalidades mais usadas do menu do sistema.

Image Modified

Figura 2.1 - Ícones ou botões de atalho com o projeto parado

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. RodarExecutar: roda o projeto ;Debug: roda o projeto em modo de depuração;
6. Parar Aplicação: para a execução da aplicação no servidor Tomcat;
7. Abrir navegador: abre o projeto no browser;
8. Abrir Selenium IDE: abre o Selenium IDE;
9. debug.
10. Abrir Selenium IDE: abre o Selenium IDE.
11. Rodar os testesRodar o(s) teste(s): executa os testes existentes no Selenium IDE;.
12. Prosseguir execução:  executa (debug) executa a aplicação normalmente, ignorando os breakpoints;.
13. Próximo passo: segue  (debug) segue para a próxima linha do código ou bloco de programação, mas não entra no método se houver;.
14. Entrar: segue  (debug) segue para a próxima linha do código ou bloco de programação e entra no método;.
15. Sair: caso esteja  (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;.
16. Terminal: acessa o terminal Linux, onde você tem acesso a todos os arquivos do seu projeto utilizando os comandos do Linux;.
17. Fonte de Dados: abre a janela de fontes de dados, onde é possível criar, busca, remover e alterar as fontes do sistema;.
18. 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;a janela de configuração do banco de dados.
19. Serviços Serviços de Cloud: abre a janela com os serviços disponíveis do Cronapp, como de serviços da nuvem Cronapp: publicação, configuração de domíniosde domínios, geração de certificados de certificados SSL, criação de banco de banco de dados, armazenamento e  armazenamento e gerenciamento de de backup de banco de dados;.
20. Iniciar assistente: Abre o menu com opções para habilitar ou desativar o assistente que faz um tour pela IDE.

Menu do Usuário

O menu do usuário se encontra no canto superior direito da IDE, em um menu dropdown com o logo da Cronapp.

Image Removed

Figura 3.1 - Menu dropdown para acesso ao menu do usuário

Na área (1) da Figura 3.2, é possível visualizar o nome do usuário logado, sua organização e contrato.

Image Added

Figura 2.2 - botões de atalho com o projeto rodando

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.

Menu do Usuário

O menu do usuário se encontra no canto superior direito da IDE, em um menu dropdown com o logo da Cronapp.

Image Added

Figura 3.1 - Menu dropdown para acesso ao menu do usuário

Após clicar na logo do Cronapp, um menu será exibido.

Image Modified

Figura 3.2 - Menu do usuário

1. Usuário

Ao clicar em cima do seu nome (1 da Figura 3.2), a janela de configurações (Figura 3.3) do usuário aparecerá.

Para adicionar uma foto que aparecerá no perfil da sua conta Cronapp e no chat colaborativo, crie ou use sua conta gravatar. Após inserir a foto, reabra o Cronapp para ver a imagem adicionada.

Image Removed

Figura 3.3 - Janela do usuário

Mudar plano

1. : exibe informações do usuário logado, sua organização e contrato. Clique sobre seu nome para abrir a janela do perfil do usuário.
2. Plano e recurso atual: 
   • Plano: plano em que sua conta está associada;
   • Memoria: informa o consumo de memória RAM no momento, posicione o mouse sobre a barra para obter o valor exato;
   • CPU: informa o consumo de processamento no momento, posicione o mouse sobre a barra para obter o valor exato;
   • Expiração: data em que expira o contrato.
3. Botões:
   • Mudar Plano: Ao clicar nesse botão, você será redirecionado ao portal Cronapp para alterar seu plano atual.
   • Docs

1. • : Abre

1. • este portal de documentação do Cronapp.
   • Suporte

1. • : Abre a central de ajuda com as perguntas mais frequentes dos usuários e links para central de relacionamento e suporte técnico.

1. •  Usuários FREE também podem tirar suas dúvidas abrindo um chamado técnico através do nosso portal.

Avalie-nos

Neste campo você poderá dizer como está sendo sua experiência com a nossa ferramenta, deixe um comentário com reclamações, sugestões ou elogios.

Image Removed

Figura 3.4 - Janela de avaliação

Sair

Realiza logoff na IDE.

Árvore hierárquica

A árvore de arquivos exibe hierarquicamente os arquivos e diretórios existentes no seu projeto.

Atalhos da árvore

A árvore de arquivos possui atalhos na parte superior que agilizam a navegação entre os diretórios do seu projeto. A quantidade de atalhos varia com o tipo do projeto aberto, projetos somente web não exibirão os atalhos (5) e (6) da figura 4.1, pois se trata de diretórios do projeto mobile.

Image Removed

Figura 4.1 - 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. Esse atalho criará esse diretório caso ele não exista;
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. Esse atalho criará esse diretório caso ele não exista;
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. Esse atalho criará esse diretório caso ele não exista;
9. Visualização da árvore: (Figura 4.2)
   • 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.

Image Removed

Figura 4.2 - Visualização da árvore

Árvore de arquivo

A árvore de arquivos exibe todos os diretórios e arquivos existentes no projeto, ordenados de forma hierárquica. O ponto inicial dessa árvore, a raiz, é intitulado com o nome do projeto, definido durante a criação, ela possui quatro pastas e cinco arquivos que estão diretamente abaixo da pasta raiz (Figura 4.3). Para expandir o conteúdo interno dos diretórios, clique no simbolo ">" na frente do ícone da pasta. 

Image Removed

Figura 4.3 - Divisão da árvore de arquivos

Os subdiretórios e arquivos da raiz do projeto:

• Códigos Fonte (main): dependendo de como foi criado o projeto, esse diretório possuirá os seguintes subdiretórios:
  • Códigos Fonte Servidor (java): armazena a camada DAO, Entity, código Java, arquivo de configuração do projeto, relatórios e outros arquivos do servidor da aplicação;
  • Códigos Fonte Mobile (mobileapp): armazena os formulários HTML, código JavaScript, plugins, CSS, Splash e outros arquivos do projeto mobile da aplicação;
  • Códigos Fonte Web: (webapp): armazena os formulários HTML, código JavaScript, plugins, CSS e outros arquivos do projeto web da aplicação.
• Configurações (config): contém os arquivos de testes, as funcionalidades de configurações do projeto (app.config) e banco de dados (context.xml);
• Diagrama de Dados (diagram): contém os arquivos de diagrama de classe do projeto;
• Documentação (docs): arquivos de documentação do projeto, nele você poderá criar diagramas UML, fluxogramas, diversos recursos para ajudar no desenvolvimento do projeto;
• .gitignore: estão descritos os arquivos que serão ignorados na hora de fazer o commit / push para o git;
• Dockerfile: arquivo de configuração do Docker;
• Definições Maven (pom.xml): ferramenta que gerencia os plugins e bibliotecas Maven do projeto;
• README.md: arquivo de texto que apresenta um pequeno tutorial de importar projeto GIT. O conteúdo é exibido na tela inicial do seu projeto na página git;
• template.properties: propriedades do template utilizado pelo projeto.
• Arquivos de Template: diretório onde é possível alterar os arquivos de template gerados pelo Cronapp.

Códigos Fonte Servidor

Dentro desse diretório estão contidas as camadas DAO e Entity, pastas com arquivos de configurações, internacionalização. relatórios e demais arquivos do servidor da aplicação.

Image Removed

Figura 4.4 - Arquivos do Servidor da Aplicação, em destaque o atalho para a pasta Relatórios

Os subdiretórios e arquivos da pasta Código Fonte Servidor:

• app: o diretório principal com o código-fonte do servidor:
  • dao: diretório de arquivos referentes a comunicação das entidades com o banco de dados;
  • entity: diretório de arquivos referentes as entidades da aplicação;
  • AppConfiguration.java: arquivo de configurações iniciais do projeto java;
  • populate.json: arquivo que contém os dados para popular o banco no momento que ele é iniciado, é nele que se encontra o usuário administrador.

• Bloco de Programação (blockly): diretório onde contém as funções de blocos de programação do servidor;

• i18n: diretório de arquivos referentes às propriedades de internacionalização no lado servidor do projeto;
• META-INF: diretório relacionados a arquivos JAR para configurar aplicações, extensões, carregadores de classes e serviços;
• SpringBootMain.java: classe que inicia o contexto de aplicação do SpringBoot;
• Relatórios: diretório que armazena os relatórios criados no projeto. Por padrão, essa pasta não existe quando o projeto é criado, mas para o fazê-lo, clique em seu ícone (1 da Figura 4.4) na barra de atalhos da árvore de arquivos.

1. • Sair: realiza logoff na IDE.

Janela de perfil do Usuário

Abra a janela de informações do usuário ao clicar no nome (1 da Figura 3.2) no menu do usuário ou através do menu do sistema: Espaço de Trabalho > Perfil do Usuário. Nela é possível alterar o seu nome e a sua foto de perfil.

Para adicionar uma foto que aparecerá no perfil da sua conta Cronapp e no chat colaborativo, crie ou use sua conta gravatar. Após inserir a foto, reabra o Cronapp para ver a imagem adicionada.

Image Added

Figura 3.3 - Janela do perfil do usuário

Opção de Modo Avançado

Esse recurso é uma ótima opção para diminuir ainda mais a curva de aprendizado dentro do Cronapp. Ao desabilitar o botão alternância Modo Avançado (destaque 1 da figura 4.1), o Cronapp realiza várias alterações visuais que facilitam o desenvolvimento dentro da plataforma. No geral, essas alterações consistem em ocultar o conteúdo que necessita de algum desenvolvimento high-code, normalmente desnecessário ao utilizar o Cronapp, destacando os recursos visuais. 

Também é possível alternar entre os modos através do menu do sistema: Espaço de Trabalho > Modo de uso da IDE > Modo Analista para desabilitar ou Espaço de Trabalho > Modo de uso da IDE > Modo Avançado para habilitar.

Image Added

Figura 4.1 - Localização do botão alternância Modo Avançado

A alternância entre os modos pode ser feita a qualquer momento durante o desenvolvimento do projeto e não gera qualquer impacto no resultado final. Assim, ao exportar seu projeto, independente do modo em que estiver trabalhando, a hierarquia de arquivos estará igual ao apresentado no Modo Avançado, pois trata-se do endereço real.  

O principal objetivo desse recurso é tornar o seu processo de desenvolvimento dentro do Cronapp mais simples e confortável.

Abaixo destacamos as principais alterações quando a opção Modo Avançado está desabilitada:

1. Arquivos do sistema (veja mais em Estrutura de arquivos):
   • Ficam ocultos os diretórios de bibliotecas, arquivos fontes (exemplo: *.java, *,js), arquivos de configurações e os não mapeados pelo Cronapp.
   • Arquivos mapeados pelo Cronapp não exibem suas extensões, de forma a melhorar sua legibilidade.
   • A árvore de arquivos lateral deixa de exibir seu conteúdo na forma de hierarquia de diretórios e passa a organizá-los com base em suas funcionalidades. Assim, o Cronapp cria um endereço virtual, muito mais simples e que chamamos de Localização, ao invés de usar o Endereço real.
     Abaixo vemos a quantidade de nós necessários para acessar a tela home (web) quando estamos com o Modo Avançado desabilitado e habilitado, respectivamente:
     • Localização: Formulários/Mobile/Autenticado/home
     • Endereço: src/main/mobileapp/www/views/logged/home.view.html
2. Algumas janelas de funcionalidades, como editor de blocos ou editor de views, ocultam as subabas em que apresentam o código fonte.

3. O Cronapp não perguntará ao usuário quando for necessário sobrescrever arquivos.

4. A aba inferior "Console do depurador" ficará recolhida após executar o projeto.

5. Na janela de criação dos blocos de programação (cliente ou servidor) será exibida a opção "Novo Bloco de Programação Java/JavaScript (High-code)". 

Á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 dependerá da configuração da opção Modo Avançado. Acesse a página Estrutura de arquivos para mais detalhes,

O diretório principal dessa árvore, a raiz, é intitulado com o nome do projeto. Para expandir seu conteúdo, clique no símbolo ">" na frente do ícone da pasta.

Atalhos da árvore

A árvore de arquivos possui atalhos na parte superior que agilizam a navegação entre os diretórios do seu projeto. A quantidade de atalhos varia com o tipo do projeto aberto, projetos somente web não exibirão os atalhos (5) e (6) da figura 5.1, pois se trata de diretórios do projeto mobile.

Image Added

Figura 5.1 - Atalhos e seus respectivos diretórios sendo visualizado em Movo Avançado desabilitado

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

1. Ir para Código Fonte: esse atalho direciona para o diretório principal do projeto servidor quando o Modo Avançado estiver habilitado e, quando desabilitado, para o diretório de blocos de programação servidor (localização: Blocos de Programação/Servidor 

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço: src/main/java/blockly

   ).

2. Ir para Pasta Relatórios: expande o diretório onde recomenda-se arquivar os relatórios do sistema (localização: Relatórios

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço: src/main/java/reports

   ).

3. Ir para blocos do tipo servidor: expande o diretório dos blocos de programação servidor (localização: Blocos de Programação/Servidor 

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço: src/main/java/blockly

   ).

4. Ir para Pasta de Diagrama: expande a pasta dos diagramas de dados (localização: Diagrama de dados

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço diagram

   ).

5. Ir para Pasta Mobile: encaminha para o diretório de telas autenticadas do projeto mobile (localização: Formulários/Mobile/Autenticado

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço: src/main/mobileapp/www/views/logged

   ).

6. Ir para blocos do tipo mobile: expande o diretório dos blocos de programação mobile (localização: Bloco de Programação/Mobile

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço: src/main/mobileapp/www/js/blockly

   ).

7. Ir para Pasta de Views: encaminha para o diretório de páginas autenticadas do projeto web (localização: Formulários/Web/Autenticado

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço: src/main/webapp/www/views/logged

   ).

8. Ir para blocos tipo web: expande o diretório dos blocos de programação web (localização: Bloco de Programação/Web

   Tooltip
   onlyIcon true appendIcon info-circle
   Endereço: src/main/webapp/js/blockly

   ).

9. Visualização da árvore: Opção disponível apenas no Modo Avançado (figura 5.2).
   • 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.

Image Added

Figura 5.2 - Árvore sendo visualizada por Categoria e por Pasta

Projeto versionado

Projetos versionados (via Git) geram pequenas modificações visuais na árvore de arquivos. As principais são: o nome dos arquivos ganha cores com base no tipo de alteração em relação ao projeto base e, na raiz do projeto são exibidos o branch atual e o número de commits ainda não enviados.

Veja mais detalhes sobre o versionamento de projetos Cronapp em Versionamento usando Git.

Image Added

Figura 5.3 - Arquivos de um projeto versionado

Área de trabalho

É na área de trabalho que será feito todo o desenvolvimento da aplicação, nele são abertos todos os arquivos, seja as ferramentas de desenvolvimento low-code (Figura 5.1) ou o editor de código fonte, para o desenvolvimento high-code. Suas ferramentas mudam conforme o tipo de arquivo aberto.

Image Added

Figura 6.1 - Área de trabalho com a aba de edição de views aberta

Abas da área de trabalho

Todos os arquivos abertos no Cronapp serão apresentados na área de trabalho e possuem uma aba que permite alternar a janela ativa. Cada aba possui um ícone, representando o tipo de arquivo, o seu nome e também sua extensão, caso o Modo Avançado esteja habilitado (Figura 6.2). É possível identificar se o conteúdo da aba sofreu alguma alteração e ainda não foi salvo observando se o texto da aba está em itálico e negrito.

Image Added

Figura 6.2 - Abas da área de trabalho sendo visualizadas em modo Avançado

Ao clicar com o botão direito sobre uma aba aberta na área de trabalho é possível encontrar as seguintes funcionalidades.

Image Added

Figura 6.2 - Menu de contexto para as abas da área de trabalho

• Salvar como: salva uma cópia do arquivo em outros diretórios do projeto.
• Fechar: fecha a aba selecionada.
• Fechar outros: fecha todas as abas abertas, exceto a aba selecionada.
  
• Fechar todos: fecha todas as abas abertas.
• Histórico: apresenta um histórico de todas as alterações que ocorreu no arquivo selecionado.
• Comparar com: faz a comparação do arquivo atual com as versões anteriores do arquivo.
• Mostrar em: apresenta onde o arquivo se encontra na árvore de arquivo do projeto.

Posicione o cursor do mouse sobre uma das abas abertas na área de trabalho para exibir um tooltip com o seu endereço. (Figura 6.3)

Image Added

Figura 6.3 - Tooltip exibindo o endereço do arquivo aberto

Códigos Fonte Mobile

Arquivos responsáveis por gerar a aplicação mobile (Android e iOS).

Image Removed

Figura 4.5 - Estrutura do diretório Códigos Fonte Mobile

• certs: Certificate Enrollment Requests, esse diretório contém certificados que foram requisitados e estão com status pendentes ou já foram rejeitados.
• hooks: representa o diretório de scripts especiais que podem ser adicionados ao sistema para customizar comandos Cordova, que é uma estrutura apache de desenvolvimento de aplicativos móveis.
• res: pasta criada por padrão para uso de recursos na aplicação:
• icon: ícones utilizados na aplicação mobile;
• screen: plano de fundo da aplicação mobile.
• www: armazena a estrutura da aplicação mobile (verificar tópico diretório www);
• .gitignore: estão descritos os arquivos que serão ignorados na hora de fazer o commit / push para o git;
• config.xml: arquivo de configuração global que controle aspectos de uma aplicação Cordova;
• network_security_config.xml:
• package.json: responsável por descrever o projeto, informar as engines (versão do node e do npm), URL do repositório, versão do projeto entre outros coisas.

Diretório www

Diretório que armazena a estrutura da aplicação mobile, como telas, imagens, os blocos de programação que geram código fonte JavaScript, internacionalização e mais.

Image Removed

Figura 4.5.1 - Estrutura da pasta www

• bowerscripts: arquivo referente ao Bower, uma ferramenta que ajuda no gerenciamento das dependências do front-end;
• css: local onde ficam armazenadas as estilizações feitas em low-code na janela de edição visual;
• i18n: diretório onde ficam os arquivos de internacionalização da aplicação mobile;
• img: local usado para armazenar imagens usadas na aplicação;
• js: diretório de arquivos JavaScript e blockly do lado cliente mobile:
  • bloco de programação (blockly): diretório onde ficam as funções de bloco de programação, possui um subdiretório com funções usadas durante a autenticação (6 da Figura 4.1).
• node_modules: local onde ficam armazenadas diversas bibliotecas usadas no projeto. Durante as atualizações do Cronapp, o conteúdo dessa pasta é alterado ou substituído, por isso não recomendamos atualizar ou adicionar nada manualmente;
• Formulários (views): diretório que organiza as telas do aplicação mobile:
  
  • Erros (error): telas de informação de erros do sistema, os usuários serão encaminhados para essas telas quando ocorrer um erro no sistema;
  • Autenticado (logged): contém as páginas com permissão de acesso apenas para os logados no sistema;
  • Público (public): páginas sem restrição de acesso;
  • login.view.html: por padrão é a primeira página exibida para o usuário. Acesse Alterar tela inicial, caso queira mudar a tela inicial.
• .bowerrc: pacote de gerenciamento dos componentes mobile, bibliotecas, frameworks;
• bower.json: arquivo JSON de gerenciamento das dependências do projeto;
• cordova.js: arquivo JavaScript que tem as principais funções do Cordova;
• cordova_plugins: arquivos JavaScript que exporta os plugins do Cordova;
• favicon.ico: ícone do Cordova;
• index.html: contém as referências de plugins e CSS usados nas telas do sistema;
• package.json: responsável por descrever a parte mobile, informando a versão do projeto, o nome do projeto, a descrição, a URL do repositório, a página principal e entre outros coisas;
• README.md: arquivo de texto que apresenta um pequeno tutorial de como usar o template do Ionic Framework.

Códigos Fonte Web

Diretório que armazena a estrutura do sistema web, como as páginas, os blocos de programação que geram código fonte JavaScript, internacionalização e outros.

Image Removed

Figura 4.6 - Estrutura do diretório Códigos Fonte Web

• bowerscripts: arquivo referente ao Bower, uma ferramenta que ajuda no gerenciamento das dependências do front-end.
• css: local onde ficam armazenadas as estilizações feitas em low-code na janela de edição visual.
• i18n: diretório onde ficam os arquivos de internacionalização do sistema web.
• js: diretório de arquivos JavaScript e blockly do lado cliente web:
  • Bloco de programação (blockly): diretório onde ficam as funções de bloco de programação (8 da Figura 4.1).
• node_modules: local onde ficam armazenadas diversas bibliotecas usadas no projeto. Durante as atualizações do Cronapp, o conteúdo dessa pasta é alterado ou substituído, por isso não recomendamos atualizar ou adicionar nada manualmente.
• Formulários: diretório onde ficam as páginas web:
  • Administrativo (admin): contém as páginas com permissão de acesso apenas para os usuários com perfil de administrador do sistema;
  • Erros (error): páginas com informação de erros do sistema, os usuários serão encaminhados para essas páginas quando ocorrer um erro no sistema;
  • Autenticado (logged): contém as páginas com permissão de acesso apenas para os logados no sistema;
  • Público (public): páginas sem restrição de acesso.
• .bowerrc: pacote de gerenciamento dos componentes web, bibliotecas, frameworks.
• bower.json: arquivo JSON de gerenciamento das dependências do projeto.
• index.html: contém as referências de plugins e CSS usados nas páginas do sistema.
• package.json: responsável por descrever a parte web, informando a versão do projeto, o nome do projeto, a descrição, a URL do repositório, a página principal e entre outros coisas.

Menu de contexto

Existem algumas ações que podem ser feitas ao clicar com o botão direito do mouse na raiz do projeto (nome do projeto). O conteúdo exibido no menu de contexto varia com o tipo de projeto: servidor, mobile e web.

Image Removed

Figura 4.7 - Menu de contexto da raiz do projeto

• Importar: importa um projeto Cronapp em formato .zip ou obtém serviços de uma estrutura SOAP.
• Exportar: exporta o projeto em um dos seguintes formatos: GIT/SVN, war ou zip.
• Banco de dados: abre a funcionalidade de configuração do banco de dados do projeto.
• Recompilar projeto: complicação do projeto.
• Recompilar e reabrir projeto: compilação, fecha o projeto e o reabre.
• Recarregar: recarrega novamente a árvore de arquivos.
• Baixar: faz o download do conteúdo selecionado, no caso de diretórios, o mesmo é compactado em formato .zip.
• Compartilhar Pasta: abre uma janela que disponibiliza um link que permite que o usuário faça o download dessa pasta. Também é possível enviar esse link por e-mail.
• Abrir terminal: abre o diretório selecionado em um terminal linux.
• Arquivar projeto: arquiva o projeto, no qual seus arquivos serão mantidos no sistema, porém suas funcionalidades estarão desativadas.
  
• Fazer Backup: cria uma cópia do projeto no estado atual. Acesse o backup através da funcionalidade Gerenciamento de Backup.
• Conceder acesso remoto: abre uma janela que gera um link para permitir o acesso remoto por outro usuário, o Cronapp solicitará sua autorização quando o novo usuário abrir o projeto. Também é possível enviar o link de compartilhamento por e-mail, basta inserir os e-mails que deseja enviar o link.
• Novo: cria ou adiciona um novo arquivo:
• Fazer upload: faz upload de um arquivo do computador para o projeto;
• Fazer upload de um zip: faz upload de um .zip para o projeto, esse processo descompacta automaticamente o conteúdo compactado no local selecionado;
• Fazer upload de um link: permite realizar o upload de um arquivo passando a sua URI;
• Existem diversas opções de arquivos para serem criados, como JavaScript, JSON, XML, HTML, relatório ou você pode usar a opção Outro para criar um arquivo com outra extensão.
  
• Adicionar novo plugin: abre a janela para selecionar e adicionar um plugin ao projeto;
• Aplicar modelo: retorna a tela de seleção do tipo de projeto e tema, então os arquivos serão sobrescritos pelos do novo modelo;
• Compartilhar Projeto: abre uma janela que disponibiliza um link que permite que outro usuário copie o projeto para sua conta. Também é possível enviar esse link por e-mail;
• Configuração: abre a janela de configurações gerais do projeto;
• Fechar: fecha o projeto.

Menu de contexto de pasta e arquivos

Existem algumas ações que podem ser feitas ao clicar com o botão direito num diretório ou arquivo na árvore da IDE.

Image Removed

Figura 4.8 - Menu de contexto de um diretório e um arquivo respectivamente

• Recarregar: recarrega novamente a árvore de arquivos.
• Compartilhar Pasta: abre uma janela e disponibiliza um link público que permite o usuário fazer o download desse diretório compactado em formato .zip. Também é possível enviar esse link por e-mail.
• Abrir terminal: abre o diretório selecionado em um terminal linux.
• Arquivar projeto: arquiva o projeto, seus arquivos serão mantidos no sistema, porém as funcionalidades dele estarão desligadas.
• Fazer Backup: cria uma cópia do projeto no estado atual. Acesse o backup através da funcionalidade Gerenciamento de Backup.
• Novo: cria ou adiciona um novo arquivo;
• Fazer upload: faz upload de um arquivo do computador para o projeto;
• Fazer upload de um zip: faz upload de um .zip para o projeto, esse processo descompacta automaticamente o conteúdo compactado no local selecionado;
• Fazer upload de um link: permite realizar o upload de um arquivo passando uma URL;
• Existem diversas opções de arquivos para serem criados, como JavaScript, Json, XML, HTML, relatório ou você pode usar a opção Outro para criar um arquivo com outra extensão.
• Renomear: renomeia o arquivo ou diretório selecionado.
• Remover: exclui o arquivo ou diretório selecionado.
• Copiar: copia o arquivo ou diretório selecionado.
• Recortar: recorta o arquivo ou diretório selecionado.
• Colar: cola o arquivo ou diretório que foi recortado ou copiado.
• Duplicar: duplica o arquivo ou diretório selecionado.
• Propriedades: mostra as propriedades do arquivo ou diretório selecionado.
• Abrir: abre o arquivo selecionado.
• Abrir com: abre o arquivo como editor de texto.
• Baixar: faz o download do conteúdo selecionado, no caso de diretórios o mesmo é compactado em formato .zip.
• Compartilhar Arquivo: abre uma janela e disponibiliza um link público que permite o usuário fazer o download desse arquivo. Também é possível enviar esse link por e-mail.

Menu de contexto do arquivo Maven

O arquivo Definições Maven (pom.xml) possui uma categoria a parte em seu menu de contexto.

Image Removed

Figura 4.9 - Ações específicas para o Maven

• Maven: ferramenta que faz o gerenciamento de dependências da aplicação e automatização de builds (versionamento e documentação):
  • Processar alvos: abre uma janela para executar comandos do Maven;
  • Empacotar e baixar WAR: compacta os arquivos Maven e faz o download do .war gerado.

Arquivos do template

Trata-se de um novo mecanismo de customização de templates adicionado a árvore de arquivos. Esses arquivos são todos os templates que o Cronapp usa para gerar arquivos, camadas de dados e CRUDs.

Acesse a página Customização de templates para mais detalhes.

Image Removed

Figura 4.10 - Estrutura do Arquivo de Templates

Área de trabalho

É na área de trabalho que será feito todo o desenvolvimento da aplicação, nele são abertos todos os arquivos - seja as ferramentas de desenvolvimento low-code (Figura 5.1) ou os códigos fontes, para o desenvolvimento high-code. Suas ferramentas mudam conforme o tipo de arquivo aberto.

Image Removed

Figura 5.1 - Área de trabalho com a aba de edição de views aberta

Menu de contexto das abas

Ao clicar com o botão direito sobre a aba de um arquivo aberto na IDE (Figura 5.2), é possível encontrar as seguintes funcionalidades:

• Salvar como: salva um cópia do arquivo em outros diretórios do projeto;
• Fechar: fecha a aba selecionada;
• Fechar outros: fecha todas as abas abertas, exceto a aba selecionada;
  
• Fechar todos: fecha todas as abas abertas;
• Histórico: apresenta um histórico de todas as alterações que ocorreu no arquivo selecionado;
• Comparar com: faz a comparação do arquivo atual com as versões anteriores do arquivo;
• Mostrar em: apresenta onde o arquivo se encontra na árvore de arquivo do projeto.

Image Removed

Figura 5.2 - Menu de contexto para as abas da área de trabalho

Maximizar, restaurar e minimizar janelas

Apesar dos símbolos de maximizar, restaurar e minimizar serem padrões como em outras aplicações, elas podem estar posicionadas em locais diferentes. Por exemplo na janela de informações, onde o ícone de minimizar (destaque 1 da figura 5.3) encontra-se em cima e o maximizar (2) em baixo.

Image Removed

Figura 5.3 - Botões de minimizar e maximizar janela

Conteúdo salvo

É possível identificar se o conteúdo da aba sofreu alguma alteração e ainda não foi salvo observando se o texto da aba está em itálico e negrito. Na Figura 5.4, a página HTML e JavaScript estão abertas, mas não sofreram alterações enquanto a página do relatório sofreu alguma alteração em relação ao conteúdo.

Image Removed

Figura 5.4 - Diferença entre uma aba com o conteúdo salvo e sem salvar

Á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 outrosrelacionadas principalmente a execução do projeto, como threads, depuração, variáveis e outros. Essa janela permite seu recolhimento ou expansão para facilitar a visualização do seu conteúdo, para isso, clique nos ícones minimizar (1 da Figura 7.1) ou maximizar (2), respectivamente.

Image Modified

Figura 67.1 - Área de informações da IDE

Abaixo destacamos cada uma das abas da área de informações do Cronapp.

Saída

Mostra sequencialmente os eventos que ocorrem na no servidor da aplicação.

Image Modified

Figura 6Figura 7.2 - Aba de saída

Problemas

Exibe os avisos e /ou erros que podem ter ocorrido no sistema, detalhando a exibindo sua descrição, o arquivo, o caminho, a linha no código e sua classificação. Clique sobre a linha para abrir o arquivo que exibe o erro ou aviso.

Figura 6Figura 7.3 - Aba de problemas

Expressões

Nessa janela é feito o monitoramento de variáveis e expressões.

Figura 6Figura 7.4 - Informações sobre a variável

Clique com o botão direito no interior da janela de Expressões para adicionar ou remover expressões.

Figura 6Figura 7.5 - Menu que é exibido ao clicar na área

Breakpoints

Exibe os pontos de paradas adicionados no bloco de programação ou código-fonte servidor, a janela também informa o arquivo, a linha e se está ativo ou não.

Figura 6Figura 7.6 - Aba de breakpoints

Variáveis

Mostra o valor que a variável recebe durante sua execução, além de suas descrições (como mostrada em na aba expressões).

Figura 6Figura 7.7 - Aba de variáveis

Pilha de chamada

Exibe as funções que estão em pilha na ordem em que são chamadas, facilitando analisar e entender o fluxo de execução da aplicação.

Figura 6Figura 7.8 - Aba de pilha de chamada

Console do depurador

Aparece todas as informações sobre a depuração, como atualizações, carregamento das bibliotecas, impressão de conteúdo e logs gerados pelo servidor.

Figura 6Figura 7.9 - Aba do depurador

Utilize a caixa de texto para executar ações em run time.

Figura 6Figura 7.10 - Console do depurador

Barra de Status

A barra de status permite receber notificações e mensagens sem precisar interromper o trabalho. Definida por é uma linha horizontal e localizada na parte inferior da IDE.As informações e cores exibidas , ela exibe diversas informações sobre a situação atual do seu projeto. O conteúdo e a cor da barra variam com o tipo de arquivo aberto na área de trabalho da IDE e status do projeto, porém as informações da Figura 7.1 são fixas e as mais básicas.. 

Image Modified

Figura 7.1 11 - Barra de status

1. Mostra a quantidade de erros que existem no projeto, clique para abrir a aba Problemas e exibir os detalhardetalhes.
2. Mostra a quantidade de avisos que existem existe no projeto, clique para abrir a aba Problemas e exibir os detalhardetalhes.
3. Exibe informações sobre o que está ocorrendo no servidor tomcat.
4. Mostra do o status atual do projeto.
5. Exibe e oculta o chat colaborativo, além de notificar se existem novas mensagens.
6. Avisa quando há novas notificações.

A barra também exibe informações de arquivos de texto ou fontes. Clique sobre esses campos para definir configurações deste arquivoAo abrir um arquivo Java e clicar no código, a barra exibirá algumas informações, clicando nessas informações uma janela de alterações é aberta.

Figura 7.2 12 - Alteração da codificação do arquivo aberto ao clicar na barra de status

1. Linha e coluna selecionada, ao clicar um popup é aberto para informar a linha que ficará ativa;
2. Informações sobre a indentação do arquivo, ao clicar um popup é aberto para alterações de indentação;
3. Codificação do texto, ao clicar é possível alterar o enconding do arquivo;
4. Informa o tipo de quebra de linha, ao clicar é possível alterar essa opção;
5. Informa o tipo de arquivo aberto, ao clicar é possível definir o tema e configuração do texto baseado na linguagem selecionada.

Ajuda contextual

O Cronapp possui ícones de ajuda "?" que, ao clicar, abre uma nova guia no navegador exibindo a documentação da funcionalidade que você estiver acessando no momento. Esses ícones estão espalhados pelo Cronapp e são úteis para tirar dúvidas sobre alguma área da IDE (Figura 8.1).

Figura 8.1 - Opções de ajuda

Os ícones de ajuda podem ser encontrados nas seguintes áreas:

1. Abas : junto as abas das ferramentas do Cronapp. No exemplo acima será aberto a documentação da área de trabalho: abre a documentação da aba que está ativa no momento. No exemplo da figura 8.1, a documentação que será aberta será a do editor de views.
2. Componentes visuais: para acessar a documentação dos componentes visuais, clique no ícone de ajuda ao lado do seu nome, nas propriedades.
3. Janelas: diversas janelas também possuem o ícone de ajuda próximo ao ícone de fechar.

Ajuda em blocos de programação

Caso queira acessar uma documentação referente à um bloco de programação, seja ele do tipo servidor ou cliente, basta clicar com o botão direito sob o bloco e clicar em Ajuda, como mostrado na figura 8.12.

Image Modified

Figura 8.1 2 - Acesse a documentação do bloco no item Ajuda do seu menu de contexto