Entwicklung interaktiver Softwareanwendungen

Stefan Franke · Daniel Schiffner

Entwicklung interaktiver Softwareanwendungen

Sitzung 5 — Auto-Deploy, Python & Flask

Übersicht

Rückblick Sitzung 4 — VS Code & Workflow
Warm-up: aktuellen Stand holen & prüfen
Auto-Deploy: Push = sofort online
Aus der Website wird eine Anwendung
Python & Flask — venv, Routen, Projektstruktur
Aufgaben

Rückblick: Sitzung 4 (VS Code)

Gut gelaufen

Deutlich einfacher mit VS Code
Nur ein Terminalfenster nötig — und das nur für den Server (SSH)
Commit / Sync per Klick

Stolpersteine

Passphrase konnte von VS Code nicht abgefragt werden
Musste unter Windows einmalig in der PowerShell eingerichtet werden (ssh-agent)
… und dann (mal wieder) die Passphrase vergessen

Erinnerung: Passphrase & ssh-agent (Windows)

Wenn VS Code beim Sync „Permission denied“ meldet, obwohl der Key stimmt — meist liegt es an der Passphrase, die nicht abgefragt werden kann. Einmalig in der PowerShell:

Get-Service ssh-agent | Set-Service -StartupType Automatic
Start-Service ssh-agent
ssh-add $env:USERPROFILE\.ssh\id_ed25519
git config --global core.sshCommand "C:/Windows/System32/OpenSSH/ssh.exe"

Danach VS Code neu starten — die Passphrase wird einmal gefragt und gemerkt.

Warm-up: aktuellen Stand holen

Bevor wir Neues bauen — kurz den Workflow auffrischen:

lokal In VS Code Sync — neuesten Stand holen
lokal Kleine Änderung (z. B. Kommentar in index.html) → Commit → Sync
git Im Forgejo-GUI prüfen: ist der Commit da?
server Kurz warten (max. 60 s) → Browser neu laden (Hard Reload) — die Änderung ist von selbst da

				    Kein git pull auf dem Server nötig: Auto-Deploy erledigt das automatisch. Schauen wir, wie das funktioniert.
				  

Auto-Deploy: Push = sofort online

Ziel: Sobald ihr nach Forgejo pusht, aktualisiert sich die Website von selbst — kein manueller Pull mehr auf dem Server.

VS Code lokal

ändern · commit · Sync

Sync →

Forgejo git

git.md-phw.de
zentraler Speicher

alle 60s→

Server auto

holt sich selbst
den neuen Stand

Der Server prüft im Hintergrund regelmäßig, ob es etwas Neues gibt — und zieht es automatisch.

Zwei Wege — warum wir pollen

Webhook	Forgejo ruft bei jedem Push den Server an. Echtzeit, aber: eigener Dienst + offener Port + Secret pro Repo → viel Infrastruktur
Polling (wir)	Der Server schaut alle 60 Sekunden selbst nach. Kein Setup beim Studierenden, keine Konflikte, einheitlich für alle

Polling gewinnt hier klar — max. 1 Minute Verzögerung, dafür robust und einfach.

So funktioniert es technisch

Was ist Cron? Cron ist der eingebaute Zeitplan-Dienst von Linux. Man hinterlegt einen Befehl mit einem Zeitintervall — und das System führt ihn automatisch immer wieder aus (hier: jede Minute). Wie ein Wecker, der statt zu klingeln einen Befehl startet.

Ein Cronjob (eine solche Zeitplan-Regel) auf dem Server führt alle 60 Sekunden aus:

cd ~/public_html
git fetch origin
git reset --hard origin/main

fetch holt den neuesten Stand von Forgejo
reset --hard macht den Server zu einem exakten Spiegel des Repos
Kein pull → keine Merge-Konflikte. Der Server wird nie von Hand bearbeitet („Schaufenster“)

Voraussetzung (zum Verstehen): Server-Key in Forgejo

Damit der Server ohne Passwort ziehen kann, muss sein öffentlicher Schlüssel in Forgejo liegen (Deploy Key, Lesezugriff genügt). So sieht der Schlüssel aus:

cat ~/.ssh/id_ed25519.pub   # auf dem Server

				    Das ist bereits zentral eingerichtet — ihr müsst hier nichts tun. (Gut zu wissen fürs Verständnis: fehlt so ein Key, gibt es Permission denied (publickey).)
				  

Auto-Deploy ist eingerichtet

Für eure Server läuft der Cronjob bereits. Ihr müsst nichts aktivieren — einfach pushen:

lokal Sync

→

git Forgejo

→ (60s) →

server live

				    Test: kleine Änderung in VS Code → Sync → max. 60 s warten → Seite mit Hard Reload neu laden → sie ist da. Kein Server-Login nötig.
				  

Aus der Website wird eine Anwendung

Bisher: statische Seiten (HTML, CSS, JavaScript im Browser)
Jetzt: echte Logik auf dem Server — Eingaben verarbeiten, Antworten prüfen, Daten speichern
Werkzeuge: Python als Sprache, Flask als Web-Framework

