Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 4 Próxima »


Para esse tutorial utilizaremos o serviço https://reqres.in/api/users que retorna uma lista de objetos.


Figura 1 - Componente Grade sendo alimentada por uma API externa



Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

Requisitos:

  • Projeto do web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar projeto );

Conhecendo a API

Antes de iniciarmos a configuração no Cronapp, precisamos saber se a API que iremos consumir dá suporte a recursos como paginação, ordenação e filtro. Para esse tutorial, usaremos um recurso de teste disponibilizado por reqres.in que dá suporte apenas para a paginação. 

Os recursos de paginação, ordenação e filtro são feitos através do endereço de requisição. A requisição abaixo solicita que cada página possua 2 elementos e pede para retornar os elementos da segunda página.

Requisição
https://reqres.in/api/users?page=2&per_page=2


O JSON abaixo é resultado da requisição acima. Veremos o que significa os atributos e objetos retornados. 

Estrutura de retorno
{
    "page": 2,
    "per_page": 2,
    "total": 12,
    "total_pages": 6,
    "data": [
        {
            "id": 3,
            "email": "emma.wong@reqres.in",
            "first_name": "Emma",
            "last_name": "Wong",
            "avatar": "https://reqres.in/img/faces/3-image.jpg"
        },
        {
            "id": 4,
            "email": "eve.holt@reqres.in",
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://reqres.in/img/faces/4-image.jpg"
        }
    ],
    "support": { "_comment_": "Informações sobre a API" }
}


Atributos do JSON:

  • page: informa a página requisitada.
  • per_page: quantidade de elementos requisitado por página.
  • total: quantidade total de elementos desse recurso. Por se tratar de um exemplo, esse recurso só possui 12 usuários.
  • total_pages: quantidade de páginas nessa configuração. Esse valor é obtido ao dividir o total por per_page.
  • data: lista com os objetos solicitados.
  • support: informações sobre a API.


Dependendo da API requisitada, os atributos da paginação podem variar ( offset, limit, pages, top, skip ), porém o princípio é o mesmo.

Bloco de programação

Iniciaremos nosso tutorial criando o bloco de programação que irá obter os recursos da API para alimentar a fonte de dados.

Clique com o botão direito do mouse na pasta Servidor (localização: Blocos de Programação/Servidor ), selecione Novo > Bloco de Programação. Ao abrir a janela Novo, selecione a opção Bloco de Programação Vazio (Low-Code), clique em Avançar, em seguida, escreva "ApiReqres" no campo Nome do Arquivo e "GetUsers" no campo Nome da Função. Por fim, clique em Finalizar (Figura 2.1).


Figura 2.1 - Bloco de programação Servidor


Os componente visuais usados no Cronapp também se comunicam através de requisições REST e possuem parâmetros que facilitam essa comunicação. Quando clicamos em avançar a página na Grade, ela gera uma requisição para a fonte de dados passando 2 parâmetros necessários para a paginação: 

  • skip: define o número do primeiro elemento da página;
  • top: define quantos elementos serão retornados.

Como a fonte de dados trata a paginação pelo número do elemento e a API do Reqres usa o número da página, precisamos fazer essa conversão usando um cálculo simples. Dividindo o número do primeiro elemento requisitado na página pelo número de elementos por página e somamos mais 1.

Assim, crie 3 variáveis (skip, top e page), onde as duas primeiras vão receber o valor dos parâmetros através do bloco Obter parâmetro da query string (categoria Formulário) e a última, o cálculo.


Figura 2.2 - Variáveis que tratam os parâmetros de requisição


  1. Variável skip: encaixe o bloco Obter parâmetro da query string e informe "$skip" no parâmetro Campo.
  2. Variável top: encaixe o bloco Obter parâmetro da query string e informe "$top" no parâmetro Campo.
  3. Variável page: encaixe o bloco de cálculo matemático, adicione mais um item ao container de configurações do bloco e configure: variável skip, divisão, variável top, adição, 1.


Em seguida, crie outra variável de nome request e encaixe o bloco Obter conteúdo da URL que fará a requisição para a API do Reqres.


