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

Atualização para a versão 2.6

A partir da versão 2.6, os blocos de programação clientes (web e mobile) funcionarão de forma assíncrona. Assim, caso você tenha criado um projeto em uma versão anterior e migrado para a nova versão, será necessário atualizar os blocos de programação clientes. Não é necessário realizar nenhuma ação para projetos criados após essa versão.

Acesse o tópico Blocos assíncronos para mais detalhes.


No Cronapp, os blocos de programação são estruturas visuais que permitem arrastar e acoplar de modo a gerar uma estrutura lógica. Existem centenas de blocos, desde os mais simples, como SE (if) ou Imprime (print ou console.log) até blocos complexos, onde o desenvolvedor só precisa passar os parâmetros e o código embutido no bloco se encarrega de fazer todo o processo, exemplo do Enviar e-mail.

Os blocos são gerados a partir do Blockly, tecnologia criada em 2012 pelo Google e tinha como objetivo inicial facilitar o estudo de programação por crianças. O Cronapp incorporou o blockly de modo a reduzir a curva de aprendizado ao mesmo tempo que consegue aumentar a produtividade de usuários experientes. Dessa forma, o desenvolvedor praticamente não precisa se preocupar com a sintaxe das linguagens e foca no que é realmente importante: a lógica e regra de negócio do seu projeto.

Esse recurso está disponível tanto no código fonte servidor (gerando código Java) quanto no código fonte web e mobile (gerando JavaScript). Na Figura 1.1 temos uma função de bloco de programação que imprime no terminal o texto "Hello world!" e seu respectivo código gerado em Java.



Figura 1.1 - Bloco servidor "imprime" e o que foi gerado de código Java


De modo resumido, citamos as principais vantagens em utilizar os blocos de programação no Cronapp:

  • Em geral, as funções se tornam mais legíveis;
  • o processo de codificação é parecido tanto para back-end quanto front-end;
  • menor preocupação com a sintaxe das linguagens;
  • você pode criar e compartilhar, caso queira, seus próprios blocos de programação;
  • é possível desenvolver parte do projeto usando o blockly e a outra parte codificando de forma convencional; 
  • visualize o código gerado em tempo real;
  • altere o código-fonte gerado.

Arquivos de desenvolvimento

Ao utilizar o editor visual dos blocos de programação serão gerados outros arquivos além do código fonte. Na prática, durante o desenvolvimento, só nos preocupamos com os arquivos de extensão *.blockly e *.blockly.js, pois são eles que abrem o editor visual. Após editar e salvar os demais arquivos (incluindo o código fonte), eles serão criados ou atualizados (Figura 2.1).


Figura 2.1 - Arquivos gerados a partir do editor blockly


  • Arquivos Servidor
    • .blockly: abre o editor de bloco servidor, é responsável por armazenar os blocos e gerar o código fonte Java. Ícones de bloco servidor são exibidos sempre em azul;
    • .java: arquivo fonte Java gerado a partir do arquivo *.blockly;
    • .map: arquivo JSON gerado a partir do editor, é responsável por fazer o controle dos blocos utilizados e permitir o debug visual nos blocos servidor. 
  • Arquivos Mobile
    • .blockly.js: abre o editor de bloco mobile, é responsável por armazenar os blocos e gerar o código fonte JavaScript. Ícones de bloco mobile são exibidos sempre em verde;
    • .js: arquivo fonte JavaScript gerado a partir do arquivo *.blockly.js.
  • Arquivos Web
    • .blockly.js: abre o editor de bloco web, é responsável por armazenar os blocos e gerar o código fonte JavaScript. Ícones de bloco web são exibidos sempre em verde;
    • .js: arquivo fonte JavaScript gerado a partir do arquivo *.blockly.js.


É possível alterar diretamente o código fonte Java ou JavaScript gerado pelo editor blockly, porém essas alterações não serão refletidas nos blocos de programação. Assim, se voltar a utilizar o editor blockly, as alterações feitas diretamente no código fonte serão perdidas.


Para editar o código de forma High-Code é necessário acessar o arquivo .java ou .js gerado a partir do .blockly ou .blockly.js.


Figura 2.2 - Código Java gerado a partir do Blockly servidor


Figura 2.3 - Código JavaScript gerado a partir do Blockly mobile ou web

Criar arquivo Blockly

Os projetos Cronapp possuem diretórios específicos para armazenar seus blocos de programação, recomendamos criar subdiretórios de forma a deixar organizado seus arquivos fonte. Esses diretórios podem ser facilmente acessados a partir dos atalhos na árvore de arquivos 

