Projetos criados no Cronapp possuem muitos arquivos e diretórios, todo esse conteúdo é responsável por gerar um projeto base e manter uma estrutura de fácil desenvolvimento. Dessa forma, desenvolvedores Cronapp não necessitam conhecer as diversas bibliotecas utilizadas em seu projeto, pois o Cronapp encapsula isso em recursos visuais de forma simples, permitindo rápido desenvolvimento e baixa curva de aprendizado.

Opção Modo Avançado

A árvore de arquivos (destaque 3 da figura 1.1) exibe os diretórios e arquivos pertencentes ao seu projeto. Porém, a forma como o conteúdo será exibido dependerá da configuração da opção Modo Avançado. 

Figura 1.1 - Alterando entre as opções de Modo Avançado

O que muda quando alteramos o Modo Avançado:

• Desabilitado:
  • O conteúdo é organizado com base na sua funcionalidade, ou seja, arquivos de mesmo propósito permanecem juntos.
  • Apenas arquivos com recursos low-code são exibidos.
  • As extensões de alguns tipos de arquivos ficarão ocultas, melhorando a legibilidade dos arquivos na árvore.
  • O caminho do diretório raiz até o arquivo é exibido em seu endereço virtual ou localização.
    • Localização: Formulários/Mobile/Autenticado/home
  • Funcionalidades como o Editor de views ou Editor de bloco de programação ocultam a subaba "Código", exibindo apenas o conteúdo visual.
  • O usuário não será consultado quando for necessário substituir arquivos.
  • A aba inferior "Console do depurador" ficará recolhida após executar o projeto.
  • Não será exibida a opção "Novo Bloco de Programação Java/JavaScript (High-code)" durante a criação dos blocos de programação cliente e servidor.
• Habilitado:
  • O conteúdo é organizado com base na sua estrutura hierárquica, ou seja, diretório pai contém diretórios filhos e seus arquivos.
  • Todos os arquivo ou diretório são exibidos.
  • As extensões dos arquivos são exibidas.
  • O caminho do diretório raiz até o arquivo é exibido em seu endereço real.
    • Endereço: src/main/mobileapp/www/views/logged/home.view.html
  • Funcionalidades como o Editor de views ou Editor de bloco de programação exibem a subaba "Código", permitindo que o usuário acesse o código fonte gerado pelo recurso visual.
  • O usuário será consultado sempre que um arquivo necessitar ser substituído.
  • A aba inferior "Console do depurador" será expandida automaticamente após rodar o projeto em modo Debug.
  • Será exibida a opção "Novo Bloco de Programação Java/JavaScript (High-code)" durante a criação dos blocos de programação cliente e servidor.

O principal objetivo da opção Modo Avançado é simplificar ainda mais o desenvolvimento no Cronapp. Para alterar entre os modos, acesse o botão alternância (destaque 1 da figura 1.1) ou através da opção Modo de uso da IDE no menu do sistema (2 da figura 1.1). 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. 

Na figura abaixo, as duas estruturas estão com o mesmo diretório aberto, a pasta dos blocos de programação web, e com o mesmo arquivo "Bloco" selecionado (destaque 1 da figura 1.2). Porém, a árvore da esquerda (Modo Avançado desabilitado) exibe o conteúdo de forma muito mais simples e resumida. 

Figura 1.2 - Diferença ao visualizar os arquivos com a opção Modo Avançado habilitada e desabilitada

Arquivos no modo Analista

Ao desativar o Modo Avançado, a árvore do projeto não exibe arquivos na pasta raiz, apenas os diretórios dos principais recursos low-code. As pastas estão ordenadas com base na recomendação de desenvolvimento no Cronapp: primeiro criamos o diagrama do projeto, as páginas e, em paralelo, os blocos de programação.

A pasta principal (raiz) possui o nome do projeto e um ícone que identifica se o projeto é mobile e web (ícone smartphone, figura 2.1) ou apenas web (ícone monitor). Descrevemos abaixo a função dos diretórios que estão logo abaixo do nó raiz do projeto, quando a opção Modo Avançado está desativada.

