Oefening: een app maken
We gaan onze toepassing iteratief maken, waarbij we ons gaandeweg zullen richten op specifieke concepten. Om te beginnen, maken we de landingspagina voor de toepassing. Hierop wordt het formulier weergegeven dat de gebruiker gaat gebruiken.
Normaal gesproken is het toegangspunt voor Flask-toepassingen een bestand met de naam app.py. We gaan deze conventie volgen en de kern van onze toepassing maken. We voeren de volgende stappen uit:
- Onze kerntoepassing maken
- De route voor onze toepassing toevoegen
- De HTML-sjabloon voor onze site maken
- De toepassing testen
Kerntoepassing maken
Keer terug naar het exemplaar van Visual Studio Code dat u eerder hebt gebruikt, maak een nieuw bestand met de naam app.py door te klikken op New File op het tabblad Explorer
Belangrijk
Als dit de eerste keer is dat u Visual Studio Code gebruikt voor het maken van een Python-toepassing, ontvangt u berichten over het installeren van de Python-extensie en de linter pylint. Selecteer Installeren om beide invoegtoepassingen te installeren.
Voeg de code toe om uw Flask-toepassing te maken
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
De importinstructie bevat verwijzingen naar Flask. Dit is de kern van elke Flask-toepassing. Straks zullen we render_template gebruiken, wanneer we onze HTML willen retourneren.
app wordt onze kerntoepassing. We gebruiken deze in de volgende stap bij het registreren van onze routes.
De route toevoegen
Onze toepassing maakt gebruik van één route: /. Deze route wordt soms ook wel de standaard- of indexroute genoemd, omdat deze wordt gebruikt als de gebruiker alleen de naam van het domein of de server opgeeft.
Voeg de volgende code toe aan het einde van app.py
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Met behulp van @app.route geven we aan welke route we willen maken. Het pad wordt /. Dit is de standaardroute. We geven aan dat dit wordt gebruikt voor GET. Als er een GET-aanvraag voor / wordt ontvangen, wordt in Flask automatisch de functie aangeroepen die direct onder de decorator is gedeclareerd. In ons geval is dat index. In de hoofdtekst van index geven we aan dat er een HTML-sjabloon met de naam index.html aan de gebruiker wordt geretourneerd.
De HTML-sjabloon voor ons formulier maken
Jinja, de sjabloon-engine voor Flask, is zeer sterk gericht op HTML. Daarom kunnen we alle bestaande HTML-vaardigheden en -hulpprogramma's gebruiken die we al hebben. We gaan Bootstrap gebruiken om de pagina in te delen, zodat deze er wat beter uitziet. Bij Bootstrap gebruiken we verschillende CSS-klassen in onze HTML. Als u niet bekend bent met Bootstrap, kunt u de klassen negeren en focussen op de HTML, het belangrijkste onderdeel.
Belangrijk
HTML (Hypertext Markup Language) is een standaardmarkeringstaal die wordt gebruikt om webpagina's te maken. HTML bestaat uit een reeks tags en kenmerken voor het maken van koppen, alinea's, lijsten, afbeeldingen, koppelingen en andere elementen waaruit een webpagina bestaat. Wanneer een gebruiker een webpagina aanvraagt, leest de browser de HTML-code en geeft deze weer als een visuele webpagina waarmee de gebruiker kan communiceren. Zie HTML-basisbeginselen voor meer informatie over HTML.
Sjablonen voor Flask moeten worden gemaakt in een map met de naam templates (sjablonen), wat wel toepasselijk is. We maken de map en het benodigde bestand en voegen de HTML toe.
Maak een nieuwe map met de naam templates door New Folder (Nieuwe map) te selecteren in het hulpprogramma Explorer in Visual Studio Code
Selecteer de map templates die u hebt gemaakt en selecteer New File om een bestand aan de map toe te voegen
Geef het bestand de naam index. html
Voeg de volgende HTML toe
<!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>
De belangrijkste onderdelen in de HTML hierboven zijn textarea voor de tekst die de gebruiker wil vertalen, en de vervolgkeuzelijst (select) waarmee de gebruiker de doeltaal kan opgeven. Als u meer talen wilt toevoegen, kunt u de lijst met ondersteunde talen raadplegen voor andere opties. Stel het kenmerk value in op de taalcode, bijvoorbeeld pl voor Pools.
De toepassing testen
Nu onze eerste site is gemaakt, wordt het tijd om deze te gaan testen! Hiertoe gebruiken we de geïntegreerde terminal in Visual Studio Code. Dat maakt ons leven weer wat gemakkelijker.
Open de geïntegreerde terminal door Ctrl- of Cmd-' te selecteren op een Mac
Voer de volgende opdracht uit om de Flask-runtime in te stellen op de ontwikkelmodus zodat de server automatisch opnieuw wordt geladen bij elke wijziging
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentVoer de toepassing uit.
flask runOpen de toepassing in een browser door te navigeren naar http://localhost:5000
Het formulier wordt weergegeven! Gefeliciteerd.