[Titre du document]

Signatures

ESPRIT
 [Titre du document]

Dédicaces

ESPRIT
 [Titre du document]

Remerciements

ESPRIT
 [Titre du document]

Sommaire
Introduction générale…………………………………………………………..1
Chapitre 1 :contexte de texte...............................................................................3
Introduction..........................................................................................................4
1 Cadre de projet :............................................................................................4
2 Présentation de l’organisme d’accueil :.......................................................4
3 Description de sujet :.....................................................................................6
4 Etude de l’existant :.......................................................................................6
4.1 Analyse de site Mytek :............................................................................6
4.2.Analyse de site shopa :.............................................................................8
5 Problématique :..............................................................................................9
6 Solution proposée :.........................................................................................9
7 Méthodologie du travail :..............................................................................9
7.1 Le concept agile :....................................................................................10
7.2 Étude comparative entre quelques méthodes agiles :.........................10
7.3 choix Scrum :..........................................................................................12
7.4 Les rôles dans Scrum :...........................................................................13
Conclusion :........................................................................................................13
Chapitre 2 :Spécification des besoins analyse et conception ......................15
Introduction :......................................................................................................16
1 Identification et analyse des besoins :........................................................16
1.1 Identification des acteurs :....................................................................16
1.2 Identification des besoins fonctionnels :..............................................16
1.2.1 besoins fonctionnels :.......................................................................16
1.2.2 Identification des besoins non fonctionnels......................................18
2 Elaboration du Backlog produit :..............................................................19
3 Diagramme de cas d’utilisation :................................................................22
4 Diagramme de classe général :....................................................................24

ESPRIT
 [Titre du document]

5. Diagramme de déploiement system :.........................................................25

6 Planification des sprints :............................................................................25
Conclusion...........................................................................................................27
Chapitre 3 : Phase de réalisation ......................................................................28
Introduction........................................................................................................29
1. plateforme de développement :..................................................................29
2. Environnement de projet:..........................................................................31
2.1 Environnement matériel :.....................................................................31
2.2 Environnement logiciel:.........................................................................31
2.2.1 Visual studio code:............................................................................31
2.2.2 PostgreSQL server :..........................................................................32
2.2.3 Les langages utilisés :.......................................................................32
3. sprints :.........................................................................................................34
3.1 Sprint 1 :.................................................................................................35
3.1.1 Sprint backlog...................................................................................35
3.1.2 Diagramme d’activité sprint 1 :.......................................................36
3.1.3 Diagramme de sequence sprint 1 :...................................................37
3.1.4 Phase de réalisation du sprint 1 :.....................................................37
3.2 sprint 2 :..................................................................................................38
3.2.1 Sprint backlog :.................................................................................38
3.2.2. Diagramme de composants <<Produit>> :...................................39
3.2.3. Réalisation de sprint 2:....................................................................39
3.3 Sprint 3 :.................................................................................................41
3.3.1 Sprint backlog :.................................................................................41
3.3.2. Diagrammes séquence de sprint 3 :................................................42
3.3.3. Diagramme d’activité de sprint 3 :..................................................44
3.3.4. Réalisation de sprint 3 :...................................................................45
3.4. Sprint 4 :................................................................................................47
3.4.1.Sprint backlog :.................................................................................47

ESPRIT
 [Titre du document]

3.4.2. Les diagrammes :............................................................................48

3.4.3. Réalisation de sprint 4:....................................................................50
3.5. Sprint 5 :................................................................................................53
3.5.1 Sprint backlog :.................................................................................53
3.5.2 Réalisation d’un system de recommandations :..............................53
3.5.2.1 Types d’un system de recommandations :.................................53
3.5.3. Concept de la méthode similitude cosinus :....................................56
3.5.4. Réalisation de premier système de recommandations:...................58

ESPRIT
 [Titre du document]

Liste des figures

Figure 1 : Site Mytek.......................................................................................................................6
Figure 2:Barre de menu de site Mytek............................................................................................6
Figure 3:Catalogue de site Mytek....................................................................................................7
Figure 4:Catalogue de site shopa.....................................................................................................8
Figure 5:Scrum..............................................................................................................................13
Figure 6:Diagramme de cas d’utilisation général..........................................................................23
Figure 7:Diagramme de classe général..........................................................................................24
Figure 8:diagramme de déploiement system.................................................................................25
Figure 9:Relation entre services Back-end et le front-end de l’application..................................29
Figure 10:Architecture NodeFramework Node.js utilisé dans le projet :......................................30
Figure 11:Logo framework Express Js..........................................................................................30
Figure 12:Logo React....................................................................................................................31
Figure 13:Interface de visual studio code......................................................................................32
Figure 14:logo JavaScriptPython :................................................................................................33
Figure 15:Logo Python..................................................................................................................33
Figure 16:Logo JSONtypeORM :..................................................................................................34
Figure 17:Logo TypeORM............................................................................................................34
Figure 18:Diagramme d’activité sprint 1.......................................................................................36
Figure 19:Diagramme de séquence sprint 1..................................................................................37
Figure 20:Interface de login..........................................................................................................37
Figure 21:Interface d’inscription...................................................................................................38
Figure 22:Diagramme de composants <<Produit>>....................................................................39
Figure 23:Catalogue du site...........................................................................................................40
Figure 24:Différents méthodes d’affichage des articles................................................................40
Figure 25:Filtre par catégorie Figure 26:Filtre par catégorie Figure 27:Filtre par couleur........40
Figure 28:Choix de langue de devise............................................................................................41
Figure 29:Diagrammes séquence de sprint 3.................................................................................43
Figure 30:Diagrammes d’activité de sprint 3................................................................................44
Figure 31:Interfaces de comparaison entre articles.......................................................................45
Figure 32:L’ajout de deux produits pour les comparer.................................................................45
Figure 33:L’ajout des produits à la commande.............................................................................46
Figure 34:L’ajout des produits à la wishlist..................................................................................46
Figure 35:L’ajout des informations personnelles pour le paiement..............................................47
Figure 36:L’entrée des informations concernant la carte de paiement..........................................47
Figure 37:L’ajout des informations dans le profil.........................................................................50
Figure 38:Changement du mot de passe du compte......................................................................50
Figure 39:L’ajout de l’adresse de l’utilisateur...............................................................................51
Figure 40:Système de recommandation d’Amazon.......................................................................54
Figure 41:Système de recommandation de Netflix......................................................................54

ESPRIT
 [Titre du document]

Figure 42:La méthode de classification.........................................................................................55

Figure 43:Concept de filtrage collaboratif.....................................................................................55
Figure 44:création des vecteurs selon la pondération....................................................................56
Figure 45:Représentation des vecteurs..........................................................................................56
Figure 46:La distance entre les deux vecteurs...............................................................................57
Figure 47:Calcul du cos de l’angle................................................................................................57
Figure 48:l’importation des librairies............................................................................................58
Figure 49:L’entrée des données.....................................................................................................58
Figure 50:La conversion des colonnes..........................................................................................59
Figure 51:Ajout d’une colonne qui englobe toutes les autres colonnes choisies précédemment..59
Figure 52:Utilisation de méthode similitude cosinus après vectorisation des données.................60
Figure 53:Rédaction des méthodes de recherche dans la data......................................................60
Figure 54:Appel des méthodes développées.................................................................................61
Figure 55:Test du résultat d’algorithme........................................................................................61

ESPRIT
 [Titre du document]

Liste des tableaux

