Flask - le microframework web

Bon retour ! Darwin est là, prêt à te montrer Flask - le microframework web le plus populaire en Python !

Dans la leçon précédente tu as appris les bases du frontend (HTML, CSS, JavaScript). Maintenant nous allons combiner tout ça avec Python grâce à Flask !

Analogie Safari : Flask est comme un centre de recherche mobile - léger, flexible, tu peux le déplacer facilement où tu veux et commencer rapidement tes observations ! Tu n'as pas besoin d'un immense laboratoire (Django) pour démarrer tes recherches.

Qu'est-ce que Flask ?

Flask est un microframework de développement web écrit en Python par Armin Ronacher en 2010.

Microframework = un framework minimaliste avec des fonctionnalités de base que tu peux étendre avec des plugins.

Flask vs Django

Analogie : Flask est une tente de recherche (installation rapide), Django est un laboratoire complet (longue configuration, mais tous les outils inclus).

Pourquoi utiliser Flask ?

Simple - courbe d'apprentissage minimale Flexible - tu choisis les composants Léger - petite appli, démarrage rapide Pythonique - code propre et lisible Excellente documentation - facile à apprendre Grande communauté - plein de plugins

Cas d'usage de Flask :

• Prototypes et MVP
• Tableaux de bord et panneaux d'administration
• API pour applications mobiles
• Visualisations de données
• Projets pédagogiques

Installer Flask

Flask s'installe via pip comme n'importe quel paquet Python.

Étape 1 : Créer un environnement virtuel

Utilise toujours un environnement virtuel pour tes projets Python !

1# Créer le dossier du projet
2mkdir safari_web
3cd safari_web
4
5# Créer un environnement virtuel
6python -m venv venv
7
8# Activer l'environnement
9# Windows :
10venv\\Scripts\\activate
11# Mac/Linux :
12source venv/bin/activate

Analogie : Un environnement virtuel est comme un enclos séparé pour ton projet - les bibliothèques d'un projet n'entreront pas en conflit avec les autres !

Étape 2 : Installer Flask

1# Installer Flask
2pip install Flask
3
4# Vérifier la version
5flask --version
6# Sortie : Python 3.11.0
7#          Flask 3.0.0
8#          Werkzeug 3.0.0

Flask installe automatiquement :

• Werkzeug - bibliothèque utilitaire WSGI (routage, débogage)
• Jinja2 - moteur de templates (HTML dynamique)
• MarkupSafe - rendu HTML sécurisé
• ItsDangerous - signature sécurisée des données
• Click - framework CLI

Étape 3 : Créer requirements.txt

1# Enregistrer les dépendances
2pip freeze > requirements.txt
3
4# Contenu de requirements.txt :
5Flask==3.0.0
6Werkzeug==3.0.0
7Jinja2==3.1.2
8...

Pourquoi ? D'autres développeurs peuvent installer les mêmes versions :

1pip install -r requirements.txt

Première application Flask - Hello World

Place à ton premier programme Flask ! Nous allons créer une page affichant « Hello Safari ! »

Étape 1 : Créer app.py

1# app.py
2from flask import Flask
3
4# Créer une instance de l'application Flask
5app = Flask(__name__)
6
7# Définir une route (adresse URL)
8@app.route('/')
9def hello():
10    return "Hello Safari!"
11
12# Lancer le serveur de développement
13if __name__ == '__main__':
14    app.run(debug=True)

Que se passe-t-il ?

