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.

Veremos aqui como está organizado a estrutura de arquivos dos projetos modelos que contém as aplicações web e mobile e quais mudanças visuais ocorrem ao habilitar/desabilitar a opção Modo Avançado (destaque 2 da figura 1).

Opção Modo Avançado

A árvore de arquivos (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. O objetivo dessa opção é simplificar ainda mais o desenvolvimento no Cronapp. Para alternar entre os modos, clique no botão do Menu do sistema (destaque 1 da figura 1) e mude a posição do botão alternância Modo Avançado (2 da figura 1). Também é possível alterar entre os modos a partir do menu do sistema (destaque 3): 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.

Open

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

O que muda quando alteramos o Modo Avançado:

• Desabilitado:

  • Exibe uma Árvore de recursos, que apresenta o conteúdo de forma simplificada, organizando os arquivos com base em suas funcionalidades. Isso significa que arquivos com propósitos semelhantes, abertos a partir da mesma ferramenta, ficam agrupados no mesmo diretório (lado esquerdo da figura 1.1).

  • Apenas arquivos com recursos de desenvolvimento acelerado 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

  • O usuário não será consultado quando for necessário substituir ou atualizar arquivos do projeto.

  • 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:

  • Exibe uma Árvore de arquivos, mostrando a estrutura hierárquica real dos arquivos do projeto, incluindo todos os diretórios e seus conteúdos (lado direito da figura 1.1).

  • Todos os arquivo e 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

  • O usuário será consultado sempre que um arquivo necessitar ser substituído ou atualizado.

  • 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.

As duas estruturas na figura abaixo estão com o mesmo arquivo "Bloco.blockly" selecionado. Porém, a árvore de recursos da esquerda (Modo Avançado desabilitado) exibe o conteúdo de forma muito mais simples e resumida que a árvore de arquivos da direita (Modo Avançado habilitado). 

Open

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

Arquivos no modo Analista

Ao desativar o Modo Avançado, a árvore do projeto não exibe os arquivos na pasta raiz, apenas os diretórios dos principais recursos de desenvolvimento acelerado. As pastas estão ordenadas com base na recomendação de desenvolvimento de projetos no Cronapp.

A pasta principal (raiz) possui o nome do projeto e um ícone que identifica se o projeto é mobile e web (ícone smartphone, figura 2), apenas web (ícone monitor) ou microsserviços (ícone engrenagem). 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.

Open

Figura 2 - 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 exibem menu de contexto ao clicar com o botão direito do mouse.

• Diagrama de dados: contém os Diagramas de classe do projeto, expandindo o diagrama, é possível visualizar suas classes e atributos.

• Fontes de Dados: lista as Fontes de dados personalizadas do projeto.

• Interfaces: diretório virtual para agrupar os recursos relacionados aos Formulários, Fragmentos de formulários e Skins.

  • Fragmentos: diretório virtual para agrupar as pastas dos Fragmentos mobile e web.

    • Mobile: contém os arquivos de fragmento mobile.

    • Web: contém os arquivos de fragmento web.

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

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

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

  • Skins: contém os arquivos de skins criados para o projeto,

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

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

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

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

• Dashboards: armazena os Dashboards criados no projeto.

• Relatórios: armazena os Relatórios criados no projeto.

• Mídia: diretório virtual para agrupar arquivos estáticos (ex.: imagens, PDFs, vídeos e outros).

  • Mobile: contém os arquivos do projeto utilizados na aplicação mobile.

  • Servidor: contém os arquivos do projeto mantidos no back-end da aplicação.

  • Web: contém os arquivos do projeto utilizados na aplicação web. 

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

• Testes: pasta reservada para os blocos de programação de teste unitários do projeto servidor.

• Documentação: diretório usado para manter os arquivos de documentação do projeto, nele você poderá criar diagramas UML, fluxogramas e diversos recursos para ajudar no desenvolvimento do projeto. Ao utilizar a ferramenta Gerar documentação, seu conteúdo também será criado nessa pasta.

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. 

Os subtópicos abaixo apresentam a estrutura dos diretórios e arquivos dos projetos baseados no modelo contendo as aplicações Mobile e Web.

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) ou apenas web (ícone monitor). Descrevemos abaixo a função de alguns arquivos e subdiretórios do projeto.

Open

Figura 3 - Divisão da árvore de arquivos

Os diretórios e arquivos da raiz do projeto:

