Rapport Version Finale - 073421

Dédicaces
Dédicaces
Je dédie ce travail,
À l’amour de ma vie MAMAN,
Tu m’as donné la vie, la tendresse et le courage pour réussir. Tout ce que je peux t’offrir ne
pourra exprimer l’amour et la reconnaissance que je porte.
Ta prière et ta bénédiction m’ont été d’un grand secours pour mener à bien mes études.
À l’amour de ma vie PAPA,
L’épaule solide, l'œil attentif compréhensif et la personne la plus digne de mon estime et de
mon respect.
Aucune dédicace ne saurait exprimer mes sentiments, que Dieu te préserve et te procure santé
et longue vie.
À mes chers frères,
Vous êtes sacre symbole de fraternité et de sincère attachement. Mes prières que vous puissiez
réaliser vos rêves et que DIEU vous protège.
À toute ma famille
Je ferai de mon mieux pour rester un sujet de fierté à vos yeux avec l’espoir de ne jamais vous
décevoir.
À mes amis proches
Qui n’ont pas épargné le moindre effort pour me soutenir tout au long de mes cursus d’études,
qu’ils trouvent ici l’expression de ma profonde gratitude et ma reconnaissance infinie.
Feriel
Remerciements
Remerciements
C’est parce que nous avons beaucoup estimé tous ceux qui nous ont écoutés, conseillés,
critiqués et encadrés que nous tenons à leur faire part de toute notre gratitude. Je tiens à
exprimer mes chaleureux remerciement à:
Mon encadrante pédagogique Madame Besma Ben Salah pour avoir accepté de m’encadrer,
pour ses qualités humaines et professionnelles, pour son encadrement, ses directives, ses
remarques constructives et sa disponibilité,
Mon encadrant industriel Monsieur Salim Brahmi pour avoir accepté de m’encadrer, pour
ses qualités humaines et professionnelles, pour sa disponibilité, son encadrement, ses
recommandations précieuses, ses directives et ses conseils fructueux,
Monsieur Lamjed CHIHAOUI, chef d’équipe mobile de la société Satoripop, pour avoir
accepté de m’encadrer, pour ses qualités humaines et professionnelles,
Monsieur Khaireddine FREDJ le directeur général et toute l’équipe de Satoripop qui m’ont
bien accueilli durant la période du SFE.
Notre Institut supérieur des études technologiques de Sousse qui nous a donné l'occasion
d'acquérir une formation de qualité,
Tous mes professeurs et plus particulièrement les membres de jury qui ont accepté de juger
notre travail.
Table des matières
Table des matières

Introduction générale............................................................................................................1
Chapitre 1 : Aperçu général et cadre de projet...................................................................3
Introduction.................................................................................................................................3
I. Organisme d’accueil.......................................................................................................3
1. Présentation de la société............................................................................................3
2. Fiche d’identité de la société.......................................................................................3
II. Cadre général du projet...................................................................................................4
III. Etude de l’existant.......................................................................................................4
1. Analyse de l’existant...................................................................................................4
3. Critique de l’existant...................................................................................................5
4. Solution Proposée.......................................................................................................6
IV. Langage et méthodologie de conception.....................................................................6
V. Pourquoi Scrum..............................................................................................................6
Conclusion..............................................................................................................................7
Chapitre 2 : Initialisation du projet.............................................................................................8
Introduction.................................................................................................................................8
I. Préparation du projet.......................................................................................................8
1. Formation, apprentissage et insertion professionnelle................................................8
2. Installation et configuration de Magento....................................................................8
3. Environnement Matériel...........................................................................................13
4. Environnement logiciel.............................................................................................14
II. Capture des besoins.......................................................................................................15
1. Identification des acteurs..........................................................................................15
2. Identification des besoins..........................................................................................15
III. Pilotage de projet avec Scrum...................................................................................17
1. Identification de l’équipe Scrum...............................................................................17
2. Outil Scrum...............................................................................................................17
3. Le backlog du produit...............................................................................................18
4. Diagramme des cas d’utilisation global....................................................................19
Conclusion................................................................................................................................20
Chapitre 3 : Sprint 1..................................................................................................................21
Introduction...........................................................................................................................21
Table des matières
I. Backlog du sprint 1.......................................................................................................21

1. But du sprint..............................................................................................................21
2. Backlog du Sprint 1..................................................................................................21
II. Spécification fonctionnelle...........................................................................................22
1. Diagramme des cas d’utilisation...............................................................................22
2. Description textuelle des cas d’utilisation....................................................................23
III. Conception................................................................................................................24
1. Diagramme de séquences..........................................................................................24
2. Diagramme des classes.............................................................................................25
3. Réalisation.....................................................................................................................26
Conclusion................................................................................................................................27
Chapitre 4 : Sprint 2..................................................................................................................28
Introduction...........................................................................................................................28
1. But du sprint..............................................................................................................28
2. Backlog du sprint 2...................................................................................................28
2. Description textuelle des cas d’utilisation....................................................................30
III. Conception................................................................................................................31
1. Diagramme des séquences........................................................................................31
3. Réalisation.................................................................................................................33
Conclusion............................................................................................................................34
Chapitre 5 : Sprint 3..................................................................................................................35
Introduction...........................................................................................................................35
1. But du sprint..............................................................................................................35
2. Backlog du sprint 3...................................................................................................35
2. Description textuelle des cas d’utilisation................................................................37
III. Conception................................................................................................................38
1. Diagrammes des séquences.......................................................................................38
Table des matières

3. Diagramme d’activité................................................................................................41
4. Réalisation.................................................................................................................42
Conclusion............................................................................................................................44
Conclusion générale et perspectives.........................................................................................45
Annexe A..................................................................................................................................46
I. Présentation...................................................................................................................46
II. Principe.........................................................................................................................46
1. Répartition des rôles.................................................................................................46
2. Les différents événements.........................................................................................46
3. Les artefacts :............................................................................................................47
Annexe B..................................................................................................................................49
I. Présentation...................................................................................................................49
II. Les 4 valeurs du Manifeste Agile.................................................................................50
III. Les 12 principes de Manifeste Agile........................................................................50
Annexe C..................................................................................................................................51
I. Le langage de programmation JavaScript.....................................................................51
1. Du ECMAScript au JavaScript.................................................................................51
2. Présentation de JavaScript et utilités.........................................................................51
II. Application mobile........................................................................................................52
1. Qu'est-ce qu'une application mobile.........................................................................52
2. Approches de développement...................................................................................52
III. React Native..............................................................................................................53
1. Petit historique de React Native................................................................................53
2. Architecture de React Native....................................................................................53
3. Statistiques................................................................................................................55
IV. Magento....................................................................................................................56
1. Qu’est-ce que Magento.............................................................................................56
2. Pourquoi choisir Magento.........................................................................................57
3. Les points forts de Magento......................................................................................57
4. Les points faibles de Magento..................................................................................58
Conclusion................................................................................................................................58
Table des figures
Table des figures
Figure 1 Logo de Satoripop........................................................................................................4

Figure 2 Principe Scrum.............................................................................................................7
Figure 3 Frontend de magento....................................................................................................9
Figure 4 Page d'authentification magento...................................................................................9
Figure 5 Tableau de bord..........................................................................................................10
Figure 6 Page vente Magento...................................................................................................10
Figure 7 Page catalogue de magento........................................................................................11
Figure 8 Page clients de magento.............................................................................................11
Figure 9 Elements de site magento...........................................................................................12
Figure 10 Page rapports de magento.........................................................................................12
Figure 11 Page store de magento..............................................................................................13
Figure 12 Page système de magento.........................................................................................13
Figure 13 Logo Jira Software...................................................................................................18
Figure 14 Diagramme des cas d'utilisation global....................................................................19
Figure 15 Backlog du sprint 1 en Jira.......................................................................................22
Figure 16 Diagramme des cas d'utilisation de sprint 1.............................................................23
Figure 17 Diagramme de séquences « Rechercher produit »...................................................25
Figure 18 Diagramme de classes de sprint 1............................................................................25
Figure 19 Page d'accueil Figure 20 Page des catégories.............................26
Figure 21 Page de recherche Figure 22 Page résultat de recherche...................27
Figure 23 Backlog du sprint 2 en jira........................................................................................29
Figure 24 Diagramme des cas d'utilisation du sprint 2.............................................................29
Figure 25 Diagramme de séquence "Se connecter"..................................................................31
Figure 26 Diagramme de séquence de " Créer un compte ".....................................................32
Figure 27 Diagramme de classe de sprint 2..............................................................................33
Figure 28 Page de Création d’un compte 1 Figure 29 Page de création d'un compte 2........33
Figure 30 Page de se connecter.................................................................................................34
Figure 31 Diagramme des cas d'utilisation du sprint 3.............................................................36
Figure 32 Diagramme de séquence "Ajouter au panier"...........................................................38
Figure 33 Diagramme de séquence "Valider une commande".................................................39
Figure 34 Diagramme de classe global de sprint 3...................................................................40
Table des figures
Figure 35 Diagramme d'activité de sprint 3..............................................................................41

Figure 36 Page d'un produit ajouté au panier Figure 37 Page de panier..........................42
Figure 38 Page de validation d'adresse Figure 39 Page de méthode de livraison...............43
Figure 40 Page de méthode de paiement..................................................................................43
Figure 41 Page de profil............................................................................................................44
Figure 42 Différence entre méthode classique et agile.............................................................49
Figure 43 Logo React Native....................................................................................................54
Figure 44 Statistiques des frameworks utilisés.........................................................................55
Figure 45 Répartition des frameworks par régions...................................................................56
Figure 46 Logo de Magento......................................................................................................57
Liste des tableaux
Liste des tableaux
Tableau 1 Informations rélatives à Satoripop.............................................................................4

