Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Python - Défis Webapp

Défis pour commencer

découvre Flask

Bienvenue ! Tu trouveras ici une liste de défis pour débuter avec Flask et Python !!

Défi 1 - Lance une webapp

Pour créer une application, on va commencer par importer le module Flask au début de notre code. On va plus précisement importer Flask du module flask.

Ensuite nous allons créer une application Flask en déclarant une nouvelle variable comme suit :

    • 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 __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 !

Note : Si tu n’arrives pas à créer ton code avec les indications ci-dessus, tu peux aller visiter la page ressources sur les webapp Python pour trouver un code exemple.

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.

=> 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…

On va ajouter une route à notre app avec 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.

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

Défi 4 - Afficher une variable

Maintenant que tu sais afficher un texte, on va aller un peu plus loin ! 

Crée une variable avec comme valeur un nombre aléatoire et affiche la sur ta page ! Mais attention, il faut que lorsque tu recharges ta page la valeur soit différente !

=> Affiche une variable aléatoire qui change à chaque fois que l’on recharge la page

Rappel pour créer un nombre aléatoire on utilise le module random :

Rappel bis : Pour convertir un nombre en texte on utilise la fonction str(nombre_a_convertir)

Défis pour aller plus loin

Templates & styles

Défi 5 - Ajouter un code HTML à ta webapp

Tu vas maintenant découvrir comment ajouter un fichier HTML à ton projet !

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-contre : 

Note : Si tu as besoin d’aide pour cette partie des défis, tu peux aller regarder cette page ressources.

=> Personnalise ta page d’accueil avec un fichier HTML

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 que tu connais et noter directement le chemin de page. Par exemple :

si on a 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.

BONUS - Crée une webapp type boule de cristal !

En combinant toutes les notions que tu as découverte (et avec l’aide de ton anim’), tu peux maintenant essayer de créer un projet de webapp type boule de cristal ! On pose une question au programme qui nous donne une réponse aléatoire.

Commence par noter les étapes de créations en commentaire dans ton code et appelle ton anim’ pour les parties que tu ne sais pas encore faire !

BONUS - Crée une webapp autour du jeu Pierre-Feuille-Ciseaux

En combinant toutes les notions que tu as découverte (et avec l’aide de ton anim’), tu peux maintenant essayer de créer une webapp autour du jeu pierre-feuille-ciseaux !

Commence par créer le jeu sans Flask, essaye ensuite de créer la base de ta webapp (combien de page ? à quoi chacune sert) et redécoupe ton code du jeu en fonction de la structure de ta webapp.

Pour finir, personnalise ta webapp avec des templates HTML !