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&SRSNAME=EPSG%3A3945&TYPENAME=CI_VCUB_P&VERSION=1.1.0 Filtre associé au lien : &Filter=%3CFilter%3E%3CPropertyIsEqualTo%3E%3CPropertyName%3EGID%3C%2FPropertyName%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 libapache2-mod-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, Jean-Marie 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.