Modul 2: Einführung in Flask

Was ist Flask?

Flask ist ein Mikro-Webframework für Python, das besonders geeignet ist für kleine bis mittelgroße Projekte mit der Notwendigkeit einer guten Skalierbarkeit. Es ist einfach zu erlernen und ermöglicht es, schnell Web-Anwendungen zu entwickeln. Mehr Informationen finden Sie auf der offiziellen Flask Webseite.

Einrichten der Flask-Entwicklungsumgebung

Erstellen und Aktivieren einer virtuellen Umgebung (venv): Virtuelle Umgebungen ermöglichen es Ihnen, Python-Projekte und deren Abhängigkeiten getrennt zu verwalten. Dies ist besonders nützlich, um Konflikte zwischen Projektbibliotheken zu vermeiden.

Erstellen der Entwicklungsumgebung mit dem Namen 'venv' (Kann auch umbenannt werden!)

python3 -m venv venv

Aktivieren der Entwicklungsumgebung

source venv/bin/activate

Sie können erkennen, dass die virtuelle Umgebung aktiviert ist, wenn der Name der Umgebung in Klammern vor Ihrer Eingabeaufforderung im Terminal angezeigt wird, wie zum Beispiel (venv). Um die virtuelle Umgebung zu verlassen, geben Sie den Befehl deactivate ein.

Nachdem Sie Ihre Umgebung aktiviert haben, installieren Sie Flask innerhalb der venv:

pip install Flask

Erstellen eines einfachen Flask-Servers

Sie werden nun einen einfachen Flask-Server einrichten, der auf dem spezifischen Port Ihrer Tandemgruppe erreichbar ist. Beispiel für Tandem isa1 auf Port 8001, isa2 auf 8002, und so weiter:

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hallo Welt!'

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8001)  # Port entsprechend anpassen für andere Tandems

Dieser Code startet einen einfachen Webserver, der auf die URL-Route '/' reagiert und "Hallo Welt!" ausgibt, wenn diese Route besucht wird. Speichern Sie diesen Code in einer Datei mit der Endung .py, zum Beispiel app.py.

Speichern und Ausführen der Flask-Anwendung

Verwenden Sie Visual Studio Code oder Nano, um Ihre Flask-Anwendung zu schreiben. Speichern Sie Ihre Datei im Verzeichnis /var/www/isa# (ersetzen Sie # durch Ihre Tandemnummer), das Sie mit dem Filebrowser unter filebrowser.edumake.de zugänglich machen können.

Um Ihre Flask-Anwendung zu starten, navigieren Sie im Terminal zu dem Verzeichnis, in dem Ihre Datei gespeichert ist, und führen Sie den folgenden Befehl aus:

python3 app.py

Nachdem Sie den Server gestartet haben, können Sie Ihre Flask-Anwendung durch Aufrufen der URL http://isa#.edumake.de:800# (ersetzen Sie beide # durch Ihre Tandemnummer) in Ihrem Webbrowser besuchen.

Modul 3: Entwicklung der Rätsellogik für den Escape Room

Einführung in die Rätsellogik

Flask und Python kann genutzt werden, um Rätsel zu verwalten und dynamische Webseiten zu erstellen, die Nutzereingaben entgegennehmen, Antworten validieren und bei korrekten Lösungen weiterleiten.

Beispiel eines einfachen Rätsels

Das Beispiel-Rätsel könnte eine einfache Frage sein:

"Was ist 3 + 5?"

Implementierung der Rätsellogik in Flask

Der folgende Code zeigt, wie Sie eine einfache Rätselseite in Flask erstellen, die Nutzereingaben akzeptiert und bei korrekter Antwort eine Weiterleitung durchführt. Dieses Beispiel zeigt die Weiterleitung von Gruppe isa1 zu Gruppe isa2:

