Master 1ère année. Réseaux avancés I. TP nº4 filière ISICG

Transcription

1 Master 1ère année Réseaux avancés I TP nº4 filière ISICG Utilisation de la microplateforme Bottle et du framework AngularJS La «micro web-framework» Bottle pour Python Les principales caractèristiques : Routing : lien entre URLs dynamique et appels de fonctions ; Templating : intégration de template et support de bibliothèques externes de templating comme jinja2 ; Utilities : accès facilité aux données d un formulaire, à la transmission de fichier, aux cookies, et entêtes et méta-données HTTP ; Server : serveur intégré HTTP pour le développement et intégration possible dans des serveurs supportant le WSGI, «Web Server Gateway Interface», protocole permettant la communication entre serveur Web et application externes ; disponible sur facile à installer : xterm $ sudo apt-get install python-setuptools $ sudo easy_install bottle Exemple d utilisation : from bottle import route, run, def index(name='world'): return template('<b>hello {{name}}</b>!', name=name) run(host='', port=8080, debug = True) Accès dans le navigateur avec l URL : Utilisation de SQLite dans Python SQLite permet d utiliser un sous-ensemble de SQL pour gérer une BD réduite à un seul fichier. Il est très utilisé pour des applications légères et/ou embarquées (IOS, Android, etc.). Exemple tiré de : import sqlite3, sys try: connexion = sqlite3.connect('voitures.db') cur = con.cursor() cur.execute("create TABLE Cars(Id INT, Name TEXT, Price INT)") cur.execute("insert INTO Cars VALUES(1,'Audi',52642)") cur.execute("insert INTO Cars VALUES(2,'Mercedes',57127)") cur.execute("insert INTO Cars VALUES(3,'Skoda',9000)") cur.execute("insert INTO Cars VALUES(4,'Volvo',29000)") cur.execute("insert INTO Cars VALUES(5,'Bentley',350000)") cur.execute("insert INTO Cars VALUES(6,'Citroen',21000)") cur.execute("insert INTO Cars VALUES(8,'Volkswagen',21600)") connexion.commit() connexion.close() except sqlite3.error, message : print message sys.exit(1) Vous utiliserez ce programme pour remplir la BD pour l application d exemple. Pour consulter le contenu de la BD : import sqlite3, sys try: connexion = sqlite3.connect('voitures.db') cur = connexion.cursor() cur.execute('select Id, Name, Price FROM Cars') nom_colonnes = [d[0] for d in cur.description] print nom_colonnes for ligne in cur: print ligne Resp. UE : P-F. Bonnefoi, «Réseaux avancés I TP nº4 filière ISICG» version du 7 novembre 2016, rédigé avec ConTEXt Don t Panic! 1/6

