Aufgaben-Python/courses/ihk_ap1/08_lf8_datenfluesse_und_schnittstellen/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <link rel="icon" type="image/svg+xml" href="../../../assets/favicon.svg">
  <meta charset="UTF-8">
  <title>AP1 Modul 08: Datenflüsse & Schnittstellen (LF 8)</title>
  <link rel="stylesheet" href="../../../assets/style.css">
  <link rel="stylesheet" href="../../../assets/ihk_tools/ihk_tools.css">
</head>
<body class="bg-slate-900 text-slate-100 font-sans p-6">
  <div class="container mx-auto max-w-4xl">
    <div class="flex justify-between items-center mb-6">
      <a href="../../../dashboard.html" class="ihk-btn ihk-btn-secondary text-sm">← Zurück zum Dashboard</a>
      <span class="ihk-badge ihk-badge-success">Lernfeld 8</span>
    </div>

    <h1 class="text-3xl font-extrabold text-sky-400 mb-2">AP1 Modul 08: Datenflüsse & Schnittstellen (LF 8)</h1>
    <p class="text-slate-300 text-lg leading-relaxed mb-6">REST-APIs, HTTP-Methoden & Idempotenz, Statuscodes, JSON vs. XML, JWT Bearer Token & Webhooks vs. Polling.</p>

    <!-- Fachtheorie & Wissen -->
    <div style="background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; margin-bottom: 24px;">
      
<h2 style="color: #38bdf8; margin-top: 0;">🔄 LF 8: Datenflüsse optimieren & Schnittstellen anpassen</h2>
<p style="color: #cbd5e1; line-height: 1.6;">
  Moderne Schnittstellenarchitektur: RESTful Web-APIs, HTTP-Methoden, Statuscodes, Datenaustauschformate (JSON, XML), Authentifizierung (JWT) und ereignisgesteuerte Kommunikation.
</p>

<h3 style="color: #cbd5e1; margin-top: 20px;">1. REST-Prinzipien & HTTP-Verben</h3>
<div style="background: #0f172a; padding: 16px; border-radius: 8px; margin: 12px 0;">
  <table class="ihk-table">
    <thead><tr><th>CRUD-Operation</th><th>HTTP-Methode</th><th>Bedeutung</th><th>Idempotent?</th></tr></thead>
    <tbody>
      <tr><td>Create</td><td><code>POST</code></td><td>Neue Ressource anlegen</td><td>Nein (erzeugt Duplikate)</td></tr>
      <tr><td>Read</td><td><code>GET</code></td><td>Ressource abrufen</td><td>Ja (verändert Server nicht)</td></tr>
      <tr><td>Update</td><td><code>PUT / PATCH</code></td><td>Vollständiges Ersetzen / Partielles Ändern</td><td>Ja (PUT ist idempotent)</td></tr>
      <tr><td>Delete</td><td><code>DELETE</code></td><td>Ressource löschen</td><td>Ja (wiederholtes Löschen löscht Ressource)</td></tr>
    </tbody>
  </table>
</div>

<h3 style="color: #cbd5e1; margin-top: 20px;">2. HTTP-Statuscodes im Überblick</h3>
<div style="background: #0f172a; padding: 16px; border-radius: 8px; margin: 12px 0;">
  <ul style="color: #cbd5e1; line-height: 1.8; margin: 0; padding-left: 20px;">
    <li><strong>2xx (Erfolg):</strong> 200 OK, 201 Created (nach POST), 204 No Content.</li>
    <li><strong>3xx (Umleitung):</strong> 301 Moved Permanently, 304 Not Modified (Caching).</li>
    <li><strong>4xx (Client-Fehler):</strong> 400 Bad Request (Syntaxfehler), 401 Unauthorized (Auth fehlt), 403 Forbidden (Rechte fehlen), 404 Not Found.</li>
    <li><strong>5xx (Server-Fehler):</strong> 500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable.</li>
  </ul>
</div>

<h3 style="color: #cbd5e1; margin-top: 20px;">3. JSON Web Tokens (JWT)</h3>
<p style="color: #cbd5e1; line-height: 1.6;">
  Stateless Authentifizierung über einen dreiteiligen String: <code>Header.Payload.Signature</code>.<br>
  Der Server signiert die Payload mit seinem geheimen Schlüssel. Clients senden das Token im Header <code>Authorization: Bearer &lt;Token&gt;</code>. Der Server prüft die Signatur mathematisch ohne Datenbankabfrage.
