Vie de l'agence
17/11/2023

De Drupal 7 à Drupal 10 : l’exemple de la mise à niveau du site IRP AUTO (irp-auto.com)

Photo illustrant 2 développeurs de l'équipe bluedrop.fr travaillant sur la mise à jour des modules Drupal 7
IRP AUTO nous a confié le chantier de mise à niveau de son site internet de Drupal 7 à Drupal 10. Un gap technologique qui améliore sa robustesse, sa sécurité, sa performance et sa maintenabilité. On vous décrit la procédure.
IRP AUTO est le groupe de protection sociale des services de l’automobile. Il accompagne les entreprises, artisans, salariés et retraités des services de l’automobile depuis plus de 70 ans. Il propose entre autres des services en matière de prévention, de retraite complémentaire, de prévoyance, de complémentaire santé, d’épargne salariale et d'action sociale.

Bénéficier des avancées technologiques offertes par Drupal 10

Le site www.irp-auto.com diffuse une multitude d’informations : les actualités du groupe, des articles, des vidéos, une foire aux questions, des sondages, des documents à consulter ou à télécharger. Il est à la fois un outil commercial et un outil d’information essentiel aux usagers. Il sert également de porte d’entrée vers les espaces sécurisés des utilisateurs.

Le groupe IRP AUTO, conscient de l’obsolescence inévitable de la version 7 de Drupal a souhaité, dans un premier temps, assainir et mettre à jour l’applicatif ainsi que les configurations des environnements d’exploitation (OS, php, apache et MariaDB).

Dans un premier temps, une mise à niveau “iso-fonctionnelle” du site vers Drupal 10 a été réalisée en profitant de la refonte du thème pour appliquer une légère amélioration des interfaces graphiques. Cette mise à niveau est aujourd’hui entrée en phase de TMA et le groupe IRP AUTO envisage à présent d’optimiser les parcours utilisateurs. 

Capture d'écran d'une page du site irp-auto.com (desktop)

Les fonctionnalités du site à conserver lors du passage à Drupal 10

Outre les informations présentées en introduction, le site propose principalement différents contenus informatifs ou interactifs :

  • Des sondages, pour une remontée d’opinion des internautes ;
  • Un module de partage sur les réseaux sociaux ou par email ;
  • Des services d’abonnements pour se tenir informé des dernières mises à jour ;
  • Des témoignages clients ;
  • Une bibliothèque des guides d’informations pratiques ;
  • Des formulaires avec des filtres de sélection thématiques.

Le site propose également plusieurs services :

  • Des services d'adhésions en ligne aux contrats santé avec signature électronique (Safran-Dictao) ;
  • Un service de web-call-back : assistance téléphonique avec rappel immédiat d’un conseiller (Linkéo).

Certaines fonctionnalités sont dédiées à l’accessibilité du site : 

  • Une fonction de zoom sur les textes pour un meilleur confort de lecture ;
  • Une lecture audio des articles (Readspeaker) ;
  • Une lecture dynamique des documents sous forme de magazine électronique (Flipbook).

Côté administration, ce site propose en outre :

  • Des outils statistiques pour suivre sa fréquentation ;
  • Des outils d’aide à la vente (simulateurs) et de transformation commerciale ;
  • Une gestion des droits contributeurs ;
  • Un workflow de contribution et planification des publications ;
  • Un outil de publication d'offres d'emploi, espace RH.
Capture de plusieurs écrans mobiles et bureau du site irp-auto.com

La méthodologie de mise à niveau Drupal 7 vers Drupal 10

Comme évoqué dans nos précédentes publications, la mise à niveau technique entre les versions 7 et 8/9/10 n’est pas techniquement envisageable. Les efforts de la communauté se sont orientés vers la mise à disposition d’un chemin de migration des contenus. Il convient par conséquent de réinstaller une instance Drupal 10 isolée.

