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.

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 esquerda vemos as categorias com seus diversos blocos e
na direita o bloco "imprime", embaixo o que foi gerado de código Java no método "MetodoJava"

 

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 um arquivo do tipo .blockly e outro .java, se for do lado servidor ou .blockly.js e .blockly, quando mobile ou cliente. (Figura 1.2)

Figura 1.2 - Blocos de programação gerado em Back, Mobile e Front-End


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;
  2. Configurações: define tipos de acessos, cria vínculo com algum formulário, gerar conteúdo Rest e bloquear o acesso a esse método baseado no perfil do usuário.
  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 textual. 

 

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.

a função criado, porém sem nenhum conteúdo, ou seja, um método vazio. Alguns detalhes da sua estrutura: 

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 um 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 da esquerda para direita e de cima para baixo. Ou seja, conclui a execução de uma linha e segue para a próxima. (Figura 1.5)


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


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.

 


Passos

Por padrão, a pasta Bloco de Programação (Visualização por Categoria) ou Blockly (Visualização por pasta) não existem ao criar um projeto. Porém, basta clicar no seu respectivo atalho na árvore de arquivos para criá-la.

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. Usaremos essas duas funções nos próximos passos.

Como iremos criar um bloco do lado servidor, clique no atalho Ir para o bloco do tipo servidor (Figura 2.1) e logo em seguida clique com o botão de contexto (direito) do mouse no diretório que acabou de ser gerado e selecione Menu de contexto > Novo > Bloco de Programação (Figura 2.2).

Figura 2.1 - Para criar ou ser direcionado para a pasta onde
estão as funções do lado servidor, basta clicar no atalho


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


Uma janela irá abrir para que seja informado o nome do arquivo e do primeiro método ou função. Nesse exemplo, insira no nome do arquivo FuncoesUsuario e no nome da função LoginDoUsuario (Figura 2.3).

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

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 (Figura 2.4) e encaixaremos no retorno da função, como vemos na Figura 2.5.

Figura 2.4 - Blocos necessários para obter os dados do usuário


Figura 2.5 - 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 o bloco lista para obter o primeiro e único item da lista. Não é possível existir dois usuário com o mesmo login, pois o campo login da classe User no diagrama de dados está marcado como Único.

Para criar a próxima função dentro desse arquivo, basta arrastar o bloco Para (com retorno) na categoria Funções e posteriormente substituir o termo Faça algo por IdDoUsuarioLogado (Figura 2.6).

Dicas:

  • Lembramos que o Cronapp aceita nomes de blocos com espaços e acentos, porém estamos seguindo o padrão da programação, por hábito.
  • Para alterar entre as funções desse arquivo de bloco de programação, basta selecionar a função na caixa de seleção superior (item 1 da Figura 1.3).

 

Figura 2.6 - Criando nova função

 

Na categoria Variáveis, clique em Criar variável... para abrir uma janela, insira lista no campo Nome da variável e clique em Ok (Figura 2.7). 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 - Criando nova variável dinâmica

 

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

 

Antes de finalizar essa função, precisamos criar a consulta no bloco Abrir consulta, faremos esse procedimento na próxima etapa usando o Assistente de consulta visual JPQL.

 

  • No labels