Conçu comme un projet d’exploration technique, Miam.Pizza est un site entièrement propulsé par WordPress permettant aux restaurants et food-trucks pizzerias de profiter d’une page web moderne gratuite.
Miam.Pizza est né d’un constat simple : en campagne ou à la ville, difficile de savoir où notre camion-pizza préféré se trouve aujourd’hui, et encore plus difficile de retrouver son menu ! Je suis donc à l’origine de cet annuaire en ligne de restaurateurs pizzerias.
L’outil des pizzaïolos connectés, propulsé par WordPress
Le site Miam.Pizza est créé à destination des restaurateurs (pizzerias fixes ou camions-pizzas) souhaitant améliorer leur visibilité sur Internet. En quelques clics, un professionnel peut créer sa page web sur Miam.Pizza.
Une carte de visite professionnelle en ligne
Côté architecture, de nombreux types de contenu WordPress ont été développés sur-mesure pour répondre aux besoins du site et stocker les différentes entités (business, menus, produits, etc.). L’extension ACF accompagne parfaitement ce développement spécifique et permet de créer des formulaires de gestion front-end efficaces mis à disposition des professionnels pour éditer leur page et leurs contenus.
Une fois créé et configurée, sa page web affichera des informations vitales et utiles aux clients de la pizzeria :
- logo, horaires d’ouverture, téléphone et adresse,
- tournée du camion et emplacements,
- carte complète (menu) catégorisée avec tarifs selon la taille,
- services disponibles dans le restaurant/camion.
Des outils de conversion pour les pros
En visitant la page web d’un restaurant, un visiteur pourra ajouter ses choix de pizzas dans un « panier virtuel » pour ainsi passer commande par téléphone plus facilement. Un petit plus pratique lors des soirées pizzas !
Côté professionnels, les restaurateurs ont accès à un outil privé leur permettant de générer des visuels designs sur-mesure avec leurs propres informations. Ces visuels sont pré-remplis automatiquement côté serveur pour fournir une image JPG à partager sur la page Facebook du restaurant.
Un annuaire 100% développé avec WordPress et React JS
De l’inscription utilisateur à l’administration d’une page d’un restaurant, l’entière conception du site a été gérée par Mosaika et développée dans le CMS WordPress. Ce framework open-source nous permet de gérer tout le cycle de vie de ce site web complexe :
- l’architecture des données est gérée via des types de contenus et taxonomies créés sur-mesure. Une couche d’abstraction orientée objet permet l’accès facile et lisible des données restaurants et utilisateurs côté thème.
- la gestion des métadonnées se fait via l’excellent ACF tout comme l’affichage des formulaires de création ou d’édition de contenu d’une pizzeria (coordonnées, logo, horaires, tournée, pizzas, etc.)
- la génération de visuels sur-mesure est appelée par la Rest API (couplée à la librairie Intervention)
- les événements « en chaîne » sont déclenchés via des hooks actions
Une gestion front-end via ACF
Le restaurateur disposant d’une page web sur Miam.Pizza pourra la gérer entièrement côté front-end, sans sortir de l’interface du site pour accéder à un back-office WordPress.
L’édition de ces métadonnées pizzerias et pizzas est gérée en interne par un usage poussé d’Advanced Custom Fields : formulaire front-end, validation sur-mesure, réception et traitement des données… tout passe par ACF et ses hooks !
Un outil de génération de visuels propulsé par ReactJS
L’outil de génération de visuels, mis à disposition des restaurateurs, fût une bonne occasion d’expérimenter concrètement les forces de ReactJS. Ce framework JavaScript permet la création d’interfaces web dynamiques et gérées par des composants mêlant structure HTML, logique métier et stylisation CSS.
Connecté à WordPress via sa Rest API, cet outil permet ainsi aux administrateurs de pizzerias de générer en quelques clics des designs personnalisés présentant les coordonnées de leur entreprise. Les images obtenues sont ainsi mises à disposition du professionnel et peuvent être facilement partagées sur leur page Facebook. Parfait pour moderniser ses réseaux sociaux et devenir plus visible !
Miam.Store : le grand frère de Miam.Pizza
En 2020, j’ai revendu les droits du site Miam.Pizza à un client. J’ai donc eu la responsabilité et la chance de faire évoluer le système en y intégrant de nombreuses nouvelles fonctionnalités. C’est ainsi qu’est né le site Miam.Store.
Ce second site Internet se positionne comme le « Uber Eats » guadeloupéen : les restaurateurs disposent d’une gamme d’outils encore plus complète pour présenter leurs menus et accepter des commandes en ligne.
Les clients, quant à eux, profitent d’une expérience d’achat complète (paiement en ligne, création de compte, historique et suivi des commandes, etc.).
Une refonte technique pour un socle orienté-objet WordPress moderne
Après 3 années d’apprentissage personnel et d’évolutions des standards, il était temps de moderniser le codebase du site. Tout le code a donc été retravaillé de manière à respecter une logique orientée-objet totale. Séparation des responsabilités, déclenchement d’événements, modélisations et relations affinées, etc. Le code retravaillé offre alors une meilleure lisibilité, maintenance et flexibilité.
Un set d’outils pour restaurateurs plus complet pour une gestion améliorée
Côté fonctionnalités, le système a lui aussi grandement évolué pour offrir aux restaurants des réglages plus poussés pour gérer leur page Miam.Store :
- possibilité de définir des déclinaisons de produits,
- configuration du tunnel de paiement pour activer (ou non) le paiement en ligne et direct, la livraison chez le client, les délais autorisés de pré-commande et la fin de prise de commande, le temps de préparation,
- définition des stocks quotidiens des produits et désactivation automatique des commandes de plats épuisés,
- module React JS de suivi en direct des commandes du jour et interface permettant au restaurateur de mettre à jour le statut de la commande (en préparation, en cours de livraison, etc.),
- développement d’un module de facturation par semaine par restaurant et d’un système de calcul automatique des commissions pour la plateforme.
Développements PHP spécifiques pour l’intégration d’API uniques
Enfin, des développements avancés ont été créés par mes soins afin d’interfacer le site Miam.Store avec des services externes par l’intermédiaire d’API tierces et de webhooks internes. En détails :
- j’ai travaillé avec l’API de la passerelle de paiement SpotPay afin d’offrir une expérience d’achat complète. Le paiement par carte bleue est vérifié par l’API de SpotPay et des validations 3DSecure sont présentées si nécessaires. Un webhook interne développé sur-mesure permet à SpotPay de renvoyer les évolutions des statuts des paiements : la page de suivi de commande présentée à l’acheteur est mise à jour en temps réel pour refléter ces événements.
- une API idelio d’envoi de SMS permet, à la création d’un compte utilisateur, de valider le numéro de téléphone mobile de l’acheteur par un code secret pour d’assurer la véracité de sa demande.
- une API interne sert de webhook à un système d’achat de crédits afin de suivre le solde des crédits des restaurateurs leur permettant de recevoir des commandes clients sur le site.
Encore une fois, WordPress a été utilisé comme un framework PHP à part entière offrant une incroyable flexibilité et un niveau de performance adéquat pour répondre à ce projet complexe.