Tableau 2 Caractéristiques de pc-portable................................................................................14
Tableau 3 Caractéristiques de smartphone...............................................................................14
Tableau 4 Backlog du produit...................................................................................................18
Tableau 5 Plan des sprints.........................................................................................................19
Tableau 6 Backlog du sprint 1..................................................................................................22
Tableau 7 Description textuelle de "Rechercher un produit"...................................................23
Tableau 8 description textuelle de " Consulter des produits"...................................................23
Tableau 9 Description textuelle de " Consulter les catégories "...............................................24
Tableau 10 Description textuelle de " Accéder au détail d’un produit"..................................24
Tableau 11 Backlog du sprint 2................................................................................................29
Tableau 12 Description textuelle "Créer un compte"...............................................................30
Tableau 13 Description textuelle de "Se connecter".................................................................30
Tableau 14 Description textuelle de " Réinitialiser mot de passe "..........................................31
Tableau 15 Description textuelle de " Se déconnecter "...........................................................31
Tableau 16 Backlog du sprint 2................................................................................................36
Tableau 17 Backlog du sprint 2 en jira.....................................................................................36
Tableau 18 Description textuelle de "Ajouter des produits au panier".....................................37
Tableau 19 Description textuelle de "Supprimer un produit de panier"...................................37
Tableau 20 Description textuelle de "Valider une commande"................................................38
Tableau 21 Description textuelle de "Consulter historique des commandes"..........................38
Remerciements
Introduction général
Introduction générale
D
e nos jours, de moins en moins de consommateurs veulent se déplacer pour faire leurs achats.
Grâce à l’Internet, ces consommateurs peuvent effectuer leurs achats sans quitter leurs
domiciles, nous parlons précisément de solution e-commerce.
Le e-commerce occupe une place croissante sur le marché de la vente, cette tendance devrait
s’intensifier dans les années à venir, du fait des changements dans les habitudes des
consommateurs provoqués par des crises telle que la crise sanitaire mondiale du Covid-19 qui
a mis au premier plan le télétravail et les commandes en ligne.
Cette pandémie a accru le désir des consommateurs à effectuer des achats à distance par
l’intermédiaire des appareils électroniques (ordinateurs, smartphones, tablettes, etc.).
Le mobile est en effet devenu un support incontournable pour les e-commerçants, puisque
c’est celui qui génère le plus de visites par comparaison à d’autres plateformes. Toutefois,
l’ordinateur reste le moyen privilégié par les internautes pour effectuer leurs achats.
En fait, Satoripop confronte certains problèmes qui peuvent ralentir le développement de ses
applications e-commerce tels que : le temps de livraison, la redondance des modules, la
difficulté de maintenance et les besoins des clients qui ne cessent d’augmenter.
Dans ce contexte s’inscrit notre projet de fin d’études proposé par l’entreprise Satoripop,
spécialisée dans les services mobile et web et localisée à Sousse. Ce projet de 3 mois consiste
en la conception et le développement d’une application mobile e-commerce maintenable et
évolutive.
Ce rapport se compose de cinq chapitres comme suit :

Le premier chapitre « Aperçu général et cadre de projet » permet de placer le projet dans
son contexte général, il est consacré à la mise en relief du cadre de développement de notre
application et à une étude de l’existant afin d’étudier d’une manière critique quelques
applications présentes sur le marché traitant la problématique de notre projet.
Le deuxième chapitre « Etat de l’art » se focalise sur la base théorique et les technologies
utilisées pour réaliser le travail requis.
P a g e 1 | 88
Introduction général
Le deuxièmetroisième chapitre « Initialisation de projet » permet de placer le projet dans

son contexte technique. Nous présenterons les notions techniques apprises ainsi que les
plateformes utilisées.
Ensuite, nous serons amenés à définir les principales fonctionnalités de notre application et à
identifier les acteurs et leurs besoins ainsi que le backlog du produit.
Le quatrième troisième chapitre sera consacré au sprint 1 « Recherche d’un produit »
Le quatrièmecinquième chapitre sera consacré au sprint 2 « Authentification »
Le dernier chapitre sera consacré au sprint 3 « Valider une commande » et présentera aussi la
phase de clôture avec la version finale de notre système.
Nous allons terminer ce rapport par une conclusion générale récapitulant tout le travail que
l’on a réalisé, tout en parlant des compétences et de l’expérience que nous avons acquise
grâce à ce projet
P a g e 2 | 88
Chapitre 1 : Aperçu général et cadre de projet
Introduction
Ce premier chapitre présente en premier lieu le cadre de notre projet, la société au sein
de laquelle nous avons effectué notre projet de fin d’études. Dans la seconde partie, nous
allons faire l’analyse et la critique de l’existant pour cerner nos objectifs afin de développer
un système de qualité. Enfin, pour conclure cette partie nous présenterons la méthodologie de
conception adoptée.
I. Organisme d’accueil
1. Présentation de la société
Satoripop est une société de développement de logiciels fondée en 2014 et basée à

Sousse. Elle est la filiale de Satoripop Paris, avec plus de 130 collaborateurs répartis sur 8
départements. Satoripop propose une large gamme de services et de solutions logicielles
fiables de bout en bout pour les entreprises de divers secteurs verticaux.
Son capital expérience est extrêmement riche. En effet, elle est en possession de
plusieurs équipes de passionnés maitrisant chacune son domaine de compétences (web,
mobile, etc.) et les domaines connexes. La force de SATORIPOP réside dans une philosophie
centrée sur les besoins de ses clients. En effet, elle suit une méthodologie basée sur l´écoute et
le conseil dans le but d’offrir des réalisations de qualité parfaitement adaptées aux objectifs de
ses clients comme aux ressources qu’ils souhaitent y consacrer.
SATORIPOP possède une structure poly-cellulaire qui se base principalement sur la
logique d’androcratie. Robert Waterman définit cette logique dans son livre « Adhocracy The
power to change » [1] comme l’opposée de la bureaucratie. En effet, cette structure cherche à
réduire les niveaux hiérarchiques dans le but d’assurer une progression horizontale des
carrières, de stimuler la créativité individuelle et de permettre une flexibilité d’organisation.
2. Fiche d’identité de la société

La figure suivante 1 représente le logo de Satoripopla société
P a g e 3 | 88
Figure 1 Logo de Satoripop
Nom Satoripop
Site web https://www.satoripop.com
Email hello@satoripop.com
Adresse Blvd Hassouna Ayachi, Sousse 4000 Tunisie
Numéro téléphone +216 73 210 332
Tableau 1 Informations rélatives à Satoripop
Le tableau ci-dessus présente les coordonnées de la société.
II. Cadre général du projet

Dans le marché en plein essor des solutions e-commerce, la plupart des boutiques en ligne
misent sur une application e-commerce comme extension de leur page web. Par conséquent,
en tant que boutique en ligne, il est quasiment indispensable d’avoir une application mobile
pour stimuler la croissance et les ventes.
Mon projet de fin d’études consiste à développer une application mobile de e-commerce
qui a pour but de vendre les produits d’une société bien définie.
III. Etude de l’existant
1. Analyse de l’existant
Parmi les principales étapes d’étude d’un nouveau projet, l’étape de collecte
d’informations sur les concurrents plus précisément sur les plateformes existantes qui offrent
un service similaire à l’ensemble des services que nous envisageons de réaliser.
Pour cela nous avons fait une étude sur deux applications mobiles de e-commerce
existantes en Tunisie.
Jumia Tunisie
Jumia [1] est une entreprise de commerce en ligne présente sur le marché africain et
fondée en 2012. La plateforme de Jumia est un marché en ligne qui met en relation des
vendeurs et des acheteurs, en mettant à leur disposition un service logistique, permettant
l'expédition et la livraison des colis en plus d'un service de paiement [1]. En 2019, plus de
80 000 vendeurs proposent une large gamme de produits et de services à la demande :
P a g e 4 | 88
appareils électroménagers et électroniques, mode, jouets pour enfants, mais aussi des services
tels des réservations d'hôtels ou d’avion, et la livraison de repas. Jumia est notamment
qualifiée d'« Alibaba africain » ou d'« Amazon africain » et elle est présente spécialement en
Tunisie.
 Jumia est une Marketplace1 qui prend en charge une énorme quantité de marques et de
sociétés en partenariat, donc elle ne présente pas une marque particulière comme l’objectif
de notre application.
Wamia.tn
Wamia.tn [2] est un Marketplace Tunisien fondé grâce à une jeune équipe de
passionnés constamment à la recherche d'innovations et de nouvelles tendances. A travers
cette plateforme, ils mettent en relation de nombreux acheteurs et vendeurs à travers toute
l’étendue du territoire Tunisien. Ils proposent l’offre la plus diversifiée du e-commerce au
meilleur prix.
Elle est spécialisée dans la vente de matériel de cuisson, ustensiles de cuisine, art de
table, décoration, accessoires tables, accessoires cuisines, électroménager, maison & déco. Par
ailleurs, elle offre les possibilités économiques aussi bien aux particuliers qu’aux
entrepreneurs, de devenir revendeur à travers leur grande plateforme.
 Wamia.tn est un produit tunisien qui présente des fonctionnalités compatibles à celle de
Jumia.
3. Critique de l’existant
C’est vrai qu’avec la Marketplace, l’entreprise ou le vendeur qui bénéficie de l’espace

de vente profite de la notoriété d’un site marchand. Il devient donc plus facile d’attirer
l’attention des cibles et de pouvoir vendre ses produits mais il arrive, à certains temps à cause
d’un grand nombre de concurrents, qu’une marque devienne un peu invisible.
Pour une marque bien connue sur le marché, un Marketplace va compliquer un peu les
ventes en plus en Tunisie nous n’avons pas encore une solution mobile de e-commerce 100%
tunisienne et qui est spécifique à une seule marque.
1
Se traduit littéralement comme la place de marché. C’est une interface web utilisée aujourd’hui par
de nombreuses sociétés pour augmenter leur taux de vente.
P a g e 5 | 88
4. Solution Proposée
Notre solution proposée par la société est une application mobile de e-commerce qui
va être un produit générique pour toute société qui a l’intention de lancer sa propre
application mobile avec ses propres produits. Donc il suffit d’ajouter les produits dans
notre plateforme Magento 2 et choisir un thème et design et notre application est prête.
Donc cette solution va faciliter le développement des applications mobiles de e-
commerce pour Satoripop et va diminuer le temps de développement et la livraison du
produit au client.
IV. Langage et méthodologie de conception