</p>

    </div>

    <!-- Interaktives Tool falls vorhanden -->
    

    <!-- Fragenpool -->
    
        <div style="background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; margin: 32px 0;">
          <h2 style="color: #38bdf8; margin-top: 0; font-size: 1.4rem; display: flex; align-items: center; gap: 10px;">
            <span>📝</span> Authentische IHK-Prüfungsaufgaben zu Lernfeld 8
          </h2>
          <p style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 20px;">
            Aus unserem Fragenpool von 150 IHK-Prüfungsfragen nach offiziellem ZPA/AkA-Wortlaut. Bearbeiten Sie die Aufgaben und vergleichen Sie Ihre Antwort mit dem Erwartungshorizont:
          </p>
          <div style="display: flex; flex-direction: column; gap: 20px;">
        
            <div class="ihk-exam-task" data-title="REST-API und HTTP-Methoden" data-points="8" style="background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 20px;">
              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <strong style="color: #38bdf8; font-size: 1.05rem;">REST-API und HTTP-Methoden</strong>
                <span class="ihk-badge ihk-badge-success">8 Punkte</span>
              </div>
              <div style="background: #1e293b; border-left: 4px solid #0284c7; padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; color: #cbd5e1; font-size: 0.9rem; font-style: italic;">
                Ein Ticketsystem stellt eine RESTful-API für Drittanwendungen bereit.
              </div>
              <p style="color: #f8fafc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px;">
                Ordnen Sie die vier grundlegenden CRUD-Operationen (Create, Read, Update, Delete) den entsprechenden HTTP-Verben zu und erklären Sie, was Idempotenz bedeutet.
              </p>
              <textarea class="ihk-input" rows="3" placeholder="Ihre Lösung stichpunktartig formulieren..."></textarea>
              <details style="margin-top: 14px; background: #1e293b; padding: 12px 16px; border-radius: 6px; cursor: pointer;">
                <summary style="font-weight: 600; color: #4ade80;">💡 Offizieller IHK-Erwartungshorizont & Punkteverteilung</summary>
                <div class="ihk-task-solution" style="margin-top: 10px; color: #cbd5e1; font-size: 0.9rem; line-height: 1.6; white-space: pre-line;">
                  CRUD Zuordnung:
Create -> POST (oder PUT bei bekannter URI). (1 Pkt.)
Read -> GET. (1 Pkt.)
Update -> PUT (vollständiges Ersetzen) oder PATCH (partielles Ändern). (2 Pkt.)
Delete -> DELETE. (1 Pkt.)
Idempotenz: Eine Eigenschaft von HTTP-Methoden, bei der mehrfache identische Anfragen denselben Serverzustand zur Folge haben wie eine einzelne Anfrage. GET, PUT und DELETE sind idempotent; POST ist nicht idempotent (mehrfache Ausführung erzeugt mehrfache Ressourcen). (3 Pkt.)
                </div>
              </details>
            </div>
            
            <div class="ihk-exam-task" data-title="HTTP-Statuscodes Zuordnung" data-points="10" style="background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 20px;">
              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <strong style="color: #38bdf8; font-size: 1.05rem;">HTTP-Statuscodes Zuordnung</strong>
                <span class="ihk-badge ihk-badge-success">10 Punkte</span>
              </div>
              <div style="background: #1e293b; border-left: 4px solid #0284c7; padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; color: #cbd5e1; font-size: 0.9rem; font-style: italic;">
                Bei der Entwicklung einer Schnittstelle treten verschiedene Fehlerfälle auf.
              </div>
              <p style="color: #f8fafc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px;">
                Nennen Sie die Bedeutungen und typischen Anwendungsfälle der folgenden vier HTTP-Statuscodes: 200, 201, 401, 404 und 500.
              </p>
              <textarea class="ihk-input" rows="3" placeholder="Ihre Lösung stichpunktartig formulieren..."></textarea>
              <details style="margin-top: 14px; background: #1e293b; padding: 12px 16px; border-radius: 6px; cursor: pointer;">
                <summary style="font-weight: 600; color: #4ade80;">💡 Offizieller IHK-Erwartungshorizont & Punkteverteilung</summary>
                <div class="ihk-task-solution" style="margin-top: 10px; color: #cbd5e1; font-size: 0.9rem; line-height: 1.6; white-space: pre-line;">
                  1. 200 OK: Anfrage erfolgreich ausgeführt und Nutzdaten geliefert. (2 Pkt.)