Figura 2.1 - Diretórios do projeto quando o Modo Avançado está desativado

Alguns dos diretórios listados abaixo são virtuais, ou seja, não existem no projeto. São visíveis apenas quando a opção Modo Avançado está desativada e tem o intuito de agrupar conteúdo com a mesma funcionalidade. Diretórios virtuais não possuem menu de contexto.

• Diagrama de dados 

  Tooltip
  onlyIcon true appendIcon Kein Icon
  Endereço: diagram

  : contém os arquivos de diagrama de classe do projeto.

• Formulários: diretório virtual para agrupar as pastas de formulários dos projetos mobile e web.

  • Mobile 

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

    : diretório que organiza as telas da aplicação mobile,

  • Web 

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

    : diretório onde ficam organizadas as páginas web.

• Blocos de programação: diretório virtual para agrupar as pastas dos blocos de programação mobile, servidor e web.

  • Mobile 

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

    : contém os arquivos de bloco de programação mobile (cliente).

  • Servidor 

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

    : contém os arquivos de bloco de programação servidor (back-end).

  • Web 

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

    : contém os arquivos de bloco de programação web (cliente).

• Relatórios

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

  : armazena os relatórios criados no projeto.

• Recursos 

  Tooltip
  onlyIcon true appendIcon info-circle
  Mobile:  src/main/mobileapp/www/assets Servidor: src/main/resources/assets Web: src/main/webapp/public/assets

  : diretório virtual para agrupar arquivos estáticos (imagens, pdf, texto e outros) para os projetos mobile, servidor e web.

• Fluxo de Trabalho 

  Tooltip
  onlyIcon true appendIcon info-circle
  Endereço: src/main/resources/bpm

  : contém os arquivos de fluxo de trabalho do Cronapp BPM.

• Testes 

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

  : pasta reservada para os blocos de programação de teste do projeto servidor.

• Documentação 

  Tooltip
  onlyIcon true appendIcon info-circle
  Endereço: docs

  : hospeda os arquivos de documentação do projeto, nele você poderá criar diagramas UML, fluxogramas, diversos recursos para ajudar no desenvolvimento do projeto,

Arquivos no modo Avançado

Com o Modo Avançado habilitado, a árvore do projeto exibe todos os arquivos, incluindo o conteúdo high-code. As pastas serão ordenadas com base na hierarquia de diretórios do projeto. Outra característica desse modo, são os ícones de Visualização que ficam disponíveis, permitindo exibir alguns diretórios e arquivos com nomes virtuais, mais amigáveis, ao invés dos nomes reais. Independente do modo de visualização, a estrutura dos arquivos permanece a mesma. (Figura 3.1)

Figura 3.1 - Diferença entre os modos de visualização por Categorias e Pastas

1. Visualização de Categoria: exibe alguns diretórios e arquivos com nomes mais amigáveis. 
   
2. Visualização de Pastas: exibe os diretórios e arquivos com seus nomes originais.

Diretório raiz

A pasta principal (raiz) possui o nome do projeto e um ícone que identifica se o projeto é mobile e web (ícone smartphone, figura 3.2) ou apenas web (ícone monitor). Descrevemos abaixo a função de alguns arquivos e subdiretórios do projeto.

Figura 3.2 - Divisão da árvore de arquivos

Os diretórios e arquivos da raiz do projeto:

• src (Códigos Fonte): diretório principal do projeto.
  • main (Principal): dependendo de como foi criado o projeto, esse diretório possuirá os seguintes subdiretórios:
    • java (Códigos Fonte Servidor): armazena a camada DAO, Entity, código Java, arquivo de configuração do projeto, relatórios e outros arquivos do servidor da aplicação;
    • mobileapp (Códigos Fonte Mobile): armazena os formulários HTML, código JavaScript, plugins, CSS, Splash e outros arquivos do projeto mobile da aplicação;
    • webapp: (Códigos Fonte Web): armazena os formulários HTML, código JavaScript, plugins, CSS e outros arquivos do projeto web da aplicação.
  • Arquivos do Template: permite criar ou customizar templates do seu projeto.
  • config (Configurações): contém arquivos de teste e configurações:
    • app.config (Configurações do Projeto): abre a janela de configurações do projeto;
    • context.xml (Bancos de dados): abre a janela de configurações dos bancos de dados do projeto.
  • diagram (Diagrama de dados): contém os arquivos de diagrama de classe do projeto.
  • docs (Documentação): 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.
  • pom.xml (Definições Maven): 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.

