EF Informatik 2023
🔸

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" }
  ]
}
1
2
3
4
5
6
7

Ü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" }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Aufgabe

Erforsche die beiden folgenden Endpoints:

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" }
  ]
}
1
2
3
4
5
6
7
  • Das Haupt-Objekt (geschweifte Klammern von Zeile 1-7) besteht aus der Eigenschaft actor
  • 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
idnamesex
91Michael Keatonm
213Emma Stonew
1034Rachel McAdamsw

Server

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

Client

Fetch-GET

Der Browser als Client ruft per Javascript Daten vom Server auf 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();
1
2
3
4
5
6
7
8
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

Fetch-POST

Wenn der Client Daten zum Server übermitteln muss, so braucht er dazu ein HTTP-POST-Request. Dies kann man auch mit fetch machen. Zusätzlich zur URL müssen jetzt die Daten übermittelt werden:

async function postRating(movie, rating) {
	const url = "https://informatik.mygymer.ch/fts/rest/movies/";
	const data = {
		movieId: movie.id,
		rating: rating
	};
	const options = {
		method: "POST",
		body: JSON.stringify(data)
	};
	const response = await fetch(url, options);
}

const movie = {
	id: 139,
	title: "Titannic"
};
postRating(movie, 4);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ab Zeile 3
die Daten werden als JSON-Objekt vorbereitet
Zeile 7
die Optionen für den fetch-Befehl werden vorbereitet
Zeile 8
die Methode wird auf POST gestellt (Standard ist GET)
Zeile 9
die JSON-Daten werden dem Request-Body als codierter String angehängt