Rapport du Projet de Fin d’Année

Intitulé du projet :

Conception et réalisation d’une

application web Click and Collect

Réalisé par : Encadré Par : Membre de Jury

Mr. BOUZRI Mohamed Mr. DAIF Abderahmane Mr. AZOUAZI Mohamed

Mr. FDOUACHE Ayoub

Mr. OUBAR Hicham

Année universitaire : 2021/2022

Page laissée intentionnellement vide
 Remerciement

Il est agréable d’exprimer nos reconnaissances auprès de toutes les personnes, dont
l’intervention au cours de ce projet, a favorisé son aboutissement.

Tout d'abord, nous adressons nos remerciements à notre professeur Mr.

Abderrahmane DAIF, notre encadrant, pour ses conseils qui nous a aidé dans la
réalisation de projet et la rédaction du rapport.

Nous ne serons oubliées dans nos remerciements Mr. AZOUAZI Mohamed, d’avoir
accepté de juger notre travaille.

Nous tenons à présenter un remerciement bien distingué à tout le cadre professoral de

la filière ingénierie informatique et réseaux de l’EMSI, pour la formation qu’il nous a
prodiguée.
 Abstract

This document presents the work carried out as part of an end-of-year project in the 4th
year of computer engineering and networks at the Moroccan school of engineering
sciences.

The objective of the project is to create a click and Collect web application, to put into
practice the knowledge acquired in the 4th year of computer engineering and networks.

This document considers in its first part the global study on the project as well as its
general context, while emphasizing the functional and non-functional needs, as well as
the problematic, we will then present the analysis and design of the project.

The last chapter will be devoted to the tools and technologies used to carry out this
project, as well as the presentation of the final project in the form of a screenshots.
 Résumé

Ce rapport présente le travail effectué dans le cadre d’un projet fin d’année en 4ème
année ingénierie informatique et réseaux à l’école marocaine des sciences de
l’ingénieur.

L’objectif du projet est de réaliser une application web click and Collect, pour mettre en
pratique les connaissances acquises en 4ème année Ingénierie informatique et réseaux.

Le présent document envisage dans sa première partie l’étude globale sur le projet ainsi
que son contexte général, tout en mettant l’accent sur les besoins fonctionnels et non
fonctionnels ainsi problématique. Nous présenterons par la suite l’analyse et la
conception du projet.

Le dernier chapitre serai consacré aux outils et technologies utilisés pour réaliser ce
projet, ainsi que la présentation du projet final sous forme des captures d’écran.
 Glossaire

Click and Collect : Également appelé "check and reserve" ou "click and pick up",
ce mode de vente permet au client de réserver en ligne un ou plusieurs produits
disponibles en magasin, le client indique le magasin dans lequel il souhaite se rendre
pour retirer son produit.

Pictogramme : également appelé pictographie, est une représentation graphique

schématique, un dessin figuratif stylisé ayant fonction de signe. Dans les langues écrites
il ne transcrit pas la langue orale.

Un récit utilisateur, ou « user story » en anglais, est une description simple d’un
besoin ou d’une attente exprimée par un utilisateur et utilisée dans le domaine
du développement de logiciels et de la conception de nouveaux produits pour
déterminer les fonctionnalités à développer.
 Introduction Générale

De nos jours, les attentes des consommateurs augmentent de plus en plus. Cette
évolution favorise de nouvelles stratégies pour rapprocher les sites d’e-commerce et les
commerces physiques. De nouvelles solutions répondent à ces attentes, comme le Click
and Collect.

Cette méthode innovante permet de faire converger e-commerce et vente en magasin

pour le bonheur des consommateurs. Le Click and Collect ne cesse de s’améliorer et
propose des services toujours plus innovants afin de répondre aux besoins
d’immédiateté de la part des clients.

La tendance du Click and Collect se popularise dans le monde entier car les enseignes
sont à la recherche de nouvelles expériences et d’un large choix de points de contact à
proposer à leurs clients. Le Click and Collect se distingue du schéma d’achat traditionnel
en magasin par la possibilité pour le client de vérifier si l’article est disponible et de le
réserver pour le récupérer plus tard.

Dans un contexte concurrentiel, les enseignes ne s’interrogent pas que sur l’intérêt
du Click and Collect, elles veulent être certaines de tirer parti d’un comportement
d’achat qui se généralise pour augmenter leur part de marché. Selon des estimations
récentes, le Click and Collect représentera bientôt la moitié du chiffre d’affaires des
ventes en ligne de nombreuses enseignes.

Le parcours d’achat est devenu multiple. C’est-à-dire que le consommateur a le choix

d’être « full store » (il se renseigne auprès de vendeurs), d’être « full digital » (il achète
sur le web) mais il peut aussi faire un mixe des deux qu’on va appeler le comportement
ROPO (Research Online, Purchase Offline). Dans la lignée de ce nouveau
comportement, les enseignes voient progresser le phénomène « Click and Collect ».

