Kodierung von APIs mit Thunkable

  • Lernen, was Anwendungsprogrammierschnittstellen (APIs) sind 

  • Eine API in einer App verwenden, um Informationen zu erhalten

Das sind die Aktivitäten für diese Lektion:

API

API steht für Anwendungsprogrammierschnittstelle.

Eine API ist ein Weg, wie du erhalten kannst. Informationen von einer Website oder einer Datenbank.

Während es sich beim Cloud-Speicher in der Regel um interne Informationen handelt, die innerhalb deiner App geteilt werden, ermöglichen APIs deiner App den Zugriff auf externe Informationen aus dem Internet.

Cloud-Speicher
www connected to 3 phones
API

Angenommen, du entwickelst eine App, mit der du den Leuten helfen kannst, anhand des Wetters zu entscheiden, was sie anziehen sollen. Du könntest viel Zeit damit verbringen, Daten über das Wetter in eine Datenbank hochzuladen, aber es gibt viele Websites, die das Wetter anzeigen. 

Eine bessere Lösung wäre es, die Daten von einer Wetter-Website abzurufen und sie deinen Nutzern über deine App mithilfe einer API anzuzeigen.

Hier ist ein gutes Video, das erklärt, wie APIs funktionieren.

Um eine API zu nutzen, musst du: 

  1. Finde eine Website, die APIs verwendet. Hier ist eine Liste der öffentlichen APIs, die verfügbar sind, nach Themen geordnet.
  2. Lies die Dokumentation, um zu erfahren, wie du die APIs nutzen kannst. Die meisten Websites geben Beispiele.
  3. Bei einigen Websites musst du dich für einen API-Schlüssel registrieren, bevor du ihre APIs nutzen kannst. Beachte, dass die Nutzung einiger APIs Geld kostet.
  4. Binde den API-Code in Thunkable ein. 

KODIERUNGSBEISPIELE

Im Folgenden findest du einige Tutorials, mit denen du die Verwendung von Web-APIs in Thunkable üben kannst.

HINWEIS: In einigen der hier aufgeführten Tutorials wird die Web-API-Komponente im Designer-Fenster angezeigt. In der aktuellen Version von Thunkable findest du die Web-API-Komponente jedoch im Blocks-Editor unter Erweitert.

Klicke auf das +, um eine Web-API-Komponente hinzuzufügen. Du kannst die URL und die Abfrageparameter im Eigenschaftsfenster, das erscheint, oder im Code hinzufügen. Die Codierung der Blöcke sollte die gleiche sein.

component window Thunkable showing Web API
Dieses Video gibt einen Überblick über APIs und die Thunkable Web API Komponente.

Hier ist ein sehr einfaches Beispiel für die Verwendung der Google Maps API um die Google Maps App von deiner eigenen App aus zu starten und einen bestimmten Ort auszuwählen.

Dieses Beispiel-Tutorial verwendet eine API von OpenWeatherMap.

Thunkable als eine ganze Playlist mit verschiedenen Web-API-Beispielen.

AKTIVITÄT: OBST-ERNÄHRUNGS-APP

Geschätzte Zeit: 30 Minuten

Informationen über Früchte mit API anzeigen

  1. Öffne das Starterprojekt in Thunkable.
  2. Führe die App aus, um zu sehen, wie sie funktioniert.
  3. Erstelle eine Kopie des Projekts, damit du es bearbeiten kannst.
  4. Schau dir den Beispiel-JSON-String unten an, um zu verstehen, wie er aussieht.
  5. Im Moment zeigt die App nur Kalorieninformationen an. Füge ein zweites Label unter CalorieLabel hinzu, um einen der anderen Nährwerte anzuzeigen.
Starterprojekt öffnen

Beste Praktiken: Fun Fact: Wofür steht json? "JavaScript Object Notation". Json wurde 1999 entwickelt und fast alle Daten, die wir täglich nutzen oder erhalten, müssen in irgendeiner Form json verwenden. Ohne json wäre fast jede Technologie, die wir haben, nutzlos. Fast alle Daten aus der Cloud brauchen json, um Daten zu übertragen.

Leitfragen, die du den Schülern stellen kannst:

Kannst du eine API zwischen dir und deinen Freunden erstellen? 

Wenn einer deiner Freunde "/hello" sagt, wirst du mit einem Gruß antworten. Das ist im Grunde eine API. Eine Person fordert etwas an (das "Hallo") und du antwortest mit einem Gruß deiner Wahl. Könnte es noch kompliziertere Beispiele geben? /hug, /triviaQuestion, /story, /weekendSummary

Mentorentipps werden durch die Unterstützung von AmeriCorps bereitgestellt.

stylized A, AmeriCorps logo in navy

Hier ist ein Beispiel für einen JSON-String, der von FruityVice für Banane zurückgegeben wird.

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

Hoffentlich hast du erfolgreich eine zweite Nährwertkennzeichnung mit API-Informationen hinzugefügt!

Wenn du eine mögliche Lösung sehen möchtest, klicke auf diese Schaltfläche. 

REFLEXION

Die Verwendung von APIs in deiner App kann ein sehr leistungsfähiges Werkzeug sein, aber es ist nicht einfach zu implementieren!

Du musst dir die Zeit nehmen, die API-Dokumentation für die Website zu lesen, um zu verstehen, wie du die benötigten Informationen bekommst.

interconnected network
Denkst du, dass dies eine nützliche Komponente für deine App ist?
Kannst du eine Online-Website finden, die dir die benötigten Informationen liefert?

ÜBERPRÜFUNG DER SCHLÜSSELBEGRIFFE

  • Anwendungsprogrammierschnittstelle (API) - eine Möglichkeit, Informationen von einer anderen Website oder Datenbank zu erhalten, um sie in deiner Anwendung zu verwenden

ZUSÄTZLICHE RESSOURCEN