Refonte du site e-commerce de Paris City Vision

Christian de NADAILLAC
STEAMULO Blog
Published in
6 min readOct 15, 2019

--

Paris City Vision fait peau neuve, en passant de Magento à une solution de vente d’excursions sur mesure.

www.pariscityvision.com/fr

L’entreprise Paris City Vision en pleine croissance

https://www.pariscityvision.com/fr

Paris City Vision est une vieille dame presque centenaire, l’entreprise vient de fêter ses 90 ans.

Acteur majeur des activités touristiques, Paris City Vision propose les « meilleures visites et expériences à Paris et en France » à travers une large gamme de produits (plus de 500 produits vendus à travers ses sites destinés aux particuliers, professionnels et hôtels) :

  • Excursions d’une journée à partir de Paris en bus ou mini bus, des croisières (déjeuner, dîner ou balade sur la Seine),
  • Tours de ville à plusieurs arrêts,
  • Visites guidées à pied (pas de transport) disponibles en 8 langues : visite du quartier, visite guidée du musée…,
  • Visites avec audioguides disponibles en 11 langues
  • Billetterie : musées (Louvre, Orsay…), parcs à thèmes (Disney, Asterix…), monuments (Saint Chapelle, Notre Dame de Paris), spectacles (Lido, Moulin Rouge…), visites de villes (circuits en bus, croisières…).

Grâce à cette offre très diversifiée, Paris City Vision est le premier producteur d’excursions et de visites guidées au départ de Paris avec environ 800 000 passagers par an.

Elle a connu une croissance de 19 % en 2017 et de 18 % en 2018, et poursuit ainsi sa mutation par l’élargissement de sa clientèle et la diversification de ses produits.

La particularité est une distribution directe de Paris City Vision assurée par 5 fronts offices :

  • B2C: https://www.pariscityvision.com/fr/ , la plupart des clients directs internationaux utilisent ce site pour acheter nos visites.
  • B2B: les agences de voyages et les petits voyagistes utilisent ce site pour acheter les voyages pour leurs clients.
  • B2H: le réseau «Concierge» vend nos visites à ses clients à l’hôtel.
  • Call center: “Resa”, ils répondent aux appels des clients (B2C, B2B et B2H) pour créer, éditer ou supprimer des réservations sur des systèmes.
  • Agence: «Resa», ils reçoivent directement les clients de les agences et peuvent créer, éditer ou supprimer des réservations dans le système

Un SI en pleine mutation

En 2017 un vaste chantier de remise à plat du SI a été décidé afin d’accompagner cette croissance, pour pouvoir, à terme, suppléer aux SI des nouvelles activités absorbées par Paris City Vision (LOCALERS & PARIS SEINE, …).

C’est dans ce cadre que plusieurs projets majeurs ont été lancés. Grâce à notre expérience de la billetterie (FNAC Spectacles, Carrefour Spectacles), nous avons eu l’honneur de nous voir confier la refonte toute la partie Back-end et Front end du nouveau site E-commerce.

Une solution modulaire

Afin de répondre aux attentes de Paris City Vision, nous avons préconisé une solution modulaire et flexible :

  • L’architecture de la solution permet d’absorber des charges de plus en plus importantes avec des pics de charge pendant la saison estivale.
  • La solution permet d’optimiser le référencement (SEO) des sites dans un contexte multilingue afin d’améliorer le positionnement sur les différents moteurs de recherche et rendre les sites plus visibles dans les différentes langues (8 langues prévues)
  • La solution est évolutive et est capable d’adresser les multiples fronts actuels ainsi que les futurs fronts venir : adopter une structure pouvant facilement accueillir des nouveaux contenus & services… capitaliser sur un back-end utilisable par plusieurs fronts.
  • Être souple en termes de contribution. Le service marketing doit pouvoir facilement ajouter des messages ou modifier la structure des contenus, et gérer les spécificités de chaque langue.

Architecture Orientée Services (SOA)

L’architecture préconisée est assez classique : le site E-commerce est constitué de 3 parties distinctes :

  • Un socle de services métiers : exposition sous forme de services unitaires et indépendants de chaque fonction métiers de haut niveau nécessaires aux différents sites web. Ces services seront connectés à une ou plusieurs briques du SI Paris City Vision (internes ou tierces parties).
  • Un système multi-site : Mutualisant le contenu (CMS) et les fonctionnalités métiers (catalogue, dispo) et techniques (statistique, SEO).
  • Back-office de la Plateforme Web : Il permet de gérer toute la customisation des différents sites (CMS, etc..) ainsi que le fonctionnement technique de la plateforme (configuration, logs d’utilisation, statistique, tâches programmées, …)