Dependendo do tipo de visualização selecionado (destaque 4 da Figura 3.1), parte do conteúdo da árvore de arquivos podem exibir seus nomes no formato original ou amigável.


Figura 3.1 - Acesse o menu de contexto para criar blocos de programação


  1. Atalho bloco servidor: clique para ser direcionado para a pasta do bloco de programação servidor.
  2. Atalho bloco mobile: clique para ser direcionado para a pasta do bloco de programação mobile.
  3. Atalho bloco web: clique para ser direcionado para a pasta do bloco de programação web.
  4. Modo de visualização: alterna entre a visualização por pasta, que exibe os nomes originais dos arquivos, e visualização por categoria, que exibe os nomes dos arquivos de forma amigável.
  5. Bloco de programação: diretório dos blocos de programação servidor.

Clique com o botão de contexto sobre o diretório do Bloco de programação e selecione as opções Novo > Bloco de programação para abrir a janela de criação (Figura 3.2).

Na primeira janela (Modelo) é possível criar o arquivo blockly ou java, selecione a opção Bloco de programação Vazio (Low-Code) e clique em Avançar. na próxima janela (Informe/selecione os campos) informe o nome do blockly (e demais arquivos gerados), o nome da função (método) e encerre clicando em Finalizar (Figura 3.2).


Figura 3.2 - Janelas de criação dos arquivos de programação


No exemplo acima estamos mostrando como criar um bloco (arquivo) do tipo servidor. Os passos para criar arquivos de blocos clientes mobile ou web são os mesmos, o que muda é o local onde será criado o arquivo, como apontado na Figura 2.1.

Janela de edição

Após finalizar o passo da Figura 3.2 ou dar um duplo clique nos arquivos com extensão .blockly ou .blockly.js, será aberta a janela de edição dos blocos de programação. Na Figura 4.1 descrevemos suas partes.


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


  1. Índice de função: alterna entre os métodos ou funções desse arquivo blockly;
  2. Configurações do arquivo blockly: define algumas configurações para todas as funções desse arquivo, veja mais detalhes abaixo.
  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. 

Funções

Cada arquivo blockly pode conter diversas funções. Para isso, acesse o menu de categorias lateral Funções e arraste para o centro da janela uma das duas opções do bloco Para (Figura 4.2): sem retorno (primeira opção) ou com retorno (segunda opção). 

Perceba, no destaque 1 da figura 4.2, que no menu lateral Funções é possível encontrar e arrastar os blocos das funções criadas nesse arquivo. Para alternar entre as funções do bloco, use a caixa de seleção no topo da janela (destaque 2).


Figura 4.2 - Criando outra função dentro do bloco de programação

Estrutura das funções

Na Figura 4.3 vemos um pequeno exemplo de função (AddPronomeTratamento) que possui o seguinte algoritmo:

  • Recebe o nome do usuário por parâmetro (nomeUsuario),
  • Concatena em uma variável de nome var o termo "Sr.(a) " mais o nome do usuário recebido via parâmetro,
  • Imprime no terminal o valor da variável var,
  • O conteúdo da variável var alimenta o retorno da função.


Figura 4.3 - Exemplo de função


  1. Parâmetros: abre uma janela para adicionar ou remover parâmetros de entrada da função;
  2. Comentário: adiciona comentário para descrever a função;
  3. Nome: altera o nome da função de bloco de programação. É possível, porém não recomendamos, inserir nomes com espaços ou acentos. Acesse o tópico "Padrões para nomes" do nosso Manual de Boas Práticas;
  4. Parâmetros: lista de parâmetros dessa função de bloco de programação;
  5. Saliência abaixo ou interna em um bloco: 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 dessa função do bloco de programação.

Parâmetros

O ícone engrenagem (destaque 1 da figura 4.3) nos blocos de funções (Para) abre uma janela onde é possível arrastar para adicionar ou remover os parâmetros de entrada. Após adicionar os parâmetros à função, você os encontrará na categoria Variáveis do menu lateral (destaque 3).

Os blocos nome de entrada também possuem ícones de configuração (destaque 2), clique para abrir a janela que configura o tipo do parâmetro. Para mais detalhes, acesse Variável



Figura 4.3 - Passando Parâmetro para uma função


Propriedades do Blockly

Cada arquivo .blockly ou .blockly.js possui uma janela de propriedades e pode ser acessada através do ícone "engrenagem" no lado direito/superior da aba (seta da figura 4.4).

Veremos a diferença entre as propriedades dos blocos cliente e servidor.

Cliente

