Activité Défis Flask
Dans cette activité, les makers vont apprendre à utiliser Flask à travers des défis de création.
Objectifs pédagogiques
Compétences techniques
- Créer une application web avec Flask
- Comprendre et savoir utiliser les routes
- Afficher la valeur d’une variable sur une page HTML
La place dans le module
Cette activité vient en tout début de module, avant l’activité Crée ton test de personnalité
Jour 1
Jour 2
Jour 3
Jour 4
Jour 5
1h
🤩
30 min
🤩
30 min
1h
Matériel
Déroulé de l'activité
Segmentation de l’activité
- Segment 1 (1h) : Introduction et défis
- Segment 2 (30 min) : Défis créations de pages HTML
Détail de l’activité
Segment 1 (1h) : Introduction et défis
Introduction (10 min)
Tu peux expliquer aux makers que durant tout ce module, on va créer des applications web dynamiques. Tu peux leur poser des questions et répondre à ces sujets :
- C’est quoi une application web ?
- Une application web, c’est un peu comme un jeu ou une appli sur un téléphone, mais tu l’utilises directement dans un navigateur internet (comme Chrome ou Safari).
- Imagine que tu vas sur un site où tu peux faire plein de choses : envoyer des messages, jouer, dessiner, ou même apprendre des choses. Tout ça, c’est grâce à l’application web ! Elle fonctionne grâce à Internet, et tu n’as pas besoin de la télécharger. Un exemple simple : Gmail, où tu peux envoyer et recevoir des emails. C’est une application web que tu utilises simplement en te connectant à son site.
- En résumé : c’est une sorte de logiciel que tu utilises en ligne, directement sur ton navigateur.
- C’est quoi une application web DYNAMIQUE ?
- Il existe 2 types d’applications : statique et dynamique.
- Un site web statique, c’est comme un livre : chaque page est toujours la même. Quand tu visites le site, tu vois exactement ce que le créateur a mis dessus, et ça ne change pas, sauf si la personne modifie le site elle-même.
- Un site web dynamique, c’est comme un jeu vidéo ou une appli interactive. Ce site change en fonction de ce que tu fais ! Par exemple, si tu te connectes à ton compte, il peut afficher ton nom, ou si tu fais une recherche, il te montre des résultats différents. Il utilise des informations en temps réel pour changer ce que tu vois.
- Donc, un site statique = toujours le même, un site dynamique = peut changer selon les actions de l’utilisateur.
- C’est quoi Flask ?
- Il s’agit d’un framework qui sert justement à créer des applications web (webapps) en Python.
- Un framework est un ensemble d’outils prêts à l’emploi qui aide les développeurs à créer des applications plus rapidement et plus facilement. Il fournit des fonctions préprogrammés, comme python, mais spécialisé dans les webapp
Déroulé
Dans ce module, nous allons pouvoir créer des interfaces visuelles grâce à l’HTML et le CSS, et ajouter des fonctions pour le rendre dynamique grâce à Flask.
On va créer un test de personnalité, un jeu du pendu avec une interface visuelle également, et un projet libre utilisant des API (des informations déjà collectées sur le net, que l’on va appeler dans notre code pour fournir notre appli web)
2/ Découverte de Vscode (25 min)
Il est temps de prendre en main l’éditeur de code : vscode
Ne néglige pas ce temps, c’est leur premier pas, et plus ils seront à l’aise avec, moins il y aura de perte de temps et de difficultés liées à cela.
- Demande leur d’ouvrir leur vscode, et partage leur la ressource makers : tuto vscode
- Si tu es en distanciel et qu’ils n’ont pas installé vscode, tu as le lien pour le faire en tout début de la ressource. Il est léger, ça ne dure pas longtemps
Prise en main et configuration :
- Commence par leur présenter l’interface, et tout ce qu’il y a à savoir.
- Personnalise vscode
- Mettre en français
- Sauvegarde automatique pour ne pas perdre leur travail
- Installer le liveshare dans les extensions (C’est très important ! ca va te permettre de pouvoir aller directement dans leur projet pour les guider et même pouvoir coder dessus avec eux )
- Mettre les extensions pour un projet html/css
- Prettier
- Htmlhint
- Tailwind
- Mettre les extensions pour un projet Flask
- Installer Python dans l’ordinateur
- Extension python dans vscode
- Extension Flask snippets dans vscode
Création d’un projet :
Sur la ressource, passe à l’étape de la création d’un nouveau projet.
- Ils vont devoir créer un dossier vierge dans leur ordinateur
- Puis l’ouvrir dans vscode.
- Ensuite, dans vscode, ils pourront créer leur premier fichier main.py
- Explique leur que ce fichier reste toujours à la racine, c’est ici que l’on va coder en python à l’aide de Flask
Défis 1a – 1b – 1c (25 min)
A ce stade, tes makers ont leur vscode bien configuré, ils ont crée un dossier dans leur ordinateur, l’ont ouvert dans vscode, et on crée le fichier main.py.
Partage leur la ressource makers des Défis Flask
Conseils :
Tu vas lire avec eux chaque défi, et le coder sur ton propre programme, que tu partages en live en rétropojecteur ou en partage d’écran.
Il est important de faire les 3 premiers défis en prenant ton temps et dans l’ordre. C’est non seulement la base de l’application, mais ils vont pour la première fois exécuter leur code dans vscode pour en voir le rendu.
Le fait de faire le défi 1b bien avant le défi 1c, leur permet de voir comment on exécute le code. Puis comment on réinitialise vscode avec ctrl + c pour pouvoir réexécuter le code au défi suivant et voir les changements.
Debug :
Pendant ces premiers défis, et leurs premières exécutions, c’est là aussi que tu vas pouvoir constater si ils ont un problème de configuration. Lis bien la console et l’erreur qu’il y a pour avoir les bons indices.
Voici les principales pistes :
- Savoir si python est bien installé dans leur ordinateur et qu’a l’installation il y a bien eu la case « add …path » de cocher avant d’installer.
- Si ils ont besoin d’un interpréteur python, tu trouveras la manip tout en bas de la ressource vscode
- Si ils ont bien appelé leur fichier du même nom partout
- Si le main.py est bien à la racine, d’un dossier déjà crée
Segment 2 (3O min) : Défis créations de pages HTML
Défis HTML (30 min)
Les makers vont découvrir comment utiliser les fichiers HTML dans une appli Flask. (défis 2 à 7)
Fais le avec eux, en démo active, pour avoir toujours un projet exemple à leur montrer. Cela leur permet aussi de voir comment tu le codes et pouvoir en parler avec toi.
- Défis 2 / 3 / 4 (guidés) :
- Montre la structure des dossiers d’une appli Flask
- Création de la page HTML de la page d’accueil
- Utilisation du render_template
- Défis 5 (autonomie) :
- Les makers peuvent le faire en autonomie. On pratique a nouveau la création d’une route, et le fichier html associé que l’on renvoie dans la méthode de la route
- Code tout de même ta 2eme page toi aussi en rétroprojecteur ou partage d’écran
- Défis 6 et 7 (guidés) :
- Apprendre à linker une page en flask (ce que l’on appelle dans notre « href »)
- Dynamiser son template avec une variable
Code avec eux sur ton propre projet, et fais les participer aux debugs éventuels de leurs camarades. Si quelqu’un bug, partage son code et réfléchissez à plusieurs. En les guidant sur les erreurs de la console, ils vont apprendre comment on se débugue facilement.