Entwicklung interaktiver Softwareanwendungen

Stefan Franke · Daniel Schiffner

Entwicklung interaktiver Softwareanwendungen

Sitzung 7 — Formulare, Spielstand & Ausblick

Übersicht

Rückblick: eure Adventures — was war los?
Vom Lesen zum Schreiben: GET vs. POST
Formulare in Flask · request.form
Wer bin ich? → session · Wo war ich? → Spielstand in der DB
Sicherheit: Nutzereingaben
Aufgaben (u19)
Ausblick: das M2-Projekt im Wintersemester

Einstieg: AI Tandem Lab

Code-Analyse mit KI — Gruppe A: Task-API · Gruppe B: Poll-API (Flask + SQLite)

Arbeitsphase

25 min

gegebene Flask+SQLite-API mit KI analysieren & kritisch beurteilen

→

Tandemphase

20 min

Erkenntnisse gegenseitig erklären (A ↔ B)

Ihr braucht: ein KI-Tool (ChatGPT, Claude, …)

Ablauf

1. Beitreten

franke-lab.de/
ai-tandem-lab

→

2. Warteraum

Gruppe A oder B?

→

3. Arbeitsphase

A: Task-API · B: Poll-API — mit KI analysieren

→

4. Tandemphase

gegenseitig erklären

Timer läuft automatisch – im Blick behalten!

Jetzt beitreten!

franke-lab.de/ai-tandem-lab

Präsenz

EIS_OnSite (15.7.)

eis

Zoom

EIS_Zoom (15.7.)

eis

Name eingeben → passende Session wählen → Passwort eis

Ausblick: das M2-Projekt (Wintersemester)

Dieses Semester habt ihr allein eine Web-App gebaut, versioniert und deployt. Im Wintersemester macht ihr den nächsten Schritt: ein Softwareprojekt im Team.

Team

2–4 Personen, ein Semester, eine interaktive (Bildungs-)anwendung

Ergebnis

lauffähiger Prototyp + README, Doku (2–4 Seiten), Präsentation

Begleitung

14-tägliche Projektveranstaltung: Beratung, Austausch, Meilensteine

Bewertet werden: Innovation · Funktionalität · Codequalität · Doku · Präsentation. Prototypisch ist ausdrücklich okay — Umfang wird mit uns abgestimmt.

↓ mehr

M2-Projekt — Ziele & Organisatorisches

Ziele

eine interaktive (Bildungs-)anwendung konzipieren & entwickeln
objektorientierte Komponenten planen & implementieren
eine passende Systemarchitektur wählen
agile Methoden (Scrum) einsetzen
moderne & KI-gestützte Tools + Frameworks nutzen

Organisatorisches

2–4er-Team · 14-täglich Do 08:00–11:15 (ab 23.10.) · Präsenz
Abgabe: Code (Git) + README + Projektbeschreibung (2–4 S.) + Präsentation
alle Quellen & KI-Tools referenzieren
Lizenz offen (MIT/Apache) oder PH · Beratung: Müller & Franke

Ablauf: Anforderungsanalyse (Use Cases) → Methodik wählen → Umsetzung mit Tools/Frameworks → Dokumentation & Archivierung.

Projektideen — ein Vorgeschmack

Misty als Pförtner fürs CoLiLab

Der Misty-II-Roboter begrüßt Besucher, beantwortet Fragen und führt durchs CoLiLab — Sprachdialog + Sensorik.

Beweglicher Zoom-Client

Ferngesteuerte Kamera (Raspberry Pi + Motoren) für hybride Lehre — Online-Teilnehmende steuern ihre Perspektive selbst.

Themenvorstellung & Teambildung: erste Veranstaltung im Wintersemester — Details folgen per Mail.

Rückblick — was war bei euren Adventures los?

„database is locked“	`init_db.py` lief bei laufender App → erst stoppen, dann umbauen
Neuer Raum erscheint nicht	`INSERT` gepusht, aber `init_db.py` auf dem Server nicht erneut ausgeführt
Klick landet auf statischer Seite	Link ohne `/app/`-Präfix
Rätsel-Formular (6.3)	euer erstes POST — genau da machen wir heute weiter

Bisher hat eure App aus der DB nur gelesen. Heute lernt sie schreiben: Eingaben entgegennehmen und dauerhaft speichern.