A propriedade mais importante do bloco cliente é o Formulário de Referência, que permite que os blocos reconheçam os componentes visuais da página referenciada.


Figura 4.4 - Propriedades do bloco de programação cliente


  • Nome: nome do bloco;
  • Descrição: descrição sobre o bloco;
  • Formulário de Referência: vincula o .blockly.js a uma página web ou tela mobile (view).

Servidor

Arquivos .blockly servidor possuem diversos recursos, como veremos aqui.


Figura 4.5 - Propriedades do bloco de programação Servidor


  • Nome: nome do bloco;
  • Descrição: descrição sobre o bloco
  • Tempo limite: limite em segundos para a execução. Após o limite a ação é finalizada;
  • Tipo: define o tipo de permissão para acesso ao bloco:

    • Interno: o bloco só é consumido dentro do projeto;

    • Externo: permite que o bloco seja consumido dentro e fora do projeto.

  • Endereço REST: sintaxe URN gerado pela API REST. Para saber mais, acesse Disponibilizando serviços REST;
  • Disponibilizar como SOAP: gera uma API do tipo SOAP. Para saber mais, acesse Disponibilizando serviços SOAP;
  • Endereço SOAP: endereço do WSDL do serviço SOAP;
  • Formulário de Referência: vincula o .blockly a uma página web ou tela mobile (view);
  • Segurança: abre outra janela que nos permite dar autorização de CRUD e Execução a diferentes permissionáveis;
  • Execução síncrona?: define se a execução das funções serão de forma síncrona ou assíncrona;
  • Exibir no Bpmn: torna o bloco disponível para o plugin Cronapp BPM;
  • Auditoria em Log: gera histórico de chamada das funções desse bloco. Para saber mais, acesse Log de Auditoria.

Ordem de execução

Da mesma forma que ocorre com a programação textual, 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 4.6). 



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

Debug Visual

O processo de Depuração (Debug ou Debugging) permite encontrar erros de sintaxe ou lógica no código fonte durante a execução da aplicação. Esse procedimento pode ser feito de forma tradicional (ver documentação) ou através do Debug visual, onde é possível definir os breakpoints diretamente no bloco que deseja analisar. Atualmente essa funcionalidade só está disponível para os blocos do tipo servidor.

Para que a depuração funcione, é necessário executar os passos abaixo:


Figura 4.7 - Debug Visual em execução com a aba Console do depurador aberta


  1. Execute o seu projeto em modo debug, utilizando o botão 1, destacado na figura 4.7;
  2. Adicione um breakpoint em algum bloco;
  3. Assim que a aplicação executar a função que possui o breckpoint, utilize os botões de controle para executar bloco a bloco:
    • Prosseguir execução: executa a aplicação normalmente, ignorando os breakpoints;
    • Próximo passo: segue para a próxima linha do código, mas não entra no método se houver;
    • Entrar: segue para a próxima linha do código e entra no método;
    • Sair: caso esteja dentro de método, clicando em sair, você segue para a primeira linha de código que fica fora do método.
  4. Utilize as abas Visualização / Código para alterar entre a programação visual e o código;
  5. Use a aba inferior Console do Depurador para imprimir conteúdo, erros, exceções e inserir comandos:
    • veremos mais abaixo que as outras abas, como a Variáveis e Breakpoint, também são bem úteis.

Breakpoints

Breakpoints são pontos de parada para verificar o estado atual da aplicação ou acompanhar o conteúdo de uma determinada variável.

Para adicionar um ponto de interrupção em um bloco, clique com o botão direito do mouse em cima do bloco e selecione a opção Adicionar Ponto de Interrupção (Figura 4.7), após isso você verá um ícone em formato de inserto (bug) representando um ponto de interrupção no bloco selecionado (destaque 2 da figura 4.7).

Para retirar o breakpoint, abra novamente o menu de contexto do bloco com o ícone bug e selecione a opção Remover ponto de interrupção


Figura 4.8 - Adicionando ponto de interrupção ao bloco


Selecione a aba inferior "Breakpoint" para exibir as funções e as linha onde estão inserido os pontos de parada:

  1. Alguns blocos não permitem o breakpoint, nesse caso eles serão exibidos em uma cor escura e o círculo na sua frente não estará em vermelho.
  2. Já os blocos com a tonalidade mais clara e que possuem um círculo vermelho na frente serão parados, clique sobre ele para destacar o bloco que o representa.

Arquivo Java

Da mesma forma que o bloco de programação fica em destaque quando o código está paralisado, no arquivo Java a linha paralisada fica em amarelo. A medida que usamos os botões de controle (item 3 da figura 4.7), os próximos blocos ou linhas serão destacados.

