### Milo Radio – Fullstack PWA-, Streaming- & Podcast-Architektur Milo Radio kombiniert eine performante, clientseitige Single Page Application (SPA) mit einem leichtgewichtigen, hochgradig optimierten PHP-8-REST-Backend, relationaler MySQL/MariaDB-Persistenz und Schnittstellen zu globalen Audio-Verzeichnissen. **Technische Kernaspekte:** - **Podcast-Integration & On-Demand Audio:** - *Intelligente Stream-Erkennung:* Die App unterscheidet automatisch zwischen endlosen Live-Streams und zeitbegrenzten Podcast-Episoden (`podcastService.js`). - *Echtes Pause & Resume mit Zeiterhalt:* Beim Pausieren von Podcasts bleibt die aktuelle Spielzeit (`currentTime`) im HTML5-Audio-Element exakt erhalten. Beim Fortsetzen spielt die Episode an genau derselben Stelle weiter (kein versehentliches Zurücksetzen auf 0:00). - *Interaktive Scrubber-Timeline:* Bei Podcast-Wiedergabe schaltet die Player-Bar dynamisch eine sekundengenaue Zeitleiste (`Aktuelle Zeit / Gesamtlänge`) frei, über die frei vor- und zurückgesprungen werden kann. - *15-Sekunden Quick-Skip:* Tasten für `-15s` und `+15s` ermöglichen schnelles Überspringen oder Wiederholen von Passagen. - *Episodenauswahl in der Genre-Ansicht:* Podcast-Karten bieten neben dem Sofortstart der neuesten Episode den Button *"Weitere Folgen"*, der eine aufklappbare Liste der letzten Episoden samt Publikationsdatum, Laufzeit und Einzel-Play-Button anzeigt. - *Server-seitiger RSS-Feed-Resolver (`podcast.php`):* Parst XML/RSS-Feeds mit Namespace-Unterstützung (`itunes:image`, `itunes:duration`, `enclosure`) und nutzt einen 15-Minuten Server-Cache zur Entlastung externer Hosts und für minimale Ladezeiten. - **Weltweite Online-Radiosendersuche (> 40.000 Sender) & Admin-Tab-System:** - *Echtzeit-Verzeichnissuche (`radio_search.php`):* Ermöglicht im Admin-Panel das Durchsuchen des weltweiten Radio-Browser-Verzeichnisses mit über 40.000 Stationen in Sekundenbruchteilen (inkl. 10-Minuten Server-Cache). - *Treffer-Pool mit Länderunterscheidung:* Suchergebnisse zeigen neben Name, Genre, Bitrate und Favicon/Logo das **Herkunftsland (Country-Flag)** an. Dies ermöglicht es dem Administrator, bei Sendern mit identischen oder ähnlichen Namen (z. B. "Rock Antenne", "Sunshine Live", "1LIVE", "BBC") zielsicher den gewünschten Sender auszuwählen. - *1-Klick Auto-Fill:* Ein Klick auf *"Übernehmen"* füllt alle Formularfelder (Name, Audio-Stream-URL, Genre, Logo) automatisch aus. - *1-Klick Podcast-Auto-Import:* Importiert beliebige RSS-/Podigee-Links und extrahiert Metadaten und Stream-URL vollautomatisch. - *Übersichtliches Tab-System:* Klare Trennung zwischen *"Radiosender suchen"* und *"Podcast importieren"* mit schlichter Bootstrap-Icons-Typografie. - **PWA & Network-First Caching:** - Der Service Worker (`sw.js`) erzwingt eine strikte Network-First-Strategie für HTML, Skripte und Versionierungs-Header mit automatischer Neuinitialisierung bei Updates (`controllerchange`). Dadurch bleibt die App offlinefähig und garantiert gleichzeitig sofortige Updates auf Smartphones. - **Modulare ES6-SPA & Gestensteuerung:** - Dynamisches View-Routing ohne Page-Reloads. Native Touch- und Swipe-Gesten ermöglichen intuitives Wechseln der Ansichten inklusive 10 % Randschutz zur Vermeidung von Konflikten mit nativen Smartphone-Gesten. - **Globale Sticky-Bottom-Player-Bar:** - Entkoppelt von Seitenwechseln bleibt die Audiowiedergabe stets aktiv. Über den Backend-Metadaten-Proxy (`metadata.php`) werden ICY-Stream-Titeldaten in Echtzeit abgefragt und mit Cover-Artworks und animierter Soundwave visualisiert. - **Intelligentes Favoriten-Handling (`userStationService.js`):** - Clientseitige Verwaltung im `localStorage` mit Top-6-Begrenzung und automatischem FIFO-Verdrängen älterer Sender. Beim Abspielen rückt der aktive Sender nach dem MRU-Prinzip (Most Recently Used) auf Platz #1 vor (inkl. sanftem Auto-Scroll). Ein moderner 2-Klick-Bestätigungsdialog im dezenten Slate-Look verhindert versehentliches Löschen. - **Deep Analytics & Personalisierte Empfehlungen (Chart.js):** - Detaillierte Auswertungen des individuellen Hörverhaltens über Liniendiagramme, Top-5-Balken und Genre-Doughnut. Die Recommendation-Engine schlägt passende neue Sender basierend auf den Lieblingsgenres vor; mit der **1-Klick-Playlist-Übernahme** können die Top-5-Stationen direkt als aktive Favoritenliste übernommen werden. - **Admin-Sicherheit & Automatisierte Wartung:** - PIN-Authentifizierung mit künstlicher 1,5s Verzögerung sowie 5-Minuten-Lockout nach 5 Fehleingaben. Sichere, signierte HMAC-SHA256 Cookies (`milo_admin_token`) garantieren zuverlässige Sessions auch auf Shared-Hosting FastCGI-Clustern. Das Wartungsskript `maintenance.php` komprimiert Hörer-Events älter als 6 Monate in die Tabelle `archived_stats` und führt ein `OPTIMIZE TABLE` durch.

