TP11_SP

Last modified by Pascal Graffion on 2020/04/29 10:52

TP 11 Spring : Gestion du caddy

Expression des besoins

Après avoir fait une étude de marché, YAPS veut mettre également en place un système de caddy électronique pour ses clients. Ces derniers, une fois authentifiés, pourront consulter le catalogue d'animaux domestiques et avoir la possibilité de les placer dans un caddy. Ils pourront en ajouter autant qu'ils le désirent, en modifier la quantité, les supprimer du caddy puis, « passer à la caisse ». Lorsque le client valide son caddy, une commande est créé automatiquement.

Vue utilisateur

Diagramme de cas d'utilisation

UCCaddy.png

Figure 1 - Use case concernant le caddy du client

Cas d'utilisation « Gérer son caddy »

NomGérer son caddy.
RésuméPermet à un client de gérer son caddy d'animaux domestiques.
ActeursInternaute.
DescriptionLorsqu'un internaute s'authentifie, il peut alors visualiser le catalogue d'animaux domestiques et en ajouter dans son caddy (shopping cart). Un menu Add to cart (ajouter au panier) vient s'ajouter en face de chaque article. Un simple clic permet d'ajouter un article. Si l'internaute veut modifier cette quantité par défaut, il peut le faire. Ainsi que supprimer un article qu'il ne voudrait plus. Lorsque la quantité d'un article est inférieure ou égale à zéro, l'article est automatiquement supprimé du caddy.Durant sa session, le client peut visualiser le contenu de son caddy quand bon lui semble. Lorsque le caddy est vide, un message en avertit le client. Lorsqu'il contient au minimum un article, le système l'affiche avec sa description, sa quantité, son prix unitaire et le sous-total (prix unitaire * quantité). Le montant total du caddy est aussi renseigné.Ce caddy est illimité en taille, un client peut donc acheter autant d'articles qu'il souhaite.
Post-conditionsLes articles sont ajoutés et mis à jour dans le caddy.

Cas d'utilisation « Valider son caddy »

NomValider son caddy.
RésuméPermet à un client de valider son caddy d'animaux domestiques.
ActeursInternaute.
Pré-conditionsCas d'utilisation Gérer son caddy.
DescriptionLorsqu'un internaute achète des animaux domestiques, il les ajoute tout d'abord dans un caddy électronique, puis, le valide. Cette validation permet au système de créer un bon de commande (voir cas d'utilisation Gérer les commandes) avec les informations contenues dans le caddy ainsi que les données du client.Une fois la commande créée, le caddy du client est automatiquement vidé.
Post-conditionsUne commande est créée.

Ecrans

Lorsque l'internaute s'authentifie, un nouveau menu apparaît en haut de la page : Cart. Ce lien permet d'afficher le contenu du caddy. Si ce dernier est vide, la page affiche un message avertissant le client.

ScrEmptyCaddy.png

Figure 4 - Le caddy est vide

Pour remplir le caddy il suffit de se rendre sur la page des articles et de cliquer sur le lien Add to cart. Cette action ajoute dans le caddy l'article sélectionné avec sa quantité à un.

ScrAddToCart1.png

Figure 5 - Ajouter un article à partir de la page liste

ScrAddToCart2.png

Figure 6 - Ajouter un article à partir de la page détail

ScrShowCart.png

Figure 7 - Page permettant de gérer le contenu du caddy

L'écran ci-dessus s'affiche lorsqu'on ajoute un article dans le panier ou lorsque l'on clique sur le lien Cart. Cette page permet de visualiser et de modifier le contenu du caddy. Sur la colonne de gauche est listé le nom de l'article ainsi que la description du produit auquel il appartient. Sur la colonne de droite le prix unitaire de l'article ainsi que son sous-total (quantité * prix unitaire). Au bas du tableau s'affiche le montant total du caddy.

Au centre de la liste, le client a la possibilité de supprimer un article (en cliquant sur Remove) ou de mettre à jour sa quantité (cliquer sur Update). Les sous-totaux et le total sont automatiquement mis à jour.

Lorsque le contenu de son caddy lui convient, le client le valide en cliquant sur Check Out. Il est alors redirigé vers une page qui lui confirme la création de la commande et lui en donne le numéro (order id).

ScrShowOrder.png

Figure 8 - Page affichant la confirmation de la commande

Analyse et conception

Vue logique

Le caddy est représenté par un Stateful Session Bean. Ce bean possède un attribut de type Map qui stocke uniquement l'identifiant de l'article sélectionné par le client, ainsi que la quantité. Le composant ShoppingCartBean possède plusieurs méthodes permettant d'agir sur le contenu de la Map :

NomRôle
getCart()Retourne l'attribut shoppingCart de type Map.
Collection getItems()Renvoie une liste de ShoppingCartDTO, ce qui permet l'affichage du contenu du caddy.
addItem(String itemId)Rajoute un article dans le caddy.
removeItem(String itemId)Supprime un article du caddy.
updateItemQuantity(String itemId, int newQty)Modifie la quantité d'un article.
getTotal()Retourne le montant total du caddy.
empty()Vide le caddy.

Vue processus

Le caddy est mis à jour uniquement par l'application Petstore Web. Il n'existe pas d'équivalent dans l'application swing. Pour cela, chaque action d'ajout d'article dans le caddy, de mise à jour ou de suppression se fait uniquement au travers de servlet. Le paquetage com.yaps.petstore.web.servlet.cart comporte les servlets suivantes :

NomRôle
AddItemToCartServletAjoute un article dans le caddy.
CheckoutServletValide le caddy en créant un bon de commande.
RemoveItemFromCartServletSupprime un article du caddy.
UpdateCartServletMet à jours la quantité d'un article.
ViewCartServletRécupère le contenu du caddy pour l'afficher.

Le diagramme de séquence ci-dessous nous montre comment l'application web ajoute un article dans le caddy et en modifie la quantité.

En tout premier lieu, le client clique sur le lien Add to cart de la page item.jsp. Cette action appelle la AddItemToCartServlet en passant l'identifiant de l'article. La servlet invoque la classe delegate qui recherche le Stateful Session Bean ShoppingCart (utilisant le ServiceLocator) et appelle la méthode addItem(). Cette méthode rajoute l'identifiant de l'article avec une quantité à 1 dans la Map. Cette mise à jour terminée, la servlet AddItemToCartServlet délègue l'affichage à la servlet ViewCartServlet .

La ViewCartServlet invoque à deux reprises le ShoppingCartDelegate. Une première fois pour afficher la liste des articles avec leur description et prix (getItems) puis une deuxième fois pour afficher le montant total du caddy (getTotal).

La mise à jour des quantités du caddy suit la même logique. En cliquant sur le bouton Update, la servlet UpdateCartServlet appelle le bean ShoppingCart (via le delegate) qui met à jour la quantité, puis délègue l'affichage à la servlet ViewCartServlet.

SDAddArticle.png

Figure 12 - Ajout d'un article dans le caddy et mise à jour de la quantité

Vue implémentation

Architecture

Vue déploiement

Implémentation

Recette utilisateur

Téléchargez les classes de test représentant la recette utilisateur et exécutez la classe AllTests.

Les tests Selenium sont enrichis par un nouveau test validateOrder.html qui simule la création d'une commande par l'internaute.

Résumé

Références

Tags:
Created by Pascal Graffion on 2020/04/29 10:52