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

Neste passo veremos as formas de desenvolver a lógica de programação do seu sistema no Cronapp.

Essa página é parte de um tutorial, veja mais detalhes sobre o conteúdo abordado aqui em Bloco de programação.

Visão Geral

Os blocos de programação são recursos visuais com foco em desenvolvedores menos experientes ou que desejam maior produtividade e agilidade na criação de seus projetos. Essa funcionalidade só está disponível para os projetos do tipo low-code, onde o usuário não necessita tratar diretamente com a codificação (em forma de texto) da lógica de programação (Java e JavaScript). Para isso, usamos o blockly, um conceito de desenvolvimento visual lançado em 2012 pelo Google, onde o usuário arrasta blocos que representam trechos de códigos e cria a sua lógica de programação como em um quebra-cabeça.

No Cronapp, esse recurso pode ser usado no código fonte servidor (gerando código Java), código fonte cliente (gerando JavaScript) e código fonte mobile (gerando JavaScript).

Na Figura 1.1 temos uma função de bloco de programação sendo visualizada com o Modo Avançado (destaque 1 da figura 1.1), essa função apenas imprime no terminal o texto "Hello world!". A parte de cima da figura mostra como o bloco foi montado e logo abaixo, após selecionar a subaba Código, é exibido o código Java gerado a partir do bloco.



Figura 1.1 - Na parte superior vemos uma função com o bloco "imprime", embaixo o que foi gerado de código Java 


Saiba mais

Mesmo que o sistema esteja configurado para trabalhar em low-code, nada impede do desenvolvedor implementar outras partes em high-code.

Lembramos que o blockly (parte visual) tem o objetivo de gerar código Java ou JavaScript, se posteriormente a classe tiver seu código editado manualmente, não será mais possível continuar a programação via blockly.

Arquivos de programação

Alguns blocos de programação são gerados automaticamente quando um projeto é criado no Cronapp. Esses blocos tratam questões básicas do sistema, como gerenciamento e controle de acesso dos usuários. 

Arquivos com ícones verdes são blocos clientes (mobile ou web), já os azuis são blocos do tipo servidor. Cada ambiente do projeto (servidor, mobile ou web) possui um diretório próprio para arquivar seus blocos. Esses diretórios suportam subdiretórios, permitindo personalizar a organização dos arquivos de blocos de programação. 

Quando estamos com a opção Modo Avançado habilitada (destaque 1 da figura 1.1), notamos que para cada arquivo de bloco existem mais um ou dois arquivos com o mesmo nome. O primeiro é o código fonte, gerado a partir do bloco de programação, e o segundo é um arquivo que permite o debug visual nos blocos de programação. Para mais informações sobre esses arquivos, acesse a documentação de referência: Bloco de programação

Abaixo vemos a localização (Modo Avançado desabilitado) e o endereço (i) (Modo Avançado habilitado) dos blocos de programação por tipo de projeto:

  • Cliente mobile: Bloco de programação/Mobile  

  • ServidorBloco de programação/Servidor 

  • Cliente webBloco de programação/Web 


Figura 1.2 - Arquivos de bloco de programação sendo exibidos com o botão Modo Avançado desativado

Janela do Blockly

A figura 1.3 mostra as áreas do editor do bloco de programação.


Figura 1.3 - Detalhes da janela de edição do Bloco de programação


  1. Modo Avançado: desabilite essa opção para ocultar as áreas de desenvolvimento high-code.
  2. Nome da função: alterna entre as funções desse arquivo de bloco de programação.
  3. Configurações do arquivo blockly: abre a janela de configurações para todas as funções desse arquivo.
  4. Categorias: lista das categorias de blocos de programação.
  5. Seleção de blocos: exibe todos os blocos de uma categoria.
  6. Função: bloco função.
  7. Ações (de cima para baixo): centraliza a função, zoom in, zoom out e exclui um bloco de programação ao arrastá-lo para cima da lixeira (equivalente a apertar o botão delete);
  8. Exibe função: ao abrir o editor de bloco com a opção Modo Avançado habilitada, é possível alterar para a subaba Código e visualizar o código fonte gerado pela função em desenvolvimento.


O Cronapp permite que você crie seus próprios blocos de programação para adicionar na lista lateral de blocos (plugin).

Estrutura dos Blocos

Na Figura 1.4 vemos um pequeno exemplo do método (AddPronomeTratamento) que recebe o nome do usuário por parâmetro, concatena o termo "Sr.(a) " na frente do nome, adicionar o conteúdo na variável var, imprime o conteúdo no terminal e depois passa o conteúdo da variável var no retorno da função.