Figura 2.3 - Configuração do bloco de requisição da API


  1. Obter conteúdo da URL:
    • Método de requisição: selecione a opção "GET";
    • Tipo de conteúdo: selecione a opção "JSON";
    • Endereço URL: informe o endereço "https://reqres.in/api/users";
    • Parâmetro: encaixe o bloco Criar mapa com.
  2. Criar mapa com: adicione mais um item ao container de configurações do bloco e informe os atributos "page" e "per_page".
    • page: encaixe a variável que recebe o cálculo que fizemos anteriormente;
    • per_page: encaixe a variável top.


Para trabalhar com a paginação, a fonte de dados necessita saber a quantidade total de elementos da API. Essa informação é passada através do atributos total que vem junto com os dados de paginação (ver objeto de retorno da API). Dessa forma, vamos usar o bloco Inserir ou alterar valor na requisição para guardar essa informação apenas no período de requisição à API (Figura 2.3).


Figura 2.4 - Finalização da função GetUsers


  1. Inserir ou alterar valor na requisição:  
    • Nome do campo: informe o nome "totalUsers" para a variável de requisição;
    • Valor do campo: Encaixe o bloco Obter campo do Json (2).
  2. Obter campo do Json: usado para obter o atributo do objeto de retorno; 
    • Json: Encaixe o bloco Para Json e no parâmetro Valor a ser lido encaixe a variável que recebe a requisição da API (passo da figura 2.3);
    • Caminho a percorrer: informe o nome do atributo "total".
  3. Obter campo do Json: encaixe o bloco no retorno da função para obter a lista do objeto de retorno; 
    • Json: Encaixe o bloco Para Json e no parâmetro Valor a ser lido encaixe a variável que recebe a requisição da API (passo da figura 2.3);
    • Caminho a percorrer: informe o nome do atributo "data".


Finalizada a função "GetUsers", vamos criar a segunda função que retornará o valor da variável de requisição. Para isso, arraste o bloco Para com retorno (categoria funções) gerando outra função.


Figura 2.5 - Obtendo o valor na requisição (figura 2.4)


  1. Renomeie a função para "TotalUsersValue";
  2. Obter valor na requisição: encaixe o bloco no retorno da função e no parâmetro Nome do campo, informe "totalUsers". 


Salve o bloco de programação.

Fonte de dados

Nesse passo configuraremos a fonte de dados. Abra a janela que lista as fontes de dados (ícone 1 da figura 3.1) e clique no botão Nova fonte de dados para abrir a janela de configuração da fonte (figura 3.2).


Figura 3.1 - Nova fonte de dados


Em seguida configure os campos iniciais como na figura a seguir:


Figura 3.2 - Configuração inicial da fonte de dados


  1. Identificador: informe o nome "apiUsers";
  2. Nome da consulta: informe o nome "API Users";
  3. Caixa de seleção Tipo: selecione a opção Bloco de programação;
  4. Botão de seleção: após clicar no botão, a janela de seleção do bloco abrirá, selecione a função "GetUsers".


Abra a aba Campos (destaque 1 da figura 3.3) e adicione os atributos de retorno da lista do Objeto (id, email, first_name, last_name e avatar) na Entrada Campo a adicionar (2) e confirme no botão "+" (3). 


Figura 3.3 - Adicionando os atributos do objeto na aba Campos


É necessário configurar apenas os dados do Campo Id, os demais campos do objeto são do tipo String (Figura 3.3).

  • Tipo: selecione "Int16";
  • Permitir Nulo: desmarque essa opção;
  • Chave Primária: marque essa opção.


Por fim, acesse a aba Ações (destaque 1 da figura 3.4) e selecione na ação Para Contar a função "TotalUsersValue" que criamos no tópico anterior (Figura 3.4).


Figura 3.4 - Configuração da Ação Para Contar


Salve a fonte de dados em seguida.

View

Nessa última etapa vamos criar e configurar a página que exibirá o conteúdo obtido da API.

Clique com o botão direito do mouse na pasta Autenticado (localização: Formulário/Web/Autenticado ), selecione Novo > Formulário. Ao abrir a janela Novo, selecione a opção Formulário Vazio, clique em Avançar, em seguida, escreva "api-users" no campo Nome do Arquivo. Por fim, clique em Finalizar (Figura 4.1).


Figura 4.1 - Novo formulário web


Após abrir a janela de edição da view, 







  • Sem rótulos