Création d'une application Web

Création d'une application Web

= Introduction =

Ce tutoriel décrit une démarche possible de création d'une application Web à l'aide du framework Pylons. Après la création d'un squelette d'une application Web, on va créer deux pages : l'une pour le paramétrage d'une expérience et l'autre pour l'affichage des résultats d'une expérience. L'expérience utilisée dans l'exemple est tirée des exemples de vle.

= Etape 0 : installation de Pylons =

Mis à part Python, il est nécessaire d'installer un certain nombre de bibliothèques Python :

Les paquets python-setuptools et python-pastescript sont utilisés pour l'installation et le lancement du serveur Web. python-pylons est le framework de développement. python-matplotlib regroupe un ensemble de fonctions de haut niveau pour le tracé de graphiques.

Pour info, voici les versions de chaque paquet utilisé (sous Debian et Ubuntu) :
 * python-setuptools : 0.6.10
 * python-pastescript : 1.7.3
 * python-pylons : 0.9.7
 * python-matplotlib : 0.99.1.2

= Etape 1 : création du squelette de l'application =

La création d'une application Web à partir de Pylons passe par la commande : paster create -t pylons xxxx. Cette commande va créer un répertoire xxxx avec le squelette de l'application.

Par défaut, Pylons travaille avec le langage de template mako. On peut garder ce langage par défaut en appuyant directement sur Entrée.

Il est possible d'intégrer la gestion d'une base de données au sein de l'application grâce à SQLAlchemy. Pour l'instant, nous n'allons pas utiliser cette option donc Entrée.

L'application est alors créée. Un répertoire model-web est créé avec l'arborescence suivante :

Il est possible de tester dès à présent l'application :

Ce serveur Web est lancé. Pour voir le résultat, ouvrez un navigateur et connectez-vous à l'adresse : http://127.0.0.1:5000 Vous obtenez une page de bienvenue.

= Etape 2 : création d'une page de paramétrage d'une expérience =

La création d'une nouvelle page commence par la création d'un contrôleur (la partie traitement événementiel de l'application). Pylons est basé sur le modèle MVC (Modèle / Vue / Contrôleur). Pour Pylons, un contrôleur est une classe Python et regroupe un constructeur (__init__) et un ensemble de méthodes. Une méthode de contrôleur peut posséder pour résultat une page HTML (une vue) qui sera renvoyée au navigateur. Une vue est une page HTML produite par un langage de template Mako (les fichiers sont placés dans Templates).

Paster permet de créer les contrôleurs :

On va s'intéresser seulement au fichier experiment.py qui contient le code du contrôleur. test_experiment.py permet de définir des tests sur le contrôleur.

Pour voir cette page, il suffit d'accéder à http://127.0.0.1:5000/experiment/index La page est assez rudimentaire puisqu'elle se résume à "Hello World" sans aucune mise en page HTML.

Si on désire que cette "page" devienne la page d'accueil, il suffit de modifier le fichier config/routing.py en ajoutant : map.connect('/', controller='experiment', action='index') et de supprimer le fichier modelweb/public/index.html

Cet ajout permet d'indiquer que l'url 127.0.0.1 est "routé" vers la méthode index du contrôleur experiment.

Maintenant, il faut faire évoluer notre sortie en proposant une mise en page HTML sous forme d'un formulaire avec la liste des paramètres que l'on désire modifier. On va utiliser l'exemple qss_exp1_txt.vpz de vle.

Dans un premier temps et pour simplifier les choses, il faut copier le fichier vpz dans un nouveau répertoire attachments à la racine du site. Avec une installation classique, le fichier qss_exp1_txt.vpz se situe dans /usr/share/vle-0.8.0/examples/.

Nous allons maintenant modifier la méthode index du contrôleur pour ouvrir ce fichier vpz et récupérer la liste des paramètres de l'expérience. Avant cette modification, il faut importer les librairies pyvle et os : placer l'instruction import pyvle, os en début de fichier experiment.py

De plus, il faut importer un dictionnaire de pylons pour connaître le chemin du répertoire attachments :

et ajouter dans la section [app:main] du fichier development.ini à la racine du site :

La méthode index consiste maintenant à :
 * construire le chemin où se trouve le fichier vpz ;
 * ouvrir le fichier vpz en construisant un objet de type pyvle.Vle ;
 * récupérer les valeurs des conditions à modifier (les 4 paramètres du modèle).

La méthode getConditionPortValue de la classe Vle de pyvle nécessite le nom de la condition, le nom du port (le paramètre) et l'indice de la valeur à récupérer. On considère, pour exemple, qu'il n'y a qu'une seule valeur par paramètre et l'indice de la première valeur est 0.

La méthode index retourne maintenant le résultat de la fonction render appliquée sur le fichier de template experiment.html. render est une méthode qui traite le template selon le moteur sélectionné (dans notre exemple, mako). La variable c est le support des informations transmises au moteur.

Nous allons maintenant écrire le fichier experiment.html (qui doit être placé dans modelweb/templates) qui a pour objectif de construire le formulaire de saisie des conditions. Ce formulaire va être constitué de zones de saisie avec comme valeur les valeurs récupérées dans le fichier vpz.

L'attribut action du tag form indique que lors de la validation du formulaire via le bouton run, la méthode run du contrôleur experiment sera appelée. Nous allons la définir vide pour l'instant.

= Etape 3 : création d'une page de lancement d'une expérience et du tracé d'une courbe =

Les valeurs des paramètres ont été définies, il faut maintenant :
 * récupérer les valeurs provenant du formulaire ;
 * modifier le vpz avec les nouvelles valeurs ;
 * lancer la simulation ;
 * récupérer le résultat de la simulation ;
 * tracer une courbe avec matplotlib.

Chaque champ du formulaire donne naissance à une entrée dans le dictionnaire request.params à condition d'avoir bien défini l'attribut name dans les tags input de type text : request.params['a'] contient la valeur du champ a.

L'objet vpz est maintenant prêt pour une simulation. La méthode run dans la version la plus simple va exécuter la simulation et retourner un dictionnaire à un élément. Il n'y a qu'un élément car la simulation ne possède qu'une seule vue. Le premier élément est un dictionnaire où chaque entrée est la série temporelle d'une variable observée (sous forme d'un tuple) ainsi que la date d'observation avec la clé time.

