Ao criar um projeto Todo novo projeto "low-code" criado no Cronapp com a opção Copiar do Modelo, será criado um projeto com as principais funções que o Cronapp disponibiliza, como: sistema de autenticação, cadastro de usuário, possibilidade de auditoria em log, restrição de acesso, telas mobile e/ou páginas web e outros. Tudo isso proporciona "Baseado em Modelo existente" possui diversos recursos já implementados, esses recursos proporcionam ao projeto uma base robusta para , que deve ser expandido expandida de acordo com as necessidades do desenvolvedorprojeto a ser desenvolvido.  Âncoraautenticaçãoautenticação

Página de Login

A aplicação do projeto modelo do Cronapp inicia solicitando autenticação do usuário na página de login. Para realizar a autenticação tanto na página web quanto na tela mobile utilize o usuário e a senha abaixo, você logará com o perfil de Administrador criado para permitir o primeiro acesso. Outros usuários serão cadastrados pelo Administrador na página de Usuários ou pelo desenvolvedor dentro do projeto.

Image Removed

Figura 1 - Página de Login

• Usuário: admin;
• Senha: admin.

Formulários (views)

A view é a camada na qual o usuário interage com o sistema, podendo ser páginas HTML ou telas em aplicativos mobile. Nesse tópico, vamos dividir os projetos em apenas web e mobile, pois o projeto Mobile e Web contém todos os recursos do projeto Apenas Web acrescido das funcionalidades para telas mobile.

Web

Após logar conforme o tópico Login, é possível visualizar o menu ADMIN (visível apenas para usuários com o perfil Administrador) que dá acesso as páginas Usuários, Log de Auditoria e Funções. Nesse menu encontramos as seguintes opções: 

• Página inicial: Retornar para a página home;
• Admin: Acessar as páginas Usuários, Log de auditoria e Funções;
• Perfil: Acessar a opção para Mudar Senha do usuário atual, assim como a opção de Sair da sessão.

Essa documentação irá apresentar como executar um projeto recém-criado e as páginas das aplicações web e mobile geradas a partir do projeto modelo, para detalhes sobre a estrutura de arquivos do projeto, acesse a documentação Estrutura de arquivos.

Executar o projeto

Logo após criar o projeto, já é possível executá-lo para acessar as aplicações web e mobile contidas no projeto modelo. Assim, clique no botão Play (debug) (destaque 1 da figura 1) e aguarde a inicialização do projeto.

Image Added

Figura 1 - Executando o projeto

Após alguns segundos, um modal exibirá algumas formas de abrir as aplicações.

Image Added

Figura 1.1 - Acesso as aplicações web ou mobile do projeto

1. Navegador [web]: abre a aplicação web em outra aba do navegador;
2. Navegador [mobile]: abre a aplicação mobile em outra aba do navegador;
3. Simulador: abre a aplicação mobile utilizando o simulador mobile do Cronapp.

Aplicação web

Por padrão, a primeira página das aplicações web é sempre a tela de login. Porém, é possível alterar isso através do campo Rota Principal Web nas Configurações do projeto. 

Página de login

O modelo padrão dessa página, com o retângulo branco central contendo a logo, campos, botão e links (Figura 2), pode ser facilmente alterado ao criar um novo formulário web, veja mais detalhes sobre modelos existentes no tópico "Acesso ao editor" em Editor de views.

Image Added

Figura 2 - Página de login da aplicação web

• Campos Usuário e Senha: ao iniciar uma aplicação pela primeira vez, um usuário administrador do sistema será automaticamente incluído no banco de dados temporário, dessa forma, utilize os dados abaixo para logar na aplicação:
  • Usuário:admin
  • Senha: admin
• Redefinir Senha: permite o usuário redefinir sua senha, veja mais detalhes na documentação.
• Cadastre-se: abre a página para permitir o usuário fazer seu próprio cadastro no sistema.
• Cookies: permite o usuário definir as preferências de Cookies, veja mais detalhes na documentação.

Página cadastre-se