C’est une pratique qui se répand chez des consommateurs de plus en plus exigeants et
familiers avec la nouvelle technologie. Le consommateur effectue de plus en plus ses
recherches via le canal digital. Ses principales motivations sont le prix, le gain de temps
et la possibilité de comparer les offres.

7
Le présent document représente la solution click and Collect que nous avons proposés,
Dans sa première partie nous allons illustrer le contexte du projet général du projet, en
parlant de l’objectif du projet ainsi que la méthodologie de travaille utilisés dans ce
projet, qui est la méthode scrum, vue que la planification est un axe très important
dans ce type de méthodologie de travaille, nous allons en parler.
Le 2ème chapitre du document est consacré à la partie analyse et conception, où on réa-
lisera une étude des besoins, ainsi qu’une élaboration des différents diagrammes UML
utilisés durant la réalisation du projet.
La dernière partie du rapport sera pour présenter les outils et les technologies utiliser
ainsi qu’une présentation générale de l’application.

8
 Table des matières
Remerciement ..............................................................................................................3
Abstract .......................................................................................................................4
Résumé ........................................................................................................................5
Glossaire ......................................................................................................................6
Introduction Générale ..................................................................................................7
Table des matières .......................................................................................................9
Liste des Figures ........................................................................................................11
Liste des Tableaux .....................................................................................................12
Liste des abréviations .................................................................................................13
Chapitre I : Contexte Général Du Projet ..................................................................14
I.1 Introduction ..................................................................................................15
I.2 Présentation du projet ...................................................................................15
I.3 Objectif du Projet ..........................................................................................15
I.4 Pilotage projet ............................................................................................... 16
I.4.A Méthodologie de travaille .......................................................................16
I.4.B Découpage du projet...............................................................................17
I.4.C Planification ...........................................................................................18
I.5 Conclusion ....................................................................................................19
Chapitre II : Analyse et Conception ......................................................................20
II.1 Introduction ..................................................................................................21
II.2 Etude des besoins ..........................................................................................21
II.2.A Besoins fonctionnels ...........................................................................21
II.2.B Besoins non fonctionnels ....................................................................22
II.3 Récits utilisateur (User Stories) .....................................................................22
II.4 UML .............................................................................................................37
II.5 Diagrammes des cas d’utilisation ..................................................................37

9
 II.5.A Client et Utilisateur .............................................................................38
II.5.B Manager et Admin ..............................................................................39
II.6 Digramme de classe ......................................................................................40
II.7 Diagrammes de séquence ..............................................................................41
II.7.A Gestion Produit ...................................................................................41
II.7.B Gestion des Commandes .....................................................................42
II.7.C Authentification ..................................................................................43
II.7.D Gestion des managers ..........................................................................44
II.7.E Gestion des magasins .........................................................................45
Chapitre III : Réalisation ........................................................................................46
III.1 Introduction ............................................................................................... 47
III.2 Outils et Technologies ...............................................................................47
III.2.A ReactJS ............................................................................................... 47
III.2.B MySQL ............................................................................................... 48
III.2.C Spring Boot .........................................................................................48
III.2.D Spring Security ...................................................................................49
III.2.E Hibernate ............................................................................................49
III.2.F Npm ....................................................................................................50
III.2.G Git.......................................................................................................50
III.2.H GitHub ................................................................................................ 51
III.2.I Xampp ................................................................................................ 51
III.3 IDE ............................................................................................................52
III.3.A IntelliJ IDEA.......................................................................................52
III.3.B VS Code .............................................................................................53
III.3.C PowerDesigner ....................................................................................54
III.4 Démonstration ...........................................................................................55
Conclusion .................................................................................................................64
Webographie ..............................................................................................................65

10
 Liste des Figures

FIGURE I.1 LES SPRINTS DU PROJET .............................................................................18

FIGURE I.2:DIAGRAMME DE GANTT ............................................................................19
FIGURE 3 DIAGRAMME DE CAS D'UTILISATION CLIENT & UTILISATEUR .......................38
FIGURE II.2 DIAGRAMME DE CAS D’UTILISATION ADMIN & MANAGER ........................39
FIGURE II.3 : DIAGRAMME DE CLASSE ........................................................................40
FIGURE II.4 : DIAGRAMME SEQUENCE - GESTION PRODUIT...........................................41
FIGURE II.5 DIAGRAMME DE SEQUENCE (GESTION DES COMMANDES).........................42
FIGURE II.6 DIAGRAMME DE SEQUENCE (IDENTIFICATION) .........................................43
FIGURE 9 DIAGRAMME DE SEQUENCE-GESTION DES MANAGERS .................................44
FIGURE 10 DIAGRAMME DE SEQUENCE-GESTION DES MAGASINS ................................ 45
FIGURE III.1 : LOGO REACTJS .....................................................................................47
FIGURE III.2 : LOGO MYSQL ......................................................................................48
FIGURE III.3 : LOGO SPRING BOOT ..............................................................................49
FIGURE III.4 : LOGO SPRING SECURITY .......................................................................49
FIGURE III.5 : LOGO HIBERNATE .................................................................................50
FIGURE III.6 : LOGO NPM ............................................................................................50
FIGURE III.7 : LOGO GIT ..............................................................................................51
FIGURE III.8 : LOGO GITHUB ......................................................................................51
FIGURE III.9 : LOGO XAMPP ......................................................................................51
FIGURE III.10 : LOGO INTELLIJ ...................................................................................52
FIGURE III.11 : LOGO VISUAL STUDIO CODE ............................................................... 53
FIGURE III.12 : LOGO POWERDESIGNER ......................................................................54
FIGURE III.13: LISTE DES PRODUITS ............................................................................55
FIGURE III.14 : PAGE PANIER ......................................................................................57
FIGURE III.15 : PAGE D'ENREGISTREMENT ...................................................................58
FIGURE III.16 : PAGE LOGIN ........................................................................................59
FIGURE III.17: LISTE DES CONSOMMATEURS. ..............................................................60
FIGURE III.18 : LISTE DES COMMANDES ......................................................................61
FIGURE III.19 : AJOUT DE PRODUIT .............................................................................62
FIGURE III.20 : INTERFACE MES COMMANDES .............................................................63

