Stefan Franke

Entwicklung interaktiver Softwareanwendungen

SoSe 2025

Bildbeschreibung

Übersicht

  • Wiederholung (was war vor 14 Tagen...)
  • Basics & (neue) Begriffe von Serveranwendungen
  • Wiederholungs-/Gruppenaufgabe
  • Webanwendungen mit Datenbanken
    • Was ist eine Datenbank? Wofür werden sie verwendet?
    • Grundbegriffe: Tabelle, Attribut, Datensatz, Schlüssel
    • Vom ER-Modell zur Datenbanktabelle (Modellierungsprozess)
    • Wie funktionieren relationale Datenbanken?
    • DBMS und Technologien: SQL, MariaDB, SQLite
    • Datenbankzugriff über eine Webanwendung (Flask + SQL)
    • Kleine praktische Beispiele zur Datenverarbeitung

Technologien im Überblick

  • HTML & CSS – Struktur und Gestaltung von Webseiten
  • JavaScript – Interaktivität im Frontend (z. B. Formulare, Reaktionen)
  • Python – Logik, Datenverarbeitung, Serversteuerung
  • Flask – schlankes Webframework für Python
  • Datenbanken – Speicherung & Abfrage von Informationen

Wiederholung: Was war vor 14 Tagen?

  • 🔌 Verbindung zum Server über ssh, Arbeiten mit ~/www
  • 🧱 Erstellung einer ersten Flask-Webanwendung mit:
    • app.py, templates/index.html, static/
  • 🧠 Einführung in das Konzept von Routing:
    • Verarbeitung von @app.route()
    • GET- und POST-Anfragen mit Formularen
  • 📦 Nutzung von venv und Paketverwaltung mit pip
  • 💬 Variablen, Bedingungen und Schleifen in HTML
  • 🎮 Umsetzung eines eigenen kleinen Rätsels (z. B. Escape-Room-Element)
  • ✅ Trennung von Logik (Python) und Oberfläche (HTML/CSS)
  • 🔁 Ziel: Interaktive Webanwendung mit Benutzereingaben & Feedback

Herausforderung – Warum überhaupt Flask?

Flask Logo
  • ✅ HTML allein reicht nicht für dynamische Webanwendungen
  • ✅ Serverseitige Verarbeitung benötigt Logik (z. B. für Eingaben, Abfragen, Daten)
  • ✅ Flask ist leichtgewichtig und ideal für Einsteiger & kleine Projekte
  • ✅ Python kann einfach mit Datenbanken und Formularen kombiniert werden

🔍 Moderne Einsatzbereiche:

  • 📊 Dashboards für Datenvisualisierung & Analyse
  • 📦 APIs und Backend-Logik für Web-Apps oder Mobile Apps

🌐 Live-Demo anzeigen
💻 Quellcode auf GitHub → run.py

Herausforderungen - Komplexe Projektstruktur

/home/isa##
├── .ssh/                      # SSH-Zugang (public key)
├── www/                      # Statische Landing Page / Ihre Homepage / hat NICHTS mit der Flask-App zu tun!
│   ├── index.html
│   ├── unterseiten.html
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── img/
│
├── flask_app/                # Flask-Anwendung
│   ├── app.py                # Haupt-Logik		-> erreichbar unter spez. Port (isa#.edumake.de:8022)
│   ├── venv/                 # Virtuelle Umgebung
│   ├── templates/            # HTML-Seiten mit Variablen & Logik
│   │   ├── index.html        # Startseite der Flask-App
│   │   └── raetsel.html      # Formularseite für ein Rätsel
│   └── static/               # CSS, JS, Bilder für Flask
│   		└── assets/               # CSS, JS, Bilder für Flask
│       		├── style.css
│       		├── script.js
│       		└── img/
│   						└── bild1.png 

✅ Trennung von statischer Seite (www/) und interaktiver Flask-App (flask_app/) sorgt für Übersicht.

Herausforderungen - Komplexe Serverstruktur

Begriffe im Zusammenhang – Webserver