Tableau 1:Les inconvénients rencontrés et leurs solutions...............................................10
Tableau 2:Étude comparative entre quelques méthodes agiles.........................................13
Tableau 3:Backlog produit...............................................................................................23
Tableau 4:Planification des sprints...................................................................................28
Tableau 5:Sprint 1 backlog..............................................................................................37
Tableau 6:Sprint 2 backlog..............................................................................................40
Tableau 7:Sprint 3 backlog..............................................................................................43
Tableau 8:Sprint 4 backlog..............................................................................................49
Tableau 9:Sprint 5 backlog..............................................................................................54

ESPRIT Page 1
 [Titre du document]

Introduction Générale 

Les réalités tendent toujours à changer, et il est maintenant indispensable que chaque entreprise tire
avantage des canaux de vente qui sont à sa disposition, et surtout de ne pas rester stagnante dans un
monde qui ne cesse pas évoluer d`une façon constante.

Des ventes et des achats en personne de mains en mains, vers des transactions électroniques,
passent les priorités de ces opérations de vente des services et de différents produits, ce qui nous
pousse à donner une grande importance à la vente en ligne.

Les consommateurs resteront toujours des consommateurs, ils continueront à acheter, mais la façon
elle-même dont ils ont habitude à faire les choses est en transition. En effet, le commerce virtuelle
est ici depuis un moment, n’est plus un secret et sa popularité est désormais toujours en croissance.

Les boutiques virtuelles sont maintenant de plus en plus conseillés pour les modernes sociétés .Ces
sites sont considérés comme un pont de passage aux informations, produits, et services d’une
certaine entreprise en se basant sur un portail bien unique. Et les fermetures successives de certaines
grandes surfaces le prouvent.

C’est dans ce cadre que nous élaborons notre projet de fin d’étude qui consiste à proposer une
solution dont l’objectif est de suivre l’évolution de la satisfaction des client et de proposer un site
web quotidiennement mis à jours sans la moindre contrainte, ce qui leur permettrai de ne jamais être
obligé à reporter certaines courses, ainsi d’exclure les problèmes de distance géographique,
d’horaire des études ou de travail mais aussi de l’indisponibilité des moyens de transport.

Ce rapport se compose de trois chapitres comme suit :

Dans le premier chapitre, cadre du projet, on présentera l’organisme d’accueil et le contexte général
du travail. On développera également la problématique posée et les objectifs visés pour évoquer
enfin la solution choisie et la méthodologie adoptée pour la réalisation de ce travail.

Le deuxième chapitre est dédié pour les principales exigences de notre application,
spécifications des besoins, analyse et conception « la modélisation conceptuelle » et nous clôturons
par un planning de travail.

ESPRIT Page 2
 [Titre du document]

Dans le troisième chapitre on a outils et technologies décrit les outils et les technologies
utilisés pour la conception et la réalisation et le développement de l’application en respectant les
principes fondamentaux de Scrum.

ESPRIT Page 3
 [Titre du document]

Chapitre 1  :
:

Contexte de sujet

Introduction
Dans ce premier chapitre, nous commençons par présenter l’organisme qui nous a accueillis pour la
réalisation de notre projet de fin d’études. Ensuite, nous présentons le contexte du projet ainsi que la
problématique. Enfin, une étude de l’existant qui présente une phase primordiale pour comprendre

ESPRIT Page 4
 [Titre du document]

les limites des sites existants et souligne l’importance de la mise en œuvre de notre solution
proposée.

1 Cadre de projet :
C’est dans le périmètre de notre formation et étude d’ingénieur en section INFINI dans ESPRIT
-l’Ecole Supérieur Privée d’Ingénierie et de Technologie- que s’inscrit ce projet de fin d’études. Le
présent travail est réalisé dans la startup Tridevs qui nous a accueillis de réaliser ce projet pour une
durée de six mois.

2 Présentation de l’organisme d’accueil :

Présentation Tridevs :
Date de création : Décembre 2016

Développement des sites marchands et solutions de paiement sécurisé, développement de CMS Open
source, Application mobile (iOS,Android) SMS mailing Responsive design, développement de CRM
installation et adaptation d’outils, outils de gestion de projet, développement des modules d’ Intranet et
d’Extranet, mise en place de web service et définir le KPI et utiliser les bons outils de reporting pour vous
donner de la visibilité sur la performance de votre platform.

La société :

ESPRIT Page 5
 [Titre du document]

ESPRIT Page 6
 [Titre du document]

3 Description de sujet :
La mission consiste à développer une boutique virtuelle pour présenter, commercialiser et
livrer nos produits et nos divers services à nos clients, que nous estimons devenir de plus en plus
nombreux. L'objectif est concevoir et développer un site web commercial qui doit permettre
l’inscription des visiteurs pour devenir clients, le suivi des commandes effectuée, la gestion des
payements en lignes et le suivi des livraisons.

4 Etude de l’existant :
Il est primordiale avant de se lancer dans la conception de tout projet, de bien étudier et
analyser des projets similaires pour profiter des avantages et éviter les malveillances dans le projet
actuel.
Pour bien connaitre la satisfaction des clients des enseignes il faut faire une
comparaison avec des concurrents directs.
Pour cela j’ai choisi deux sites très fameux dans la vente en ligne en Tunisie le premier est
www.Mytek.tn el le deuxième est www.shopa.tn .

4.1 Analyse de site Mytek :

 Inconvénients :

ESPRIT Page 7
 [Titre du document]

Figure 1 : Site Mytek

- Un grand espace de la page est réservé à la pub de façon que de premier coup l’utilisateur
pensentqu’ils se sont pointé sur un site publicitaire et non pas un site de vente.

Figure 2:Barre de menu de site Mytek

- Les catégories sont présentées sous forme d’une barre de menu ce qui limite l’ajout d’autres
catégories car si on ajoute plusieurs catégories nous obtiendrons soit une longue barre de menu ce
qui entrainera l’apparence
d’une barre de défilement
horizontale dans la page,
soit minimisation
de la taille de la barre et
donc changement de
l’aspect de la page.
- Beaucoup de couleurs avec
des tendances différentes ce
qui cause une sorte d’incohérence entre les vues, le client se trouve perdu dans la grande variété des
couleurs abandonnant le but principal du site.
- Excès des images, des animations et des liens même en doublant les mêmes images dans la même
page.
- plusieurs liens se trouvant sur le site sont presque invisibles, ce qui diminue la chance de
multiplicité de clients.

ESPRIT Page 8
 [Titre du document]
Figure 3:Catalogue de site Mytek

- Les meilleures ventes et les nouveaux articles sont affichés au milieu de la page avec les autres
produits, ce qui ne leur attire point l’attention.
- Le panier est disponible pour tout le monde sans inscription, ce qui provoque les commandes
non rigoureuses entrainant au remplissage de la base de données sans le moindre intérêt.

 Avantages :
- Titres claires.
- Informations disponibles sur la même page ce qui donne une idée très claire sur les produits
dès la première visite des pages.
- Les numéros de contact des boutiques de Mytek sont clairs.

4.2.Analyse de site shopa  :

 Inconvénients :

-l’inexistence des tris pour les produits comme par exemple : tri par prix, tri par popularité...

Figure 4:Catalogue de site shopa

-l’inexistence des filtres généralement comme par exemple : filtre par couleur, filtre par
disponibilité..
-l’existence de plusieurs catégories qui ne possèdent pas des articles en relation d’elles : des
catégories vides de produits.

ESPRIT Page 9
 [Titre du document]

 Synthèse :

Les inconvénients rencontrés Solutions proposées

L’incohérence des couleurs proposés dans
certains sites.
L’utilisation de barre de menus et des
bannières publicitaires
La disponibilité de panier pour tout le monde
sur la page accueil, menant à un bourrage de
commandes non validées.
L’inexistence des filtres dans la recherche
Un grand nombre d’images sur la même
page.
Tableau 1:Les inconvénients rencontrés et leurs solutions
Utilisation des couleurs simples dans notre
modèle évitant de risquer que quelques liens
seront cachés à cause de ce choix.
Utilisation des listes déroulante qui reste
toujours flexible en cas d’ajout d’une
certaine catégorie.
Le panier sera dans notre site disponible
seulement pour les clients après l’inscription
et l’authentification.
L’utilisation des filtres pour simplifier et
faciliter les recherches d’un article bien
définis.
Utilisation d’une technique qui permet
d’afficher par deux, quatre ou huit produits
selon le choix d’utilisateur.

5 Problématique :

L’exposition et la vente des produits à guichet ou par l’intermédiaire des agents

commerciaux n’est plus pratique dans nos jour.
D’où, le commerce électronique qui aide à améliorer la productivité de votre organisation. Il
permet aux transactions d’avoir lieu 24 heures par jour, 7 jours par semaine, sans nécessiter votre
participation active à tout heure du jour et de la nuit. Cela vous rend plus efficace et offre un
meilleur service à la clientèle. Vous bénéficiez également d’un meilleur contrôle des stocks.

6 Solution proposée :

Afin de faciliter le shopping à distance, nous proposons d’informatiser la commercialisation

de nos produits par la création d’une boutique virtuelle sur Internet. Il nous est indispensable de
préciser à cette étape que notre projet de fin d’étude prendra en considération toutes ces contraintes

ESPRIT Page 10
 [Titre du document]

en essayant de présenter les solutions nécessaires tout en respectant les règles des jeux d’un site web
tels que la simplicité de navigation entre les pages, la bonne ergonomie et la sécurité des données
confidentielles des clients.

7Méthodologie du travail :

Le choix de la méthodologie qui sera mis en place doit répondre aux besoins de futur client
et permettre de développer une application évolutive. C’est pour cette raison, nous avons choisi une
méthode qui permet au client le suivi et la visibilité, en d’autres termes une implication dans le
cycle de développement. Il faut que cette méthode assure une livraison rapide du produit et permet
au client de juger le fonctionnement de système. Pour mieux choisir la méthodologie adéquate avec
notre projet, nous avons opté à une comparaison de différentes méthodologies telles que RUP, XP,
Scrum afin de déterminer notre choix de la méthodologie qui couvre les besoins de client

7.1 Le concept agile  :

Le Manifeste Agile (AgileManifesto ) est le premier document à déclarer officiellement la
méthodologie agile en 2001. Cette méthodologie consiste en un ensemble des bonnes pratiques qui
dirigent la conduite de plusieurs types de projet. Certes, ses pratiques se manifestent essentiellement
en développement informatique. L’avantage majeur d’une telle méthodologie est l’implication
durable du client, ce qui génère une réactivité brusque à ses demandes d’où une énorme satisfaction
du besoin réel du client.

7.2 Étude comparative entre quelques méthodes agiles :

La performance des systèmes d’informations complexes est due à l’évolution d’une diversité
des méthodologies de développement. Ils servent à faciliter le déroulement du travail en offrant une
démarche à suivre avec des étapes concises. C’est le principe des méthodologies de développement.
Le tableau fournit une étude comparative des principales méthodologies de développement
sélectionnées :
Méthodologie Description
UP ( UnifiedProcess ) Principe :
 Processus itératif incrémental.
 Le projet est découpé en phase très
courtes à l’issue de chacune
desquelles une nouvelle version
incrémentée est livrée.

ESPRIT Page 11
 [Titre du document]

 Élaboré par rational.

 Points Forts :
o Itératif.
o Interaction des différents
intervenants du projet.
o Offre des modèles de
documents des projets types.
 Points Faibles :
o Peu de place pour le
développement et la
technologie.
Coûteux à réaliser.

Principe :
 Repérer les scénarios des clients.
 Transformer ces scénarii en fonctions
à réaliser et en test fonctionnels.
 Les tâches sont effectuées en
binômes.
 Ce cycle se répète tant que le client
fournit des scénarios.
 Points Forts :
o Plus efficace.
XP ( eXtremeProgramming )
o S’intéresse aux aspects
techniques.
o Plus d’innovations grâce au
développement en binôme.
 Points Faibles :
o Dédié aux petits à moyens
projets uniquement.
o Exige une forte implication du
client.

SCRUM Principe :

ESPRIT Page 12
 [Titre du document]

o Chaque équipe réalise des

tâches concises
déterminéesdans leurs
propres sprints.
Le nombre optimal des membres d’une
même équipe varieentre 2 à 7 personnes
o La livraison du projet
s’effectue en réalisant des
objectifsprogressifs.
o Une revue est effectuée à la
fin de chaque sprint pour
validerle travail livré.
 Points Forts :
o S’adapte à la réalisation de
tout projet innovant et
complexe.
o Les responsabilités sont
partagées entre plusieurs
équipes.
o Développé et testé en courtes
itérations.
o Simplicité des processus.
 Points Faibles :
Peu de documentation écrite
Tableau 2:Étude comparative entre quelques méthodes agiles

7.3 choix Scrum  :

Dans le cas de notre application, nous avons opté pour SCRUM comme méthode de
développement informatique car c’est la mieux adaptée et la mieux appropriée pour « Booper » qui
dispose une organisation adaptée et d’un état d’esprit Agile, qui privilégie l'esprit d'équipe non
seulement dans la réalisation technique, mais aussi pour la participation du client à la réalisation du
projet.

Scrum repose sur une approche empirique, avec une série de cycles de développement de
courte durée, appelés « sprints », et des rétroactions fréquentes. Ces sprints sont des blocs de temps
fixes, le plus souvent de 2 à 4 semaines, avec un rythme et une régularité prédéterminée. Ils sont
itératifs et adaptatifs en fonction des besoins ou objectifs évolutifs du client (utilisateurs). À la fin
de chaque cycle, un livrable est présenté au cours d’une « revue de sprint ».

Les principes de base de Scrum sont les suivants :

ESPRIT Page 13
 [Titre du document]

D é g a g e r d a n s u
backlog du
produit.
E n s e c o n d l i e
dans chaque
itération.
P a r l a s u i t e f
dans des
itérations
appelées
Sprint.

Un Sprint aboutit toujours sur la livraison d’un produit partiel fonctionnel appelé incrément.

Figure 5:Scrum

ESPRIT Page 14
 [Titre du document]

7.4 Les rôles dans Scrum  :

 Product Owner : C’est un membre à part entière de l’équipe Scrum dont la

responsabilité principale est de définir un produit qui apportera le maximum de
valeur métier aux utilisateurs dans le temps et le budget impartis au projet. Il
présente les besoins du client et nous propose de nouveaux objectifs et s’assure que
les tâches affectées à ce sprint sont bien finies à la fin de ce dernier.

 Scrum Master : Il a pour responsabilité, dans le cadre du développement d'un

produit, d'aider l'équipe à travailler de façon autonome et à s'améliorer
constamment. Il est le garant de l'application du processus, Scrum en l'occurrence.
Au cours de notre projet, le rôle de scrum master a été assuré par le chef de projet.

 Scrum Team: L’équipe de développement.

Conclusion :
Dans cette partie du travail nous avons décrit l'organisme d'accueil où nous avons
achevénotre projet de fin d'étude qui était la startup Tridevs, nous avons aussi analyséles solutions
existantes en mentionnant aussi les problématiques liées à ces derniers.

De plus nous avons présenté notre solution qui consiste à développer une boutique en ligne
qui sera un outil primordial pour faciliter la tâche pour les clients mais aussi pour la boutique elle-
même qui sera capable de promouvoir ses articles à distance.

ESPRIT Page 15
 [Titre du document]

ESPRIT Page 16
 [Titre du document]

Chapitre 2 : 1

Spécification des besoins

analyse et conception

Introduction :
La spécification des besoins est la première étape dans un cycle de développement étant
déterminante pour le bon déroulement du projet.

Dans ce chapitre, on évoquera tout d’abord les besoins fonctionnels et non fonctionnels de
l’application. On fera ensuite une analyse détaillée en utilisant les diagrammes de cas d’utilisation
et les descriptions textuelles et qui sera présentée en sprints conformément à la méthodologie Scrum
appliquée.

1 Identification et analyse des besoins :

Dans cette partie nous allons commencer par définir les acteurs de notre application en
détaillant aussi pour chacun d’entre eux son rôle dans l’entreprise.

ESPRIT Page 17
 [Titre du document]

1.1 Identification des acteurs  :

Un acteur représente une fonctionnalité dégagée par une entité externe qui agit directement
avec le système.

Visiteur :toute personne qui visite le site dont il a la possibilité de voir les différentscatalogues,les
offres..

Client : toute personne qui fait l'inscription dans le site et il peut, par la suite, passer des
commandes.

Administrateur : c'est le superviseur qui contrôle et rectifie le site web pour assurer le bon
fonctionnement de système.

1.2 Identification des besoins fonctionnels :

Dans cette section du chapitre, nous nous intéressons aux besoins des utilisateurs traités dans
notre projet c’est à dire l’inscription du client, le choix des produits, le lancement des commandes
enfin la confirmation et donc le payement en ligne à travers les spécifications fonctionnelles et non
fonctionnelles pour aboutir à un site de qualité qui répond aux besoins des clients.

1.2.1besoins fonctionnels :

La spécification des besoins doit décrire sans ambiguïté, et de manière claire le logiciel à
développer, Ils expriment les actions que doit effectuer le système en réponse à une demande.

L’application doit fournir les fonctions suivantes :

a-L’exposition des produits:

Notre site doit disposer d’une vitrine virtuelle à travers laquelle le client peut consulter une
grande variété des produits, il sera donc indispensable d’y présenter les prix et les caractéristiques
techniques de chaque produit pour faciliter la sélection du produit à acheter.

b. L’inscription du client :

Jusqu’à ce stade, le client est toujours anonyme mais pour pouvoir passer à un stade plus
rigoureux, il faut qu’il s’inscrive, ce la se fait uniquement pour la première commande mais après,
notre client peut s’authentifier avec son E-mail et son mot de passe pour passer d’autres
commandes. c. Ajout des produits au panier : Après le choix d’un produit le client doit mentionner
la quantité qui s’ajoute automatiquement à son panier avec le prix unitaire et le prix total.

ESPRIT Page 18
 [Titre du document]

c. Boutique de livraison:

Si le mode de livraison choisi est la boutique il faut que le client indique cette boutique avec
une précision qui permet aux livreurs d’être sûrs que la marchandise sera dans le bon lieu et dans les
rendez-vous, ayant une panoplie de boutiques réelles, le client pourra choisir la plus proche.

d. La confirmation de la commande :

Jusqu’à cette phase on a un client, une commande et une adresse de livraison le chemin
maintenant est plus clair, la commande ne passera qu’après la validation de toutes les informations
qui sont affichées dans une seule interface avant de passer à la phase de payement.

e. Le payement :

C’est une phase très sensible, pour cela il faut qu’elle soit très sécurisée, pour terminer la
procédure de payement avec succès le client doit choisir un type de carte dans une liste de choix des
cartes proposées sur notre site web, indiquer le numéro de sa carte et sa valeur de vérification dite
CVV.

f. La fin de l’opération d’achat:

La page finale représente un petit message de remerciement à nos clients avec une idée sur
l’adresse, la date, le temps de la livraison en question et bien sur la possibilité d’imprimer la facture
du client.

g. Fiabilité:

L’application doit fonctionner de façon cohérente sans erreurs et doit être satisfaisante.

h. Sécurité :

Notre solution doit respecter surtout la confidentialité des données personnelles des clients qui reste
l’une des contraintes les plus importantes dans les sites web.

1.2.2 Identification des besoins non fonctionnels

Puisque notre application est impliquée dans le secteur d’investissement en se basant sur la
vente en ligne donc il sera primordial d’appliquer quelques restrictions indisponibles pour la
meilleure exécution des activités financières et pour le but du renforcement de la confiance et la
satisfaction de nos clients. Parmi ces besoins non fonctionnels nous mentionnons :

Temps de réponse :

ESPRIT Page 19
 [Titre du document]

Amélioration du temps de réponse Des services web en agissant sur la partie backend qui
seront consommés par les clients de la banque. En effet, cette partie consiste à implémenter des
services web plus rapide pour offrir une meilleure expérience aux clients finaux tels que achat/vente
des actions, Le passage d'ordre, Exécution des mouvements sur le portefeuille du client.

La Maintenabilité:

Le code de l’application doit être lisible et respecte les normes du Framework Oddo et aussi
de développement en général en suivant les design patterns pour pouvoir le maintenir facilement et
rapidement.

Scalabilité:

L’application doit être évolutive et « scalable » afin que d’autres modules puissent
prochainement être intégrés et inclus pour enrichir les fonctionnalités offertes à nos utilisateurs.

La simplicité:

L’application doit être simple, facileet claire à utiliser et à y exporter les informations,
assurant l’utilisation la plus confortable.

La portabilité :

Le site doit s’exécuter sur les différents navigateurs et sur les différents terminaux à savoir
les tablettes et les Smartphones (Responsive Design).

Backlog de produit

Dans cette partie nous allons élaborer le Product Backlog ainsi que la description des sprints.

2 Elaboration du Backlog produit :

Elaboration du Backlog produit Pour assurer la conformité du produit final aux exigences du
client, toutes les fonctionnalités sont rassemblées dans le Backlog produit qui représente le principal
artefact dans chaque projet.

Le Tableau ci-dessous résume le backlog produit de notre application.

Users
Features ID Titre Priorités
Stories

1 Authentification En tant qu'administrateur je 1

ESPRIT Page 20
 [Titre du document]

souhaite m'authentifier pour

Authentification Admin
accéder à l’espace administratif

En tant qu'un utilisateur je

Authentification souhaite m'authentifier pour
2 2
User accéder à l’espace
personnel« User »

En tant qu’administrateur je
3 Ajouter un produit 3
veux ajouter une enseigne.

Modifier un En tant qu’administrateur je

4 3
produit veux modifier une enseigne.

Lister les produits En tant qu’administrateur je

5 3
veux lister les produits.
Gestion des
produits
Supprimer En tant qu’administrateur je
6 3
unproduit veux supprimer une enseigne.

Suivre les En tant qu’administrateur je

7 commandes des veux suivre les commandes des 3
produits produits.

Ajouter un produit En tant qu’utilisateur je veux

8 4
à la liste ajouter un produit à la liste.

Lister les produits En tant qu’utilisateur je veux

9 4
dans la liste lister les produits dans la liste.

Supprimer un En tant qu’utilisateur je veux

Gestion des 10
produit de la liste supprimer un produit de la 4
wishlists
liste.

Afficher les En tant qu’utilisateur je veux

informations d’un Afficher les informations d’un 4
11 produit dans la liste produit dans la liste.

12 Ajouter un produit En tant qu’utilisateur un

4
à la commande produit à la commande

13 Lister les produits En tant qu’utilisateur je veux 4

ESPRIT Page 21
 [Titre du document]

lister les produits dans la

dans la commande
commande

Supprimer un En tant qu’utilisateur je veux

14
produit de la supprimer un produit de la 4
commande commande

Gestion des Ajouter et En tant qu’utilisateur je veux

commandes 15 minimiser la Ajouter et minimiser la
4
quantité des quantité des articles choisis
articles choisis

Mettre à jour de En tant qu’utilisateur je veux

16 l’addition avec que l’addition se met à jour 4
chaque changement avec chaque changement.

Ajouter un produit En tant qu’utilisateur je veux

17 4
à la liste Ajouter un produit à la liste

En tant qu’utilisateur je veux

Supprimer un
18 Supprimer un produit de la 4
produit de la liste
liste.
Gestion des listes comparer les
En tant qu’utilisateur je veux
de comparaison informations entre
19 comparer les informations 4
entre produits les différents
entre les différents produits
produits

En tant qu’administrateur je
20 Ajouter un blog 5
veux ajouter un blog

En tant qu’administrateur je
21 Afficher les blogs 5
veux afficher les blogs

En tant qu’administrateur je
Gestions des 22 Supprimer un blog 5
veux supprimer un blog.
blogs

En tant qu’administrateur je
23 Ajouter un statut 5
veux ajouter un statut.

ESPRIT Page 22
 [Titre du document]

En tant qu’administrateur je
24 Modifier un statut 5
veux modifier un statut.

En tant qu’administrateur je
Gestion de 25 Supprimer un statut 5
veux supprimer un statut.
forum
En tant qu’utilisateur je veux
26 Supprimer un statut 5
Supprimer un statut

En tant qu’administrateur je
Mettre à jour le veux Mettre à jour le nombre
27 nombre des articles des articles disponibles. 6
Gestion de stock disponibles

Ajouter les
En tant qu’utilisateur je veux
informations
28 Ajouter les informations 6
personnelles de
personnelles de l’utilisateur.
l’utilisateur

Actualiser les
En tant qu’utilisateur je veux
informations
29 Actualiser les informations 6
Gestion des personnelles de
personnelles de l’utilisateur.
profils des l’utilisateur
utilisateurs

entrerles En tant qu’utilisateur je veux

30 6
préférences entrer les préférences.

Actualiser les En tant qu’utilisateur je veux

31 6
Gestion des préférences Actualiser les préférences.
préférences

voir les articles qui En tant qu’utilisateur je veux

32 sont similaires aux voir les articles qui sont 7
produits choisi similaires aux produits choisi.
Affichage des
produits voir les articles qui En tant qu’utilisateur je veux
similaires et des sont achetés par voir les articles qui sont
produits achetés 33 7
des profils achetés par des profils
par des profils similaires similaires.
similaires
Tableau 3:Backlog produit

ESPRIT Page 23
 [Titre du document]

3 Diagramme de cas d’utilisation :

Dans cette partie nous présentons les besoins de notre système de manière formelle en
utilisant le diagramme des cas d’utilisation globale.

Toutes fonctionnalités globales offertes par l’application sont représentées dans le

diagramme. En plus chaque cas d’utilisation nécessite une authentification.

ESPRIT Page 24
 [Titre du document]

Figure 6:Diagramme de cas d’utilisation général

ESPRIT Page 25
 [Titre du document]

4 Diagramme de classe général :

Le diagramme de classe exprime la structure statique du système en termes des classes
et des réalisations entre les classes.

Figure 7:Diagramme de classe général

ESPRIT Page 26
 [Titre du document]

5. Diagramme de déploiement system :

Figure 8:diagramme de déploiement system

6 Planification des sprints :

La planification des sprints fait l’objet de l’une des réunions les plus importantes d’un projet
Scrum.

Priorit Numéro de
Titre de sprint Description
é sprint

Ajout utilisateur.
1 Sprint 1 Gestion des comptes Suppression utilisateur.
Réalisation de l'authentification.

2 Sprint 2 Gestion des produits Ajout produit

Suppression produit
Modification produit
Lister les produits
ESPRIT Page 27
 [Titre du document]

Suivi des commandes

3 Sprint 3 Gestions des Gestion des wishlists :
wishlists,comparing  Ajout d’un produit à la liste
-list et des  Lister les produits dans la liste
commandes.  Suppression d’un produit de la
liste
Gestion descomparing-list :
 Ajout d’un produit à la liste
 Lister les produits dans la liste
 Suppression d’un produit de la
liste

Gestion commandes :
 Ajout d’un produit à la
commande
 Lister les produits dans la
commande
 Suppression d’un produit de la
commande
 Ajout et minimisation de la
quantité des articles choisis

 Mise à jour de l’addition avec

chaque changement

4 Sprint 4 Gestion de stock Gestion des profils:

,des profils et des  Ajout des informations
préférences des  Mise à jour des informations
utilisateurs Gestion des préférences :
 Ajout des préférences
 Mise à jour des préférences
Gestion de stock :
 Mise à jour le nombre des articles
disponibles après chaque

ESPRIT Page 28
 [Titre du document]

transaction
Affichage des vu des articles qui sont similaires aux
produits similaires produits choisi.
5 Sprint 5 et des produits
achetés par des vu des articles qui sont achetés par des
profils similaires profils similaires.
Tableau 4:Planification des sprints

Conclusion
Dans ce chapitre nous avons présenté la spécification des besoins, la conception de notre futur
système qui est une phase très importante pour notre futur système. Enfin nous avons planifié les
phases de déroulement de notre projet en basant à la méthodologie Scrum.

ESPRIT Page 29
 [Titre du document]

Chapitre 3 : 22222

Phase de réalisation

ESPRIT Page 30
 [Titre du document]

Introduction
La satisfaction des besoins et des exigences requises se voit dans la réalisation du projet.
C’est dans ce chapitre que nous exposons le fruit de notre étude après le traitement de la partie
conceptuelle du projet. Nous allons commencer en premier lieu par la présentation de
l’environnement matériel et logiciel utilisé pour le développement de l’application demandée.
Enfin, nous exposerons quelques interfaces hommes machines qui concordent avec les
fonctionnalités attendues.

1. plateforme de développement :
 Node :
Node également appelé Node.js où js signifie que JavaScript est un environnement d'exécution
multiplateforme open source pour exécuter du code JavaScript en dehors du navigateur. Pour
exécuter JavaScript sur les serveurs principaux, une machine virtuelle comme V8 by Google
exécute JS dans le serveur, donc Node est un wrapper autour de machines virtuelles comme V8
avec des modules intégrés fournissant des fonctionnalités riches via une API asynchrone facile à
utiliser.
Les services backend comme les API (Applications Programming Interfaces) utilisent Node
pour construire ses services. Ces services alimentent les applications client comme les applications
Web dans les navigateurs Web et les applications mobiles sur les appareils mobiles. Les utilisateurs
voient et interagissent avec les applications de ces clients, ils sont donc à la surface et interagissent
avec des services assis sous le serveur ou dans le cloud pour stocker des données, envoyer des e-
mails, des notifications push, un coup de pouce du flux de travail et plus encore.

Figure 9:Relation entre services Back-end et le front-end de l’application

ESPRIT Page 31
 [Titre du document]

 Architecture :

Figure 10:Architecture NodeFramework Node.js utilisé dans le projet :

Express.js :
Construit par TJ Holowaychuk, Express.js est un cadre d'application Node.js flexible et minimal
spécialement conçu pour la création d'applications monopages, multipages et hybrides qui
fournissent un ensemble robuste de fonctionnalités pour les applications Web et mobiles.

Figure 11:Logo framework Express Js

 React :

React (également connu sous le nom de React.js ou ReactJS) est une bibliothèque JavaScript
pour créer des interfaces utilisateur. Il est maintenu par Facebook et une communauté de
développeurs individuels et d'entreprises. React peut être utilisé comme base dans le
développement d'applications monopages ou mobiles. Cependant, React ne concerne que le
rendu des données vers le DOM, et donc la création d'applications React nécessite généralement
l'utilisation de bibliothèques supplémentaires pour la gestion des états et le routage.

ESPRIT Page 32
 [Titre du document]

Figure 12:Logo React

2. Environnement de projet:
Cette partie présente l’environnement matériel mis à la disposition du présent projet ainsi
que l’environnement logiciel qui a permis à l’aboutissement de la mise en œuvre du logiciel.

2.1 Environnement matériel  :

Dans notre projet nous avons développé notre application en utilisant un ordinateur
Lenovo dont la configuration est décrite ci-dessous :
– System exploitation: windows 10 pro.
– RAM: 12 go.
– Processeur : Intel(R) coré (TM) i5-6200U 2.30 GHz.

2.2 Environnement logiciel:

2.2.1 Visual studio code:

Visual Studio Code est un éditeur de code source développé par Microsoft pour Windows,
Linux et macOS. Il comprend Git intégré et la prise en charge du débogage, de la mise en évidence
de la syntaxe, de l'achèvement intelligent du code, des extraits et de la refactorisation du code. Il est
hautement personnalisable, permettant aux utilisateurs de modifier le thème, les raccourcis clavier,
les préférences et d'installer des extensions qui ajoutent des fonctionnalités supplémentaires. Le
code source est gratuit et open-source, publié sous la licence MIT permissive. Les binaires compilés
sont des logiciels gratuits pour toute utilisation

ESPRIT Page 33
 [Titre du document]

Figure 13:Interface de visual studio code

2.2.2 PostgreSQL server :

C’est un système de gestion de base de données relationnelle objet général, le système de

base de données open source le plus avancé. PostgreSQL a été développé sur la base de
POSTGRES 4.2 au Berkeley Computer Science Department, University of California.

PostgreSQL est un logiciel gratuit et open source. Son code source est disponible sous
licence PostgreSQL, une licence open source libérale. Vous êtes libre d'utiliser, de modifier et de
distribuer PostgreSQL sous quelque forme que ce soit.

PostgreSQL nécessite des efforts maintenus très minimaux en raison de sa stabilité. Par
conséquent, si vous développez des applications basées sur PostgreSQL, le coût total de possession
est faible par rapport à d'autres systèmes de gestion de base de données.
2.2.3 Les langages utilisés :
 JavaScript :

JavaScript (JS) est un langage de programmation compilé léger, interprété ou juste à temps
avec des fonctions de première classe. Bien qu'il soit plus connu sous le nom de langage de script
pour les pages Web, de nombreux environnements sans navigateur l'utilisent également, tels que
Node.js, Apache CouchDB et Adobe Acrobat. JavaScript est un langage dynamique basé sur un
prototype, multi-paradigme, à un seul thread, prenant en charge les styles orientés objet, impératifs
et déclaratifs (par exemple, la programmation fonctionnelle).

ESPRIT Page 34
 [Titre du document]

Figure 14:logo JavaScriptPython :

 Python

Python est un langage de programmation interprété, orienté objet et de haut niveau avec

une sémantique dynamique. Sa structure de données intégrée de haut niveau, combinée à la frappe

dynamique et à la liaison dynamique, le rend très attrayant pour le développement rapide

d'applications, ainsi que pour une utilisation en tant que langage de script ou de collage pour

connecter les composants existants entre eux. La syntaxe simple et facile à apprendre de Python met

l'accent sur la lisibilité et réduit donc le coût de la maintenance du programme. Python prend en

charge les modules et les packages, ce qui encourage la modularité du programme et la réutilisation

du code. L'interpréteur Python et la bibliothèque standard étendue sont disponibles gratuitement

sous forme source ou binaire pour toutes les principales plates-formes et peuvent être librement

distribués.

Figure 15:Logo Python

 JSON : est un format léger d’échange de données à base de JavaScript. Facileà lire ou à
écrire, il est aisément analysable ou générable. Indépendant de toutlangage, JSON suit
conventions familières à tout programmeur habitué aux langagesdescendant du C.

ESPRIT Page 35
 [Titre du document]

Figure 16:Logo JSONtypeORM :

 TypeORM

TypeORM est un ORM qui peut fonctionner dans les plates-formes NodeJS, Browser,

Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo et Electron et peut être utilisé avec

TypeScript et JavaScript (ES5, ES6, ES7, ES8). Son objectif est de toujours prendre en charge les

dernières fonctionnalités JavaScript et de fournir des fonctionnalités supplémentaires qui vous

aident à développer tout type d'application qui utilise des bases de données - des petites applications

avec quelques tables aux applications d'entreprise à grande échelle avec plusieurs bases de données.

Figure 17:Logo TypeORM

3. sprints :
Le sprint est le cœur de Scrum. Il s’agit d’un bloc de temps durant lequel un incrément du
produit sera réalisé. Tous les sprints ont une durée constante et ne se chevauchent jamais, c'est-à-
dire qu’un sprint ne peut pas démarrer tant que le précédent n’est pas encore terminé.

Avant de se lancer dans un sprint, l’équipe Scrum doit obligatoirement définir le but de ce
dernier. Ce but doit être défini en terme métier et non pas en terme technique pour qu’il soit
compréhensible par les membres en dehors de l’équipe.

ESPRIT Page 36
 [Titre du document]

3.1 Sprint 1  :
3.1.1 Sprint backlog

Une fois, nous avons défini le but de notre sprint, il est temps de décider quelles histoiresinclure
dans ce dernier. Plus précisément, quelles histoires de notre backlog du produit serontincluses dans
le backlog du sprint. Le Tableau ci-dessous résume donc le backlog de notre premier sprint.

ID User Story Tache Estimation (jours)

0 Storyless Création de la BD 2
1 En tant Afficher la liste des utilisateurs dans un 0.5
qu’administrateur tableau.
jeveux lister les Développer une méthode qui retourne la 0.5

utilisateurs. liste des utilisateurs

2 En tant Développer une méthode de suppression 0.5
qu’administrateur d’un utilisateur
jeveux supprimer
unutilisateur
3 En tant
Développer un système d’authentification
qu’administrateur 3
pour assurer la gestion des comptes.
jeveux authentifier
à l’espace admin
4 En tant Créer l’interface d’ajout un compte. 0.25
qu’administrateur
Développer la méthode d’ajout d’un 0.75
jeveux ajouter un compte.
compte utilisateur
Tester l’existence de compte utilisateur.
0.25
(La création de compte ne se faitque si le
compte enseigne n’existe pas, sinon ça
vagénérer une erreur)
5 En tant
Développer la méthode de suppression
qu’administrateur
d’un compte.
jeveux supprimer 0.25
un compte
utilisateur.
Tableau 5:Sprint 1 backlog

ESPRIT Page 37
 [Titre du document]

3.1.2 Diagramme d’activité sprint 1  :

Pour simplifier le côté comportemental du système, nous utilisons un diagramme d’activités.

Ce diagramme permet de présenter les interactions entre l'acteur et le système avec des messages
présenté dans un ordre chronologique. Le diagramme d’activité traite le système comme une boîte
noire. Le comportement du système est décrit de l'extérieur sans avoir une idée de son
fonctionnement. Nous présentons un diagramme d’activité, qui résume les scénarios réalisés.
Figure 18:Diagramme d’activité sprint 1

3.1.3 Diagramme de séquence sprint 1 :

Figure 19:Diagramme de séquence sprint 1

ESPRIT Page 38
 [Titre du document]

3.1.4Phase de réalisation du sprint 1 :

En vue de présenter le travail accompli, nous allons exposer dans ce qui suit les
différentescaptures d’écrans montrant la réalisation de notre travail.
 Les interfaces :

Figure
20:Inte rfac
e de
login

ESPRIT Page 39
 [Titre du document]

Figure 21:Interface d’inscription

3.2 sprint 2 :

3.2.1 Sprint backlog :

Le Tableau ci-dessous résume donc le backlog du deuxième sprint.

ID User Story Tache Estimation

(jours)
1 Entantqu’administrateur Créer l’interface d’ajout d’un produit 0.5
jeveux ajouter un Développer la méthode d’ajout d’un 0.75
produit. produit

ESPRIT Page 40
 [Titre du document]

2 En tant qu’utilisateur je Afficher la liste des articles 0.5

voirla liste articles
disponibles. Développer une méthode qui retourne 0.5
laliste des produits
3 En tant Développer une méthode de 0.5
suppressiond’un produit
qu’administrateur
jeveux supprimer un
produit
4 . En tant Créer l’interface de modification de 0.5
qu’administrateur produit
Développer la méthode de modification 0.75
jeveux modifier un
des produits
produit
5 En tant Créer l’interface de suivi des 0.5
qu’administrateur je commandes.
veux suivre les Développer une méthode qui suit les 0.5

commandes commandes.
Développer une méthode qui retourne 0.5
les questions générées
Tableau 6:Sprint 2 backlog

3.2.2. Diagramme de composants <<Produit>> :

ESPRIT Page 41
 [Titre du document]

Figure 22:Diagramme de composants <<Produit>>

3.2.3. Réalisation de sprint 2:

ESPRIT Page 42
 [Titre du document]
Figure 23:Catalogue du site

Figure 24:Différents méthodes d’affichage des articles

Figure 25:Filtre par catégorie Figure 26:Filtre par catégorie Figure 27:Filtre par couleur

Figure 28:Choix de langue de devise

3.3 Sprint 3  :
3.3.1 Sprint backlog :

Le Tableau ci-dessous résume donc

le backlog du troisiéme sprint.

ID User Story Tache Estimation

(jours)
1 Entantqu’utilisateur Créer l’interface d’ajout des articles à 0.5
jeveux ajouter des la wishlist.
Développer la méthode d’ajout des 0.75
articles à lawishlist.

ESPRIT Page 43
 [Titre du document]

articles à la wishlist
2 En tant qu’utilisateur Créer l’interface de suppressiondes 0.5
jeveux supprimerun articles de la wishlist.
article de la wishlist. Développer la méthode de 0.5
suppressiondes articles de la wishlist
3 En tant qu’utilisateur Développer la méthode d’affichage des 0.5
articles de la wishlist
jevois les articles
dans la wishlist
4 Entantqu’utilisateur Créer l’interface d’ajout des articles à 0.5
jeveux ajouter des la comparelist
Développer la méthode d’ajout des 0.75
articles à la
articles à la comparelist
comparelist.
5 En tant qu’utilisateur Créer l’interface de suppressiondes 0.5
je veux supprimerun articles de la comparelist
article de la Développer la méthode de 0.5

comparelist. suppressiondes articles de la

comparelist
6 En tant qu’utilisateur Développer la méthode d’affichage des 0.5
articles de la comparelist
je vois les articles
dans la comparelist

7 Entantqu’utilisateur Créer l’interface d’ajout d’article à la 0.25

jeveux ajouter des commande
articles à la Développer une méthode qui ajoute un 0.5
commande. article à la commande.
Développer une méthode qui supprime 0.3
un article à la commande
9 En tant qu’utilisateur Développer une méthode d’affichage 0.2
je vois les articles de la commande
dans la commande
10 En tant qu’utilisateur  Développer une méthode d’ 0.5
je veux générer la Ajout et minimisation de la
nouvelle commande quantité des articles choisis
avec chaque
changement
 Développer une méthode de 0.5
Mise à jour de l’addition avec
chaque changement

ESPRIT Page 44
 [Titre du document]

Tableau 7:Sprint 3 backlog

3.3.2. Diagrammes séquence de sprint 3 :

ESPRIT Page 45
 [Titre du document]

Figure 29:Diagrammes séquence de sprint 3

ESPRIT Page 46
 [Titre du document]

3.3.3. Diagramme d’activité de sprint 3 :

Figure 30:Diagrammes d’activité de sprint 3

3.3.4. Réalisation de sprint 3 :

ESPRIT Page 47
 [Titre du document]

Figure 31:Interfaces de comparaison entre articles

Figure 32:L’ajout de deux produits pour les comparer

Figure
33:L’aj
o ut des
produits
à la

commande

ESPRIT Page 48
 [Titre du document]

Figure 34:L’ajout des produits à la wishlist

Figure 35:L’ajout des informations personnelles pour le paiement

ESPRIT Page 49
 [Titre du document]

Figure 36:L’entrée des informations concernant la carte de paiement

3.4. Sprint 4 :

3.4.1.Sprint backlog :

Le Tableau ci-dessous résume donc le backlog du quatrième sprint.

ID User Story Tache Estimation

(jours)
1 Entantqu’utilisateur Créer l’interface d’ajout des 0.5
jeveux ajouter mes informations du profil
Développer la méthode d’ajout des 0.75
informations
informations du profil
personnelles dans
Développer une méthode de mise à jour 0.5
mon profil.
des informations personnelles.
2 Entantqu’utilisateur Créer l’interface d’ajout des 0.5
jeveux ajouter mes préférences
Développer la méthode d’ajout des 0.75
préférences.
préférences
Développer la méthode de mise à jour 0.5
des préférences
3 Mise à jour du stock Développer une méthode de mise à jour 0.2
de stock après chaque transaction
après chaque

ESPRIT Page 50
 [Titre du document]

transaction.
Tableau 8:Sprint 4 backlog

3.4.2. Les diagrammes :

ESPRIT Page 51
 [Titre du document]

ESPRIT Page 52
 [Titre du document]

3.4.3. Réalisation de sprint 4:

Figure 37:L’ajout des informations dans le profil

Figure 38:Changement du mot de passe du compte

Figure 39:L’ajout de l’adresse de l’utilisateur

ESPRIT Page 53
 [Titre du document]

ESPRIT Page 54
 [Titre du document]

3.5. Sprint 5 :

3.5.1 Sprint backlog :

Le Tableau ci-dessous résume donc le backlog du cinquième sprint.

ID User Story Tache Estimation

(jours)
1 Entant qu’utilisateur Afficher la liste des produits similaires 0.5
je veux voir au produit choisi.
Développer une méthode qui retourne 0.75
Affichage des
la liste des produits similaires au
produits similaires
produit choisi.
au produit choisi.
2 En tant qu’utilisateur Afficher la liste des produits achetés 0.5
je veux voir les par des profils similaires à mon profil
produits achetés par Développer une méthode qui retourne 0.5

des profils similaires la liste des produits achetés par des

à mon profil profils similaires à mon profil

Tableau 9:Sprint 5 backlog

3.5.2 Réalisation d’un système de recommandations :

Un système de recommandation est une sous-classe de système de filtrage de l'information

en cherchant à prédire la «préférence» ou la «note» qu'un utilisateur associerait à un élément .Ils
sont principalement présents dans des applications commerciales.

3.5.2.1 Types d’un système de recommandations  :

En temps réel, les exemples sont comme Amazon, ils ont mis en place un moteur de
recommandation pour suggérer les articles que les utilisateurs pourraient également aimer.

Ci-dessous un exemple de ce système :

ESPRIT Page 55
 [Titre du document]

Figure 40:Système de recommandation d’Amazon

Netflix aussi,

Figure 41:Système de recommandation de Netflix

Comment créer un système de recommandation?

Bien que l'apprentissage automatique soit couramment utilisé dans la réalisation de ces
systèmes, ce n'est pas l’unique solution. Il y’a des approches plus simples dans des cas où nous
possédons un peu de données, ou où nous voulons créer rapidement une solution. Par exemple,
pour une simple recommandation vidéo, dans ce cas, sur la base des vidéos qu'un user a regardées,
nous pouvons simplement suggérer des autres des mêmes auteurs ou des mêmes publications. Je
vais expliquer chaque méthode que vous puissiez comprendre l’idée de la conception de ces
systèmes.

 Basé sur la popularité:

La méthode le plus simple de concevoir un système de recommandations est basée sur la

popularité, d’une autre manière les biens qui sont populaires c'est-à-dire les plus achetés.

 basé sur la classification :

ESPRIT Page 56
 [Titre du document]

Figure 42:La méthode de classification

Dans cet exemple, en exploitant des fonctionnalités utilisateur comme le sexe, l'âge et des

fonctionnalités de bien comme la qualité, le coût et l'historique du produit, en fonction de cette

entrée, notre classificateur donnera une valeur binaire qu’une chance existe que ce client va aimer

ou non un article bien défini, en fonction de ce résultat, nous pourrions le suggéré à lui.

 Filtrage collaboratif:

Ce modèle est basé sur l'hypothèse que les individus apprécient des éléments similaires à d'autres

qu'ils aiment et des biens qui sont aimés par d'autres possédant presque le même goût.

Figure 43:Concept de filtrage collaboratif

ESPRIT Page 57
 [Titre du document]

3.5.3. Concept de la méthode similitude cosinus :

Cette méthode est une mesure utilisée pour connaitre la similitude des documents.
Mathématiquement, il mesure le cosinus de l'angle entre deux vecteurs projetés dans un espace
multidimensionnel.

Par exemple, si on a :

Text 1 : London Paris London

Text 2 : Paris Paris London

Figure 44:création
des vecteurs selon la pondération

Figure 45:Représentation des vecteurs

ESPRIT Page 58
 [Titre du document]

Figure 46:La distance entre les deux vecteurs

Figure 47:Calcul du cos de l’angle

ESPRIT Page 59
 [Titre du document]

Ceci est la méthode utilisé pour savoir les produits similaires qu’il fallait suggérer aux

utilisateurs et aussi les articles achetés par des profils similaires afin de faciliter le processus de

recherche pour le client d’où le gain du temps mais aussi cela bénéficie à la boutique car avec ces

mécanismes on peut attirer l’attention des clients à d’autres articles.

3.5.4. Réalisation de premier système de recommandations:

Ce premier système est basé sur le filtrage collaboratif et a pour but l’affichage des

produits similaires.

code python :

 l’importation des librairies :

Figure 48:l’importation des librairies

 L’entrée des données :

ESPRIT Page 60
 [Titre du document]

Figure 49:L’entrée des données

 La conversion des colonnes :

Figure 50:La conversion des colonnes

Ajout d’une colonne qui englobe toutes les autres colonnes choisies

précédemment :

ESPRIT Page 61
 [Titre du document]

Figure 52:

Figure 51:Ajout d’une colonne qui englobe toutes les autres colonnes choisies précédemment

 Utilisation de méthode similitude cosinus après vectorisation des données :

ESPRIT Page 62
 [Titre du document]

Figure 52:Utilisation de méthode similitude cosinus après vectorisation des données

 Rédaction des méthodes de recherche dans la data :

Figure 53:Rédaction des méthodes de recherche dans la data

 Appel des méthodes développées :

ESPRIT Page 63
 [Titre du document]

Figure 54:Appel des méthodes développées

 Test du résultat d’algorithme :

Figure 55:Test du résultat d’algorithme

ESPRIT Page 64
 [Titre du document]

Conclusion générale et perspectives

La satisfaction du client est l’objectif optimale qui nous cherchons toujours à atteindre,

c’est un défi pour tous institution qui essaie d’offrir ses services dans le monde numérique.

L'efficacité, la rapidité d'un service et un excellent service-client sont indispensables pour obtenir

l'acceptante du client au produit.

En ce qui concerne notre cas, nous étions intéressés à développer une boutique virtuelle :

un pont de passage aux informations, produits, et services qui facilite la vie pour les clients qui

seront capable de faire leur shopping à distance.

Afin d’atteindre notre objectif, nous avons commencé par la réalisation de la conception

qui a été faite selon la méthode Scrum en utilisant UML comme langage de modélisation.

Dans chaque sprint, on a entamé la partie serveur qui représente le cœur de l’application

et qui inclut la connaissance de la nouvelle technologie Node.js.

Après, on a commencé la création des Web Services REST et leurs tests avec l’application Google

« postman RESTClient ». Après la réussite des tests techniques et métier, on a développé la partie

client en utilisant React.

Notre stage chez Tridevs Tunis a été une expérience extrêmement enrichissante et

intéressante. C'était complètement informatif, à la fois académique et professionnel. Nous avons eu

le privilège de travailler avec une équipe coopérative hautement qualifiée.

ESPRIT Page 65
 [Titre du document]

Enfin, l’application que nous avons présentée n’est que le début d’un processus qui permet de

répondre à d’autres attentes des utilisateurs, et présente surtout des perspectives pour une éventuelle

extension.

Néographie

[1] https://www.tridevs.com/

[2] https://www.tutorialspoint.com/nodejs/

[3] https://www.udemy.com/join/login-popup/?next=/course/nestjs-zero-to-hero/

[4] https://docs.nestjs.com/

[5]https://typeorm.io/#/

[6]https://reactjs.org/

[7] https://fr.wikipedia.org/wiki/Méthode_agile

[8] https://www.machinelearningplus.com/nlp/cosine-similarity/

ESPRIT Page 66