Objectifs

Le Raid Tolkien, qui organise le festival depuis plusieurs années, souhaitait améliorer ses axes de communications. Zéphyr Web et les entreprises associées ont donc eu plusieurs missions sur ce projet :

• un site internet
• une application mobile
• un magazine promotionnel
• un trailer 3D
• de démarchage de partenaires et la vente de packs de visibilité sur les différents médias conçus par l’entreprise

J’ai participé à plusieurs parties de ce projet.

Une API pour les gouverner tous

Le projet nécessitait deux API : une publique, qui servait à l’application mobile et au front-end React, ainsi qu’une privée, accessible pour les administrateurs connectés.

L’API publique permet alors d’obtenir les informations relatives aux exposants présents sur le festival, aux partenaires, aux articles de blogs ainsi qu’aux événements programmés. L’API privée concernait les données relatives aux exposants et aux événements. Ces deux API, récupéraient donc pour chaque entité les données qui lui étaient liées. Ainsi, pour un événement programmé, nous récupérions également les dates du festival, les types d’événements, les emplacements d’événements, les performers attendus ainsi que les publics cibles.Pour les articles de blogs ainsi que les exposants, nous récupérions simplement les catégories de ces derniers.

Deux versions de cette API ont été effectuée, une avec la technologie Loopback passant par des fichiers de configuration et l’autre avec Symfony.

Un outil pour les trouver

Pour simplifier l’administration du site, j’ai développé, en javascript et avec la librairie JQuery, deux outils permettant de gérer le calendrier des événements ainsi que la carte de placement des exposants.

L’application mobile ayant besoin des données géographiques des exposants pour les afficher sur une carte, nous devions permettre aux organisateurs de placer facilement et précisément les différents stands.

A l’origine, les organisateurs plaçaient les exposants sur un plan papier et dans des tableau avec des numéros d’emplacement. Ce plan peu modulable n’aurait pu convenir pour un plan interactif affichant les stands en fonction de la géolocalisation de l’utilisateur.

J’ai donc travaillé avec des coordonnées GPS et avec l’API de Google Map. L’outil d’administration fonctionne de la manière suivante :

• Je récupérais d’abord tous les exposants et leurs catégories et les séparait en deux listes : les placés et les non placés (en vérifiant si le champ de localisation était vide ou non).
• Puis pour chaque exposant placé, se dessinait sur la carte le polygone correspondant aux coordonnées enregistrées. Cette carte déjà centrée sur la zone du festival, ne permet pas de s’en éloigner afin de ne pas pouvoir placer un exposant au Brésil par inadvertance.
• La liste des exposants placés s’affiche alors et le clic sur chacun d’entre eux permet de centrer la carte sur sa représentation polygonale et d’afficher ses informations générales (description, catégories, lien vers la fiche administrateur) ainsi que la possibilité de supprimer ce dernier de la carte ou de faire pivoter son polygone.
• Un bouton radio permet de switcher entre la liste des exposants placés et celle des exposants non placés.
• Une select box permet de filtrer ces derniers par catégories
• Le clic sur un exposant non placé affiche une fenêtre modale avertissant l’utilisateur que cet exposant n’est pas encore présent sur la carte et qu’il doit le drag’n’dropper sur cette dernière pour le placer.
• Glisser et déposer un exposant non placé sur la carte crée un rectangle sur la carte. L’utilisateur peut alors ajouter ou supprimer autant de points que souhaité à ce polygone, le déplacer sur la carte et le faire pivoter.
• Chacune des actions effectuée sur un exposant est enregistrée en base de données.

Un outil pour les amener tous

Le second outil développé pour l’administration du site était un planning interactif en javascript et utilisant les librairies FullCalendar.js et Moment.js. On pouvait alors effectuer plusieurs actions sur le planning configuré pour n’afficher que les trois jours du festival.

Cet outil permettait de :

• Créer un événement en lui associant des types (Combat, Quidditch, Conférence, Déambulation), un public (Tous, Enfants, Adultes), un lieu, un itinéraire (pour les événements se déplaçant dans la zone du festival), des performers existants (groupes ou personnes en représentation lors de cet événement)
• Afficher des événements existant, une requête API récupère alors tous les événements enregistrés et les affiche sur le planning en attribuant à chaque lieu une couleur. Il est aussi possible de n’afficher que les événements d’un lieu en particulier car le festival Cidre et Dragon peut parfois proposer une dixaine d’évènements simultannés. L’affichage de tous ces événements rendrait la lecture et les interactions difficiles.
• Modifier un événement par glisser déposer et étirement de ce dernier sur le planning ou en cliquant dessus pour afficher ses informations. Un bouton d’édition permet alors de modifier les données non heuristiques.
• Supprimer un événement annulé.

Et dans les ténèbres les lier

Le site internet du festival fut réalisé avec le CMS Sulu, développé sur Symfony. Très flexible, il présentait un back office très fluide et agréable à prendre en main. Son avantage était la possibilité de gérer plusieurs sites internet et applications sur un seul et même back office. Cela permettait alors de centraliser certains éléments tels que des galeries photos, des catégories ou des outils d’administration sur mesure.

La dynamisation des contenus ainsi que l’intégration du site internet a été réalisée en React.js, technologie que je ne maîtrisais pas jusqu’alors mais qui m’intéressait beaucoup.

Pour travailler, nous sommes parti d’un boilerplate, une base avancée pouvant être facilement réutilisée dans différents projets. Chaque url du site fait donc appel à une requête d’API pour récupérer le contenu de la page correspondante dans le CMS. A partir de là, nous pouvions associer certains types de contenus (d’après une catégorie) à un template React.js.

Conclusion

Ce travail m’a permis de découvrir de nombreuses technologies (ReactJS, Symfony, Sulu) appliquée à un projet qui me plaisait beaucoup. J’ai également eu la possibilité de faire de la gestion de projet. J’ai été amenée également à former un des clients aux outils que nous avions développé afin qu’il puisse par la suite intégrer de nouveaux contenus. Sulu étant différent des CMS les plus courants, il était important de prendre le temps d’expliquer son fonctionnement.