Os pontos vermelhos antes do número da linha representam os breakpoints, assim como na aba inferior de mesmo nome (Figura 4.8).


Figura 4.9 - O destaque em amarelo representa a linha atualmente em depuração 


A figura acima mostra a aba inferior Variáveis habilitada, nela são exibidas todas as variáveis da função em execução. Clique no ícone "triangulo amarelo" antes do nome da variável para expandir suas informações.

Arquivo map

Ao alterar da aba Visualização para Código (destaque 1 da figura 4.10) será possível visualizar o código Java gerado pelo blockly. Note que na maioria das linhas existe um comentário (em roxo) informando sourceMappingStart + código hash, ele representa o identificador do bloco, necessário para o mapeamento dos blocos durante o Debug visual.


Figura 4.10 - Na aba Código (inferior) é possível visualizar o código Java e o ID dos blocos


Os identificadores dos blocos de programação não são adicionados no arquivo Java, como podemos ver na figura 3.12, são exibidos apenas na aba Código do arquivo Blockly. Os identificadores são referenciados no arquivo .map., arquivo que é gerado automaticamente ao criar um arquivo .blockly e possui uma lista de objetos que mapeia o ID do bloco com sua respectiva linha do código Java (Figura 4.11).


Figura 4.11 - Arquivo .map mapeia o Id dos blocos com o número da linha no código Java

Nomenclatura

Se você ainda estiver um pouco confuso com os termos "blocos" ou "função de blocos", tentaremos sanar nesse tópico.


Figura 4.12 - Definição dos termos usados nos blocos de programação


  1. Diretório dos blocos de programação: diretório onde são armazenados os blocos de programação. Como informado no item 4 da figura 3.1, dependendo do modo de visualização, essa pasta pode ser exibida com o seu nome original "blockly" ou amigável "Bloco de Programação";
  2. Arquivos de bloco de programação: também chamado de "arquivos de bloco", "bloco" ou "blockly";
  3. Blocos: cada uma das estruturas do menu lateral representa uma função, e como qualquer função, pode possuir parâmetros de entrada e conter ou não retorno. Quando usamos essas estruturas para montar funções de blocos de programação no editor de blockly, costumamos chamar apenas de "bloco";
  4. Função de bloco de programação: bloco responsável por criar funções de bloco de programação.

Menu de contexto

A quantidade de itens exibido no menu de contexto irá variar com o tipo e o status atual do bloco selecionado. Mostraremos abaixo todas as opções disponíveis.


Figura 4.13 - Menu de contexto do bloco de programação


Ponto de interrupção

As opções Adicionar e Remover ponto de interrupção permitem incluir ou retirar breakpoints para utilizar o Debug visual, o ícone bug será exibido sobre o bloco selecionado.


 

Figura 4.14 - Blocos com e sem breakpoint


Colapsar e expandir

Permite comprimir o bloco selecionado e todos os blocos acoplado a ele. Após colapsar, acesse novamente o menu de contexto do bloco comprimido para exibir a opção Expandir bloco. Essa opção também é acionada ao dar um duplo clique sobre bloco.

O colapsar de blocos não interferem em nada no algoritmo, apenas reduz o tamanho da função, melhorando a sua legibilidade.



Figura 4.15 - A função possui 2 blocos "se", um colapsado e o outro não


Habilitar e desabilitar

Blocos desabilitados não são executados ao rodar a aplicação. Ficam disponíveis, porém desabilitados no arquivo .blockly e não são gerados no código fonte. 


Figura 4.16 - O segundo bloco "se" não será visualizado no código fonte


Desfazer e Refazer

Essas opções só serão exibidas ao clicar na área de trabalho do editor de bloco (fundo preto pontilhado). Elas equivalem a utilizar os botões CTRL + Z e CTRL + Y, desfazendo uma ação e refazendo em seguida.


Figura 4.17 - Opções Desfazer e Refazer



Entradas externas x incorporada

Essa opção permite alterar o formato do bloco de programação, possibilitando melhorar a legibilidade da função. A opção Entrada externa exibe seus parâmetros na vertical, enquanto a opção Incorporada exibe os parâmetros na horizontal.


Figura 4.18 - Os 2 blocos "inserir" possuem o mesmo comportamento


Comentário

Adiciona o ícone "?" no bloco de programação, ao clicar, um balão é exibido para inserir um comentário sobre o bloco,  


Figura 4.19 - Os comentários são adicionados na linha acima do bloco