11
 Liste des Tableaux

TABLEAU I-1 : TABLEAU DE REPARTIONS DES ROLES ..................................................17

12
 Liste des abréviations

Abréviation Désignation

UML Unified Modeling Language

WPS Work Breakdown Structure

13
Chapitre I : Contexte Général Du
Projet

14
 I.1 Introduction
Cette partie constitue le premier volet du document, dont nous présenterons le contexte
général du projet.

I.2 Présentation du projet

Le Click and Collect est un mode d’achat qui donne au client la possibilité de réserver
ou de commander en ligne des produits disponibles en magasin, puis de se rendre dans
la boutique physique qu’il aura sélectionnée pour les récupérer.

Ce principe s’apparente sur la vente en ligne, mais on parle ici plutôt d’une réservation.
En effet, ce n’est pas l’équivalent de l’achat en ligne : pas de paiement en ligne, le client
ne sort sa carte bancaire que dans un second temps, en magasin.

I.3 Objectif du Projet

En période de crise, le but du Click and Collect est d’éviter le regroupement des
personnes dans les magasins, avec le problème récurrent de la file d’attente. Pour ceux
qui peuvent le mettre en place, c’est une bonne alternative pour continuer à vendre.

Ce qui peut être un frein, c’est l’organisation que cela demande : faire respecter les
distances de sécurité tout en garantissant une fluidité d’achat en magasin.

Heureusement, le Click and Collect comporte énormément d’avantages. Voici les plus
intéressants pour votre business :

Prix : Le Click and Collect est moins cher que la livraison à domicile. Aucun emballage,
aucun frais d’envoi des colis.

Fidélisation de votre clientèle : Avec cette possibilité, vous consolidez le lien avec vos
clients les plus habitués, et ça n’a pas de prix.

Disponibilité : Vous prouvez que vous êtes réactif puisque vous êtes toujours en mesure
de continuer à vendre malgré le contexte sanitaire.

15
 I.4 Pilotage projet
I.4.A Méthodologie de travaille
La méthodologie Scrum incarne la plus utilisée des méthodes Agiles existantes. Le
terme anglais “scrum”, qui signifie “mêlée” en français, apparaît pour la première fois
en 1986, dans une publication de Hirotaka Takeuchi et Ikujiro Nonaka. Le texte décrit
une nouvelle approche du développement de produits, plus rapide et plus flexible. Les
auteurs comparent alors cette nouvelle méthode au rugby à XV.

Le principe de base est simple. L'équipe avance ensemble et reste prête à réorienter le
projet au fur et à mesure de sa progression. Elle agit en cela comme des rugbymen qui
se passent le ballon de main en main jusqu'à marquer un essai

Comme pour toute méthode Agile, l'équipe Scrum est auto-organisée et

pluridisciplinaire. Elle choisit la meilleure façon d’accomplir son travail et possède
toutes les compétences nécessaires à l'accomplissement du projet. La flexibilité, la
créativité et la productivité de l'équipe sont ainsi optimisées.

L'équipe Scrum se compose en outre de :

 Un Scrum Master, qui occupe le rôle de coach pour les équipes de

développement.
 Un Product Owner, ou “propriétaire du produit” en français, assimilable au chef
de projet.
 Une équipe de développement.

16
 Rôle Personne(s)

Scrum Master H. Oubari, M. BOUZRI et A. Fadouache

Product Owner H. Oubari et M. BOUZRI

Equipe de développement H. Oubari, M. BOUZRI et A. Fadouache

Tableau I-1 : Tableau de repartions des rôles

I.4.B Découpage du projet

Découper un projet permet de mieux gérer la complexité et le risque de projets, estimer
le coût et la durée des projets, répartir dans le temps la production et les ressources.

Découper un projet consiste à identifier des composants quasi autonomes, présentant les
caractéristiques suivantes :

 Chaque composant donne lieu à un résultat bien identifié

 La charge propre à chacun peut être évaluée
 Les contraintes d'enchaînement de réalisation entre les composants sont repérables