Une méthodologie de développement fait référence à un processus standard suivi dans une
organisation afin de mener toutes les étapes nécessaires pour analyser, concevoir,
implémenter et maintenir un système d’information.
Pour bien conduire notre projet et nous assurer du bon déroulement des différentes phases,
nous avons opté pour Scrum comme cadre de travail méthodologique.
Après le choix de la méthodologie, nous avons besoins d’un langage de modélisation
unifiée pour la modélisation de notre projet. Pour concevoir notre système, nous avons choisi
UML3 comme un langage de modélisation.
V.Pourquoi Scrum4
Scrum est issu des travaux de deux des signataires du Manifeste Agile 5, Ken Schwaber et
Jeff Sutherland, au début des années 1990.Il appartient à la famille des méthodologies
itératives et incrémentales et repose sur les principes et les valeurs agiles 6.Le plus souvent,
les experts de Scrum, même ses fondateurs, le décrivent comme un cadre ou un patron de
processus orienté gestion de projet et qui peut incorporer différentes méthodes ou pratiques
d’ingénierie. S’il est difficile de définir la nature de Scrum, sa mise en place est beaucoup
plus simple et peut être résumée par la Figure ci-dessous.
Le principe de base de Scrum est le suivant :
2
Est un outil puissant et open source pour créer des sites e-commerces
3
UML : Unified Modeling Language
4
Voir Annexe A
5
Le manifeste agile est un texte rédigé et signé en 2001 par 17 experts dans le domaine de développement
d’applications informatique.
6
Voir Annexe B
P a g e 6 | 88
Dégager dans un premier lieu le maximum des fonctionnalités à réaliser pour

former le backlog du produit,
En second lieu définir les priorités des fonctionnalités et choisir lesquelles seront
réalisé dans chaque itération,
Par la suite focaliser l'équipe de façon itérative sur l’ensemble de fonctionnalités à
réaliser, dans des itérations appelées Sprints,
Faire des réunions tous les jours « daily meeting » et chaque semaine « weekly
meeting » pour encadrer les équipes et recaler les objectifs
Un Sprint aboutit toujours sur la livraison d’un produit partiel fonctionnel appelé
incrément.
La figure 2 présente le principe de Scrum
Figure 2 Principe Scrum
Dans ses grandes lignes, Scrum définit un jeu minimal d’acteurs, de cérémonies et
d’artefacts qui permettent de relever les défis principaux du développement incrémental : la
planification, la gestion du temps et la gestion des obstacles.
Conclusion
P a g e 7 | 88
Ce chapitre a présenté dans un premier temps la société puis le cadre du projet, et une
étude de l’existant. En vue de suivre un avancement logique dans ce rapport, une étude
théorique concernant l’état de l’art fera l’objet du prochain chapitre.
P a g e 8 | 88
Chapitre 23 : Initialisation du projet

Introduction
Ce deuxième chapitre détaille les premières étapes de notre projet. Tout d’abord, nous
présentons l’environnement de travail. Ensuite, nous identifions les acteurs, les besoins
fonctionnels et non fonctionnels de notre application. Enfin, l’installation de l’environnement
de développement.
I. Préparation du projet
1. Formation, apprentissage et insertion professionnelle
Notre projet E-commerce avec la plateforme Magento est proposé par la société
« Satoripop ». Avant de se lancer directement dans un cadre de travail, on m’a formé sur
plusieurs thèmes.
La formation nous a beaucoup aidé à intégrer la vie professionnelle avec succès, elle a
duré plus d’un mois en portant sur des sujets différentsdifférents7.
Formation JavaScript et Type Script 8
Formation React Native 9
2. Installation et configuration de Magento

L’installation de la plateforme Magento n’est pas assez facile donc sa configuration est un
peu complexe, mais son utilisation après est facile.
Magento offre deux interfaces Frontend et Backend.
Le Front end c’est un site web prêt qui affiche les produits existants et le backend est une
interface Dashboard (table de bord) qui présente des fonctionnalités pour gérer le store
(magasin).
Frontend
L’interface Luma est le thème par défaut après l’installation, nous pouvons ajouter
ultérieurement des thèmes au besoin. Ci-dessous laune figure 3 de cette interface ;
7
Voir Annexe C
8
Voir fiches dans Annexe C
9
Voir fiches Annexe C
P a g e 9 | 88
Figure 3 Frontend de magento
Backend
Le tableau de bord offert par Magento est une interface pour gérer les clients,
les commandes, les ordres, les rapports, les produits, les catégories, … etc.
 Page d’authentification : la figure 4 fera l’objet de cette page
Figure 4 Page d'authentification magento
 Tableau de bord : ci-dessous la figure 5 c’est une page de page dédiée pour
l’administrateur du système
P a g e 10 | 88
Figure 5 Tableau de bord

 Vente : La figure 6 c’estprésente la page des commandes et toutes les transactions
passées
Figure 6 Page vente Magento
P a g e 11 | 88
 Catalogue : La figure 7 c’estprésente la page où nous trouvons les produits et leurs

catégories
Figure 7 Page catalogue de magento
 Clients : La figure 8 c’estaffiche l’ensemble des clients inscrits dans le site
Figure 8 Page clients de magento
 L’interface front est un ensemble de blocs et pages personnalisés, c’est l’administrateur

qui gère le contenu de son site ainsi que le thème et le design de frontend. La figure 9
affiche cette page ;
P a g e 12 | 88
Figure 9 Elements de site magento
 Rapports : Magento offre des rapports au niveau de chaque fonctionnalité (vente, clients,
produits, …), la figure 10 fera l’objet de cette page ;
Figure 10 Page rapports de magento
 Store : c’est le magasin à gérer. Avec Magento, on peut gérer plusieurs magasins
avec un seul tableau de bord, cet avantage aide à gérer plusieurs applications de
différents contenudifférents contenus avec la même interface. La figure 11 présente
cette page ;
P a g e 13 | 88
Figure 11 Page store de magento
 Système : c’est la configuration générale du système
Figure 12 Page système de magento
3. Environnement Matériel
Tout au long de notre projet, nous avons eu à notre disposition un ordinateur portable
dont la configuration est présentée ci-dessous dans le tableau 2 ;
P a g e 14 | 88
PC-Portable/RAM HP / 8Go
Disque dur 250Go
Processeur Intel® Core™ i5-4310U CPU @ 2.00GHz 2.60GHz
Système Windows 10 Professionnel 2020 64bits

d’exploitation
Tableau 2 Caractéristiques de pc-portable
En plus, nous avons utilisé un Smartphone Huawei Honor 8C pour tester l’application mobile.
Ce Smartphone a les caractéristiques suivantes :
Système d’exploitation Android
Version Android 8.1.0 (Oreo)
Taille de l’écran 6.26 pouces
Résolution 1200 x 1920 pixels
Tableau 3 Caractéristiques de smartphone
4. Environnement logiciel
Microsoft Word 2016 est l’outil de traitement de texte que nous avons
utilisé pour créer le rapport de notre projet.
Visual Studio Code est un éditeur de code extensible développé par

Microsoft pour Windows, Linux et MacOs. Les fonctionnalités incluent la
prise en charge du débogage, la mise en évidence de la syntaxe, la
complétion intelligente du code, les snippets, la refactorisation du code et
Git intégration.
P a g e 15 | 88
FlowChart : Est un logiciel en ligne de modélisation et conception de

diagrammes, il offre un essai gratuit de 30 jours.
Laragon : Laragon est un environnement de développement Web dédié au

système d’exploitation Windows.
II. Capture des besoins

1. Identification des acteurs
Notre application sera accessible par :
- L’utilisateur : toute personne qui installe l'application sur son Smartphone
dont il a la possibilité de consulter le catalogue, les promotions et les
offres.
- Le Client : toute personne qui fait l'inscription à l'application et il peut,
par la suite, réserver des produits.
- l’administrateur : Son rôle est de gérer le fonctionnement de la plateforme e-
commerce.
2. Identification des besoins

Les besoins sont divisés en deux catégories, à savoir les besoins fonctionnels et les
besoins non fonctionnels.
1.
2.
2.1. Besoins fonctionnels
Dans la suite, nous désignons par centres d'intérêts les différents services offerts
par notre application :
Côté utilisateur
 Consultation des produits : il dispose d'un accès aux produits vendus par la
boutique.
P a g e 16 | 88
 Inscription : Le système doit permettre à l’utilisateur de s'inscrire. Cette

fonctionnalité lui permet d'avoir plus de visibilité sur le contenu de
l'application et d'avoir plus d'accès aux ressources qu'il contient. Un
compte est attribué à chaque client inscrit, qui lui permet de réserver des
produits du catalogue en ligne.
 Rechercher des produits : Il peut chercher un produit spécifique en accédant
au catalogue de produits.
 Consulter les catégories : Il peut consulter les diverses catégories et à partir
de là, les divers produits par catégorie.
 Consulter les détails d’un produit : Il peut accéder au détail d’un produit
(description, images, … etc.)
Côté client
En plus des fonctionnalités de l’utilisateur, le client peut :
 Ajouter des produits au panier : en tant que client, on peut choisir des
produits et les ajouter au panier.
 Valider la commande : après avoir fait une sélection dans le panier on
poursuit par la validation de la commande en spécifiant l’adresse et la
méthode de payment.
 Consulter l’historique des commandes : le client peut consulter
