Rapport PFA 2022 [PDF]

Zitiervorschau

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