Long projet web, belle aventure technologique

Tout a commencé il y a fort longtemps… bon pas si longtemps, on était pressés et il fallait un résultat rapide 🙂 .

Le Cycloplombier est né d’une volonté de rendre les interventions d’un artisan plombier plus respectueuses. Dans tous les sens du terme. Avoir un plombier disponible sur des créneaux mis à disposition pour les clients. Un esprit d’éco-responsabilité à des tarifs défiant toute concurrence. Le plombier de Paris en vélo cargo propose des interventions à prix réduits lié à son mode de transport : le vélo.

J’ai du créer le site internet avec le nécessaire des informations et une charte graphique spécifique.

Mes missions

Intégration et développement de fonctionnalités

Des maquettes graphiques étant déjà réalisées par Julie Landais, talentueuse graphiste de la région nantaise, je devais me charger de l’intégration et des fonctionnalités du site.

Les fonctionnalités étant la partie primordiale des attentes de l’artisan à vélo, il fallait partir de rien pour créer un outil adapté à ses besoins. La demande était la suivante : mettre en place un système de réservation rapide, sobre et efficace. Cet outil permettra aux (futurs) clients de réserver une intervention du plombier sur un créneau spécifique. Un devis automatiquement généré et ajustable est envoyé au sytème de facturation du plombier (Quickbook), un rendez-vous est calé sur son agenda (Google Calendar). Tout cela en quelques clics.

Ayant pris connaissance de cela, je sais maintenant que le site doit prévoir un formulaire interactif. Je dois alors faire le nécessaire pour que le plombier puisse avoir un aperçu de ce qui l’attend chez le client.

Permière étape du système de réservation du Cycloplombier
Rendu final de la première section du formulaire de réservation

Intégration Web

Pour rappel, l’intégration consiste à découper la maquette graphique et utiliser ses différents éléments pour créer un site fonctionnel. Plus de détails sur la page Wikipedia.

J’ai réalisé l’intégration avec le framework Bootstrap 4 (sytème de grilles responsive, entre autre). Géré les feuilles de styles avec le “pré-processeur” Sass. Cet outil offre des fonctionnalités d’imbrication et de génération des css (optimisation du code).

J’ai commencé la création des différents gabarits de pages sur des fichiers php en local. Ensuite j’ai intégré les templates dans un système de gestion de contenu : WordPress.

Développement des fonctionnalités

Un plugin existant ?

Pourquoi réinventer la roue ? Peut être existe-t-il un plugin suffisamment riche en fonctionnalités pour pouvoir me rendre service ? La réponse était : oui, mais non. En effet, des plugin de réservation, il en existe un paquet : Amelia, Bookly, Easy Appointments…. Mais aucun n’avais toutes les fonctionnalités que j’imaginais… Sauf un !

J’ai choisi finalement de me diriger vers un plugin tout de même, WPform, que j’ai remanié “à ma sauce”. En effet, ce plugin permet de configurer facilement un formulaire et notamment d’en créer avec plusieurs étapes. Ensuite j’ai utilisé des images remplacement des <label> du formulaire pour un côté plus interactif. Ces images représentent les différentes problématique ou objet défectueux rencontrés lors d’une fuite, d’un engorgement etc….

Image du formulaire de réservation du cycloplombier
Première étape du formulaire, sélectionner sa problématique

A partir de là, pas trop de soucis, utiliser une fonctionnalité d’un plugin n’a rien de merveilleux, me direz vous. Par la suite, j’ai modifié les CSS de façon à obtenir des classes bootstrap pour avoir un rendu impeccable sur tous les supports : écrans, tablettes, mobile, etc… Par ailleurs j’ai aussi modifié les effets au clic sur les boutons, mis en place des effets de glissements à l’arrivée sur la page.

Pour terminer avec les fonctionnalités natives de ce plugin, j’ai créé les différentes étapes du formulaire et je met en place un calendrier avec le choix de la date et l’heure de l’intervention.

On commence les choses sérieuses

Obectif principal

À la soumission du formulaire de réservation, je dois insérer un rendez-vous (date et horaire) dans un table de la base de données. Celle-ci sera stockée afin d’afficher ou de griser les horaires disponibles ou non

Des créneaux imposés

Au lieu d’utiliser des heures dans un “select” avec options, je créer une fonction qui va afficher les horaires disponibles. La journée du client n’étant pas extensible, il a choisi de fournir 4 créneaux disponibles par jour. Ceux-ci sont stockés en bdd pour pouvoir ensuite vérifier leur disponibilité un jour “J”.

