Übung: Entwickeln einer App
Sie erstellen Ihre Anwendung nach und nach. Währenddessen werden bestimmte Konzepte behandelt. Erstellen Sie zunächst die Landing Page Ihrer Anwendung, auf der das Formular für die Benutzer angezeigt wird.
Der Einstiegspunkt für Flask-Anwendungen ist in der Regel eine Datei namens app.py. Befolgen Sie diese Konvention, und erstellen Sie die Kernanwendung: Befolgen Sie diese Schritte:
- Erstellen der Kernanwendung
- Hinzufügen der Route zur Anwendung
- Erstellen der HTML-Vorlage für die Website
- Testen der Anwendung
Erstellen der Kernanwendung
Kehren Sie zur zuvor verwendeten Visual Studio Code-Instanz zurück, und erstellen Sie eine neue Datei namens app.py, indem Sie auf der Registerkarte Explorer auf Neue Datei klicken.
Wichtig
Wenn Sie im Rahmen dieser Übung zum ersten Mal eine Python-Anwendung mit Visual Studio Code erstellen, werden Sie aufgefordert, die Python-Erweiterung und den Linter pylint zu installieren. Klicken Sie auf Installieren, um diese Add-Ons zu installieren.
Fügen Sie den Code zum Erstellen der Flask-Anwendung hinzu.
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
Die import-Anweisung enthält Verweise auf Flask. Hierbei handelt es sich um das Kernstück jeder Flask-Anwendung. Gleich kommt auch render_template zum Einsatz, wenn der HTML-Code zurückgegeben werden soll.
app ist die Kernanwendung. Diese wird im nächsten Schritt bei der Routenregistrierung verwendet.
Hinzufügen der Route
Die Anwendung verwendet eine Route: /. Diese Route wird manchmal als Standard- oder Indexroute bezeichnet, da sie verwendet wird, wenn der Benutzer nur den Domänen- oder Servernamen angibt.
Fügen Sie am Ende von app.py den folgenden Code hinzu:
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Mit @app.route geben Sie die Route an, die erstellt werden soll. Der Pfad lautet / – die Standardroute. Es wird angegeben, dass diese für GET verwendet wird. Wenn eine GET-Anforderung für / eingeht, ruft Flask sofort und automatisch die unter dem Decorator deklarierte Funktion auf – in diesem Fall index. Unter index wird angegeben, dass eine HTML-Vorlage namens index.html an den Benutzer zurückgegeben wird.
Erstellen der HTML-Vorlage für das Formular
Jinja, die Vorlagen-Engine für Flask, basiert stark auf HTML. Deshalb können Sie alle bereits vorhandenen HTML-Kenntnisse und -Tools anwenden. Sie verwenden Bootstrap, um das Layout Ihrer Seite ansprechender zu gestalten. Mithilfe von Bootstrap werden verschiedene CSS-Klassen auf die HTML-Datei angewendet. Wenn Sie sich mit Bootstrap nicht auskennen, können Sie diese Klassen ignorieren und sich auf den HTML-Code konzentrieren, der der wichtigste Bestandteil ist.
Wichtig
HTML (Hypertext Markup Language) ist eine standardmäßige Markupsprache zum Erstellen von Webseiten. HTML besteht aus einer Reihe von Tags und Attributen zum Erstellen von Überschriften, Absätzen, Listen, Bildern, Links und anderen Elementen, aus denen sich eine Webseite zusammensetzt. Wenn Benutzer*innen Webseiten anfordern, lesen die Browser der Benutzer*innen den HTML-Code und rendern ihn als visuelle Webseite, mit der die Benutzer*innen interagieren können. Weitere Informationen zu HTML finden Sie in den Grundlagen zu HTML.
Flask-Vorlagen müssen in einem Ordner namens templates (Vorlagen) erstellt werden. Erstellen Sie den Ordner und die erforderliche Datei, und fügen Sie den HTML-Code hinzu.
Erstellen Sie den neuen Ordner templates, indem Sie im Explorer von Visual Studio Code auf Neuer Ordner klicken.
Wählen Sie den erstellten Ordner templates aus, und klicken Sie auf Neue Datei, um eine Datei zum Ordner hinzuzufügen.
Benennen Sie die Datei index.html.
Fügen Sie den folgenden HTML-Code hinzu:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
Die wichtigsten Bestandteile des obigen HTML-Codes sind textarea für den Text, den der Benutzer übersetzen möchte, und die Dropdownliste select, mit der der Benutzer die Zielsprache auswählt. Wenn Sie weitere Sprachen hinzufügen möchten, sollten Sie mit dieser Liste überprüfen, ob diese unterstützt werden. Legen Sie das Attribut value auf den Sprachcode fest (z. B. pl für Polnisch).
Testen der Anwendung
Sie haben Ihre erste Website erstellt. Testen Sie diese jetzt. Mit dem in Visual Studio Code integrierten Terminal geht das am einfachsten.
Öffnen Sie das integrierte Terminal, indem Sie STRG+` (oder CMD+` auf einem Mac) drücken.
Führen Sie den folgenden Befehl aus, um die Flask-Runtime in den Entwicklungsmodus zu versetzen. Das bedeutet, dass der Server mit jeder Änderung automatisch neu geladen wird.
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentFühren Sie die Anwendung aus!
flask runÖffnen Sie die Anwendung in einem Browser, indem Sie zu http://localhost:5000 navigieren.
Dort sollte Ihr Formular angezeigt werden. Glückwunsch!