Vom Lesen zum Schreiben: GET vs. POST

GET — Daten holen

Link anklicken, Adresse eintippen. Der Browser holt eine Seite. Alles, was ihr bisher gebaut habt: /raum/2 zeigt Raum 2.

POST — Daten schicken

Ein Formular abschicken. Der Browser sendet Daten an die App: Name, Rätsel-Antwort, Nachricht — und die App entscheidet, was damit passiert.

Erst mit POST wird aus einer Webseite eine interaktive Anwendung: Login, Warenkorb, Gästebuch — alles Formulare + Datenbank.

Formulare in Flask

<form method="post">
  Dein Name:
  <input name="name">
  <button>Los</button>
</form>

from flask import request

@app.route("/", methods=["GET", "POST"])
def start():
    if request.method == "POST":
        name = request.form["name"]
        # ... speichern, weiterleiten
    return "... Formular anzeigen ..."

				    Gleiche Route, zwei Fälle: GET zeigt das Formular, POST verarbeitet die Eingabe. Die Brücke: <input name="name"> im HTML  ↔  request.form["name"] in Python.
				  

Wer bin ich? — `session`

HTTP ist vergesslich: Für den Server ist jeder Klick ein Fremder. Die session löst das — ein signiertes Cookie im Browser.

from flask import session

app.secret_key = "eigener-geheimer-text"   # signiert das Cookie

session["spieler"] = name        # merken  (beim Login/Start)
session["spieler"]               # lesen   (bei jedem Besuch)
session.pop("spieler", None)     # vergessen (Logout)

				    Arbeitsteilung: Die session beantwortet „Wer bist du?“ (lebt im Browser, ist flüchtig). Die Datenbank beantwortet „Wo warst du?“ (lebt auf dem Server, ist dauerhaft).
				  

Wo war ich? — Spielstand in der DB

spielstand

spieler (PK)	raum_id
Ada	3
Linus	1

# beim Start: Spieler anlegen (falls neu)
db.execute("INSERT OR IGNORE INTO spielstand "
           "(spieler, raum_id) VALUES (?, 1)", (name,))

# bei jedem Raumwechsel: fortschreiben
db.execute("UPDATE spielstand SET raum_id=? "
           "WHERE spieler=?", (id, session["spieler"]))

				    Damit ist der SQL-Kreis geschlossen: CREATE · SELECT (u18) · jetzt INSERT & UPDATE aus der laufenden App. Neustart? Weiterspielen — genau dort, wo ihr wart.
				  

Sicherheit: Eingaben sind Feindesland

Alles aus request.form hat ein Mensch getippt — auch Böswilliges:

Gefährlich: SQL zusammenkleben

db.execute("... WHERE spieler='"
           + name + "'")
# name = "x'; DROP TABLE raeume; --"

Sicher: Platzhalter ?

db.execute("... WHERE spieler=?",
           (name,))
# Wert wird nur als WERT eingesetzt

SQL-Injection ist seit Jahrzehnten in den Top-Listen der Sicherheitslücken — und mit ? vollständig vermeidbar. Ihr macht es von Anfang an richtig.

Aufgaben

Zuerst — bitte ausfüllen: kurzer Fragebogen zur KI-Tool-Nutzung — Seminar-Kürzel EIS-SS26 → franke-lab.de/kitool-fragebogen

Für alle — Schritt für Schritt: u19

Tabelle spielstand anlegen (App stoppen → init_db.py)
Startseite wird Formular: Name → session + INSERT
Jeder Raumwechsel speichert (UPDATE) → Weiterspielen-Link

Pflicht: Begrüßung im Raum · Abenteurer zählen (COUNT) · „Neues Abenteuer“ (session.pop)

Für Schnellere: Highscore (wer entkommt am schnellsten?) oder Inventar mit Schlüssel & Schatzkammer.

Heute geschafft — und dieses Semester?

Formulare & POST: eure App nimmt Eingaben entgegen
session + Spielstand: die App schreibt in die Datenbank
Der ganze Weg: statische Seite → Git & Deploy → Flask → SQLite → echte Webanwendung

Nächstes Semester: M2-Projekt — Ideen über den Sommer sammeln!

Danke für euer Engagement — schöne Semesterferien! 🎉