Projet 5 - Orinoco

Afin de valider le 5éme projet de ma formation chez Openclassrooms, j’ai réalisé ce site e-commerce en Html/CSS et JavaScript.

Les enjeux du projet sont les suivants :

  • L’utilisation de deux fonctionnalités principales de JavaScript : le localStorage pour remplir le panier et le paramètre de l’url pour remplir la page ‘produit’.
  • La rédaction d’un plan de test pour montrer comment serait testé le site e-commerce avant la mise en production.

Pour le développement de ce site e-commerce j’ai le choix entre la ventre de différents produits :

  • Des ours en peluche fait-main,
  • Des caméras vintages,
  • Des meubles en chêne.

J’ai choisi de partir sur la vente d’ours en peluche fait-main.

Utilisation d'une API REST

API est une abréviation qui signifie Application Programming Interface (ou interface de programmation d’application, en français). En résumé, il s’agit d’un moyen de communication entre deux logiciels (soit différents composants d’une application, soit deux applications différentes).

Voici les caractéristiques principales d’une API. Elles permettent de :

  • Communiquer des données.
  • Communiquer entre différents composants de l’application et entre l’application et d’autres développeurs. Ceci se fait grâce à l’utilisation de requêtes et de réponses.
  • Donner un moyen d’accès aux données de façon réutilisable et standardisée.
Voici leurs avantages principaux :
  • Les développeurs peuvent utiliser des API publiques et privées.
  • Les API publiques sont utilisables par tous sans restriction.
  • Les API privées sont utilisables seulement par ceux qui ont un accès et y sont autorisés.
Schéma flux entre site / serveur / base de données

Utilisation du CRUD

Le CRUD est la liste des actions de base que vous pouvez effectuer sur une ressource. C’est un acronyme qui signifie Create (créer), Read (lire), Update (mettre à jour), et Delete (supprimer). Bien que le CRUD ne constitue pas vraiment un mécanisme technique en soi, chaque action CRUD est associée à un verbe HTTP.

CRUD - Actions et Verbes associés

Pour ce projet, je dois utiliser 2 requêtes type du CRUD : GET et POST. Une des requêtes GET devra être associé à un id, c’est-à-dire un numéro unique pour chaque article en vente.

CRUD - Actions et Verbes associés

Page d'Accueil

Pour la page d’accueil voici les enjeux en terme de fonctionnalités :

  • Afficher les différents oursons à mettre en vente sur le site en récupérant ces information dans la base de données via l’API,
  • En développement web ceci revient à récupérer les informations avec une requête HTTP de type GET.
Page d'accueil Orinoco - site e-commerce

Page Produit

Pour la page produit voici les enjeux en terme de fonctionnalités :

  • Affichage de l’ensemble des informations d’un seul nounours sur cette page quand on clic dessus dans la page d’accueil.
  • En développement web ceci revient à utiliser le paramètre de l’url (dans lequel est présent l’id du produit en question et donc son numéro de référence). On fait donc une requête vers l’API de type GET/:_id (correspondant à un nounours précis).
  • Possibilité d’ajouter l’ourson au panier avec un bouton dédié.
  • En langage web ceci revient à récupérer les informations élémentaires concernant le nounours et les placer dans le localStorage.
Page 'produit' Orinoco

Page Panier

Pour la page panier voici les enjeux en terme de fonctionnalités :

  • Récupérer les nounours placés dans le panier.
  • En langage web ceci revient à récupérer les informations présentent dans le localStorage.
  • Afficher un formulaire de demande d’information qui sera rempli par l’utilisateur. Celui-ci doit être bien complété pour pouvoir passer la commande.  
  • Afficher le prix global des produits du panier.
  • Afficher le bouton ‘Passer commande’ à la fin du questionnaire.
  • En JavaScript ceci revient à faire une requête à l’API de type POST. Celle-ci contiendra le nom contact et le(s) produit(s). L’api nous renverra les mêmes informations en plus d’un n° de commande unique.
Page 'mon panier' Orinoco

Page Commande

Pour la page commande voici les enjeux en terme de fonctionnalités :

  • On affiche les 3 éléments suivants : le nom de contact, les produits achetés et le n° de commande.
  • En développement web, ceci nous amène à récupérer l’ensemble des éléments renvoyés par la requête POST réalisé au moment où la commande a été passé.
Page 'mes commandes' Orinoco

Code JavaScript pour afficher le prix total de la commande

Pour calculer le prix total de la commande en JavaScript :

  • On crée à tableau vide (qui est une variable),
  • On utilise une boucle pour ajouter dans ce tableau le prix de chaque article (qu’il y en est 1 ou 5…),
  • On utilise la fonction JavaScript .reducter pour calculer la somme des entrées du tableau. Reducer prends le 1er chiffre puis le 2nd et les ajoute, puis il fait de même, il prend le chiffre ajouté et il l’ajoute au 3éme chiffre…
Calcul du prix total de la commande

Pour afficher le prix total de la commande en JavaScript :

  • On crée dans le fichier Html un titre h3,
  • On lui donne un parent : ici l’élément nommé divFormElt. Cette étape est essentielle, si on ne relie pas l’élément nouvellement créer à un autre il n’apparaîtra pas dans notre interface.
  • On entre du texte dans cet élément nouvellement créé H3 qui reprend la variable sum calculer précédemment. On doit la diviser par 100 puis les API renvoie des prix sans virgule (2500 € au lieu de 25€). Enfin, on rajouter en string (en texte) le symbole €.
Affichage du prix total de la commande

Plan de test

Voici un extrait du plan de test élaboré pour le recettage du projet avant la mise en ligne.

Extrait du plan de test

Site e-commerce en vidéo

Découvrez en vidéo le site e-commerce Orinoco !

Pour ce projet je ne me suis concentrée sur les fonctionnalités JavaScript à mettre en place et non pas sur le design…

Mes réalisations

Venez découvrir mes autres réalisations…