Viele Datenbanken werden aus dem Browser her verwendet. Hier eignet sich SQL schlecht. Also hat man eine andere Schnittstelle – die einfacher über https funktioniert.

REST-Schnittstelle

Eine Rest-Schnittstelle ist eine zustandslose Verbindung mit der ein Client von einem Server Daten via HTTPS abrufen kann. REST ist kein Standard, sondern eine Sammlung von Vorgaben an die Schnittstelle.

Endpoints

Ein Endpoint ist eine URL, wo man auf etwas Spezielles zugreifen kann. Je nach API und Endpoint kann die Abfrage mit Parameter beeinflusst werden.

Beispiel

Der Endpoint https://informatik.mygymer.ch/fts/rest/actors/ liefert eine Liste aller Schauspieler:

{
  "actors": [
    { "id": "91", "name": "Michael Keaton", "sex": "m" },
    { "id": "213", "name": "Emma Stone", "sex": "w" },
    { "id": "1034", "name": "Rachel McAdams", "sex": "w" }
  ]
}

Über den Endpoint https://informatik.mygymer.ch/fts/rest/actors/:id kann mit der id eines Actors detaillierte Infos abgerufen werden:

{
  "id": "91",
  "name": "Michael Keaton",
  "sex": "m",
  "movies": [
    {
      "id": "4",
      "title": "Spotlight",
      "year": "2015",
      "as_character": "Walter 'Robby' Robinson"
    },
    { "id": "3", "title": "Birdman", "year": "2014", "as_character": "Riggan" }
  ]
}

Aufgabe

Erforsche die beiden folgenden Endpoints:

• https://informatik.mygymer.ch/fts/rest/movies/
• https://informatik.mygymer.ch/fts/rest/movies/:id/

JSON

Die Javascript Object Notation ist ein Datenformat, das von vielen REST-APIs verwendet wird. Es wird eigentlich ein Javascript-Objekt als Code formatiert geliefert. Dieses kann nach dem Herunterladen im Browser mit Javascript sofort in ein richtiges Javascript-Objekt verwandelt werden und steht sofort zur Verfügung.

Beispiel

{
  "actors": [
    { "id": "91", "name": "Michael Keaton", "sex": "m" },
    { "id": "213", "name": "Emma Stone", "sex": "w" },
    { "id": "1034", "name": "Rachel McAdams", "sex": "w" }
  ]
}

• Das Haupt-Objekt (geschweifte Klammern von Zeile 1-7) besteht aus der Eigenschaft actors
• Dabei handelt es sich um eine Liste (eckige Klammern) mit 3 Objekten
• Jedes Objekt hat drei Eigenschaften als Schlüssel/Werte-Paar mit den Schlüsseln id, name und sex und unterschiedlichen Werten

Man kann sich das Ganze als Tabelle vorstellen:

actors

id	name	sex
91	Michael Keaton	m
213	Emma Stone	w
1034	Rachel McAdams	w

 

Server

Der Server bereitet die Daten auf und sendet diese als JSON zurück an den Client. Dabei kann z.B. mit SQL auf eine Datenbank zugegriffen werden.

Wir verwenden den öffentlichen Server der REST-API. Hier müssen wir also nichts programmieren.

Client

Der Browser als Client ruft per Javascript Daten vom Server ab und stellt diese in geeigneter Form dar.

async function getMovies() {
	const url = "https://informatik.mygymer.ch/fts/rest/movies/";
	const response = await fetch(url);
	const data = await response.json();
	console.log(data);
}

getMovies();

Zeile 1

definiere getMovies als asynchrone Funktion

Zeile 2

Die URL des Endpoints

Zeile 3

mit fetch die Daten abrufen, mit await warten bis die Daten geliefert werden

Zeile 4

die Antwort ins json-Format umwandeln, warten bis Umwandlung fertig ist

Zeile 5

die Daten ausgeben

Zeile 8

die Funktion getData aufrufen