Aucune intelligence artificielle n'a été utilisé dans la rédaction de cet article.

Contextes et objectifs

Afin d'étendre la visibilité du BDE, nous avons pour mission de concevoir une solution web permettant la vente de produits, la gestion des stocks et le suivi des commandes.Vous retrouverez mon application sur le lien suivant : https://cubes5-bde.vercel.app/

Choix des technologies

J'utilise Nuxt.js avec Typescript et node.js qui est un Framework moderne et performant qui permet de faire du SPA « Single-Page-Application » qui est une implémentation d'application web sur un seul document web, mettant à jour que les contenus avec lesquels vous interagissez. Cela permet entre autre de ne pas avoir de chargement entre les pages de votre application.

J'utilise le SSR « Server-side rendering », l'intérêt du SRR est que les pages de votre SPA sont préchargées par le serveur, pour l'utilisateur la page est appelée très rapidement. le SSR est très apprécié des moteurs de recherches puisque les robots peuvent capturer les pages plus vite. Dans le cadre d'une application e-commerce avoir un bon SEO « Search Engine Optimization », qui est l'ensemble des techniques mise en œuvre pour améliorer la position d'une site web sur les résultats des moteurs de recherche, est appréciable. En revanche, le gros inconvénient est que le SSR exige beaucoup du serveur. Dans le cas d'applications qui demandent beaucoup d'interactions avec l'utilisateur cela entraîne un ralentissement du temps de réponse.

Pour l'UI, l'interface utilisateur, j'utilise Vuetify, un Framework de composants d'interface utilisateur construit pour Vue.js.

J'utilise Firebase pour la partie authentification, pour stocker les données utilisateurs, produits et commandes, pour stocker les images des produits et les QRCode des commandes. Je me sers aussi des google cloud functions pour communiquer avec l'api de Stripe pour mes commandes.

Pour terminer, je déploie mon application sur Vercel qui offre la possibilité d'héberger des applications web.

Principales fonctionnalités

J'ai implémenté l'authentification avec email et mot de passe, le mot de passe oublié et la suppression de votre compte.

Vous pouvez choisir la quantité d'un produit à ajouter au panier, le retirer du panier et vider le panier. Vous pouvez ajouter un produit à vos favoris et acheter un produit par carte bancaire avec Stripe ou en espèce directement sur place.

Lors de l'achat en ligne d'un produit, un document de votre commande va se créer sur la base de données Firebase. Vous allez être dirigé vers l'api Stripe pour payer. Puis votre commande va être en status « Payé », un QRCode avec les informations de votre commande va se créer et vous serez rediriger vers une page de l'application confirmant votre commande.

Pour un achat en espèce, un document de votre commande va se créer, le status de la commande va être « En attente de paiement », un QRCode avec les informations de la commande va être créer et vous serez invité à aller payer puis récupérer votre commande sur place.

Vous retrouverez le code source sur : https://github.com/ioTactile/cubes5-bde

Conclusion

Jusqu'à présent à CESI, je n'avais jamais eu à réaliser un projet individuel dans le cadre de ma formation. Cela m'a permis d'évaluer mes compétences et de travailler de manière autonome pour mener à bien ce projet. Cette expérience à été très enrichissante pour moi car elle m'as permis de faire une application e-commerce de A à Z et d'apprendre de nouveaux outils comme Stripe, d'approfondir mes compétences sur Nuxt.js, en Typescript et sur Firebase.

Merci de m'avoir lu jusqu'au bout, à bientôt!