l’historique de ses commandes et celle qui est en cours si elle existe.
 Modifier le profil : le client peut modifier ses coordonnées et ses
informations personnelles..
 Côté Administrateur
C’est le propriétaire du site, il peut :
Gérer les produits : Il peut ajouter, modifier ou supprimer un produit.
Gérer les commandes : Il étudie et valide les commandes passées par les clients.
Gérer les clients : Il peut changer le mot de passe des clients inscrits, visualiser leurs
commandes, supprimer un client, ... etc.
 Changer le thème : il peut choisir le design et le thème

P a g e 17 | 88
2.2. Besoins non fonctionnels
L’application impose des contraintes à respecter pour assurer sa performance, sa sécurité

et sa maintenabilité. Ces contraintes caractérisent les besoins non fonctionnels de
l’application. Ainsi, notre projet doit répondre aux critères suivants :
a. Les contraintes ergonomiques :
L’application doit répondre aux contraintes ergonomiques suivantes :
- Une interface simple.
- Un accès rapide à l’information et une simple manipulation.
- La convivialité et la compréhensibilité des interfaces graphiques
- L’utilisation des messages informatifs et des messages d’erreur bien formées et

bien lisibles qui optimise l’expérience utilisateur.
b. Les contraintes de sécurité :
Pour assurer une bonne sécurité des données des utilisateurs, il faut :
- Réaliser une interface d’authentification
- Utiliser des sessions permettant d’éviter le risque d’intrusion et de vols des

données confidentielles des utilisateurs.
c. Disponibilité et maintenabilité : L’application doit être accessible à tout moment et

devra être extensible, c’est-à-dire facilement maintenable et s’adaptant aux
nouvelles exigences de sorte qu’elle pourra y avoir une modification ou ajout
d’une fonctionnalité.
d. La performance : L’application doit être performante, c'est-à-dire que le système
doit réagir dans un délai précis, quelle que soit l’action d’utilisateur.
e. Audit : Pour chaque opération dans cette application qui nécessite une entrée de
données par l'utilisateur, une vérification est appliquée par un système de contrôle
sur les champs.
f.
P a g e 18 | 88
III. Pilotage de projet avec Scrum

1. Identification de l’équipe Scrum
L’équipe a un rôle capital dans Scrum, elle permet d’optimiser la productivité et la
flexibilité. Afin de parvenir à ses objectifs, elle doit s’auto-organiser et être multi compétente.
Dans le contexte de notre projet, on trouve :
Product Owner : Le directeur de département
Scrum Master: Mr Salim Brahmi
Scrum team: c’est moi qui présente l’équipe de développement
2. Outil Scrum
Concernant l’outil de travail pratique de Scrum nous choisissons Jira Software qui est
un système de suivi de tickets, de bugs, un système de gestion des incidents, et un système de
gestion de projets développés par Atlassian10. Ci-dessous le logo de Jira ;
Figure 13 Logo Jira Software
3. Le backlog du produit
Chaque élément du backlog représente une fonctionnalité, user story, priorité et
complexité.
Priorit
User story Complexité
Id é
US1 En tant que client je peux consulter la page d'accueil afin Élevé Élevé
de voir les produits
US2 En tant que client, je peux consulter les catégories afin de Moyen Moyen
choisir une catégorie spécifique
10
Est un éditeur de logiciels, basé en Australie, qui développe des produits pour la gestion de développement et
de projets.
P a g e 19 | 88
US3 En tant que client, je peux accéder aux détails d'un produit Moyen Moyen
afin de voir la description du produit
US4 En tant que client je peux rechercher un produit spécifique Élevé Moyen
afin de trouver mon besoin rapidement
US5 En tant que client, je peux choisir affichage mode liste ou Faible Faible
mode cartes afin de scroller facilement
US6 En tant que client, je peux gérer le panier afin d'ajouter ou Élevé Élevé
supprimer un produit
US7 Et tant que user, je peux créer un compte dans l'application Élevé Élevé
afin d'avoir accès à mon panier et ordres
US8 En tant que user je peux me connecter afin d'accéder à Élevé Élevé
mon compte
US9 En tant que client je peux réinitialiser mon mot de passe en Moyen Élevé
cas d'oubli afin d'avoir accès à mon compte
US10 En tant que client, je peux valider une commande afin de Élevé Élevé
recevoir mon commande
US11 En tant que client je peux consulter l'historique de mes Moyen Moyen
commandes afin de voir les ordres anciens
US12 En tant que client, je peux me déconnecter afin de fermer Moyen Moyen
mon compte
US13 En tant que client, je peux modifier mon profil afin de Moyen Moyen
modifier mes informations personnelles
Tableau 4 Backlog du produit
En suivant cette méthodologie Agile, on a découpé le projet en des sprints qu’on va

présenter dans le tableau ci-dessous :
Durée Objectif
Sprint 1 1 semaine (25 mai 2021 à 1 juin 2021) Recherche d’un produit
Sprint 2 1 semaine (4juin 2021 à 11 juin 2021) AuthentificationConnexion
Sprint 3 1 semaine (11 juin 2021 à 18 juin 2021) Validation de commande
Tableau 5 Plan des sprints
4. Diagramme des cas d’utilisation global

Le diagramme de cas d’utilisation global est le diagramme général du système qui
modélise les fonctionnalités principales du système La figure 14ci-dessus présente ce
diagramme.
P a g e 20 | 88
Figure 14 Diagramme des cas d'utilisation global
Conclusion
Dans ce chapitre nous avons initialisé notre projet premièrement avec un récapitulatif
des formations suivies et l’installation de l’environnement de développement. Ensuite, nous
définissons les besoins fonctionnels et non fonctionnels de notre système ainsi que le backlog
du produit et le diagramme des cas d’utilisation général. Dans le chapitre qui suit, nous allons
traiter notre premier sprint.
P a g e 21 | 88
Chapitre 34 : Sprint 1
Introduction
Tout au long de ce chapitre, nous allons traiter les users stories de notre premier sprint
pour produire un incrément potentiellement livrable.
C’est à l’équipe de développement qu’il appartient de fixer de façon réaliste la charge
de travail à accomplir, et c’est au propriétaire du produit qu’il incombe de choisir les critères
qui permettront d’approuver et d’accepter le travail réalisé. La durée d’un sprint est
déterminée par le Scrum master, dans notre cas un sprint dure une semaine.
I. Backlog du sprint 1
En début de sprint, un but est défini. Pour atteindre cet objectif, l’équipe de
développement choisit lors de la réunion de planification de sprint quels éléments du Backlog
du sprint seront réalisés. Ces éléments sont alors groupés dans un Backlog du sprint. Chaque
équipe met à jour régulièrement le Backlog du sprint au cours de son activité, afin que celui-ci
donne une vision la plus précise possible de ce que l’équipe prévoit de réaliser pour atteindre
l’objectif du sprint.
Le Backlog du sprint est sous la responsabilité de l’équipe et elle est seule à pouvoir le
modifier en cours d’itération.
1. But du sprint
Avant de se lancer dans un sprint, l’équipe SCRUM doit obligatoirement en définir le but.
Pour cela, nous devons répondre à une question fondamentale : Pourquoi faisons-nous ce
sprint?
Le but de ce sprint est la « Recherche d’un produit »
2. Backlog du Sprint 1
Après avoir défini le but exact de notre sprint, il est temps de décider quelles user stories
nous allons inclure dans ce dernier, le choix est opéré par l’équipe. Ci-dessous le Backlog du
Sprint 1 :
User Tâches Estimation
story
Configurer les endpoints de Magento qui affichent les produits 4heures

U
S
P a g e 22 | 88
Préparer la page d’accueil et les composants utilisés dedans 1jour

1 Tester et traiter les erreurs qui peuvent apparaitre 4heures
Configurer les endpoints de Magento qui affichent les catégories 4heures
Préparer la page de catégories ainsi que les composants utilisés

US2
1jour
Tester et traiter les erreurs qui peuvent apparaitre-Traiter les erreurs 4heures
qui peuvent se produire
-Développer l’interface graphique de page détail ainsi que ses 1jour
composants utilisés
US3
Tester et traiter les erreurs qui peuvent apparaitre-Traiter les erreurs 4heures
qui peuvent se produire
-Préparer les endpoints qui font la recherche d’un mot entré dans
4heures
l’ensemble de produits présentes dans Magento
US4
-Développer la page de recherche

4heures
-Traiter les erreurs qui peuvent se produire
-Développer la méthode d’affichage liste ou carte
2heures
US5
-Afficher les icones correspondants à chacune
Tableau 6 Backlog du sprint 1
La figure 15 présenteCi-dessous le sprint backlog de sprint 1 dans l’outil Jira :
Figure 15 Backlog du sprint 1 en Jira
II. Spécification fonctionnelle

P a g e 23 | 88
1. Diagramme des cas d’utilisation

Ci-dessous la figure 16 qui présente le diagramme des cas d’utilisation du sprint 1
Figure 16 Diagramme des cas d'utilisation de sprint 1
2. Description textuelle des cas d’utilisation
3.
4. Description textuelle du cas d’utilisation « Rechercher un produit »

Le tableau 7 décrit la description textuelle desu cas d’utilisation « Rechercher un
produit »
Titre Rechercher un produit
Acteur Utilisateur
Précondition L’utilisateur clique sur la barre de recherche.
Post- L’utilisateur cherche un produit.
conditions
Scénario 1. L’utilisateur entre un lettre ou nom dans la barre de recherche
nominal
2. Une liste de résultats s’affiche au client, il peut choisir entre eux
en cliquant au-dessus du produit voulu.
3. Il survole dans les résultats de recherche.
Scénario - Si le texte entré n’associe pas de produit, on affiche le message
alternatif « aucun produit à afficher »
Tableau 7 Description textuelle de "Rechercher un produit"
Le tableau 8 décrit la description textuelle des cas d’utilisation « Consulter des produits »
Description textuelle du cas d’utilisation « Consulter des produits »
Titre Consulter des produits
P a g e 24 | 88
Acteur Utilisateur
Précondition L’utilisateur ouvre l’application.
Post- L’utilisateur consulte des produits
conditions
Scénario 1. L’utilisateur survole dans la page d’accueil,
nominal
2. il peut voir tous les produits ou cliquer sur un produit pour voir
ses détails.
Tableau 8 description textuelle de " Consulter des produits"
Le tableau 9 décrit la description textuelle des cas d’utilisation « Consulter les catégories »
Description textuelle du cas d’utilisation « Consulter les catégories »

