Flask | EF Informatik 2022

Installation in Thonny

Menupunkt Tools > Manage Packages...
Suche nach «Flask»
Install klicken

# Was ist Flask?

Flask ist ein «Mikroframework» zum Erstellen einer Webseite oder einer Webapp. Flask ist in Python geschrieben und bietet Routing, Templates und einen einfachen Webserver zum Testen.

# Erste Flask-App

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

1
2
3
4
5
6

Zuerst importieren wir Flask. Dann können wir unsere App als Instanz der Flask-Klasse erzeugen. Diese beiden ersten Zeilen bleiben bis auf zusätzliche import-Statements so bestehen.

Anschliessend kommt der route-Decorator – eine Spezialität von Flask. Er bestimmt nämlich bei welcher URL die nachfolgende Funktion aufgerufen werden soll. Im Beispiel ist es die root-URL, also der Hostname des Servers ohne Pfadangaben. Wird jetzt also diese URL aufgerufen, so führt Flask die Methode hello() aus und liefert deren Rückgabewert an den Browser zurück.

Es können nun weitere Routen folgen.

Starten und Testen des Flask-Servers

Thonny erkennt in den neueren Versionen Flask und leitet die entprechenden Schritte ein, wenn man den grünen Play-Knopf drückt

Zum Testen:

Programm wie oben beschrieben starten
Browser öffnen und http://localhost:5000 (opens new window) aufrufen
Im Browser steht: «Hello World!»

Alternatives Starten

Wir nehmen an unsere Python-Datei heisst webapp.py:

Im Thonny unter Tools den Eintrag Open System Shell... wählen
die folgenden drei Befehle nacheinander eintippen und jeweils mit return abschliessen:

set FLASK_APP=webapp.py
set FLASK_ENV=development
python -m flask run

1
2
3

Man kann das Programm in der Shell mit Ctrl + C abbrechen.

Zur Vereinfachung könnte man die drei Zeilen auch in eine Batch-Datei schreiben. Diese lässt sich dann mit einem Befehl ausführen:

im Projektordner eine leere Textdatei erzeugen: z.B. run.cmd
die obenstehenden 3 Zeilen reinschreiben und speichern
starten durch Eingabe in der Shell:

run.cmd

# Routing

Im Beispiel haben wir eine Route für die Startseite eingebaut. Natürlich könnte unsere App auch Unterseiten haben, z.B. eine Seite mit Infos zur App und deren Erzeuger oder Detail-Seiten zu den einzelnen TV-Serien, -Seasons und -Episoden

# ohne Variablen

Unter http://localhost:5000/about (opens new window) soll eine allgemeine Informations-Seite angezeigt werden. Dazu hängen wir einfach folgenden Code ans Beispiel an:

@app.route("/about")
def about():
    page = "Wir haben diese App im EF-Informatik erstellt!"
    return page

1
2
3
4

# mit Variablen im Pfad

Da wir nicht für jede TV-Serie eine eigene Route erstellen können, müssen wir irgendwie dynamische Routen erstellen können. In der Datenbank hat jede TV-Serie eine eindeutige Nummer, der Primärschlüssel, in unserem Beispiel das Feld id. Mit diesem können wir eine TV-Serie eindeutig identifizieren. Wir können also auf einer Übersichtsseite Links zu Detail-Seiten generieren. Die Links sehen z.B. so aus: http://localhost:5000/serie/73739 (opens new window)

73739 ist die id von «Lost». Wenn wir den Link aufrufen, sollten also Details zu «Lost» erscheinen. Flask muss also irgendwie zu dieser id kommen und kann dann damit in der Datenbank die entsprechenden Informationen holen. Wir erstellen eine Route wie folgt:

@app.route("/serie/<int:id>")
def serie(id):
    return "Du hast Details zur Serie mit der id " + id + " verlangt"

1
2
3

Mit /serie/<int:id> legen wir eine Route fest, deren hinterer Teil variabel ist. Mit <int:id> sagen wir Flask dass der variable Teil eine Zahl sein muss (int) und dass wir den Wert in der darauffolgenden Funktion als Argument mit dem Namen id verwenden möchten. (Das Argument dürfen wir in der Funktionsdefinition nicht vergessen.)

In der Funktion serie() steht jetzt also das Argument id zur Verfügung. Im Beispiel würde nun der Browser den folgenden Text anzeigen: «Du hast Details zur Serie mit der id 73739 verlangt».

# mit Variablen aus dem Querystring

Wenn Werte aus einem Formular abgeschickt werden, so sind diese im sogenannten Querystring zu finden. Dieser wir mit einem Fragezeichen an die URL angehängt.

Ein einfaches Suchformular in HTML könnte wie folgt aussehen:

<form action="/search">
   <input type="text" placeholder="seriennamen" name="q">
   <input type="submit" value="Suchen">
</form>

1
2
3
4

Das Attribut action des form-Elementes sagt, welche URL aufgerufen werden soll. Der Inhalt des Textfeldes wird im Querystring mitgeliefert, gekennzeichnet durch das name-Attribut. Geben wir im Textfeld «Lost» ein und drücken den Suchen-Button, so wird die URL http://localhost:5000/search?q=Lost (opens new window) aufgerufen.

Um den Querystring in Flask auszulesen, ergänzen wir zuerst den Import in der ersten Zeile:

from flask import Flask, request

anschliessend fügen wir eine neue Route hinzu:

@app.route("/search")
def search():
    args = request.args.to_dict()
    suche = args.get('q')
    return "Du möchtest also nach " + suche + " suchen?"

1
2
3
4
5

Diese Route ist also nicht variabel, aber mit request.args.to_dict() können wir den Querystring in einen Dictionary umwandeln um dann mit args.get('q') auf den Eintrag mit dem Namen q zuzugreifen. Wir würden also im Browser den Text «Du möchtest also nach Lost suchen?»

# Verzeichnisstruktur

Ein Flask-Webseite besteht aus dem Python-Skript im Projektordner. Die Vorlagen (Templates) werden zwingend im Unterverzeichnis templates abgespeichert. Statische Daten, also z.B. Bilder und CSS-Dateien können im Unterordner static abgelegt werden. Sie sind dann direkt über z.B. http://localhost:5000/static/logo.png (opens new window) verfügbar.

 projekt
 ├─ templates
 │   ├─ index.html
 │   └─ about.html
 ├─ static
 │   ├─ style.css
 │   └─ logo.png
 └─ thetvdb.py

1
2
3
4
5
6
7
8

Offizielle Dokumentation: https://flask.palletsprojects.com/en/1.1.x/ (opens new window)

← Struktur «theTVDB» PyMySQL →