Crée un pendu en webapp

Dans cette activité, les makers vont créer un jeu de pendu avec Flask.
Ce projet permet de se rendre compte de ce qu’il est possible de faire avec Flask ainsi qu’avec les formulaires.
Les makers auront tout le loisir de personnaliser leur jeu de pendu comme ils le souhaitent.

Objectifs pédagogiques

Compétences techniques

  • Créer et savoir utiliser des formulaires
  • Dynamiser une page web avec le Jinja
  • Structurer et décorer sa page avec Tailwind (ou le CSS)

Compétences design

  • Création d’un wireframe sur Whimsical

Compétences projet

  • Priorisation et planification des tâches pour le projet libre

La place dans le module

Cette activité vient après l’activité Crée ton test de personnalité et avant l’activité Projet libre – Conception

Jour 1

Jour 2

Jour 3

Jour 4

Jour 5

1h

🤩

30 min

🤩

30 min

🤩

🤩

1h

🤩

🤩

Ressources

Matériel

  • VScode

Déroulé de l'activité

Segmentation de l’activité

Détail de l’activité

Segment 1 (30 min) : Démo & introduction

Démo (10 min)
Explique aux makers que l’on va créer un jeu du pendu sur cette séance et les prochaines. 
Dis leur bien que ce qui nous intéresse ici, ce n’est pas de faire le code python du jeu du pendu, on va même le récupérer. Mais de le transformer en application web, avec un visuel, et pouvoir y jouer en ligne et non sur la console du terminal !
 
Fais leur une démo des projets exemples aux anims et montre leur le visuel : du projet type et du projet avancé. Le but est de leur donner des idées sur ce qu’ils pourraient faire sur leur web app. 
Invite-les à proposer des lettres, à dire s’ils pensent avoir trouvé le mot, afin de commencer ton atelier par un moment détente 🙂
 

En faisant tes démos, montre que ce n’est pas parce qu’on fera tous un pendu que ce sera forcément le même. On peut en effet voir que ces deux pendus sont assez différents :

  • Déjà, ils sont différents graphiquement !
  • L’un d’entre eux affiche une image de pendu qui s’affiche au fur et à mesure que l’on perd des vies
  • L’autre utilise un élément qui change de position au fur et à mesure que l’on perd des vies
  • le joueur peut entrer ses lettres soit via un champ de texte, soit via des boutons sur lesquels cliquer
  • le pendu B affiche quelles lettres ont déjà été utilisées
  • il utilise également un mode « infini » (il y a un nouveau mot à trouver après chaque victoire)
  • etc.

Il est important de pointer toutes ces mécaniques lorsque tu fais ta démo, cela pourra inspirer les makers pour le brainstorm qui suit !

Introduction (20 min)

Commence par leur faire télécharger la base du programme sur ce lien.

Rappelle leur qu’on ne va pas coder la partie python avec les méthodes qui vont faire fonctionner le jeu, donc on va prendre la base, et regarder ensemble le code déjà installé.

  • Pour télécharger le dossier :
    • Donner le lien aux makers
    • Cliquez sur le bouton vert <> Code
    • Cliquez sur Download ZIP
  • Une fois dans l’ordinateur :
    • Dézipper le dossier
    • Puis allez dans vscode et faire « ouvrir le dossier »
 

ATTENTION : 

En dézippant le dossier, il est possible que cela crée un premier dossier « Flask_pendu_base_main », dans lequel se trouvera un second dossier « Flask_pendu_base_main ».

Quand on l’ouvre dans vscode, il faudra bien avoir qu’une fois le dossier « Flask_pendu_base_main » puis l’intérieur avec l’architecture des dossiers et fichiers du projet.

Explique leur l’arborescence déjà en place :

  • Dans un dossier pendu_base_a_telecharger
    • Le dossier templates
      • avec la structure de base de l’index.html pour la page d’accueil
    • Le fichier main.py 
    • Le fichier pendu.py

Dans le fichier index.html :

  • On a la base d’un fichier HTML d’installé.
  • Le lien tailwind pour faire le css est déjà présents également
  • Et rien dans le <body>…</body>, à chacun de programmer sa page d’accueil

Dans le fichier main.py :

  • On a la base de la création d’une application Flask
  • La route de la page d’accueil avec juste le rendu du template
Insiste sur l’import Pendu en haut : on importe la class Pendu du fichier pendu.py pour avoir accès aux données de ce fichier

Dans le fichier pendu.py :

  • Attarde toi sur l’import unidecode :  il sert à transformer les caractères spéciaux (comme les accents) en lettres simples, pour que les entrées de l’utilisateur soient reconnues correctement, qu’elles soient accentuées ou non.
  • Montre leur la class Pendu. Si on la ferme, sur le côté de vscode, en cliquant sur la flèche, elle englobe bien tout le code. C’est ainsi qu’en l’appelant dans le fichier main.py on a accès à toutes les données de ce fichier.

