Tutoriel Flask pour débutant : Site de memes (Partie 2)
Création de l’application Flask
Pour commencer, nous allons initialiser notre application Flask. Dans le dossier de notre projet, nous allons créer un fichier python nommé app.py. Dans ce fichier, nous allons coller le code suivant :
from flask import Flask
app = Flask(__name__)
if __name__ == '__main__':
app.run(debug=True)Ce code nous permet de créer une instance de notre application flask et de la démarrer dès que notre fichier python est exécuté.
La méthode run() peut prendre plusieurs arguments, comme le port sur lequel on voudrait lancer le serveur ou de l’activation ou non du mode debug. Dans notre cas, nous allons laisser le port par défaut et activer le mode debug pour faciliter la résolution des erreurs.
Pour lancer le serveur, nous allons dans la console et nous tapons la commande suivante :
python app.pyNous devrions avoir une sortie qui se présente comme suit :
* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: 139-018-621Cela nous confirme que notre serveur web flask est démarré à l’adresse http://127.0.0.1:5000
Nous allons coller cette adresse dans notre navigateur afin de voir ce qu’elle nous affiche.
Une erreur… Normal, nous n’avons pas encore défini de routes pour questionner notre serveur ainsi que d’action à faire au cas où ces routes sont utilisées.
Création et affichage de la page
Pour notre site de memes, nous voulons faire simple et efficace, nous voulons que l’utilisateur voie une page lui présentant les memes dès qu’il vient sur le site, soit, dès qu’il est sur la route de base qui est http://127.0.0.1:5000. Nous allons donc demander à notre serveur flask d’afficher la page de présentation des memes dès que l’utilisateur demande cette route.
Pour définir une route, voici le code à ajouter à notre fichier app.py (en veillant à ce que l’instruction ‘if __name__ == ‘__main__’’ reste toujours à la fin du fichier) :
@app.route('/')
def input():
return 'Salut toi...'Tout votre fichier devrait maintenant ressembler à ceci :
from flask import Flask
app = Flask(__name__)
@app.route('/')
def input():
return '<h1>Salut toi...</h1>'
if __name__ == '__main__':
app.run(debug=True)Ce que nous venons de faire, c’est d’utiliser le décorateur ‘@app’ pour définir une route (en l’occurrence dans notre cas, il s’agit de la route dite ‘racine’), et juste après avoir défini la route (c’est important de le faire vraiment juste après), nous écrivons une fonction qui défini le comportement que doit avoir notre serveur flask quand cette route est demandée. Ici le serveur doit juste retourner une balise HTML h1 avec à l’intérieur ‘Salut toi… ’. Si nous retournons sur notre page et que nous la rechargeons, nous verrons maintenant ceci :
Mais nous ne voulons pas juste envoyer du texte, nous voulons que le serveur affiche une page HTML complète. Pour ce faire, nous allons devoir créer un dossier nommer ‘templates’ avec qui va contenir nos fichiers HTML. Le nom du dossier est important, il s’agit d’une convention qui permet à flask de reconnaitre directement où se situent les pages HTML.
Après avoir créé le dossier template à la racine du projet, nous allons créer à l’intérieur un fichier intex.html qui va contenir le code de notre page que voici :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.50.1/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
<link rel="stylesheet" href="../static/style.css">
<link rel="stylesheet" href="../static/main.css">
<title>MemeHub</title>
</head>
<body class="bg-base-300 flex-col w-full justify-center">
<header>
<div class="navbar flex bg-base-100">
<div class="flex-1">
<a class="btn btn-ghost normal-case text-xl">MemeHub</a>
</div>
</div>
</header>
<footer class="bg-base-100">
<div class="container mx-auto">
<div class="p-5 text-center">
<div class="col-span-1">
<h1 class="text-2xl font-bold text-center">MemeHub</h1>
<p class="text-gray-500 text-center">A place to find funny memes and jokes</p>
<p class="text-gray-500 text-center">Made with ❤ by Me</p>
</div>
</div>
</div>
</body>
</html>Si nous rechargeons notre page, nous verrons ceci :
Pour l’instant notre page n’affiche aucun memes, rien de plus normal, puisqu’il nous faut récupérer les memes en arrière-plan et les fournir à notre page HTML afin qu’elle puisse les afficher.
Dans la dernière partie de ce tutoriel, nous aborderons la récupération et l’affichage des memes.
