Stefan Franke

Entwicklung interaktiver Softwareanwendungen

SoSe 2025

Bildbeschreibung

Übersicht

  • Wiederholung (was war vor 4 Wochen...)
  • Künstliche Intelligenz als Werkzeug
  • Dokumentation mit README.md- Aufbau, Inhalte und Formatierung
  • Git & GitHub – Grundlagen und Praxis
    • Was ist Git? Warum brauchen wir Versionskontrolle?
    • Arbeiten mit lokalen Repositories & Konfiguration pro Person
    • GitHub-Konto erstellen & Repository veröffentlichen (mit README.md)
    • Zusammenarbeit mit Branches & Pull Requests

Wiederholung: Letzte Einheit (Escape Room & Datenbank)

  • 🔐 SSH-Verbindung zum Server mit eigenem Public Key
  • 🧭 Navigation auf dem Server mit ls -a, cd und Nutzung des Filebrowsers
  • 📄 Wiederholung: Starten der Flask-Rätselanwendung (Escape Room) auf dem zugewiesenen Port
  • 💡 Strukturierung der Flask-App mit ~/flask_app für Logik und ~/www für statische Seite
  • 💾 Einführung in relationale Datenbanken und phpMyAdmin
  • ⚙️ Installation des MySQL-Connectors mit pip in venv
  • 🔗 Aufbau einer Datenbankverbindung und Test via testdb.py
  • 🧩 Integration von Rätseln in Datenbanktabellen (Tabelle puzzles)
  • 🔄 Weiterleitung zum nächsten Raum durch Datenbankverknüpfung next_room_id
  • 🎮 Start der Entwicklung eines Click-Adventures mit eigener Tabelle decisions
  • 🧠 Verwendung von Flask, HTML und SQL für dynamische Entscheidungspfade im Spiel
  • ✅ Ziel: Interaktive Webanwendung mit Entscheidungsmöglichkeiten, Speicherung in Datenbank, serverseitiger Verarbeitung

Herausforderung – Datenbankanbindung

  • 🔁 Projekt auf dem Server reaktiviert (Flask starten, venv aktivieren, richtige Portzuweisung)
  • 💾 MySQL-Connector installiert und Datenbankverbindung mit Flask erfolgreich hergestellt
  • 🧠 Spiel- und Rätsellogik aus dem Code herausgelöst und in eine neue Datenbanktabelle überführt
  • 🔗 Verknüpfung der Tabellen (z. B. puzzles, rooms, decisions) mit eindeutigen IDs und next_room_id
  • ✅ Ziel: Trennung von Logik und Inhalt – Rätselstruktur durch SQL-Daten steuerbar und erweiterbar

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

  • phpMyAdmin
  • MySQL / MariaDB
  • relationale Datenbank
  • Datenbanktabelle
  • Datensatz
  • Attribut / Spalte
  • Primärschlüssel
  • Fremdschlüssel
  • next_room_id
  • Connector / mysql.connector
  • cursor.execute()
  • SQL-Abfrage
  • SELECT / INSERT
  • fetchone() / fetchall()
  • Datenbankverbindung
  • 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)

  • phpMyAdmin: Web-Oberfläche zur Verwaltung von MySQL-Datenbanken (Tabellen anlegen, Daten editieren etc.).
  • MySQL / MariaDB: Beliebte relationale Datenbanksysteme zur strukturierten Speicherung von Daten.
  • relationale Datenbank: Daten werden in Tabellen gespeichert, die über Schlüssel miteinander verbunden sind.
  • Tabelle / Datensatz / Attribut: Tabellen bestehen aus Zeilen (Datensätzen) und Spalten (Attributen).
  • Primärschlüssel: Eindeutiges Attribut zur Identifikation eines Datensatzes (z. B. id).
  • Fremdschlüssel: Verknüpft Datensätze zwischen Tabellen (z. B. next_room_id).
  • mysql.connector: Python-Bibliothek zur Verbindung mit einer MySQL-Datenbank aus Flask heraus.
  • cursor.execute(): Führt eine SQL-Abfrage in Python aus.
  • SELECT / INSERT: SQL-Befehle zum Auslesen oder Einfügen von Daten in die Datenbank.
  • fetchone() / fetchall(): Methoden, um Ergebnisse einer SQL-Abfrage auszulesen.
  • Datenbankverbindung: Verbindung zwischen Flask-Backend und SQL-Server zur dynamischen Verarbeitung von Rätseln oder Spielverlauf.
  • 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.