Titre Consulter les catégories
Acteur Utilisateur
Précondition L’utilisateur ouvre l’application.
Post- L’utilisateur consulte les catégories
conditions
Scénario 1. L’utilisateur survole dans la page d’accueil,
nominal
2. Il peut choisir une catégorie bien définie,
3. Tous les produits de telle catégorie sont affichés
Tableau 9 Description textuelle de " Consulter les catégories "
Le tableau 10 décrit la description textuelle des cas d’utilisation « Accéder au détail d’un
produit »
Description textuelle du cas d’utilisation « Accéder au détail d’un produit »
Titre Accéder au détail d’un produit
Acteur Utilisateur
Précondition L’utilisateur est dans la page d’accueil où ils sont listés les produits ou
cherche un produit
Post- L’utilisateur consulte les détails d’un produit
conditions
Scénario 1. Le client clique sur un produit spécifique pour voir ses détails,
nominal
2. Une page de détail de produit sur lequel le client a cliqué est
affichée.
Tableau 10 Description textuelle de " Accéder au détail d’un produit"
III. Conception
P a g e 25 | 88
1. Diagramme de séquences
Ci-après la figure 17 qui présente le diagramme de séquences pour la fonctionnalité «
Rechercher produit »
………………………
Figure 17 Diagramme de séquences « Rechercher produit »

Figure …. : Diagramme de séquences « Rechercher produit »
3. Diagramme des classes

La figure 18 affiche le diagramme de classes utilisées au cours de ce sprint
P a g e 26 | 88
Figure 18 Diagramme de classes de sprint 1
5. Réalisation
6.
P a g e 27 | 88
………………………
Figure …. : Diagramme de séquences « Rechercher produit »
P a g e 28 | 88
7. Réalisation
Cette partie est consacrée à l’exposition du travail achevé à travers des captures d’écrans
de différentes interfaces développées pendant ce sprint.
Interface d’accueil et de catégories
Dans cest écranécrans (figures 19 et 20) l’utilisateur peut consulter la page d’accueil et les
catégories
P a g e 29 | 88
Figure 19 Page d'accueil Figure 20 Page des catégories
P a g e 30 | 88
Interface de recherche
Dans cest écrans (figures 21 et 22) l’utilisateur peut rechercher un produit
Figure 21 Page de recherche Figure 22 Page résultat de recherche
P a g e 31 | 88
Conclusion
A la fin de ce chapitre, nous avons traité le premier sprint qui a pour but « Rechercher
produit ». Dans le chapitre qui suit, on se consacre au sprint 2 couvrant les fonctionnalités
d’authentification.
P a g e 32 | 88
Introduction
Après avoir fini le premier sprint, on passe au suivant. Tout au long de ce chapitre,
nous allons traiter les users stories de ce sprint ainsi que la spécification, la conception et aussi
l’incrément livrable à la fin du sprint.
1. But du sprint
Notre objectif pour ce sprint est de permettre au client de créer un compte et avoir l’accès
pour pouvoir valider une commande alors le but est « AuthentificationConnexion ».
2. Backlog du sprint 2User stories

nous allons inclure dans ce dernier, le choix est opéré par l’équipe. Ci-dessous le Backlog du
Sprint 1 :
User Taches Estimation
story
-Configurer les endpoints de magento qui permet au client de 4heures

créer un compte
-Développer la page de création d’un compte et son design 1jour et
US7
4heures
Tester et traiter les erreurs qui peuvent apparaitre -Manipuler les 4heures
erreurs qui peuvent se produire lors de création d’un compte
-Configurer les endpoints de magento qui permet au client de se 4heures
connecter
-Préparer la page de connexion et son design 1jour et
US8
4heures
Tester et traiter les erreurs qui peuvent apparaitre-Traiter les 4heures
erreurs qui peuvent se produire
-Développer l’outil de réinitialisation de mot de passe et le 1jour et
récupérer par mail
4heures
US9

P a g e 33 | 88
-Préparer la logique correspondant pour permettre au client de se

4heures
US12 déconnecter
-Lier le bouton de déconnexion avec la logique traité
Tester et traiter les erreurs qui peuvent apparaitre -Traiter les 4heures
Ci-dessous la figure 23 qui présente le le sprint backlog de du sprint 2 dans l’outil Jira :
Figure 23 Backlog du sprint 2 en jira

Ci-dessous le diagramme des cas d’utilisation du sprint 2
P a g e 34 | 88
Figure 24 Diagramme des cas d'utilisation du sprint 2
3. Description textuelle du cas d’utilisation « Créer un compte »

Le tableau 12 décrit la description textuelle du cas d’utilisation « Créer un compte »
Titre Créer un compte

Acteur Utilisateur
Précondition L’utilisateur clique sur le bouton de création d’un compte.
Post- L’utilisateur a un compte pour accéder son profil et valider ses
conditions commandes.
Scénario 1. Pour démarrer le processus de création d’un compte, l’utilisateur
nominal doit entrer les champs requis (nom, prénom, email, pays, adresse,
numéro de téléphone, …)
2. Cliquer sur le bouton créer un compte
3. Le compte est créé avec succès
Scénario - Si un des champs est vide ou ne respecte pas le format demandé un
alternatif message d’erreur est apparu sous les champs et l'utilisateur est autorisé à
corriger.
Tableau 12 Description textuelle "Créer un compte"
Le tableau 13 décrit la description textuelle du cas d’utilisation « Se connecter »

Titre Se connecter
Acteur Client
Précondition L’utilisateur a déjà un compte sur l’application.
Post- L’utilisateur a un compte pour accéder son profil et valider ses
conditions commandes.
Scénario 1. Pour démarrer le processus de connexion, l’utilisateur doit entrer
P a g e 35 | 88
nominal son email et son mot de passe et taper le bouton se connecter.

2. Quand l’utilisateur entre des informations valides, il va être
redirigé à son compte pour pouvoir passer des commandes.
Scénario A1 : Si un des champs (email ou mot de passe) est vide ou ne respecte pas
alternatif le format demandé un message d’erreur est apparu.
A2 : Si l’email entré n’existe pas un message d’erreur “email n’existe
pas” est apparu et l'utilisateur est autorisé à corriger
Tableau 13 Description textuelle de "Se connecter"
Le tableau 14 décrit la description textuelle du cas d’utilisation « Réinitialiser mot de passe »

Description textuelle du cas d’utilisation « Réinitialiser mot de passe »
Titre Réinitialiser mot de passe
Acteur Client
Précondition -L’utilisateur a déjà un compte sur l’application.
-L’utilisateur choisit le titre Mot de passe oublié.
Post-
L’utilisateur a la possibilité de récupérer son compte
conditions
Scénario 1. Pour démarrer le processus de réinitialisation de mot de passe, le
nominal client doit entrer son email et cliquer sur réinitialiser.
2. Après avoir reçu le lien par email, le client tape sur le lien et écrit
un nouveau mot de passe pour son compte et passer par la suite
pour connecter avec le nouveau mot de passe.
Scénario -Si les champs d’email est vide ou bien ne respecte pas le format demandé
alternatif ou bien il n’existe pas un compte lié avec cet email un message d’erreur
est apparu et l'utilisateur est autorisé à corriger.
Tableau 14 Description textuelle de " Réinitialiser mot de passe "
Le tableau 15 décrit la description textuelle du cas d’utilisation « Se déconnecter »

Description textuelle du cas d’utilisation « Se déconnecter »
Titre Se déconnecter
Acteur Client
Précondition -L’utilisateur est connecté
Post-
L’utilisateur ferme son compte
conditions
Scénario 1. Pour démarrer le processus de déconnexion, le client clique sur
nominal “Se déconnecter“.
2. Si le client est déconnecté de son compte avec succès il peut par la
suite se connecter avec un autre compte.
Tableau 15 Description textuelle de " Se déconnecter "
III. Conception
P a g e 36 | 88
1. Diagramme des séquences

La figure 25 présente le diagramme de séquence de « Se connecter »Diagramme
de séquence « Se connecter»
Figure 25 Diagramme de séquence "Se connecter"
La figure 26 présente le diagramme de séquence de « Créer un compte »
P a g e 37 | 88
Diagramme de séquence « Créer un compte»
Figure 26 Diagramme de séquence de " Créer un compte "

Ci-dessous la figure 27 qui affiche le diagramme de classele(s) table(s) utilisé dans ce
sprint ;
P a g e 38 | 88
Figure 27 Diagramme de classe de sprint 2
3. Réalisation
Cette partie est consacrée à l’exposition du travail achevé à travers des captures
d’écrans de différentes interfaces développées pendant ce sprint.
Interface de création d’un compte

Dans cest écrans, l’utilisateur peut créer un compte. dans notre système
Figure 28 Page de Création d’un compte 1 Figure 29 Page de création d'un compte 2
P a g e 39 | 88
Interface de connexion
Dans cet écran, l’utilisateur peut se connecter ;
P a g e 40 | 88
Figure 30 Page de se connecter
Conclusion
A la fin de ce sprint, nous avons traité le deuxième sprint qui a pour but
« Authentification ». Dans le chapitre qui suit, il nous reste seulement un dernier sprint qui
consiste à valider une commande.
P a g e 41 | 88
Introduction
Après avoir fini le deuxième sprint et après avoir fini la phase de connexion, on passe
au suivant. Tout au long de ce chapitre, nous allons traiter les users stories de ce sprint ainsi
que la spécification, la conception et aussi l’incrément livrable à la fin du sprint.
1. But du sprint
Notre objectif pour ce sprint est de permettre au client d’ajouter un produit au panier et de
valider la commande ainsi de modifier le profil alors le but est « Valider une commande ».
2. Backlog du sprint 3User stories

