Karstens Blog

1. Architektur-Überblick

Das Projekt ist eine monolithische Webanwendung, die dem klassischen Server-Side Rendering (SSR) Prinzip folgt, aber für dynamische Inhalte (wie "Infinite Scroll" oder Status-Updates) AJAX/Fetch-APIs nutzt.

• Design-Pattern: Das System folgt grob dem MVC-Muster (Model-View-Controller):

  • Model: Die Datenhaltung erfolgt direkt im Dateisystem (logic.py fungiert als Daten-Access-Layer für Dateien und JSON-Datenbanken).

  • View: HTML-Templates mit Jinja2 (templates/).

  • Controller: Flask-Routen in app.py, die Anfragen entgegennehmen und die Logik steuern.

2. Verwendete Komponenten & Technologien

Backend (Server-Seite)

• Sprache: Python 3.

• Web-Framework: Flask. Es übernimmt das Routing, Session-Management und die Template-Engine.

• Applikationsserver (Produktion): Vorgesehen ist der Einsatz von Gunicorn hinter einem Apache Webserver (als Reverse Proxy), wie im Chat-Verlauf konzipiert.

• Asynchrone Tasks: Die Datei optimize.py implementiert eine einfache Threading-basierte Warteschlange (threading.Thread), um langlaufende Video-Konvertierungen im Hintergrund auszuführen, ohne den Webserver zu blockieren.

Frontend (Client-Seite)

• Template Engine: Jinja2 (Teil von Flask) zur Generierung des HTMLs auf dem Server.

• Styling: Eigenes CSS (style.css), responsive ausgelegt (Media Queries).

• JavaScript: Vanilla JS (kein Framework wie React/Vue) für Interaktionen wie Drag & Drop, Warenkorb-Logik und API-Calls (fetch).

• Bibliotheken:

  • PhotoSwipe v5: Für die Lightbox-Darstellung der Bilder und Videos (Touch-Gesten, Zoom).

  • PhotoSwipe Video Plugin: Für die nahtlose Integration von Videos in die Galerie.

Medien-Verarbeitung (Die "Engine")

Das Herzstück der Anwendung ist die umfangreiche Verarbeitung verschiedener Medienformate in logic.py:

• Bildbearbeitung:

  • Pillow (PIL): Für Standard-Bildoperationen (Resizing, Formatkonvertierung).

  • Rawpy: Zur Entwicklung von RAW-Dateien (.CR2, .NEF, .ARW etc.) direkt im Browser.

  • ExifRead: Zum Auslesen von Metadaten (Kamera, ISO, Blende).

  • Pillow-HEIF: Für den Support von Apple HEIC/HEIF Dateien.

• Video-Engine:

  • FFmpeg / FFprobe: Werden als externe Prozesse (subprocess) aufgerufen, um Metadaten zu lesen, Thumbnails zu extrahieren und Videos zu transkodieren (H.264 Konvertierung, Faststart-Fix).

Datenhaltung & Speicher (Persistence)

Das System verzichtet bewusst auf eine klassische SQL-Datenbank.

• File-Based: Die Ordnerstruktur auf der Festplatte (originals/) ist die "Single Source of Truth".

• JSON-Datenbanken: Metadaten, Benutzerkonten (users.json), Rollen (roles.json), Freigabe-Links (shares.json) und Video-Verläufe werden in JSON-Dateien im Ordner userdata/ gespeichert.

• Caching: Generierte Thumbnails und extrahierte Metadaten werden im cache/-Ordner abgelegt, um die Performance bei wiederholten Zugriffen zu erhöhen.

3. Sicherheits-Architektur

• RBAC (Role-Based Access Control): Ein eigenes System prüft bei jedem Zugriff (check_access Decorator), ob die Rolle des Users (z.B. "family") Zugriff auf den angeforderten Pfad hat.

• Token-System: Für das Sharing werden UUID-Tokens generiert, die einen zeitlich begrenzten Zugriff ohne Login ermöglichen.

• Authentifizierung: Session-basiertes Login.