Stack technique
Accéder aux détails
Backend (API)
Node.js
Panel d'administration :
React.js
Site e-commerce :
React.js
Infrastructure
Ikomobi
PWA
React.js
Base de données :
MySQL
Cocotte réinvente le food tour grâce à une plateforme e-commerce headless et une PWA
Une application mobile pour proposer une expérience inédite en matière de visite guidée gastronomique
Estelle Réau rencontre l'équipe Ikomobi à la toute fin 2019. L'application mobile qu'elle imagine a pour ambition de proposer une expérience inédite en France en matière de visite guidée gastronomique.
Au cours du premier trimestre 2020, deux ateliers de conception UX inaugurent une première collaboration et matérialisent un prototype fonctionnel et réaliste. Ce dernier va permettre d’éprouver le concept, convaincre plusieurs professionnels et créateurs d’entreprises pour finalement favoriser l’obtention de fonds nécessaires à la poursuite de l’aventure.
La deuxième étape du projet ne se résumera pas à la mise au point d’une application mobile. Il va s’agir d’imaginer un écosystème complet également capable de commercialiser le catalogue de food tour imaginé par Estelle. Plutôt qu’un simple CMS (WordPress pour ne pas le nommer), le principe de l’architecture découplée fait rapidement consensus puisqu’elle offrira un plus haut degré d’interopérabilité entre le futur site e-commerce et l’application mobile notamment. Un espace de gestion sera enfin conçu sur-mesure pour offrir un ensemble complet de services
Une plateforme numérique headless constituée d'un site e-commerce et d'une PWA, d'un espace de gestion et d'un backend
Grâce à leurs hauts degrés de flexibilité et de modularité, les plateformes headless e-commerce (ou e-commerce découplé) se substituent avantageusement aux CMS traditionnels qui ont fait jusqu’à présent les beaux jours du e-commerce.
La plateforme conçue et élaborée par Ikomobi pour le compte de Cocotte est composée de 4 éléments distincts. Le site e-commerce donne accès à l’ensemble des visites gastronomiques incluses au sein du catalogue. Un soin tout particulier a été apporté à sa conception RWD (Responsive Web Design) et plus précisément à la fiche produit et au formulaire de commande afin de proposer une expérience fluide sur smartphone et sur desktop.
Outre les informations relatives au profil, le compte client archive l’historique des parcours réalisés et mémorise les commandes en cours. L’utilisateur peut également retrouver ses cartes cadeaux et vouchers et prendre connaissance du crédit correspondant, le cas échéant.
L’espace de gestion a été tout spécialement conçu pour satisfaire les besoins de l’équipe Cocotte. En premier lieu, à l’instar d’un CMS (Content Management System), il offre la possibilité, d’administrer tous les contenus diffusés sur le site e-commerce et la PWA voire, sur les deux en simultanée. L’absence de double-saisie offre davantage d’homogénéité ainsi qu’un gain de temps non négligeable. Les administrateurs de la plateforme sont également autonomes pour créer ou modifier chaque food tour. De très nombreux paramètres sont donc à leur disposition pour personnaliser chaque parcours : lieu, date, nombre d’étapes, médias associés etc. Côté bases de données, les administrateurs ont naturellement accès aux clients, aux commandes associées ainsi qu’à l’avancement des parcours correspondants. Le module de génération de cartes cadeaux a enfin été conçu sur mesure pour s’adapter à toutes les configurations possibles de campagne : import en masse ou au cas par cas.
Une PWA en guise de guide touristique digital et interactif pour accompagner tous les gourmands tout au long de leur food tour
La PWA ou Progressive Web App est un format d’application à vocation mobile conçue par les équipes de Google. Son fonctionnement repose sur des standards empruntés au technologies web. C’est pourquoi, la PWA s’affiche exclusivement grâce à un navigateur Internet (Firefox, Chrome, Edge, Safari etc.). Via les service workers, elle va ensuite en détourner, entre autres, les mécanismes de mémoire cache et d’affichage afin de simuler l’expérience proposée par une application mobile développée de façon conventionnelle (des applications mobiles pour iOS et Android par exemple respectivement élaborées avec Swift et Kotlin).
Le choix technologique de la PWA a fait l’objet de nombreux échanges entre Estelle Réau et les équipes techniques d’Ikomobi. Pour la plus grande joie du pôle technologies web, la mise au point d’applications mobiles en Swift et Kotlin a finalement été provisoirement écartée. La flexibilité offerte par l’architecture découplée et ses APIs permettra toutefois de les développer à posteriori, sans exiger de remise en cause profonde ni du backend ni du site e-commerce. Un point vital pour accompagner la croissance de la start-up et lui laisser le temps d’assoir son business-model.
Du point de vue fonctionnel, la PWA Cocotte fonctionne en tant qu’application à part entière. À partir d’une commande passée depuis le site e-commerce et la création automatique du compte client associé, chaque utilisateur peut télécharger la PWA sur son smartphone et débuter le food tour correspondant. La PWA se comporte alors comme un véritable guide touristique interactif et digital. Elle guide progressivement l’utilisateur à chaque étape du parcours grâce à 4 fonctions essentielles. Via les fonctions GPS intrinsèques au smartphone, un assistant cartographique indique le trajet à suivre pour découvrir chacun des points d’intérêts du parcours. Ces derniers sont présentés à l’aide de formats conçus sur mesure (vidéos, podcats audio, contenus textes, galerie d’image, et réalité augmentée). La PWA permet également de valider chaque dégustation grâce au scanner qu’elle embarque. C’est enfin une interface qui permet d’interpeller l’équipe Cocotte à tout moment.
Dernières réalisations
