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

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çãoFormulá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çosrc/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


Ao criar ou mover arquivos, certifique-se que ele corresponde àquele diretório - por exemplo, na pasta Blockly só deve conter os arquivos pertencentes aos blocos de programação, assim como os arquivos do diagrama de dados devem estar na pasta diagram e assim em diante.

Além de melhorar a organização do seu projeto, diversas funcionalidades esperam encontrar tipos específicos de arquivos em sua pasta correspondente, caso isso não ocorra, esses arquivos podem não ser mapeados.

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

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

  • Blocos de programaçãodiretó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).

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

  • Recursos  diretório virtual para agrupar arquivos estáticos (imagens, pdf, texto e outros) para os projetos mobile, servidor e 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 do projeto servidor.

  • Documentação  : 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 Categoriaexibe alguns diretórios e arquivos com nomes mais amigáveis. 
  2. Visualização de Pastasexibe 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):

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


  • No labels