o Certains composants peuvent être réalisées parallèlement, d'autres sont
liés entre eux par des contraintes d'antériorité
 Le découpage est fait à des mailles différentes
o Un composant étant souvent à son tour décomposé.

Le projet est découpé en 5 sprints (Figure I-1)

17
 I.4.C Planification
La planification a pour objectif d'organiser le déroulement des étapes du projet dans le
temps. Une tâche fondamentale pour la maîtrise des délais Prévisionnelle La
planification de projet vise à établir des prévisions raisonnables et à prévoir
l’ordonnancement des différentes tâches du projet.

I.4.C.a Les sprints

Figure I.1 les sprints du projet

18
 I.4.C.b Digramme de Gantt

Figure I.2:diagramme de Gantt

I.5 Conclusion
Dans cette partie de document, nous avons exposé une vue plus générale sur le projet

19
Chapitre II : Analyse et Conception

20
 II.1 Introduction
Nous allons consacrer cette partie de document aux différents aspects de phase analyse
et conception.

II.2 Etude des besoins

II.2.A Besoins fonctionnels
Le fonctionnement du Click and Collect permet de bénéficier des avantages du e-
commerce et de ceux du point de vente.

En pratique, le processus comprend les étapes suivantes :

 Le client souhaite faire une e-réservation : il se rend sur le site web (food4s).
 Il choisit le produit de son choix sur la page produit.
 Il clique sur le produit et l’option « Réserver gratuitement en magasin » ou une
expression similaire pour le « Click and Collect » lui est proposée.
 Une fois l’option click and Collect sélectionnée, la page panier s’ouvre en affichant
les produits en cours avec le l’option commandée.
 Une fois commandée, une page s’ouvre contenant la liste des anciens commandes
passées.
 Les magasins proches de chez lui disposent du produit choisi en stock, grâce à un
système de géolocalisation.
 Le client n’a plus qu’à choisir le magasin le plus proche et l’heure qui lui convient
pour récupérer son bien.
 La commande en ligne est passée et le paiement s’effectuera en magasin au moment
du retrait.
Tout cela s’opère dans un délai particulièrement rapide, ce qui implique une gestion en
temps réel des stocks du magasin et les moyens techniques pour en assurer le bon
fonctionnement.

21
 II.2.B Besoins non fonctionnels
II.2.B.a Fiabilité
L’application doit fonctionner de façon cohérente sans erreurs et doit être satisfaisante

II.2.B.b Ergonomie et bonne interface

L’application doit être adapté à l’utilisateur sans qu’il ne fournisse aucun effort
(utilisation claire et facile) de point de vue navigation entre les différentes pages.

II.2.B.c Aptitude à la maintenance et réutilisation

L’application (code) doit être conforme à une architecture standard et claire permettant
sa maintenance. En travaillant sur le paradigme programmation orienté aspect (POA)
qui permet de traiter séparément les préoccupations transversales, qui relèvent souvent
de la technique, des préoccupations métier, qui constituent le cœur d'une application

II.3 Récits utilisateur (User Stories)

22
ID : 1 Taille : 3

Titre Liste Produits

Description

En tant que Client

Je souhaite Avoir une liste des produits

Afin de Commander certains

Règles métier

 Lister les produits disponibles en stock

Tests d’acceptance
 donné
Etant Etant donné
que je que
suisjesur
suis
la sur
pagela d’accueil,
page d'accueil,
alors alors plu-
plusieurs
sieurs
produits produits apparaissent.
apparaissent.

23
ID : 2 Taille : 3

Titre Chercher Produit

Description
En tant que Client

Je souhaite chercher des produits

Afin de Passer des commandes sur des produits particuliers

Règles métier
 Sélectionner catégorie des produits souhaités

 Remplir les informations des produits souhaités obliga-

toire (exemple quantité)

 Ajouter au panier


Tests d’acceptance

 Etant donné que je suis sur la page accueil lorsque je
choisis la catégorie du produit ou bien faire une re-
cherche d'un produit souhaité alors plusieurs produits
apparaissent.
 Etant donné que je suis sur la page home lorsque je
saisis le produit alors la page produit apparait.
 Etant donné que je suis sur la page produit 'lorsque je
remplis les détails du produit alors je clique sur le bu-
ton ajouter au panier.

24
ID : 3 Taille : 5

Titre Valider commande en cours

Description
En tant que client

Je souhaite avoir les détails de ma commande en cours

Afin de la valider.

Règles métier
 Avoir une commande en cours.

 Validation de la commande.

 Choix entre livraison ou click&collect

Tests d’acceptance

Etant donné que je suis sur la page panier, je dois avoir les
détails sur ma commande en cours (ex. produits de
commande, prix total…), lorsque je suis sûre de mon panier,
alors je valide, et je reçois un reçu concerne la commande,
pour la suivre.

25
ID : 4 Taille : 5

Titre Avoir un panier

Description
En tant que client

Je souhaite avoir un panier

Afin de gérer mes produits

Règles métier
 Avoir une commande en cours.

Tests d’acceptance
 Etant donné que je suis sur la page d'accueil, lorsque
