kodular api consumir

Kodular e API – Consumindo api no Kodular

Iniciando o Projeto no Kodular

O nosso objetivo neste tutorial será consumir uma api e popular nosso aplicativo com ela, ou seja vamos obter os dados que queremos de um determinado provedor na web e colocar essas informações em nosso aplicativo criado no kodular.

Para criar nosso aplicativo no Kodular e consumir uma api primeiro precisamos iniciar um novo projeto.

Depois disso, precisamos ter acesso a uma API. Neste exemplo usaremos a API do site viaCep 

A requisição é feita da seguinte forma:
Primeiro vamos acessar uma URL e passar o parâmetro que queremos por meio dessa URL. Neste exemplo usaremos a URL fornecida pelo site que é viacep.com.br/ws/ e junto passamos o CEP  a ser pesquisado e o formato que queremos em nosso retorno, usaremos Json.
Nosso exemplo para o CEP 01001000 ficaria assim:
https://viacep.com.br/ws/01001000/json/
Clique aqui e veja a resposta dessa requisição em seu navegador.

A resposta para a requisição acima é no formato Json, o que facilita nossa vida na hora de decodificar usando os blocos do Kodular.

Resposta e Json do exemplo acima:

{
  "cep": "01001-000",
  "logradouro": "Praça da Sé",
  "complemento": "lado ímpar",
  "bairro": "Sé",
  "localidade": "São Paulo",
  "uf": "SP",
  "unidade": "",
  "ibge": "3550308",
  "gia": "1004"
}

Com essa resposta da API e alguns blocos no Kodular podemos obter os dados:
CEP
LOGRADOURO
COMPLEMENTO
BAIRRO
LOCALIDADE
UF (SIGLA)
UNIDADE
IBGE
GIA

Fazendo a requisição da API no Kodular

Agora que entendemos como funciona uma requisição de uma API e o seu retorno podemos fazer isso em nosso aplicativo criado no Kodular, app inventor ou thunkable.

Para começar vamos precisar do componente WEB que podemos adicioná-lo por simplesmente arrastar para nossa área de trabalho no Kodular

kodular app api

Blocos:

Agora nos blocos vamos usar o evento inicialize para alterar algumas configurações do componente WEB e também para dar inicio a nossa requisição. É claro que isso poderia ser feito a partir de um botão, clock ou outro componente similar.

Vamos setar a URL do nosso componente WEB para a URL que faz a solicitação de nossa api.
Vamos usar o mesmo exemplo do Via Cep.
Veja na imagem abaixo como ficaria nossa solicitação:

kodular

Neste bloco do meio onde está nosso CEP poderíamos facilmente colocar uma entrada de um TextBox por exemplo.

Dando sequência ao nosso app, agora vamos obter o retorno Json usando o evento when Web1 got text do nosso componente WEB

Como nossa resposta está no formato .Json, vamos decodificá-la para o formato de texto, assim podemos usar o bloco de dicionário para encontrar os valores que queremos.
Veja na imagem abaixo:

kodular api json

Encontrando os valores e colocando no app

Agora imagine que seu objetivo seja descobrir o nome da cidade a qual pertence o CEP.
Neste caso vamos adicionar uma label no nosso aplicativo e setar ou transformar ela para o nome que está retornando em nossa API.

Para isso vamos usar o bloco get value for key que encontramos nos blocos de dicionário (Dictionaries).
Entenda melhor vendo a imagem do bloco completo abaixo:

 

dictionaries kodular

Se fizermos dessa forma o resultado obtido em nossa Label1 será o nome da cidade.
Se o valor que precisamos é outro, basta mudar a KEY do nosso bloco para um dos seguintes valores que nossa API disponibiliza:
CEP
LOGRADOURO
COMPLEMENTO
BAIRRO
LOCALIDADE
UF (SIGLA)
UNIDADE
IBGE
GIA
Temos que colocar em letras minúsculas é claro.
Para baixar o aia dessa aula clique aqui

7 comentários sobre “Kodular e API – Consumindo api no Kodular

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *