EIS - Erste Flask-App

Ziel dieser Übung

Aus Ihrem Python wird eine echte Web-Anwendung: Sie schreiben die App lokal, bringen sie per Git auf den Server, starten sie dort und rufen sie im Browser unter /app/ auf.

Schritte im Überblick

server venv erstellen & Flask installieren

Richten Sie zuerst die Umgebung auf dem Server ein — das ist unabhängig von eurem Code und nur einmal nötig.

ssh -p 2222 isa##@edumake.de mkdir -p ~/public_html/app cd ~/public_html/app python3 -m venv venv # virtuelle Umgebung erstellen source venv/bin/activate # aktivieren -> (venv) erscheint pip install flask # Flask in die venv installieren

Was ist eine venv? Eine virtuelle Umgebung ist ein eigener, abgetrennter „Werkzeugkasten“ nur für dieses Projekt. Flask wird dort hinein installiert — getrennt vom Rest des Systems, damit es keine Konflikte gibt. Die venv lebt nur auf dem Server (sie steht in der .gitignore).

Zum Verlassen der venv später: deactivate.

Wohin kommt die Flask-App? In einen Unterordner app/ innerhalb von public_html:

public_html/ # euer Git-Repo (wird auto-deployed) ├─ index.html # statische Seite -> isa##.edumake.de/ ├─ css/ js/ img/ └─ app/ # Flask-App -> isa##.edumake.de/app/ ├─ app.py # ◁ HIER anlegen └─ venv/ # nur Server, in .gitignore

So wird die App per Auto-Deploy mitgenommen (alles in public_html) — ist aber nicht öffentlich lesbar: Der Server leitet jede /app/-Adresse direkt an Flask weiter, die Dateien dort werden nie als statische Datei ausgeliefert.

lokal app.py anlegen

Legen Sie in VS Code im Ordner public_html/app/ eine Datei app.py an. Ersetzen Sie ## durch Ihre Raumnummer (z. B. isa07 → Port 9007):

from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "Hallo aus meiner Flask-App!" if __name__ == "__main__": app.run(host="0.0.0.0", port=90##) # 90 + Raumnummer

lokal .gitignore anlegen

Die spätere virtuelle Umgebung soll nicht ins Repo. Legen Sie eine Datei .gitignore an (falls noch nicht vorhanden) mit der Zeile:

venv/

Beide Dateien: Stage → Commit (Flask-App angelegt) → Sync.

git Schritt 3 — im GUI prüfen

Auf git.md-phw.de: Ist app.py im Repo angekommen?

server App starten

Die app.py ist per Auto-Deploy auf dem Server. Venv aktivieren und App starten:

cd ~/public_html/app ls # app.py da? (Auto-Deploy) source venv/bin/activate # venv aktivieren -> (venv) erscheint python3 app.py

Es erscheint u. a. Running on http://0.0.0.0:90##. Lassen Sie das Terminal offen — solange läuft die App.

Was ist ein Port? Ihre Adresse isa##.edumake.de ist wie ein Haus. Ein Port ist eine bestimmte Tür an diesem Haus. Hinter einer Tür wohnt Ihre statische Seite, hinter einer anderen (Port 90##) Ihre Flask-App. Damit Besucher die richtige Tür nicht kennen müssen, leitet der Server /app/ automatisch zur Flask-Tür weiter.

server kurz testen (im Server-Terminal)

Öffnen Sie ein zweites SSH-Fenster (das erste läuft ja) und prüfen Sie direkt auf dem Server:

curl http://localhost:90##

Hallo aus meiner Flask-App!

git / server im Browser öffnen

Rufen Sie im Browser auf:

https://isa##.edumake.de/app/

Sie sehen Ihre Flask-Antwort. Ihre statische Seite bleibt weiterhin unter https://isa##.edumake.de/ erreichbar.

lokal Text ändern

Ändern Sie in app.py den Rückgabetext, z. B.:

return "Willkommen in unserem Escape Room!"

Stage → Commit (Begruessungstext geaendert) → Sync.

server neu starten

Auto-Deploy bringt die neue app.py auf den Server. Im Terminal, in dem die App läuft:

# App stoppen: Strg + C cd ~/public_html/app git pull # neueste app.py sofort holen source venv/bin/activate python3 app.py # neu starten

Browser neu laden (Hard Reload Strg/Cmd + Shift + R) → neuer Text.

lokal app.py um eine zweite Route ergänzen

Bisher zeigt die App nur Text an. Jetzt soll sie auf eine Eingabe reagieren — ein Formular mit einer kleinen Prüfung:

from flask import Flask, request app = Flask(__name__) @app.route("/") def hello(): return "Hallo aus meiner Flask-App!" @app.route("/frage", methods=["GET", "POST"]) def frage(): if request.method == "POST": if request.form["antwort"] == "8": return "Richtig!" return "Leider falsch." return '<form method="post">Was ist 3 + 5? ' \ '<input name="antwort"><button>OK</button></form>' if __name__ == "__main__": app.run(host="0.0.0.0", port=90##)

Stage → Commit (Frage-Formular) → Sync.

request.form["antwort"] liest, was im Eingabefeld antwort stand. methods=["GET","POST"] erlaubt sowohl das Anzeigen (GET) als auch das Absenden (POST) des Formulars.

server App neu starten & testen

# im laufenden App-Terminal: Strg + C cd ~/public_html/app git pull source venv/bin/activate python3 app.py

Im Browser: https://isa##.edumake.de/app/frage — Frage beantworten, Reaktion prüfen.

lokal Das Muster „Formular → speichern → anzeigen“

Dieses Muster steckt in fast jeder App: Kommentare unter einem Beitrag, Produktbewertungen, Chat-Nachrichten, ein Gästebuch. Bauen Sie es als kleine Pinnwand: Man tippt eine Nachricht ein, sie wird gespeichert und unter dem Formular angezeigt.

from flask import Flask, request, redirect app = Flask(__name__) eintraege = [] # speichert die Nachrichten (im Arbeitsspeicher) @app.route("/pinnwand", methods=["GET", "POST"]) def pinnwand(): if request.method == "POST": eintraege.append(request.form["nachricht"]) return redirect("/app/pinnwand") liste = "" for e in eintraege: liste = liste + "<li>" + e + "</li>" return '<h1>Pinnwand</h1>' \ '<form method="post"><input name="nachricht">' \ '<button>Senden</button></form><ul>' + liste + '</ul>' if __name__ == "__main__": app.run(host="0.0.0.0", port=90##)

Stage → Commit (Pinnwand) → Sync. (Die Route / und /frage dürfen daneben stehen bleiben.)

server neu starten & ausprobieren

Strg + C cd ~/public_html/app git pull source venv/bin/activate python3 app.py

Browser: https://isa##.edumake.de/app/pinnwand — mehrere Nachrichten abschicken. Sie erscheinen als Liste.

Wichtig — und der Grund für das nächste Thema: Die Einträge liegen nur im Arbeitsspeicher (die Liste eintraege). Sobald die App neu startet, sind sie weg. Damit Nachrichten dauerhaft bleiben, braucht man eine Datenbank — genau das kommt in einer der nächsten Sitzungen.

Entwicklung interaktiver Softwareanwendungen

U17 — Erste Flask-App auf dem Port