❓ Wo gab es weitere Schwierigkeiten?

📚 Zentrale Begriffe aus Sitzung 1–3

  • Terminal
  • PowerShell
  • Verzeichnisstruktur
  • cd, ls, pwd
  • mkdir, cp, mv, rm
  • nano
  • SSH
  • Public / Private Key
  • scp
  • JavaScript
  • script-Tag
  • document.getElementById()
  • innerHTML
  • event / EventHandler
  • HTML / CSS / JavaScript
  • Landing Page
  • Formular / input
  • .value
  • IP-Adresse
  • Port (2222)
  • URL
  • Ubuntu Server
  • Webserver
  • NGINX
  • SSL / HTTPS
  • Routing
  • DOM
  • prompt() / alert()
  • Funktion / function
  • if / else
  • Python
  • Flask
  • app.py
  • venv / virtuelle Umgebung
  • templates-Verzeichnis
  • Jinja2 / {{ ... }}
  • @app.route()
  • GET / POST
  • render_template()
  • return
  • localhost / 127.0.0.1
  • debug=True
  • Escape-Room-Logik

🧠 Begriffe im Überblick (kompakt erklärt)

  • Terminal: Kommandozeilenprogramm unter macOS/Linux zur Eingabe von Befehlen.
  • PowerShell: Windows-Äquivalent zum Terminal, mit eigener Syntax und Erweiterungen.
  • Verzeichnisstruktur: Aufbau von Ordnern und Unterordnern auf einem System.
  • cd, ls, pwd: Navigation (cd), Anzeige von Inhalten (ls), aktueller Pfad (pwd).
  • mkdir, cp, mv, rm: Ordner erstellen, Dateien kopieren, verschieben, löschen.
  • nano: Einfacher Texteditor in der Kommandozeile (z. B. für HTML-Dateien).
  • SSH: Sicheres Protokoll zur Verbindung mit einem Server über das Netzwerk.
  • Public / Private Key: Schlüsselpaar für sichere Authentifizierung ohne Passwort.
  • scp: Befehl zum sicheren Kopieren von Dateien über SSH.
  • IP-Adresse: Eindeutige Netzwerkadresse eines Geräts (z. B. 89.58.62.146).
  • Port (2222): Spezieller Kommunikationskanal – wir nutzen Port 2222 für SSH.
  • URL: Adresse einer Webseite, z. B. https://isa17.edumake.de.
  • HTML / CSS / JavaScript: Struktur, Stil und Funktion einer Website.
  • Landing Page: Eigene Startseite auf dem Server im Ordner ~/www.
  • Ubuntu Server: Betriebssystem für Server – läuft auf unserem Testserver.
  • Webserver: Software, die Webseiten ausliefert (z. B. Apache oder NGINX).
  • NGINX: Leistungsstarker Webserver und Reverse Proxy.
  • SSL / HTTPS: Verschlüsselung für sichere Webseitenzugriffe.
  • Routing: Steuerung, welche URL auf welche Datei oder Funktion zeigt.
  • Python: Programmiersprache zur Backend-Logik, auf Servern sehr verbreitet.
  • Flask: Einfaches Web-Framework für Python zur Entwicklung dynamischer Webseiten.
  • venv: Virtuelle Umgebung zur Verwaltung von Python-Abhängigkeiten.
  • app.py: Hauptdatei der Flask-Anwendung, enthält Routen und Logik.
  • templates-Verzeichnis: Enthält HTML-Dateien mit Variablen & Bedingungen.
  • Jinja2: Template-Sprache von Flask für dynamisches HTML ({{ }}, Schleifen, Bedingungen).
  • @app.route(): Dekorator zur Definition von URL-Routen in Flask.
  • GET / POST: Zwei HTTP-Methoden für Datenabruf bzw. -übermittlung.
  • render_template(): Flask-Funktion zum Laden und Anzeigen eines Templates.
  • return: Gibt eine Antwort im Flask-Backend zurück (z. B. HTML-Seite).
  • localhost / 127.0.0.1: Lokale Adresse des eigenen Rechners, zum Testen von Webanwendungen.
  • debug=True: Startet die Flask-App im Entwicklungsmodus mit Live-Reload.
  • Escape-Room-Logik: Beispielanwendung mit mehreren Routen, Formularlogik und Rückmeldungen.
  • JavaScript: Programmiersprache, die Webseiten interaktiv und dynamisch macht.
  • script-Tag: HTML-Element zur Einbindung von JavaScript-Code in eine Webseite.
  • document.getElementById(): Zugriff auf ein HTML-Element per ID aus dem DOM.
  • innerHTML: Inhalt eines HTML-Elements (Text, HTML) per JavaScript ändern.
  • event / EventHandler: Ereignis (z. B. Klick), das per JavaScript erkannt und verarbeitet wird.
  • DOM: Document Object Model – die Baumstruktur der HTML-Elemente einer Webseite.
  • Formular / input: HTML-Elemente zur Eingabe von Nutzerdaten auf Webseiten.
  • .value: JavaScript-Zugriff auf den Wert eines Eingabeelements (z. B. eines Textfelds).
  • prompt() / alert(): Einfache Fenster zur Eingabe (prompt) oder Ausgabe (alert) von Daten.
  • Funktion / function: Wiederverwendbarer Block von JavaScript-Code für bestimmte Aufgaben.
  • if / else: Bedingte Verzweigung in JavaScript – führt Code je nach Wahrheitswert aus.

