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 através do framework Ionic). Na Figura 1.1 temos uma função de bloco de programação que imprime no terminal o texto "Hello world!" e o respectivo código que é gerado em Java.



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.

Criando arquivo do tipo Blockly

Os arquivos que trabalham com o bloco de programação possua a extensão *.blockly, ao solicitar um novo arquivo (Menu de contexto > Novo > Bloco de Programação) será gerando arquivos do tipo .blockly, .map e .java, quando for servidor ou .blockly e .blockly.js, quando mobile ou cliente. (Figura 1.2)


Figura 1.2 - Arquivos criados para cada tipo de bloco de programação

O bloco de programação lhe permite criar vários métodos ou funções e tudo que as respectivas linguagens permitem. 

Janela do Blockly

Arquivos do tipo .blockly, abrem a janela de desenvolvimento por blocos de programação. Na Figura 1.3 descrevemos suas partes.


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


  1. Índice de função: alterna entre os métodos ou funções desse arquivo bloco de programação;
  2. Configurações do arquivo blockly: define algumas configurações para todas as funções desse arquivo;
  3. Categorias: lista das categorias de blocos de programação;
  4. Seleção de blocos: exibe todos os blocos de uma categoria;
  5. Função: função (vazia) que espera receber os blocos;
  6. 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);
  7. Exibe função: exibe a função em modo visual ou o código fonte gerado.


Observação:

O Cronapp permite que você crie seus próprios blocos de programação (plugin) para usar em seus projetos ou compartilhar com outros desenvolvedores.

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 símbolo uma janela é aberta e seu conteúdo varia a depender do bloco de programação;
  2. Comentário: adiciona comentário logo acima do método ou função;
  3. Nome: altera o nome da função de bloco de programação. É possível adicionar nomes com espaços ou acentos;
  4. Parâmetros: lista de parâmetros dessa função de bloco de programaçã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.

Como iremos criar um bloco do lado servidor, clique no atalho Ir para o bloco do tipo servidor (1 da Figura 2.1) e logo em seguida clique com o botão de contexto (direito) do mouse em "Bloco de programação" e selecione Novo > Bloco de Programação (2 da Figura 2.1).


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


Uma janela irá abrir para que seja selecionado o tipo de bloco de programação, então selecione o tipo low-code e clique em Avançar (Figura 2.2).


Figura 2.2 - Selecionando modelo de bloco

O modelo high-code somente aparece quando o perfil do usuário na IDE é modo avançado.


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 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. Não é possível existir dois usuário 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 (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 (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.7).


Figura 2.7 - 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.8).


Função 2.8 - 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