• src: diretório principal do projeto.

  • main: projetos apenas web não exibirá o diretório mobileapp.

    • java: armazena as camadas dao e entity, código Java, arquivo de configuração do projeto, relatórios, fontes de dados e outros arquivos do servidor da aplicação.

    • mobileapp: armazena os formulários HTML, código JavaScript, plugins, CSS, Splash e outros arquivos da aplicação mobile.

    • resources: armazena conteúdos estáticos do servidor da aplicação, essa pasta também contém os templates e configurações necessárias para a recuperação da senha do usuário.

    • webapp: armazena os formulários HTML, código JavaScript, plugins, CSS e outros arquivos da aplicação web.

  • test/java/blockly: diretório utilizado para armazenar as funções de testes unitários dos blocos Servidor.

• Arquivos do Template: permite criar ou customizar templates de vários recursos gerados pelo Cronapp.

• config: contém arquivos de teste, configurações e a ferramenta de vínculo com banco de dados.

  • test: diretório que armazena os testes criados a partir da ferramenta integrada de testes.

  • app.config: abre a janela de configurações do projeto.

  • context.xml: abre a janela de configurações dos bancos de dados do projeto.

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

• docs: arquivos de documentação do projeto, nele você poderá criar diagramas UML, fluxogramas e diversos recursos para ajudar no desenvolvimento do projeto. Ao utilizar a ferramenta Gerar documentação, seu conteúdo também será criado nessa pasta.

• skins: contém os arquivos da ferramenta de configuração dos skins de tema.

• .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.

• Jenkinsfile: arquivo de configuração ao utilizar esteira DevOps.

• 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 com alguns dados do projeto.

java

Dentro desse diretório estão contidas as camadas DAO e Entity, internacionalização, relatórios e dashboards, fonte de dados, além de diversos arquivos usados pelo servidor da aplicação.

Ao criar o projeto, os diretórios reports e dashboards não existem, para criá-los, clique nos atalhos laterais (destaques 1 e 2 da figura 3.1).

Open

Figura 3.1 - Arquivos do Servidor da Aplicação

Os subdiretórios e arquivos da pasta java (Endereço: /src/main/java/):

• 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 ferramenta de Permissão de segurança.

• blockly: diretório que contém os arquivos com as funções de blocos de programação do servidor e os arquivos Java gerados pelos blocos.
  Abaixo listamos os arquivos de blocos existentes no projeto modelo e suas respectivas funções.

  • Application.blockly

    1. Current: obtém o id da aplicação em execução.

  • RoleManager.blockly

    1. BeforeInsert: trata a entidade Role antes de inserir o registro no banco de dados.

    2. BeforeUpdate: trata a entidade Role antes de atualizar seu registro no banco de dados.

    3. Normalize: trata o campo "normalizedName" da entidade Role.

  • UserControl.blockly

    1. signUp: obtém os dados do novo usuário para realizar sua inscrição no sistema.

    2. resetPassword: utilizado no processo de redefinição de senha por e-mail. Veja mais detalhes sobre essa configuração em Recuperar senha por e-mail.

  • UserManager.blockly

    1. BeforeInsert: trata a entidade User antes de inserir o registro no banco de dados.

    2. BeforeUpdate: trata a entidade User antes de atualizar seu registro no banco de dados.

    3. BeforeDelete: trata a entidade User antes de remover seu registro no banco de dados e verifica se o solicitante possui autorização para realizar essa ação.

    4. Normalize: trata os campos "userName" e "email" da entidade User.

• dashboard: diretório que armazena os arquivos criados a partir da ferramenta de Dashboard do Cronapp. Por padrão, essa pasta não existe quando o projeto baseado no modelo é criado, para criá-la, clique em seu atalho (destaque 1 da Figura 3.1) no menu lateral.

• i18n: diretório que contém as propriedades de internacionalização no lado servidor do projeto.

• META-INF: diretório relacionado aos arquivos do tipo JAR, para configurar aplicações, extensões, carregadores de classes e serviços:

  • datasources: diretório que contém todas as Fontes de dados personalizadas do projeto.

  • persistence.xml: arquivo utilizado pelo JPA.

• reports: diretório que armazena os arquivos criados a partir da ferramenta de Relatórios do Cronapp. Por padrão, essa pasta não existe quando o projeto baseado no modelo é criado, para criá-la, clique em seu atalho (destaque 2 da Figura 3.1) no menu lateral.

• SpringBootMain.java: classe que inicia o contexto de aplicação do SpringBoot.

mobileapp

Diretório da aplicação mobile (Android e iOS).

Open

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

Os subdiretórios e arquivos da pasta mobile (Endereço: /src/main/mobileapp/):

• certs: (Certificate Enrollment Requests) esse diretório deve conter os 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. Esse conteúdo é manipulado a partir da janela de Configurações dos Dispositivos móveis.

  • icon: ícones utilizados na aplicação mobile.

  • screen: plano de fundo da aplicação mobile.