2 connexion.close() except sqlite3.error, message: print message sys.exit(1) Pour consulter le contenu de la BD et le traduire en représentation JSON : import sqlite3, json, sys try: connexion = sqlite3.connect('voitures.db') cur = connexion.cursor() cur.execute('select Id, Name, Price FROM Cars') nom_colonnes = [d[0] for d in cur.description] table = [dict(zip(nom_colonnes, ligne)) for ligne in cur] print json.dumps(table) except sqlite3.error, message: print message sys.exit(1) connexion.close() L affichage obtenu de la représentation JSON : [{"Price": 52642, "Id": 1, "Name": "Audi"}, {"Price": 57127, "Id": 2, "Name": "Mer cedes"}, {"Price": 9000, "Id": 3, "Name": "Skoda"}, {"Price": 29000, "Id": 4, "Name": "Vol vo"}, {"Price": , "Id": 5, "Name": "Bentley"}, {"Price": 21000, "Id": 6, "Name": "Ci troen"}, {"Price": 21600, "Id": 8, "Name": "Volkswagen"}] Utilisation d AngularJS AngularJS est un framework Javascript proposé par Google permettant de disposer d un MVC, «Model- View-Control». Il permet de : réaliser du «data-binding», c-à-d de lier dynamiquement des valeurs à leur représentation dans le navigateur Web : toute modification de l interface modifie les données et vice-versa ; d automatiser la création des éléments constituants l interface dans le navigateur ; de gérer les échanges entre l application serveur et l interface au travers du format d échange JSON ; d accrocher et de déclencher des événements lors de la modification des éléments (par exemple : déclencher l envoi d une requête HTTP lors de l appui d un bouton). Voici l arborescence d une application d exemple d utilisation :. -- creation_bd.py -- static -- gestion_voitures.html -- gestion_voitures.js -- voiture.py -- voitures.db Soit le contenu du fichier gestion_voitures.js 1 angular.module('voituresapp',['ui.bootstrap']); 2 function AfficherVoitures($scope,$rootScope,$http) { 3 $rootscope.infos = { voiture_selectionnee : "aucune", liste_voitures : '', 4 transmission : ''}; 5 $http.get("/liste_voitures").success(function(data) { 6 $rootscope.infos.liste_voitures = data; }); 7 transmettre = function() { 8 $http.get("/selectionner/"+$rootscope.infos.voiture_selectionnee).suc 9 cess(function() } { $rootscope.infos.transmission = "Ok"; }); 10 $scope.$watch('infos.voiture_selectionnee', transmettre); Ce fichier est à mettre dans le sous répertoire static. Explications : ligne 1 : le nom de l application AngularJs qui est repris dans la ligne 1 du document HTML associé et la liste des modules utilisés : ici les éléments d interface de ui.bootstrap ; ligne 2 : on définit une fonction que l on va associer à un controlleur AngularJS (ligne 10 du document HTML associé) : en paramètres, on utilise des éléments d AngularJS : $scope : accès aux variables du «scope», c-à-d celles définies dans le contexte du controlleur AngularJS courant ; $rootscope : accès aux variables du «scope» racine, c-à-d en dehors de tous les controlleurs existants ; Resp. UE : P-F. Bonnefoi, «Réseaux avancés I TP nº4 filière ISICG» version du 7 novembre 2016, rédigé avec ConTEXt Don t Panic! 2/6

3 $http : accès aux requêtes http et récupération de contenu au format JSON ; ligne 3 : on défini un dictionnaire infos qui recevra : «liste_voitures» : un dictionnaire correspondant au contenu de la BD ; «voiture_selectionnee» : une variable d échange entre l interface et l application Web ; ligne 5 : on récupére le contenu de la BD au format JSON fournie par l application Web ; Ce contenu va être utilisé pour construire l interface dans le navigateur. ligne 7 : on crée une fonction qui sera appelée à chaque modification de la variable «infos.voiture_selectionnee» elle récupère le contenu de la variable modifiée ; elle le transmet à l application Web ; ligne 10 : le «watch» accroche la fonction précédente aux modifications de la variable. Soit le contenu du fichier gestion_voitures.html : 1 <html ng-app="voituresapp"> 2 <head> 3 <script 4 src=" 5 <script src=" 6 <link href=" <script src="static/gestion_voitures.js"></script> rel="stylesheet"> 7 8 </head> 9 <body> 10 <h1> Selectionner voiture </h1> 11 <div ng-controller="affichervoitures"> 12 <div class="btn-group"> 13 <button type="button" ng-repeat="voiture in infos.liste_voitures" 14 class="btn btn-primary" ng-model="infos.voiture_selectionnee" btnradio="voiture.name"> {{voiture.name}}</button> </div> 17 <br/> 18 <tt>voiture selectionnee = {{infos.voiture_selectionnee}}</tt> 19 </br> 20 <tt>transmission = {{infos.transmission}}</tt> 21 <br/> 22 <button type="button" ng-model="infos.voiture_selectionnee" btn-radio="'vide'"> 23 Reset</button> 24 </div> 25 </body> 26 </html> Ce fichier est à mettre dans le sous répertoire static. Explications : ligne 1 : on associe un élément du DOM, «Document Object Model», à l application AngularJS (ligne 1 du fichier javascript précédent) ; ligne 3 à 6 : on récupère les fichiers Javascript mettant en œuvre le framework AngularJS ; ligne 7 : on inclus le fichier javascript précédent ; ligne 11 : on définit le controlleur qui va automatiquement s associer à la fonction de la ligne 3 du fichier javascript précédent ; ligne 12 : on définie un groupe de boutons et on utilise l opération AngularJS «ng-repeat» pour créer automatiquement les boutons dans le groupe : le «ng-repeat» parcours la table javascript contenu dans la variable «infos.liste_voitures» et associe la variable «voiture» à une case du tableau (pour rappel, une ligne du tableau correspond à une ligne de la BD, c-à-d, les champs «Id», «Name» et «Price» d un enregistrement voiture) et va créer, pour chaque ligne, un bouton : le bouton courant va récupérer comme label le nom de la voiture (champs Name) ; le bouton va modifier la variable indiquée par «ng-model», «infos.voiture_selectionnee», en lui affectant, lorsqu il sera activé, la valeur courante «voiture.name» ; ligne 18 : on affiche le contenu de la variable «infos.voiture_selectionnee» qui est modifée par un bouton de l interface ; ligne 20 : on affiche le contenu de la variable «infos.transmission» qui est modifié dans le fichier javascript. Resp. UE : P-F. Bonnefoi, «Réseaux avancés I TP nº4 filière ISICG» version du 7 novembre 2016, rédigé avec ConTEXt Don t Panic! 3/6

4 Le contenu programme Python associé voiture.py : 1 2 # encoding=utf import commands, sqlite3, json 5 from bottle import route, run, static_file 6 7 table_voitures = None 8 10 def renvoyer_liste_voitures(): 11 return json.dumps(table_voitures) def recuperer_liste_voitures(): 14 global table_voitures 15 connexion = sqlite3.connect('voitures.db') 16 curseur = connexion.cursor() 17 curseur.execute('select Id, Name, Price FROM Cars') 18 nom_colonnes = [d[0] for d in curseur.description] 19 table_voitures = [dict(zip(nom_colonnes, ligne)) for ligne in curseur] 20 print table_voitures def accueil(): 24 return static_file('gestion_voitures.html',root='static/') def selectionner_voiture(nom): 28 print "Voiture selectionnee :",nom 29 return {} def static(filename): 33 return static_file(filename, root='static/') recuperer_liste_voitures() 36 run(host='', port=8080, debug=true) Explications : ligne 9 : une «décoration» permet d associer une URL à une fonction Python : ici la récupération au format JSON du contenu de la table ; ligne 13 : une fonction exécutée une seule fois pour récupérer le contenu de la BD et le fournir en JSON ; ligne 22 : la «racine» du site ; ligne 26 : on récupére le paramètre passé dans une URL sous la forme d un chemin de ressource et on le transmets à la fonction Python associée ; ligne 31 : on fournit de manière transparente les ressources du répertoire «static» au client Web (ressources CSS, images, fichier javascript). Utilisation de MongoDB MongoDB est une base de données «NoSQL», c-à-d «Not Only SQL» : les contraintes strictes liées aux bases de données relationnelles SQL sont relâchées voire, pour certaines, supprimées. Le but recherché est de permettre au développeur de définir le modèle de données qui correspond le mieux à flux de données dans son application. MongoDB : est basé sur un modèle de documents où les objets contenant des données sont stockés dans une collection ; offre des bonnes performances, une haute disponibilité et une extensibilité automatique ; utilise une représentation des données basées sur JSON : voiture = {"Name": "Audi", "Id": 1, "Price": 52642} Pour son utilisation dans Python : il faut installer MongoDB sudo apt-get install mongodb ; pour lancer MongoDB dans son répertoire personnel /home/toto/bd : mongod --dbpath /BD ; Resp. UE : P-F. Bonnefoi, «Réseaux avancés I TP nº4 filière ISICG» version du 7 novembre 2016, rédigé avec ConTEXt Don t Panic! 4/6

5 pour stopper MongoDB : xterm pef@olympus:~$ mongo MongoDB shell version: connecting to: test Welcome to the MongoDB shell. For interactive help, type "help". For more comprehensive documentation, see Questions? Try the support group Server has startup warnings: Tue Nov 11 10:56: [initandlisten] Tue Nov 11 10:56: [initandlisten] ** NOTE: This is a 32 bit MongoDB binary. Tue Nov 11 10:56: [initandlisten] ** with --journal). Tue Nov 11 10:56: [initandlisten] ** Tue Nov 11 10:56: [initandlisten] > use admin switched to db admin > db.shutdownserver() Tue Nov 11 10:59: DBClientCursor::init call() failed server should be down... Tue Nov 11 10:59: trying reconnect to :27017 Tue Nov 11 10:59: reconnect :27017 ok 32 bit builds are limited to less than 2GB of data (or less See Tue Nov 11 10:59: Socket recv() errno:104 Connection reset by peer :27017 Tue Nov 11 10:59: SocketException: remote: :27017 error: 9001 socket exception [RECV_ERROR] server [ :27017] Tue Nov 11 10:59: DBClientCursor::init call() failed > il faut disposer du module Python pymongo sudo easy_install pymongo ; Pour l utilisation dans Python : pef@olympus:~$ python Python (default, Mar , 22:59:38) [GCC 4.8.2] on linux2 Type "help", "copyright", "credits" or "license" for more information. >>> from pymongo import MongoClient >>> c=mongoclient() Tue Nov 11 11:05: [initandlisten] connection accepted from :50132 #1 (1 connection # pour créernowlaopen) BD ou s'y connecter >>> db = c['voitures-db'] # obtenir une collection ou la créer (~ table dans SQL) >>> mes_voitures = db['voitures'] # pour insérer un enregistrement >>> une_voiture = mes_voitures.insert({"name": "Audi","Id": 1,"Price": 52642}) Tue Nov 11 11:09: [FileAllocator] allocating new datafile /home/pef/bd/voitures-db.ns, Tue filling Nov 11 with 11:09: zeroes... [FileAllocator] creating directory /home/pef/bd/_tmp Tue 11 11:09: [FileAllocator] done allocating datafile /home/pef/bd/voituresdb.ns, Novsize: 11 11:09: MB, took[fileallocator] 0 secs allocating new datafile /home/pef/bd/voitures-db.0, Tue filling Tue Nov with 11 11:09: zeroes... [FileAllocator] done allocating datafile /home/pef/bd/voitures-db.0, Tue size: Nov16MB, 11 11:09: took 0 secs[conn1] build index voitures-db.voitures { _id: 1 } Tue Nov 11 11:09: [FileAllocator] allocating new datafile /home/pef/bd/voitures-db.1, Tue filling Nov 11 with 11:09: zeroes... [conn1] build index done. scanned 0 total records. 0 secs Tue Nov 11 11:09: [FileAllocator] done allocating datafile /home/pef/bd/voitures-db.1, >>> size: une_voiture 32MB, took 0 secs ObjectId('5461e048341e a746e') # toutes les collections de la BD >>> db.collection_names() [u'system.indexes', u'voitures'] # faire une requête >>> mes_voitures.find_one({"name" : "Audi"}) {u'price': 52642, u'_id': ObjectId('5461e048341e a746e'), u'name': u'audi', u'id': 1} # parcourir la liste des enregistrements de la collection (ou d'une requête) >>> for v in mes_voitures.find():... v... {u'price': 52642, u'_id': ObjectId('5461e048341e a746e'), u'name': u'audi', u'id': 1} # obtenir le nombre d'enregistrements de la collection (table) >>> mes_voitures.count() 1 # obtenir le nombre d'enregistrements d'une requête >>> mes_voitures.find().count() 1 # Pour passer d'un identifiant chaine de caractères vers ObjectId >>> from bson.objectid import ObjectId >>> rep_chaine = str(une_voiture) >>> rep_chaine '5461e048341e a746e' >>> ObjectId(rep_chaine) ObjectId('5461e048341e a746e') Resp. UE : P-F. Bonnefoi, «Réseaux avancés I TP nº4 filière ISICG» version du 7 novembre 2016, rédigé avec ConTEXt Don t Panic! 5/6

6 >>> mes_voitures.find_one({"_id": ObjectId(rep_chaine)}) {u'price': 52642, u'_id': ObjectId('5461e048341e a746e'), u'name': u'audi', u'id': 1} >>> Plus de détails peuvent être obtenus sur Travail demandé 1 Passage de SQL à NoSQL : a. Mettre en œuvre la version de l application basée sur SQLite. b. Adapter cette version à l utilisation de MongoDB à la place de SQLite. 2 Étendre le programme proposé pour permettre : a. l inclusion d une image pour chaque voiture ; b. l affichage du prix de la voiture dans l interface ; c. un bouton de réservation avec une mise à jour de la BD et de l interface. Resp. UE : P-F. Bonnefoi, «Réseaux avancés I TP nº4 filière ISICG» version du 7 novembre 2016, rédigé avec ConTEXt Don t Panic! 6/6