Du hast bisher im Terminal gearbeitet. Jetzt wird’s Zeit, deinen Code im Browser anzuzeigen – wie eine richtige Webanwendung.
In diesem Teil baust du deine erste kleine Flask-Webseite.
Ganz ohne Listen, ohne Formulare – nur: Flask starten und HTML anzeigen.
Was ist Flask?
Flask ist ein Mini-Webserver für Python.
Mit Flask kannst du eine Webseite mit Python-Code steuern – und im Browser anzeigen lassen.
Ziel dieses Teils
✅ Flask installieren
✅ Eine Python-Datei mit Webserver schreiben
✅ Im Browser „Hallo Welt“ anzeigen
Schritt 1: Flask installieren
Öffne dein Terminal und gib ein:
pip install flask
Falls du mehrere Pythons installiert hast:
python3 -m pip install flask
🔁 Nur einmal nötig – danach ist Flask da.
Schritt 2: Projektordner anlegen
Erstelle einen neuen Ordner für dein Projekt, z. B.:
todo-web/
In diesem Ordner legst du eine einzige Datei an:
todo-web/
└── app.py
Schritt 3: app.py schreiben
Öffne die Datei app.py und schreib diesen Code hinein:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def startseite():
return "<h1>Hallo Welt!</h1><p>Das ist meine erste Flask-Seite.</p>"
if __name__ == "__main__":
app.run(debug=True)
Schritt 4: Server starten
Wechsle im Terminal in den Projektordner und starte das Programm:
python app.py
(oder python3 app.py, je nach System)
Du siehst:
* Running on http://127.0.0.1:5000/
Schritt 5: Im Browser öffnen
Öffne den Link in deinem Browser:
👉 http://127.0.0.1:5000
Du solltest Folgendes sehen:
Hallo Welt!
Das ist meine erste Flask-Seite.
🎉 Glückwunsch – du hast gerade deine erste Web-App gebaut!
Was ist hier passiert?
| Code | Erklärung |
|---|---|
Flask(__name__) | Erstellt deine Web-Anwendung |
@app.route("/") | Sagt: „Wenn jemand / aufruft, nimm diese Funktion“ |
return "<h1>Hallo...</h1>" | Gibt HTML direkt an den Browser zurück |
app.run(debug=True) | Startet den Webserver (mit automatischem Reload) |
Was du jetzt kannst
Du hast:
- Einen Python-Webserver gestartet
- HTML im Browser angezeigt
- Flask zum Leben erweckt
Und das alles mit einer Datei und fünf Zeilen HTML.
Schreibe einen Kommentar