Beispielprojekt: ein kleines Escape Game — der Server prüft, ob eine Rätselantwort stimmt.

Was ist Python?

Einfach zu lernende, mächtige Programmiersprache
Besonders gut für Einsteiger geeignet
In unserem Projekt: die Logik hinter dem Escape Room (z. B. Rätsel auswerten)

Einsteiger-Tutorials (aus OOP WiSe): Installation · erstes Programm · print & Zahlen · Strings · Datentypen

Ein erstes Python-Skript

Ein Python-Programm ist eine Textdatei mit der Endung .py
Gestartet wird sie im Terminal mit python3 datei.py
print(...) gibt etwas aus

print("Hallo Welt")
print(3 + 5)

Ausgabe: Hallo Welt und 8 — Text in "...", Zahlen ohne werden berechnet.

Eingaben & Variablen

Eine Variable ist ein Behälter für einen Wert
input(...) fragt etwas ab und speichert die Antwort

name = input("Wie heißt du? ")
alter = input("Wie alt bist du? ")
print(name + " ist " + alter + " Jahre alt.")

→ Übung dazu Schritt für Schritt: u16

Flask — Python für Webanwendungen

Leichtgewichtiges Python-Webframework
Ideal für kleine Webprojekte (z. B. Escape Game)
Fügt Webseiten echte Logik & Interaktivität hinzu
Läuft als eigener Webserver im Hintergrund

				    Mit Flask definiert man Routen wie / oder /raetsel. Ein Aufruf im Browser startet eine Funktion — sie zeigt z. B. eine HTML-Seite an oder prüft, ob eine Antwort richtig ist.
				  

Mehr: flask.palletsprojects.com

Ein erstes Flask-Programm

from flask import Flask
app = Flask(__name__)

@app.route("/")
def start():
    return "Hallo aus Flask!"

@app.route("/raetsel")
def raetsel():
    return "Wie lautet das Passwort?"

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=9012)

Jede @app.route(...) verbindet eine URL mit einer Funktion.

Virtuelle Umgebung (venv)

Isolierter Bereich für ein Python-Projekt
Unabhängig von global installierten Paketen → keine Versionskonflikte
Wichtig bei Flask, damit Pakete nur lokal gelten

python3 -m venv venv
source venv/bin/activate    # (venv) erscheint vor der Eingabezeile
pip install flask
# ... arbeiten ...
deactivate                  # Umgebung verlassen

Empfohlene Projektstruktur

public_html/             # euer Git-Repo (wird auto-deployed)
├── index.html           # statische Seite  ->  /
├── css/  js/  img/
└── app/                 # Flask-App  ->  /app/
    ├── app.py           # Haupt-Logik (Routen)
    ├── venv/            # virtuelle Umgebung (in .gitignore)
    └── templates/       # spaeter: HTML-Templates (Jinja2)

Alles liegt in public_html → Auto-Deploy nimmt es mit. Der Unterordner app/ ist trotzdem nicht öffentlich lesbar: Der Server leitet jede /app/-Adresse direkt an Flask weiter.

Was sind Ports?

Die Adresse isa##.edumake.de ist wie ein Haus
Ein Port ist eine Tür an diesem Haus
Hinter einer Tür: die statische Seite
Hinter einer anderen (Port 90##): die Flask-App
Der Server leitet /app/ automatisch zur Flask-Tür weiter

isa##.edumake.de

/ → statische Seite

/app/ → Flask (Port 90##)

Flask-App im Browser erreichen

Eure Flask-App läuft im Hintergrund auf einem eigenen Port und ist über /app/ erreichbar. Beispiel Gruppe isa12:

https://isa12.edumake.de/app/

Statische Seite	`https://isa12.edumake.de/`	aus public_html
Flask-App	`https://isa12.edumake.de/app/`	vom Server weitergeleitet
Flask-Port	`9012`	eindeutig pro Gruppe (90 + Raumnr.)
Flask-Code	`app.run(host="0.0.0.0", port=9012)`	muss zum Port passen

Die statische Landing Page bleibt unter /, die Anwendung liegt unter /app/.

Aufgaben

Für alle — Schritt für Schritt:

Python-Grundlagen — u16: hallo.py lokal schreiben → push → auf dem Server ausführen (print, Rechnen, input, if)
Erste Flask-App — u17: app.py lokal → auf dem Server venv + Flask → App unter /app/ im Browser

Für Schnellere:

Eingabe verarbeiten: zweite Route /frage mit Formular & Antwortprüfung
HTML-Templates (Jinja2) · später: Escape Room & Datenbankintegration

Heute geschafft?

Workflow aufgefrischt, Passphrase-Problem verstanden ✓
Auto-Deploy aktiv: Push = automatisch online ✓
Python & Flask verstanden, erste Route gebaut ✓

Nächstes Mal: Flask vertiefen — Templates, Formulare und eine kleine Datenbank.