LU16 – HTTP, CRUD & Postman

• Sie können erklären, wie eine HTTP-Anfrage und eine HTTP-Antwort funktionieren.¹⁾
• Sie können die vier wichtigsten HTTP-Methoden GET, POST, PUT, DELETE den CRUD-Operationen zuordnen.
• Sie verstehen, was eine API und was eine Route in Express ist.
• Sie können mit Postman einfache Requests an Ihren Express-Server schicken.
• Sie können erste CRUD-Routen für posts mit einer einfachen Liste erstellen (ohne Datenbank).

Bisher im Modul M290:

• Sie haben in MySQL Tabellen erstellt, Daten importiert und Abfragen geschrieben.
• Sie kennen CRUD:
  • Create → INSERT
  • Read → SELECT
  • Update → UPDATE
  • Delete → DELETE

Jetzt übertragen wir diese Idee auf das Web: Statt direkt SQL zu tippen, schicken wir HTTP-Anfragen an einen Backend-Server²⁾ – bei uns: Express (Node.js). Der Server führt für uns die passenden CRUD-Operationen aus und sendet eine Antwort zurück.

Wir bauen zuerst eine API für Social-Media-Posts, noch ohne Datenbank – nur mit Daten in einem Javascript-Array. So können wir HTTP, Routen und Postman kennenlernen, bevor wir in in der nächsten Unterrichtseinheit MySQL an Express anbinden.

Stellen Sie sich das so vor:

• Client (Browser oder Postman) = Gast im Restaurant³⁾
• Server (Express/Node.js) = Küche⁴⁾
• HTTP-Anfrage = Bestellung, die der Kellner/die Kellnerin zur Küche bringt
• HTTP-Antwort = fertiges Gericht, das der Kellner zurückbringt

Jede HTTP-Anfrage hat unter anderem:

• eine Methode (z.B. GET, POST, PUT, DELETE),
• einen Pfad⁵⁾,
• optional einen Body⁶⁾

Der Server reagiert auf eine Anfrage, indem er:

1. eine passende Route findet (z.B. app.get('/api/posts', …)),
2. etwas ausführt (z.B. Daten lesen oder speichern),
3. genau eine Antwort zurückschickt (z.B. JSON oder Text).

Eine Route ist die Server-Funktion im Code, die beschreibt, was bei einer bestimmten Kombination passiert:

• HTTP-Methode + Pfad (z.B. GET /api/posts)
• Handler-Funktion⁷⁾ (z.B. Daten lesen, JSON senden)

(req, res) => {
    res.send('Hello World!');
}

Beispiel: app.get('/api/posts', …) ist eine Route.

Ein API-Endpoint ist eine Route, die als Daten-Schnittstelle⁸⁾ für Clients gedacht ist. Meistens liefert sie die Daten im JSON⁹⁾ Format zurück.

Beispiel: GET /api/posts → liefert Post-Daten als JSON (API-Endpoint).

CRUD-Operationen werden bei Web-APIs typischerweise folgenden HTTP-Methoden zugeordnet:

Später werden Sie für Ihre eigenen Use Cases (Reisen, Filme, Bücher, …) genau solche Routen definieren, z.B. GET /api/trips, POST /api/books, usw.

Im Modul M290 programmieren wir kein eigenes Browser-Frontend. Stattdessen benutzen wir Postman als Client:

• Postman kann GET, POST, PUT, DELETE-Requests an Ihre API senden.
• Sie sehen direkt:
  • den Statuscode (z.B. 200, 201, 400, 404, 500) ¹⁰⁾,
  • die Response-Header ¹¹⁾,
  • den Response-Body (Text oder JSON).
• Sie können im Body bequem JSON eingeben (z.B. neuen post anlegen).

Screenshot Postman-Benutzeroberfläche mit den HTTP-Requests GET/POST/PUT/DELETE.

So können wir die API testen, als wäre schon ein fertiges Frontend vorhanden – nur viel einfacher und kontrollierter.

Wir verwenden als Beispiel eine vereinfachte post-Tabelle aus einer Social-Media-Datenbank:

• post_id (PK, Nummer)¹²⁾
• user_id (FK zum User – hier nur als Zahl)¹³⁾
• title (Titel des Posts)
• image_url (Bild-URL)
• description (Beschreibungstext)
• likes (Anzahl Likes)

Wir erstellen einen Express-Server mit einer lokalen Liste von Posts (ohne Datenbank-Anbindung vorerst). Danach bauen wir die ersten Routen:

• GET /api/posts → alle Posts
• GET /api/posts/:id → ein Post anhand der ID
• POST /api/posts → neuen Post hinzufügen

Wir bauen auf dem bekannten Server-Setup aus LU15 auf.

import express from 'express';
 
const app = express();
const port = 3000;
 
// Middleware: "sitzt" zwischen Anfrage und Route und verarbeitet Daten.
// express.json() liest den Request-Body und macht daraus req.body (JSON).
app.use(express.json());
 
