L'idée est de transformer un projet python que tu fais fonctionner dans le terminal (ou SublimeText) en un site web.
Alors pourquoi on appelle ça une WebApp et pas un site web ?
Il existe différents types de sites web, on peut en particulier distinguer les sites "vitrines" qui ne font que afficher des informations et les "WebApps" qui "font des choses".
"Faire des choses" c'est très (très) vague, mais il y a tellement de webApp différentes qu'il est dur de leur donner un cadre. Des exemples de webApps :
Voici des exemples de pages vitrines pour que tu puisse comparer :
Faire une web app c'est donner une interface WEB à notre code python !
Quand on demande une page web d'une WebApp, la WebApp fabrique la page avant de nous l'envoyer.
Par exemple, sur le site de conversion de devises la webApp fait le calcul de conversion et construit une page web avec la valeur convertie que l'on voulait :
Les sites Web fonctionnent en 4 étapes :
Pour qu'une WebApp fonctionne il faut qu'elle fasse une chose de plus : fabriquer la page web grâce à python.
On doit donc faire 4 étapes :
Les parties "Recevoir la requête des navigateurs" et "envoyer la page à l'utilisateur" sont gérées pour nous automatiquement par le module python Flask que l'on va utiliser.
Il nous reste à coder les parties :
On va utiliser un module python pour créer la WebApp et gérer les étapes de réception de requêtes et envoie des pages à l'utilisateur automatiquement.
Le module s'appelle flask et pour l'utiliser on va l'importer au début de notre code :
Ensuite nous allons créer une application Flask avec cette ligne:
Maintenant que l'on a une WebApp, il nous faut lui définir les pages qui vont la composer. Ces pages sont définies à l'aide de leur URL c'est à dire l'adresse web où on peut trouver la pages.
Par exemple dans le site de météo que l'on a vu plus haut, les adresses des pages que l'on peut récupérer ressemblent à :
Elles commencent toutes par l'adresse du site "https://www.lachainemeteo.com" à laquelle est ajouté un suffixe :
Si on regarde ces suffixes on peut deviner que l'adresse des pages suit à peu près le format :
/meteo-pays/ville-numéroDeLaVille/previsions-meteo-nomDeLaVille-jour
Nos adresses ne seront pas aussi complexes au début mais on doit définir les suffixes de notre site !
Pour créer une nouvelle page on écrit la ligne @app.route("adresse")
Attention, si tu as change le nom de la variable app il faut mettre ton nom de variable.
Par exemple pour créer la page http://adresse_du_site/hello/ on écrit la ligne de code :
Maintenant que l'on a défini les pages accessibles sur notre WebApp, il nous reste à "construire la page" qui sera envoyée à l'utilisateur !!
Si on va sur la page https://www.lachainemeteo.com/meteo-japon/ville-3700/previsions-meteo-tokyo-aujourdhui on veut les informations à jour sur la météo à Tokyo aujourd'hui donc à chaque fois que l'on demande la page, la WebApp lachainemeteo construit une page avec les informations à jour pour la météo de Tokyo.
On va faire la même chose pour nos pages !!
Pour construire une page, il faut passer par une fonction python. Une fonction est un bout de code auquel on donne un nom et c'est très utile pour éviter d'écrire plusieurs fois le même code ou pour permettre à d'autres codeurs d'utiliser facilement son code.
Tu as utilisé plein de fonctions depuis le début !! Par exemple :
print()
Image.open()
requests.get()
Ecrire une fonction en python est assez simple, on écrit :
Là la page retournée est toute simple :
Mais tu peux mettre du html dans le return pour renvoyer des pages plus sophistiquées.
Pour associer une fonction à une adresse il suffit d'écrire la fonction juste en dessous de la ligne @app.route('/adresse/')
Du coup pour notre page /hello/ on écrit :
Une fois que l'on a avancé notre code, on veut démarrer notre application !!
Pour faire ça il faut :
set FLASK_ENV=development
ou sous Mac et Linux :
export FLASK_ENV=development
set FLASK_APP=webapp.py
ou sous Mac et Linux :
export FLASK_APP=webapp.py
flask run
Le serveur a démarré !! Tu peux directement cliquer sur le lien qu'il t'affiche dans la console pour accéder à ton site ou tu peux taper http://127.0.0.1:5000 dans ton navigateur pour regarder ton site. N'oublie pas de rajouter ensuite les pages que tu as créé dans ta barre de recherche.
Dans notre exemple on se connecte à http://127.0.0.1:5000/hello/
Si tu veux que les autres personnes de l'atelier voient ta WebApp tu la démarre avec :
flask run --host 0.0.0.0
et trouve ton ip avec la commande
Sous Windows :
ipconfig
sous Mac ou Linux :
ifconfig
Si tu es sous Windows tu verra ceci :
L'adresse pour se connecter à ta WebApp devient http://ton_adress_ip:5000
Dans notre cas on se connecterais à http://10.0.0.44:5000/hello/
Voici le code au complet et le rendu de notre première page
Voici le code au complet:
Et la page web que l'on obtient :