No Cronapp, os blocos de programação são estruturas visuais que permitem arrastar e acoplar (drag-and-drop) 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. O Cronapp incorporou o blockly de modo a reduzir a curva de aprendizado ao mesmo tempo em 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, quanto no código fonte cliente web e mobile.

Execução de blocos Servidor e Cliente

O Cronapp possui diversos blocos servidor que fazem requisições para blocos cliente. Esses blocos não são executados de forma síncrona, ou seja, a função servidor não aguarda o retorno ou a finalização da requisição do bloco cliente para continuar a execução dos demais blocos na função. Nesses casos, a requisição cliente será sempre executada ao final da execução da função servidor. Essa diferença vale tanto para blocos que chamam funções cliente quanto para blocos que executam funções diretamente no lado cliente. Um exemplo de exemplo de bloco cliente assíncrono é o bloco Alterar valor do Campo, que é executado no lado cliente de forma assíncrona. 

A Figura 1 apresenta uma função de bloco de programação Servidor e o código Java gerado, já a figura 1.1 mostra uma função bloco de programação cliente (web ou mobile) e o código Javascript gerado.

A subaba Código só fica disponível quando a opção Modo Avançado está habilitada ou ao habilitar a opção Sempre mostrar código fonte na janela de preferências do projeto, acessível a partir do menu do sistema Espaço de Trabalho > Preferências. Para mais informações dessas funcionalidades, acesse o tópico "Espaço de Trabalho" na documentação Tour pelo Cronapp.

Open

Open

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 na outra parte codificar de forma convencional; 

• Visualize o código gerado em tempo real (apenas quando o Modo Avançado ou a opção Sempre mostrar código fonte estiver habilitada);

• Altere o código-fonte gerado.

Arquivos de desenvolvimento

O editor visual dos blocos de programação costuma gerar outros arquivos além do código fonte. Porém, durante o desenvolvimento só é necessário nos preocuparmos com os arquivos que possuem as extensões *.blockly e *.blockly.js, pois são eles que abrem o editor visual. Os demais arquivos são mantidos e atualizados automaticamente quando salvamos o conteúdo no editor visual (Figura 2.1). Para visualizar as funções contidas em um arquivo de bloco de programação, basta expandir seu conteúdo clicando no símbolo ">" localizado ao lado dos arquivos blockly. Ao fazer isso, as funções serão exibidas em ordem alfabética (destaques 1 da figura 2.1) e com um duplo clique sobre uma dessas funções, é possível abri-la no editor de blocos de programação.

Open

• Arquivos Servidor

  • .blockly: abre o editor do bloco servidor e é responsável por armazenar os blocos e gerar o código fonte Java. Ícones do editor 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 do bloco mobile e é responsável por armazenar os blocos e gerar o código fonte JavaScript. Ícones do editor de bloco cliente são exibidos sempre em verde.

  • .js: arquivo fonte JavaScript gerado a partir do arquivo *.blockly.js.

• Arquivos Web

  • .blockly.js: abre o editor do bloco web e é responsável por armazenar os blocos e gerar o código fonte JavaScript. Ícones do editor de bloco cliente são exibidos sempre em verde.

  • .js: arquivo fonte JavaScript gerado a partir do arquivo *.blockly.js.

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.

Open

Open

Para mais detalhes sobre a organização dos arquivos dos projetos Cronapp, acesse a documentão Estrutura de arquivos.

Desativando o Modo Avançado

Essa opção, acessível a partir do botão do menu do sistema (destaque 1 da figura 2.4), tem o objetivo de facilitar o desenvolvimento no Cronapp, ocultando recursos com foco no desenvolvimento high-code. Ao desabilitar o Modo Avançado, o conteúdo da árvore de arquivos é exibido de forma simplificada, os arquivos *.blockly, *.blockly.js e *.map ficam ocultos. 

Devido a forma como o conteúdo é organizado e os arquivos ocultos, acessar os blocos de programação e suas funções com o Modo Avançado desabilitado (figura 2.4) é muito mais simples que na figura 2.1. De modo similar, para visualizar as funções contidas em um arquivo de bloco de programação, basta expandir seu conteúdo clicando no símbolo ">" localizado ao lado dos arquivos blockly. Ao fazer isso, as funções serão exibidas em ordem alfabética e, com um duplo clique sobre uma dessas funções, é possível abri-la no editor de blocos de programação.

