Mise en production du site de la Régie des transports de la Métropole de Nice avec Drupal 9 et Angular

Photo d'un bus du réseau de la Métropole de Nice
Suite à de longs mois de conception et de développement, nous sommes heureux de célébrer la mise en production du site de notre seconde régie de transport collectif. Après Marseille, place à Nice qui dispose désormais d'une plateforme propulsée par Drupal et Angular.

La collaboration bluedrop.fr / Cityway

Premier projet du partenariat entre notre agence et Cityway, expert de solutions numériques MAAS (Mobility as a Service), la refonte du site de la Régie des Transports de la Métropole de Nice a permis de rassembler : 

  • L'expertise de Cityway en matière de fourniture de solutions numériques de transport ;
  • L'expertise de l'agence bluedrop.fr en matière d'UX, d'UI et de développement Drupal.

Au-delà du projet de refonte du site des Lignes d'Azur, cette association doit permettre de proposer une démarche spécialisée pour répondre à d'autres projets de plateformes de transport à l'avenir.

L'agence bluedrop.fr et Drupal au service de votre mobilité, dans le cadre d'un projet MaaS d'envergure ! - 15 décembre 2020

Périmètres partagés

Agence bluedrop.fr : Conception UX, Conception UI, déploiement et configuration du CMS Drupal 9, développement de la e-boutique, des connecteurs aux données de transports, hébergement et maintenance.
Cityway : Mise à disposition de solutions de gestion des itinéraires, des horaires, des informations voyageurs, de l'information en temps réel, etc.

Conception UX

Notre équipe de conception a conduit et encadré la conception UX, par l'intermédiaire d'ateliers, pour proposer les différents parcours nécessaires à l'efficacité de l'expérience. Les prototypes ont ensuite été testés et validés par un panel d'utilisateurs. Principaux ateliers réalisés :

Atelier de planification / exploration 

  • Atelier d'analyse des statistiques ;
  • Entretiens utilisateurs ;
  • Focus Group.

Ateliers d'idéation

  • Atelier Personas ;
  • Atelier de conception des parcours utilisateurs/Experience map ;
  • Atelier de définition de l'arborescence (tri de carte) ;
  • Design studio​.

Ateliers de génération puis présentation des parcours utilisateurs (en insistant sur la e-boutique)

  • Atelier de présentation des parcours utilisateurs par l'intermédiaire de logigrammes ;
  • Atelier de présentation des wireframes ;
  • Ateliers de tests utilisateurs

Conception UI

La conception UI s'est appliquée à intégrer la charte graphique de la Régie des Lignes d'azur en insistant :

  • Sur la légèreté de l'utilisation des couleurs pour ne pas surcharger l'interface et ne pas gêner la navigation ;
  • Sur l'utilisation d'illustrations en flat design pour personnifier l'expérience ;
  • Sur la mise en valeur des blocs (décrochés / décalés) pour créer une impression de second plan et pouvoir insister sur les informations importantes ;
  • Sur la démarche "Mobile First" compte tenu des usages du site (menu en bas de page, affichage des alertes trafic, utilisation de défilement horizontal pour éviter un défilement vertical trop long).

Architecture générale - Drupal 9 / Angular / Varnish

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

Si Cityway se concentre sur le développement des applications métier (API, traitement des flux de données, de la topologie, de l’information voyageur...), nous avons pris soin de séparer complètement les URL du site public à destination des utilisateurs anonymes des URL recevant le trafic authentifié (backend, espace client). Le cache Varnish peut ainsi être plus simplement déployé sur la partie anonyme du site.

D'autre part, l'intégration dans Drupal des composants "métiers" fournis par Cityway a respecté la logique du découplage progressif précisé dans un précédent post du blog

Périmètre technique couvert par Cityway : 

  • Calculateur d’itinéraires ;
  • Recherche des horaires, lignes et stations ;
  • Compte utilisateur ;
  • Information voyageur (alertes trafics) ;
  • Transport à la demande.

Cityway nous a livré des composants Angular à intégrer dans Drupal. Ces composants sont en relation avec les APIs et différents applicatifs métiers. 

Périmètre technique couvert par l'agence bluedrop.fr :

  • Pages éditoriales enrichies par des paragraphes (FAQ, mentions légales, qui-sommes-nous…);
  • Rubrique Actualités ;
  • Boutique en ligne (achat de billets et cartes de transport) en coopération avec Cityway sur une solution Atlas / Conduent ;
  • Développement d'un assistant tarifaire ;
  • Mise à disposition d'une solution d'envoi de Newsletters directement dans le back-office Drupal (Mailjet) ;
  • Theming et intégration des composants Angular.

Gestion éditoriale - Drupal 9

Le core de Drupal a rempli sa mission pour couvrir  :

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

De nombreux modules contribués ont pris en charge :

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

Le défi des pics de trafic et le découplage progressif avec Angular

Pour rappel, nous avons déjà expérimenté avec succès l’intégration de composants métiers développés avec le framework Javascript VueJS dans le cadre du projet de refonte du site de la RTM. 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. Le site RTM devient donc résilient en cas de pics de trafic, il est également plus réactif.

D'un autre côté, le contenu propre à chaque utilisateur ne transite pas par Drupal, mais par VueJS et des APIs tierces.

Cette approche a été retenue dans le cadre du projet de refonte du site des Lignes d'Azur, en utilisant Angular à la place de VueJS.

Développement coopératif

L'un des défis majeurs, au niveau méthodologique, a été de garantir le travail collaboratif entre les deux équipes. Nous avons préconisé d’exploiter les possibilités offertes par la gestion de dépendances de NodeJS (npm ou yarn) via le fichier package.json. Cityway a maintenu un dépôt privé auquel l'agence bluedrop.fr a eu accès pour récupérer les composants AngularJS comme on récupère les dépendances habituelles d’un projet via npm install.

Un versioning sémantique des composants Angular a permis à l'agence bluedrop.fr de s’assurer de la compatibilité d’une mise à jour avec les règles CSS en cours.

Intégration dans Drupal et gestion des assets

Nous avons dû anticiper le fait que le nombre et le périmètre fonctionnel des composants Angular impliqueraient très probablement des mégaoctets de ressources JS/CSS à récupérer pour les navigateurs. Pour répondre à nos engagements en matière de performances, nous nous sommes assurés que :

  • Lorsque l’internaute se connecte à une page du site, il ne charge en premier lieu et de manière non bloquante que les composants nécessaires à l’affichage de la page ;
  • Lorsque la page est chargée, les autres composants soient préchargés en tâche de fond s’il n’y a rien d’autre à faire ;
  • Les ressources JS et CSS soient minifiées et compressées ;
  • Les images soient optimisées et disponibles dans des formats actuels (ex : webp, avif) - des fallbacks sont mis en place pour les navigateurs ne les supportant pas ;
  • En fonction de leurs poids, certaines ressources (ex : SVG, icônes) puissent être insérées inline plutôt qu’en appels externes.

Afin de répondre à ce défi, nous avons choisi de préparer notre système de construction des assets CSS/JS avec webpack.

Enfin, si CTW utilise Angular, alors autant limiter l’appel à d’autres frameworks ou librairies pour ne pas charger d’autres dépendances pour si peu de choses.

Le résultat

Le site https://www.lignesdazur.com est en production depuis le 20 octobre 2021. Nous tenons à remercier l'ensemble des équipes de Cityway et de la Régie pour leur travail acharné et leur coopération.

URL : https://www.lignesdazur.com