Gruppenaufgabe: Flask Escape Game gemeinsam online bringen!

Ziel: Jede Gruppe bringt ihre eigene Flask-Anwendung online, sodass ein zusammenhängendes Escape Game entsteht!

  • 🎯 Gemeinsames Ziel: Jede Anwendung muss online und erreichbar sein.
  • 🔗 Die Anwendungen sind nacheinander verlinkt: Rätsel → nächstes Rätsel.
  • 🤝 Teamarbeit: Wer fertig ist, hilft aktiv anderen Gruppen beim Debuggen und Verlinken.
  • 🛠️ Fokus: Funktionalität zuerst – dann Frontend & CSS optimieren.

Technische Schritte (Reminder):

  1. 🔐 SSH-Verbindung herstellen: ssh benutzername@edumake.de
  2. 📁 Orientierung im Verzeichnis: pwd, ls -a, tree -L 2
  3. 🧠 Code prüfen: nano ~/flask_app/app.py
  4. ⚙️ Virtuelle Umgebung aktivieren: cd ~/flask_appsource venv/bin/activate
  5. 🚀 Flask starten: python3 app.py
  6. 🌐 Anwendung aufrufen: http://isa#.edumake.de:80##

✅ Erst wenn alle Gruppen erfolgreich online sind, ist das Spiel vollständig!

🗃️ Datenbanken in Softwaresystemen

In modernen Softwaresystemen sind Datenbanken unverzichtbar für die dauerhafte, strukturierte und sichere Speicherung von Informationen. Sie bilden das Rückgrat vieler Anwendungen – von Webshops über Spiele bis hin zu Verwaltungs- und Buchungssystemen.

🧩 „Eine Datenbank ist ein Abbild der Realität“

Datenbanken bilden Strukturen und Sachverhalte aus der realen Welt in klar definierter, digitaler Form nach. Sie erfassen das, was in der Wirklichkeit vorkommt, in Form von Tabellen, Einträgen und Eigenschaften.

📌 Beispiele:

  • Personen → Benutzer-Tabelle
  • Bücher → Medien-Tabelle
  • Räume, Geräte, Bestellungen → eigene Tabellen mit passenden Spalten

📚 Was sind Datenbanken?

  • Geordnete Datensammlung
  • Tabellenartige Struktur
  • Spalten = Eigenschaften (Attribute)
  • Zeilen = Einträge (Datensätze)
  • Festgelegtes Schema (z. B. Datentypen)
  • Unabhängig vom konkreten Programm
  • Unterschiedliche Formen (relational, dokumentbasiert, graphbasiert, ...)