Open

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 melhorar a organização dos seus arquivos fonte. Alguns diretórios podem ser facilmente acessados a partir dos atalhos na árvore de arquivos. 

Open

1. Atalho bloco mobile: clique para ser direcionado para a pasta do bloco de programação mobile.

2. Atalho bloco servidor: clique para ser direcionado para a pasta do bloco de programação servidor.

3. Atalho bloco web: clique para ser direcionado para a pasta do bloco de programação web.

4. Bloco de programação: diretório dos blocos de programação servidor.

Para criar um arquivo da sua regra de negócio, clique com no botão "+" ao lado do diretório blockly/ (Bloco de programação/ servidor, mobile ou web) e selecione a opção Bloco de programação para abrir a janela de configurações (Figura 3.1). Essa opção também é acessível a partir do menu de contexto do diretório.

Na primeira janela (Modelo) é possível definir como irá trabalhar:

• Bloco de Programação Vazio: cria um arquivo blockly que abre o editor visual e permite gerar o arquivo fonte Java ou JavaScript.

• Novo Bloco de Programação Java/JavaScript (High-Code): cria um arquivo Java ou JavaScript, permitindo codificar sem o editor visual. Essa opção só está disponível no Modo Avançado.

Após avançar, a segunda janela exibe os campos abaixo:

• Nome do Arquivo / Classe: nome dado a classe e a todos os arquivos gerados a partir do editor visual:

  • desenvolvimento acelerado: *.blockly, *.java e *.map (servidor); *.blockly e *.blockly.js (cliente);

  • high-code: *.java (servidor), *.blockly.js (cliente). 

• Nome da Função: nome da primeira função / método.

Janela de edição

Após finalizar o passo da Figura 3.1 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.

Open

Funcionalidades da janela do editor de bloco de programação

1. Aba do editor visual: a cor do ícone identifica o tipo de bloco - azul para servidor e verde para cliente. A extensão do arquivo será exibida apenas no Modo Avançado.

2. Índice de função: alterna entre os métodos ou funções dessa classe. ao clicar na caixa de seleção, as funções desse arquivo serão listadas em ordem alfabética.

3. Configurações do arquivo blockly: define algumas configurações para todas as funções desse arquivo, veja mais detalhes abaixo.

4. Categorias: lista das categorias de blocos de programação;

   1. Categoria Procurar: essa categoria possui um campo de busca que filtra todos os blocos de todas as categorias presentes no editor.

5. Seleção de blocos: exibe todos os blocos de uma categoria;

   1. Campo de busca: esse campo está presente na maioria das categorias e filtra por todos os blocos contidos na categoria selecionada.

6. Função: função (vazia) que espera receber os blocos.

7. Ações (de cima para baixo): centralizar a função, zoom in, zoom out e excluir um bloco de programação ao arrastá-lo para cima da lixeira (equivalente a apertar o botão delete).

8. Exibe função: exibe a função em modo visual ou o código fonte gerado. A subaba Código só está disponível no Modo Avançado ou ao habilitar a opção "Sempre mostrar código fonte" na janela de preferências do projeto, acessível a partir do menu do sistema Espaço de Trabalho > Preferências (veja o tópico "Espaço de Trabalho" na documentação Tour pelo Cronapp).

9. Ocultar/Exibir Categorias: por padrão, o ícone é exibido com a seta apontando para a esquerda, sinalizando que ao clicar fará com que as categorias de blocos de programação fiquem ocultas. Quando estão ocultas, o sentido da seta muda, indicando que ao clicar, as categorias serão exibidas novamente.

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). Ao clicar nessa caixa, as funções desse arquivo serão listadas em ordem alfabética, facilitando a navegação e seleção da função desejada.

Para chamar funções de outras classes, utilize os blocos Chamar bloco servidor assíncrono, Chamar Bloco (com retorno) e Chamar Bloco (sem retorno) no lado cliente ou Chamar Bloco (com retorno) e Chamar bloco (sem retorno) no lado servidor.

Open

Estrutura das funções

