Daten und APIs

In den letzten Jahren basieren immer mehr Websites und Apps auf Datensätzen von Partnern oder Drittanbietern, die erst im letzten Moment abgerufen werden, d.h. kurz bevor oder nachdem die Nutzer*innen das Ding geladen haben.

Dazu braucht es drei Zutaten:

1. Die Daten müssen im Web verfügbar sein.
2. Die Daten müssen in einem Format vorliegen, das verarbeitet werden kann.
3. Die Daten müssen abgeholt werden.

Die erste Komponente ist eine Schnittstelle, die mit einer Programmiersprache angesprochen werden kann. So eine Schnittstelle heisst API: ‘Application programming interface’.

Das zweite ist ein Datenformat, das von Programmiersprachen gut verarbeitet werden kann. Es muss standardisiert sein, d.h. immer dem gleichen Muster entsprechen, so dass nicht plötzlich unvorhergesehene Strukturen oder Zeichen zu Fehlern führen können.

Das dritte ist der sogenannte API call: JavaScript – ein unerwartet komplexer Prozess.

API

Eine API ist nichts klar Definiertes, sondern es handelt sich neben einer Adresse, unter welcher bestimmte Daten verfügbar sind auch um Regeln, die definieren auf welche Art diese Adresse angesprochen werden muss.

Im besten Fall existiert eine Dokumentation (‘API specification’), in der diese Regeln formuliert sind und auch Beispiele in verschiedenen Programmiersprachen gezeigt werden. Das ist leider die Ausnahme.

Es gibt APIs, die komplett offen sind. Bei anderen ist eine Authentifizierung erforderlich und es kann Limiten geben um zu verhindern, dass grössere Datenmengen abgefragt werden, als der Server zu liefern imstande ist.

Beispiele von APIs

• NASA Open API
• Pokemon PokeAPI
• Twitter API
• Mail Chimp API
• Swiss Topo (nie wieder Google Maps in deinen Projekten)

Das JSON-Format

JSON ist nicht das einzige Format zum Datenaustausch zwischen Maschinen. Ein anderes, sehr verbreitetes, ist z.B. XML. JSON hat sich aber in den letzten Jahren immer weiter verbreitet und ist beliebt, weil es einem Format entspricht, das Programmierer intuitiv begreifen, weil es in praktisch jeder Programmiersprache in ähnlicher Weise existiert.

JSON Beispiel

{
    "name": "Matilda",
    "nachname": "Muster",
    "alter": 35,
    "hobbies": ["Joggen", "Philatelie", "Kakteen"],
    "führerschein": "true",
    "heuschnupfen": "false"
}

Im Vergleich dazu ein Objekt, dem JavaScript Datentyp für Datensammlungen.

{
    name: "Matilda",
    nachname: "Muster",
    alter: 35,
    hobbies: ["Joggen", "Philatelie", "Kakteen"],
    führerschein: true,
    heuschnupfen: false
}

Und ein Dictionary, so heisst das Gleiche in Python.

{
    "name": "Matilda",
    "nachname": "Muster",
    "alter": 35,
    "hobbies": ["Joggen", "Philatelie", "Kakteen"],
    "führerschein": True,
    "heuschnupfen": False
}

Du siehst, dass JSON sehr nahe an JS/Python ist. Das Beispiel oben ist nicht die einzige Form, in der sich JSON manifestieren kann. Es gibt auch die Möglichkeit, einen Datensatz in eckigen [ Klammern ] einzufassen, was dann einer Python-Liste oder einem JavaScript-Array entspricht. Das Prinzip ist aber das Gleiche, darum verzichte ich dafür auf ein Beispiel.

Zum Vergleich noch ein Beispiel für das Format XML (eine Verwandtschaft mit HTML ist offensichtlich). Das Format ist ebenfalls sehr verbreitet und hat gewisse Vorteile, einfache Lesbarkeit gehört nicht dazu.

API Call

Um mit einem Programm Daten von einer API abzufragen, sind mehrere Schritte nötig:

1. Die Anfrage schicken.
2. Auf Antwort warten.
3. Die Antwort verarbeiten.

Abgesehen davon, dass die Antwort nicht so ausfallen könnte wie erwartet, gibt es eine grosse Problemstellung: Ein Computer-Programm wird – zack – im Nu ausgeführt. Bis die Antwort von der API kommt, ist das Programm längst fertig und die Daten kommen zu spät an.

Damit es trotzdem geht, muss der Teil des Programms, der die Daten verarbeitet, so lange warten, bis sie da sind und erst dann weitermachen. So ein Programmteil, der nicht mit dem Rest «durchflutscht» wird asynchron genannt.

Beispiel für einen API call mit JavaScript

100 Pokemon von der PokeApi holen und die Namen in die Konsole schreiben.

console.clear() // weil es sonst in codepen mühsam wird

let request = async () => {
  let response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=100&offset=0')
  let data = await response.json()
  console.log(data.results)
  let names = data.results.map(p=>p.name)
  names.forEach(name => console.log(name))
}

request()

In diesem Beispiel ruft die Funktion request() eine asynchrone Funktion (async) auf, die auf Antwort von der PokeApi wartet (await).