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.

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. 

{
    "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).

Figura 2 - 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 3 - 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.

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.