💾 Wann werden Daten in einer Datenbank gespeichert?

Sobald Daten dauerhaft gespeichert und später wieder gezielt abgerufen werden sollen, erfolgt das in modernen Softwaresystemen meist über eine Datenbank.

  • ✅ strukturiert, effizient und auf Dauerbetrieb ausgelegt
  • ✅ ermöglichen Suchfunktionen, Sicherheit, Mehrbenutzerzugriffe, Konsistenz
  • ✅ Beispiele: Nutzerprofile, Beiträge, Spielstände, Logdaten, Mediendateien
  • ⚠️ Temporäre Daten (z. B. in RAM, Session, Cookies) brauchen nicht immer eine Datenbank
  • ⚠️ Kleine Apps speichern manchmal in einfachen Dateien (z. B. JSON, TXT, CSV)
  • 📌 In professionellen Softwaresystemen ist die Datenbank Standard für alle strukturierten, dauerhaft gespeicherten Inhalte

💡 Wofür genau?

  • 📋 Speicherung von Benutzerdaten (z. B. Konten, Logins, Rollen)
  • 🛒 Verwaltung von Inhalten (z. B. Produkte, Beiträge, Dateien)
  • 📨 Erfassen von Nutzereingaben (z. B. Kontaktformulare, Kommentare)
  • 📅 Planung und Terminverwaltung (z. B. Kalender, Reservierungen)
  • 🎮 Fortschritt und Spielstände in Spielen
  • 📊 Protokollierung von Aktivitäten (z. B. Logfiles, Statistikdaten)
  • 🔍 Grundlage für Such- und Filtersysteme
  • 🔁 Zentrale Datenhaltung für Mehrbenutzersysteme

🛠️ Welche Datenbanktechnologien gibt es?

  • 🧱 Relationale Datenbanken (SQL):
    • MySQL, MariaDB, PostgreSQL, SQLite
    • Daten in Tabellen mit festen Strukturen
    • Nutzen SQL zur Abfrage und Manipulation
  • 🗂️ NoSQL-Datenbanken:
    • Dokumentbasiert: MongoDB, CouchDB
    • Key-Value: Redis, DynamoDB
    • Graphbasiert: Neo4j
    • Flexiblere Struktur, kein festes Schema
  • ☁️ Cloud-Datenbanken:
    • Firebase Realtime DB, Google Cloud SQL, Amazon RDS, Supabase
    • Skalierbar, webbasiert, sofort einsatzbereit

📊 SQL vs. NoSQL – Wann was?

🧱 SQL (relational)

  • Strukturierte Daten in Tabellen
  • Feste Schemata (Spalten & Datentypen)
  • Starke Beziehungen (JOINs)
  • Höchste Datenkonsistenz und Integrität
  • Bewährte Standards (z. B. MySQL, PostgreSQL)
  • Ideal für Buchungssysteme, Shops, Verwaltung

📂 NoSQL (nicht-relational)

  • Flexible, schemafreie Daten (z. B. JSON)
  • Schnelle Entwicklung & einfache Skalierung
  • Geeignet für große, dynamische Datenmengen
  • Speichert Dokumente, Key-Value, Graphen …
  • Typisch: MongoDB, Firebase, Redis, Neo4j
  • Ideal für Chats, Nutzerprofile, Streaming-Apps

📌 Fazit: SQL ist ideal für stabile, verknüpfte Daten – NoSQL für dynamische, flexible Systeme.

Kurze Einführung in SQL

SQL Logo

SQL steht für Structured Query Language und ist die Standardsprache zur Arbeit mit relationalen Datenbanken. Sie ermöglicht es, Daten abzufragen, zu speichern, zu verändern und zu löschen – in einem klaren, tabellenbasierten System.

📌 SQL ist deklarativ – man beschreibt, was man will, nicht wie es intern passiert.