Tu peux maintenant leur montrer brievement chaque méthode de ce fichier : 

  • initialiser(mot_a_deviner, vies)
    Initialise les données du jeu en prenant le mot à deviner et le nombre de vies initiales. Elle retourne un dictionnaire contenant l’état du jeu, y compris le mot à deviner en majuscules, le mot masqué (sous forme de tirets), les vies, et le statut de victoire/défaite.
  • deviner(data, input)
    Fonction principale de devinette qui met à jour l’état du jeu en fonction de l’entrée de l’utilisateur (lettre ou mot). Elle appelle deviner_lettre si l’entrée est une lettre unique ou deviner_mot si c’est un mot complet, puis retourne l’état actualisé du jeu.
  • deviner_lettre(lettre)
    Vérifie si la lettre a déjà été devinée. Si oui, un message d’alerte est renvoyé. Sinon, la lettre est ajoutée aux lettres devinées, et si elle est correcte, remplacer_lettre est appelée pour mettre à jour le mot affiché. Sinon, enlever_vie est appelée pour réduire le nombre de vies.
  • deviner_mot(mot)
    Vérifie si l’utilisateur a deviné le mot entier. Si le mot est correct, il est affiché entièrement. Si ce n’est pas le bon mot, enlever_vie est appelée, et un message d’erreur est renvoyé.
  • enlever_vie()
    Diminue le nombre de vies de l’utilisateur d’une unité.
  • remplacer_lettre(lettre)
    Met à jour le mot affiché en remplaçant les tirets par la lettre devinée aux positions correspondantes.

Segment 2 (1H) : Début de la programmation

Configuration (5 min)
Important : 
En tout premier lieu on va finir la configuration nécessaire pour que le programme fonctionne. 
En effet, on a pu voir que l’utilité de l’import unidecode que l’on trouve dans le fichier pendu.py. Pour faire fonctionner celui-ci il faut également l’installer dans vscode. 
  • Ouvre ton terminal dans vscode 
  • Puis tape la commande pip install unidecode
Création de la page d’accueil (35 min)
Les makers vont commencer par faire la structure HTML/CSS de leur page d’accueil.

 

