Support de cours Python pour apprendre à utiliser le Framework Flask

Support de cours Python pour apprendre à utiliser le Framework Flask

...

Partie 1 : Introduction

Dans cette première partie nous allons découvrir en douceur le web ainsi que Flask.

Le Web

Avant d’attaquer l’apprentissage de Flask, attardons-nous un peu sur de la théorie : le fonctionnement des sites Web. Cette partie a beau n’être que théorique, elle est néanmoins très importante pour comprendre la suite : ne la négligez pas ! En effet, c’est maintenant que nous allons découvrir des notions que nous utiliserons par la suite grâce à Flask. Ces notions vous seront donc toujours utiles, que vous utilisiez Flask ou autre chose.

Un serveur, des clients

Pour commencer, disons qu'un site web n'est qu'un simple programme exécuté sur un ordinateur. Quand vous vous rendez sur ce site web, vous êtes ce qu'on appellera un client, et l'ordinateur où est exécuté ce site web est appelé le serveur.

Quoi de plus simple qu’un beau schéma pour introduire le concept ? Voici donc un schéma représentant plusieurs clients se connectant à un serveur :

Vous noterez que j’ai représenté les clients de la même manière que le serveur : par un ordinateur. En effet, il faut bien comprendre que n’importe quelle machine peut faire office de client ou de serveur. Durant notre apprentissage, nous utiliserons le même ordinateur pour faire les deux: le site web sera donc situé sur votre propre machine. Quand notre site sera prêt, nous pourrons le placer sur un serveur accessible au monde entier. Patience !

Qu’est-ce qui différencie un serveur d’un client dans ton schéma alors ?

Le client et le serveur communiquent ensemble. Je ne l’ai pas représentée, mais la seule différence, c’est le logiciel utilisé pour la communication entre le client et le serveur. En effet, le client et le serveur n’utilisent pas le même logiciel ! Le client utilise un simple navigateur web (ça, vous devriez connaitre). Quant au serveur, le logiciel qu’il utilise (et qui lui permet de communiquer avec tous les clients en même temps) s’appelle un serveur HTTP.

J’en profite pour compléter le schéma :

…

Tout comme il existe plusieurs navigateurs web, il existe plusieurs serveurs HTTP. Le plus connu d’entre tous est Apache, mais il en existe de nombreux autres : peut être avez vous entendu parler de nginx, lighttpd, cherokee. Les serveurs HTTP peuvent évidemment fournir des pages web à plusieurs clients à la fois, et ils peuvent même contenir plusieurs sites web différents.

Le protocole HTTP

Ré intéressons nous à notre schéma : il est encore incomplet. En effet, on a compris que les clients communiquaient avec le serveur, mais on ne sait pas comment. Ils utilisent pour cela le protocole HTTP. Pour simplifier, on pourrait dire que le client demande une page web, et que le serveur la lui renvoie, mais soyons un peu plus précis.

La requête

Quand le client “demande une page web”, en réalité, il envoie au serveur une requête qui contient :

• le chemin vers la page web demandée, évidemment
• un type. Les deux principaux sont GET et POST. Le type de requête POST est utilisé quand on valide un formulaire sur une page web. Le reste du temps, le type est GET.
• quelques informations (sur le type de navigateur notamment)
• et éventuellement, des données. Par exemple quand le visiteur valide un formulaire, il envoie les données remplies dans la requête POST. Mais on peut également envoyer des données avec une requête GET.

La réponse

Lorsque le serveur lui répond, il renvoie bien évidemment la page demandée, mais pas seulement ! Il renvoie aussi le type de la page renvoyée, appelé le mime type (généralement, ce mime type indique que la page est une page normale, contenant du HTML.

Mais parfois, on souhaite renvoyer autre chose : une image, un fichier .doc, un pdf...), et il renvoie également qu'un code d’erreur. Par exemple, quand la page demandée est introuvable, on a le fameux code d’erreur 404. Mais il en existe de nombreux autres :

L'erreur 500 désigne une erreur survenue sur le serveur (il faut espérer ne pas l’avoir, celle là )

L'erreur 401 désigne que l'accès à cette page web n'est pas autorisé

L'erreur 400 signifie que la requête du client est mal formée (par exemple s'il n'envoie pas toutes les données d'un formulaire)

L'erreur 200 signifie que... tout s’est bien passé

Eh oui, quand tout se passe bien et que l’on renvoie la page au client, on précise quand même le code d’erreur.

On peut donc finaliser notre schéma :

… …

Tout ça c’est bien beau, on sait comment client et serveur communiquent, mais dans tout ça, où est notre site web ?

