WebApp

Une WebApp c'est quoi ?

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 :

Comment ça fonctionne ?

Les sites Web fonctionnent en 4 étapes :

    • Le navigateur (chrome, firefox, safari) demande au serveur une page web en envoyant une requête
    • Le serveur reçoit cette demande (requête) et trouve sur son disque dur la page web avec les différents médias associés (images, vidéos,...)
    • Le serveur envoie la page web au navigateur sur l'ordinateur de l'utilisateur
    • Le navigateur affiche la page (en mettant les couleurs, les images, etc)

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 :

      • Recevoir la requête des navigateurs
      • Identifier quelle page envoyer
      • construire la bonne page
      • envoyer la page à l'utilisateur

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 :

      • Identifier quelle page envoyer
      • construire la bonne page

Comment on code ça ?

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:

  • 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.
  • Flask() permet de créer une nouvelle application.
  • __name__ (oui il y a 2 _ de chaque côté du nom) permet de dire à Flask de nommer l'app automatiquement avec le nom du fichier python.

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 :

  • /meteo-japon/ville-3700/previsions-meteo-tokyo-aujourdhui
  • /meteo-france/ville-963/previsions-meteo-montpellier-jeudi
  • /meteo-chili/ville-797/previsions-meteo-santiago-mercredi

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 :

  • def est un mot clef pour créer une fonction en python
  • nom_de_fonction est le nom que l'on veut donner à notre fonction
  • () les parenthèses permettent de préciser que c'est une fonction et de définir les paramètres de la fonction (on voit ça un peu plus tard)
  • : comme pour le if ou le for les deux points permettent de signaler que le code qui suit fait parti de la fonction
  • code c'est le code que l'on veut mettre dans la fonction.
  • return mot clef qui permet de renvoyer à Flask la page construite
  • "Salut Monde" le contenu de la page web envoyée à l'utilisateur

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 :

Lancer une WebApp !

Une fois que l'on a avancé notre code, on veut démarrer notre application !!

Pour faire ça il faut :

    • ouvrir un terminal dans le dossier où se trouve le code
    • passer Flask en mode développement:
set FLASK_ENV=development
ou sous Mac et Linux :
export FLASK_ENV=development
    • définir quel fichier python contient le code de notre app : 
set FLASK_APP=webapp.py 
ou sous Mac et Linux : 
export FLASK_APP=webapp.py
    • enfin on démarre l'application :
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/

Premier exemple

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 :