2. 201 Created: Neue Ressource wurde erfolgreich angelegt (z. B. nach POST). (2 Pkt.)
3. 401 Unauthorized: Zugriff verweigert, Authentifizierung fehlt oder ist ungültig. (2 Pkt.)
4. 404 Not Found: Die angeforderte URI existiert auf dem Server nicht. (2 Pkt.)
5. 500 Internal Server Error: Unerwarteter Serverfehler bei der Verarbeitung. (2 Pkt.)
                </div>
              </details>
            </div>
            
            <div class="ihk-exam-task" data-title="Datenformate JSON vs XML" data-points="8" style="background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 20px;">
              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <strong style="color: #38bdf8; font-size: 1.05rem;">Datenformate JSON vs XML</strong>
                <span class="ihk-badge ihk-badge-success">8 Punkte</span>
              </div>
              <div style="background: #1e293b; border-left: 4px solid #0284c7; padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; color: #cbd5e1; font-size: 0.9rem; font-style: italic;">
                Eine Schnittstelle soll Datenstrukturen austauschen.
              </div>
              <p style="color: #f8fafc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px;">
                Vergleichen Sie JSON und XML hinsichtlich Syntax-Overhead, Lesbarkeit, Datentypen-Unterstützung und Schema-Validierung.
              </p>
              <textarea class="ihk-input" rows="3" placeholder="Ihre Lösung stichpunktartig formulieren..."></textarea>
              <details style="margin-top: 14px; background: #1e293b; padding: 12px 16px; border-radius: 6px; cursor: pointer;">
                <summary style="font-weight: 600; color: #4ade80;">💡 Offizieller IHK-Erwartungshorizont & Punkteverteilung</summary>
                <div class="ihk-task-solution" style="margin-top: 10px; color: #cbd5e1; font-size: 0.9rem; line-height: 1.6; white-space: pre-line;">
                  Syntax-Overhead & Payload: JSON hat durch schlichte Key-Value-Klammerung { } deutlich weniger Overhead als XML mit seinen redundanten schließenden Tags <tag></tag>. (2 Pkt.)
Datentypen: JSON unterstützt native Typen (String, Number, Boolean, Array, Null, Object). XML interpretiert alle Werte primär als Text. (2 Pkt.)
Schema-Validierung: XML besitzt ausgereifte, standardisierte Validierungsmechanismen über XSD (XML Schema Definition) und DTD; bei JSON ist JSON Schema zwar verfügbar, aber historisch weniger formalisiert. (2 Pkt.)
Parsing-Performance: JSON lässt sich nativ in Webtechnologien und modernen Programmiersprachen signifikant schneller und speicherschonender parsen. (2 Pkt.)
                </div>
              </details>
            </div>
            
            <div class="ihk-exam-task" data-title="API-Authentifizierung JWT Bearer Token" data-points="8" style="background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 20px;">
              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <strong style="color: #38bdf8; font-size: 1.05rem;">API-Authentifizierung JWT Bearer Token</strong>
                <span class="ihk-badge ihk-badge-success">8 Punkte</span>
              </div>
              <div style="background: #1e293b; border-left: 4px solid #0284c7; padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; color: #cbd5e1; font-size: 0.9rem; font-style: italic;">
                Der Zugriff auf eine REST-API wird über JSON Web Tokens (JWT) abgesichert.
              </div>
              <p style="color: #f8fafc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px;">
                Beschreiben Sie den dreiteiligen Aufbau eines JWT (Header, Payload, Signature) und erläutern Sie, wie der Server die Integrität prüft, ohne das Token in einer Datenbank nachzuschlagen (Stateless).
              </p>
              <textarea class="ihk-input" rows="3" placeholder="Ihre Lösung stichpunktartig formulieren..."></textarea>
              <details style="margin-top: 14px; background: #1e293b; padding: 12px 16px; border-radius: 6px; cursor: pointer;">
                <summary style="font-weight: 600; color: #4ade80;">💡 Offizieller IHK-Erwartungshorizont & Punkteverteilung</summary>
                <div class="ihk-task-solution" style="margin-top: 10px; color: #cbd5e1; font-size: 0.9rem; line-height: 1.6; white-space: pre-line;">
                  Dreiteiliger Aufbau (durch Punkte getrennt, Base64Url-codiert):
