Ein Tipp auf „Bestellen“
Eine Kundin tippt in der Bäckerei-App auf „Bestellen“. Ein paar Sekunden später kommt die Bestätigung.
Dazwischen ist etwas passiert, das sie nicht sieht. Ein Programm auf einem fernen Rechner hat die Bestellung angenommen, geprüft und gespeichert. Dieses Programm heißt Backend.
Am Ende dieser Lektion
Notiz
Ich kann sagen, was ein Backend mit einer Anfrage macht.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Anfrage | die Bitte einer App an das Backend | GET /speisekarte |
| Route | Methode und Pfad, die zu einem Handler führen | |
| Handler | die Funktion, die eine Anfrage beantwortet | |
| Statuscode | eine Zahl in der Antwort, die das Ergebnis nennt | 404 |
| API | die Regeln, nach denen Programme das Backend fragen |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Eine Route verbindet Anfrage und Handler
Eine Anfrage hat eine Methode und einen Pfad. GET bedeutet: Ich möchte etwas lesen. POST bedeutet: Ich möchte etwas Neues anlegen.
Das Backend vergleicht beides mit seiner Liste von Routen. Passt eine, läuft ihr Handler. Passt keine, kommt 404.
Beispiel: die Routen der Bäckerei
| Methode | Pfad | Handler | Was er tut |
|---|---|---|---|
| GET | /speisekarte | zeigeSpeisekarte | Sendet die ganze Speisekarte |
| GET | /speisekarte/brezel | zeigePreis | Sendet den Preis eines Artikels |
| POST | /bestellungen | bestellungAnlegen | Speichert eine neue Bestellung |
| GET | /personal | keiner | Sendet 404: keine solche Route |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Ausprobieren: drei Anfragen senden
// Ein kleines Backend für die Online-Bestellung einer Bäckerei.
const speisekarte = { brezel: 90, laugenstange: 120 };
function zeigeSpeisekarte() {
return { status: 200, body: speisekarte };
}
function zeigePreis(name) {
if (!speisekarte.hasOwnProperty(name)) {
return { status: 404, body: { fehler: 'Nicht im Sortiment' } };
}
return { status: 200, body: { name: name, cent: speisekarte[name] } };
}
function verarbeite(anfrage) {
if (anfrage.methode === 'GET' && anfrage.pfad === '/speisekarte') {
return zeigeSpeisekarte();
}
if (anfrage.methode === 'GET' && anfrage.pfad.startsWith('/speisekarte/')) {
return zeigePreis(anfrage.pfad.slice(13));
}
return { status: 404, body: { fehler: 'Diese Route gibt es nicht' } };
}
console.log(verarbeite({ methode: 'GET', pfad: '/speisekarte' }));
console.log(verarbeite({ methode: 'GET', pfad: '/speisekarte/brezel' }));
console.log(verarbeite({ methode: 'GET', pfad: '/speisekarte/pizza' }));
Ein Handler prüft, nutzt Daten und antwortet
Die meisten Handler tun dreimal dasselbe.
Zuerst prüfen sie die Anfrage: Fehlt etwas? Dann antworten sie mit 400, eine fehlerhafte Anfrage. Danach lesen oder ändern sie Daten, oft in einer Datenbank. Zuletzt senden sie die Antwort: einen Statuscode und einen Inhalt, meist als JSON, ein Textformat für Daten.
Ein häufiger Fehler
Warnung
Viele denken, die App auf dem Handy bestimme den Preis und speichere die Bestellung. Die App fragt nur. Das Backend prüft die Anfrage und besitzt die Daten, denn jede Person kann ändern, was eine App sendet.
Üben: eine Route ergänzen
const bestellungen = [];
function bestellungAnlegen(body) {
if (!body.artikel) {
return { status: 400, body: { fehler: 'Bitte einen Artikel angeben' } };
}
bestellungen.push(body.artikel);
return { status: 201, body: { id: bestellungen.length, artikel: body.artikel } };
}
function verarbeite(anfrage) {
if (anfrage.methode === 'POST' && anfrage.pfad === '/bestellungen') {
return bestellungAnlegen(anfrage.body);
}
// Ergänzen Sie hier eine Route: GET /bestellungen gibt Status 200
// und die Liste der Bestellungen zurück.
return { status: 404, body: { fehler: 'Diese Route gibt es nicht' } };
}
console.log(verarbeite({ methode: 'POST', pfad: '/bestellungen', body: { artikel: 'brezel' } }));
console.log(verarbeite({ methode: 'POST', pfad: '/bestellungen', body: {} }));
console.log(verarbeite({ methode: 'GET', pfad: '/bestellungen' }));