Capsule — Etude de cas

Capsule est un e-shop éphémère proposant des produits imaginés par des créateurs de la région de Bordeaux. Chaque mois, le projet donne à un nouveau créateur la possibilité de présenter une sélection de ses créations qu’il est également possible de commander sur la plateforme.

Cet article est directement lié à la page concernant ce projet, disponible sur mon portfolio : https://bastienrobert.fr/capsule.

Problématiques

Durant le développement, j’ai été confronté à plusieurs problématiques :

  • Comment rendre le site accessible et rapide ?
  • Quels moyens mettre en place pour garantir une sécurité maximale sur le site ?
  • Comment proposer aux clients de suivre leur commande à travers le site ?
  • Comment permettre au créateur de gérer les commandes ?

Fonctionnalités

  • Acheter des produits : Capsule étant une plateforme d’e-commerce, il est bien évidemment possible d’acheter et de se faire livrer des produits
  • Personnaliser son produit : Il est possible de choisir entre plusieurs déclinaisons de produits, de part la couleur, la taille ou encore le nombre d’articles que l’on souhaite ajouter au pannier
  • Espace d’administration et API : Cette fonctionnalité est en réalité une application Rails tiers, qui permet au créateur du mois de gérer ses commandes ; l’application génère une API REST qui permet, plus tard, de rapatrier des informations pour le suivi de commande
  • Suivre sa commande : Grâce à l’API générée dans l’application Rails d’administration pour les créateurs, il est possible de suivre sa commande directement via le site d’e-commerce statique

Au niveau des technos

Capsule est découpé en 2 applications :

  • une première, réalisée avec le framework ruby statique Middleman, chargée de la partie e-commerce
  • la seconde est réalisée avec Ruby on Rails et s’occupe de la partie administration du site, pour le créateur

Enfin, le solution e-commerce utilisée par Capsule est Snipcart, qui est une solution Javascript all-in-one pour de l’e-commerce.

Choix des technos & sécurité

Afin de garantir une sécurité optimale aux clients de Capsule, j’ai longtemps réfléchi aux technologies sur lesquelles me pencher. Finalement j’ai choisi d’externaliser la partie e-commerce en utilisant Snipcart qui intègre des fonctionnalités de sécurité avancées et de mettre le site en ligne de manière statique, ce qui garanti qu’aucune intrusion n’est possible dans la base de donnée qui est ici NoSQL (il s’agit en réalité d’un tableau YML).

Un second problème s’est posé lors de l’exploitation de la plateforme par un créateur : pour que celui-ci puisse se charger d’expédier les différentes commandes, de modifier le status d’une commande ou encore pour joindre le numéro du bon de suivi pour le colis, nous devions donner les accès complet au panel d’administration de Snipcart. Afin de résoudre ce problème, une application Rails à été développée pour gérer toute la partie administration côté créateur, basé sur l’API de Snipcart.

Enfin, pour suivre sa commande directement depuis le site, une API est générée depuis l’application Rails d’administration, rapatrie les informations de la commande via l’API de Snipcart et ne renvoie que les informations nécessaires au suivi de commande.

Personnaliser un produit

Snipcart est une solution complète, très simple à mettre en place : il suffit d’insérer le script, la feuille de style et pour vendre un article, un simple bouton avec la classe snipcart-add-item contenant les différents paramètres du produit permet de l’ajouter au panier.

Pour des produits customisables il faut alors modifier les dataset du bouton et remplacer les valeurs par ce que l’utilisateur choisi.

Suivi de commande

Afin de suivre sa commande, une requête est envoyée à l’API de l’application d’administration, les informations sont ensuite rapatriées de manière asynchrone vers le DOM.

Administration

L’espace d’administration comporte 2 types d’utilisateur :

  • Administrateur : Qui s’occupe de créer des périodes et des utilisateurs pour attribuer l’un à l’autre
  • Créateur : A qui on attribue une ou plusieurs période de vente, où il peut consulter son chiffre d’affaire, la liste des commandes sur les différentes périodes et éditer le statut de chaque commande.

Le créateur peut consulter une fiche de commande, y retrouver les informations essentielles : la liste des produits et les paramètres de customisation, l’adresse, les informations de contact du destinataire (et de la personne qui à payée dans le cas où les informations diffères, par exemple si c’est un cadeau).

Le créateur peut ainsi changer le statut d’une commande, quand le statut est fixé sur Expédiée, il peut entrer un numéro de suivi de colis et sélectionner le service à travers lequel le colis à été expédié afin de construire l’URL de suivi de colis.

Le créateur peut aussi rembourser partiellement ou intégralement la commande, contacter le client via un formulaire de contact et retrouver l’historique des actions réalisés sur la commande.

Conclusion

Finalement, en utilisant Middleman qui génère des sites statiques, en utilisant Snipcart et en n’installant aucune librairie Javascript, notre site propose une rapidité, une fiabilité et une sécurité optimale dans la navigation et dans l’achat de produit.

Quant aux problématiques de suivi et de gestion des commandes, l’application Rails d’administration nous à permit de gérer efficacement les besoins back-end que nous appréhendions.

Grâce à ce projet, j’ai :

  • Appris à utiliser Webpack et à l’installer sur Middleman
  • Approfondi mes compétences en création et en exploitation d’API
  • Pu mettre en place mon premier site e-commerce