🤖 KI als Werkzeug (in der Softwareentwicklung)

🧠 Was passiert in unserem Gehirn,
wenn wir KI Inhalte erstellen?

Gehirnaktivität bei KI-Nutzung

👉 Studie: Your Brain on ChatGPT (2025)
Ergebnis: Weniger Aktivität in Hirnregionen für Planung & Sprache → Gefahr von kognitiver Abhängigkeit

📐 Entwicklung eines Softwaresystems am Beispiel des V-Modells

Was ist das V-Modell?
Das V-Modell beschreibt den strukturierten Entwicklungsprozess eines Softwaresystems in aufeinander abgestimmten Phasen. Es teilt die Entwicklung in zwei Seiten:

  • 🔍 Links: Planung, Anforderungsanalyse und Entwurf
  • 🛠 Rechts: Umsetzung, Test und Integration

Jede Phase der linken Seite wird durch eine entsprechende Testphase auf der rechten Seite gespiegelt („V“).

KI könnte mit einem relativ einfachen Prompt und Nachbesserungen bis zur Codierung alle Phasen übernehmen.

🛠️ KI ist ein Werkzeug – keine Allzweckwaffe

Ein Softwaresystem besteht aus vielen Einzelteilen. Wer KI nutzen will, sollte trotzdem die grundlegenden Konzepte verstehen – sonst bleibt die Kontrolle beim Werkzeug.

  • 🧱 Komponenten wie Server, Shell, SSH, HTML/CSS/JS, Python, Flask, Datenbank etc. greifen ineinander
  • 🔍 Ziel: Überblick über jede dieser Komponenten gewinnen (siehe „Wichtige Begriffe“)
  • 🧠 KI kann helfen – aber nur, wenn man weiß, was man sucht oder überprüft
  • ⚠️ Nicht alles „von KI machen lassen“ – sonst wird das System zur Blackbox
  • 🎯 Besser: Komponenten einzeln verstehen, gezielt mit KI experimentieren und reflektieren
  • 📌 Empfehlung: KI als Werkzeug einsetzen – nicht als Ersatz für Lernprozesse
KI als Werkzeug in der Softwareentwicklung

🎧 Vibe Coding – Programmieren mit KI nach Gefühl

Was ist Vibe Coding?
Kreatives Programmieren in enger Interaktion mit KI – nicht planorientiert, sondern ideengetrieben und iterativ.

Vorteile:

  • 🚀 Schneller Einstieg & kontinuierliche Motivation
  • 🤝 Ideenentwicklung im Dialog mit der KI
  • 🎨 Fokus auf Ausdruck statt auf Syntax

Nachteile:

  • ⚠️ Gefahr von oberflächlichem Verständnis
  • 🧩 Weniger strukturiertes Denken & Architekturplanung
  • 📉 Langfristige Abhängigkeit möglich

Dokumentation

📝 Warum überhaupt dokumentieren?

  • 📚 Dokumentation macht komplexe Systeme nachvollziehbar – für andere und für dich selbst
  • 🔄 Erleichtert Wartung, Weiterentwicklung und Zusammenarbeit im Team
  • 🧠 Fördert das eigene Verständnis durch Reflexion beim Erklären
  • 📦 Notwendig bei Abgabe, Übergabe oder Deployment eines Projekts
  • 📉 Ohne Doku: Wissen geht verloren, Fehler schleichen sich ein, Einarbeitung dauert länger

