RÉALISATION D’UN AFFICHAGE DYNAMIQUE INFORMATIF Rapport de projet tutoré Dut Services et Réseaux de Communication Année 2013-2014 LE PROJET Etudiants Clara RIGAUD Simon HARDOUINEAU Clément LECLERE Jean-Marie CART-LAMY Nicolas RIGAL Commanditaire Sylvain MACHEFERT, ingénieur d’études à la bibliothèque universitaire Bordeaux III Tuteur Hélène MILLARET, enseignante en DUT Services et Réseaux de Communication Date de soutenance du projet 27 janvier 2014 Description du projet Ce projet consiste en l’élaboration d’un affichage dynamique informatif pour la bibliothèque universitaire de l’université Michel de Montaigne. L’objectif est de concevoir une application qui à terme sera autonome et affichera différents types d’informations issues de données libres. SOMMAIRE Analyse et conception Cahier des charges Problématique État de l’art Gestion de projet Outils logiciels utilisés Communication avec notre commanditaire Le projet, techniquement Réponses aux problématiques globales Choix du langage Définition du périmètre de données Choix des sources des données Facilitation de l’ajout de livres Développement et intégration de l’affichage Récupération, traitement et mise en forme de données Rafraîchissement de données Optimisation du temps de chargement et correction des bugs Organisation des dossiers Affichage d’informations Animation Mise en place sur Raspberry Pi Installation d’un système d’exploitation adapté Mise en place d’un serveur Apache Paramétrages pour l’exécution de l’application au démarrage Le projet, humainement Répartir les tâches selon les affinités et les compétences Préserver une dynamique globale sur la durée du projet S’épanouir individuellement Conclusion ANALYSE ET CONCEPTION Cahier des charges Contexte La bibliothèque universitaire de Bordeaux 3 aimerait mettre en place un système d'affichage à l'aide d'un écran plat installé à l'entrée du bâtiment pour diffuser des informations dynamiques : - informations liées à la BU comme une présentation des nouveautés par exemple à partir de données issues de Babord+ informations pratiques généralistes : prochains trams à l'arrêt de l'université, état station Vcub campus, météo … Le bâtiment destiné à accueillir cet écran est techniquement compliqué et il ne serait pas possible de relier directement l'écran au réseau, l'idée est donc de rendre les choses autonomes en installant un écran combiné à un Raspberry Pi qui à partir d'une source électrique pourrait fonctionner (connexion wifi). Objectifs à atteindre d’ici fin janvier Avoir un prototype fonctionnel sur un Raspberry pi et définir si la solution est viable et si la bibliothèque universitaire peut concrétiser le projet (acquisition d'un écran dédié, installation …). Description des principales tâches du projet : - Précision du périmètre (données à afficher) Étude des possibilités techniques : utilisation d'une solution de diffusion open source existante ou développement d'un outil « from scratch » Choix de la meilleure solution en accord avec le commanditaire Mise en œuvre sur un raspberry pi fourni par la BU Impératifs et/ou contraintes techniques Les contraintes techniques dépendront des sources de données choisies (utilisation des web services de la CUB, webscraping pour Babord+ a priori …) Ce projet est avant tout une étude destinée à valider pour la bibliothèque universitaire l'intérêt d'investir dans un écran et de faire réaliser les travaux d'installation, la bibliothèque n'a donc pour le moment pas réservé de budget. Par conséquent seuls seront fournis les éléments de base liés au raspberry pi (carte SD, câble d'alimentation, clavier, souris). L'écran n'ayant pas été acheté pour le moment le groupe en charge du projet devra avoir accès à un écran de test (Résolution de 1920 x 1080 sur les écrans d'affichage vus pour le moment, mais on reste dans une proof of concept) Problématiques - Choisir le langage adapté pour la création de l’interface et l’affichage des données Définir le périmètre des données à afficher Choisir la source des données Faciliter l’ajout de nouveaux arrivages de livres État de l’art Les panneaux d’affichage non-interactifs peuvent être statiques ou dynamiques. Les affichages statiques, au même titre que les sites WEB statiques offrent un contenu inchangé à l’inverse des affichages dynamique dont les informations sont actualisées de manière automatique. La technologie dynamique est désormais la plus utilisée car elle offre une autonomie et un retour sur investissement en moyenne plus importants lors d’usages marketings. Dans le cas d’usages commerciaux, on observe des animations très rapides pour des contenus très brefs et différentes pages, le but est d’attirer le regard du potentiel client. Notre cas n’étant pas commercial, il ne doit pas être trop intrusif pour rester en accord avec un cadre de travail tel qu’une bibliothèque. Il existe de plus des panneaux d’affichage dynamique modulaires. Dans ce cas, le code, l’affichage ou les deux sont architecturés en blocs indépendants. Cela permet une mise à jour simplifiée si l’utilisation du panneau d’affichage venait à évoluer. GESTION DE PROJET Outils logiciels utilisés Github nous permet de partager du code et de gérer les différentes versions d’un projet en cours de développement. A l’aide du logiciel Github ou de lignes de commande, il est possible de récupérer une version d’un projet ou d’envoyer des modifications du projet. Cet outil a donc été particulièrement pratique dans notre projet puisque nous étions quatre à travailler sur un même projet, il nous était donc possible de travailler en simultané sur les mêmes fichiers, de voir les différentes modifications effectuées par les autres membres du groupe et de revenir en arrière si nécessaire. https://github.com/jmcartlamy/dashboard_php5 Communication avec notre commanditaire Durant la totalité du projet, nous sommes restés en contact avec notre commanditaire l’informant quotidiennement de nos avancées sur le projet, nos difficultés, nos prévisions pour les prochaines séances. Ce fut une chance de pouvoir travailler avec un professionnel de notre domaine avec qui nous avons pu exposer des problèmes assez techniques et qui, en plus d’être très à l’écoute, nous a parfois aiguillés sur certains points. LE PROJET, TECHNIQUEMENT Répondre aux problématiques globales Choix du langage Dans le brief reçu, il nous était conseillé d’utiliser Dashing un framework Ruby, un langage que personne n’avait vraiment utilisé dans l’équipe. Nous étions cependant motivés par l’apprentissage de ce langage au travers de ce projet et nous avons ainsi passé quelques séances à travailler dessus. Mais notre manque d’expérience nous a vite ralenti et démotivé et nous en sommes venu à remettre en question notre choix initial de langage. Lors d’une séance où était présente l’intervenante en gestion de projet Agile, Mme. Doan, cette dernière nous a conseillé de trancher rapidement et d’arrêter de perdre du temps dans notre hésitation. Nous avons donc choisi de passer sur du PHP que l’équipe connaissait mieux et cela nous a permis de nous relancer dans le projet plus efficacement. Périmètre des données à afficher Données en temps réel à afficher : - Jour/heure Horaires, état et informations de l’arrêt de Tram “Montaigne Montesquieu” ligne B Informations diffusées sur la ligne B Horaires et numéro de la ligne de bus de l’arrêt de bus le plus proche de la BU Nombre de vélos restant sur la Station VCub la plus proche de la BU Flux d’actualités du site de l’Université bordeaux 3 Temps et température du jour et des jours à venir Nouveaux livres disponibles de la bibliothèque Choix des sources de données TBC La compagnie TBC offre les horaires fixes de ses trams et de ses bus. Nous avions prévu l’affichage des données de bus mais ces dernières étaient inexploitables (la représentation des données étaient inadaptées aux technologies utilisées). VCub Le nombre de VCub disponibles à la station de la BU était lui disponible et exploitable. Pour accéder à ces données, on a utilisé l’open data offerte par la CUB. Babord+ Pour Babord+, il a fallu aller chercher les informations dans les notices disponibles sur le site Babord+ à l’aide des différents codes barre. On a ensuite pu découper les informations trouvées sur les pages pour les utiliser dans notre interface. L’ajout sera effectué par du personnel bibliothécaire grâce à une interface d’ajout/suppression dans la base de données utilisée pour l’affichage. Météo Pour la météo, on a utilisé de l’open data fournie par Yahoo. Ces données sont préparées pour s’adapter à tous les cas de climat et nous les avons donc remises en forme en accord avec notre interface et notre contexte (suppression des représentations de tornades par exemple). Facilitation de l’ajout de livres Pour permettre un ajout facile des codes-barres des livres, nous avons développé une petite interface très simplifiée permettant uniquement l’ajout ou la suppression des livres (par le biais de leur code barre). Cette interface permettra de gérer facilement la base de données contenant les livres défilant sur l’interface. Développement et intégration de l’affichage Récupération, traitement et mise en forme de données La majeure partie du processus de développement a consisté en l’implémentation de données issues de différentes sources. Selon ces sources et leur type, nous avons cherché les solutions les plus adaptées. Actualités de l’université Michel de Montaigne Source des données: http://www.ubordeaux3.fr/_plugins/web/www/fr/filter/org.ametys.web.new.www.RSS /rss.xml Type de données : flux RSS (xml) Solution : Objet php “DOMDocument();” permettant de chercher les éléments par intitulé de balise. Difficulté rencontrée: La source de données des actualités est assez accessible et il ne fut pas très difficile d’en extraire le contenu dès que le principe du DOMDocument fut compris. Horaires des trams, donnés de Tbc Source des données : Fichier exporté de la base de données de Tbc répertoriant l’ensemble des horaires des arrêts de Tram des lignes du service Tbc. Type de données : Texte (.txt) Solution : Objet php “explode()” permettant de segmenter les données et de récupérer que les éléments souhaités Difficulté rencontrée: Pour déterminer quel était le numéro d’arrêt de Tram associé à l’arrêt de tram “Michel de Montaigne”, il a fallu rechercher l’information sur toute la base de données exportée en fichier .txt Meteo YahooMeteo Source des données: http://weather.yahooapis.com/forecastrss?w=580778&u=c Type de données : XML Solution : DOMDocument(); DOMXpath(); Difficulté rencontrée: Certaines données étaient contenues dans des espaces de nom (namespaces), qui nous étaient un peu inconnus jusqu’alors. Il nous fallu ainsi quelque temps pour en comprendre le principe et trouver la fonction “DOMXpath();” qui permet d’effectuer des requêtes auprès des namespaces et en obtenir le noyau. Pour le traitement des données, nous avons réorganisé l’ensemble des types de conditions météorologiques en fonction de leur probabilité d’apparition en climat tempéré. Derniers arrivages sur Babord + Source des données: A l’aide des codes-barres enregistrés dans une base de données en ligne, on peut trouver les notices des différents ouvrages correspondants à ces codes-barres sur le site http://babordplus.univ-bordeaux.fr/ . Type de données : Page web HTML Solution :DOMdocument Difficulté rencontrée: La page HTML était relativement facile à récupérer, il suffisait d’insérer le code barre dans l’URL adaptée pour arriver à obtenir la page contenant la totalité des informations sur le livre ciblé. Le nom du livre et de l’auteur ont eux aussi été facile à obtenir car clairement identifiés par des classes. Cependant pour l’image, il a fallu procéder à des tests pour sélectionner uniquement l’image de couverture et non pas les images utilisées comme icones. Nombre de vélos VCub restant Source des données: http://data.lacub.fr/wfs?key=BOB2RNI0JK&REQUEST=GetFeature&SERVICE=WFS&SR SNAME=EPSG%3A3945&TYPENAME=CI_VCUB_P&VERSION=1.1.0 Filtre associé au lien : &Filter=%3CFilter%3E%3CPropertyIsEqualTo%3E%3CPropertyName%3EGID%3C%2 FPropertyName%3E%3CLiteral%3E16%3C%2FLiteral%3E%3C%2FPropertyIsEqualTo %3E%3C%2FFilter%3E Type de données : Données VCub pré-filtré (xml) Solution : DOMDocument(); DOMXpath(); Difficulté rencontrée: Comme pour la météo, nous avons eu recours au DOMXpath pour récupérer les données dans les espaces de nom (namespaces). Chacune des données fut mise en forme de manière à être utilisée individuellement et appelée proprement dans un objectif de maintenance et de mise à jour. Rafraîchissement de données Pour rafraichir l’ensemble des données de temps réel, nous avons procédé à des appels de fichiers PHP via la fonction Ajax offerte par JQuery et très facile d’utilisation une fois le concept compris. Cela permet le rafraichissement de manière individuelle et à intervalle variable selon les modules sans rafraichissement global de l’application. Un plus en termes de fluidité de l’affichage et dans l’autonomie de l’ensemble. Le fichier contenant les nouveaux livres n’est actualisé qu’une fois tous les jours pour permettre d’afficher les nouveaux arrivages mais il est inutile de le faire plus souvent et cela pourrait alourdir le fonctionnement. Par contre, le fichier concernant les actualités est rafraichit toutes les heures pour permettre l’arrivée régulière de nouvelles actualités. Optimisation du temps de chargement et correction des bugs A l’issue des étapes de développement et d’intégration, nous avons constaté un temps de chargement relativement long au lancement initial du logiciel mais aussi lors du rafraichissement de certaines données. En dehors des données de VCub qui se doivent être en temps réel et donc rafraichies toutes les minutes au minimum, l’ensemble des données peuvent être rechargées à intervalles plus longs. Nous avons ainsi procédé à une modification du code pour les actualités ainsi que pour Babord+ pour ne plus envoyer une requête HTTP à chaque fin de boucle. Nous avons donc choisi de stocker les données dans des fichiers cache que nous actualisons désormais une fois par heure pour les actualités et une fois par jour pour les nouveaux arrivages de livre. Cette solution est très effective. Les données de VCub nous posent aussi problème car le temps de réponse excède parfois les 30 secondes, engendrant une erreur assez régulièrement. Ces données ne pouvant pas être stockées en cache, la seule solution que nous avons pu appliquer est une gestion des erreurs avec renvoi de valeur par défaut si la requête n’a pas abouti au bout des 30 secondes imposées par PHP. Organisation des dossiers Nous avons essayé, pour garantir une maintenance simple du logiciel, de suivre une architecture du type MVC. Nous avons ainsi séparé chacun des modules et ses fonctions relatives dans des dossiers propres. Nous pensons important de faciliter la compréhension de l’architecture et les éventuelles modifications. Affichage d’informations Designer un affichage sur écran implique une taille de police suffisante de manière à être lisible de loin. Nous avons donc opté pour la police commerciale libre “Open Sans ” dans sa déclinaison “light” en 12pt. Les modules étant de formes géométriques et dénués d’élément graphiques, nous avons choisi de baisser leurs opacités à 75% pour entrevoir l’illustration de fond en transparence. En dessous de cette valeur, la lisibilité devenait plus difficile. On notera que les photographies du fond et du diaporama sont facilement modifiables. Animation Nous avons ajouté quelques animations lors du rafraichissement de chacune des données. JQuery était la solution la plus logique, et plus légère en terme de développement d’autant plus que des fonctions .ajax(); existaient déjà. Mise en place sur Raspberry Pi Installation d’un système d’exploitation adapté Dans le cadre de notre projet, le panneau d’affichage devait être implanté dans un Raspberry Pi (jouant le rôle de serveur) que l’on pourrait dissimuler derrière un écran par exemple. Le Raspberry Pi est donc le système idéal pour les projets de ce type qui n’ont qu’une fonction principale et qui se veulent autonomes. Le système d’exploitation retenu est Raspbian (Debian pour Raspberry). Celui-ci est léger, très fonctionnel et doté d’une communauté et d’un support très actifs. Ainsi, dans un souci d’apprentissage, nous avons décidé qu’il était la meilleure option disponible pour notre projet. En effet, aucun frein technologique ne pouvait entraver notre projet en utilisant Raspbian. Mise en place d’un serveur apache Pour installer un serveur Apache sur le système d’exploitation Raspbian, il a fallu utiliser le terminal que nous connaissons peu. Cependant, l’utilisation de ce dernier est relativement simple et des tutoriels sont disponibles sur internet. L’installation a donc été grandement facilitée puisque quelques commandes suffisent à installer toutes les dépendances nécessaires à l’exécution de notre interface (Apache, Mysql, PHP). La ligne de commande suivante permettait d’installer ces dépendances : “sudo apt-get install apache2 php5 mysql-server libapache2mod-php5 php5-mysql”. Paramétrages pour l’exécution de l’application au démarrage Pour lancer l’exécution dès le démarrage du Raspberry Pi, il a fallu mettre l’interface comme page par défaut dans le navigateur et programmer le lancement automatique de ce dernier au démarrage. Ainsi, lors du démarrage du Raspberry, un navigateur web s’ouvre avec l’interface lancée et fonctionnelle. LE PROJET, HUMAINEMENT Répartir les tâches selon les affinités et les compétences Au début du projet, nous avons procédé à une “répartition des tâches”. Il fallait des personnes en développement, en intégration et design ainsi qu’en gestion du projet. Nous avons estimé que la tâche demandant le plus de ressources humaines était le développement, nous avons donc assigné trois personnes à cette tâche (Clara, JeanMarie et Simon). Ces trois personnes ont un profil développeur et sont donc à l’aise dans ce travail. Clément s’est occupé de la maquette étant donné qu’il est plus à l’aise dans le design. Il a ensuite travaillé sur l’intégration dans lequel il possédait quelques compétences et ce projet lui a permis de s’améliorer. Préserver une dynamique globale sur la durée du projet Travailler a plusieurs sur un projet d’une telle ampleur est un exercice difficile et aucun de nous n’avait vraiment vécu l’expérience. Par chance, la plupart d’entre nous étaient intéressé par ce qu’il faisait et manifestait une bonne implication dans son œuvre. Savoir tenir une rigueur sur un engagement de long terme n’est pas toujours chose facile et il suffit d’un manque de communication entre les membres pour que l’un d’eux se sente moins impliqué et tende à perdre le fil. S’épanouir individuellement Clara « Je suis vraiment contente d’avoir participé à ce projet dans lequel je me suis pleinement investie et qui m’a tenu à cœur du début jusqu’à la fin. J’ai beaucoup progressé en développement php et JQuery et ça m’a permis de prendre conscience que j’aime plutôt ça et qu’il me faut plus de projets ! J’ai aussi beaucoup appris humainement, et par chance je bossais avec des types vraiment supers ! :) » Simon « Ce projet a été vraiment intéressant puisqu’il nous a permis de manipuler un éventail de langages complet : php pour le traitement et l’affichage des informations, Ajax pour permettre le rafraichissement et JS/jQuery pour les animer. Cela m’a permis de progresser dans ces langages et dans leurs interactions. De plus, le fait que le projet soit concret et puisse mener à une utilisation par la suite rend l’expérience beaucoup plus intéressante. » Clément « Je suis très heureux d’avoir eu ce projet qui était mon premier vœu. En effet, celui-ci nécessitais une multitude de compétences diverses, j’étais curieux de voir comment celles-ci allais converger et je n’ai pas été déçu. En effet les membres de mon groupe étaient motivés et l’entraide était de rigueur. De plus j’ai acquis de nouvelles compétences en intégration et en gestion de projet, sur le plan technique et humain. Cela restera un bon souvenir de travail d’équipe sur un bon projet. » Jean-Marie « Ce projet a été l’un des plus intéressants à faire. Réelle demande d’un client, il a permis de motiver le groupe pour sortir le prototype à temps et voir un jour concrétiser le projet. L’utilisation et le traitement des données comme celles de l’Open Data de La Cub a été la partie la plus passionnante. Non seulement, elles m’ont permis de les traiter avec différentes méthodes que je ne connaissais pas jusqu’à là en fonction du type de donnée, mais elles m’ont surtout permis d’approfondir mes connaissances au langage PHP et par la suite d’apprendre les rudiments l’Ajax pour les voir se rafraichir en temps réel. » Remerciements : Sylvain Machefert : pour avoir proposé un projet aussi intéressant, être resté à l’écoute et nous avoir assistés tout au long du projet. Les informaticiens de l’IUT : pour avoir répondu à nos questions et fourni du matériel pour la réalisation de notre projet. Rémi Honoré et Simon Lelièvre : pour nous avoir prêté des clés wifi nécessaires à l’aboutissement de notre projet.
