08 – Mini-API 🌐

🎯 1. Das Ziel

In diesem Kapitel baust du eine einfache, aber vollständige API:

• Empfängt Daten per POST (z. B. Nachricht von einem Formular)
• Speichert sie sicher in einer Datenbank
• Liefert alle Einträge als JSON zurück

Du wirst sehen: Eine API ist nichts Magisches – sondern logische, sichere Programmierung.

📊 2. Projektübersicht & API-Routen

Bevor du programmierst, musst du verstehen: Was ist eine API-Route?

Was ist eine API-Route?

Eine Route ist eine Adresse (URL), über die dein Backend bestimmte Aufgaben erledigt. Stell dir vor, deine API ist ein Restaurant:

• GET /api/nachrichten = „Zeig mir die Speisekarte“
• POST /api/nachrichten = „Ich möchte bestellen!“

Jede Route versteht nur eine Art von Anfrage (GET, POST, etc.) und führt genau eine Aufgabe aus.

Unsere Routen im Detail

Ordnerstruktur – wichtig bei gemeinsamer PC-Nutzung!

Da mehrere Schüler am selben PC arbeiten und nur eine XAMPP-Installation vorhanden ist, muss jeder sein Projekt in einem eigenen Unterordner speichern:

C:\xampp\htdocs\schueler-max\

Ersetze schueler-max durch deinen eigenen Namen (ohne Leerzeichen!).

Deine API-Datei (api.php) liegt dann hier:

C:\xampp\htdocs\schueler-max\api.php

Und du rufst sie im Browser auf mit:

http://localhost/schueler-max/api.php

🛠️ 3. Vorbereitung

Bevor du programmierst, plane auf Papier:

1. Erstelle in phpMyAdmin eine Datenbank mini_api mit Kollation utf8mb4_unicode_ci
2. Lege eine Tabelle nachrichten an mit Spalten:
   id (INT, AI, PK), name (VARCHAR 100), text (TEXT)
3. Entscheide: Willst du mit PHP oder Node.js arbeiten?

🐘 4. PHP-Version (mit XAMPP)

Erstelle eine Datei api.php in deinem persönlichen Ordner:

C:\xampp\htdocs\schueler-max\api.php

Inhalt der Datei:

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // Nur für lokale Tests!

$method = $_SERVER['REQUEST_METHOD'];
$pdo = new PDO('mysql:host=localhost;dbname=mini_api;charset=utf8mb4', 'root', '');

if ($method === 'GET') {
  $stmt = $pdo->query('SELECT * FROM nachrichten ORDER BY id DESC');
  echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
} 
elseif ($method === 'POST') {
  $input = json_decode(file_get_contents('php://input'), true);
  $name = trim($input['name'] ?? '');
  $text = trim($input['text'] ?? '');

  if (strlen($name) >= 2 && strlen($text) >= 5) {
    $stmt = $pdo->prepare('INSERT INTO nachrichten (name, text) VALUES (?, ?)');
    $stmt->execute([$name, $text]);
    http_response_code(201);
    echo json_encode(['status' => 'erfolg']);
  } else {
    http_response_code(400);
    echo json_encode(['fehler' => 'Name (mind. 2 Zeichen), Text (mind. 5 Zeichen)']);
  }
}
?>

Teste im Browser:
http://localhost/schueler-max/api.php

🟢 5. Node.js-Version (mit Express)

Erstelle einen Ordner in deinem NodeJS-Verzeichnis:

C:\NodeJS\mini-api\

Führe im Terminal aus:

npm init -y
npm install express mysql2

Erstelle server.js mit folgendem Inhalt:

const express = require('express');
const mysql = require('mysql2');
const app = express();
const port = 3000;

app.use(express.json());
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  database: 'mini_api'
});

app.get('/api/nachrichten', (req, res) => {
  db.query('SELECT * FROM nachrichten ORDER BY id DESC', (err, results) => {
    if (err) return res.status(500).json({ fehler: 'Datenbankfehler' });
    res.json(results);
  });
});

app.post('/api/nachrichten', (req, res) => {
  const { name, text } = req.body;
  if (!name || !text || name.length < 2 || text.length < 5) {
    return res.status(400).json({ fehler: 'Name (mind. 2 Zeichen), Text (mind. 5 Zeichen)' });
  }
  db.execute('INSERT INTO nachrichten (name, text) VALUES (?, ?)', [name, text], (err) => {
    if (err) return res.status(500).json({ fehler: 'Speichern fehlgeschlagen' });
    res.status(201).json({ status: 'erfolg' });
  });
});

app.listen(port, () => {
  console.log(`Mini-API läuft auf http://localhost:${port}/api/nachrichten`);
});

Starte mit: node server.js
Teste: http://localhost:3000/api/nachrichten

🔒 6. Sicherheit im Einsatz

Beide Versionen enthalten:

• ✅ Prepared Statements – gegen SQL-Injection
• ✅ Eingabeprüfung – Name ≥ 2 Zeichen, Text ≥ 5 Zeichen
• ✅ Kein direktes Echo von Benutzerdaten – nur JSON
• ✅ Klare Fehlercodes (400 = falsche Eingabe, 500 = Serverfehler)

🧠 7. KI-Prompt-Training

Aufgabe: Zeichne zuerst auf Papier:

• Die Datenbankstruktur (Tabelle + Spalten)
• Die beiden API-Routen (GET / POST)
• Die Sicherheitsmaßnahmen (was wird geprüft?)

Danach formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um ein konkretes Problem zu lösen – z. B.: „Wie prüfe ich in Node.js, ob ein Feld existiert und mindestens 2 Zeichen lang ist?“

🚀 8. Was du jetzt kannst

Du hast gelernt:

• Eine sichere API zu bauen
• Datenbanken sinnvoll zu strukturieren
• Formulardaten sicher zu verarbeiten
• Beide Backend-Technologien bewusst einzusetzen

Herzlichen Glückwunsch – du bist jetzt ein Backend-Entwickler!