java

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.

Figura 3.3 - Arquivos do Servidor da Aplicação

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

• app: diretório do Namespace principal do servidor:
  • dao: contém os arquivos responsáveis pela comunicação das entidades com o banco de dados;
  • entity: diretório que contém as classes das 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 pela primeira vez. Esse conteúdo é configurado pela funcionalidade Permissão de segurança.

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

• i18n: diretório que contém à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:
  • customQuery.json: arquivo de configuração das Fontes de dados do sistema;
  • persistence.xml: arquivo utilizado pelo JPA.
• 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 (destaque 1 da Figura 3.2) na barra de atalhos da árvore de arquivos.
• SpringBootMain.java: classe que inicia o contexto de aplicação do SpringBoot.

mobileapp

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

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

Os subdiretórios e arquivos da pasta mobile (Código 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 com os recursos estáticos da aplicação:
• icon: ícones utilizados na aplicação mobile;
• screen: plano de fundo da aplicação mobile.
• www (Arquivos da Aplicação): 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: arquivo utilizado para a configuração de rede em aplicações mobile.
• 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.

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.

Figura 3.5 - Estrutura da pasta www

Os subdiretórios e arquivos da pasta www (Arquivos da Aplicação):

• bowerscripts: arquivos referentes ao Bower, uma ferramenta que ajuda no gerenciamento das dependências do front-end.
• css: local onde ficam armazenados 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 (Regras de Negócio): diretório que mantém os arquivos blockly e JavaScript responsáveis por tratar as rotas Angular, autenticação e regras de negócios do sistema:
  • blockly (Blocos de Programação): diretório onde ficam as funções de bloco de programação da aplicação:
    • auth: blocos de programação que tratam a autenticação dos usuários no sistema mobile.
• node_modules: local onde ficam armazenadas diversas bibliotecas usadas pelo Cronapp apenas no período de desenvolvimento do 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.
• views (Formulários): diretório que organiza as telas da aplicação mobile:
  
  • error (Erros): telas de informação de erros do sistema, os usuários serão encaminhados para essas telas quando ocorrer um erro no sistema;
  • Logged (Autenticado): contém as telas com permissão de acesso apenas para os usuários logados no sistema;
  • public (Público): telas 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 da sua aplicação.
• .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-lock.json: arquivo de configuração do Node Package Manager (npm).
• package.json: arquivo de configuração do Node Package Manager (npm).
• README.md: arquivo de texto que apresenta um pequeno tutorial de como usar o template do Ionic Framework.

webapp

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.

Figura 3.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 armazenados 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 web.
• js (Regras de Negócio): diretório que mantém os arquivos blockly e JavaScript responsáveis por tratar as rotas Angular, autenticação e regras de negócios do sistema:
  • blockly (Blocos de Programação): diretório onde ficam as funções de bloco de programação da aplicação:
    • MutualAuth.blockly: bloco responsável pela autenticação do usuário no sistema web.
• node_modules: local onde ficam armazenadas diversas bibliotecas usadas pelo Cronapp apenas no período de desenvolvimento do 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:
  • admin (Administrativo): contém as páginas com permissão de acesso apenas para os usuários com perfil de administrador do sistema;
  • error (Erros): 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;
  • Logged (Autenticado): contém as páginas com permissão de acesso apenas para os logados no sistema;
  • public (Público): páginas sem restrição de acesso.
  • login.view.html: por padrão é a primeira página exibida para o usuário. Acesse Alterar página inicial, caso queira mudar a página inicial da sua aplicação.
• .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-lock.json: arquivo de configuração do Node Package Manager (npm).
• package.json: arquivo de configuração do Node Package Manager (npm).

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) ou em outros arquivos. O conteúdo exibido no menu de contexto varia com o tipo de projeto: servidor, mobile e web.

