Unifier les réseaux de transports d'un territoire avec Drupal

Le Syndicat Mixte des Transports Collectifs de l’Oise regroupe l’ensemble des acteurs de la mobilité du département de l’Oise, soit 17 collectivités locales ayant leur propre réseau de transport. Pour n’en citer que quelques-unes : la région Hauts-de-France, le département de l’Oise, la communauté d'agglomération du Beauvais, de Creil Sud Oise…

Leurs missions :

• Coordonner les services de transport pour favoriser l’intermodalité des usagers ;
• Favoriser la création d’une tarification coordonnée et de titres de transport uniques ;
• Mettre en place un système d’information multimodal commun.

En 2010, le syndicat s’est doté d’un système d’information innovant sous le nom de marque Oise Mobilité. Son but ? Répondre aux enjeux de mobilité du territoire et favoriser l’usage combiné des différents modes de transport alternatifs à la voiture (bus, train, vélo, marche, covoiturage…). Plus précisément, il s’agit d’un site combinant :

• Information voyageurs multimodale en temps réel ;
• Recherche d’itinéraires (feuille de route détaillée, prix du trajet) ;
• Billettique commune aux différents réseaux de transports ;
• La réservation de transports à la demande ;
• Un espace personnel qui permet l’enregistrement des lieux, parcours favoris et l’abonnement aux alertes perturbations. 

Cityway est une société spécialisée dans la mobilité servicielle (MaaS). Elle fournit un service numérique qui permet aux utilisateurs de planifier, réserver et payer leur transport de manière unifiée. Elle a par conséquent pris en charge les widgets de calcul d'itinéraires, de recherche des horaires et de billetterie en ligne. Notre expérience commune sur la refonte du site de la Régie des Transports de la Métropole de Nice nous avait déjà permis de poser les jalons d’une démarche de travail conjointe. Ce sur quoi nous pouvons désormais capitaliser pour répondre efficacement à d’autres projets de plateformes de transports.

Cityway : 
Mise à disposition de solutions de gestion des itinéraires, des horaires, des informations voyageurs, de la boutique en ligne, etc. Ces solutions ont été fournies à notre équipe sous forme de composants Angular à intégrer dans Drupal.

Agence bluedrop.fr : 
Conception UX et UI design, déploiement et configuration du CMS Drupal, intégration des composants Angular fournis par Cityway, des connecteurs aux données de transports, hébergement et maintenance.

Une attention particulière a été portée sur l’accessibilité : lisibilité du texte, contrastes, cohérence des espacements, clarté des composants.

Pour cela, nous nous sommes appuyés sur le RGAA, le référentiel d’accessibilité de l'État. Pour déployer les bonnes pratiques d'accessibilité, nous nous aidons également d'AcceDe Web, de Design Accessible et de Stark, un plugin Figma de contrôle de l'accessibilité des maquettes.

À ce titre, nous avons retravaillé légèrement la couleur orange issue de la charte graphique d’origine pour ajouter du contraste et donc améliorer sa visibilité. L'effort d’accessibilité s’est également effectué au niveau du développement. Il nous a permis d'atteindre un seuil d’accessibilité de 96% de conformité au RGAA.

• Pages éditoriales enrichies par des paragraphes ;
• Rubrique Actualités  ;
• Développement d'un assistant tarifaire ;
• Mise à disposition d'un compte usager ;
• Theming et intégration des composants Angular utilisés pour le système billettique, les itinéraires, l’information en temps réel et la topologie des lignes de bus, trams et trains.

Le core de Drupal a couvert :

• La gestion des contributeurs et le workflow de publication ;
• La prise en charge du multilinguisme (français et anglais) ;
• La gestion de la médiathèque intégrée (par l'intermédiaire du module media du core).

Nous y avons ajouté des modules permettant d’assurer plusieurs fonctions :

• L’affichage des médias (vidéos, carrousels, diaporamas) ;
• Le partage sur les réseaux sociaux et l’affichage de flux ;
• Les optimisations en référencement naturel (SEO, dont Google Analytics et Google Tag Manager) ;
• Les outils d'aide à la personnalisation du contenu tels que le module Paragraphs et le module Layout Paragraph.

Forts de notre expérience avec la Régie des Transports de la Métropole de Marseille en matière de gestion des pics de trafic (grèves, incidents sur le réseau), nous avons proposé une architecture similaire.

Pour rappel, nous avions expérimenté l’intégration de composants métiers développés avec le framework Javascript VueJS. Ainsi, les appels vers les différents webservices (recherche d’itinéraires, plans, etc.) ne sont pas réalisés côté serveur par le CMS Drupal, mais côté client par les composants VueJS.

Cette approche permet d’avoir un site 100% statique grâce à une mise en cache du contenu HTML servi par le CMS via Varnish. Ce faisant, le site devient résilient en cas de pics de trafic et plus réactif.

Dans le cadre du projet, cette même approche a été retenue en utilisant Angular à la place de VueJS comme c’était déjà le cas lors de la refonte du site  de la Régie des Lignes d'Azur pour la Métropole de Nice.

De plus, l'intégration dans Drupal des composants "métiers" fournis par Cityway a respecté la logique du découplage progressif.

Le site est en production depuis le 10 juillet 2023. Nous tenons à remercier l'ensemble des équipes de Cityway et du Syndicat de l’Oise pour leur travail acharné et leur coopération.

Mise en production : 10/07/2023
URL du site : https://www.oise-mobilite.fr/

Grande nouvelle ! Oise Mobilité se réinvente ! Oise Mobilité fait peau neuve avec un nouveau logo et de nombreux services améliorés dès la rentrée prochaine ! #Oise #HautsdeFrance pic.twitter.com/5rB2rs4Agr

— oise mobilite (@oise_mobilite) June 19, 2023