from flask import Flask, request, redirect, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/raetsel', methods=['GET', 'POST'])
def raetsel():
    if request.method == 'POST':
        antwort = request.form['antwort']
        if antwort == '8':
            # Weiterleitung zu Gruppe isa2
            return redirect('http://isa2.edumake.de:8002')
        else:
            return render_template('raetsel.html', fehler='Falsche Antwort, bitte versuchen Sie es erneut.')
    return render_template('raetsel.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8001)  # Port 8001 für Gruppe isa1

Dieser Code illustriert eine einfache Flask-Anwendung, die ein Rätsel verwaltet und den Benutzer bei korrekter Antwort weiterleitet. Diese Art von Logik kann leicht angepasst werden, um verschiedenste Rätseltypen und -komplexitäten zu unterstützen.

Einbindung und Erklärung der Templates

Flask verwendet Jinja2-Templates, um HTML-Seiten dynamisch zu rendern.

Jinja2 ist eine sehr beliebte Python-Bibliothek zum automatischen Befüllen von Textvorlagen (Templates) mit Werten.

Ihre Verzeichnisstruktur sollte folgendermaßen aussehen:

/var/www/isa#/
├── venv/                  # Virtuelle Umgebung für Python und Flask
├── app.py                 # Haupt-Flask-Anwendungsdatei
├── templates/             # Ordner für Jinja2-Templates
│   ├── index.html         # Startseite der Flask-Anwendung
│   └── raetsel.html       # Seite für Rätsel
├── assets/                # Ordner für Bilder, JavaScript und CSS
│   ├── style.css          # CSS-Dateien
│   └── script.js          # JavaScript-Dateien
└── index.html             # Bestehende Homepage-Datei im Hauptverzeichnis

Hier sind die Beispiele für index.html und raetsel.html:

index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Escape Room - Startseite</title>
</head>
<body>
    <h1>Willkommen zum Escape Room</h1>
    <p>Lösen Sie das Rätsel, um in den nächsten Raum zu gelangen.</p>
    <a href="/raetsel">Zum Rätsel</a>
</body>
</html>

raetsel.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Escape Room - Rätsel</title>
</head>
<body>
    <h1>Rätsel</h1>
    <p>Was ist 3 + 5?</p>
    <form method="post" action="/raetsel">
        <input type="text" name="antwort">
        <button type="submit">Antwort absenden</button>
    </form>
    {% if fehler %}
        <p style="color:red;">{{ fehler }}</p>
    {% endif %}
</body>
</html>

Diese Templates rendern die HTML-Seiten, die von Flask an den Client gesendet werden. index.html bietet einen Link zum Rätsel, und raetsel.html enthält das Formular für die Rätselantwort und zeigt bei falscher Antwort eine Fehlermeldung an.

Flask-Tutorial: Integration in eine bestehende Homepage

Einführung

In diesem Tutorial lernen Sie, wie Sie eine Flask-Anwendung in eine bestehende HTML-Homepage integrieren und eine Fallback-Seite implementieren, die angezeigt wird, wenn der Flask-Server nicht erreichbar ist.

Überprüfen der Verzeichnisstruktur

Stellen Sie sicher, dass die Verzeichnisstruktur Ihrer Flask-Anwendung korrekt organisiert ist. Hier ist eine Beispielstruktur für Ihre Flask-Projekte:

/var/www/isa#/
├── venv/                  # Virtuelle Umgebung für Python und Flask
├── app.py                 # Haupt-Flask-Anwendungsdatei
├── templates/             # Ordner für Jinja2-Templates
│   ├── index.html         # Startseite der Flask-Anwendung
│   └── raetsel.html       # Seite für Rätsel
├── assets/                # Ordner für Bilder, JavaScript und CSS
│   ├── style.css          # CSS-Dateien
│   └── script.js          # JavaScript-Dateien
└── index.html             # Bestehende Homepage-Datei im Hauptverzeichnis

Dies stellt sicher, dass Ihre Flask-Anwendung korrekt mit allen notwendigen Ressourcen und Dateien organisiert ist.

Einfügen des JavaScript-Codes für den Health Check

Fügen Sie den folgenden JavaScript-Code in die raetsel.html im templates-Ordner ein, um den Serverstatus zu überprüfen. Wenn der Server nicht erreichbar ist, wird eine entsprechende Nachricht angezeigt:

function checkServer() {
    fetch('/ping')
        .then(response => {
            if (!response.ok) {
                document.getElementById('content').innerHTML = '
Der Escape Room Server ist derzeit nicht erreichbar. Bitte versuchen Sie es später erneut.
';
            }
        })
        .catch(error => {
            document.getElementById('content').innerHTML = '
Der Escape Room Server ist derzeit nicht erreichbar. Bitte versuchen Sie es später erneut.
';
        });
}
window.onload = checkServer;

Dieser Code wird beim Laden der Seite ausgeführt und überprüft, ob der Flask-Server läuft.

Anpassung der bestehenden Homepage

Um die Flask-Anwendung in Ihre bestehende Homepage zu integrieren, passen Sie Ihre vorhandene index.html im Verzeichnis /var/www/isa# an. Verlinken Sie dabei auf die Flask-Rätselseite:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine Homepage</title>
</head>
<body>
    <h1>Willkommen auf meiner Homepage</h1>
    <p>Hier finden Sie verschiedene Inhalte und Links zu unseren Projekten.</p>
    <a href="http://isa1.edumake.de:8001/raetsel">Zum Escape Room Rätsel</a>
</body>
</html>

Dieser Link führt den Benutzer zur Flask-Rätselseite Ihrer Gruppe.

Zusammenfassung

Durch die Integration der Flask-Anwendung in Ihre bestehende Homepage und die Implementierung einer Fallback-Seite stellen Sie sicher, dass die Benutzer ein nahtloses Erlebnis haben und informiert werden, wenn der Server nicht erreichbar ist. Diese Anleitung zeigt Ihnen Schritt für Schritt, wie Sie diese Integration durchführen können.

Erstellung eines eigenen Rätsels

Aufgabe

1. Überlegen Sie sich ein eigenes Rätsel:
   • Denken Sie an eine kreative und interessante Rätselidee. Dies kann ein mathematisches Rätsel, ein Logikrätsel, ein Worträtsel oder ein anderes interessantes Konzept sein.
2. Abstimmung mit Kommilitonen:
   • Sprechen Sie sich mit Ihren Kommilitonen ab, um sicherzustellen, dass es keine Dopplungen bei den Rätseln gibt.
3. Überprüfung der Rätsellogik:
   • Prüfen Sie die Machbarkeit der Umsetzung Ihres Rätsels.
   • Bewerten Sie den Schwierigkeitsgrad des Rätsels, um sicherzustellen, dass es weder zu einfach noch zu schwer ist.
   • Verwenden Sie gerne generative KI-Tools, um Feedback zur Rätsellogik zu erhalten und mögliche Verbesserungsvorschläge zu erhalten.
4. Abklärung mit Herrn Franke oder Herrn Müller:
   • Fassen Sie Ihre Rätselidee und die zugehörige Logik stichwortartig zusammen.
   • Klären Sie die Idee kurz mit Herrn Franke oder Herrn Müller ab, um sicherzustellen, dass sie passt und um wertvolles Feedback zu erhalten.
5. Umsetzung des Rätsels:
   • Gehen Sie an die Umsetzung Ihres Rätsels in Ihrer Flask-Anwendung.
   • Denken Sie dabei auch an eine minimale Visualisierung, um das Rätsel benutzerfreundlich und ansprechend zu gestalten.

Checkliste zur Erstellung Ihres Rätsels

• [ ] Kreative und interessante Rätselidee entwickelt.
• [ ] Abstimmung mit Kommilitonen zur Vermeidung von Dopplungen durchgeführt.
• [ ] Machbarkeit und Schwierigkeitsgrad des Rätsels überprüft.
• [ ] Generative KI zur Überprüfung der Rätsellogik verwendet.
• [ ] Rätselidee stichwortartig zusammengefasst.
• [ ] Rätselidee mit Herrn Franke oder Herrn Müller abgeklärt.
• [ ] Umsetzung des Rätsels in der Flask-Anwendung begonnen.
• [ ] Minimaler visueller Entwurf des Rätsels erstellt.

Nutzen Sie diese Checkliste, um sicherzustellen, dass Sie alle Schritte zur Erstellung und Umsetzung Ihres Rätsels durchlaufen haben.

zu verwendende Technologien

Rätsel-Ideen