A página signup (Localização: Formulários/Web/Público/

) é pública e possui o mínimo de campos necessários para o usuário se cadastrar na aplicação. A opção de auto cadastro pode ser desabilitada no campo "Permitir que os Usuários se Cadastrem" nas Configurações do projeto.

Image Added

Figura 2.1 - Página de auto cadastro dos usuários

Página home

Por padrão, após logar na aplicação o usuário é direcionado para a página home (Localização: Formulários/Web/Autenticado/

) e dela será possível navegar dentre as demais páginas. 

Image Added

Figura 2.2 - Menus da página home da aplicação web

Essa página possui uma barra de navegação visível em todas as páginas e possui com alguns recursos:

1. Página inicial: retorna para a página home.
2. Admin: visível apenas por usuários com o perfil de Administrador do sistema.
   • Usuários: abre a página dos usuários cadastrados no sistema.
   • Log de auditoria: exibe o log de todos os recursos habilitados para isso.
   • Grupos: abre a página com os grupos das permissões de segurança do sistema.
3. Perfil: visível por todos os usuários logado no sistema
   • Mudar Senha: abre o modal para substituir a senha do usuário logado.
   • Sair: deslogar da aplicação e retorna a página de login.

Página usuário

Essa página exibe uma Grade e permite manter os usuários do sistema, é acessível apenas por usuários com perfil administrador.

Image Added

Figura 2.3 - Lista de usuários do sistema

O sistema de segurança padrão do Cronapp têm suporte a projetos com Multi aplicações, dessa forma, ao cadastrar um usuário, é necessário vincular o usuário a uma aplicação, mesmo que o projeto só possua uma única aplicação.

Image Added

Figura 2.4 - Inserindo um novo usuário e vinculando uma aplicação

Página Log de auditoria

A página mostra o histórico de eventos ocorridos por entidades, blocos de programação e fonte de dados, com o objetivo de facilitar a análise de problemas relacionados a segurança ou erros do sistema. Cada registro pode exibir um modal com os detalhes do log. Mais informações, acesse a documentação Log de Auditoria.

Image Added

Figura 2.5 - Detalhes de um registro do log de auditoria

Página Grupos

Essa página permite criar Grupos para associar regras (permissionáveis) aos usuários do sistema. Por padrão, novos projetos já possui o grupo Administrators.

Image Added

Figura 2.6 - Criando um novo Grupo

Ao inserir ou editor um grupo, é possível alterar os seguintes campos.

• Nome: nome do grupo.
• Permissionável: permite adicionar um ou mais permissionáveis

Página de Usuários

A página permite criar, consultar, editar e excluir usuários. Ela contém um título, um campo de busca e uma grade apenas com o usuário Administrador, o qual possui perfil de Administrador e pode ser editado ou excluído, caso deseje.

Image Removed

Figura 2 - Página de Usuários

1. Botão para Adicionar um novo usuário.
2. Botão para Editar as informações de um usuário existente.
3. Botão para Excluir um usuário existente.

Campo Aplicações

Ao adicionar ou editar um usuário, é possível visualizar o campo Aplicações. Por meio dele o mesmo usuário é cadastrado em diferentes aplicações do mesmo projeto (Multi aplicações). Caso seu projeto possua apenas uma aplicação, é possível definir automaticamente a única aplicação existente como o valor inicial do campo. Para isso, acesse o tópico Valor inicial do atributo da documentação Fontes de dados para adaptar o exemplo.

Image Removed

Figura 2.1 - Campo Aplicações

Página de Log de Auditoria

A página mostra o histórico dos logs de auditoria, ou seja, as informações de eventos ocorridos nas entidades, gerando um histórico das alterações e facilitando a análise de problemas como segurança ou erros do sistema. Essa página está disponível apenas no navegador web.

Image Removed

Figura 3 - Página Log de Auditoria

A página não vem com informações. Para gerar log, basta habilitar a caixa de seleção Auditoria de log nas classes do diagrama de dados, bloco de programação ou fonte de dados, conforme com a documentação.

Página de Funções