### Interactive Exam Engine Die Scrum Quiz App nutzt eine **Stateful Engine**, die den Prüfungsstatus in Echtzeit verwaltet. **Architektur-Highlights:** - **Encapsulation:** Die Prüfungsfragen sind strikt von der Logik getrennt und werden dynamisch geladen. - **Real-time Processing:** Das System validiert Antworten on-the-fly, ohne die Seite neu laden zu müssen. - **Data Integrity:** Durch die Verwendung von strukturierten Datenquellen ist die Erweiterung um neue Fragenkataloge nahtlos möglich.

### Modulare Berechnungs-Architektur Die SmartCalc App folgt dem **Model-View-Controller (MVC)** Muster innerhalb eines autonomen Moduls. **Highlights:** - **Entkopplung:** Das UI kommuniziert ausschließlich über eine RESTful API mit der Logik. - **Sicherer Parser:** Die mathematische Engine validiert Eingaben über eine Whitelist, bevor sie berechnet werden. - **Modularität:** Das gesamte Modul ist als Flask Blueprint gekapselt und kann einfach in andere Systeme migriert werden.

### Die Hub-and-Spoke Architektur Dieses Portfolio basiert auf einer **Clean Architecture**. Der zentrale Kern (Controller) orchestriert den Datenfluss zwischen den verschiedenen spezialisierten Modulen (Spokes). **Vorteile dieses Ansatzes:** - **Sicherheit:** Strikte Trennung von Geschäftslogik und Datenhaltung. - **Skalierbarkeit:** Neue Features (wie der Taschenrechner oder das Quiz) lassen sich als unabhängige Blueprints integrieren. - **Wartbarkeit:** Klare Abhängigkeiten ohne zirkuläre Referenzen.

### RAG-gestützte Bibliotheks-Architektur & Sicherheitsstandards Die Online-Bibliothek ist als modulares Flask-Blueprint konzipiert und vereint Enterprise-Web-Architektur mit einem ausfallsicheren RAG-System (Retrieval-Augmented Generation). **Technische Kernaspekte & Features:** - **RAG-Integration & Token-Ökonomie:** Bei Benutzeranfragen injiziert das System den aktuellen Buchbestand und komprimierte Buchanalysen als Kontext in den System-Prompt für das LLM (`gemma4:31b`). Durch Kontext-Kompaktierung (Kürzung auf max. 180 Zeichen, Verzicht auf rohe Inhaltsverzeichnisse) wird der Input-Token-Verbrauch um bis zu 80 % gesenkt. Das Antwortbudget ist auf `max_tokens: 500` für prägnante 3-Absatz-Antworten optimiert. - **Smartes Antwort-Caching (`ki_cache`):** Jede KI-Anfrage wird als SHA256-Hash in der SQLite-Tabelle `ki_cache` hinterlegt. Wiederholte oder identische Fragen werden mit 0 Token-Kosten in nur 0,01 Sekunden beantwortet. - **Graceful Degradation (Ausfallschutz):** Sollte der Ollama-Dienst offline, überlastet oder ratelimited sein, greift automatisch eine heuristische SQL-Katalogsuche (`LIKE`-Query), die passende Bücher aus dem Bestand liefert. - **KI-gestützte PDF-Analyse & Sammel-Import:** Der integrierte Parser liest hochgeladene PDFs serverseitig aus und erfasst via KI Titel, Autor, ISBN und Zusammenfassungen. Enthält ein Dokument mehrere Bücher oder Nutzerdatensätze, erkennt das System diese Strukturen und legt alle Entitäten vollautomatisch in einem einzigen Durchlauf an. - **Enterprise-Sicherheit & Datenintegrität:** - **SQL-Injection-Prävention:** Konsequenter Einsatz parametrisierter SQL-Abfragen (Prepared Statements). - **XSS-Schutz:** Vollständige Maskierung aller dynamischen Ein- und Ausgaben mittels HTML-Escaping. - **Passwortsicherheit:** Sicheres Passworthashing via BCRYPT mit individuellen Salts. - **Session- & Cache-Schutz:** Vollständiges Zerstören von Sessions beim Logout und restriktive `Cache-Control`-Header (`no-store, no-cache`), um Ausspähen über die Browser-Historie zu unterbinden. - **Relationale Integrität:** Fremdschlüsselbeziehungen mit automatischer Kaskadierung (`ON DELETE CASCADE`) zur sauberen Bereinigung abhängiger Datensätze.