Les grandes étapes du projet :

  • Initialisation du projet (récupération des sources, de la documentation et cartographie technique de IRP AUTO en version 7).
  • Audit technique du site Drupal 7 et rédaction de spécifications techniques à la suite de l'audit.
  • Déploiement d'une nouvelle instance Drupal 10 et import des contenus, des  utilisateurs, des fichiers et configurations.
  • Intégration responsive d’un nouveau thème Twig, moteur de templates intégré au CMS depuis sa version 8.
  • Reprise des URL et optimisations SEO.
  • Tests, contrôle qualité et recette.
  • Mise en exploitation du site en tenant compte des contraintes de déploiement (et du pipeline d'intégration continue).

Une phase d’audit indispensable

L’audit nous a permis de prendre en main le site Drupal 7, sa cartographie générale. Nous avons également analysé les librairies, le thème, les modules contribués et sur-mesure (versions, maintenabilité, portage...)

Concrètement, notre travail a consisté à :

  • Passer en revue le site actuel et dresser une liste de l'ensemble de son contenu, de ses caractéristiques et de ses fonctionnalités. 
  • Évaluer le contenu et les fonctionnalités actuels, en réfléchissant à ce qui doit être conservé tel quel sur le nouveau site, ou bien adapté ou abandonné.
  • Examiner le design/thème actuel.
  • Nous assurer que l'environnement d'hébergement est compatible avec Drupal 10.
  • Identifier les difficultés potentielles qui pourraient survenir lors de la mise à jour, tels que des modules incompatibles avec Drupal 10, ou abandonnés et non portés vers des versions supérieures à Drupal 7. En cas d’incompatibilité, nous avons dû proposer des modules alternatifs supportés en version 10.

Un nouveau look, différent mais pas trop

Nous avons profité de la reprise du thème pour y appliquer un "lifting” graphique. Sans changer la structure, nous nous sommes appuyés sur la charte graphique d’IRP AUTO pour proposer une version plus moderne, notamment avec des formes plus arrondies. Nous avons également mis à niveau la gestion des médias, notamment par l’utilisation de formats d’images nouvelle génération et de fichiers .svg chaque fois que c’était possible.

Interfaces du site www.irp-auto.com avant / après :

Capture d'écran - Ancien site IRP Auto - Drupal 7
Capture d'écran - Nouveau site IRP Auto - Drupal 10

Les étapes de la mise à niveau technique

Nous avons :

  • Installé une nouvelle instance Drupal 10 vierge.
  • Repris les configurations initiales du site (types de contenus, vues, rôles, champs, permissions…)
  • Mis à jour des modules contribués et sur-mesure sur la base de notre travail de recensement et d’analyse réalisé lors de l’audit.
  • Réalisé le portage des modules sur-mesure en version 10 (mise à jour du code pour Drupal 10.X et PHP 8.1.X et documentation des nouvelles configurations).

Reprise des contenus

Pour minimiser la perte de données, cette opération automatisée doit être lancée après avoir mis à jour toutes les fonctionnalités et les avoir rendues compatibles avec la version Drupal 10.

Le theming

Dans sa composition, Drupal 10 est très différent de Drupal 7 concernant le thème, la structure de fichiers et les appels au templates/HTML. Il est donc nécessaire de créer un nouveau thème. Certaines fonctionnalités, qui faisaient partie du thème dans la version Drupal 7 du site, ont été déplacées dans des modules sur-mesure Drupal 10 pour faciliter leur appel et leur utilisation. 

Le thème est désormais "plus propre". Un certain nombre de CSS et de JS dans les template.php ont été supprimés ou mis à jour.

Echantillon de composants UI mis jour :

Image proposant de visualiser un échantillon du design system réalisé à l'occasion de la reprise des interfaces du site irp-auto.com

Une logique d’intégration continue

En complément de notre pipeline CI/CD composé de Jenkins, PhpStan et SonarQube, nous avons appréhendé les procédures de déploiement internes au groupe IRP AUTO, sur Azur DevOps.

L’équipe de développement a progressivement poussé des packages de codes sur SonarCloud pour les faire analyser et réaliser les optimisations préconisées jusqu'à aboutir à des notes de A sur les différents critères analysés : solidité, sécurité, maintenabilité, examen de sécurité. 

Le projet s’est achevé en octobre 2023. IRP AUTO peut désormais capitaliser sur le coup de jeune de ses interfaces et sur le la mise à niveau technique qu’il vient de franchir. Nous remercions chaleureusement les équipes projet pour la confiance accordée, la franchise et la transparence des échanges tout au long du projet. Pour plus d’informations, n’hésitez pas à consulter notre étude de cas sur le sujet ou à nous contacter !

URL : https://www.irp-auto.com/
Mise en production : 24/10/2023.

"Lorsque nous avons confié à l’agence Bluedrop la montée de version sur notre site public de Drupal 7 à Drupal 10, c’était loin d’être gagné d’avance. En quelques mois, l’agence a parfaitement relevé ce défi qui, en plus des aspects techniques, imposait une reprise automatique de la majorité de nos contenus et un re-lifting graphique respectant l’existant. Bravo à toute l’équipe pour son écoute, sa disponibilité, son implication et sa capacité à nous proposer des solutions !"

Photo de l'auteur du témoigagne
Samira Personne Cheffe de projet utilisateurs.

"Dans un contexte complexe et un planning extrêmement serré, l'équipe bluedrop.fr a su nous accompagner grâce à son expertise technique sur le choix de la solution et sur les enjeux d'une migration de version. Et ce de la phase de contractualisation jusqu'à la mise en production."

Image décorative
Mayalène Dronne, Chef de produits portails.