📦 Was gehört in die Dokumentation eines Softwaresystems?

  • 📖 README.md: Projektüberblick, Ziel, Anleitung zum Starten (How to Run)
  • ⚙️ Systemarchitektur: Aufbau, Komponenten, Zusammenhänge (ggf. als Grafik)
  • 🧩 Verwendete Technologien: z. B. Flask, HTML/CSS, JavaScript, MySQL
  • 🔐 Benutzerrollen / Login (falls vorhanden): wer darf was?
  • 🗂️ Ordnerstruktur & Dateibeschreibungen: Welche Datei macht was?
  • 🧪 Testfälle: Manuelle oder automatisierte Tests, wichtige Testschritte
  • 🗣️ Offene Punkte / ToDos: Was ist geplant, aber noch nicht umgesetzt?

💡 Gute Dokumentation – Tipps & häufige Fehler

  • ✅ Klar & einfach formulieren: Keine Romane, sondern verständliche Infos
  • ✅ Aktualität: README & Code-Kommentare regelmäßig überarbeiten
  • ✅ Beispielcode einbauen: z. B. wie man eine Route testet oder eine Datei aufruft
  • ✅ Markdown nutzen: Listen, Überschriften, Codeblöcke für mehr Lesbarkeit
  • ⚠️ Fehler: Kein Kontext, veraltete Infos, Copy & Paste von Stack Overflow ohne Anpassung
  • ⚠️ Fehlende Struktur: Wenn man selbst nach 2 Wochen nicht mehr weiß, was was macht…

📝 Aufgabe: Erstellt eine vollständige README.md für euer Projekt

Dokumentiert euer Projekt so, dass eine andere Person (z. B. ein Kommilitone oder eine Lehrkraft) es selbstständig auf einem Server starten und verstehen kann – ohne Rückfragen.

💡 Ziel: Die README.md soll eine präzise Anleitung zur Reproduktion eurer Anwendung enthalten.

  • 📖 Kurze Projektbeschreibung: Was macht euer System? (max. 5 Zeilen)
  • 🚀 Schritt-für-Schritt-Anleitung zur Installation:
    • Welche Dateien müssen wo liegen?
    • Wie wird die virtuelle Umgebung (venv) aktiviert?
    • Wie wird Flask gestartet?
    • Welche Start-URL/Port muss im Browser aufgerufen werden?
  • 🧩 Kurzer Überblick über die Struktur: Wofür sind app.py, templates/, static/ etc.?
  • 📦 Genutzte Technologien: z. B. Flask, Python, HTML, CSS, JavaScript, Datenbank?
  • 🧪 Optional: Beispielnutzung oder Testablauf