Sobre a estrutura das funções, é importante destacar que em determinadas situações, o sistema poderá exibir notificações, como no caso de um parâmetro incorreto ou quando um bloco cliente é chamado de forma assíncrona a partir de uma função servidor. Nesse contexto, é importante observar que funções do tipo servidor não são executadas em aplicações offline. Além disso, o tempo de resposta para a execução de uma função cliente é geralmente mais rápido em comparação com uma função servidor.

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

• A função recebe os parâmetros "name" e a "nota" (destaque 4).

• A variável "registro" obtém o retorno do bloco Inserir no Banco de dados, configurado com a entidade Aluno.

• O parâmetro "Aluno" do bloco Inserir recebe o bloco Criar novo objeto, que retorna um objeto Aluno contendo os atributos alimentados pelos parâmetros da função: "name" e "nota".

• O retorno do bloco Inserir é impresso no Console do depurador.

• O conteúdo da variável registro alimenta o retorno da função AdicionarAluno.

Open

1. Parâmetros: abre uma janela para adicionar ou remover parâmetros de entrada da função (destaque 4).

2. Comentário: adiciona um comentário para descrever a função. Veja mais detalhes no tópico Comentários.

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.

8. Pesquisa rápida: exibe uma lista onde é possível pesquisar por todos os blocos de programação do Cronapp.

Parâmetros

O ícone engrenagem (destaque 1 da figura 4.4) 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. 

Open

Parâmetros e entidades

Ao passar uma entidade (objeto) para um bloco como parâmetro, ela é passada por referência e não por valor. O que significa que caso o parâmetro (objeto) seja alterado na função chamada, o objeto será modificado em todas as funções.

No exemplo abaixo, a função ParametroReferencia (Figura 4.6) alimenta uma entidade User na variável "user", imprime no console o campo e-mail desse objeto, em seguida, chama função AlterarEmail passando por parâmetro a variável "user" e, ao final, imprime novamente o mesmo campo e-mail, porém agora o conteúdo do campo está diferente pois foi alterado na função AlterarEmail.

Open

Propriedades do Blockly

Cada arquivo *.blockly ou *.blockly.js possui uma janela de propriedades que pode ser acessada através do ícone "engrenagem" no lado direito/superior da aba (seta das figuras 4.5 e 4.6). As configurações dessa janela irão afetar todas as funções contidas nesse arquivo.

Uma das propriedades mais importante dessas janelas é o campo Formulário de Referência, que permite que os blocos reconheçam os componentes visuais da página referenciada.

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

Cliente

Janela com as propriedades do editor de bloco de programação cliente.

Open

• Nome: nome do arquivo *.blockly.js.

• Descrição: descrição do arquivo *.blockly.js.

• Exibir como Função: ao selecionar esta opção, todas as funções contidas neste arquivo *.blockly.js serão apresentadas na lista de categorias do editor de blocos desse projeto, juntamente com os blocos padrões do Cronapp. Os campos com destaque 1 da figura 4.5 só serão exibidos quando essa opção estiver marcada. Veja mais detalhes no tópico Criar blocos customizados.

• Multilayer: (disponível após habilitar a opção "Exibir como Função") ao selecionar esta opção, todas as funções contidas neste arquivo estarão disponíveis no editor de blocos, tanto no cliente (web e mobile) quanto no servidor. Desmarque-a para exibir apenas no editor de blocos do cliente (web e mobile).

• Categoria: (disponível após habilitar a opção "Exibir como Função") selecione a categoria em que os blocos serão exibidos ou digite o nome de uma nova categoria.

• Link de Ajuda: (disponível após habilitar a opção "Exibir como Função") informe um endereço com a documentação das funções de bloco.

• Formulário de Referência: vincula o *.blockly.js a uma página web ou tela mobile (view). O caminho da tela/página exibido nesse campo varia a depender de como a opção Modo Avançado esteja configurado.

Servidor

Janela com as propriedades do editor de bloco de programação servidor.

Open

• Nome: nome do bloco.

• Descrição: descrição sobre o bloco.

• Exibir como Função: ao selecionar esta opção, todas as funções contidas neste arquivo *.blockly serão apresentadas na lista de categorias do editor de blocos servidor desse projeto, juntamente com os blocos padrões do Cronapp. Os campos com destaque "a" da figura 4.6 só serão exibidos quando essa opção estiver marcada. Veja mais detalhes no tópico Criar blocos customizados.