Eh bien, pour y accéder, on utilisera un navigateur, peu importe lequel. Et pour exécuter notre site web, où plutôt, pour le propulser (oui j'aime bien ce terme ), on utilisera un serveur HTTP. Il nous faudrait donc installer apache, par exemple. Mais en réalité, cela ne suffirait pas. Hé oui, je ne vous l’avais pas dit, mais les serveurs HTTP ne savent pas interpréter le Python ! Il nous faut donc ajouter à notre serveur HTTP un module pour rendre possible l’utilisation de Python, et donc de Flask. Je précise que ce problème est le même pour utiliser PHP ou Java : à chaque fois, il faut un module spécifique. Il y a plusieurs façons d’intégrer Python dans un serveur web. Pour faire court, sachez qu’il existe une norme appelée WSGI, que Flask respecte cette norme, et qu’il existe des modules pour les principaux serveurs HTTP leurs permettant de désservir des sites web en Python respectant la norme WSGI. Pour apache, il existe le module mod_wsgi. Une fois que tout est bien installé, il ne reste plus qu'à configurer le serveur pour qu'il déserve notre code Python. Enfin, tout ça, c’était pour votre culture, parce que dans tout ce tutoriel, nous allons utiliser le serveur HTTP + WSGI pré-intégré à Flask !Autrement dit, nous allons exécuter notre programme Python comme n'import quel autre programme, et automatiquement, le serveur HTTP + WSGI intégré sera lancé, propulsera votre site web, et vous pourrez y accéder immédiatement !

Dernières notions

Nous avons vu que notre navigateur web envoyait des requêtes HTTP aux serveurs HTTP. Intéressons nous au lien qu'il existe entre cette requête et l’adresse que nous entrons dans notre navigateur web pour accéder à une page web. Prenons l’exemple de cet adresse :

…

Si on ne précise pas de numéro de port, le navigateur va aller automatiquement sur le port 80. Or, c'est sur le port 80 que fonctionnent la plupart des serveurs HTTP. Celui intégré à Flask ne fonctionne pas sur ce port car il s'agit d'un serveur HTTP destiné uniquement au développement de votre site web, il ne doit pas être utilisé quand celui-ci est terminé et diffusé sur Internet. Voilà, vous devriez en savoir désormais assez pour passer au second chapitre... Mais vérifions tout cela dans notre premier QCM ! J'espère que vous avez décroché un 20/20 au QCM car dans la suite, toutes ces notions devront être maîtrisées afin que vous puissiez utiliser Flask sans encombre.

Présentation de Flask

Après la découverte des notions nécessaires dans le chapitre précédent, nous allons enfin nous concentrer sur Flask. Ce chapitre à pour but d'en faire la présentation.

Présentation

Flask, je l’ai dit, est un framework web, ou plutôt, un micro-framework. Ce “micro” signifie simplement que Flask ne fait pas tout.

Cela signifie aussi que pour en faire plus que ce qu’il permet de base, il faudra installer des extensions. Heureusement, celles-ci sont nombreuses, de qualité, et très bien intégrées, je vous en présenterai d’ailleurs quelques unes en temps voulu.

Ce tutoriel présentera Flask dans sa version la plus récente : 0.9.

Si vous ne savez pas ce qu’est un framework, dites vous simplement que Flask est un ensemble de modules qui vont vous faciliter la programmation de sites web dynamiques. Dans l’absolu, vous pourriez vous débrouiller sans framework ! En effet, il suffit que votre application suive la norme WSGI. Voilà un exemple d’une application extrêmement basique réalisée sans framework, simplement en respectant cette norme :

Code : Python

#!/usr/bin/env python

# -*- coding:utf-8 -*-

import re

from cgi import escape

def index(environ, start_response):

""" Page d'accueil accessible à '/'

Affiche simplement une phrase. """

start_response('200 OK', [('Content-Type', 'text/html')])

return ["Ceci est la page d'accueil."]

def hello(environ, start_response):

""" Page accessible à la route '/hello/'

Affiche la phrase que l'utilisateur a passée en paramètre. """

# recupère la phrase depuis l'url si elle a été spécifiée

# Sinon, affiche Hello World.

args = environ['myapp.url_args']

if args:

phrase = escape(args[0])

else:

phrase = 'Hello World'

start_response('200 OK', [('Content-Type', 'text/html')])

return [phrase]

def not_found(environ, start_response):

""" Appelée si l'adresse est inconnue. """

start_response('404 NOT FOUND', [('Content-Type',

'text/plain')])

return ['Not Found']

# associe les adresses aux fonctions

urls = [

(r'^$', index),

(r'hello/?$', hello),

(r'hello/(.+)$', hello)

]

def application(environ, start_response):

""" Dispatche les requêtes aux fonctions précédentes. """

path = environ.get('PATH_INFO', '').lstrip('/')

for regex, callback in urls:

match = re.search(regex, path)

if match is not None:

environ['myapp.url_args'] = match.groups()

return callback(environ, start_response)

return not_found(environ, start_response)

Comme vous le voyez, le code est long et complexe, et son organisation n’est pas évidente. Pourtant, tout cela représente finalement peu de choses : cela crée un site web qui dispose de deux pages :

la page d’accueil, dont le chemin (la route) est ‘/’, et qui se contente d’afficher un message prédéfini.

la page ‘/hello’, qui affiche “Hello World” si on ne lui précise rien, ou qui affiche ce qu’on lui passe en paramètre. Exemple

:

‘/hello/coucou’ affichera “coucou”

‘/hello/Bienvenue sur mon site !’ affichera “Bienvenue sur mon site !”

Si la page demandée ne correspond à aucune route existante, on renvoie une erreur 404.

Vous voyez donc qu’écrire un site web sans framework peut se révéler extrêmement fastidieux... Je vous propose de voir comment on peut obtenir la même application avec Flask. Vous allez voir, c’est tout de suite beaucoup plus digeste !

Code : Python

#!/usr/bin/env python

# -*- coding:utf-8 -*-

from flask import Flask

app = Flask(__name__)

@app.route('/')

def index():

return "Ceci est la page d'accueil."

@app.route('/hello/<phrase>')

def hello(phrase):

return phrase

↳ Essayer ce code : '/' ; '/hello/test' ; '/hello/this is a test'

Secret (cliquez pour afficher)

Dans la suite du tutoriel, quand cela sera approprié, je vous proposerais d'essayer ce code en cliquant sur des liens, à l'instar de ceux que je viens de placer.

Cependant, il faut bien comprendre que les adresses réelles des pages ne seront pas forcément celles du lien : en effet, au cours du tutoriel, je risque de souvent réutiliser les mêmes noms de pages. Cela n'est qu'un détail, n'y prêtez pas attention.

Là le code est beaucoup plus court et plus lisible, on distingue bien nos deux pages, la page d’erreur est automatiquement générée, bref, il n’y a pas photo : c’est bien plus simple.

Possibilités

Tout ça c’est bien joli, mais qu’est-ce qu’on peut faire de réellement utile avec Flask ?

Comme je l’ai dit, vous pouvez réaliser des sites web dynamiques. Cela signifie que le contenu de votre site ne sera pas figé, par opposition aux sites statiques. Un site statique est suffisant pour, par exemple, faire la description d’un projet. Mais dès que l’on veut personnaliser la page en fonction du visiteur ou de ses actions, il faut faire un site dynamique.

Un site dynamique permet la participation des visiteurs. Par exemple, les blogs, les forums, les réseaux sociaux, les chats, les webmails, sont des sites dynamiques.

Le petit exemple que l’on a vu, aussi inutile soit il, est bien un exemple de site dynamique ! En effet, la page située au chemin '/hello' affiche un message qui n’est pas figé, il dépend du visiteur.

À la fin de ce cours, vous serez donc en capacité de réaliser toutes sortes de sites dynamiques. Tout ce que vous avez à faire est de lire les chapitres dans l’ordre. Au passage, étant donné que Flask n’est qu’un module Python parmi d’autres, une fois que vous le connaîtrez, vous pourrez ajouter une interface web à vos programmes grâce à lui, ou bien interagir avec d’autres modules Python dans votre site web !

La concurrence

Avant de vous laisser face au QCM, je me dois de vous parler de la concurrence. En effet, Flask est loin d’être le seul framework web en Python. Il en existe de nombreux: Django, Pyramid, Pylons, Tornado, Bottle, Cherrypy, Web2Py, Web.py, et beaucoup d’autres. Pourquoi donc choisiriez vous Flask ? Je n’ai pas de réponse toute faite, cela dépend évidemment des goûts de chacun. Ce qui est certain, c’est que Flask, contrairement à Django (qui est un très gros framework), ne réinvente pas la roue : il utilise d’autres modules existants en tant qu’extensions, ce qui pourra vous être utile si jamais vous désiriez un jour utiliser ces modules en dehors de Flask. Flask est également beaucoup plus simple que Django à appréhender, comme vous avez pu le voir avec l’exemple de code donné précédemment, tenant en quelques lignes d’un fichier. Ce court chapitre d’introduction est terminé, j’espère qu’il vous donnera envie d’apprendre à utiliser Flask . Si c’est le cas, direction le chapitre suivant, où on attaque les choses sérieuses : installation de Flask et réalisation d’un premier site web !