Beetje Coderen

Les 1 · Module 1 · Flask-basis

Je eerste Flask-app

Een minimale Flask-app opzetten, draaien en aanpassen.

⏱ 60–90 minuten leestijd + oefenen

🎯 Na deze les kun je

  • een virtuele omgeving maken en Flask installeren
  • een route schrijven die HTML teruggeeft
  • de debug-server starten en uitleggen wat er bij een verzoek gebeurt

Je kunt Python-scripts schrijven die iets uitrekenen of een bestand verwerken. Een webapp is in de kern niet anders: een functie krijgt invoer (een HTTP-verzoek) en geeft uitvoer terug (een HTTP-antwoord). Flask is een klein framework dat precies dat koppelen voor je regelt, zonder veel extra regels.

Wat je nodig hebt

  • Python 3.11 of nieuwer (python3 --version)
  • Een terminal en een editor
  • Kennis van functies, modules en pip uit Een beetje Python

Project opzetten

Maak een map en een virtuele omgeving. Zo blijven de pakketten van dit project los van de rest van je computer.

mkdir kassa-web && cd kassa-web
python3 -m venv .venv
source .venv/bin/activate        # Windows: .venv\Scripts\activate
pip install flask

Uitgewerkt voorbeeld

Maak app.py:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "<h1>Kassa</h1><p>Welkom bij de kassa.</p>"

@app.route("/totaal/<int:bedrag>")
def totaal(bedrag):
    btw = bedrag * 0.21
    return f"<p>Bedrag: {bedrag} euro, btw: {btw:.2f} euro</p>"

Voorspel eerst: wat zie je als je naar /totaal/100 gaat? En wat bij /totaal/abc?

Start de server:

flask --app app run --debug

Open http://127.0.0.1:5000/totaal/100. Je ziet Bedrag: 100 euro, btw: 21.00 euro. Bij /totaal/abc krijg je een 404: <int:bedrag> accepteert alleen hele getallen, dus Flask vindt geen passende route.

Wat gebeurt er precies?

  1. Je browser stuurt GET /totaal/100.
  2. Flask zoekt in zijn routetabel naar een patroon dat past en vindt /totaal/<int:bedrag>.
  3. Flask zet "100" om naar het getal 100 en roept totaal(bedrag=100) aan.
  4. De string die je teruggeeft wordt de body van het antwoord, met statuscode 200.

@app.route(...) is een decorator: hij registreert de functie eronder bij die URL. Je roept home() zelf nooit aan; Flask doet dat bij elk verzoek.

Oefenen

  1. Voeg een route /over toe die één zin over de kassa teruggeeft.
  2. Pas /totaal/<int:bedrag> aan zodat ook het bedrag inclusief btw wordt getoond.
  3. Maak een route /korting/<int:bedrag>/<int:procent> die het bedrag na korting toont.

Typische fouten

  • flask: command not found: je virtuele omgeving is niet actief. Draai source .venv/bin/activate opnieuw.
  • Address already in use: er draait nog een server. Stop die met Ctrl+C of gebruik --port 5001.
  • Wijziging niet zichtbaar: zonder --debug herlaadt Flask je code niet automatisch.

Samenvatting

Een Flask-app is een verzameling Python-functies die aan URL's gekoppeld zijn. In de volgende les kijk je beter naar routes, URL-parameters en het verschil tussen GET en POST.