33 0 2MB
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éalisera 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
Personne(s)
Rôle 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 ecommerce 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 Titre
Taille : 3 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 donné suis la d’accueil, page d'accueil, pluEtant que je que suisjesur la sur page alors alors plusieurs sieurs produits apparaissent. produits apparaissent.
23
ID : 2 Titre
Taille : 3 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 obligatoire (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 recherche 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 buton ajouter au panier.
24
ID : 3 Titre
Taille : 5 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 Titre
Taille : 5 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 Titre
Taille : 3 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
Tests d’acceptance 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 Titre
Taille : 3 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 lorsque je modifie mes informations alors j'enregistre.
28
ID : 7 Titre
Taille : 3 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 Titre
Taille : 5 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 Titre
Taille : 7 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 Titre
Taille : 7 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 Titre
Taille : 11 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 Titre
Taille : 11 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écessaires. 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
Taille : 11
ID : 14 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 disponibilité. 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
Valider Commande Authentification
Gérer Profil
Gérer Commandes
Client
Annuler Commande
Consulter Commandes
Suivre Commande
Figure 3 Diagramme de cas d'utilisation client & utilisateur
38
II.5.B Manager et Admin
Gestion des Commandes
Manager
Gestion des Comptes
Gestion des Magasins
Gestion des Managers
Authentification
Admin
Figure II.2 Diagramme de cas d’utilisation admin & manager
39
II.6
Digramme de classe Categorie
- Id : int - Nom : String
1..*
ClickCollect
Personne
- Id : int - Date_Recup : Date
1..1 Produit
-
-
ID Nom_Prd Prix_Ut Description Image
: : : : :
Id Nom Email Password Type
: : : : :
int String String String String
1..1 int String Double String Byte
1..1
1..*
1..*
1..1 1..1 Commande
0..*
1..*
-
Id Prix_Total Date_commande Date_recuperation
: : : :
int Double Date Date
Client - Tel : Long 1..1 1..*
1..* Magasin - Id : int - Nom : String - Image : Byte
1..1
1..*
1..1 Gerant - Image : Byte
1..1
1..1 1..*
Adresse -
GeoKey CityCode CityName Latitude Longitude
: : : : :
String String String String String
1..1
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 Admin
Produit
Manager Acces au formulaire d'ajout Saisir des informations Validation d'ajout AjouteProduit
alt
Champ manque ou produit exist Demande de ressayer
Erreur
Ajouter Nouvel essai Confirm l'ajout
Produit ajoute Afficher Confirmation
Choisir un produit Modifier les informations Modifier produit alt
Champ manque ou invalides Demande de connection
Erreur
Connection apportees Modifier Produit modifee Modification confirmee Affiche la confirmation
Affiche liste produits Chosir un produit Consulter Produit
Consulter
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 alt
Login
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 Inscription
Interface Auth
Utilisateur
CompteUser
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 Demande de ressayer
Ajouter
Erreur
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 Demande de ressayer
Ajouter
Erreur
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