// "Test-Tabelle" lokal
let posts = [
{
  post_id: 1,
  user_id: 1,
  title: 'Morning Coffee',
  image_url: 'https://picsum.photos/800/450?random=1',
  description: 'Nothing beats starting the day with a warm cup of coffee.',
  likes: 10
},
{
  post_id: 2,
  user_id: 2,
  title: 'Sunset Vibes',
  image_url: 'https://picsum.photos/800/450?random=2',
  description: 'Caught this beautiful sunset today! Nature never disappoints.',
  likes: 12
}
];
 
// TEST-Route (UI/Info)
app.get('/', (req, res) => {
  res.send('API ist online');
});
 
app.listen(port, () => {
  console.log(`API läuft auf http://localhost:${port}`);
});

Wenn Sie diesen Server mit npm run dev starten (falls Nodemon → s. LU15 installiert, sonst node index.js), sollten Sie im Browser unter http://localhost:3000/ den Text „API ist online“ sehen.

Jetzt fügen wir eine Route hinzu, die alle Posts zurückliefert:

// READ – alle Posts
app.get('/api/posts', (req, res) => {
  res.status(200).json(posts);
});

• Methode: GET
• URL: http://localhost:3000/api/posts
• Erwartung:
  • Status 200 OK
  • JSON-Array mit den Beispiel-Posts

Wir möchten einen einzelnen Post anhand der post_id abfragen.

// READ – einzelner Post nach ID
app.get('/api/posts/:id', (req, res) => {
  const id = Number(req.params.id);     // Pfad-Parameter (Route-Parameter) holen. :id kommt immer als String -> Number(...) macht eine Zahl daraus
  const post = posts.find(p => p.post_id === id);
 
if (!post) {
  return res.status(404).send('Post nicht gefunden');
}
 
res.status(200).json(post);
});

• Methode: GET
  • URL: http://localhost:3000/api/posts/1
• Erwartung:
  • Status 200 OK
  • JSON-Objekt mit post_id: 1
• URL: http://localhost:3000/api/posts/999
  • Status 404 Not Found
  • Body: Post nicht gefunden

Nun soll ein neuer Post erstellt werden. Dazu schicken wir einen im Request einen „Body“ mit den notwendigen Daten mit (im JSON-Format).

app.post('/api/posts', (req, res) => {
//Daten aus dem Anfrage-Objekt (Request) holen und in Variablen speichern
const user_id = req.body.user_id;
const title = req.body.title;
const image_url = req.body.image_url;
const description = req.body.description;
 
// ganz einfache Validierung (Pflichtfelder) - ohne titel oder user_id (wer post erstellt hat) können wir keinen neuen Post erstellen.
if (!title || !user_id) {
    return res.status(400).send('Please enter a title and a user_id');
}
 
// neue post_id berechnen - das wird in Zukunft die Datenbank selbst machen.
// Letzte Post-ID aus dem Post-Array herausfinden:
const lastPostId = posts[posts.length - 1].post_id;
const newPostId = lastPostId + 1;
 
const newPost = {
    post_id: newPostId,
    user_id: user_id,
    title: title,
    image_url: image_url || '',
    description: description || '',
    likes: 0
};
 
//neuer Post wird in Post-Array (Liste mit Posts) gespeichert
posts.push(newPost);
 
//Rückmeldung an Client: neuer Post und Status-Code 201 (Created)
res.status(201).json(newPost);
 
 
});

Pflichtfelder: title und user_id müssen vorhanden sein → sonst 400 Bad Request.

Neue ID: Wir nehmen die post_id des letzten Elements im Array und zählen +1.

Antwort: 201 Created + das neu erstellte Post-Objekt als JSON.

1. Methode: POST
2. URL: http://localhost:3000/api/posts
3. Tab Body → raw → JSON auswählen
4. Beispiel-Body:

{
  "user_id": 3,
  "title": "Mein erster echter Post",
  "image_url": "https://example.com/image3.jpg",
  "description": "Gerade mit Postman erstellt!"
}

1. Send klicken
   • Erwartung:
     • Status 201 Created
     • JSON-Objekt mit neuer post_id (z.B. 3)
2. Anschliessend GET /api/posts erneut ausführen → der neue Post sollte in der Liste sein.

Auf der nächsten Seite sind die HTTP-Methoden PUT und DELETE am gleichen Beispiel (Social-Media-Posts) ausgeführt. Sie werden diese auch für Ihr Projekt brauchen.

In der nächsten Unterrichtseinheit (LU17):

• ersetzen wir die JavaScript-Liste durch eine MySQL-Tabelle posts,
• bauen einfache Validierung und Fehlerbehandlung (HTTP-Statuscodes) ein,
• damit Sie diese Struktur für Ihren eigenen Projekt-Use-Case übernehmen können.