j'accède au page panier alors je consulte mes articles
en cours.
 Etant donné que je suis sur la page panier, lorsque je
modifie certains produits, alors les informations de la
commande seront modifiées (exemple prix de la
commande).

26
ID : 5 Taille : 3

Titre Créer compte

Description
En tant que client

Je souhaite se connecter à l’application

Afin d'avoir un compte sur l’application

Règles métier
 Pour se connecter il faut avoir un compte, sinon je dois
créer un compte

 Remplir toutes les informations personnelles demandés

 Le mot de passe doit être composé de 8 caractères avec

au minimum 1 chiffre et 1 majuscule

 d’acceptance
Tests

 Etant donné que je suis sur la page connexion (créer

compte), lorsque je saisie le formulaire alors la page
d'accueil apparait

27
ID : 6 Taille : 3

Titre Profile

Description
En tant que client

Je souhaite avoir une interface mon compte

Afin de modifier certaines informations personnelles

Règles métier
 Le mot de passe doit être composé de 8 caractères avec
au minimum 1 chiffre et 1 majuscule

Tests d’acceptance

 Etant donné que je suis sur la page mon compte lors-

que je modifie mes informations alors j'enregistre.

28
ID : 7 Taille : 3

Titre Historique commandes

Description
En tant que client

Je souhaite avoir une interface pour gérer mes commandes

Afin de suivre mes commandes ainsi que gérer mon

historique commandes

Règles métier
 Avoir déjà passer des commandes

 Sauvegarder Toute Modifications

 Une Commande Traité ne sera annulée

Tests d’acceptance
 Etant donné que je suis sur la page d'accueil, lorsque je
passe à la page mes commandes alors je consulter mes
commandes
 Etant donné que je suis sur la page mes commandes
lorsque je veux annuler une commande alors j'annule la
commande et je sauvegarde ces modifications.

29
ID : 8 Taille : 5

Titre Liste commandes

Description

En tant que gestionnaire

Je souhaite avoir une liste des commandes

Afin de gérer ces commandes

Règles métier
 Seules les commandes dans le périmètre définie seront
acceptées

 Commandes récentes placées au début.

Tests d’acceptance
 Etant donné que je suis sur l’interface commande
lorsque je veux gérer la liste des commandes en cours
alors je visualise les commandes

30
ID : 9 Taille : 5

Titre
Rechercher commandes

Description
En tant que gestionnaire

Je souhaite faire une recherche d’une commande

Afin d’accéder directement à une commande particulière

Règles métier

 Chercher les commandes non traitées.

 Commandes traitées sont moins prioritaires.

Tests d’acceptance

Etant donné que je veux traiter une commande particulière,

alors je peux chercher cette commande par client ou par
date.

31
ID : 10 Taille : 7

Titre
Traitement d’une commande

Description

En tant que gestionnaire

Je souhaite accéder à une commande

Afin de modifier le statut d’une commande en fonction de

niveau de préparation de cette commande

Règles métier

 Vérification de disponibilité du produit, concerné par la

commande

Tests d’acceptance

Etant donné que je suis sur la page commande, lorsque je veux

modifier l’état de cette commande. Alors elle sera modifier

32
ID : 11 Taille : 7

Titre
Historique des commandes

Description
En tant que admin

Je souhaite consulter la liste des utilisateurs

Afin d’avoir une vision générale sur les utilisateurs et leurs

commandes

Règles métier
 Afficher le profil du client

 Afficher toutes les commandes du client depuis la

création de son compte

Tests d’acceptance

 Etant donné que je suis sur la page liste-users lorsque je

clique sur le button détails alors je visualise le profil
d’utilisateur.
 Etant donné que je suis sur le profil d’utilisateur alors je
visualise l’historique des commandes.

33
ID : 12 Taille : 11

Titre Gestion des produits

Description
En tant que admin

Je souhaite gérer la liste des produits

Afin d’ajouter, consulter, modifier et supprimer un produit

Règles métier
 Ajouter/modifier un produit en replissant les champs
requis.

 Supprimer un produit dans le cas où il n’est pas dans

une commande en cours.

Tests d’acceptance

 Etant donné que je suis sur la page liste-produits lorsque

je clique sur le button détails je visualise une page qui
m’affiche détails d’un produit avec deux butons à
l’intérieur de cette page (supprimer, modifier).
 Etant donné que je suis sur page détaille-produit, lorsque
je veux affecter un produit à un store, alors je dois avoir
la liste des stores.

34
ID : 13 Taille : 11

Titre Gestion des stores

Description
En tant que admin

Je souhaite gérer la liste des stores

Afin d’ajouter, modifier, supprimer et affecter un produit à

un store

Règles métier
 Ajouter un store en remplissant les informations néces-
saires.

 Modifier un store par exemple l’état de store

fermée/ouvert

 Supprimer un store dans le cas que l’adresse de ce store

n’a pas de commande en cours de récupération.

Tests d’acceptance

Etant donné que je suis sur la page stores lorsque je visualise

les stores, alors je peux modifier ou supprimer un store.

