Angular 2 – Site de e-commerce simplifié sur architecture MEAN

Martin Abadie
Martin Abadie
Étudiant en master 2 d'informatique, spécialité AIGLE (Architecture et InGénierie du Logiciel et du wEb), à l'université de Montpellier, je suis passionné par les nouvelles technologies et le Raspberry.

 

 

L’architecture MEAN est une architecture de développement d’application web qui est composée de :

  • MongoDB qui est une base de donnée non-SQL
  • Express qui est un framework pour créer des applications serveurs avec NodeJS
  • Angular2 qui est un framework pour le côté client
  • Node.js qui est un serveur JavaScript

 

Angular2 est le successeur d’Angular.js depuis 2015. Ce framework a subit d’importantes évolutions durant l’automne 2016. Ce framework permet de développer une application côté client en TypeScript, ce qui facilite la Programmation Orientée Objet. Un transpiler tsc traduit votre code TypeScript en JavaScript qui sera interprété par tous les navigateurs.

Express étant un framework JavaScript, les fichiers de sortie de votre application Angular2 étant en JavaScript et l’application côté serveur développée pour Node.js étant développée en JavaScript, cette architecture est dite « full JavaScript » (c’est-à-dire entièrement écrite en JavaScript).

 

Cette application  a été développée dans le carde d’un projet universitaire consistant à réaliser une Single Page Application d’e-commerce client-serveur avec une architecture MEAN.Cette application d’e-commerce ne contient qu’une partie recherche de produits, et une partie vente. Ces deux parties sont modélisée en deux modules ayant chacun des composants :

  • Module de recherche qui contient :
    • Composant de recherche de produit par marque
    • Composant de recherche de produit par type
    • Composant de recherche de produit par prix
  • Module panier qui contient :
    • Composant d’ajout d’un produit au panier
    • Composant de suppression d’un produit du panier
    • Composant de vidage du panier
    • Composant de récupération du panier à la session précédente

On ne s’intéresse donc pas à la partie paiement ou même à une partie identification des utilisateurs, elle est donc mono-utilisateur.

Déroulement d’une recherche de marque Apple puis de l’ajout d’un produit iPhone 7 dans le panier :

***       Début      ***

-> L’utilisateur saisie une marque puis clique sur Rechercher

-> Le composant de recherche par marque envoie une requête au serveur sous forme de Route

-> Le serveur capte la Route et questionne la collection Produits de la base de donnée MongoDB avec la marque passée dans la Route

-> MongoDB renvoie au serveur une liste de type json contenant tous les produits Apple contenus dans la base de donnée au serveur

-> Le serveur envoie au client cette liste de produits

-> Le composant de recherche par marque affiche tous les produits contenus dans la liste puis dessine des étoiles (d3.js) sous chaque produit pour illustrer sa popularité

-> L’utilisateur clique sur le produit ce qui appel le composant d’ajout du module Panier

-> Le composant d’ajout envoie une Route au serveur avec les informations du produit à ajouter au panier

-> Le serveur ajoute à la base de donnée le produit dans la collection Panier puis questionne la base de donnée sur le contenue de cette collection

-> Le serveur envoie au client la liste des produits contenus dans le panier

-> Le composant d’ajout du module Panier affiche les produits contenus dans le panier

***     Fin     ***

Vous pouvez accéder au code source ici 😊