1. Header: Enthält den Token-Typ (JWT) und den verwendeten Hashing-Algorithmus (z. B. HS256 oder RS256). (2 Pkt.)
2. Payload (Claims): Enthält die Nutzdaten (z. B. user_id, rollen, ablaufdatum exp). (2 Pkt.)
3. Signature: Wird erzeugt, indem der codierte Header und Payload mit einem geheimen Serverschlüssel gehasht/signiert werden. (2 Pkt.)
Stateless-Prüfung: Der Server benötigt keine Session-Datenbank. Er berechnet aus empfangenem Header und Payload mit seinem geheimen Schlüssel die Signatur neu. Stimmt sie mit der im Token mitgelieferten Signatur überein und ist exp nicht abgelaufen, ist das Token garantiert echt und unverfälscht. (2 Pkt.)
                </div>
              </details>
            </div>
            
            <div class="ihk-exam-task" data-title="Webhooks vs Polling Architektur" data-points="6" style="background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 20px;">
              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <strong style="color: #38bdf8; font-size: 1.05rem;">Webhooks vs Polling Architektur</strong>
                <span class="ihk-badge ihk-badge-success">6 Punkte</span>
              </div>
              <div style="background: #1e293b; border-left: 4px solid #0284c7; padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; color: #cbd5e1; font-size: 0.9rem; font-style: italic;">
                Ein Ticketsystem soll ein Überwachungs-Dashboard in Echtzeit benachrichtigen, sobald ein Ticket den Status "KRITISCH" erhält.
              </div>
              <p style="color: #f8fafc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px;">
                Vergleichen Sie Webhooks und Polling hinsichtlich Netzwerklast, Latenz und Serverressourcen.
              </p>
              <textarea class="ihk-input" rows="3" placeholder="Ihre Lösung stichpunktartig formulieren..."></textarea>
              <details style="margin-top: 14px; background: #1e293b; padding: 12px 16px; border-radius: 6px; cursor: pointer;">
                <summary style="font-weight: 600; color: #4ade80;">💡 Offizieller IHK-Erwartungshorizont & Punkteverteilung</summary>
                <div class="ihk-task-solution" style="margin-top: 10px; color: #cbd5e1; font-size: 0.9rem; line-height: 1.6; white-space: pre-line;">
                  Polling (Pull-Prinzip): Der Client sendet in festen Intervallen (z. B. alle 10 Sekunden) kontinuierlich HTTP-GET-Anfragen an den Server. Erzeugt enorme Netzwerklast und Serverabfragen, selbst wenn sich stundenlang nichts ändert (leere Antworten); Latenz entspricht dem Polling-Intervall. (3 Pkt.)
Webhook (Push-Prinzip): Der Client registriert eine Empfänger-URL beim Server. Sobald das definierte Ereignis eintritt, sendet der Server sofort eine HTTP-POST-Anfrage mit dem JSON-Payload an die URL. Minimale Netzwerklast (Traffic nur bei echten Events) und sofortige Benachrichtigung ohne Latenz. (3 Pkt.)
                </div>
              </details>
            </div>
            </div></div>

    <div class="mt-8 pt-6 border-t border-slate-700 flex justify-between items-center">
      <a href="../07_lf7_instandhaltung_und_fehlerdiagnose/index.html" class="text-sky-400 hover:text-sky-300 font-semibold">← Vorheriges Modul</a>
      <a href="../../../dashboard.html" class="text-slate-400 hover:text-white">🏠 Übersicht</a>
      <a href="../12_ap1_probepruefung_simulation/index.html" class="ihk-btn ihk-btn-primary font-semibold">Nächstes Modul →</a>
    </div>
  </div>
  <script src="../../../assets/courses_manifest.js"></script>
  <script src="../../../assets/course_sidebar.js"></script>
</body>
</html>