Cet article a été écrit par un être humain qui s’est servi principalement de l’IA pour la relecture et la correction de fautes, dans une ère où l’IA est utilisée partout et pour n’importe quoi il est parfois important de remettre l’accent sur l’être humain.
On commence tous quelque part et nous au Studio 1N on a commencé chez La Guizi, un restaurant et coffee shop de passionnés au Pré Saint Gervais près de Paris.
La cheffe voulait un site vitrine qui donne envie aux clients de se rendre au restaurant et qui montre les nombreux atouts du restaurant comme sa terrasse cachée. Le besoin se portait également sur un système de réservation sur mesure qui est volontairement simplifié.
Images du site vitrine
Bienvenue dans ce premier case study du // STUDIO [1N], pour nous chaque projet client s’accompagne d’un article décorticant certains de nos choix techniques et permettant de mettre un peu plus en valeur le projet d’un client. Celui-ci est séparé en trois chapitres courts qui devraient constituer une lecture agréable pour n’importe quel lecteur.
Si vous êtes intéressé par un projet consultez nos offres ou contactez nous directement.
Bonne lecture.
Les réservations
Notre système de réservation est composé de 3 briques, la première: La page de réservation
C’est une page simple sur laquelle les utilisateurs remplissent leurs infos avec une validation côté client avec reglejs, il y a également une couche de validation supplémentaire effectuée par Strapi. C’est assez classique avec la possibilité de d’indiquer que l’on souhaite manger sur la terrasse cachée du restaurant.
La page de réservation & L’aperçu d’une réservation sur Strapi
Lorsque la réservation est effectuée elle est alors créée dans une collection Strapi. Celle-ci doit être confirmée par la cheffe qui enverra alors un message au numéro de téléphone indiqué. C’est un système simple et efficace qui pourra par la suite être étendu selon les demandes, on pourrait très bien y greffer un système de gestion de tables par exemple.
La dernière brique de ce système va concerner les emails automatiques ainsi que l’archivage des réservations. A chaque nouvelle réservation la cheffe reçoit un email avec les informations de celle-ci, l’e-mail était une nécessité afin de garantir une réponse rapide aux clients qui réserveraient. Il y a également un envoi régulier d’e-mail concernant les statistiques de réservation pour période en cours (matin, soir). Les réservations passées sont archivées au bout de 24 heures et au bout d’un an elles sont supprimées afin de correspondre aux normes RGPD.
Les différents emails concernant les réservations
Au delà des réservations on a rencontré un autre défi technique assez inattendu arrivé assez tard pendant le développement…
Strapi et les images qui changent de sens
Sur le site La Guizi il y a énormément d’images, sur la page d’accueil, sur la galerie, sur quasiment toutes les pages. Lors du passage en production quand la cheffe a dû ajouter des images nous avons rencontré un petit problème:
IMG_2043.jpgDémo interactive
Comme vous avez pu le voir ci-dessus certaines images s’avèrent être “rebelles” et changent de sens lorsqu’elles sont uploadées. C’est un problème connu de strapi depuis longtemps, alors on a iteré cherché et creusé sans vraiment de solution. Nous avons alors désactivé l’optimisation d’images de strapi ce qui a réglé le problème mais en a créé un nouveau. Certaines images utilisées sur le site étant des images d’appareil photos elles demandent beaucoup de ressources afin d’être affichées et cela peut provoquer des ralentissements sur certains appareils.
Alors notre solution s’est tournée côté client grâce au saint graal qu’est @nuxt/image un package npm qui fournit un composant capable de faire des optimisations. Les images sont désormais chargées avec une qualité réduite et en plus de cela pendant leur chargement on affiche un placeholder ce qui est plus sympa que juste voir l’image apparaître d’un coup.
[demo placeholder image vs apparition]
Après cette petite victoire attaquons un sujet plus léger, parlons stats parlons chiffres, parlons Umami