Il nous reste à tracer une belle courbe avec matplotlib.

La première chose à faire est d'importer un certain nombre de bibliothèques en ajoutant en début de experiment.py :

Après l'exécution de la simulation avec la méthode run de la classe Vle, il faut :
 * construire un objet de type figure de la bibliothèque matplotlib ;
 * générer un canvas dans lequel la courbe sera tracée ;
 * découper la zone de dessin (add_subplot) - dans notre exemple, il n'y en a qu'une - ;
 * tracer la courbe à l'aide de la méthode plot ;
 * convertir le canvas en une chaîne de caractères qui est ensuite typée png.

Pour vérifier que l'ensemble marche, il faut :
 * se connecter sur http://127.0.0.1:5000 ;
 * saisir les valeurs des paramètres ;
 * valider le formulaires ;

La courbe de la sortie x du modèle plantlouse s'affiche.

= Compléments =

Utilisation des paquets
Pour utiliser un fichier d'expérience (vpz) issu d'un paquet, il faut basculer en mode paquet avant la création d'un objet Vle.

Note: Dans ce mode paquet le fichier *.vpz doit se trouver dans le dossier /exp du projet vle correspondant au paquet, et non plus dans le dossier /attachments créé plus haut dans le dossier de l'application web (et référencé dans le fichier development.ini à la racine du site).

Stockage des variables locales
Pour une application web ayant plusieurs pages de formulaires, il faut gérer soi-même le stockage des données récoltées dans les différents formulaires (en effet, la classe du contrôleur s'instancie à chaque nouvelle page perdant ainsi toutes les informations des pages précédentes).

Pour pouvoir garder disponible ces informations à tout moment, on peut utiliser la variable globale session de pylons.

On peut ensuite récupérer les valeurs correspondant aux différentes clés grâce à : (ici key et RequestParamKey sont des chaînes de caractères correspondant respectivement à la page de formulaire et au paramètre particulier que l'on veux récupérer)

On peut aussi en outre s'en servir pour stocker des variables locales du code pylons :

Pour pouvoir les utiliser plus tard :

Ainsi pour ce qui concerne l'utilisation dans le cadre d'une application web de vle, on peut donc dans un premier temps stocker ainsi toutes les valeurs définies par l'utilisateur dans les formulaires de configuration du modèle. Et ce n'est que juste avant (dans la même fonction par exemple) de lancer la/les simulation(s) qu'il faut modifier les valeurs contenues dans le fichier *.vpz. Une fois la simulation exécutée, on peut ensuite stocker les résultats dans cette variable en attendant de les utiliser plus tard pour l'affichage de graphiques ou des traitements statistiques par exemple.