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
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
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:
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:
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:
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
