Consultante JS/Kotlin chez Shodo, passionnée de Craft
HTML/CSS
Le client, Kanap, est une marque de canapés. Il souhaite avoir une plateforme de e-commerce en plus de sa boutique physique pour vendre ses produits sur Internet.
Le backend est déjà réalisé, ainsi que l’intégration web. Mon travail sur ce projet à donc consisté à consommer cette API pour rendre dynamiques les pages et à développer la gestion du panier.
L’application web est composée de 4 pages :
J’ai choisi d’utiliser Visual Studio Code, ainsi que les plugins Live Server et Prettier afin de faciliter le développement.
J’ai également versionné mon code avec Git et GitHub. Vous trouverez le repository ici.
Ce projet a été l’occassion pour moi de mettre en pratique mes conaissances en JavaScript. J’y ai appris :
URLSearchParams
J’ai également appris à réaliser un plan de test d’acceptation.
Fonctionnalité | Action | Résultat attendu | Résultat observé | |
---|---|---|---|---|
1 | Une page d’accueil montrant (de manière dynamique) tous les articles disponibles à la vente. | Ouvrir sur la page d’accueil du site web dans un navigateur | Affichage de l’ensemble des produits | OK |
2 | Une page produit affichant de manière dynamique les détails d’un produit | Ouvrir sur la page d’un produit du site web dans un navigateur | Affichage des détails d’un produit | OK |
3 | Ajout d’un produit au panier | Choisir une quantité, une couleur et cliquez sur le bouton « ajouter au panier » | Rediriger vers la page panier | OK |
4 | Une page panier montrant (de manière dynamique) tous les articles présents dans le panier | Ouvrir sur la page panier du site web dans un navigateur | Affichage de l’ensemble des produits | OK |
5 | Modifier la quantité d’un article du panier | Modifier la quantité d’un article dans le panier | La quantité est mise à jour ainsi que le total du nombre d’article et du prix est mis à jour | OK |
.6. | Supprimer la quantité d’un article du panier | Supprimer un article du panier | Le produit disparait de la page et le total du nombre d’article et du prix est mis à jour | OK |
7 | Passer commande | Remplir le formulaire depuis la page panier et cliquer sur « Commander ! » | Redirection vers la page de confirmation ou un message de confirmation est affiché ainsi que le numéro de la commande | OK |
8 | Passer commande | Remplir le formulaire depuis la page panier et saisir une adresse email invalide avant de cliquer sur « Commander ! » |
Un message d’erreur s’affiche sous le champ email | OK |