Mise en production du site de préparation aux ECN de médecine avec Drupal 9 et ReactJS - Un modèle de LMS Drupal à entretenir...

Samedi 2 Octobre 2021

Client depuis 2012, la société MedXL Conf+ a confié la refonte de son site de préparation aux premières années de médecine à l'agence bluedrop.fr. Nous avons choisi une architecture partiellement découplée, avec ReactJS, pour enrichir l'expérience des étudiants : ce sont eux qui travaillent désormais !

Photo un étudiant sur une plateforme de e-learning

Conf+, l'expérience de la préparation aux examens de médecine

Le site conf-plus.com se propose d’être la plateforme de préparation aux épreuves classantes nationales (ECN) de médecine. Depuis plusieurs années, elle se place en référence, en matière de contenus et de parcours pédagogiques, pour les étudiants, et ce malgré les différentes réformes en cours. Le projet de refonte vise à faire de la plateforme conf-plus.com une référence en matière de LMS à l'attention des étudiants de médecine. Elle propose en effet : 

  • Un accès aux étudiants qui font partie de la communauté conf+ ;
  • Une plateforme d’apprentissage en ligne qui propose du contenu et des outils d’évaluation ;
  • Un accès pour les formateurs et conférenciers qui animent ces formations.

La richesse de la plateforme est de disposer d’un réseau de médecins et conférenciers qui participent à la contribution du contenu sur la plateforme -

  • Par l’intermédiaire de fiches de cours;
  • Par l’intermédiaire de topos et d’imageries ;
  • Par l’intermédiaire de QCM et de dossiers progressifs ;
  • Par l’intermédiaire de corrections des QCM / Dossiers progressifs.

Les étudiants sont invités, en contre-partie d’un abonnement, à réviser les cours objets du concours, à mémoriser les fiches, concepts et à s’entrainer à l’examen. Les parcours d’apprentissage, validés par le succès des quizz, permettent aux étudiants de visualiser rapidement leur niveau de préparation, de formaliser l’avancement de leurs apprentissages. Des fonctionnalités de messagerie ou d’organisation d’événements (concours blanc limité dans le temps ou duels entre étudiants façon battle royale viennent pimenter les apprentissages.)

L’ancienne plateforme propulsée par Drupal 7

La précédente plateforme, propulsée par Drupal 7 a fait son temps -  Plus de 9 ans d’exploitation, des dizaines de milliers d'étudiants passés par les révisions et les cours de conf-plus, une quinzaine d’universités connectées aux contenus du site. Victime de son succès, la plateforme exigeait une refonte du socle technique et une amélioration de l’expérience utilisateurs. L’essentiel des contenus des cours a été migré vers le nouveau site Drupal 9.

La reprise des parcours et la refonte de la charte graphique

La refonte de charte graphique générale a été conduite par notre partenaire breton, le bien nommé Gweno ! Efficace et moderne, elle consacre sa simplicité de déclinaison et la prévalence des contenus.

Les parcours utilisateurs ont été largement étudiés et évalués lors d’ateliers de design studio. Ils ont permis de confronter notre maîtrise des usages avec la connaissance des utilisateurs de l’équipe de conf+. Ces réflexions ont essentiellement portées sur :

Le parcours de l’utilisateur non-abonné :

  • La découverte des offres ;
  • La demande d’information ;
  • L’abonnement et le tunnel de vente.

Le parcours de l'utilisateur abonné :

  • Le parcours de connexion ;
  • Le parcours messagerie ;
  • Le parcours de consultation des fiches (apprentissage, question au conférencier, création de notes) ;
  • Le parcours « Dossier Progressif » (session du dossier par matière, par item, question au conférenciers, dépôt d’une note) ;
  • Le parcours « QI - Questions isolées » (session « question isolée » par matière, par item, questions au conférencier, dépôt d’une note) ;
  • Le parcours « TOPOS » (consultation d’un topo par matière / item / fiche, questions au conférencier, dépôt d’une note) ;
  • Le parcours « Trousse du docteur » (consultation d’une note par matière / item, création et modification d’une note dans la trousse).

