O Cronapp utiliza Fontes de dados para fazer a comunicação entre um emissor de dados (via banco de dados ou bloco de programação) e demais ferramentas do sistema. Essa comunicação é feita através de requisições REST (com o uso de OData) dentro ou fora da aplicação. 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.

Fonte de dados

Configurações na fonte de dados.

Bloco servidor vazio

O primeiro passo desse tutorial é criar um bloco de programação do tipo servidor. Esse bloco tem o objetivo de 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.

Figura 1 - 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 depois em Fonte de dados (2 da Figura 2.1) para abrir a janela, 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 janela da Fonte de dados, 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 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.

Figura 2.2 - Selecionando o bloco para vincular com a fonte

Informar 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 no campo (que é case sensitive) e clique no botão "+" (2 da Figura 2.3) para adicionar. Após, verifique o tipo do atributo e troque (3 da Figura 2.3) conforme esse tipo, pois eles devem ser do mesmo tipo - ou seja, se o atributo é boolean o campo precisa ser lógico Boolean.

Figura 2.3 - Adicionando os atributos do objeto

Obter conteúdo

Nessa etapa mostraremos duas formas de se obter e alimentar os dados, inserindo os valores manualmente de forma estática ou obtendo através de uma requisição Rest de outro sistema. Fique a vontade para escolher uma das duas formas. Nos dois casos iremos usar um bloco do tipo cliente.

Estático

Crie um bloco de programação cliente e em seu retorno adicione 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 - Bloco com retorno estático

Via API

Usaremos junto com o bloco de requisição REST, o bloco Promessa, que fica aguardando a resposta do serviço para dar continuidade a execução da função.

Crie um bloco de programação cliente, crie também uma variável e adicione a ela o bloco Criar Promessa (destaque 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 selecione a opção application/json no parâmetro do campo logo abaixo (3 da Figura 4.1). Após isso, informe no parâmetro URL address o endereço do serviço que retornará o array de JSON.

Figura 3.2 - Primeira parte do bloco que obtém o serviço externo 

Adicione o bloco Atribuir valor para a promessa tanto no retorno de sucesso quanto de erro do bloco Obter conteúdo da URL. No retorno de sucesso, defina o campo Tipo para resolved (1 da Figura 4.2) e no retorno de erro; reject (2 da Figura 4.2). Arraste a variável que foi definida como promessa (destaque 1 da figura 4.1) e vincule aos parâmetros Promessa dos blocos Atribuir valor para a promessa (destaque 3 da figura 4.2). Insira também a variável de retorno do bloco Obter conteúdo da URL no parâmetro Valor dos blocos Atribuir valor para a promessa (destaque 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 3.3 - Segunda parte do bloco que obtém o serviço externo 

Alimentar fonte de dados

No editor de view, adicione o componente fonte de dados em um formulário, selecione a fonte de dados criada e salve (Figura 4.1).

Figura 4.1 - Vinculando o componente com a fonte de dados

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

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

Teste

Após as etapas acima, já é possível alimentar componentes visuais, relatórios e demais serviços que utilize a Fonte de 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 5.1).

Figura 5.1 - Valores do bloco renderizados na grade