35
 ID : 14 Taille : 11

Titre Gestion des managers

Description

En tant que admin

Je souhaite gérer la liste des managers

Afin d’ajouter, modifier, supprimer et affecter manager à un

store

Règles métier
 Ajouter/modifier un manager en replissant tous les
champs requis

 Affecter un manger à un autre store en vérifiant sa dispo-

nibilité.

 Supprimer un manager dans le cas qu’il n’est pas seul qui

gère un store

Tests d’acceptance

Etant donné que je suis sur la page liste-managers, lorsque je

clique sur le button détails d’un manger je visualise les
informations de ce manager, alors je peux modifier le type de ce
manager ou bien affecter à un autre store.

36
 II.4 UML
Le Langage de Modélisation Unifié, de l'anglais Unified Modeling Language (UML),
est un langage de modélisation graphique à base de pictogrammes conçu comme une
méthode normalisée de visualisation dans les domaines du développement logiciel et
en conception orientée objet.

II.5 Diagrammes des cas d’utilisation

L'objectif d'un diagramme de cas d'utilisation UML est de représenter les différentes
façons dont un utilisateur peut interagir avec un système.

37
 II.5.A Client et Utilisateur

Creer Compte

Gestion Panier

Utilisateur

<<include>>

Valider Commande
Authentification

<<include>>

Gérer Profil

Gérer Commandes
<<include>>

Client

Annuler Commande Consulter Commandes Suivre Commande

Figure 3 Diagramme de cas d'utilisation client & utilisateur

38
 II.5.B Manager et Admin

<<include>>
Gestion des Commandes

Manager

<<include>>
Gestion des Comptes

<<include>>
Authentification
Gestion des Magasins

Gestion des Managers

<<include>>

Admin

Figure II.2 Diagramme de cas d’utilisation admin & manager

39
 II.6 Digramme de classe
Categorie
- Id : int ClickCollect Personne
- Nom : String - Id : int - Id : int
- Date_Recup : Date - Nom : String
- Email : String
1..* - Password : String
1..1
- Type : String
Produit 1..1
- ID : int
- Nom_Prd : String
1..* 1..1 1..*
- Prix_Ut : Double 1..1
- Description : String
- Image : Byte 1..1
Commande
- Id : int Client
- Prix_Total : Double
- Tel : Long
- Date_commande : Date
1..* 0..* - Date_recuperation : Date
1..1
1..*
1..*

Magasin
- Id : int 1..1
1..*
- Nom : String
- Image : Byte 1..1

Gerant
- Image : Byte

1..1 1..1

1..*
Adresse
- GeoKey : String
- CityCode : String
- CityName : String 1..1
- Latitude : String
- Longitude : String

Figure II.3 : Diagramme de classe

40
 II.7 Diagrammes de séquence
II.7.A Gestion Produit
Gestion des Produits C&C

Interface produit Produit

Admin Manager

Acces au formulaire d'ajout

Saisir des informations

Validation d'ajout

AjouteProduit

alt Champ manque ou produit exist Erreur

Demande de ressayer
Ajouter
Nouvel essai

Confirm l'ajout
Produit ajoute
Afficher Confirmation

Choisir un produit

Modifier les informations

Modifier produit

alt Champ manque ou invalides Erreur

Demande de connection

Connection apportees
Modifier

Produit modifee
Modification confirmee
Affiche la confirmation

Affiche liste produits

Chosir un produit
Consulter Consulter Produit
Liste des produits
Affiche les informations du produit

Choisr le produit a supprimer

Validation
Supprimer Supprimer produit

Produit supprimer
Confirmation de suppresion

Figure II.4 : diagramme séquence - gestion produit

41
 II.7.B Gestion des Commandes
Gestion des commandes C&C

Interface Panier suivi Commande System Commande

Client
Liste produits choisis

Valider la commande Login

alt Pas client

Redirection vers espace perso
Reconnecter

Client Ok Acces espace client

Valider Commande

Chosis option click&collect

alt Loin

vérifier la position
La commande Refuser

Proche

vérifier la position
La commande Accepter

Choisir commande

Suivre la commande

Suivi commande

Renvoyer l'etat de commande

Affichage du suivi

Figure II.5 Diagramme de séquence (Gestion des commandes)

42
 II.7.C Authentification
Identification C&C

Interface
Interface Inscription Utilisateur CompteUser
Auth

User
Saisie informations

alt Champs manquants

Demande correction

Effectuer correction

Ajouter utilisateur

Inscription Ok

Operation terminee

Confirmation

Saisie email et password

alt Champs vides ou invalides

Affiche l'erreur
Demande reesseyer

Effectuer nouvel essai

Acces Ok

Utilisateur active

Redirection selon role

Figure II.6 Diagramme de séquence (Identification)

43
 II.7.D Gestion des managers
Gestion des magasins C&C

Interface Magasin Magasin

Admin

Acces au formulaire d'ajout

Saisir des informations

Validation d'ajout

Ajouter Magasin

alt Champ manque ou magasin exist Erreur

Demande de ressayer