Les avantages d’une architecture orientée services sont nombreux :

  • Modularité : Les différents modules / services sont indépendants. Ils partagent seulement les mêmes données / utilisateurs pour leur contrôle d’accès.
  • Pérennité : Chaque service peut être développé et déployé indépendamment des autres services. Les évolutions d’un service n’impactent pas l’ensemble du projet.
  • Découplage : La communication entre Front et Back-office par API REST permet une indépendance des différentes parties et une séparation claire des traitements.
  • Scalabilité : D’une part la responsabilité des traitements liés à l’affichage est déportée coté cliente, ce qui allège fortement la charge du serveur, d’autre part, si un service s’avère trop gourmand en ressource il est possible de le scaler unitairement.
  • Tolérance à la panne : Lorsqu’une panne survient sur un service, Il est isolé le temps de la correction, le reste de l’application restant fonctionnel.

La stack technique — une solution sur mesure

Parce que le besoin e-commerce de billetterie est très spécifique, une solution technique développée sur mesure plutôt qu’une approche « produit » a été préconisée pour garantir souplesse et évolutivité du développement.

La plateforme a été développée avec le framework Java SpringBoot. Spring est le Framework java le plus utilisé actuellement, particulièrement dans les applications e-commerce ou bancaire, où performance et sécurité sont des critères importants.

Pour garantir de très bonnes performances SEO, nous mettons en cache les pages générées côté serveur (Thymeleaf). Le code HTML est écrit dans la préoccupation de répondre au mieux aux exigences de Google.

La partie recherche sur le site (indexation régulière du catalogue, recherche full text, multi critère, synonyme, multi-langue) est assurée par un Elastic Search finement paramétré pour obtenir un temps de réponse optimum.

Côté base de données, nous utilisons MySql. Base de données relationnelle, open-source et très performante, elle s’inscrit parfaitement avec l’éco-système Java.

L’ensemble propose une solution cohérente, composée uniquement de briques open-source très largement utilisées et recommandées. STEAMULO possède par ailleurs, une forte expertise sur ces technologies, permettant d’assurer la réussite et la pérennité du projet.

La méthodologie AGILE

La méthodologie utilisée est de l’AGILE SCRUM : en effet cette méthodologie de projet englobe l’intégralité des phases nécessaires à sa bonne réalisation : Initialisation, Réalisation par sprint itératif, Clôture, Assistance de mise en production, Exploitation et Maintenance.

Nous avons découpé le projet en « sprint » de 2 semaines. La fin d’un sprint donne lieu à une démo dans laquelle le client valide les développements réalisés.

L’activité de validation

L’activité de validation par les tests est une activité répartie en 3 niveaux :

  • Tests unitaires via la PIC réalisés par l’équipe de développement
  • Tests d’intégration afin de tester la disponibilité de l’ensemble de services internes et externes nécessaires (API REST/JSON ou WS REST/JSON).
  • Des tests fonctionnels réalisés par des profils testeurs sur des vrais terminaux physiques multi-OS et multi marque

Retour d’expérience et récompense

Le projet était très complexe, du fait de son adhérence à la refonte du SI de Paris City Vision : inévitablement nous étions dépendant de la refonte des autres briques du SI.

Nous avons donc dû nous adapter, notamment grâce à la méthode AGILE, en modifiant l’ordre de développement des différentes fonctionnalités, et en acceptant des évolutions des services tiers jusqu’au dernier moment.

Le travail main dans la main avec les équipes Paris City Vision fut fructueux, et au terme d’une année de travail, les équipes sont fières du travail accompli.

Cette nouvelle plateforme devrait répondre aux fortes ambitions de Paris City Vision et accompagner le groupe dans ses futures mutations. La mutation digitale de « la vieille dame » est bien engagée, et les premiers résultats sont prometteurs.

A noter : fin novembre, Paris City Vision a remporté le 2ème prix du meilleur site internet de e-commerce des #tropheesdelacommunication ‬édition 2019 !

--

--