Codificare le API con Thunkable

  • Scopri cosa sono le interfacce di programmazione delle applicazioni (API) 

  • Usa un'API in un'applicazione per ottenere informazioni

Queste sono le attività di questa lezione:

API

API sta per interfaccia di programmazione dell'applicazione.

Un'API è un modo per ottenere informazioni da un sito web o da un database.

Mentre il cloud storage è solitamente un'informazione interna condivisa all'interno della tua applicazione, le API permettono alla tua applicazione di accedere a informazioni esterne da internet.

Archiviazione in cloud
www collegato a 3 telefoni
API

Supponiamo che tu stia realizzando un'app per aiutare le persone a decidere cosa indossare in base al tempo. Potresti dedicare molto tempo a caricare i dati sul meteo in un database, ma ci sono molti siti web che mostrano il tempo. 

Una soluzione migliore sarebbe quella di prendere i dati da un sito web meteo e mostrarli agli utenti attraverso la tua app, utilizzando un'API.

Ecco un buon video che spiega come funzionano le API.

Per utilizzare un'API, devi: 

  1. Trova un sito web che utilizza le API. Ecco un elenco delle API pubbliche disponibili, elencate per argomento.
  2. Leggi la loro documentazione per sapere come utilizzare le loro API. La maggior parte dei siti fornisce esempi.
  3. Alcuni siti richiedono la registrazione di una chiave API prima di utilizzare le loro API. Nota: alcune API hanno un costo per essere utilizzate.
  4. Incorporare il codice API in Thunkable. 

ESEMPI DI CODIFICA

Qui di seguito troverai alcuni tutorial che ti permetteranno di esercitarti nell'uso delle API Web in Thunkable.

NOTA! In alcuni dei tutorial qui elencati, il componente Web API è mostrato nella finestra Designer. Tuttavia, nella versione attuale di Thunkable, troverai il componente Web API nell'Editor dei blocchi, alla voce Avanzate.

Clicca sul simbolo + per aggiungere un componente Web API. Puoi aggiungere l'URL e i parametri della query nella finestra delle proprietà che appare o nel codice. La codifica dei blocchi dovrebbe essere la stessa.

finestra del componente Thunkable che mostra l'API Web
Questo video offre una panoramica sulle API e sul componente Thunkable Web API.

Ecco un esempio molto elementare di utilizzo del metodo API di Google Maps per avviare l'applicazione Google Maps dalla tua applicazione, mirando a una posizione specifica.

Questo esempio di tutorial utilizza un'API di OpenWeatherMap.

È possibile creare un'intera playlist di diversi esempi di API Web.

ATTIVITÀ: APP PER LA NUTRIZIONE DELLA FRUTTA

Tempo stimato: 30 minuti

Visualizzazione delle informazioni sulla frutta tramite API

  1. Apri il progetto iniziale in Thunkable.
  2. Esegui l'applicazione per vedere come funziona.
  3. Crea una copia del progetto in modo da poterlo modificare.
  4. Guarda l'esempio di stringa JSON qui sotto per capire come si presenta.
  5. Al momento, l'applicazione visualizza solo le informazioni sulle calorie. Aggiungi una seconda etichetta sotto CalorieLabel per visualizzare uno degli altri valori nutrizionali restituiti.
Progetto Starter aperto

Le migliori pratiche: Curiosità: per cosa sta json? "JavaScript Object Notation". Json è stato creato nel 1999 e quasi tutti i dati che utilizziamo o riceviamo ogni giorno devono utilizzare json in qualche modo. Se non avessimo json, quasi tutte le tecnologie che abbiamo sarebbero inutili. Quasi tutti i dati provenienti dal cloud hanno bisogno di json per passare i dati.

Domande guida da porre agli studenti:

Puoi creare un'API tra te e i tuoi amici? 

Se uno dei tuoi amici dice "/hello", tu risponderai con un saluto. Si tratta essenzialmente di un'API. Una persona richiede qualcosa (il saluto) e tu rispondi con un saluto a tua scelta. Ci possono essere esempi più complicati? /abbraccio, /triviaQuestion, /story, /weekendSummary

I consigli dei mentori sono forniti dal supporto di AmeriCorps.

A stilizzata, logo AmeriCorps in blu

Ecco un esempio di stringa JSON restituita da FruityVice per la banana.

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

Speriamo che tu sia riuscito ad aggiungere una seconda etichetta nutrizionale con le informazioni API!

Se vuoi vedere una possibile soluzione, clicca su questo pulsante. 

RIFLESSIONE

L'utilizzo delle API nella tua applicazione può essere uno strumento molto potente, ma non è facile da implementare!

Devi dedicare del tempo a leggere la documentazione API del sito per capire come ottenere le informazioni di cui hai bisogno.

rete interconnessa
Pensi che questo sia un componente utile per la tua applicazione?
Riesci a trovare un sito web online che fornisca le informazioni di cui hai bisogno?

REVISIONE DEI TERMINI CHIAVE

  • Interfaccia di programmazione dell'applicazione (API) - un modo per ottenere informazioni da un altro sito web o database da utilizzare nella tua applicazione.