• www: armazena os arquivos da aplicação mobile.

• .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 controla aspectos de uma aplicação Cordova. Esse conteúdo é manipulado a partir da janela de Configurações dos Dispositivos móveis.

• network_security_config.xml: arquivo utilizado para a configuração de rede em aplicações mobile.

• package-lock.json: contém informações sobre a aplicação e sua versão. O pacote com as dependências da aplicação mobile fica no diretório www.

• package.json: contém informações sobre a aplicação e sua versão. O pacote com as dependências da aplicação mobile fica no diretório www.

Diretório mobile www

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

Open

Figura 3.3 - Estrutura da pasta www da aplicação mobile

Os subdiretórios e arquivos da pasta www (Endereço: src/main/mobileapp/www/):

• assets: diretório responsável por manter arquivos estáticos da aplicação mobile.

• bowerscripts: arquivos referentes ao Bower, uma ferramenta que ajuda no gerenciamento das dependências do front-end.

• components: diretório onde são mantidos os arquivos de fragmentos da aplicação mobile.

• css: local onde ficam armazenados as estilizações em CSS.

  • skin: diretório com os arquivos *.css gerados pela ferramenta Editor de Skins.

  • app.css: arquivo *.css com as classes geradas pelo editor visual de estilos.

• 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 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: diretório que contém os arquivos com as funções de blocos de programação cliente e os arquivos JavaScript gerados pelos blocos.
    Abaixo listamos os arquivos de blocos existentes no projeto modelo e suas respectivas funções.

    • auth: diretório que agrupa as regras de negócios da autenticação nas aplicações mobile.

      • ChangePassword.blockly

        1. changePassword: executa as validações necessárias e altera a senha do usuário.

        2. closeModal: fecha o modal que permite o usuário alterar sua senha na tela menu.view.html.

        3. openModal: abre o modal que permite o usuário alterar sua senha na tela menu.view.html.

      • Home.blockly

        1. change: responsável por direcionar o usuário para a tela definida no campo "Rota Principal Mobile" nas Configurações do Projeto.

      • Login.blockly

        1. login: responsável por fazer as validações necessárias e direcionar os dados passados pelo usuário para o login no sistema.

      • UserControl.blockly

        1. isValidSignup: executado a partir da função signUp, realiza as primeiras validações dos dados do novo usuário.

        2. resetPassword: utilizado no processo de redefinição de senha por e-mail na aplicação mobile. Veja mais detalhes sobre essa configuração em Recuperar senha por e-mail.

        3. signUp: obtém os dados do novo usuário para realizar as primeiras validações e direciona para as regras de negócio do servidor da aplicação.

• 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: diretório que organiza as telas da aplicação mobile:

  • error: formulários de tratamento de erros da aplicação.

    • 403: o usuário é direcionado para essa tela caso tente acessar algo que ele não possua autorização. Nesta tela há três botões: Tentar novamente, recarrega a tela; Voltar, retorna a tela anterior e Ir ao início, volta pra a tela home da aplicação.

    • 404: o usuário é direcionado para essa tela caso tente acessar uma tela que não exista na aplicação. Nesta tela há três botões: Tentar novamente, recarrega a tela; Voltar, retorna a tela anterior e Ir ao início, volta pra a tela home da aplicação.

  • logged: contém as telas com permissão de acesso apenas para os usuários logados no sistema.

    • home: tela principal, acessível após o login na aplicação mobile.

    • menu: tela exibida sempre que o ícone sanduíche do componente Cabeçalho for selecionado. Possui o modal para alteração de senhas.

    • user: acessível apenas por usuários com perfil administrador, sendo possível exibir, editar e excluir os usuários do sistema.

  • public: telas sem restrição de acesso.

    • home: tela pública principal.

    • menu: tela exibida sempre que o ícone sanduíche do componente Cabeçalho das telas públicas for selecionado.

    • reset-password-email: utilizada para a recuperação de senha do usuário a partir do e-mail cadastrado.

    • reset-password: após receber um e-mail com o código de autenticação OTP, o usuário poderá informar o código e a nova senha.

    • signup: permite que o usuário faça seu próprio cadastro.

  • login.view.html: por padrão é a primeira tela exibida para o usuário. Acesse a documentação Alterar página/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 com 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, recursos JavaScript e CSS usados nas telas da aplicação mobile.

• package-lock.json: contém os metadados da aplicação e as dependências NPM (Node Package Manager) exigidas pela aplicação.

• package.json: contém as versões exatas das dependências NPM (Node Package Manager) exigidas pela aplicação.

• README.md: arquivo de texto com descrição padrão dos recursos.