Verwendet die Markdown-Syntax (#, -, ```) für saubere Gliederung und lesbare Formatierung.

Git & GitHub

🔧 Was ist Git?

  • 📂 Git ist ein Versionskontrollsystem für Dateien – vor allem für Codeprojekte
  • 📌 Es merkt sich jede Änderung (Commits), speichert den Verlauf und ermöglicht Rücksprünge
  • 👥 Git unterstützt parallele Entwicklung mit Branches – ideal für Teams und Experimente
  • 🕵️ Nachvollziehbarkeit: Wer hat wann was geändert – mit welcher Absicht?
  • 💬 Beispiel: „git commit -m 'Level 2 hinzugefügt'“ dokumentiert deinen Fortschritt

☁️ Was ist GitHub?

  • 🌍 GitHub ist eine Online-Plattform zur Verwaltung von Git-Repositories
  • 🚀 Ermöglicht das Hochladen, Veröffentlichen und Teilen eures Projekts (Remote Repository)
  • 🔐 Privat oder öffentlich nutzbar – mit Zugriffsrechten, Projektübersicht, Aufgaben etc.
  • 🧠 Unterstützt Teams durch Pull Requests, Issues, Code Reviews und mehr
  • 🧑‍💻 Du brauchst einen kostenlosen GitHub-Account, um deine Repos online zu verwalten

🖥️ Arbeiten mit Git direkt auf dem Server

  • 📁 Git wird direkt im Projektordner initialisiert (git init)
  • ➕ Änderungen werden gestaged (git add .) und committed (git commit)
  • 🔗 Verknüpfung mit GitHub erfolgt später über git remote add origin ...
  • 🚀 git push überträgt das Projekt mit README.md auf GitHub
  • 📎 Die genaue Anleitung mit den Befehlen findet ihr hier

💡 Warum lohnt sich Git & GitHub?

  • 🔍 Transparenz über Projektverlauf
  • ⏪ Sicheres Zurückspringen bei Fehlern
  • 🧑‍🤝‍🧑 Einfachere Zusammenarbeit in Teams
  • 📤 Öffentliche Präsentation und Weitergabe
  • 📝 Vorbereitung auf professionelle Softwareentwicklung

📘 Git & GitHub – Wörterbuch der wichtigsten Begriffe

  • Repository (Repo): Projektordner mit Versionsverlauf und Code
  • git init: Erstellt ein neues Git-Repository im aktuellen Verzeichnis
  • git add: Fügt Dateien zur „Staging Area“ hinzu (zum Vorbereiten des Commits)
  • git commit -m "…": Speichert Änderungen dauerhaft mit Kommentar
  • git status: Zeigt den aktuellen Zustand des Repositories (z. B. geänderte Dateien)
  • git log: Zeigt die Historie der Commits
  • git branch: Listet alle Branches auf / erstellt einen neuen Entwicklungszweig
  • git checkout: Wechselt zwischen Branches oder Versionsständen
  • git merge: Verbindet einen Branch mit einem anderen
  • git remote: Verwaltung von Verbindungen zu externen Repositories (z. B. GitHub)
  • git push: Überträgt Commits vom lokalen zum Remote-Repository (z. B. GitHub)
  • git pull: Holt Änderungen vom Remote-Repository ins eigene Projekt
  • GitHub: Online-Plattform zur Verwaltung und Veröffentlichung von Repositories
  • Remote Repository: Online-Version deines Repos, z. B. auf GitHub
  • README.md: Textdatei zur Projektbeschreibung in Markdown-Syntax
  • Pull Request (PR): Vorschlag, Änderungen in ein anderes Repository zu übernehmen
  • Issue: Meldung oder ToDo innerhalb eines GitHub-Repositories
  • Commit: Speichert einen Entwicklungsschritt (inkl. Kommentar)
  • Branch: Separater Entwicklungszweig innerhalb eines Projekts
  • Fork: Kopie eines Repositories zur eigenständigen Weiterentwicklung
  • Clone: Lokale Kopie eines GitHub-Repositories auf dem eigenen Rechner
  • Token (Personal Access Token): Authentifizierungs-Schlüssel, um auf GitHub sicher zu pushen
  • .gitignore: Datei mit Regeln, welche Dateien nicht ins Repository aufgenommen werden sollen

✅ Aufgabe: Dokumentation veröffentlichen mit Git & GitHub

Ihr bringt eure bestehende Flask-Anwendung (inkl. README.md) auf GitHub.

  • 🔐 Meldet euch bei github.com an und erstellt ein Repository
  • 🛠️ Initialisiert euer Projektverzeichnis auf dem Server mit git init
  • 🧪 Staged & committed eure Inhalte – inklusive README.md
  • 🌐 Verknüpft euer Repository mit GitHub und führt git push aus
  • 📬 Reicht den Link zu eurem GitHub-Projekt ein

👉 Eine Schritt-für-Schritt-Anleitung findet ihr in u7.html auf der Kursseite.

✅ Zusammenfassung: Aufgaben

  1. 📘 Aufgabe 1: Dokumentation erstellen
    Erstellt eine vollständige README.md, mit der euer Projekt nachvollziehbar beschrieben und startbar ist. KI darf unterstützend eingesetzt werden.
  2. ☁️ Aufgabe 2: Projekt auf GitHub veröffentlichen
    Erstellt ein GitHub-Repository und ladet euer Projekt inklusive README.md hoch.
  3. Optional: 🧪 Aufgabe 3: Testlauf des Projekts
    Führt euer Projekt vollständig durch – inklusive aller Funktionen, die auf Datenbankzugriffe angewiesen sind. Stellt sicher, dass Eingaben, Logik und Datenbankkommunikation fehlerfrei funktionieren.