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).
A estrutura de arquivos durante o desenvolvimento do projeto é um pouco diferente da estrutura contida após compilar o projeto (arquivo |
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.
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, mesmo que a estrutura de arquivos seja exibida de forma simplificada, ao exportar seu projeto, a hierarquia de arquivos estará igual ao apresentado no Modo Avançado, pois trata-se da estrutura real. |
Figura 1 - Alterando entre as opções de Modo Avançado
O que muda quando alteramos o Modo Avançado:
Formulários/Mobile/Autenticado/home
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).
Arquivos ocultos dos sistema ou utilizados para a execução interna do projeto podem não ser exibidos. |
/src/main/mobileapp/www/views/logged/home.view.html
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).
Acesse a documentação Tour pelo Cronapp para mais informações sobre os botões de atalho lateral e do campo de busca. |
Figura 1.1 - Diferença ao visualizar os arquivos com a opção Modo Avançado desabilitada e habilitada
Ao criar ou mover arquivos, certifique-se que ele corresponde àquele diretório - por exemplo, na pasta 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 ao visualizar com o Modo Avançado desabilitado. |
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 low-code. 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.
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
Endereço: |
: contém os Diagramas de classe do projeto, expandindo o diagrama, é possível visualizar suas classes e atributos.
Fontes de Dados
Endereço: |
: lista as Fontes de dados personalizadas do projeto.
Mobile
Endereço: |
: contém os arquivos de fragmento mobile.
Web
Endereço: |
: 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
Endereço: |
: diretório que organiza as telas da aplicação mobile,
Web
Endereço: |
: diretório onde ficam organizadas as páginas web.
Skins
Endereço: |
: contém os arquivos de skins criados para o projeto,
Mobile
Endereço: |
: contém os arquivos de bloco de programação mobile (cliente).
Servidor
Endereço: |
: contém os arquivos de bloco de programação servidor (back-end).
Web
Endereço: |
: contém os arquivos de bloco de programação web (cliente).
Dashboards
Endereço: |
: armazena os Dashboards criados no projeto.
Relatórios
Endereço: |
: 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
Endereço: |
: contém os arquivos do projeto utilizados na aplicação mobile.
Servidor
Endereço: |
: contém os arquivos do projeto mantidos no back-end da aplicação.
Web
Endereço: |
: contém os arquivos do projeto utilizados na aplicação web.
Fluxo de Trabalho
Endereço: |
: contém os arquivos de fluxo de trabalho do Cronapp BPM.
Testes
Endereço: |
: pasta reservada para os blocos de programação de teste unitários do projeto servidor.
Documentação
Endereç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.
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.
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.
Figura 3 - Divisão da árvore de arquivos
Os diretórios e arquivos da raiz do projeto:
mobileapp
.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.test/java/blockly: diretório utilizado para armazenar as funções de testes unitários dos blocos Servidor.
Por padrão, a sequência de diretórios test/java/blockly (
|
skins: contém os arquivos da ferramenta de configuração dos skins de tema.
Por padrão, o diretório skins (
|
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).
Figura 3.1 - Arquivos do Servidor da Aplicação
Os subdiretórios e arquivos da pasta java (Endereço: /src/main/java/
):
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.
Current
: obtém o id da aplicação em execução.BeforeInsert
: trata a entidade Role
antes de inserir o registro no banco de dados.BeforeUpdate
: trata a entidade Role
antes de atualizar seu registro no banco de dados.Normalize
: trata o campo "normalizedName" da entidade Role
.signUp
: obtém os dados do novo usuário para realizar sua inscrição no sistema.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.BeforeInsert
: trata a entidade User
antes de inserir o registro no banco de dados.BeforeUpdate
: trata a entidade User
antes de atualizar seu registro no banco de dados.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.Normalize
: trata os campos "userName" e "email" da entidade User
.Diretório da aplicação mobile (Android e iOS).
Figura 3.2 - Estrutura do diretório Códigos Fonte Mobile
Os subdiretórios e arquivos da pasta mobile (Endereço: /src/main/mobileapp/
):
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.
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.
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/
):
components: diretório onde são mantidos os arquivos de fragmentos da aplicação mobile.
Por padrão, o diretório components (
|
skin: diretório com os arquivos *.css
gerados pela ferramenta Editor de Skins.
Por padrão, o diretório skin ( |
*.css
com as classes geradas pelo editor visual de estilos.changePassword
: executa as validações necessárias e altera a senha do usuário.closeModal
: fecha o modal que permite o usuário alterar sua senha na tela menu.view.html
.openModal
: abre o modal que permite o usuário alterar sua senha na tela menu.view.html
.change
: responsável por direcionar o usuário para a tela definida no campo "Rota Principal Mobile" nas Configurações do Projeto.login
: responsável por fazer as validações necessárias e direcionar os dados passados pelo usuário para o login no sistema.isValidSignup
: executado a partir da função signUp
, realiza as primeiras validações dos dados do novo usuário.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.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.package.json: contém as versões exatas das dependências NPM (Node Package Manager) exigidas pela aplicação.
As dependências NPM podem ser recompiladas a partir da opção "Iniciar Projeto" no menu de contexto deste arquivo ou via menu do sistema: Projeto > Recompilar > Recompilar NPM Mobile. |
Diretório servidor que contém arquivos estáticos e de configurações do servidor.
Figura 3.4 - Estrutura da pasta resources
Os subdiretórios e arquivos da pasta resources (Endereço: /src/main/resources/
):
assets: diretório responsável por manter os arquivos estáticos e de mídia do servidor.
Por padrão, o diretório assets (
|
bpm: contém os arquivos de fluxo de trabalho do Cronapp BPM.
Por padrão, o diretório bpm (
|
Diretório que armazena a estrutura da aplicação web, como as páginas, os blocos de programação que geram código fonte JavaScript, internacionalização e outros.
Figura 3.5 - Estrutura do diretório Códigos Fonte Web
components: diretório onde são mantidos os arquivos de fragmentos da aplicação web.
Por padrão, o diretório components (
|
skin: diretório com os arquivos *.css
gerados pela ferramenta Editor de Skins.
Por padrão, o diretório skin ( |
*.css
com as classes geradas pelo editor visual de estilos.openPreferences
: exibe o modal de preferências do usuário presente na página cookies.view.html
.checkCookieMarketing
: verifica se o usuário permitiu o uso da opção de publicidade nos cookies.setPreference
: oculta a barra de cookies, define as preferências do usuário e oculta o modal.checkCookieAnalytics
: verifica se o usuário permitiu o uso da opção de análise nos cookies.checkCookieEssencials
: verifica se a opção de cookies essenciais, que é obrigatório, está definido como verdadeiro.checkCookies
: verifica se o usuário já autorizou os cookies essenciais para não exibir mais o modal.login
: executa o procedimento necessário para o login de um usuário a partir da autenticação mútua.signup
: executa o procedimento necessário para o cadastro de um usuário a partir da autenticação mútua.resetPassword
: utilizado no processo de redefinição de senha por e-mail na aplicação web. Veja mais detalhes sobre essa configuração em Recuperar senha por e-mail.signUp
: obtém os dados do novo usuário, realiza as primeiras validações e direciona para as regras de negócio no servidor da aplicação.isValidSignup
: executado a partir da função signUp
, realiza as primeiras validações dos dados do novo usuário.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 diretórios e arquivos. O conteúdo exibido no menu de contexto pode variar com o tipo de projeto (servidor, mobile e web, microsserviço ou high-code) ou se a opção Modo Avançado está habilitada ou não.
Figura 4 - Menu de contexto da raiz do projeto
As opções abaixo são exibidas ao acessar o menu de contexto da raiz do projeto.
pom.xml
).package.json
).package.json
).Novo: cria ou realiza o upload de um novo arquivo ao diretório selecionado.
Fazer upload de um link: permite realizar o upload de um arquivo passando o seu endereço. No caso de arquivo compactado (*.zip), o conteúdo será descompactado no diretório selecionado.
Utilize essa opção para obter conteúdos gerados a partir da funcionalidade Compartilhar arquivos ou pastas. |
A depender do diretório selecionado, alguns arquivos podem não ser visualizados caso a opção Modo Avançado esteja desabilitado. Por exemplo, ao realizar o upload de um arquivo com extensão |
<Tipos de arquivos>: a lista com os tipos de arquivos pode variar com o status da opção Modo Avançado e o diretório selecionado.
Embora seja possível criar qualquer tipo de arquivo em qualquer diretório, é altamente recomendável manter cada tipo de arquivos nos diretórios planejados. Isso assegurará uma interação mais eficiente entre os arquivos do projeto e as ferramentas do Cronapp |
/Diagram/
) exibirá apenas a opção de arquivos de diagramas de dados (extensão *.umlcd
).nome.txt
).Aplicar Modelo: abre a tela de seleção do tipo de projeto e temas para retornar o projeto ao modelo inicial.
Essa opção irá sobrescrever diversos arquivos e poderá danificar o projeto. Se deseja mudar apenas o tema do projeto, utilize as ferramentas de Temas e Skins. |
O menu de contexto nos arquivos e diretórios possuem algumas diferenças em relação a raiz do projeto, veja abaixo os itens não apresentados na lista da raiz do projeto.
Figura 4.1 - Menu de contexto de um diretório e um arquivo
Menu dos diretórios:
Se o projeto estiver com o Modo Avançado desabilitado, alguns diretórios não exibirão o menu de contexto. Esses diretórios são virtuais e não existem no projeto real, são exibidos apenas para agrupar recursos com a mesma funcionalidade. |
Menu dos arquivos:
O arquivo pom.xml (Endereço: /pom.xml
) só é exibido quando a opção Modo Avançado estiver ativada e possui um item a mais em seu menu de contexto.
Figura 4.2 - Ações específicas para o Maven
Processar alvos: abre uma janela para executar comandos do Maven. O comando padrão força a resolução das dependências.
Essa opção também pode ser encontrado no menu do sistema: Projeto > Recompilar > Recompilar Maven. |
*.war
gerado.Os arquivos package.json das aplicações web e mobile só são exibidos quando a opção Modo Avançado estiver ativada. Seu menu de contexto possui a opção Iniciar Projeto para compilar as dependências NPM da aplicação selecionada.
Essa opção também pode ser encontrado no menu do sistema:
|
Os arquivos Javascript (*.js
) e Cascading Style Sheets (*.css
) das aplicação web e mobile só são acessíveis quando a opção Modo Avançado estiver ativada. Seus menus de contexto possui opções para adicionar ou remover a referência do arquivo selecionado no arquivo index.html das aplicações:
/src/main/mobileapp/www/index.html
/src/main/webapp/index.html
(destaque 1 da figura 4.3)Figura 4.3 - Ações para importar e remover dependências
<script>
dentro do <body>
.<link rel="stylesheet">
dentro do <head>
.Essa opção do menu de contexto permite gerar recursos a partir das classes do Diagrama de Dados (destaque 1 da figura 4.4) e Fonte de dados (destaque 2) localizados na árvore de recursos ou arquivos.
Diagrama de dados - Localização: Diagrama de dados/<Namespace>/
Endereço: |
.
Fonte de dados - Localização: Fonte de Dados/
Endereço: |
.
Figura 4.4 - Opção "Ação" disponível nas classes do Diagrama e Fonte de dados
Novo relatório: abre uma janela onde é possível selecionar os campos (atributos) e definir um nome para o relatório. Ao final, um relatório é gerando no diretório Relatório (Localização: Relatório/
Endereço: |
).
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 for necessário saber o endereço real de arquivos e diretórios.
A janela de propriedades do arquivo será acessível independentemente da configuração do Modo Avançado (figura 5).
Figura 5 - Janela de propriedade dos arquivos
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.
Figura 5.1 - Janela de propriedade dos diretórios
Nesta página
Saiba mais