1. Flask(__name__) - crée une instance de l'application

   • __name__ est le nom du module (Flask l'utilise pour localiser les ressources)

2. @app.route('/') - décorateur qui définit une route (chemin URL)

   • / = page d'accueil
   • Quand un utilisateur visite http://localhost:5000/, la fonction hello() s'exécute

3. def hello() - fonction de vue

   • Renvoie le contenu qui sera affiché à l'utilisateur

4. app.run(debug=True) - démarre le serveur de développement

   • debug=True active le mode débogage (rechargement auto, erreurs détaillées)

Étape 2 : Lancer l'application

1python app.py

Sortie :

1 * Serving Flask app 'app'
2 * Debug mode: on
3WARNING: This is a development server. Do not use it in a production deployment.
4 * Running on http://127.0.0.1:5000
5Press CTRL+C to quit
6 * Restarting with stat
7 * Debugger is active!

Étape 3 : Ouvrir dans le navigateur

Rends-toi sur : http://localhost:5000/

Tu verras : Hello Safari!

Félicitations ! Tu viens de créer ta première application Flask !

Anatomie d'une application Flask

Analysons plus en détail le fonctionnement de Flask.

1. Instance de l'application

1from flask import Flask
2
3app = Flask(__name__)

Flask(__name__) crée un objet application :

• __name__ = nom du module (par ex. '__main__' ou 'app')
• Flask l'utilise pour localiser les templates et les fichiers statiques

2. Routes (chemins URL)

Route = correspondance URL → fonction

1@app.route('/species')
2def list_species():
3    return "Liste de toutes les espèces"
4
5@app.route('/species/lion')
6def show_lion():
7    return "Détails du lion"

Comment ça marche ?

• L'utilisateur visite /species → list_species() s'exécute
• L'utilisateur visite /species/lion → show_lion() s'exécute

Analogie : Une route est comme un sentier de safari - chaque sentier mène à un habitat différent (fonction de vue) !

3. Fonctions de vue

Fonction de vue = une fonction qui renvoie une réponse HTTP

1@app.route('/')
2def home():
3    return "<h1>Safari Database</h1><p>Bienvenue dans le système !</p>"

Que peux-tu renvoyer ?

• Une chaîne - sera convertie en HTML
• Du HTML - rendu dans le navigateur
• Du JSON - pour une API (jsonify())
• Un template - HTML dynamique avec Jinja2

4. Lancer le serveur

1if __name__ == '__main__':
2    app.run(debug=True)

Paramètres de app.run() :

• debug=True - mode débogage (rechargement auto, débogueur)
• host='0.0.0.0' - accessible depuis d'autres appareils
• port=5000 - numéro de port (5000 par défaut)

IMPORTANT : N'utilise JAMAIS debug=True en production !

Safari Database - première application

Créons une application Safari Database simple avec plusieurs routes !

app.py - application complète

1# app.py
2from flask import Flask
3
4app = Flask(__name__)
5
6# Données de test
7species = [
8    {"id": 1, "name": "Lion", "scientific_name": "Panthera leo", "population": 120},
9    {"id": 2, "name": "Éléphant d'Afrique", "scientific_name": "Loxodonta africana", "population": 450},
10    {"id": 3, "name": "Guépard", "scientific_name": "Acinonyx jubatus", "population": 7100},
11]
12
13# Route 1 : Page d'accueil
14@app.route('/')
15def home():
16    html = """
17    <!DOCTYPE html>
18    <html>
19    <head>
20        <title>Safari Database</title>
21        <style>
22            body {
23                font-family: Arial, sans-serif;
24                max-width: 800px;
25                margin: 50px auto;
26                padding: 20px;
27                background-color: #f4f1de;
28            }
29            h1 { color: #2c5f2d; }
30            nav { margin: 20px 0; }
31            nav a {
32                margin-right: 15px;
33                color: #2c5f2d;
34                text-decoration: none;
35                font-weight: bold;
36            }
37            nav a:hover { text-decoration: underline; }
38        </style>
39    </head>
40    <body>
41        <h1>Safari Database</h1>
42        <p>Système de gestion des données d'espèces africaines</p>
43
44        <nav>
45            <a href="/">Accueil</a>
46            <a href="/species">Liste des espèces</a>
47            <a href="/about">À propos</a>
48        </nav>
49
50        <h2>Bienvenue sur Safari Database !</h2>
51        <p>La base de données contient <strong>{} espèces</strong>.</p>
52        <p><a href="/species">Voir la liste complète des espèces →</a></p>
53    </body>
54    </html>
55    """.format(len(species))
56
57    return html
58
59# Route 2 : Liste des espèces
60@app.route('/species')
61def list_species():
62    species_html = ""
63    for spec in species:
64        species_html += f"""
65        <div style="background: white; padding: 15px; margin: 10px 0; border-radius: 8px; border-left: 4px solid #2c5f2d;">
66            <h3>{spec['name']}</h3>
67            <p><strong>Nom scientifique :</strong> {spec['scientific_name']}</p>
68            <p><strong>Population :</strong> {spec['population']} individus</p>
69            <a href="/species/{spec['id']}">Voir les détails →</a>
70        </div>
71        """
72
73    html = f"""
74    <!DOCTYPE html>
75    <html>
76    <head>
77        <title>Liste des espèces - Safari Database</title>
78        <style>
79            body {{
80                font-family: Arial, sans-serif;
81                max-width: 800px;
82                margin: 50px auto;
83                padding: 20px;
84                background-color: #f4f1de;
85            }}
86            h1 {{ color: #2c5f2d; }}
87            nav {{ margin: 20px 0; }}
88            nav a {{
89                margin-right: 15px;
90                color: #2c5f2d;
91                text-decoration: none;
92                font-weight: bold;
93            }}
94            nav a:hover {{ text-decoration: underline; }}
95        </style>
96    </head>
97    <body>
98        <h1>Liste des espèces</h1>
99
100        <nav>
101            <a href="/">Accueil</a>
102            <a href="/species">Liste des espèces</a>
103            <a href="/about">À propos</a>
104        </nav>
105
106        <p>Total : <strong>{len(species)} espèces</strong></p>
107
108        {species_html}
109
110        <p><a href="/">← Retour à la page d'accueil</a></p>
111    </body>
112    </html>
113    """
114
115    return html
116
117# Route 3 : Détails d'une espèce (URL dynamique)
118@app.route('/species/<int:species_id>')
119def show_species(species_id):
120    # Trouver l'espèce par son ID
121    spec = next((s for s in species if s['id'] == species_id), None)
122
123    if spec is None:
124        return "<h1>404 - Espèce introuvable</h1><a href='/species'>Retour à la liste</a>", 404
125
126    html = f"""
127    <!DOCTYPE html>
128    <html>
129    <head>
130        <title>{spec['name']} - Safari Database</title>
131        <style>
132            body {{
133                font-family: Arial, sans-serif;
134                max-width: 800px;
135                margin: 50px auto;
136                padding: 20px;
137                background-color: #f4f1de;
138            }}
139            h1 {{ color: #2c5f2d; }}
140            .card {{
141                background: white;
142                padding: 30px;
143                border-radius: 12px;
144                border: 3px solid #2c5f2d;
145            }}
146        </style>
147    </head>
148    <body>
149        <h1>{spec['name']}</h1>
150
151        <div class="card">
152            <h2>{spec['name']}</h2>
153            <p><strong>Nom scientifique :</strong> <em>{spec['scientific_name']}</em></p>
154            <p><strong>Population :</strong> {spec['population']} individus</p>
155            <p><strong>ID système :</strong> {spec['id']}</p>
156        </div>
157
158        <p style="margin-top: 20px;">
159            <a href="/species">← Retour à la liste des espèces</a> |
160            <a href="/">← Page d'accueil</a>
161        </p>
162    </body>
163    </html>
164    """
165
166    return html
167
168# Route 4 : À propos du système
169@app.route('/about')
170def about():
171    html = """
172    <!DOCTYPE html>
173    <html>
174    <head>
175        <title>À propos - Safari Database</title>
176        <style>
177            body {
178                font-family: Arial, sans-serif;
179                max-width: 800px;
180                margin: 50px auto;
181                padding: 20px;
182                background-color: #f4f1de;
183            }
184            h1 { color: #2c5f2d; }
185        </style>
186    </head>
187    <body>
188        <h1>À propos de Safari Database</h1>
189
190        <p><strong>Safari Database</strong> est un système de gestion des données d'espèces africaines.</p>
191
192        <h2>Technologies :</h2>
193        <ul>
194            <li>Flask 3.0 - microframework web</li>
195            <li>Python 3.11 - langage de programmation</li>
196            <li>HTML/CSS - frontend</li>
197        </ul>
198
199        <h2>Fonctionnalités :</h2>
200        <ul>
201            <li>Parcourir la liste des espèces</li>
202            <li>Détails de chaque espèce</li>
203            <li>Statistiques de population</li>
204        </ul>
205
206        <p><a href="/">← Retour à la page d'accueil</a></p>
207    </body>
208    </html>
209    """
210
211    return html
212
213# Lancer le serveur de développement
214if __name__ == '__main__':
215    print("Démarrage de Safari Database...")
216    print("Serveur disponible sur : http://localhost:5000/")
217    app.run(debug=True)

Tester l'application

1python app.py

Ouvre dans le navigateur :

• http://localhost:5000/ - page d'accueil
• http://localhost:5000/species - liste des espèces
• http://localhost:5000/species/1 - détails du lion
• http://localhost:5000/species/2 - détails de l'éléphant
• http://localhost:5000/about - à propos du système

Vérifie aussi les erreurs :

• http://localhost:5000/species/999 - l'espèce n'existe pas (404)

URL dynamiques - paramètres

Flask permet des URL dynamiques avec des paramètres :

1# Paramètre de base (string)
2@app.route('/user/<username>')
3def show_user(username):
4    return f"Utilisateur : {username}"
5
6# Paramètre de type int
7@app.route('/species/<int:species_id>')
8def show_species(species_id):
9    return f"ID de l'espèce : {species_id}"
10
11# Paramètre de type float
12@app.route('/price/<float:price>')
13def show_price(price):
14    return f"Prix : {price:.2f}"
15
16# Paramètre path (peut contenir des /)
17@app.route('/file/<path:filepath>')
18def show_file(filepath):
19    return f"Fichier : {filepath}"

Types de convertisseurs :

• string - accepte du texte sans slash (par défaut)
• int - accepte les entiers
• float - accepte les nombres à virgule flottante
• path - comme string, mais accepte les slashes
• uuid - accepte les chaînes UUID

Exemples d'URL :

1/user/darwin           → username="darwin"
2/species/42            → species_id=42
3/price/19.99           → price=19.99
4/file/images/lion.jpg  → filepath="images/lion.jpg"

Méthodes HTTP - GET et POST

Par défaut, Flask ne gère que les requêtes GET. Tu peux ajouter d'autres méthodes :

1from flask import request
2
3# GET uniquement (par défaut)
4@app.route('/species')
5def list_species():
6    return "Liste des espèces (GET)"
7
8# GET et POST
9@app.route('/species', methods=['GET', 'POST'])
10def species():
11    if request.method == 'POST':
12        # Traiter le formulaire
13        name = request.form['name']
14        return f"Espèce ajoutée : {name}"
15    else:
16        # Afficher le formulaire
17        return """
18        <form method="POST">
19            <input type="text" name="name" placeholder="Nom de l'espèce">
20            <button type="submit">Ajouter</button>
21        </form>
22        """
23
24# POST uniquement
25@app.route('/api/species', methods=['POST'])
26def create_species():
27    return "Espèce créée (POST uniquement)"

Méthodes HTTP :

• GET - récupérer des données (par défaut, sûr)
• POST - envoyer des données (formulaires, création)
• PUT - mettre à jour des données (mise à jour complète)
• PATCH - mise à jour partielle
• DELETE - supprimer des données

Débogage et rechargement automatique

Le mode débogage (debug=True) active :

1. Rechargement automatique

Le serveur redémarre automatiquement après les modifications du code !

1app.run(debug=True)

Teste-le :

1. Lance python app.py
2. Modifie quelque chose dans le code (par ex. le texte d'une route)
3. Enregistre le fichier
4. Flask recharge automatiquement l'application !

2. Débogueur interactif

Quand une erreur survient, Flask affiche un débogueur interactif dans le navigateur :

1@app.route('/error')
2def error():
3    result = 10 / 0  # Erreur : division par zéro !
4    return "Ceci ne sera jamais atteint"

Visite /error → tu verras une trace détaillée avec la possibilité d'inspecter les variables !

3. Messages d'erreur détaillés

Flask affiche les informations exactes de l'erreur au lieu d'un générique « 500 Internal Server Error ».

IMPORTANT : N'utilise JAMAIS debug=True en production - cela expose le code source et permet l'exécution de code !

Flask CLI - autre façon de lancer

Au lieu de python app.py tu peux utiliser la CLI de Flask :

1# Définir la variable d'environnement
2export FLASK_APP=app.py
3export FLASK_DEBUG=1  # Activer le mode débogage
4
5# Lancer le serveur
6flask run
7
8# Lancer sur un port différent
9flask run --port 8000
10
11# Accessible depuis d'autres appareils
12flask run --host=0.0.0.0

Windows (PowerShell) :

1$env:FLASK_APP = "app.py"
2$env:FLASK_DEBUG = "1"
3flask run

Structure d'un projet Flask

Un projet Flask simple peut ressembler à ceci :

1safari_web/
2│
3├── venv/              # Environnement virtuel (à ne pas committer sur git !)
4│
5├── app.py             # Application principale
6│
7├── requirements.txt   # Dépendances (pip freeze)
8│
9├── static/            # Fichiers statiques (CSS, JS, images)
10│   ├── css/
11│   │   └── style.css
12│   ├── js/
13│   │   └── script.js
14│   └── images/
15│       └── logo.png
16│
17├── templates/         # Templates HTML (Jinja2)
18│   ├── base.html
19│   ├── home.html
20│   └── species.html
21│
22└── .gitignore         # Ignorer venv/, __pycache__/, etc.

Dans la prochaine leçon nous apprendrons à utiliser des templates au lieu de chaînes HTML codées en dur !

Résumé

Dans cette leçon tu as appris :

• Ce qu'est Flask et pourquoi l'utiliser
• Installer Flask (pip install Flask)
• Le premier programme Flask (Hello World)
• L'anatomie d'une application Flask (app, routes, fonctions de vue)
• Créer plusieurs routes
• Les URL dynamiques avec paramètres
• Le mode débogage et le rechargement automatique
• La structure d'un projet Flask

Analogie Safari finale : Flask est un centre de recherche mobile - léger, s'installe rapidement, tu peux commencer tes observations en quelques minutes ! Tu n'as pas besoin d'un immense laboratoire (Django) pour démarrer tes recherches de Safari !

Le code de l'application Safari Database

Tu as créé une application web fonctionnelle avec :

• 4 routes (accueil, liste des espèces, détails d'une espèce, à propos)
• Des URL dynamiques (/species/<int:species_id>)
• HTML + CSS en ligne
• Des données de test (liste d'espèces)

Prochaine leçon : Darwin te montrera le routage et les fonctions de vue - des techniques avancées pour créer des routes, des redirections, des gestionnaires d'erreurs !