programando APIs no Thunkable

  • Saber o que são interfaces de programação de aplicativos (APIs) 

  • Usar uma API em um aplicativo para obter informações

Estas são as atividades para esta lição:

API

API significa interface de programação de aplicativos.

Uma API é uma maneira pela qual você pode obter informações de um site ou banco de dados.

Embora o armazenamento em nuvem geralmente seja uma informação interna compartilhada no app, as APIs permitem que o app acesse informações externas da Internet.

Armazenamento em nuvem
www conectado a 3 telefones
API

Digamos que você esteja criando um aplicativo para ajudar as pessoas a decidir o que vestir com base no clima. Você poderia gastar muito tempo carregando dados sobre o clima em um banco de dados, mas há muitos sites que mostram o clima. 

Uma solução melhor seria simplesmente obter dados de um site de meteorologia e mostrá-los aos seus usuários por meio do app, usando uma API.

Aqui está um bom vídeo explicativo de como as APIs funcionam.

Para usar uma API, você precisa: 

  1. Encontrar um site que use APIs. Aqui está uma lista de APIs públicas que estão disponíveis, listadas por tópico.
  2. Ler a documentação para saber como usar suas APIs. A maioria dos sites fornece exemplos.
  3. Alguns sites exigem que você se registre para obter uma chave de API antes de usar suas APIs. Observe que algumas APIs custam dinheiro para serem usadas.
  4. Incorporar o código da API ao Thunkable. 

EXEMPLOS

Abaixo estão alguns tutoriais para que você pratique o uso de APIs da Web no Thunkable.

OBSERVAÇÃO! Em alguns dos tutoriais listados aqui, o componente Web API é mostrado na janela Designer. Entretanto, na versão atual do Thunkable, você encontrará o componente Web API no Blocks Editor, em Advanced (Avançado).

Clique no + para adicionar um componente de API da Web. Você pode adicionar o URL e os parâmetros de consulta na janela de propriedades que aparece ou no código. Programar os blocos também.

janela do componente Thunkable mostrando a API da Web
Este vídeo apresenta uma visão geral das APIs e do componente Thunkable Web API.

Aqui está um exemplo muito básico de uso da API do Google Maps para iniciar o aplicativo Google Maps a partir do seu próprio aplicativo, visando a um local específico.

Este tutorial de exemplo usa uma API do OpenWeatherMap.

Thunkable como uma lista de reprodução inteira de diferentes exemplos de API da Web.

ATIVIDADE: APLICATIVO DE NUTRIÇÃO COM FRUTAS

Tempo estimado: 30 minutos

Exiba informações sobre frutas usando a API

  1. Abra o projeto inicial no Thunkable.
  2. Execute o aplicativo para ver como ele funciona.
  3. Faça uma cópia do projeto para que você possa editá-lo.
  4. Veja o exemplo de cadeia de caracteres JSON abaixo para entender como ela se parece.
  5. No momento, o aplicativo exibe apenas informações sobre calorias. Adicione um segundo rótulo abaixo de CalorieLabel para exibir um dos outros valores nutricionais retornados.
Abrir o Projeto Inicial

Melhores práticas: Fato curioso: o que significa json? "Notação de objeto JavaScript". Json foi criado em 1999 e quase todos os dados que usamos ou obtemos todos os dias precisam usar json de alguma forma. Se não tivéssemos json, quase toda a tecnologia que temos seria inútil. Quase todos os dados da nuvem precisam de json para transmitir dados.

Perguntas de orientação para fazer a estudantes:

Você pode criar uma API entre você e seus amigos? 

Se um de seus amigos disser "/Olá", você responderá com uma saudação. Isso é essencialmente uma API. Uma pessoa solicita algo (o olá) e você responde com a saudação de sua escolha. Poderia haver exemplos mais complicados? /abraço, /QuestãoDeTrivia, /história, /ResumoDoFimDeSemana

As dicas são fornecidas com o apoio do AmeriCorps.

A estilizado, logotipo da AmeriCorps em azul-marinho

Aqui está um exemplo de string JSON retornada por FruityVice para banana.

{ "genus": "Musa", 
"name": "Banana",
"id": 1,
"family": "Musaceae",
"order": "Zingiberales",
"nutritions":
{ "carbohydrates": 22,
"protein": 1,
"fat": 0.2,
"calories": 96,
"sugar": 17.2
}
}

Esperamos que você tenha adicionado com sucesso um segundo rótulo nutricional com informações de API!

Se você quiser ver uma possível solução, clique neste botão. 

REFLEXÃO

O uso de APIs no app pode ser uma ferramenta muito poderosa, mas não é fácil de implementar!

Você deve dedicar algum tempo à leitura da documentação da API do site para entender como obter as informações de que precisa.

rede interconectada
Você acha que esse é um componente útil para o app da sua equipe?
Você consegue encontrar um site on-line que forneça as informações de que precisa?

REVISÃO DOS PRINCIPAIS TERMOS

  • Interface de programação de aplicativos (API) - uma maneira de obter informações de outro site ou banco de dados para usar em o app

RECURSOS ADICIONAIS