Choix de date et heure de réservation cycloplombier

En AJAX, je vérifie tous les horaires disponibles le jour choisi puis les retourne dans le select (ci-dessus). Je fais d’abord une vérification et les retourne de cette façon

Options supplémentaires

Afin de fournir un outil pratique, j’ai permis au Cycloplombier de renseigner des créneaux d’indisponibilité. Il peut désormais renseigner une période de congés qui grisera les dates sur le calendrier de son formulaire. Il peut aussi simplement seulement une heure sur laquelle il a été appelé pour une autre intervention, ceci afin de ne pas avoir de doublon et de griser un créneau.

Si un client annule pour X raison, il suffit au Plombier de supprimer l’entrée concernée dans le Back Office (et sur son calendrier google).

Et après la réservation il se passe quoi ?

Premièrement, c’est assez simple, les actions effectuées par le formulaire une fois envoyé sont les suivantes :

  • Envoi de mails au Cycloplombier et au client final pour les informer ou confirmer la prise d’un rendez-vous.
  • Envoi de certaines informations du formulaire dans un Google Calendar via l’API pour plannifier au mieux les interventions.
  • Création d’un devis “Type” au prix de base annoncé par le plombier à vélo. Pour cela j’ai utilisé l’API de l’outil de gestion de facturation qu’utilise mon client : QUICKBOOK.

API GOOGLE CALENDAR

Afin de ne pas changer trop les habitudes de fonctionnement du Plombier, j’ai simplement connecté son formulaire de réservation à l’API de GOOGLE CALENDAR.

Il m’a fallut pour cela utiliser créer un nouveau calendrier, les identifiants générés par l’API pour pouvoir identifier le calendrier concerné. Ensuite j’ai envoyé les information nécessaires au Plombier qui s’affichent dans le détail de l’événement.

Un petit bout de code de utilisé pour que certains champs se retrouvent dans Calendar :

Code envoyé à google calendar pour ajouter des informations à un événement

On peut voir ici que je récupère les identifiants des champs et leurs contenus au moment de la validation du formulaire. Ensuite je les envoi au calendrier, ce qui créer un événement. Enfin on peut voir en bas du code que j’utilise une fonctionnalité que ceux qui utilisent Calendar doivent connaître : les notification X heures / jours avant l’événement, pratique comme mémo.

API QUICKBOOK

Nous rentrons là dans la section la plus complexe à laquelle j’ai eu à faire : l’API de l’outil de gestion de facturation Intuit Quickbook. En effet, c’est surtout la compréhension de cette API et parfois le manque d’informations précises disponibles, mais j’ai vaincu.

Après quelque péripéties, j’ai réussi à communiquer avec l’API avec le même principe de fonctionnement que celle de Google. J’ai envoyé les informations nécessaires à l’élaboration d’un devis à la validation du devis.

D’abord il a fallu créer le devis type, le gabarit. Celui-ci devait correspondre à un type de service, à une TVA particulière, calculer le tarif de base par rapport à sa TVA et toutes les informations légales (nom, adresse, numéro de téléphone, etc…..

Exemple de code pour l'élaboration d'un gabarit de devis "type"
Exemple de code pour l’élaboration d’un gabarit de devis “type”

Ensuite il m’a fallu envoyer, sur le même principe qu’avec Calendar, les champs voulus du formulaire de réservation.

Exemple de code envoyé à l'API Quickbook depuis le formulaire de réservation du Cycloplombier
Exemple de code envoyé à l’API Quickbook depuis le formulaire de réservation du Cycloplombier

Une fois envoyé sur le compte de mon Client, le devis est généré avec toutes les informations pré-remplies : Gain de temps inestimable dans la journée de mon Client.

En conclusion. Quels bénéfices pour l’artisans à vélo ?

Grâce à cet outil (encore améliorable), le Cycloplombier peut désormais :

  • Consacrer son temps à ses interventions plutôt qu’au téléphone
  • Ses devis auto-générés lui font gagner du temps, beaucoup de temps
  • Il n’a plus qu’à modifier le devis selon les cas (ou pas)
  • Ses interventions sont directement insérées dans son planning Google, encore une économie de temps.
  • Il est plus heureux que jamais (non négligeable).

Si vous avez des commentaires ou des idées d’améliorations, tant que c’est constructif, n’hésitez pas à m’en faire part dans les commentaires.