A página permite criar, consultar, editar e excluir funções para restringir o acesso a determinado conteúdo por meio da funcionalidade Permissão de Segurança. Por padrão, se encontra cadastrada apenas a função Administrators. Ao clicar no botão Adicionar, aparecerá o formulário para criação de novas Funções com os campos abaixo.

Image Removed

Figura 4 - Página de Funções

• Nome: nome da nova função;
Permissionável: permite adicionar um ou mais permissionáveis, sendo eles Administrators, Authenticated e Public
• . Cada permissionável possui um conjunto de permissões aos métodos de requisição HTTP de uma página ou de todas as páginas contidas em um diretório
;
• .
  • Lista inicial de permissionáveis: Administrators, Authenticated e Public.
• Usuário:
permite vincular usuários existentes na aplicação. Um usuário pode estar diretamente vinculado a um ou mais permissionáveis, caso isso ocorra ele terá o acesso do permissionável de maior abrangência.

Mobile

Após logar conforme o tópico Login, é possível visualizar a tela inicial contendo o título da página e dois ícones do mesmo menu nas laterais. Nesse menu encontramos as seguintes opções: 

• vincula usuários um ou mais usuários do sistema.

Aplicação Mobile

Por padrão, a primeira tela das aplicações mobile é sempre o login. Porém, é possível alterar isso através do campo Rota Principal Mobile nas Configurações do projeto. 

Tela de login

A tela O modelo padrão dessa tela pode ser personalizada  Editor de views.

Image Added

Figura 3 - Tela de login da aplicação mobile

• Campos Usuário e Senha: ao iniciar uma aplicação pela primeira vez, um usuário administrador do sistema será automaticamente incluído no banco de dados temporário, dessa forma, utilize os dados abaixo para logar na aplicação:
  • Usuário: admin
  • Senha: admin
• Redefinir Senha: permite o usuário redefinir sua senha, veja mais detalhes na documentação.
• Cadastre-se: abre a página para permitir o usuário fazer seu próprio cadastro no sistema.

Tela cadastre-se

A tela de signup (Localização: Formulários/Mobile/Público/

) é pública e possui o mínimo de campos necessários para o usuário se cadastrar na aplicação. A opção de auto cadastro pode ser desabilitada no campo "Permitir que os Usuários se Cadastrem" nas Configurações do projeto.

Image Added

Figura 3.1 - Tela de auto cadastro dos usuários

Tela home

Após logar na aplicação, o usuário é direcionado para a tela home (Localização: Formulários/Mobile/Autenticado/

), por padrão essa página vem vazia e espera ser personalizada pelo desenvolvedor.

Image Added

Figura 3.2 - Tela home da aplicação mobile

Menu de navegação

Qualquer tela criada a partir do modelo Formulário Mobile com Cabeçalho (mais detalhes no tópico "Acesso ao editor" em Editor de views) possui um cabeçalho com um título e dois botões em sua extremidade que abrem o menu de navegação da aplicação. Esse menu é editável através da tela menu (Localização: Formulários/Mobile/Autenticado/

).

Image Added

Figura 3.3 - Menu lateral da aplicação mobile

1. Informações do usuário: nome e login.

• Página inicial: retornar para a tela home.
• Usuários: acessar a tela usuários, visível apenas por usuários com o perfil de Administrador do sistema.
• Mudar senha: acessar o modal
• Página inicial: Retornar para a tela home;
• Usuários: Acessar a tela Usuários;
• Mudar senha: Acessar a tela para alterar a senha do usuário atual;.
• Sair:  Sair da sessão.

Image Removed

Figura 5 - Menu mobile

Tela de Usuários

A tela permite consultar, editar e excluir usuários. Ela contém uma lista com apenas um usuário cadastrado e é possível alterá-lo arrastando o componente para o lado esquerdo.

Image Removed

Figura 6 - Tela de usuários

• deslogar da aplicação e retorna a página de login.

Tela usuário

Exibe uma Lista Avançada com os usuários do sistema e é acessível apenas por usuários com perfil administrador. Diferentemente da página web, essa tela não permite, de forma nativa, cadastrar novos usuários, apenas editar ou excluir os usuários listados.

Image Added

Figura 3.4 - Lista de usuários do sistema