Méthodo :

  • Fais leur toujours construire une vraie et belle architecture (header, main, et footer)
  • Invite les à mettre des images et propose leur ces 2 sites :
    • textstudio : Site qui permet de créer une image à partir d’un logo existant, entièrement personnalisable (ecrire ce que l’on veut, choisir les couleurs, en faire une animation, et le télécharger en un clic. Cela met 1 minute chrono !
    • crayion : site d’une IA génératrice d’images. Il suffit de lui donner des prompts (en anglais) pour en sortir des visuels uniques et sympas
  • Ils doivent avoir un lien (ou un bouton) pour aller sur la page du jeu du pendu quand on commence une partie
Configurer une base pour débuter (20 min)
On va maintenant configurer une base permettant de jouer, avec un mot en dur dans notre programme, afin de tester celui-ci.
 

Dans le fichier main.py :

Etape 1 : 

  • On va initialiser le jeu du pendu avec un mot test pour voir si notre programme fonctionne bien.
  • On va également créer la session de l’utilisateur pour que le cookie garde en mémoire sa progression dans sa partie.
    • On n’oublie pas d’importer session en haut de notre fichier !

Etape 2 : 

  • On crée la route /jeu
  • Et on retourne le template jeu.html (que l’on va créer juste après), et la session du joueur dans une variable data

Création du fichier jeu.html : 

  • On crée un fichier jeu.html dans le dossier templates
  • On copie colle notre structure de page d’accueil (un bon CTRL + C puis CTRL + V !)
  • Et on change le corps de page dans les balises <main> … </main>.
    • A la place on dynamise les données

Sur la page d’accueil : On ajoute le lien de notre page de jeu, dans le template de la page d’accueil ! Pour que lorsque l’on clique dessus on arrive bien sur la page de jeu fraichement programmé.

Test du jeu ! On peut tester notre jeu en exécutant la commande python main.py dans notre terminal. 

A ce stade on ne peut pas jouer car nous n’avons pas programmé de quoi proposer des lettres, mais on peut tester voir si notre page d’accueil fonctionne bien, si quand on clique sur le lien pour commencer une partie, on arrive bien sur la page du jeu, puis si on vois bien le nombre de lettres a deviner et le nombres de vies que nous avons dynamisé dans ce template. 

Dans le terminal de vscode, tu dois meme pouvoir voir quel mot est à deviner !

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Segment 1 (30 min) : Démo & brainstorm

Démo (15 min)

Explique aux makers que l’on va créer un jeu de pendu sur cette séance et les prochaines.
Fais une démo de ces deux projets :

>>> Exemple de pendu A <<<
>>> Exemple de pendu B <<<

Partage ton écran en lançant ces projets, invite-les à proposer des lettres, à dire s’ils pensent avoir trouvé le mot, afin de commencer ton atelier par un moment ludique 🙂

En faisant tes démos, montre que ce n’est pas parce qu’on fera tous un pendu que ce sera forcément le même. On peut en effet voir que ces deux pendus sont assez différents :

  • Déjà, ils sont différents graphiquement !
  • L’un d’entre eux affiche une image de pendu qui s’affiche au fur et à mesure que l’on perd des vies
  • L’autre utilise un élément qui change de position au fur et à mesure que l’on perd des vies
  • le joueur peut entrer ses lettres soit via un champ de texte, soit via des boutons sur lesquels cliquer
  • le pendu B affiche quelles lettres ont déjà été utilisées
  • il utilise également un mode « infini » (il y a un nouveau mot à trouver après chaque victoire)
  • etc.

Il est important de pointer toutes ces mécaniques lorsque tu fais ta démo, cela pourra inspirer les makers pour le brainstorm qui suit !

Brainstorm (15 min)

Maintenant que l’on a vu deux exemples de pendu, chaque maker peut prendre un temps pour réfléchir au pendu qu’il aimerait créer. À quoi va-t-il ressembler graphiquement ? Comment gagne-t-on, comment perd-on ? Comment l’utilisateur entre-t-il ses lettres ?…

À l’issue de ce moment, l’objectif est que chaque maker sache à peu près sur quel genre de pendu il compte partir. Tu peux faire un petit tour de table où chacun explique ce qu’il souhaite faire avec son pendu.

Certains makers souhaiteront rester sur un pendu assez basique et préféreront se concentrer sur l’aspect graphique.

Ce n’est pas un souci ! Cette activité permet justement aux makers de s’approprier le pendu comme ils le souhaitent.
Et si jamais au cours de l’activité ils ne savent pas quoi ajouter à leur pendu, il sera toujours possible de suggérer des améliorations ! (ajout d’un score, choisir un mot aléatoirement avec un nombre de lettres précis, ajout d’une page d’accueil avant de démarrer le jeu, etc.)

Segment 2 (1h) : Conception & Initialisation du pendu

Conception sur Whimsical (30 min)

Invite les makers à forker le template Whimsical suivant :

>>> Template Whimsical <<<

Une fois cela fait, explique-leur comment remplir ce template : il faut répondre à chaque question (explique ce qui est attendu pour chaque question) et surtout faire un Wireframe qui représentera à quoi leur pendu devra ressembler.

Ce wireframe te sera très utile en tant qu’anim pour mieux comprendre ce que chaque maker souhaite faire quand inévitablement tu auras des questions sur la mise en page (« comment je mets tel élément à droite ? » / « comment je fais des colonnes ? » / « comment je fais un truc centré en bas ? »)

Profites-en pour noter le lien du document Whimsical de chaque maker dans un document, comme ça tu pourras avoir facilement accès à leur wireframes !

À l’issue de ces 30 minutes, chaque maker doit avoir une vision bien plus claire de son projet et de ce à quoi il devra ressembler graphiquement.

Initialisation du pendu (30 min)

Invite les makers à forker le template de pendu :

>>> Template de pendu <<<

Parcours avec eux le code pour faire un bref rappel : sur le fichier Python, on voit les imports, une route d’accueil, le app.run() à la fin…
Sur le fichier HTML, on voit que tout est à faire, il n’y a rien entre les balises body.

Dans le code, on peut voir un import « from pendu import Pendu« . Tu peux leur expliquer que cela importe des fonctions présentes dans le fichier pendu.py, mais qu’on ne touchera pas à ce fichier. Cet import nous permet d’avoir accès aux fonctions Pendu.initialiser() et Pendu.deviner() que l’on va découvrir !

Puis, montre aux makers comment initialiser le pendu en leur invitant à faire de même sur leur code :

  • Création d’un template HTML
  • Initialisation du pendu sur la route d’accueil
  • Redirection vers une route /jeu que l’on crée
    • Expliquer pourquoi l’on crée cette route : la route / sera la route d’accueil qui initialise le pendu, la route /jeu correspond à l’affichage de la page du pendu.
      Il est important de distinguer les deux : après chaque lettre entrée par l’utilisateur, on souhaitera simplement réafficher la page (et non pas réinitialiser le pendu) !
  • Remplacement des données statiques par des données dynamiques dans le document HTML
Pense également à ajouter les imports nécessaires !
Clique sur l'image pour la voir en grand !

On peut maintenant tester notre projet : notre page affiche bien un mot « caché » (constitué de symboles ‘_’) et notre nombre de vies est bien affiché.
Bien entendu, on ne peut pas encore y jouer car pour le moment on n’a aucun moyen de proposer une lettre… c’est donc ce que l’on va voir ensuite !

Segment 3 (1h) : Formulaire et personnalisation

Ajout du formulaire (30 min)

En partage d’écran, montre aux makers comment créer un formulaire pour rendre le pendu fonctionnel et invite-les à en faire de même sur leur projet en même temps.

  • Ajout du formulaire sur la page HTML
    • Pense bien à expliquer les label, input, l’action…
  • Création de la route /deviner
    • Montre comment récupérer la valeur d’un élément de formulaire : le champ « name » sur les éléments de notre formulaire nous permet d’accéder à ceux-ci !
Clique sur l'image pour la voir en grand !

Prend bien le temps d’expliquer le fonctionnement du formulaire : c’est normalement la première fois que les makers découvrent les formulaires. Tu peux bien sûr partager la page ressource sur les formulaires HTML.

Chacun peut alors tester son projet : on a un pendu très basique mais fonctionnel !

S’il reste du temps, les makers peuvent tout de suite passer à la personnalisation de leur pendu.

 
Personnalisation (30 min)
Les makers personnalisent leur pendu.
Passe voir les makers, accompagne-les et aide-les à personnaliser leur pendu.
 
N’oublie pas que tu peux les rediriger vers les ressources Magic Makers en fonction de ce qu’ils souhaitent faire :

Segment 4 (30 min) : Choix aléatoire du mot & personnalisation

Choix aléatoire du mot (5 min)
Le pendu que l’on a réalisé jusqu’ici a un défaut : on doit tout le temps deviner le même mot.

Rappelle donc aux makers l’existence du module random et plus particulièrement de la fonction random.choice() en montrant comment choisir un mot aléatoirement dans une liste de mots.

liste_mots = [« fraise », « banane », « abricot »]
mot_choisi = random.choice(liste_mots)

Il est possible que certains makers aient déjà réalisé cette étape : si c’est le cas, tu peux leur demander d’expliquer aux autres comment ils ont fait pour générer un mot aléatoire plutôt que de l’expliquer toi-même.
 
Personnalisation (25 min)
Les makers continuent de personnaliser leur pendu.
Passe voir chacun des makers, assure-toi d’être disponible pour pouvoir répondre à ceux et celles qui ont besoin d’aide.
 
Si tu es sur Discord, rappelle-leur qu’ils peuvent te mentionner (@TonNom sur Discord) à tout moment pour que tu puisses passer les voir dès que possible !

Segment 5 (30 min) : Message de victoire & personnalisation

Message de victoire (10 min)
Le pendu que l’on a réalisé jusqu’ici ne détecte pas les cas de victoire / défaite.

Demande si un maker a déjà fait en sorte qu’on ait un message qui s’affiche en cas de victoire, et s’il veut bien présenter à tout le monde sa solution.

Sinon, montre-leur comment réaliser cela (cf image ci-contre).

Dans tous les cas, profites-en pour faire un petit rappel du Jinja aux makers (comment afficher une variable, faire des conditions, des boucles). Tu peux leur redonner la ressource Magic Makers sur le Jinja !

Clique sur l'image pour la voir en grand !
Personnalisation (20 min)
Les makers continuent de personnaliser leur pendu.
 

Segment 6 (1h) : Fin de création et partage

Avancée en autonomie (40 min)

Les makers continuent à personnaliser leur pendu / à avancer en autonomie dessus. Pense bien à annoncer aux makers qu’ils ont 40 minutes avant de passer au partage des projets, et rappelle-leur une fois qu’il ne reste plus que 20 minutes ! Ces 20 dernières minutes devraient d’ailleurs être purement dédiées aux finitions : ce n’est plus le moment d’ajouter de nouvelles fonctionnalités.

Partage des projets (20 min)

Invite les makers à partager leur projet : il s’agit de copier le lien du projet lancé (c’est-à-dire le lien qui s’affiche dans la barre d’adresse une fois le projet lancé dans un nouvel onglet).

Puis, invite les makers qui le souhaitent à montrer leur projet en partage d’écran. C’est le moment où on peut tous ensemble proposer des lettres pour essayer de trouver le bon mot !

Finis cette activité avec une petite déclusion habituelle : est-ce que les makers ont aimé ? ont-ils trouvé ça trop facile / trop difficile ? S’ils avaient eu plus de temps, qu’auraient-ils aimé ajouter ?…

Tips 

Debug possible

Si dès le début tu as l’erreur « ModuleNotFound Error : No mudole named ‘unidecode' », c’est que tu as oublié d’installer unidecode dans ton vscode

Retour en haut