In der heutigen digitalen Welt sind Daten das Herzstück jeder interaktiven Anwendung. Ob Sie Wettervorhersagen anzeigen, Aktienkurse verfolgen, aktuelle Nachrichten präsentieren oder einfach nur zufällige Witze erzählen möchten – all diese Informationen müssen irgendwie in Ihre App gelangen. Für uns, die wir mit der leistungsstarken Plattform Thunkable arbeiten, bietet sich hier eine elegante und effiziente Lösung an: die Integration von Daten über APIs (Application Programming Interfaces). Dieser Artikel führt Sie Schritt für Schritt durch den Prozess, wie Sie externe Informationen von Webseiten abrufen und in Ihre Thunkable App integrieren können. Machen Sie sich bereit, die Möglichkeiten Ihrer Projekte zu erweitern!
Einleitung: Die Datenautobahn für Ihre Thunkable App
Stellen Sie sich vor, Sie bauen eine Thunkable App, die Benutzern helfen soll, das beste Restaurant in ihrer Nähe zu finden. Ohne externe Daten müssten Sie jedes Restaurant manuell eingeben und aktualisieren – ein Albtraum! Hier kommen APIs ins Spiel. Sie sind wie eine Brücke oder eine „Datenautobahn“, die Ihre App mit riesigen Datenbanken und Diensten im Internet verbindet. Thunkable, bekannt für seine intuitive Drag-and-Drop-Oberfläche und blockbasierte Programmierung, macht es erstaunlich einfach, diese Brücke zu bauen und Ihre Apps dynamisch, aktuell und unfassbar vielseitig zu gestalten.
Was ist eine API und warum ist sie so wichtig?
Bevor wir uns ins technische Detail stürzen, lassen Sie uns kurz klären, was eine API überhaupt ist. Das Akronym API steht für „Application Programming Interface”. Im Grunde ist eine API ein Satz von Regeln und Protokollen, die es verschiedenen Softwareanwendungen ermöglichen, miteinander zu kommunizieren. Eine gängige Analogie ist die des Kellners in einem Restaurant:
- Sie (Ihre Thunkable App) möchten etwas bestellen (Daten anfordern).
- Die Küche (der Webserver mit den Daten) hat die gewünschten Informationen.
- Der Kellner (die API) nimmt Ihre Bestellung auf, übermittelt sie der Küche und bringt Ihnen die fertige Speise (die angeforderten Daten) zurück.
Sie müssen nicht wissen, wie die Küche die Speise zubereitet; Sie geben einfach Ihre Bestellung auf. Genauso müssen Sie bei einer API nicht verstehen, wie die Daten intern gespeichert oder verarbeitet werden, solange Sie wissen, wie Sie sie anfordern müssen. Für Webanwendungen und mobile Apps sind REST-APIs besonders populär. Sie basieren auf HTTP-Anfragen (wie GET, POST, PUT, DELETE), um Daten zu senden oder zu empfangen.
Vorteile von APIs für Thunkable Projekte:
- Dynamische Inhalte: Ihre App muss nicht mit statischen, veralteten Informationen arbeiten. Daten werden bei Bedarf aktuell abgerufen.
- Erweiterte Funktionalität: Integrieren Sie leistungsstarke Funktionen von Drittanbietern, ohne sie selbst entwickeln zu müssen (z.B. Karten, Zahlungsdienste, Social Media-Feeds).
- Effizienz: Vermeiden Sie redundante Datenspeicherung und -pflege.
- Interaktivität: Ermöglichen Sie es Benutzern, aktiv mit externen Diensten zu interagieren (z.B. Inhalte hochladen, Profile aktualisieren).
Die Vorbereitung: Den richtigen Datenzugang finden
Bevor Sie in Thunkable loslegen, benötigen Sie eine API, die Ihnen die gewünschten Daten zur Verfügung stellt. Es gibt Tausende von öffentlichen APIs für alle möglichen Zwecke:
- Wetter-APIs: OpenWeatherMap, AccuWeather
- Nachrichten-APIs: NewsAPI
- Währungsrechner-APIs: ExchangeRate-API
- Witze- oder Zitate-APIs: JokeAPI, Forismatic
- Open Data APIs: Viele Regierungen und Organisationen bieten öffentliche Datensätze an (z.B. Städte, Verkehrsinformationen).
Für den Einstieg empfiehlt es sich, eine einfache API zu wählen, die keine oder nur eine sehr unkomplizierte Authentifizierung benötigt. Eine gute Quelle für solche APIs ist Public APIs oder APIList.
Die goldene Regel: Die API-Dokumentation lesen!
Egal, welche API Sie wählen, der wichtigste Schritt ist das gründliche Studium der API-Dokumentation. Hier finden Sie alle notwendigen Informationen:
- Basis-URL (Base URL): Die Hauptadresse der API (z.B.
https://api.example.com). - Endpunkte (Endpoints): Spezifische Pfade, die für bestimmte Daten oder Aktionen verwendet werden (z.B.
/weather,/jokes). - Parameter: Zusätzliche Informationen, die Sie mit Ihrer Anfrage senden müssen (z.B. Stadtname, Postleitzahl, Anzahl der Ergebnisse).
- Antwortformate: Wie die Daten zurückgegeben werden (oft JSON, manchmal XML oder reiner Text).
- Authentifizierung: Ob und wie Sie sich bei der API anmelden müssen (z.B. mit einem API-Schlüssel (API Key) oder einem Token).
- Ratenbegrenzungen (Rate Limiting): Wie viele Anfragen Sie pro Zeiteinheit stellen dürfen.
API-Schlüssel (API Keys): Ihr Zugangsticket
Viele APIs erfordern einen API-Schlüssel. Dies ist eine eindeutige Zeichenfolge, die Sie bei der Registrierung auf der Website des API-Anbieters erhalten. Dieser Schlüssel dient dazu, Ihre Anfragen zu identifizieren und zu authentifizieren. Behandeln Sie Ihren API-Schlüssel wie ein Passwort: Geben Sie ihn nicht öffentlich preis und verankern Sie ihn nicht direkt in Ihrem Quellcode, wenn Sie diesen öffentlich zugänglich machen.
Thunkable und APIs: Die richtigen Werkzeuge
Thunkable bietet die perfekte Umgebung, um mit APIs zu arbeiten. Die wichtigsten Komponenten dafür sind:
-
Die Web API Komponente
Dies ist das Herzstück der API-Integration in Thunkable. Sie finden sie unter „Components” > „Connectivity” im Design-Bereich. Mit dieser Komponente können Sie HTTP-Anfragen (GET, POST, PUT, DELETE) an eine beliebige URL senden und die Antworten empfangen. Wichtige Eigenschaften, die Sie im Blocks Editor konfigurieren werden, sind die
URLund gegebenenfallsHeaderundBody. -
Die JSON Komponente (optional, aber oft nützlich)
APIs geben Daten häufig im JSON (JavaScript Object Notation)-Format zurück. JSON ist ein leichtgewichtiges Datenformat, das menschenlesbar und einfach für Maschinen zu parsen ist. Die JSON Komponente in Thunkable hilft Ihnen, geschachtelte JSON-Objekte zu durchsuchen und bestimmte Datenpunkte zu extrahieren. Oftmals benötigen Sie sie nicht direkt, da die Web API Komponente in ihrem `got JSON` Event bereits ein geparstes JSON-Objekt liefert.
-
UI-Elemente zur Datendarstellung
Sie benötigen natürlich Komponenten, um die abgerufenen Daten anzuzeigen, z.B.
Label,Image,List Viewer,Data Viewer ListoderText Input.
Schritt für Schritt: Daten von einer Website abrufen – Ein Praxisbeispiel
Um das Gelernte zu festigen, erstellen wir eine einfache Thunkable App, die einen zufälligen Witz von der JokeAPI abruft und anzeigt. Diese API ist perfekt für den Einstieg, da sie keine Authentifizierung erfordert und eine einfache JSON-Antwort liefert.
Beispiel-API: JokeAPI
Wir verwenden den Endpunkt für einen einzelnen, zufälligen Witz: https://v2.jokeapi.dev/joke/Any?type=single
Eine typische Antwort sieht so aus:
{
"error": false,
"category": "Programming",
"type": "single",
"joke": "Why do programmers prefer dark mode? Because light attracts bugs!",
"flags": {
"nsfw": false,
"religious": false,
"political": false,
"racist": false,
"sexist": false,
"explicit": false
},
"id": 27,
"safe": true,
"lang": "en"
}Wir sind hier an der Eigenschaft "joke" interessiert.
Schritt 1: Das UI in Thunkable vorbereiten
- Öffnen Sie Ihr Thunkable Projekt oder erstellen Sie ein neues.
- Ziehen Sie einen Button auf den Bildschirm und benennen Sie ihn um in „btnGetJoke” mit dem Text „Witz holen”.
- Ziehen Sie ein Label auf den Bildschirm unter den Button. Benennen Sie es um in „lblJokeDisplay” und lassen Sie den Text leer oder setzen Sie ihn auf „Hier erscheint der Witz…”.
- Fügen Sie die Komponente Web API hinzu. Sie finden sie unter „Components” > „Connectivity”. Benennen Sie sie um in „WebAPI_Joke”.
Schritt 2: Die Web API Komponente konfigurieren
Im Design-Bereich, wenn Sie „WebAPI_Joke” ausgewählt haben, setzen Sie die Eigenschaft URL auf:
https://v2.jokeapi.dev/joke/Any?type=single
(Hinweis: Sie können die URL auch dynamisch im Blocks Editor setzen, was bei variablen Parametern oft nötig ist.)
Schritt 3: Daten anfordern (GET-Request) im Blocks Editor
Wechseln Sie in den Blocks Editor.
- Suchen Sie den Block
when btnGetJoke Click. Ziehen Sie ihn auf die Arbeitsfläche. - Suchen Sie unter „WebAPI_Joke” den Block
call WebAPI_Joke GET. Ziehen Sie ihn in denwhen btnGetJoke ClickBlock.
Damit sagen wir der App: „Wenn der Button ‘Witz holen’ geklickt wird, sende eine GET-Anfrage an die konfigurierte JokeAPI URL.”
Schritt 4: Die Antwort verarbeiten (got JSON)
Nachdem die Web API eine Antwort erhalten hat, wird ein bestimmtes Ereignis ausgelöst. Da wir erwarten, dass die JokeAPI uns JSON zurückgibt, verwenden wir das got JSON-Ereignis.
- Suchen Sie unter „WebAPI_Joke” den Block
when WebAPI_Joke got JSON. Ziehen Sie ihn auf die Arbeitsfläche. Dieser Block hat zwei Parameter:object(das geparste JSON-Objekt) undresponse(den rohen Text der Antwort, falls benötigt). - Wir möchten den Wert der Eigenschaft
jokeaus dem zurückgegebenenobjectextrahieren. Suchen Sie unter „Object” den Blockget property of object. - Ziehen Sie diesen Block in den
when WebAPI_Joke got JSONBlock. Verbinden Sie denobject-Parameter des `get property` Blocks mit demobject-Parameter desgot JSONBlocks. - In den Text-Eingabeschlitz des `get property` Blocks geben Sie genau
jokeein (dies muss exakt dem Eigenschaftsnamen in der JSON-Antwort entsprechen). - Suchen Sie unter „lblJokeDisplay” den Block
set lblJokeDisplay Text to. Ziehen Sie ihn in denwhen WebAPI_Joke got JSONBlock. - Verbinden Sie das Ergebnis des
get property of objectBlocks mit dem Text-Parameter desset lblJokeDisplay Text toBlocks.
Ihr Block-Setup sollte nun so aussehen:
when btnGetJoke Click
call WebAPI_Joke GET
when WebAPI_Joke got JSON (object, response)
set lblJokeDisplay Text to (get property joke of object)Testen Sie Ihre App! Wenn Sie auf den Button klicken, sollte innerhalb weniger Sekunden ein zufälliger Witz im Label erscheinen.
Exkurs: Umgang mit komplexeren JSON-Strukturen
Manchmal sind JSON-Antworten verschachtelt oder enthalten Arrays. Zum Beispiel, wenn die Antwort so aussieht:
{
"data": {
"weather": [
{
"city": "Berlin",
"temperature": "20C"
}
]
}
}Um hier auf „city” zuzugreifen, würden Sie Blöcke wie folgt verschachteln:
get property city of (get item 1 of (get property weather of (get property data of object)))Die JSON Komponente kann auch hilfreich sein, insbesondere wenn Sie eine JSON-Zeichenkette haben, die Sie zuerst parsen müssen, bevor Sie auf die Eigenschaften zugreifen können (z.B. wenn Sie das `got Text` Ereignis verwenden und nicht `got JSON`).
Häufige Herausforderungen und Best Practices
1. Fehlerbehandlung
Was passiert, wenn die API nicht erreichbar ist, keine Daten zurückgibt oder ein Fehler auftritt? Ihre App sollte darauf vorbereitet sein. Die Web API Komponente hat ein got error-Ereignis. Nutzen Sie dieses, um Benutzern eine aussagekräftige Fehlermeldung anzuzeigen (z.B. „Daten konnten nicht geladen werden, bitte versuchen Sie es später erneut”) anstatt einer leeren Anzeige oder einem Absturz.
when WebAPI_Joke got error (error)
set lblJokeDisplay Text to (join "Fehler beim Laden: " error)
// Optional: Console.log(error) für DebuggingZusätzlich sollten Sie prüfen, ob die erhaltenen Daten überhaupt vorhanden sind oder leer sind, bevor Sie versuchen, sie anzuzeigen.
2. Authentifizierung und API Keys
Für APIs, die einen API-Schlüssel erfordern, gibt es meist zwei Wege, ihn zu übergeben:
- Als URL-Parameter: Oft als
?apikey=IHR_SCHLUESSELan die URL angehängt. - Als Header: Im Blocks Editor können Sie im
call WebAPI_Joke GETBlock auf das Zahnrad klicken, um einenheaders-Parameter hinzuzufügen. Hier fügen Sie dann ein Objekt mit Key-Value-Paaren hinzu (z.B."Authorization": "Bearer IHR_TOKEN"oder"x-api-key": "IHR_SCHLUESSEL"). Die genaue Bezeichnung finden Sie in der API-Dokumentation.
WICHTIG: Wenn Sie Ihre Thunkable-App öffentlich teilen oder den Quellcode veröffentlichen, stellen Sie sicher, dass sensible API-Schlüssel nicht direkt im Projekt eingebettet sind. Für fortgeschrittenere Anwendungen sollten Sie einen eigenen Backend-Server verwenden, der die API-Anfragen im Namen Ihrer App stellt und den Schlüssel sicher verwaltet. Für einfache Test-Apps ist die direkte Einbindung in Thunkable jedoch oft akzeptabel.
3. Ratenbegrenzungen (Rate Limiting)
Viele APIs begrenzen die Anzahl der Anfragen, die Sie pro Zeiteinheit stellen dürfen, um Missbrauch zu verhindern und die Serverlast zu kontrollieren. Überschreiten Sie diese Grenze, erhalten Sie möglicherweise Fehlermeldungen (z.B. HTTP-Statuscode 429 „Too Many Requests”). Achten Sie auf die Angaben in der API-Dokumentation und implementieren Sie gegebenenfalls Mechanismen, um nicht zu viele Anfragen auf einmal zu senden (z.B. durch Caching von Daten oder eine Wartezeit zwischen Anfragen).
4. Datenformatierung und -prüfung
Nicht alle Daten sind immer im gewünschten Format. Zahlen können als Text ankommen, Daten müssen neu formatiert werden. Verwenden Sie die Text-, Listen- und Zahlenblöcke in Thunkable, um Daten vor der Anzeige oder Weiterverarbeitung anzupassen. Prüfen Sie immer, ob die erwarteten Eigenschaften in der JSON-Antwort tatsächlich vorhanden sind, bevor Sie versuchen, auf sie zuzugreifen, um Fehler zu vermeiden.
5. Benutzererfahrung
Eine gute Nutzererfahrung ist entscheidend. Zeigen Sie dem Benutzer an, wenn Daten geladen werden (z.B. mit einem Loading Spinner oder einem temporären Text). Geben Sie klares Feedback bei Fehlern. Die Ladezeiten können variieren, daher sollte Ihre UI nicht „einfrieren”, während auf eine API-Antwort gewartet wird.
Jenseits des GET-Requests: Daten senden mit POST
Bisher haben wir uns auf das Abrufen von Daten mit GET-Anfragen konzentriert. Mit der Web API Komponente können Sie aber auch Daten an einen Server senden, z.B. um ein Benutzerprofil zu aktualisieren, einen Eintrag in eine Datenbank zu schreiben oder eine Nachricht zu versenden. Dafür verwenden Sie in der Regel POST-Anfragen.
Beim call Web API POST-Block gibt es einen zusätzlichen Parameter für den body der Anfrage. Hier übergeben Sie die Daten, die Sie senden möchten, oft ebenfalls im JSON-Format. Sie müssten dann im Blocks Editor ein Objekt mit den zu sendenden Daten erstellen und dieses als body übergeben. Auch hier ist die API-Dokumentation Ihr bester Freund, um das korrekte Format des body zu ermitteln.
Fazit: Grenzenlose Möglichkeiten für Ihre Thunkable Apps
Die Fähigkeit, externe Daten über APIs in Ihre Thunkable Apps zu integrieren, ist ein Game-Changer. Sie verwandelt statische Anwendungen in dynamische, interaktive Erlebnisse, die auf die reale Welt reagieren können. Von der Anzeige von Wetterdaten über das Abrufen von Produktdetails bis hin zur Interaktion mit sozialen Medien – die Möglichkeiten sind nahezu unbegrenzt.
Der Einstieg mag zunächst ein wenig einschüchternd wirken, aber mit den grundlegenden Konzepten von APIs, der Web API Komponente in Thunkable und dem Verständnis der JSON-Struktur sind Sie bestens gerüstet. Beginnen Sie klein, experimentieren Sie mit einfachen Public APIs und erweitern Sie Ihre Kenntnisse Schritt für Schritt. Die Welt der Datenintegration wartet darauf, von Ihnen entdeckt zu werden. Viel Erfolg beim Coden und viel Spaß beim Erschaffen erstaunlicher Thunkable Apps!