Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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 utilizaremos o serviço https://jsonplaceholder.typicode.com/todos/ que retorna uma lista de objetos.
Fonte de dados
Vale lembrar que o objetivo desse tutorial é apenas obter e visualizar o conteúdo. Não sendo possível adicionar ou editar nada, visto que a fonte de dados não terá controle sobre os dados obtidos.
Porém, caso o serviço REST usado permita os demais métodos HTTP (PUT, POST, DELETE...), é possível configurá-los individualmente depois.
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 a um bloco ou 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 > Fonte de dados no menu do sistema para abrir a janela e clique no botão Nova fonte de dados.
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 (1 da Figura 2.2) e troque a opção Entidade por Bloco de programação (2 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 "..." (3 da Figura 2.2) para abrir a janela de seleção do bloco, selecione a função do bloco que foi criado anteriormente (4 da Figura 2.2) e clique no botão selecionar (5 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 será usado a estrutura informada abaixo:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
{ "userId": <number>, "id": <number>, "title": <string>, "completed": <boolean> } |
Primeiro informe o nome do atributo em Campo a adicionar (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 é booleano o campo precisa ser lógico/Boolean.
Image RemovedImage Added
Figura 2.3 - Adicionando os atributos do objeto
Informações | ||
---|---|---|
| ||
Esses campos precisam podem ser adicionados independentemente da forma como esses dados serão obtidos. |
Obter conteúdo
Nessa etapa mostraremos duas formas de se obter os dados, inserindo os valores manualmente de forma estática ou obtendo através de uma requisição REST de outro sistema. Fique à 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 seta da Figura 3.1) para abrir a janela de edição de texto, insira o JSON e salve (3 2 da Figura 3.1).
Image RemovedImage Added
Figura 3.1 - Bloco com retorno estático
Via API
Os blocos de programação Clientes são assíncronos, dessa forma, será necessário além do bloco de requisição REST, usar também 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 destaque 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 2 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 (3 da Figura 4.1).
Image RemovedImage Added
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 2 da figura 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 (3 da Figura 4.2).
No retorno de erro, adicione os mesmos blocos mas define o campo tipo para rejected (destaque 4 da figura Figura 4.2).
Por fim, adicione a variável que guarda a promessa no retorno da função (5 4 da Figura 4.2).
Image RemovedImage Added
Figura 3.3 - Segunda parte do bloco que obtém o serviço externo 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).
Image RemovedImage Added
Figura 4.1 - Vinculando o componente com a fonte de dados
Após isso, selecione a 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.
Image RemovedImage Added
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).
Image RemovedImage Added
Figura 5.1 - Valores do bloco renderizados na grade
Nesta página
Índice