Ajouter Nouvel essai

Magasin ajoute Confirm l'ajout

Afficher Confirmation

Chosir magasin
Modifier magasin

alt Champ manque ou invalides Erreur

Modifier
Magasin modifee
Modification confirmee

Affiche liste des magasins

Chosir un magasin
Consulter Magasin
Consulter Liste des Magasins
Affiche les informations du magasin

choisri le magasin

Validation
Supprimer magasin
Supprimer
Magasin supprimer
Confirmation de suppresion

Figure 9 Diagramme de séquence-Gestion des managers

44
 II.7.E Gestion des magasins
Gestion des magasins C&C

Interface Magasin Magasin

Admin

Acces au formulaire d'ajout

Saisir des informations

Validation d'ajout

Ajouter Magasin

alt Champ manque ou magasin exist Erreur

Demande de ressayer

Ajouter Nouvel essai

Magasin ajoute Confirm l'ajout

Afficher Confirmation

Chosir magasin
Modifier magasin

alt Champ manque ou invalides Erreur

Modifier
Magasin modifee
Modification confirmee

Affiche liste des magasins

Chosir un magasin
Consulter Magasin
Consulter Liste des Magasins
Affiche les informations du magasin

choisri le magasin

Validation
Supprimer magasin
Supprimer
Magasin supprimer
Confirmation de suppresion

Figure 10 Diagramme de séquence-Gestion des magasins

45
Chapitre III : Réalisation

46
 III.1 Introduction
Le présent chapitre représente les principales outils et technologies utilisés pour réaliser
le projet, ainsi que la présentation finale du projet

III.2 Outils et Technologies

III.2.A ReactJS
React est une bibliothèque JavaScript open-source qui est utilisée pour construire des
interfaces utilisateur spécifiquement pour des applications d'une seule page. Elle est
utilisée pour gérer la couche d'affichage des applications web et mobiles. React nous
permet également de créer des composants d'interface utilisateur réutilisables. React a
été créé par Jordan Walke, un ingénieur logiciel travaillant pour Facebook. React a été
déployé pour la première fois sur le flux d'informations de Facebook en 2011 et sur
Instagram.com en 2012.

React permet aux développeurs de créer de grandes applications web qui peuvent
modifier les données, sans avoir à recharger la page. L'objectif principal de React est
d'être rapide, évolutif et simple. Il ne fonctionne que sur les interfaces utilisateur de
l'application. Cela correspond à la vue du modèle MVC. Il peut être utilisé avec une
combinaison d'autres bibliothèques ou frameworks JavaScript, tels que Angular JS
dans MVC.

Figure III.1 : logo ReactJS

47
 III.2.B MySQL
MySQL est un système de gestion de bases de données relationnelles SQL open source
développé et supporté par Oracle.

C’est la réponse courte, en une phrase, à la question « qu’est-ce que MySQL », mais
décomposons cela en termes un peu plus humains.

Une base de données n’est qu’une collection structurée de données qui est organisée
pour en faciliter l’utilisation et la récupération. Pour un site WordPress, ces « données »
sont des choses comme le texte de vos articles de blog, des informations pour tous les
utilisateurs enregistrés sur votre site, des données chargées automatiquement, des
configurations de paramètres importants, etc.

Figure III.2 : logo MySQL

III.2.C Spring Boot

Spring Boot est un Framework développé par Pivotal en 2012 qui connaît depuis environ
4 ans, une explosion du nombre d’utilisateurs. C’est un point d’entrée unique vers tous
les projets de la IO Foundation (batch, ligne de commande, web...) que vous pourrez
donc utiliser dans votre application.

Grâce à une configuration par défaut, une application Spring Boot permet de développer
plus rapidement en se focalisant essentiellement sur le code métier. On dira que Spring
Boot a une « opinion ». Bien entendu, ces fonctionnalités par défaut peuvent être
modifiées pour correspondre aux besoins. Cela implique de respecter les conventions et
règles imposées par Spring afin d’éviter de perdre trop de temps sur de la configuration
applicative. Cela nous permet notamment d’éviter d’écrire de multiples fichiers de
configuration en XML.

48
 Figure III.3 : logo Spring boot

III.2.D Spring Security

Spring Security est un Framework de sécurité léger qui fournit une authentification et
un support d’autorisation afin de sécuriser les applications Spring. Il est livré avec des
implémentations d’algorithmes de sécurité populaires.

Cet article nous guide tout au long du processus de création d’un simple exemple de
connexion à une application avec Spring Boot, Spring Security, Spring Data JPA et
MYSQL

Figure III.4 : logo Spring Security

III.2.E Hibernate
Hibernate est une solution open source de type ORM (Object Relational Mapping) qui
permet de faciliter le développement de la couche persistance d'une application.
Hibernate permet donc de représenter une base de données en objets Java et vice versa.

Hibernate facilite la persistance et la recherche de données dans une base de données en

réalisant lui-même la création des objets et les traitements de remplissage de ceux-ci en

49
accédant à la base de données. La quantité de code ainsi épargnée est très importante
d'autant que ce code est généralement fastidieux et redondant.

