Défis Web App
Sur cette page tu trouveras :
Défis web app
Défi 1 – Lance une webapp
Pour créer une application, on commence par les imports : from flask import Flask
Puis on créé la variable qui va contenir notre application avec la fonction Flask()
- app est le nom de la variable que l’on donne à notre application Flask. On peut l’appeler comme on veut mais d’habitude on laisse le nom app.
- notre variable est égale à la fonction Flask() qui permet de créer une nouvelle application.
- la fonction a comme paramètre le nom de l’application, tu peux aussi utiliser __name__ (oui il y a 2 _ de chaque côté du nom) ce qui permet de dire à Flask de nommer l’app automatiquement avec le nom du fichier python.
Une fois notre application créée, en toute fin de notre programme, on va lui demander de se lancer avec la fonction run(host= « 0.0.0.0″, port= 3904) de notre app.
=> Crée un nouveau projet de webapp et lance-le ! Tu devrais voir apparaître une magnifique page « Not Found », comme ci-contre. Tu devrais aussi voir une erreur 404 dans la console !
Note : Si tu n’arrives pas à créer ton code avec les indications ci-dessus, tu peux aller visiter la page « Démarrer avec Flask » pour plus d’informations.
Défi 2 – Affiche un texte sur la page d’accueil
Maintenant que tu as créé ta webapp, tu vas créer la première page de ta webapp !
Pour créer une page on commence par indiquer sa route, c’est à dire le chemin qui permet d’accéder à la page. Cette route va permettre de construire l’adresse URL de la page et pouvoir y accéder :
Pour créer une route on utilise la syntaxe : @app.route(« /cheminDeLaPage »).
Puis en dessous on va créer une fonction qui construit le contenu de la page.
Pour la route de la page d’accueil, qui est celle sur laquelle on veut arriver quand on lance notre app, on utilise simplement « / », pour une autre page on mettra son nom « /ma_page »
Notre fonction doit ensuite retourner la page à afficher, c’est à dire une chaine de caractère qui sera comprise comme une page HTML.
=> Affiche un texte (« hello world » ou ton pseudo) sur la page d’accueil de ta webapp
Note : Si tu rencontres une erreur, vérifie l’ordre dans lequel tu as noté tes instructions… garde à l’esprit que la ligne app.run(…) doit toujours être la dernière ligne de ton programme !
Défi 3 – Crée une seconde page avec un autre texte
Maintenant que tu sais comment créer des pages, tu vas pouvoir en créer une nouvelle avec la syntaxe @app.route(« /cheminDeLaPage »).
Tu vas pouvoir ensuite la voir en tapant comme URL « nomDuSite/cheminDeLaPage »
=> Crée une seconde page et affiche un autre texte sur cette page
Pour connaître le « nom » du site : Clique sur « new tab » pour voir ton projet dans un nouvel onglet. Tu peux alors voir le nom de ton site dans la barre d’adresse.
Défis création de page HTML
Défi 4 – Créer une page HTML
Le langage HTML permet de créer le contenu de pages web. Pour créer une page HTML, il suffit de créer un fichier ma_page.html
A l’intérieur de ce fichier on va utiliser des balises pour organiser les différentes parties de notre page : des titres, des paragraphes, des images, des liens, des boutons…
Elles fonctionnent généralement par paires pour encadrer le contenu comme dans cet exemple :
=> Créé un fichier HTML avec un titre <h1> et un paragraphe <p>
Si tu veux en savoir un peu plus sur le langage HTML tu peux aller sur cette page. Pour plus d’informations sur les balises (<h1>, <p>…), tu peux visiter cette page.
Note : à ce stade, tu n’as pas encore moyen de voir ce que donne la page HTML que tu as créée. C’est le but du défi suivant 😉
Défi 5 – Afficher une page HTML
L’organisation de tes fichiers est très importante. Flask va aller chercher les fichiers HTML dans un dossier appelé « templates » comme sur l’image ci-contre :
La fonction que nous allons utiliser ensuite pour afficher un fichier HTML au lieu du texte comme tu as vu précédemment s’appelle render_template(« nom_du_fichier »). On commence par l’importer comme sur l’image ci-dessous :
Note : Si tu as besoin d’aide pour cette partie des défis, tu peux aller regarder cette page ressources.
=> Afficher la page que tu viens de créer
Défi 6 – Ajouter des liens entre les pages
Si tu veux ajouter un lien vers autre page de ta webapp, tu peux utiliser la balise html de lien <a> et noter directement le chemin de page. Par exemple :
Si dans le code Python on a :
en HTML on aura comme lien :
=> Ajoute un élément avec un lien pour changer de page
Défi 7 – Ajouter des variables dans ton fichier HTML
Tu peux également donner un argument en paramètre de la fonction render_template() et l’intégrer à ton code html !
Il suffit de rajouter en argument de la fonction le nom de la variable dans ton code Python avec la syntaxe : render_template(« fichier.html », variable=valeur)
et dans ton fichier HTML, tu vas afficher une variable comme ceci: {{ variable }}
=> Crée un nouveau template HTML et ajoute un texte avec une variable que tu définis dans le code Python
Note : Si tu as besoin d’aide pour cette partie des défis, tu peux aller regarder cette page ressources.
Défis cookies et variables
Les trois prochains défis vont te permettre de mettre en place un système de cookies, de les créer et de les supprimer. Cela permet de stocker des informations entre les différentes pages de ton app.
Ces défis te permettent de prendre en main les ressources suivantes :
Défi 8 – Fabriquer un cookie et l’afficher
Importe le module session, crée ta clef de sécurité et ajoute une variable de session, puis affiche-la directement sur ta page html.
La variable session est directement utilisable depuis les templates html, pas besoin de la passer en paramètre de la fonction render_template().
Exemple : {{session[« mon_cookie »]}} permet d’afficher directement la valeur de « mon_cookie » sur la page HTML
=> Créé un cookie et affiche le sur ta page d’accueil
Défi 9 – Affiche un texte différent s’il y a un cookie
Utilise une condition pour afficher un message différent selon si un cookie « pseudo » existe ou non
=> Créé une condition dans ta page HTML qui permet d’afficher un message différent selon si le cookie « pseudo » existe ou non
Défi 10 – Efface tes cookies
Créé une route qui efface les cookies et redirige vers la page d’accueil.
Rappel : tu trouveras toutes les informations sur les cookies sur cette page
Pour rediriger vers une autre page tu aura besoin d’importer et d’utiliser la fonction redirect() (c’est une fonction de Flask, donc c’est à importer dans la ligne from Flask import […])
=> Ajoute :
- un lien sur ta page d’accueil qui pointe vers une route qui crée un cookie « pseudo »
- un lien sur ta page d’accueil qui pointe vers une route qui efface les cookies puis redirige vers la page d’accueil
Teste ton programme pour vérifier si ton cookie se supprime bien – depuis le défi 9, tu as normalement une page qui te permet de vérifier si le cookie « pseudo » existe ou non !
Défis templates, blocks et widget
Les prochains défis vont te permettre de créer différents morceaux de pages et de les assembler pour avoir un seul modèle qui peut être réutilisé plusieurs fois.
C’est très utile quand on veut afficher des menus complexes ou des éléments complexes !
Tu auras besoin de consulter la page suivante pour ces défis :
Défi 11 – Afficher les éléments d’une liste
Crée une liste et utilise une boucle for dans ta page HTML pour en afficher les différents éléments.
=> Affiche les éléments de ta liste sur une page HTML
Défi 12 – Crée un template de base
Sur la plupart des sites, on a une même base : c’est ce que l’on retrouve sur les différentes pages, l’en-tête (header), le menu, le pied de page (footer)…
=> Créé l’en-tête (header) de ton site avec un titre
(ne crée pas un header sur chaque page, ton header doit être dans un fichier HTML à part)
Défi 13 – Créé deux pages différentes
Tu peux maintenant créer le contenu de deux pages différentes qui utilisent cette base !
=> Créé deux pages utilisant le même en-tête
Défi 14 – Crée un widget
Les widgets vont permettre d’afficher des éléments complexes, par exemple sur la page d’accueil de youtube il y a une manière identique d’afficher toutes les vidéos. Si l’on veut afficher plusieurs contenus différents avec la même forme, les widgets sont fait pour ça.
=> Créé un modèle de widget permettant d’afficher un titre et un texte
Défi 15 – Affiche les élements d’une liste dans des widgets
Voici une liste de dictionnaires composés de titre et de texte.
Utilise une boucle for et ton modèle de widget pour afficher tous les éléments de cette liste d’un seul coup
liste=[{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"}]=> Affiche les différents éléments de la liste ci-dessus à l’aide de ton widget
Défi Bonus – Rend tout ça joli !
Sur le menu HTML / CSS, tu trouveras deux sections :
- la partie « prise en main » qui récapitule les bases du HTML/CSS
- la partie « effets Waouh » qui parle notamment de Tailwind
=> Utilise le framework Tailwind pour améliorer le rendu de tes pages (tu peux ajouter des marges, changer les couleurs, les tailles du texte…)
Défis formulaires
A travers ces défis, tu vas apprendre à récupérer des informations depuis un formulaire et les afficher.
Pour bien réussir ces défis, lis attentivement les ressources pour trouver tout ce dont tu as besoin.
Ce sont les derniers défis, ils sont donc plus difficiles. Si tu restes coincé dessus, n’hésite pas à continuer le défi bonus juste avant, tu auras l’occasion de voir toutes ces notions lors d’un prochain atelier !
Défi 16 – Créé un formulaire HTML
À l’aide des indications ci-dessus ,créé une page HTML contenant un formulaire simple permettant de saisir son pseudo.
=> Créé la structure HTML d’un formulaire avec un champ pour saisir son pseudo
Défi 17 – Récupère une information et affiche là
Crée la fonction qui va permettre de récupérer les données du formulaire (c’est-à-dire le pseudo entré).
Pour cela, dans ton code Python, tu as besoin de plusieurs choses :
- Tu devras traiter le cas où tu as une méthode POST (=récupération de données) et celui ou tu as une méthode GET (=affichage de la page avec le formulaire)
- Tu devras stocker le pseudo que tu récupères dans un cookie afin de pouvoir l’afficher sur tes différentes pages
- Tu devras donc afficher ce pseudo entré par l’utilisateur sur tes différentes pages
=> Récupère le pseudo entré par l’utilisateur et affiche-le sur tes différentes pages (par exemple avec un « Bienvenue, <pseudo> » dans ton header)