L’agence bluedrop.fr a pris en charge la création du design system et le déploiement des maquettes wireframes et graphiques, disponibles sur figma.

Le projet de refonte avec Drupal 9

L’année 2020 a consacré le projet de refonte global de la plateforme. L’équipe technique a profité de la puissance de Drupal dans la gestion des permissions pour configurer une plateforme avec de multiples rôles d’intervenants, du correcteur au contributeur, en passant par l’administrateur de la boutique et le client (l’étudiant ou son représentant). L’utilisation de modules contribués puissants a permis de gagner du temps en récupération des contenus et en développement. Notons les configurations suivantes :

  • Déploiement de Drupal 9 et conguration initiale du cœur et des modules contribués usuels ;
  • Configuration du module quiz pour gérer et générer les QCM (ce module a largement été modifié pour répondre au besoin) ;
  • Configuration du module Stripe pour gérer les abonnements, les paiements et leur récurrence ;
  • Développement d’une fonctionnalité de messagerie interne entre les utilisateurs - essentiellement entre conférenciers et étudiants ;
  • Configuration de la boutique en ligne - Achat d’abonnements et gestion de leurs expirations (modules role expire et commerce) ;
  • Configuration des produits et modalités de paiement liés (abonnements mensuels, paiement au comptant, paiement par mois avec engagement de durée) ;
  • Configuration des messages transactionnels par l’intermédiaire de Sendinblue, dont le module, incomplet, a largement été patché ;
  • Développement d’un connecteur au service proposé par kumullus (hebergement de videos) ;
  • Développement d’un tableau de bord de l'utilisateur étudiant (profil, messagerie interne, statistiques, abonnement) ;
  • Développement d’un tableau de bord du conférencier (profil, messagerie interne, ajout d'un dossier progressif, ajout d'un quizz)

Les corrections

À la fin d'une session de questions, lors de la correction, 3 types de commentaires peuvent être proposés aux étudiants pour les aider à comprendre leurs eurreurs ou consolider leurs acquis :

  • Commentaire texte ;
  • Commentaire vidéo ;
  • Commentaire mnémotechnique.

Le choix du découplage partiel avec ReactJS

L’analyse initiale des spécifications du projet a soulevé des questions d’architecture. L’espace de travail, pour les étudiants, nécessitait en effet vitesse d’affichage, fluidité et adaptabilité des comportements. Il est rapidement apparu à l’équipe projet qu’un découplage frontend pourrait présenter des avantages. Nous avons par conséquent opté pour un découplage progressif / partiel, comme expliqué dans un précédent post du blog :
Retour d'expérience - Méthode et réflexions pour choisir entre un découplage total ou progressif avec Drupal - Mercredi 26 Mai 2021.

L’idée est ici de profiter au maximum de la puissance du CMS Drupal chaque fois qu’il apporte des garanties et de proposer une expérience, des parcours améliorés aux utilisateurs.

Nous avons par conséquent opté pour un découplage progressif des interfaces avec ReactJS.

Les pages destinées aux utilisateurs anonymes ainsi que les pages éditoriales classiques sont en effet construites dans la boite de Drupal, par la méthode classique. Il est alors possible de profiter de toute la puissance de Drupal en matière de gestion de contenu.

L’espace de travail des étudiants, la consultation des fiches, des topos, des vidéos, ainsi que la génération des QCM, la consultation du tableau de bord, des résultats et des corrections sont générées par l’intermédiaire de ReactJS, nourri par le module Json API désormais intégré au Core de Drupal.

Le résultat est une plateforme intégrée, à jour et indépendante. Nous saluons toute l’équipe projet pour son travail et sa concrétisation. Place désormais à la maintenance et aux projets d’évolution.

URL : https://www.conf-plus.com

Ressources :
Retour d'expérience - Méthode et réflexions pour choisir entre un découplage total ou progressif avec Drupal - Mercredi 26 Mai 2021
Le découplage progressif avec Drupal 8... Le site de la RTM. - Mercredi 8 Avril 2020