Ziel dieser Veranstaltung ist nicht, dass Sie SQL vollständig beherrschen. Vielmehr sollen Sie die grundlegende Funktionsweise von Datenbanken in modernen Softwaresystemen verstehen – und exemplarisch erleben, wie sich eine einfache Datenbank mit Flask verknüpfen lässt.

📊 Von der Realität zur Datenbank

  • Realität → Informationsstruktur: Was soll gespeichert werden?
  • Zweckbestimmung: Kundenanforderung, Ziel des Systems
  • Konzeptuelles Modell (ERM): Entitäten und Beziehungen
  • Logisches Modell: Tabellen & Beziehungen im DB-Schema
  • Physisches Modell: Technische Umsetzung im DBMS
  • Unterscheidung: DBMS-unabhängige Planung vs. konkrete Umsetzung
Von der Realität zur Datenbank

📘 Vom konzeptionellen zum logischen Datenmodell

  • Entity-Relationship-Modell (ERM): beschreibt Objekte (Entitäten) und deren Beziehungen
  • Attribute: Eigenschaften von Entitäten (z. B. Name, Artikelnummer)
  • Beziehungen: z. B. Kunde veranlasst Bestellung
  • Kardinalitäten: zeigen, wie oft Entitäten miteinander verknüpft sein können (z. B. 1:1, 1:N, N:M)
  • 📉 Im unteren Modell: präzisere Kardinalitäten durch Zahlenbereiche (0..1, 1..1, 0..N)
ERM-Modell mit Kardinalitäten

🧱 Struktur einer Tabelle im relationalen Modell

  • Relation (Tabelle): entspricht einer Datenstruktur mit festen Spalten
  • Attribute (Spalten): definieren die Art der gespeicherten Daten (z. B. Name, Wohnort)
  • Tupel (Zeilen): jede Zeile beschreibt einen konkreten Datensatz
  • Relationenschema: legt Struktur und Datentypen der Tabelle fest
  • ⚙️ Grundlage für Abfragen mit SQL (z. B. SELECT, WHERE)
Relationale Tabelle – Aufbau

🔗 Fremdschlüssel & Beziehungen zwischen Tabellen

  • 👤 Eine Person (z. B. Schüler/in) ist einem Kurs zugeordnet
  • 📌 Die Spalte KursNr in der Personentabelle ist ein Fremdschlüssel
  • 🔐 Der Fremdschlüssel verweist auf den Primärschlüssel KursNr in der Kurstabelle
  • 🎓 So entsteht eine 1:n-Beziehung: Ein Kurs kann mehrere Personen haben, aber jede Person nur einen Kurs
  • ✅ Typisches Beispiel relationaler Modellierung
Fremdschlüssel KursNr

📦 Aufgabe: Rätsel aus einer eigenen Datenbank laden

In dieser Aufgabe sollen Ihre Rätsel nicht mehr im Code hartkodiert sein, sondern dynamisch aus einer eigenen MariaDB-Datenbank geladen werden. So können Sie später einfach neue Inhalte hinzufügen, ohne die Anwendung anpassen zu müssen.

🛠️ Schritt-für-Schritt-Anleitung

  • 📄 init.sql erstellen mit CREATE TABLE
  • 🧪 Beispielrätsel per INSERT INTO einfügen
  • 🔌 Zugangsdaten in app.py einfügen (Benutzer, Passwort, DB)
  • 📬 Rätsel aus der DB abrufen und anzeigen
  • 🧠 Eingabe mit Lösung vergleichen und ggf. zur nächsten Seite leiten

🎯 Ziel der Aufgabe

  • 🔁 Dynamisch Rätsel verwalten
  • ⚙️ Keine Codeänderung bei neuen Rätseln notwendig
  • 🧩 Strukturierte, wartbare Escape-Room-Logik

💡 Tipps & Hinweise

  • 🧪 SQL-Befehle vorab in phpMyAdmin testen
  • 📁 Struktur dokumentieren und SQL-Datei versionieren
  • 🔄 App neu starten, damit Änderungen aktiv werden