nous allons inclure dans ce dernier. Voici donc ci-dessous notre Backlog du Sprint 3 :
User Taches Estimation
story
-Configurer les endpoints de magento qui permet au client 4heures

d’ajouter un produit au panier
-Développer l’outil utilisé pour ajouter au panier 1jour
US6
Tester et traiter les erreurs qui peuvent apparaitre-Manipuler les 4heures

erreurs qui peuvent se produire lors d’ajout au panier
-Configurer les endpoints de magento qui permet au client de 4heures
valider une commande
-Préparer les pages de livraison, paiement et validation de
US10
commande 2jours

- Configurer les endpoints de magento et les interfaces qui 1jour et
permettent au client de consulter l’historique de ses commandes
4heures
US11

P a g e 42 | 88
-Préparer la logique correspondant pour permettre au client de

4heures
US13 modifier son profil
-Préparer les interfaces graphiques de modification du profil
Ci-dessous le sprint backlog de sprint 2 dans l’outil Jira :
Tableau 17 Backlog du sprint 2 en jira

Ci-dessous la figure 31 qui présente le diagramme des cas d’utilisation du sprint 3
P a g e 43 | 88
Figure 31 Diagramme des cas d'utilisation du sprint 3

Description textuelle du cas d’utilisation « Ajouter des produits au
panier »
Le tableau 18 décrit la description textuelle du cas d’utilisation «Ajouter des produits au panier
»
Titre Ajouter des produits au panier

Acteur Client
Précondition Le client a l’accès à son compte et il est dans la page d’accueil où
s’affichent les produits.
Post-
Le produit est ajouté au panier
conditions
Scénario 1. Le client clique sur un produit,
nominal 2. Une page du détail s’affiche.
3. Il clique sur le bouton “Ajouter au panier".
4. Le produit est ajouté avec succès
Tableau 18 Description textuelle de "Ajouter des produits au panier"
Le tableau 19 décrit la description textuelle du cas d’utilisation «Supprimer un produit de

panier»
Description textuelle du cas d’utilisation « Supprimer un produit de panier »
Titre Supprimer un produit de panier

Acteur Client
Précondition Le client a ajouté des produits au panier
P a g e 44 | 88
Post-
Le produit est supprimé du panier
conditions
Scénario 1. Le client clique sur la section de panier, les produits choisis sont
nominal présents dedans
2. Le client choisit de supprimer un produit par la clique sur l’icone
3. Le produit est supprimé avec succès
Tableau 19 Description textuelle de "Supprimer un produit de panier"
Le tableau 20 décrit la description textuelle du cas d’utilisation «Valider une commande»

Titre Valider une commande
Acteur Client
Précondition Le client ajoute un ou des produits au panier.
Post-
La commande est passée avec succès
conditions
Scénario 1. Le client choisit de finaliser son commande et entre dans la
nominal section panier.
2. le client clique sur “Passer la commande” des pages d’adresse,
livraison et paiement s’affichent.
3. Le client doit remplir le formulaire de chaque page
convenablement, et il doit choisir son adresse (s’il veut être livré
avec une autre adresse différente de celle-ci dans son profil), la
méthode de payment,…
4. Après avoir entré tous les champs et cliqué le bouton “Valider la
commande”. Une page de succès s’affiche au client et il peut
naviguer à nouveau à la page d'accueil ou voir son commande.
Scénario -Si les champs ne sont pas valides, le client a l’autorisation de récrire ses
alternatif informations.
Tableau 20 Description textuelle de "Valider une commande"
Le tableau 21 décrit la description textuelle du cas d’utilisation «Consulter historique des

commandes»
Description textuelle du cas d’utilisation « Consulter historique des commandes»
Titre Consulter historique des commandes

Acteur Client
Précondition Le client choisit la page qui convient à historique de commandes.
Post-
Le client consulte l’historique de ses commandes
conditions
Scénario 1. le client clique sur “Consulter les commandes” puis la page des
nominal commandes s’affiche.
2. Si le client a déjà des commandes, une liste s’affiche sinon elle
affiche “Aucune commande trouvée”.
Tableau 21 Description textuelle de "Consulter historique des commandes"
P a g e 45 | 88
III. Conception
1. Diagrammes des séquences
La figure 32 présente le diagramme de séquence de « Ajouter au panier »
Figure 32 Diagramme de séquence "Ajouter au panier"
Diagramme de séquence « Ajouter au panier»
P a g e 46 | 88
La figure 33 présente le
Diagrammediagramme de séquence « Valider Commande»
P a g e 47 | 88
Figure 33 Diagramme de séquence "Valider une commande"
P a g e 48 | 88
Ci-dessous le diagramme des classes global dans le dernier sprint
Figure 34 Diagramme de classe global de sprint 3
P a g e 49 | 88
4. Diagramme d’activité
Ci-dessous nous présentons le diagramme d’activité de lancement d’application jusqu’à
confirmation de commande ;
Figure 35 Diagramme d'activité de sprint 3
P a g e 50 | 88
5. Réalisation
Cette partie est consacrée à l’exposition du travail achevé à travers des captures
d’écrans de différentes interfaces développées pendant ce sprint.
Interface d’ajout au panier
Dans ces écranst écran, le client peut ajouter un produit au panier
P a g e 51 | 88
P a g e 52 | 88
Figure 36 Page d'un produit ajouté au panier Figure 37 Page de panier
Interfaces de processus de validation de commande

Dans cet écran, le client peut valider une commande en passant étape par étape
P a g e 53 | 88
Figure 38 Page de validation d'adresse Figure 39 Page de méthode de livraison
P a g e 54 | 88
Figure 40 Page de méthode de paiement
P a g e 55 | 88
Interface de modification de profil et de consulter les ordres
Dans cet écran, le client peut modifier son profil et consulter ses commandes
Figure 41 Page de profil
Conclusion
Enfin, nous avons pu réaliser une application qui satisfait les besoins du client et qui
permet de gérer les différents cas d’utilisation prévus dans l’analyse. Nous passons à la fin de
ce rapport à la conclusion générale.
P a g e 56 | 88
Conclusion général
Conclusion générale et perspectives
Ce rapport entre dans le cadre d’un projet de fin d’études au sein de l’institut supérieur
des études technologiques « ISET » pour le compte de la société Satoripop. Nous sommes
appelés à concevoir et à réaliser une application mobile e-commerce pour la vente en ligne.
Le présent manuscrit détaille toutes les étapes par lesquelles nous sommes passéess pour
arriver au résultat attendu.
Afin de réaliser notre projet, nous avons essayé tout au long de notre travail d’adopter
le framework Agile SCRUM. Comme première étape, nous avons commencé par une
formation d’apprentissage et d’insertion professionnelle qui dure plus d’un mois. Puis nous
avons comprendreis le contexte général de notre application, nous avons fait une étude du
marché pour se focaliser sur les fonctionnalités qui vont pouvoir faire la distinction avec nos
concurrents dans ce secteur. De plus nous avons identifié nos potentiels clients pour en
dégager les fonctionnalités et les exigences de notre futur système.
Dans la phase de conception, nous avons présenté les différents diagrammes UML
pour mieux maîtriser la communication entre les différents objets du projet. Tout au long du
projet nous avons essayé de nous adapter au changement et faire en sorte que ça n’influence
pas le bon déroulement de la phase de réalisation
En perspective de ce travail, nous envisageons améliorer notre application en ajoutant
un module de paiement en ligne avec une carte monétique qui va faciliter la méthode de
règlement et éviter les méthodes traditionnelles (règlement lors de la livraison).
P a g e 57 | 88
Annexe A
Annexe A
I. Présentation
Scrum [4] est la méthodologie la plus utilisée parmi les méthodes Agiles existantes. Le
terme Scrum (qui signifie mêlée) apparaît pour la première fois en 1986 dans une publication
de Hirotaka Takeuchi et Ikujiro Nonaka qui décrit une nouvelle approche plus rapide et
flexible pour le développement de nouveaux produits. Ils comparent alors cette nouvelle
méthode au rugby à XV, le principe de base étant que l'équipe avance ensemble et soit
toujours prête à réorienter le projet au fur-et-à-mesure de sa progression, tel un ballon de
rugby qui doit passer de main en main jusqu'à marquer un essai.
II. Principe
1. Répartition des rôles
L’équipe Scrum se compose de :
Le Product Owner (Directeur de Produit), qui possède l’expertise
fonctionnelle, son priorité est de comprendre les exigences du business, des
clients et du marché, puis de prioriser le travail de l'équipe. Son rôle est
absolument essentiel, et son respect des règles du jeu est la pierre angulaire du
succès d’un projet agile.
Le scrum master, est responsable de la compréhension, de l'adhésion et de la
mise en œuvre de la méthode Scrum. C'est un facilitateur qui aide à améliorer
la communication au sein de l’équipe et cherche à maximiser la productivité et
le savoir-faire de celle-ci.
Le development team (l’équipe de développement), est chargée de
transformer les besoins définis par le Product Owner en fonctionnalités
utilisables, dont la taille doit être réduite : la taille idéale de l'équipe de
développement est de 3 à 9 personnes. et qui prend en charge le
développement du produit (planification, conception, codage, tests,
documentation).
2. Les différents événements

La vie d'un projet Scrum est rythmée par un ensemble de réunions définies avec précision
et limitées dans le temps.
P a g e 58 | 88
Annexe A
Le sprint : est une itération. Il s'agit d'une période de 2 à 4 semaines maximum