Figura 4.1 - 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, war ou zip.
• Arquivar projeto: arquiva o projeto, 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.
• 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.
• 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.
  
• Instalar Plugins: 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 em diretórios e arquivos

O menu de arquivos e diretórios possuem algumas diferenças em relação da raiz do projeto, veja abaixo o conteúdo adicional.

Figura 4.2 - Menu de contexto de um arquivo e um diretório

Menu dos arquivos:

• Abrir: abre o arquivo selecionado.
• Abrir com: abre o arquivo como editor de texto.
• Renomear: renomeia o arquivo selecionado.
• Remover: exclui o arquivo selecionado.
• Copiar: cópia para a área de transferência o arquivo selecionado.
• Recortar: recorta para a área de transferência o arquivo selecionado.
• Colar: cola o arquivo da área de transferência para o mesmo diretório do arquivo selecionado.
• Duplicar: cria uma cópia do arquivo no mesmo diretório.
• Baixar: faz o download do conteúdo selecionado.
• Compartilhar Arquivo: abre uma janela e disponibiliza um link público que permite outro usuário fazer o download apenas desse arquivo. Também é possível enviar esse link por e-mail.
• Propriedades: exibe as propriedades do arquivo.

Menu dos diretórios:

• Recarregar: recarrega o conteúdo do diretório selecionado.
• Baixar: compacta o diretório selecionado (formato .zip) e efetua o download.
• 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.
• Novo: cria ou adiciona um arquivo dentro do diretório selecionado. A maioria dos itens não serão exibidos quando a opção Movo Avançado estiver desativada.
• 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 diretório selecionado.
• Remover: exclui diretório selecionado.
• Copiar: copia para a área de transferência o diretório selecionado.
• Recortar: recorta para a área de transferência o diretório selecionado.
• Colar: cola o conteúdo da área de transferência para dentro do diretório selecionado.
• Duplicar: duplica diretório selecionado.
• Propriedades: mostra as propriedades do diretório selecionado.

Menu do pom.xml

O arquivo pom.xml (Definições Maven) só é exibido quando a opção Modo Avançado estiver ativada e possui uma categoria a parte em seu menu de contexto.

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

Janela Propriedades

Na janela de propriedades dos arquivos e diretórios é possível acessar informações e definir algumas características sobre o elemento selecionado. Essa opção é útil quando necessário saber o endereço real de arquivos e diretórios com a opção Modo Avançado estiver desabilitada.

Arquivo

Figura 5.1 - Janela de propriedade dos arquivos

• Nome: nome completo, incluindo a extensão.
• Caminho: Endereço.
• Status: quando o projeto está versionado, esse campo exibe o status git atual (exemplo: Nome, new, added, changed).
• Tipo: MIME Type do arquivo,
• Tamanho: espaço ocupado pelo arquivo.
• Codificação: define a codificação de caracteres do arquivo. É recomendável sempre utilizar o padrão UTF-8.
• URL: [ recurso depreciado ] gera um endereço único para compartilhamento do arquivo. Para essa função, utilize a opção Compartilhar Arquivo.

Diretório

Alguns dos diretórios listados quando a opção Modo Avançado está desativada são virtuais, ou seja, não existem no projeto. Dessa forma não é possível acessar seu menu de contexto ou propriedade. Na figura 5.2 são exibidos alguns diretórios virtuais: Formulários, Blocos de Programação e Recursos.

Figura 5.2 - Janela de propriedade dos diretórios

• Nome: nome real do diretório.
• Caminho: endereço.
• Status: quando o projeto está versionado, esse campo exibe o status git atual (exemplo: nome, new, added, changed).
• Tipo: exibe o MIME Type atual definido para o diretório.
• Tipo (caixa de seleção): altera o MIMEType do diretório.
• Tamanho: espaço ocupado pelo diretório.