• Categoria: (disponível após habilitar a opção "Exibir como Função") selecione a categoria em que os blocos serão exibidos ou digite o nome de uma nova categoria.

• Link de Ajuda: (disponível após habilitar a opção "Exibir como Função") informe um endereço com a documentação das funções de bloco.

• Tempo limite: este parâmetro representa o limite, em segundos, para a conclusão da execução. Uma vez atingido esse limite, a ação é encerrada.
  
  

• Tipo: define como a estrutura de requisições REST será montada:

  • Interna: permite a personalização dos campos da área "Endereço REST"

  • Externa: mantém compatibilidade com projetos antigos e não permite alterações nos campos da área "Endereço REST".

• Disponibilizar como SOAP: gera uma API do tipo SOAP. Para saber mais, acesse Disponibilizando Web Service 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). O caminho da tela/página exibido nesse campo varia a depender de como a opção Modo Avançado esteja configurado.

• 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á de forma síncrona ou assíncrona.

• Exibir no Bpmn: torna o bloco disponível para o plugin Cronapp BPM. Essa opção é restrita para alguns planos.

• Auditoria em Log: gera histórico de chamada das funções desse bloco. Para saber mais, acesse Log de Auditoria. Essa opção é restrita para alguns planos.

• Expor Swagger: exibe os endpoints gerados a partir das funções contidas no bloco de programação (arquivo blockly) na página do Swagger, veja mais detalhes em Swagger - OpenAPI.

• Exportar Biblioteca: ao selecionar essa opção, será possível exportar todas as funções contidas no blockly via biblioteca.

• Endereço REST: exibe e permite configurar as URIs do serviço REST de cada função dentro do blockly.
  Colunas:
  
  

  1. Nome da função: nomes das funções contidas no blockly.

  2. Verbos HTTP: especifica os tipos de operações que podem ser realizadas em uma comunicação cliente-servidor usando o protocolo HTTP. Consulte a documentação oficial para mais detalhes de cada tipo. São eles:

     • GET.

     • HEAD.

     • POST.

     • PUT.

     • PATCH.

     • DELETE.

     • OPTIONS.

     • TRACE.

  3. Endereço REST: exibe as URIs do serviço REST de cada função dentro do blockly. Esse endereço será concatenado com o domínio do sistema e assim será obtido o endereço completo. Para saber mais, acesse Disponibilizando Web Service REST.

  4. Media type: especifica o formato dos dados enviados e recebidos em uma requisição. São baseados nos tipos disponíveis no Spring Framework, consulte a documentação oficial para mais informações de cada tipo. São eles:

     • Atom.

     • CBOR.

     • Event Stream.

     • Form (URL Encoded).

     • HTML.

     • Imagem GIP.

     • Imagem JPEG.

     • Imagem PNG.

     • Json.

     • Markdown.

     • Multipart (Form).

     • Multipart (Mixed).

     • Multipart (Related).

     • NDJSON.

     • Octet-Stream.

     • Pdf.

     • Problem (JSON).

     • Problem (XML).

     • RSS (XML).

     • Stream (JSON).

     • Texto.

     • Todos.

     • XHTML.

     • XML.

  5. Segurança: permite dar autorização de CRUD e execução aos permissionáveis do sistema. A segurança definida no arquivo blockly tem prioridade sobre a segurança de cada função.

  6. Configurar endereço REST: permite personalizar o endereço REST da função. É necessário manter a rota inicial ao mudar o endereço, ficando "/api/cronapi/rest/<novo-valor>". Exemplo: "/api/cronapi/rest/calculadora".
     
     

      

  7. Redefinir endereço REST: redefine o endereço alterado pelo usuário no campo “Configurar Endereço REST”.

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 (destaque 1 da figura 4.7) e em seguida passa para a próxima linha (2 da figura 4.7). 

Open

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:

Open

1. Clique no botão verde Play (não exibido na imagem) para executar o projeto em modo Debug e aguarde até exibir os botões Stop e Abrir Navegador. 

2. Adicione uma 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 como as demais abas também são ú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.9), 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.8).

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. 

Open

Selecione a aba inferior "Breakpoint" para exibir as funções e as linhas onde estão inseridos 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 pausados, 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á pausado, no arquivo Java a linha analisada fica em amarelo. À medida que usamos os botões de controle (1 da figura 4.10), 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.9).