pendant laquelle une version terminée et utilisable du produit est réalisée. Un
nouveau sprint commence dès la fin du précédent. Chaque sprint a un objectif et
une liste de fonctionnalités à réaliser.
Planification d’un sprint : Les tâches à accomplir pendant le Sprint sont
déterminées par l'ensemble de l'équipe Scrum lors de la réunion de planification de
Sprint. La durée de cette réunion est limitée à 8 heures pour les Sprints d'un mois.
Cette réunion permet à l'équipe d'établir les éléments qu'elle traitera au cours de ce
Sprint et comment elle procédera.
Revue du sprint : Il s'agit du bilan du Sprint réalisé. Une fois le Sprint terminé,
l'équipe Scrum et les parties prenantes se réunissent pour valider ce qui a été
accompli pendant le Sprint. Cette réunion dure 4 heures maximum.
Rétrospective du sprint : Cette réunion est interne à l'équipe Scrum et dure 3
heures pour un Sprint d'un mois. Le but est l'adaptation aux changements qui
peuvent survenir et l'amélioration continue du processus de réalisation. L'équipe
passe en revue le Sprint terminé afin de déterminer ce qui a bien fonctionné et ce
qu'il faut améliorer.
Mêlée quotidienne : Cette réunion quotidienne de 15 minutes est très importante.
Elle se fait debout afin d'éviter de s'éterniser. Le but est de faire un point sur la
progression journalière du Sprint. Elle permet à l'équipe de synchroniser ses
activités et de faire un plan pour les prochaines 24 heures.
3. Les artefacts :
Le product backlog (ou carnet du produit) : Le backlog du produit est « une liste
ordonnée de tout ce qui pourrait être requis dans le produit et est l’unique source des
besoins pour tous les changements à effectuer sur le produit ». C’est un document qui
évolue constamment au cours de la vie du produit.
Le Sprint backlog (ou carnet de Sprint) : C'est le plan détaillé de la réalisation de
l'objectif du Sprint, défini lors de la réunion de planification du Sprint. Le Sprint
backlog est mis à jour régulièrement par l'équipe afin d'avoir une vision précise de la
progression du Sprint.
L’incrément : Il s'agit de l'ensemble des éléments terminés du product backlog pour
le Sprint en cours, ainsi que ceux des Sprints précédents. L'incrément doit fonctionner
et être utilisable.
P a g e 59 | 88
Annexe A
Le Burndown Chart (ou graphique d'avancement) : Ce graphique simple indique

l'état d'avancement dans la réalisation des tâches du Sprint backlog. Il s’agit du tracé
de la charge de travail restante (exprimée généralement en heures) en fonction du
temps (en jours).
 Scrum est la méthode agile la plus éprouvée et la plus documentée. Chacun des éléments
la constituant (rôles, événements, artefacts) est immuable et doit être scrupuleusement
respectés. En revanche, cette approche n'est pas destinée à tous les types de projet. Par
exemple, elle conviendra parfaitement pour le prochain smartphone à la mode, mais ne
sera pas adaptée pour construire un pont. Enfin, sachez qu'il s'agit d'une approche facile à
comprendre, mais difficile à maîtriser.
P a g e 60 | 88
Annexe B
Annexe B
I. Présentation
Le développement ou la méthode Agile, appelé aussi développement adaptatif, se
caractérise par un style de conduite de projet itératif incrémental, centré sur l'autonomie des
ressources humaines impliquées dans la spécification, la production et la validation d'une
application intégrée et testée en continu.
Plutôt qu’une méthode classique nous faisons une méthode agile et bien sur chacun a ses
caractéristiques et ses utilisations. La figure ci-dessous montre la différence entre les deux ;
Figure 42 Différence entre méthode classique et agile
Le Manifeste Agile est considéré comme la définition canonique du développement agile.

Il se compose de quatre valeurs et 12 principes.
P a g e 61 | 88
Annexe B
II. Les 4 valeurs du Manifeste Agile

1- Individus et échanges plus que processus et outils.
2- Produit fonctionnel plus que documentation pléthorique.
3- Collaboration du client plus que négociation du contrat.
4- Réactivité au changement plus que suivi d'un plan.
III. Les 12 principes de Manifeste Agile

1- Notre priorité première est de satisfaire le client en livrant au plus tôt et de manière
constante un logiciel de qualité.
2- Tout changement, même tardif, des exigences pendant le développement est bienvenu.
Les méthodes Agiles transforment le changement en avantage compétitif pour le
client.
3- Livrer régulièrement un logiciel fonctionnel, toutes les deux semaines à deux mois, en
référant la plus petite périodicité.
4- Maitrise d'ouvrage et développeurs doivent collaborer quotidiennement tout au long
du projet.
5- Bâtir le projet avec des personnes motivées. Leur donner l'environnement et le soutien
dont elles ont besoin et croire en leur capacité à accomplir le travail.
6- La plus efficace des méthodes pour transmettre l'information au sein et à destination
d'une équipe est le face à face.
7- Un logiciel qui fonctionne est le meilleur indicateur de progrès.
8- Les méthodes Agiles favorisent un rythme de développement soutenable.
Commanditaires, développeurs et utilisateurs devraient pouvoir maintenir ce rythme
indéfiniment.
9- Une attention constante à l'excellence technique et à la qualité de la conception
améliore l'agilité.
10- La simplicité - l'art de maximiser la quantité de travail à ne pas faire - est essentielle.
11- Les meilleures architectures, spécifications et conceptions sont issues d'équipes auto
organisées.
12- À intervalle régulier, l'équipe réfléchit aux moyens de devenir plus efficace, puis
modifie et ajuste son comportement dans ce sens.
P a g e 62 | 88
Annexe C
Annexe C
Chapitre 2 : Etat de L’art
Introduction
La réalisation d’un projet passe en premier lieu par une étude des aspects autours des
quels tourne son thème. Alors dans ce chapitre nous allons présenter le langage JavaScript,
son histoire et ses utilités dans le web ainsi que dans le mobile.
I. Le langage de programmation JavaScript
1. Du ECMAScript au JavaScript
ECMAScript est un ensemble de normes concernant les langages de

programmation de type script et standardisées par Ecma International dans le
cadre de la spécification ECMA-262, à partir de ce standard il apparaît
différents langages de script, comme JavaScript ou ActionScript.
En décembre 1995, Sun et Netscape annoncent la sortie de JavaScript. En
mars 1996, Netscape implémente le moteur JavaScript dans son navigateur web
Netscape Navigator 2.0.
Netscape soumet alors JavaScript à l'ECMA pour standardisation. Les
travaux débutent en novembre 1996, et se terminent en juin 1997 par l'adoption
du nouveau standard ECMAScript. Plusieurs versions sont implémentées et la
version actuelle de JavaScript est ES7 (ECMAScript 2016).
Nous présentons dans la figure suivante les évolutions de JavaScript de
1997 à 2016.
2. Présentation de JavaScript et utilités

JavaScript est un langage de programmation de scripts qu’une grande
majorité des sites web l'utilisent, et la majorité des navigateurs web disposent
d'un moteur JavaScript dédié pour l'interpréter.
Ainsi, il est le plus largement utilisé de nos jours et le langage le plus
préférable pour le développement en tant que front-end, back-end (Nodejs) et
P a g e 63 | 88
Annexe C
aussi implémenté dans des frameworks pour développer des applications

mobiles.
II. Application mobile
1. Qu'est-ce qu'une application mobile

Une application mobile est un logiciel applicatif développé pour un appareil
mobile .Elles sont distribuées depuis des plateformes de téléchargement telles
que l'App Store (plateforme d'Apple), le Google Play (plateforme de Google /
Android), chaque système d’exploitation possède d’un langage de
programmation propre à lui.
2. Approches de développement
Il existe des approches des applications mobiles :
o Les applications natives
Les applications natives sont des applications spécifiquement

développées pour un système d’exploitation. En effet, Android et iOS ne
supportent pas le même langage de programmation. Il faut donc
développer une application pour chaque système.
o Les applications web progressive(PWA)
Il s’agit d’un ensemble d’améliorations pratiques permettant de

faire fonctionner une application web d’une manière similaire à une
application mobile. L’objectif est d’avoir une expérience similaire ou
identique à celle d’une application native afin que l’utilisateur ne
remarque pas la différence entre une application native et une PWA.
o Les applications hybrides
Une solution qui se compose à la fois de solutions natives et Web.

Les développeurs intègrent le code écrit avec des langages de
développement Web (HTML, CSS et JavaScript) dans une application
native à l'aide de plug-ins comme Apache Cordova ou Ionic's Capacitor.
P a g e 64 | 88
Annexe C
o Les applications cross-platforms
Les applications cross-platforms contrairement aux applications

natives, sont développées une seule et unique fois et sont compatibles sur
iOS et Android. Le développement d'applications cross-platforms passe
par des frameworks. En effet, ce type d’applications permet un gain de
temps considérable. Parmi les plus connus frameworks, on retrouve
Flutter, Xamarin et spécialement React Native.
III. React Native

1. Petit historique de React Native
En 2013, les équipes de Facebook ont développé React (React js), C’est
une bibliothèque en langage de programmation JavaScript qui permet la
création d’applications web.
En 2015, Facebook propose React Native comme une déclinaison de
React sous forme de framework de développement des applications mobiles
cross-platformes.
2. Architecture de React Native

