Com a fonte de dados do Cronapp é possível alimentar os componentes visuais, relatórios e gerar requisições REST A Fonte de dados faz a comunicação entre um emissor de dados (banco de dados ou bloco de programação) e um receptor (componentes visuais, relatórios, API etc), através de requisições REST (com o uso de OData) dentro ou fora da aplicação. Além de poder obter os dados por uma consulta personalizada de banco de dados, através de OData, ou bloco de programação, é possível obter esses dados manualmente ou de uma API e esse tutorial lhe mostrará o passo a passo.Por padrão, a fonte de dados espera que o objeto possua a sua classe no diagrama de dados, porém, mostraremos nesse tutorial como alimentar a fonte de dados com objetos não descritos na aplicação. 

Para esse tutorial, será utilizado a seguinte API: https://jsonplaceholder.typicode.com/todos/ para retornar um array de objetos.

Bloco servidor vazio

O primeiro passo desse tutorial é criar um bloco de programação do tipo servidor. Esse bloco só tem a função fazer o vínculo com a fonte de dados, pois uma fonte de dados só funciona quando está vinculado à um bloco ou à a uma entidade - então esse bloco estará vazio.

Image Modified

Figura 1 - Criar bloco Bloco servidor vazio

Nova fonte de dados

O segundo passo é criar uma fonte de dados, então clique em Projeto (1 da Figura 2.1) no menu do sistema e clique depois em Fonte de dados (2 da Figura 2.1) para abrir a janela e clique nova , por fim, clique no botão Nova fonte de dados (3 da Figura 2.1).

Figura 2.1 - Criar fonte de dados

Vincular bloco servidor

Ao abrir a fonte janela da Fonte de dados na área da IDE, troque de entidade para bloco , defina um nome no campo Nome da consulta e troque a opção Entidade por Bloco de programação (1 da Figura 2.2) para assim habilitar os botões o botão do bloco e poder vincular o bloco servidor criado com essa fonte. Clique no botão "..." (2 da Figura 2.2) para abrir a janela de seleção do bloco, selecione a função do bloco que foi criado anteriormente (3 da Figura 2.2) e clique no botão selecionar (4 da Figura 2.2) para fazer o vínculo. Por fim, define um nome para a consulta no campo correspondente.

Image Modified

Figura 2.2 - Selecionando o bloco para vincular com a fonte

Adicionar

atributos

Após salvar a fonte de dados, clique na aba Campos (1 da Figura 2.3) para criar os campos referentes ao objeto recebido. Nessa hora é importante conhecer a estrutura do objeto que irá alimentar a fonte de dados. Para esse exemplo usaremos a estrutura informada abaixo:

{
    "userId": <number>,
    "id": <number>,
    "title": <string>,
    "completed": <boolean>
}

Primeiro informe o nome do atributo as chaves dos objetos. Primeiro adicionar o nome da chave no campo (é case sensitive) e clique no botão "+" (2 da Figura 2.3) para adicionar. Após, verifique o tipo da chave do atributo e troque (3 da Figura 2.3) conforme esse tipo, pois eles devem ser do mesmo tipo que os valores dessas chaves - ou seja, se a chave o atributo é lógica boolean o campo precisa ser lógico também.

Figura 2.3 - Adicionando os nomes das chaves aos camposatributos do objeto

Alimentação manual

Nessa parte, iremos obter os dados de uma lista inserida no bloco de programação.

Criar bloco de programação cliente

Então, crie um bloco de programação cliente no qual a função terá retorno e adicione nesse retorno o bloco criar objeto Json (1 da Figura 3.1). Clique no ícone da engrenagem (2 da Figura 3.1) para abrir a janela de edição de texto, insira o JSON e salve (3 da Figura 3.1).

Figura 3.1 - Criando bloco com retorno

Vincular bloco cliente com fonte dados

Adicione o componente fonte de dados em um formulário, selecione a fonte de dados criada e salve (Figura 3.2).

Figura 3.2 - Vincular fonte criada com componente fonte de dados

Após isso, na aba Propriedades (1 da Figura 3.3), clique na subaba Eventos (2 da Figura 3.3) e clique no botão "..." do evento Para Obter Dados (3 da Figura 3.3). Ao abrir a janela do evento, clique no ícone (4 da Figura 3.3) para abrir a janela de seleção do bloco e selecione a função que contenha os dados JSON (5 da Figura 3.3). Por fim, salve essas configurações.

Figura 3.3 - Vincular bloco ao evento para remover dados do componente

Vincular componente para exibir dados

Adicione um componente que possa ser vinculado com a fonte para que exiba os dados, como uma grade. Configure o componente para que ele possa exibir os dados e salve. Rode o projeto e acesse a página para visualizar os dados (Figura 3.4).

Figura 3.4 - Valores do bloco renderizados na grade

Alimentação via API

Esses dados também podem ser provenientes de uma API.

Criar bloco de programação cliente

Os blocos a utilizar são clientes, então deverá ser criado um bloco de programação do tipo cliente. Com isso, crie uma variável e adicione a ela o bloco criar promessa (1 da Figura 4.1). Após, adicione o bloco obter conteúdo da URL logo abaixo (2 da Figura 4.1) e escolha o método de requisição get para fazer a obtenção dos dados e application/json para que esses dados venham em formato JSON (3 da Figura 4.1).

Figura 4.1 - Criando bloco de programação Parte 1

Tanto no retorno de sucesso quanto de erro do bloco obter conteúdo da URL, adicione o bloco atribuir valor da promessa. No retorno de sucesso, defina o tipo para resolved (1 da Figura 4.2) e no retorno de erro; reject (2 da Figura 4.2). Adicione tanto a variável do bloco criar promessa quanto a variável do bloco obter conteúdo da URL em seus respectivos campos dos blocos atribuir valor da promessa (3 e 4 da Figura 4.2). Por fim, adicione a variável que guarda a promessa no retorno da função (5 da Figura 4.2).

Figura 4.2 - Criando bloco de programação Parte 2

Vincular bloco cliente com fonte dados

Adicione o componente fonte de dados em um formulário, selecione a fonte de dados criada e salve (Figura 4.3).

Figura 4.3 - Vincular fonte criada com componente fonte de dados

Após isso, na aba Propriedades (1 da Figura 4.4), clique na subaba Eventos (2 da Figura 4.4) e clique no botão "..." do evento Para Obter Dados (3 da Figura 4.4). Ao abrir a janela do evento, clique no ícone (4 da Figura 4.4) para abrir a janela de seleção do bloco e selecione a função os dados provenientes de uma API (5 da Figura 4.4). Por fim, salve essas configurações.

Figura 4.4 - Vincular bloco ao evento para remover dados do componente

Vincular componente para exibir dados

Adicione um componente que possa ser vinculado com a fonte para que exiba os dados, como uma tabela. Configure o componente para que ele possa exibir os dados e salve. Rode o projeto e acesse a página para visualizar os dados (Figura 4.5).

Figura 4.5 - Valores do bloco renderizados na grade