Hibernate est très populaire notamment à cause de ses bonnes performances et de son
ouverture à de nombreuses bases de données

Figure III.5 : logo Hibernate

III.2.F Npm
npm est le gestionnaire de paquets officiel de Node.js. Sa maîtrise est obligatoire pour
tout développeur voulant travailler dans cet environnement car il est présent à toutes les
étapes de la création, du développement et de la maintenance des applications Node.js.

Figure III.6 : logo npm

III.2.G Git
Git est un logiciel de versioning créé en 2005 par Linus Torvalds, le créateur de Linux.

Un logiciel de versioning, ou logiciel de gestion de version est un logiciel qui permet de

conserver un historique des modifications effectuées sur un projet afin de pouvoir
rapidement identifier les changements effectués et de revenir à une ancienne version en
cas de problème.

Les logiciels de gestion de versions sont quasiment incontournables aujourd’hui car ils
facilitent grandement la gestion de projets et car ils permettent de travailler en équipe
de manière beaucoup plus efficace.

50
 Figure III.7 : logo git

III.2.H GitHub
GitHub est un site web et un service de cloud qui aide les développeurs à stocker et à
gérer leur code, ainsi qu’à suivre et contrôler les modifications qui lui sont apportées.

Figure III.8 : logo GitHub

III.2.I Xampp
XAMPP est un ensemble de logiciels permettant de mettre en place un serveur Web
local, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une
distribution de logiciels libres offrant une bonne souplesse d'utilisation, réputée pour son
installation simple et rapide.

Figure III.9 : logo XAMPP

51
 III.3 IDE

III.3.A IntelliJ IDEA

IntelliJ IDEA est un IDE intelligent et tenant compte du contexte qui permet de travailler
sur toutes sortes d'applications en Java et dans d'autres langages de la JVM tels que
Kotlin, Scala et Groovy. De plus, IntelliJ IDEA Ultimate vous aide à développer des
applications web full-stack grâce à ses puissants outils intégrés, à la prise en charge de
JavaScript et de ses technologies connexes et à la prise en charge avancée de frameworks
populaires tels que Spring, Spring Boot, Jakarta EE, Micronaut, Quarkus et Helidon.
IntelliJ IDEA peut être complété par des plugins gratuits développés par JetBrains afin
de pouvoir travailler avec d'autres langages de programmation, parmi lesquels Go,
Python, SQL, Ruby et PHP.

Figure III.10 : logo IntelliJ

52
 III.3.B VS Code

Visual studio code ou VS Code est un éditeur de code développé par Microsoft en
2015. Contrairement à ce à quoi Microsoft a eu l’habitude de nous habituer durant des
années, il est l’un de ces premiers produits open source et gratuit, et surtout disponible
sur les systèmes d’exploitation Windows, Linux et Mac. Vs code est développé avec le
Framework Electron et conçu principalement pour développer des projets
avec Javascript, Node.js ou encore Type Script.

Figure III.11 : logo Visual Studio Code

53
 III.3.C PowerDesigner

PowerDesigner est un logiciel de conception créé par la société SAP, qui permet de
modéliser les traitements informatiques et leurs bases de données associées. Il a été créé
par SDP sous le nom AMC*Designor, racheté par Powersoft qui lui-même a été racheté
par Sybase en 1995.

Figure III.12 : logo PowerDesigner

54
 III.4 Démonstration
La figure ci-dessous représente un exemple d’interface utilisateur ou il peut parcourir
les diffèrent produits.

Figure III.13: Liste des produits

55
Le client dans cette interface spécifie la quantité du produit voulu, et l’ajouter a son
panier.

56
Dans cette page le client peut gérer ces produits, comme il peut valider la commande en
appuyant sur le bouton ‘Order’.

Figure III.14 : page panier

57
Figure III.15 : page d'enregistrement

58
Figure III.16 : page login

59
Figure III.17: Liste des consommateurs.

60
A ce niveau le manager d’un certain magazine peut gérer les diffèrent commandes qui
arrive en temps réel, il peut accepter, refuser ou accéder au détaillés d’une commande.
Avec une option de recherche multicritère

Figure III.18 : liste des commandes

61
Dans cette interface l’administrateur peut ajouter un produit à au magasine qu’il gère.

Figure III.19 : Ajout de produit

62
Le client visualise la liste de ses commandes, ainsi que leur statut.

Figure III.20 : interface mes commandes

63
 Conclusion

Il est clair que la méthode d'achat click and Collect va devenir plus populaire à l'avenir.
Au fur et à mesure que les consommateurs prendront conscience des avantages offerts
par cette méthode, ils seront plus enclins à l'utiliser lorsqu'ils ont besoin de quelque
chose rapidement ou qu'ils ne veulent pas attendre la livraison. La possibilité de
récupérer des articles dans un magasin près de chez vous aide également à réduire la
congestion dans les zones surpeuplées, car les gens passent moins de temps à se déplacer
entre les magasins et à rentrer chez eux.

64
 Webographie

https://reactjs.org/docs/getting-started.html

65