Mindflux: Sicherheit, Datenintegrität und Navigation härten

src/main/resources/static/finalflux/ap2-fiae/entwurfsmuster.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <title>Entwurfsmuster - FinalFlux AP2</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/theme.css">
+  <link rel="stylesheet" href="/css/finalflux.css">
+  <script src="/js/theme.js"></script>
+</head>
+<body class="finalflux-page">
+<div class="mf-theme-float"><button class="mf-theme"></button></div>
+<main>
+  <a href="/finalflux" class="back-link">Zurück zu FinalFlux</a>
+  <h1>Entwurfsmuster (Design Patterns)</h1>
+
+  <section>
+    <h2>Lernfokus</h2>
+    <p>AP2 Anwendungsentwicklung: die prüfungsrelevanten Entwurfsmuster erkennen, erklären und dem richtigen Problem zuordnen.</p>
+    <ul class="key-list">
+      <li>Zweck von Entwurfsmustern erklären.</li>
+      <li>Singleton, Factory und Observer unterscheiden.</li>
+      <li>MVC-Schichten und ihre Aufgaben zuordnen.</li>
+    </ul>
+  </section>
+
+  <section>
+    <h2>Was sind Entwurfsmuster?</h2>
+    <p>Entwurfsmuster sind bewährte, wiederverwendbare Lösungsschablonen für häufige Probleme im Software-Design. Sie sind kein fertiger Code, sondern beschreiben eine Struktur aus Klassen und deren Zusammenspiel. In der AP2 wird typischerweise verlangt, ein Muster zu benennen, seinen Zweck zu erklären oder es in einem UML-Diagramm wiederzuerkennen.</p>
+    <p class="merksatz"><strong>Merksatz:</strong> Ein Entwurfsmuster ist eine Schablone für ein Entwurfsproblem – nicht der Code selbst.</p>
+  </section>
+
+  <section>
+    <h2>Singleton</h2>
+    <p>Stellt sicher, dass von einer Klasse <strong>genau eine Instanz</strong> existiert, und bietet einen globalen Zugriffspunkt darauf. Typische Einsätze: Konfiguration, Logger, Verbindungs-Pools.</p>
+    <ul class="key-list">
+      <li><strong>Privater Konstruktor:</strong> verhindert Instanziierung von außen.</li>
+      <li><strong>Statische Zugriffsmethode</strong> (z. B. <code>getInstance()</code>) liefert immer dieselbe Instanz.</li>
+      <li><strong>Kritik:</strong> globaler Zustand erschwert Tests – in der Prüfung als Nachteil nennen können.</li>
+    </ul>
+  </section>
+
+  <section>
+    <h2>Factory (Fabrikmethode)</h2>
+    <p>Kapselt die Objekterzeugung: Der aufrufende Code kennt nur das Interface, die Fabrik entscheidet, welche konkrete Klasse instanziiert wird. So lassen sich neue Varianten ergänzen, ohne den Client-Code zu ändern (Offen-Geschlossen-Prinzip).</p>
+    <ul class="key-list">
+      <li><strong>Problem:</strong> <code>new KonkreteKlasse()</code> überall verstreut macht Änderungen teuer.</li>
+      <li><strong>Lösung:</strong> zentrale Erzeugungsmethode, die das passende Objekt liefert.</li>
+    </ul>
+  </section>
+
+  <section>
+    <h2>Observer (Beobachter)</h2>
+    <p>Ein Subjekt hält eine Liste von Beobachtern und benachrichtigt sie automatisch bei Zustandsänderungen (1:n-Abhängigkeit). Grundlage vieler GUI- und Event-Systeme.</p>
+    <ul class="key-list">
+      <li><strong>Subjekt:</strong> <code>anmelden()</code>, <code>abmelden()</code>, <code>benachrichtigen()</code>.</li>
+      <li><strong>Beobachter:</strong> gemeinsames Interface mit <code>aktualisiere()</code>.</li>
+      <li><strong>Vorteil:</strong> lose Kopplung – das Subjekt kennt nur das Interface.</li>
+    </ul>
+    <p class="merksatz"><strong>Merksatz:</strong> Observer = abonnieren und benachrichtigt werden, statt ständig nachzufragen (Polling).</p>
+  </section>
+
+  <section>
+    <h2>MVC (Model-View-Controller)</h2>
+    <p>Architektur-Muster, das eine Anwendung in drei Verantwortlichkeiten trennt. In der AP2 häufig als Zuordnungsaufgabe gefragt.</p>
+    <ul class="key-list">
+      <li><strong>Model:</strong> Daten und Geschäftslogik – unabhängig von der Darstellung.</li>
+      <li><strong>View:</strong> Präsentation der Daten für den Benutzer.</li>
+      <li><strong>Controller:</strong> nimmt Eingaben entgegen, ruft das Model auf, wählt die View.</li>
+    </ul>
+    <p>Vorteile: getrennte Zuständigkeiten, parallele Entwicklung, bessere Testbarkeit, austauschbare Oberflächen.</p>
+  </section>
+
+  <section>
+    <h2>Prüfungsmodus</h2>
+    <p>Dieser FluxCheck führt dich durch die wichtigsten AP2-Aspekte dieses Themas. Du kannst Antworten prüfen, Fragen überspringen und bekommst am Ende eine Auswertung nach Kategorie.</p>
+  </section>
+
+  <section class="finalflux-test" data-finalflux-test aria-live="polite">
+    <div class="test-meta">
+      <span data-question-counter>Frage 1</span>
+      <span data-score-counter>0 richtig</span>
+    </div>
+    <div class="category-block">
+      <p class="eyebrow">Kategorie</p>
+      <h2 data-category-title>Entwurfsmuster</h2>
+      <p data-category-hint>AP2-Training</p>
+    </div>
+    <div class="question-card">
+      <h3 data-question-text></h3>
+      <div data-answer-options class="answer-options"></div>
+      <div data-answer-feedback class="fluxcheck-result"></div>
+    </div>
+    <div class="test-actions">
+      <button type="button" data-check-answer>Antwort prüfen</button>
+      <button type="button" data-skip-question class="secondary">Überspringen</button>
+      <button type="button" data-next-question class="secondary" disabled>Weiter</button>
+    </div>
+  </section>
+
+  <section data-test-result class="finalflux-panel" hidden>
+    <h2>Auswertung</h2>
+    <p data-result-summary></p>
+    <ul data-category-summary class="key-list"></ul>
+    <div class="finalflux-actions">
+      <button type="button" data-restart-test>Test neu starten</button>
+      <a href="/finalflux">Zurück zur Übersicht</a>
+    </div>
+  </section>
+</main>
+
+<script src="/js/finalflux-test.js" data-questions-src="/finalflux/questions/ap2_fiae_entwurfsmuster.json" defer></script>
+</body>
+</html>