Criar

Essa opção só está disponível para os blocos funções (para) e variáveis. Ele cria um bloco complementar ao bloco selecionado. Por exemplo, ao selecionar essa opção em blocos que alimentam uma variável definir <variável>, ele criará seu bloco complementar, um bloco de retorno da variável.


Figura 4.20 - Blocos complementares da variável "item" 


Deletar

Deleta o bloco selecionado e todos os blocos acoplados a ele. Se existir blocos acoplados, o menu de contexto exibirá a quantidade de blocos que serão excluídos.


Figura 4.21 - A opção Deletar apaga todos os blocos acoplados a ele



Duplicar

Faz uma cópia do bloco selecionado e todos os blocos acoplados a ele.


Figura 4.22 - Duplicação do bloco "se"


Retorno

Essa opção só está disponível para alguns blocos que possuem retorno. Ela permite executar a função e ignorar o seu retorno. Na figura abaixo, os 2 blocos Imprimir realizam a mesma ação, porém o segundo não retorna nada.


Figura 4.23 - O menu de contexto informa se o bloco exibe ou não o retorno


Ajuda

Abre um novo guia no seu navegador com a documentação do bloco selecionado.

Informações

Neste tópico mostraremos algumas dicas e informações para ajudar em sua produtividade enquanto trabalha no editor de blocos.

Ajuda

Para obter uma breve descrição do bloco antes de selecioná-lo, repouse o cursor do mouse sobre ele para estender uma aba com as seguintes informações:


Figura 5.1 - Menu estendido com a descrição do bloco selecionado


  • Nome;
  • Descrição: breve descrição do bloco selecionado;
  • Ajuda: link para a documentação do bloco.

Deixe o cursor do mouse parado sobre um bloco na área de edição para exibir sua descrição em um tooltip


Figura 5.2 - Tooltip de descrição do bloco

Ícone engrenagem

Diversos blocos possuem esse ícone, ao clicar, uma janela é aberta para permitir realizar alguma configuração no bloco selecionado. O conteúdo da janela varia com o tipo de bloco selecionado.


Figura 5.3 - Ícone engrenagem do bloco Inserir (Banco de dados)

Desacoplamento de blocos

Se uma função possui uma sequência de blocos empilhados e você arrasta um dos blocos do meio, todos os blocos abaixo do selecionado serão arrastados juntos. Porém, ao realizar a mesma ação com o botão CTRL ou ALT pressionado, somente o bloco selecionado será desacoplado. 

Na primeira parte da figura abaixo (direita), o bloco inserir foi arrastado e o bloco Imprimir foi removido junto, já no lado esquerdo da mesma figura, o bloco Inserir foi arrastado com o botão CTRL pressionado, e somente ele foi desacoplado.


Figura 5.4 - Desacoplamento de blocos intermediários

Outros parâmetros

Alguns blocos possuem parâmetros com características diferentes da maioria dos blocos, veremos aqui algumas delas.

Comandos

Blocos com esse tipo de parâmetro permitem adicionar trechos de blocos (códigos) para serem executados junto com a função chamada.

Na figura abaixo vemos que primeiro parâmetro (destaque 1 da figura 5.5) do bloco Agendar Execução permite adicionar uma sequência de outros blocos.


 Figura 5.5 - Parâmetro de comandos


Caixa de seleção

Alguns blocos possuem opções limitadas para um parâmetro, nesses casos é exibido uma caixa de seleção com as opções possíveis. 


 Figura 5.6 - Parâmetro com limite de opções

Blocos assíncronos

A partir da versão 2.6, os blocos de programação clientes (web e mobile) funcionarão de forma assíncrona. Se o seu projeto foi criado após essa versão, não é necessário realizar nenhuma ação. Porém, projetos criados antes dessa versão e migrados posteriormente necessitarão atualizar os arquivos de blocos de programação.

Como atualizar

Para atualizar, basta abrir os arquivos de blocos, realizar qualquer modificação (arrastar o bloco função, por exemplo) e salvar para atualizar todas as funções contidas nesse arquivo.


Figura 6.1 - Arraste um bloco e salve para atualizar todas as funções do arquivo


Esse procedimento desse ser realizado nos blocos web e mobile.

Verificar atualização

As alterações só serão percebidas através do código JavaScript. Por isso, acesse a aba inferior Código (destaque 1 da figura abaixo) e verifique que antes de cada função anônima teremos agora a palavra-chave async (destaque 2), já a palavra-chave await será usada na chamada de outras funções.


Figura 6.2 - Atualizações das funções assíncronas

Nessa página