RESSOURCES PYTHON – Webapp Bases de Flask

Python : Les bases de Flask

On va utiliser un module python pour créer la WebApp et gérer les étapes de réception de requêtes et envoi des pages à l’utilisateur automatiquement : le module Flask.

Dans cette section, tu verras comment créer une page et lancer ta webapp avec Flask !

Comment on code une webapp ?

Créer ta webapp

On va commencer par importer le module Flask au début de notre code :

from flask import Flask

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.

app = Flask(__name__)

Créer les pages de ta webapp

Maintenant que l’on a une WebApp, il faut 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 page.

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 :

@app.route('/hello/')

Construire les pages

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 nom_de_fonction():
    code
    code
    code
    return "Salut Monde"

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

@app.route('/hello/')
def coucou():
	return "coucou"

Lancer une WebApp !

Si tu crées ton code sur Repl.it

Une fois notre application créée, en toute fin de notre programme, on va lui demander de se lancer. Pour ça on va appeler la fonction run sur notre app.

Cette ligne doit impérativement être à la toute fin de notre programme. Si tu rajoute d’autres éléments à ton app après, ils ne seront pas pris en compte.

Si tu crées sur ton ordinateur avec Sublime Text et le terminal

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

Attention, si tu utilises le PowerShell de Windows, il faut que tu utilises la commande suivante :

$env:FLASK_ENV = "development"

$env: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 de notre première page :

from flask import Flask
app = Flask(__name__)

@app.route('/hello/')
def coucou():
	return "coucou"

Et la page web que l’on obtient :

EXPERIMENTER

EXPERIMENTER

PARTAGER

PARTAGER

RAISONNER

RAISONNER

INVENTER

INVENTER

S'AMUSER