React Native se distingue des autres Frameworks de développement
mobile utilisant les technologies WEB car il n’est pas créé par une interface
tournant dans une WebView (comme Ionic) mais il propose un système qui
permet la création d’interfaces utilisateurs natives.
Ce dernier a été construit de telle sorte que chaque composant est
directement branché au composant natif dont il fait référence. C’est un
Framework utilisant le langage JavaScript et ne peut donc pas directement être
lancé sur un téléphone Android ou IOS. C’est pour cela qu’il utilise un
environnement d’exécution (runtime) lié à JavaScript.
P a g e 65 | 88
Annexe C
Avantages
Le point important à retenir du Framework React Native est la
manière dont il lie le Framework aux composants Natifs du téléphone. Cela
permet des performances très proches d’une application native, ainsi le
même code est partagé entre les deux systèmes d’exploitation iOS et
Android.
Evidemment, Il est possible de créer ses propres composants natifs (en
Objective-C ou Java) et de les implémenter directement dans le Framework
React Native.
Enfin, il est possible de lancer son application directement sur son
téléphone et de pouvoir débugger en temps réel les problèmes depuis son
ordinateur.
Faiblesses
A propos de ses faiblesses, Comme toute solution
multiplateforme, ni l'expérience ni les performances de l'interface
utilisateur ne seront les mêmes que dans les applications natives juste à
proximité.
De plus, React Native possède un nombre énorme de
bibliothèques. Malheureusement, trop d’entre eux sont soit de mauvaise
qualité ou ont été complètement abandonnés.
P a g e 66 | 88
Annexe C
Par ailleurs, Le fait que React Native utilise des composants

natifs alors après chaque mise à jour de l'interface utilisateur du système
d'exploitation, les composants de l’application seront également mis à
niveau instantanément. Cela dit, cela peut endommager l'interface
utilisateur de l'application, mais cela se produit très rarement.
Figure 43 Logo React Native
React Native est un bon outil pour créer des applications cross-
plateformes complexes. Si votre projet est censé être volumineux et
profondément enraciné, utilisez React Native. Il dispose d'un support
plus solide et d'une documentation complète. De plus, si vous prévoyez
de réutiliser le code pour une application Web et une application de
bureau, React Native est le bon choix.
3. Statistiques
La figure suivante présente les statistiques de frameworks les plus
répandus dans le monde pendant les 12 derniers mois selon Google Trends :
P a g e 67 | 88
Annexe C
Figure 44 Statistiques des frameworks utilisés
Source : https://trends.google.com/trends/explore?cat=31&q=React%20Native,Flutter,NativeScript,Xamarin
Comme apparu dans la figure ci-dessus, React Native et Flutter sont les
frameworks les plus populaires dans le monde, ils sont très rapprochés. Donc ça
dépend toujours du choix du développeur.
La figure ci-dessous présente la répartition des frameworks par régions
Figure 45 Répartition des frameworks par régions
Source : https://trends.google.com/trends/explore?cat=31&q=React%20Native,Flutter,NativeScript,Xamarin
P a g e 68 | 88
Annexe C
Comme apparu, React Native est utilisé plus dans les pays d’Amérique et
l’Europe, Flutter est utilisé aussi en Amérique et l’Asie tandis que Xamarin est moins
utilisé de nos jours.
IV. Magento
1. Qu’est-ce que Magento
Magento est un CMS 11
open source permettant de créer des sites e-commerces. Cette
solution possède toute une galaxie de fonctions de base très intéressantes ainsi que des
extensions gratuites ou payantes idéales pour personnaliser votre commerce en ligne. Le
développement et la gestion d’une boutique deviennent alors faciles et pratiques. De
nombreuses fonctionnalités sont comprises dans le CMS de base comme l’intégration de
Google Analytics, un tableau de bord administrateur, un rapport de ventes, des flux RSS des
commandes récentes, plusieurs types de rapports (paniers abandonnés, stocks, avis,
recherches), la gestion des comptes clients, des livraisons, des paiements, etc.
Figure 46 Logo de Magento
2. Pourquoi choisir Magento

Magento est une solution e-commerce qui nécessite quelques connaissances en
développement, mais qui présentent des éléments très complets. On peut parfaitement gérer
une boutique de grande envergure grâce à Magento. La personnalisation du site est possible
de manière très poussée. Cela permet de capter la cible plus facilement puisque les pages du
site correspondent parfaitement aux attentes des internautes. Il vous suffit de bien définir les
besoins lors de la confection du cahier des charges.
11
Content Management System ou en français système de gestion de contenu
P a g e 69 | 88
Annexe C
Dernière petite chose intéressante : Magento est optimisé pour les moteurs de
recherche et le référencement naturel. De nombreuses fonctionnalités SEO sont présentes
dans le CMS : métadonnées, notation des produits, ajout de commentaires, tags, contenus, etc.
3. Les points forts de Magento

La plateforme Magento présente de nombreux avantages. Elle est facile à utiliser, et
permet d’ajouter de nombreux plug-ins additionnels. De plus, sa technologie open-source
offre des solutions flexibles et scalables pour le e-commerce.
En effet, il est possible de pouvoir modifier un grand nombre de paramètres pour obtenir le
site e-commerce qui conviendra à vos besoins. On peut modifier le design, les attributs et la
configuration du back-office de notre site e-commerce.
Par rapport à d’autres plateformes similaires comme PrestaShop, BigCommerce ou
WooCommerce, elle présente aussi l’avantage d’être gratuit et open-source. En outre ses
fonctionnalités flexibles, son panneau d’administration intuitif, et ses outils d’optimisation
SEO lui confèrent un avantage compétitif. C’est la raison pour laquelle cette plateforme est
utilisée par un grand nombre de développeurs dans le domaine du e-commerce.
4. Les points faibles de Magento

Bien évidemment, Magento n’est pas exempte de défauts. Parmi ses principaux points
faibles, l’ergonomie de son back-office. Au vu des nombreuses fonctionnalités proposées, le
back-office de Magento est dur à prendre en main. Magento nécessite un savoir informatique
pour pouvoir profiter pleinement de ces capacités.
En plus, on compte la nécessité de payer l’hébergement, la configuration requiert
également un certain temps. Pour la version entreprise, le prix est par ailleurs extrêmement
élevé : 18000 dollars par mois.
Conclusion
Dans ce chapitre nous avons permis de préciser les technologies qui seront utilisés
dans le cadre du projet, avec une comparaison entre eux. Dans le chapitre suivant, nous allons
initialiser notre projet.
P a g e 70 | 88
Netographie
Netographie
[1] https://fr.wikipedia.org/wiki/Jumia 06/06/2021
[2] https://www.wamia.tn/ 06/06/2021
[3] https://www.atlassian.com/fr/agile/scrum 11/6/2021
[4] https://www.planzone.fr/blog/quest-ce-que-la-methodologie-scrum 11/6/2021Fiches

Formation JavaScript et TypeScript
P a g e 71 | 88
Netographie
P a g e 72 | 88
Netographie
Fiches formation React Native
P a g e 73 | 88
Netographie
P a g e 74 | 88
Netographie
P a g e 75 | 88

Rapport Version Finale - 073421

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport Version Finale - 073421

Transféré par

Droits d'auteur :

Formats disponibles

Dédicaces

À l’amour de ma vie MAMAN,

À l’amour de ma vie PAPA,

À mes chers frères,

À mes amis proches

Table des matières

I. Backlog du sprint 1.......................................................................................................21

2. Diagramme des classes.............................................................................................40

Table des figures

Figure 1 Logo de Satoripop........................................................................................................4

Figure 35 Diagramme d'activité de sprint 3..............................................................................41

Liste des tableaux

Tableau 1 Informations rélatives à Satoripop.............................................................................4

Ce rapport se compose de cinq chapitres comme suit :

Le deuxièmetroisième chapitre « Initialisation de projet » permet de placer le projet dans

Le quatrième troisième chapitre sera consacré au sprint 1 « Recherche d’un produit »

Le quatrièmecinquième chapitre sera consacré au sprint 2 « Authentification »

Chapitre 1 : Aperçu général et cadre de projet

Satoripop est une société de développement de logiciels fondée en 2014 et basée à

2. Fiche d’identité de la société

Figure 1 Logo de Satoripop

Le tableau ci-dessus présente les coordonnées de la société.

II. Cadre général du projet

III. Etude de l’existant

C’est vrai qu’avec la Marketplace, l’entreprise ou le vendeur qui bénéficie de l’espace

IV. Langage et méthodologie de conception

Dégager dans un premier lieu le maximum des fonctionnalités à réaliser pour

La figure 2 présente le principe de Scrum

Figure 2 Principe Scrum

Chapitre 2 : Initialisation du projet

Formation React Native 9

2. Installation et configuration de Magento

Figure 3 Frontend de magento

Figure 4 Page d'authentification magento

Figure 5 Tableau de bord

Figure 6 Page vente Magento

 Catalogue : La figure 7 c’estprésente la page où nous trouvons les produits et leurs

Figure 7 Page catalogue de magento

 Clients : La figure 8 c’estaffiche l’ensemble des clients inscrits dans le site

Figure 8 Page clients de magento

 L’interface front est un ensemble de blocs et pages personnalisés, c’est l’administrateur

Figure 9 Elements de site magento

Figure 10 Page rapports de magento

Figure 11 Page store de magento

 Système : c’est la configuration générale du système

Figure 12 Page système de magento

Disque dur 250Go

Processeur Intel® Core™ i5-4310U CPU @ 2.00GHz 2.60GHz

Système Windows 10 Professionnel 2020 64bits

Tableau 2 Caractéristiques de pc-portable

Système d’exploitation Android

Version Android 8.1.0 (Oreo)

Taille de l’écran 6.26 pouces

Résolution 1200 x 1920 pixels

Tableau 3 Caractéristiques de smartphone

Visual Studio Code est un éditeur de code extensible développé par

FlowChart : Est un logiciel en ligne de modélisation et conception de

Laragon : Laragon est un environnement de développement Web dédié au

II. Capture des besoins

2. Identification des besoins

 Inscription : Le système doit permettre à l’utilisateur de s'inscrire. Cette

2.2. Besoins non fonctionnels

L’application impose des contraintes à respecter pour assurer sa performance, sa sécurité