Figura 1.4 - Bloco "para" (Função)


  1. Configurações: personaliza ou configura um bloco. Ao clicar nesse ícone, uma janela é aberta com opções de configurações próprias do bloco selecionado. No exemplo da figura 1.4, o ícone de configurações do bloco função permite definir os parâmetros passados para a função. 
  2. Comentário: permite adicionar algum comentário sobre a função atual.
  3. Nome: altera o nome da função de bloco de programação.
  4. Parâmetros: lista de parâmetros dessa função.
  5. Saliência abaixo ou interna em blocos: equivale a uma nova linha em uma programação textual.
  6. Abertura lateral: recebe parâmetros, retorno de uma função ou atribuição através do encaixe de um bloco;
    Encaixe lateral:  passa parâmetros, retorno para uma função ou uma atribuição através do encaixe de um bloco;
  7. retorna: área do retorno do bloco de programação.

Ordem de execução

Da mesma forma que ocorre com a programação via código, nas funções de bloco de programação a execução ocorre chamando os blocos em uma pilha de execução da esquerda para direita, retorna a pilha e em seguida passa para a próxima linha (Figura 1.5).

Atenção

A Figura 1.5 é só um exemplo de função, não possui nenhuma relação com o projeto que estamos desenvolvendo nesse tutorial.



Figura 1.5 - Exemplo de função e como ocorre sua execução



Passos

Vamos criar duas funções simples que usaremos nos próximos passos. A primeira função retornará o login do usuário logado e a segunda, o ID do usuário logado.

Para criarmos o bloco de programação, acesse o menu de contexto (botão direto do mouse) do diretório Servidor, dentro de Bloco de programação, e selecione Novo > Bloco de Programação (Figura 2.1).


Figura 2.1 - Criando bloco de programação do lado servidor


Uma janela será aberta para selecionar o arquivo de programação. Como estamos desenvolvendo com a opção Modo Avançado desabilitado, só aparecerá a opção Bloco de Programação Vazio (Low-Code), selecione-a e clique em Avançar (Figura 2.2).


Figura 2.2 - Selecionando modelo de bloco


Na próxima janela, informe "FuncoesUsuario" no campo Nome do Arquivo e "LoginDoUsuario" no campo Nome da Função (Figura 2.3).


Figura 2.3 - Criando a primeira função de bloco de programação


Lembramos que o Cronapp aceita nomes de blocos com espaços e acentos, porém estamos seguindo o padrão da programação e a recomendação do manual de boas práticas no tópico Padrões para nomes.

Adicionando conteúdo à função

Essa primeira função será bem simples, usaremos o bloco de programação Obter login do usuário logado, que se encontra na categoria Util (1 da Figura 2.4), e encaixaremos no retorno da função (2 da Figura 2.4).


Figura 2.4 - Função que obtém o login do usuário logado no sistema

Segunda função

Na próxima função usaremos um bloco de banco de dados para fazer uma consulta e retornar o ID do usuário, filtrando por seu login. O retorno desse bloco será uma lista, por isso, vamos usar um bloco de lista para obter o primeiro e único item dessa lista, já que não é possível existir dois usuários com o mesmo login, pois o campo normalizedUserName da classe User só permite valores únicos.

Para criar a próxima função dentro desse arquivo, basta arrastar o bloco Para (com retorno) na categoria Funções para a área de edição (Figura 2.5).


Figura 2.5 - Criando nova função


Primeiramente, substitua no bloco Função Para o termo "faça algo" por "IdDoUsuarioLogado" (destaque 1 da figura 2.6). Na categoria Variáveis, clique em Criar variável... para abrir uma janela (destaque 2), insira "lista" no campo Nome da variável e clique em Ok (Figura 2.6). 


Figura 2.6 - Criando variável dinâmica


Volte novamente a categoria Variáveis e arraste para a área de edição o bloco definir lista para que acabamos de criar.


Figura 2.7 - Arrastando a variável que criamos na figura 2.6


Arraste o bloco Abrir Consulta (categoria Banco de Dados) e encaixe na entrada da variável lista.

Na categoria Lista, arraste o bloco Na lista ... Obter nº e encaixe no retorno da função, após isso, clique na caixa de seleção e substitua por primeiro (Figura 2.8).


Figura 2.8 - Configurando o bloco de lista para obter o primeiro registro


Arraste mais 2 blocos: Normalizar, que se encontra na categoria Texto e LoginDoUsuario, nossa primeira função que está na categoria Funções. Encaixe o bloco LoginDoUsuario no parâmetro Texto não normalizado do bloco Normalizar (destaque 1 da Figura 2.9).


Função 2.9 - Blocos Normalizar e a chamada da primeira função que criamos


Antes de finalizar essa função, precisamos criar a consulta no bloco Abrir consulta e explicar porque estamos usando o bloco Normalizar, mas faremos isso na próxima etapa.


  • No labels