developer_guide A propos

Le code source du projet est disponible sur Github via 2 repositories : le site web PHP et le script permettant de filtrer et d'insérer les données CSV dans la base SQL. Contact : cockpit.io.troyes@gmail.com.

Cadre du projet

Ce projet web a été réalisé dans le cadre d’un module d’évaluation à l’IUT de Troyes, au sein du département des Métiers du Multimédia et de l’Internet (MMI). Le projet répond également à un des défis de data.gouv.fr (manipulation de données open data) ; le sujet choisi a été le "tourisme en train" (proposé par la Fondation SNCF). Notre objectif : redonner le goût pour la culture tout en encourageant la mobilité en train.

Equipe

Cockpit.io a été réalisé par une équipe de 4 étudiants. Ulysse Pennetier (conception back-end, API, design et intégration frontend, interactivité du cockpit), Valentin Babic (conception du front-end statique), Tristan Legrand (manipulation de graphiques) et Thomas Hervet (manipulation de graphiques).

Notre méthodologie

Origine des données

Les données analysées proviennent de datasets issus de l’open data. Deux d’entre eux ont été mis à contribution dans ce projet : les gares de voyageurs en France (SNCF, 2.769 entrées) ainsi que la base des lieux et équipements culturels (Ministère de la Culture, 88.037 entrées).

Traitement des données

Les datasets, initialement en format XLXS et/ou CSV, ont été entrés dans une base de données SQL, afin de pouvoir construire une API propre et de proposer des requêtes HTTP fluides.

Les données ont été nettoyées avant leur entrée en base de données. Ainsi, les stations (gares) comportent 5 champs (initialement 6) : id, name, latitude, longitude, postal_code. Les places (lieux culturels) en comportent 11 (initialement 55) : id, name, address, postal_code, type, label, attitude, longitude, region_code, departement_code.

Cependant, parmi les quelques 88.000 lieux et équipements culturels, beaucoup ne sont pas pertinents pour les utilisateurs de notre projet. Nous avons donc décidé de créer un algorithme de tri : nous avons éliminé certaines catégories de lieux (par exemple les établissements d’enseignement supérieurs et les librairies) et filtré le nom des lieux appartenants à la catégorie "monument" via un système de mots clés (par exemple, les éléments contenant dans leur nom "cathédrale", "citadelle", "phare" ou encore "beffroi" sont gardés d’emblée, tandis que ceux contenant par exemple "fontaine", "cimetière", "puit" ou encore "borne" sont éliminés).

Au final, grâce à un script PHP réalisant ces actions, nous avons conservé environ 16.000 lieux culturels jugés pertinents.

Elaboration du back-end

Cockpit.io repose sur une structure back-end MVC, programmée en PHP. La base de donnée est basée sur Mysql et est servie grâce à la page cockpit.io/api (la documentation de l’API est présente sur la page). Le projet utilise l’ORM illuminate (de Laravel) et est fortement typé POO (router, controllers, repositories).

Elaboration du front-end

Le front-end ainsi que l’intégralité des assets (images, JS) sont servis depuis le dossier public du projet. Le style a été programmé en SCSS afin d’accélérer le développement. Le code JS est de type module et les requêtes à l’API sont faites grâce à fetch.

Elaboration du cockpit interactif

Le cockpit interactif utilise la bibliothèque JS Leaflet pour la carte interactive, et d3js pour les graphiques (utilisé également sur la page cockpit.io/data). Les images utilisées pour illustrer les sites culturels proviennent de l’API de Wikimedia (accès libre à l’API). A noter que les tuiles de la carte interactive proviennent de la carte Pioneer de Thunderforest.

Futurs axes d’amélioration

Cockpit.io a été élaboré selon une contrainte de temps de deux semaines, dont trois jours à temps complet. Par conséquent, un grand nombre d’éléments n’ont pas pu être réalisés. Voici une liste exhaustive des axes d’amélioration possibles :

  • Gamification du cockpit : faire défiler le paysage et les rails via une vidéo en boucle. Inclure des sons d'ambiance. Rendre fonctionnel les boutons et la manette située au milieu du tableau de bord (afin de permettre à l’utilisateur de régler la vitesse du train ou encore d’émettre un bruit de klaxon).
  • Expérience utilisateur : barre de recherche sur la carte interactive. Possibilité d’afficher un historique des gares visitées.
  • Filtrage des données : améliorer l’algorithme de sélection des lieux culturels pertinents.
  • Accessibilité : ajouter un mode sombre.