REPUBLIQUE TUNISIENNE UNIVERSITE DE GABES

********** **********
MINISTERE DE L’ENSEIGNEMENT INSTITUT SUPERIEUR DE GESTION
SUPERIEUR ET DE LA RECHERCHE DE GABES
SCIENTIFIQUE **********

RAPPORT DE PROJET DE FIN D’ETUDES

Pour l’obtention du :

Mastère professionnel ingénierie de développement mobile

Sujet

Conception Et Development D’une

Application e-commerce

Encadré par :
Mme. Olfa JABRI
Réalisés par :
Mohamed Bilel Asfouri

Année Universitaire : 2023/2024

1
 Remerciements

En premier lieu, nous remercions le Bon Dieu, tout puissant, de nous avoir donné la force
pour survivre, et le courage pour dépasser toutes les difficultés rencontrées lors de la
finalisation de ce projet.
Nous exprimons, aussi, notre sincère gratitude et remerciements à notre professeur encadreur
Monsieur ----------- pour ses conseils précieux, sa gentillesse, son aide pour la réalisation de
notre projet, pour la peine qu’il s’est donné tout au long de ce travail afin d’élaborer ce
rapport.
Nous remercions les membres de jury : Monsieur ----------- et Monsieur ---------- de bien
vouloir étudier avec attention notre travail, pour leur présence et pour leur lecture attentive de
notre rapport.
Nous tenons de même à remercier tous les enseignants de l’ISG qui nous ont enseigné
pendant ces trois années successives et qui par leurs compétences nous ont soutenu dans la
poursuite de nos études.
Enfin, nos sincères remerciements s’adressent aussi à notre famille pour leur soutien continue
et leur encouragement.

2
 Dédicaces

Je dédie ce travail à : Ma chère famille, pour son affection et sa patience.

Mes meilleurs amis pour leur aide, leur temps, leur encouragement, et soutien.
A tous ceux qui ont contribué de près ou de loin à la réalisation de ce travail.
 Table des Matières

Introduction générale............................................................................................................................... 1

Chapitre I : Présentation du projet ........................................................................................................... 2

1. Introduction ..................................................................................................................................... 2

2. Présentations de projet..................................................................................................................... 2

3. Généralités sur l'E-commerce .......................................................................................................... 2

3.1. Définition de l'E-commerce..................................................................................................... 2

3.2. Évolution de l'E-commerce ..................................................................................................... 2

3.3. Avantages de l'E-commerce .................................................................................................... 3

3.4. Défis de l'E-commerce ............................................................................................................ 3

4. Etude de l’existant ........................................................................................................................... 3

4.1. Présentation de l’Ancienne Application .................................................................................. 3

4.2. Analyse des Limites de l’Ancienne Application ..................................................................... 4

4.2.1. Interface Utilisateur ......................................................................................................... 4

4.2.2. Fonctionnalités Insuffisantes ........................................................................................... 4

4.2.3. Sécurité des Transactions ................................................................................................ 5

4.3. Étude Critique des Retours Utilisateurs .................................................................................. 5

4.4. Solutions Proposées ................................................................................................................. 6

5. Conclusion ....................................................................................................................................... 6

Chapitre II : Etude conceptuelle .............................................................................................................. 8

1. Introduction ..................................................................................................................................... 8

2. Analyse des besoins......................................................................................................................... 8

2.1. Identification des acteurs ......................................................................................................... 8

2.2. Identification des cas d’utilisation ........................................................................................... 8

2.3. Analyse fonctionnelle et non fonctionnel ................................................................................ 9

3. Conception de l’application........................................................................................................... 10

3.1. Description de la méthodologie de conception (StarUML)................................................... 10

2
 3.2. Diagramme de cas d’utilisation ............................................................................................. 11

3.3. Diagramme de séquence ........................................................................................................ 13

4. Conclusion ..................................................................................................................................... 18

Chapitre III : Réalisation et Implémentation ......................................................................................... 19

1. Introduction ............................................................................................................................... 19

2. Environnement de travail .......................................................................................................... 19

2.1. Environnements de développement logiciel ...................................................................... 19

2.2. Environnement de développement Front-End ................................................................... 20

2.2.1. Définition React Native ............................................................................................. 20

2.2.2. Architecture de React Native ..................................................................................... 20

2.2.3. Définition React JS .................................................................................................... 21

2.2.4. Architecture de React JS ........................................................................................... 22

2.2.5. Comparaison entre React JS et React Native ............................................................ 23

2.2.6. Expo-Go .................................................................................................................... 23

2.2.7. Redux......................................................................................................................... 23

2.3. Environnement de développement Back-End ................................................................... 24

2.3.1. Node.Js ...................................................................................................................... 24

2.3.2. Express.Js .................................................................................................................. 24

2.4. Choix de la base de données .............................................................................................. 25

3. Enchaînement des interfaces ..................................................................................................... 25

3.1. Interface application mobile .............................................................................................. 25

3.1.1. Interface " Créer un compte " .................................................................................... 25

3.1.2. Interface d’authentification ....................................................................................... 26

3.1.3. Interface page d’accueil ............................................................................................. 28

3.2. Interface application Web.................................................................................................. 29

3.2.1. Interface page d’accueil ............................................................................................. 29

3.2.2. Interface Admin ......................................................................................................... 30

3
 3.2.3. Interface produit ........................................................................................................ 31

3.2.4. Interface Panier.......................................................................................................... 32

4. Conclusion ................................................................................................................................. 32

Conclusion Générale ............................................................................................................................. 33

4
 Liste des Figures

Figure 1 : Page d’accueil de site Fofana .................................................................................................. 4

Figure 2 : Diagramme de contexte .......................................................................................................... 9

Figure 3 : la méthodologie de conception (StarUML) .......................................................................... 11

Figure 4 : Diagramme de cas d’utilisation pour l’administrateur .......................................................... 12

Figure 5 : Diagramme de cas d’utilisation pour le client ...................................................................... 13

Figure 6 : Diagramme de séquence de cas d’utilisation « Authentification » ....................................... 14

Figure 7 : Diagramme de séquence "Ajouter un utilisateur" ................................................................. 16

Figure 8 : Diagramme de séquence" faire une commande" .................................................................. 17

Figure 9 : Diagramme de classe ......................................................................................................... 18

Figure 10 : StarUML ............................................................................................................................. 19

Figure 11 : Visual Studio....................................................................................................................... 19

Figure 12 : React Native ........................................................................................................................ 20

Figure 13 : React JS............................................................................................................................... 21

Figure 14 : Expo-Go .............................................................................................................................. 23

Figure 15 : Redux .................................................................................................................................. 24

Figure 16 : Node.Js................................................................................................................................ 24

Figure 17 : Express.Js............................................................................................................................ 24

Figure 18 : MongoDB ........................................................................................................................... 25

Figure 19 : Interface de création de compte .......................................................................................... 26

Figure 20 : Interface d’authentification ................................................................................................. 27

Figure 21 : Interface page d’accueil ...................................................................................................... 28

Figure 22 : Interface page d’accueil ...................................................................................................... 29

Figure 23 : Interface Admin .................................................................................................................. 30

Figure 24 : Interface produit .................................................................................................................. 31

Figure 25 : Interface Panier ................................................................................................................... 32

5
Introduction Générale

Introduction générale
Le commerce en ligne en Tunisie est en plein essor et joue un rôle de plus en plus important
dans l'économie nationale. Avec l'augmentation du taux de pénétration d'internet et l'essor de
l'utilisation des smartphones, de plus en plus de Tunisiens se tournent vers les plateformes en
ligne pour effectuer leurs achats. Ce secteur offre une multitude d'opportunités aux entreprises
locales, leur permettant d'élargir leur champ d'action au-delà des limites géographiques.
traditionnelles et de toucher un public plus large. Cependant, malgré son développement
prometteur, Le commerce en ligne en Tunisie est Face à différents obstacles, tels que en
matière de logistique, de paiement en ligne, et de confiance des consommateurs envers les
transactions digitales.

Dans le cadre de notre projet de fin d'études, nous avons entrepris de repenser et d'améliorer
une application e-commerce existante. L'objectif principal est de moderniser l'interface et les
fonctionnalités pour mieux répondre aux besoins actuels des utilisateurs et offrir une
expérience plus fluide et intuitive.

Nous avons d'abord analysé l'application en place pour comprendre ses points faibles et
identifier les améliorations nécessaires. À partir de là, nous avons conçu une nouvelle version
qui intègre des solutions technologiques récentes et des fonctionnalités supplémentaires, tout
en restant fidèle aux attentes des utilisateurs. Pour mener à bien ce projet, nous avons
structuré notre travail en trois grandes étapes :

• Le premier chapitre présente le projet en détail, en expliquant son contexte et ses

objectifs ;

• Le deuxième chapitre se concentre sur l’étude conceptuelle et les choix

technologiques effectués ;

• Le troisième chapitre décrit la réalisation concrète de l'application et les différentes

étapes d’implémentation.

Pour conclure, nous ferons le point sur les résultats obtenus et proposerons des pistes pour les
futures évolutions de l'application.

1
Chapitre I : Présentation du projet

Chapitre I : Présentation du projet

1. Introduction
Ce chapitre vise à établir les fondations de notre projet en exposant ses idées principales.
Nous débuterons par une vue d’ensemble du projet, suivie d’une présentation générale sur l'e-
commerce. Par la suite, nous procéderons à une analyse approfondie de l’application e-
commerce actuelle sur le site www.fofana.tn. Cette analyse mettra en lumière ses points faibles
et les défis auxquels les utilisateurs sont confrontés. Enfin, nous proposerons des solutions
concrètes visant à améliorer l’expérience utilisateur ainsi que les performances de la
plateforme.

2. Présentations de projet
Le projet a pour ambition de créer une version améliorée de l'application e-commerce
actuellement disponible sur www.fofana.tn. Cette nouvelle plateforme sera conçue pour être
plus moderne, sécurisée et intuitive, offrant ainsi une expérience utilisateur optimale. Elle
inclura une navigation simplifiée avec une interface attrayante, ainsi que des fonctionnalités
avancées telles que la comparaison des produits et des prix. De plus, le processus de
commande sera optimisé pour permettre un suivi en temps réel des commandes, tout en
intégrant des options de paiement en ligne sécurisées pour garantir la fiabilité et la fluidité de
l'expérience d'achat.

3. Généralités sur l'E-commerce

3.1. Définition de l'E-commerce
L'e-commerce, ou commerce électronique, désigne l'ensemble des transactions commerciales
qui se déroulent en ligne. Ce modèle commercial a révolutionné la façon dont les
consommateurs achètent et les entreprises vendent, rendant les produits et services accessibles
à un public mondial. Au fil des années, l'e-commerce a connu une croissance exponentielle,
avec des millions de sites Web et d'applications proposant une vaste gamme de produits allant
des vêtements aux équipements électroniques.

3.2. Évolution de l'E-commerce

L'évolution de l'e-commerce peut être divisée en plusieurs phases. Dans les années 1990, les
premiers acteurs du secteur, comme Amazon et eBay, ont établi les bases du commerce en

2
Chapitre I : Présentation du projet

ligne. Les transactions étaient alors principalement limitées à des produits physiques, avec des
méthodes de paiement simples. Dans les années 2000, l'accès à Internet s'est généralisé grâce
à l'essor de la large bande, permettant à de nombreuses entreprises de s'engager dans le
commerce électronique. Ce mouvement a été renforcé par l'émergence des moteurs de
recherche, qui ont facilité la découverte de nouvelles plateformes d'achat. Aujourd'hui, avec la
montée des smartphones et des applications, l'e-commerce a atteint un niveau de maturité où
il est devenu essentiel pour la majorité des entreprises.

3.3. Avantages de l'E-commerce

L'e-commerce offre de nombreux avantages tant pour les consommateurs que pour les
entreprises. Pour les clients, il offre une commodité inégalée, permettant d'effectuer des
achats à tout moment et de n'importe où. De plus, la diversité des produits disponibles en
ligne dépasse souvent celle des magasins physiques, offrant ainsi aux consommateurs un
choix élargi. Les outils de comparaison de prix et d'avis facilitent également la prise de
décision, permettant aux clients de faire des choix éclairés. Du côté des entreprises, le
commerce électronique permet de réduire les coûts d'exploitation en évitant les frais associés
à un espace physique, tout en offrant la possibilité d'atteindre un public beaucoup plus large.

3.4. Défis de l'E-commerce

Cependant, l'e-commerce n'est pas sans défis. La confiance des consommateurs reste une
préoccupation majeure, notamment en ce qui concerne la sécurité des transactions et la
protection des données personnelles. Les entreprises doivent investir dans des mesures de
sécurité robustes pour rassurer leurs clients et établir une relation de confiance. De plus, la
concurrence en ligne est féroce, et il est essentiel pour les entreprises de se démarquer dans un
marché saturé. Cela nécessite une stratégie de marketing digital efficace, ainsi qu'une
attention constante aux tendances du marché et aux besoins des consommateurs.

4. Etude de l’existant
4.1. Présentation de l’Ancienne Application

L'application actuelle de Fofana.tn a été mise en place pour offrir aux consommateurs la
possibilité de réaliser des achats en ligne de manière simple et efficace. Cependant, malgré ses
intentions louables, elle présente plusieurs limitations qui nuisent à l'expérience utilisateur et à
la position compétitive de la plateforme dans le secteur du commerce électronique. Bien que
fonctionnelle, l'interface de l'application est souvent perçue comme peu intuitive, ce qui
3
Chapitre I : Présentation du projet

complique la navigation pour de nombreux utilisateurs. Il devient essentiel de procéder à une

analyse approfondie de cette application pour comprendre les enjeux qu'elle rencontre et
envisager des améliorations significatives.

Figure 1 : Page d’accueil de site Fofana

4.2. Analyse des Limites de l’Ancienne Application

4.2.1. Interface Utilisateur
• Navigation Complexe : L'une des principales préoccupations des utilisateurs réside dans
la difficulté de navigation au sein de l'application. La hiérarchisation des catégories de
produits manque de clarté, rendant la recherche de certains articles laborieuse. De plus,
l'absence de filtres de recherche efficaces contribue à cette complexité, laissant souvent
les utilisateurs frustrés dans leur quête d'informations sur des produits spécifiques.

• Design Obsolète : L'esthétique de l'application ne répond pas aux attentes des

consommateurs contemporains, qui privilégient des interfaces visuellement attrayantes et
ergonomiques. Un design peu inspirant peut donner l'impression que la plateforme n'est
pas à jour et peut dissuader les utilisateurs potentiels de s'engager avec l'application.

4.2.2. Fonctionnalités Insuffisantes

• Absence de Comparaison de Produits : La possibilité de comparer différents produits
est cruciale pour le processus de décision d'achat. Malheureusement, l'application actuelle
ne permet pas cette fonctionnalité, ce qui peut entraîner des choix moins éclairés de la

4
Chapitre I : Présentation du projet

part des clients. Les utilisateurs ont besoin d'outils qui leur permettent de peser les
options disponibles et de choisir en toute connaissance de cause.

• Suivi des Commandes : Les options de suivi des commandes sont limitées, ce qui peut
susciter l'inquiétude des clients concernant l'état de leurs achats. Une bonne transparence
et une communication claire sont essentielles pour instaurer la confiance et fidéliser la
clientèle.

4.2.3. Sécurité des Transactions

• Options de Paiement Restreintes : L’ancienne version de l’application propose un
nombre limité de méthodes de paiement. Cette restriction peut décourager certains
utilisateurs de finaliser leurs achats, notamment ceux qui préfèrent des solutions de
paiement variées et adaptées à leurs préférences.

• Mesures de Sécurité : Bien que certaines mesures de sécurité soient mises en place, leur
visibilité et leur compréhension par les utilisateurs laissent à désirer. Ce manque de clarté
peut créer une méfiance vis-à-vis de la plateforme, rendant les clients hésitants à partager
leurs informations personnelles et bancaires.

4.3. Étude Critique des Retours Utilisateurs

Les retours d'expérience des utilisateurs concernant l’application actuelle mettent en évidence
plusieurs préoccupations communes qui méritent d'être examinées de plus près.

• Difficultés de Navigation : De nombreux clients expriment leur frustration face à la

complexité de la navigation et à la difficulté de trouver des produits spécifiques. Cette
situation peut avoir des répercussions directes sur les taux de conversion et la satisfaction
globale des utilisateurs.

• Manque de Support : Les utilisateurs soulignent également un manque d'informations

concernant le service client et les politiques de retour. Ce manque de transparence
impacte négativement leur confiance dans la plateforme, rendant l'expérience d'achat
moins rassurante.

• Problèmes de Performance : Certains utilisateurs rapportent des lenteurs lors du

chargement des pages, ce qui nuit à l'expérience globale. Les temps de chargement
prolongés peuvent provoquer des abandons de panier et diminuer la satisfaction des
clients.

5
Chapitre I : Présentation du projet

4.4. Solutions Proposées

Pour répondre aux défis identifiés et remédier aux faiblesses de l’application actuelle, notre
projet de développement d’une nouvelle application e-commerce s’articule autour de
plusieurs axes d’amélioration :

• Refondre l’Interface Utilisateur : Nous envisageons une refonte complète de l’interface

pour la rendre plus intuitive et agréable. Un design modernisé, accompagné d’une
navigation simplifiée, permettra aux utilisateurs de se déplacer plus facilement dans
l’application.

• Intégrer des Fonctionnalités de Comparaison : Nous proposerons des outils de

comparaison de produits qui permettront aux clients d'évaluer les différentes options
disponibles, facilitant ainsi leur prise de décision.

• Optimiser le Suivi des Commandes : Un suivi des commandes transparent sera mis en
place pour informer les clients en temps réel de l'état de leurs achats, renforçant ainsi leur
confiance envers la plateforme.

• Renforcer la Sécurité des Transactions : Nous prévoyons d'améliorer les mesures de

sécurité des transactions et d'offrir une plus grande variété de méthodes de paiement.
Cette démarche visera à rassurer les clients et à garantir la protection de leurs
informations personnelles et bancaires.

En intégrant ces améliorations, notre objectif est de créer une expérience utilisateur enrichie,
de favoriser la fidélité des clients et de positionner Fofana.tn comme un acteur de choix dans
le domaine du commerce électronique.

5. Conclusion
Ce premier chapitre a permis d'établir un cadre solide pour notre projet en présentant les
enjeux et les défis associés à l'application e-commerce actuelle sur www.fofana.tn. À travers
l'analyse approfondie de ses points faibles, nous avons mis en lumière les limitations de
l'interface utilisateur, des fonctionnalités et des mesures de sécurité. En réponse à ces
observations, des solutions concrètes ont été proposées pour améliorer l'expérience utilisateur
et les performances de la plateforme. Ces propositions serviront de base pour le
développement de la nouvelle application, que nous aborderons dans le chapitre suivant, où

6
Chapitre I : Présentation du projet

nous examinerons les aspects conceptuels et les choix technologiques qui guideront notre
démarche.

7
Chapitre II : Etude conceptuelle

Chapitre II : Etude conceptuelle

1. Introduction
La conception est une étape essentielle et préliminaire qui précède le développement de toute
application informatique. Pour le développement de notre application mobile 'Fofana', dédiée
à la vente en ligne de produits, nous avons choisi une approche de conception orientée objet.
Nous débuterons par les diagrammes de cas d'utilisation et les diagrammes de séquence, avant
de poursuivre avec le diagramme de classes.

2. Analyse des besoins

2.1. Identification des acteurs
Les acteurs : Un acteur représente une abstraction d'un rôle joué par des entités externes qui
interagissent directement avec le système. Dans notre application Fofana de vente en ligne de
produits, trois acteurs principaux jouent un rôle crucial dans son fonctionnement :

• Administrateur : celui qui gère l'ensemble de la plateforme, planifie, organise,

contrôle et évalue les activités liées à la gestion des produits et des utilisateurs.
• Vendeur : celui qui gère son catalogue de produits, traite les commandes, et
communique avec les clients.
• Client : celui qui consulte les produits, passe des commandes, gère son profil, et
communique avec le service client.

2.2. Identification des cas d’utilisation

Un cas d'utilisation représente un ensemble de séquences réalisées par le système en réponse à
une action d'un acteur, produisant ainsi un résultat observable. Les cas d'utilisation décrivent
ce que le système doit accomplir sans indiquer comment le faire.

Côté Client :

Le système doit permettre au client, ayant déjà effectué son inscription, de passer à l'étape
d'authentification. Les fonctionnalités incluent :

- Consulter et réserver un produit

- Passer une commande

8
Chapitre II : Etude conceptuelle

- Gérer son compte et son panier

- Envoyer un message

Côté Administrateur :

Après s'être authentifié, l'administrateur sera redirigé vers son back office, lui permettant de :

- Modifier son mot de passe.

- Gérer le catalogue en ajoutant de nouveaux produits, en modifiant les caractéristiques des

produits existants, et en supprimant des produits.

- Gérer les promotions en ajoutant de nouveaux produits en promotion, en modifiant les

caractéristiques des produits (en mettant un ancien produit en promotion et en définissant une
durée de promotion), en supprimant des produits en promotion, et en recevant un e-mail dès
qu'un client réserve un produit.

- Gérer les utilisateurs : ajouter, consulter et modifier les informations des utilisateurs.

- Gérer les mises à jour des produits : ajouter, consulter et modifier les informations des
produits.

Pour obtenir une vue d'ensemble des interactions entre ces acteurs et le système, nous
utilisons un diagramme de contexte, qui est un modèle conceptuel des flux, représenté dans la
figure suivante :

Figure 2 : Diagramme de contexte

2.3. Analyse fonctionnelle et non fonctionnel

Les besoins fonctionnels englobent les exigences relatives aux fonctionnalités techniques,
détaillant le comportement attendu d'une application. Ils permettent de décrire les résultats
finaux souhaités. Le besoin initial de notre client, souvent appelé besoin brut, était de

9
Chapitre II : Etude conceptuelle

développer une application e-commerce permettant aux clients de rechercher et de trouver des
produits, de comparer les prix et les caractéristiques des produits. De plus, l'application devait
permettre aux clients de passer des commandes, de suivre l'état de leurs commandes et
d'effectuer des paiements en ligne. L'objectif était de fournir un ensemble de services de
manière autonome et flexible.

Après avoir défini les exigences fonctionnelles du projet, nous passons à l'identification des
exigences non fonctionnelles. Contrairement aux exigences fonctionnelles, celles-ci ne se
rapportent pas directement aux fonctionnalités du système, mais elles jouent un rôle essentiel
tout au long du développement du produit. Les exigences non fonctionnelles comprennent un
ensemble de critères qui contribuent à la qualité globale de la solution. Parmi les critères
identifiés, on peut citer :

• Sécurité : la protection des données des utilisateurs est un facteur primordial.

• Performance : la solution doit répondre aux besoins des utilisateurs avec un temps
d'exécution minimal.

• Fiabilité : l'application doit être robuste et capable de supporter les demandes des
utilisateurs.

• Ergonomie : l'application à venir doit offrir une expérience utilisateur conviviale,

avec des interfaces intuitives, simples et ergonomiques.

• Disponibilité : l'application doit être accessible en permanence.

• Stockage des données : une grande capacité de stockage des données est requise.

3. Conception de l’application
La conception est l'étape qui suit l'analyse. Elle consiste à modéliser et à détailler tous les
éléments issus de la phase d'analyse. À ce stade, nous illustrons les diagrammes de séquences
de certains cas d'utilisation ainsi que le diagramme de classes, avant de procéder à la
conception de la base de données.

3.1. Description de la méthodologie de conception (StarUML)

StarUML est un outil de modélisation qui repose sur le langage UML (Unified Modeling
Language), conçu pour simplifier la création de modèles visuels de systèmes logiciels
complexes. Très prisé par les développeurs et les architectes, il permet de concevoir et de
documenter l’architecture, la structure et le comportement des systèmes. StarUML prend en
charge divers types de diagrammes UML, tels que les diagrammes de cas d’utilisation, de

10
Chapitre II : Etude conceptuelle

séquence et de classes, offrant ainsi une visualisation claire et structurée des interactions et
des composants d’un projet. Grâce à son interface intuitive et sa flexibilité, il est idéal pour
des projets nécessitant une modélisation rigoureuse, avec des fonctionnalités avancées comme
les extensions via des plugins, la compatibilité multi-plateformes et l’exportation vers
différents formats.

Figure 3 : la méthodologie de conception (StarUML)

3.2. Diagramme de cas d’utilisation

Un système est souvent décrit à travers un ensemble de cas d'utilisation, qui illustrent les
différentes séquences d'actions réalisées par les utilisateurs. Ces cas d'utilisation sont
généralement représentés sous forme de diagrammes.

Dans ce qui suit, nous présentons les diagrammes de cas d'utilisation associés à chaque acteur
identifié précédemment. Le diagramme de cas d’utilisation ci-joint décrit les fonctionnalités
dont un administrateur d'une application e-commerce doit disposer pour gérer efficacement la
plateforme. L’administrateur, en tant qu'acteur principal, est représenté par un cercle, tandis
que les cas d'utilisation sont illustrés par des rectangles, avec des lignes indiquant les relations
entre eux.
Les cas d’utilisation inclus dans ce diagramme sont :

• Gérer les catégories : ajout et suppression de catégories

• Gérer les sous-catégories : ajout et suppression de sous-catégories
• Gérer les produits : ajout, modification et suppression de produits
• Gérer les marques : ajout et suppression de marques
• Gérer les commandes : ajout et suppression de commandes
• Gérer les clients : suppression de clients
• Gérer le profil : ajout, modification et suppression du profil

11
Chapitre II : Etude conceptuelle

Figure 4 : Diagramme de cas d’utilisation pour l’administrateur

Le diagramme de cas d’utilisation ci-joint décrit les interactions qu’un client peut avoir avec
une application e-commerce. Les cas d’utilisation suivants sont représentés sur le diagramme :

• S'identifier : création d’un compte

• Gérer profil : modification et suppression du profil
• Gérer commandes : modification des commandes
• Gérer avis : ajout et suppression de commentaires
• Gérer favoris : ajout et suppression de produits favoris
• Gérer panier : ajout, modification et suppression de commandes dans le panier

12
Chapitre II : Etude conceptuelle

Figure 5 : Diagramme de cas d’utilisation pour le client

3.3. Diagramme de séquence

Le diagramme de séquence représente les échanges de messages entre différents objets et
permet de visualiser de manière simplifiée un processus.

Diagramme de séquence du cas d’utilisation « Authentification »

Le diagramme de séquence ci-joint décrit les interactions entre les différents acteurs
impliqués dans le processus d’authentification d’un utilisateur sur une application e-
commerce.

L’acteur principal est l’utilisateur, représenté par un cercle. Les autres acteurs impliqués sont
le système, la base de données et l’administrateur.

13
Chapitre II : Etude conceptuelle

Le processus débute lorsque l’utilisateur saisit ses identifiants (nom d’utilisateur et mot de
passe) dans un formulaire. Le système transmet ces informations à la base de données pour
validation.

Si les identifiants sont corrects, la base de données renvoie un message de succès au système,
qui authentifie alors l’utilisateur. Celui-ci peut accéder aux fonctionnalités de l’application.

En revanche, si les identifiants sont incorrects, le système envoie un message d'erreur à

l'utilisateur, lui demandant de réessayer.

Ce diagramme de séquence offre une représentation visuelle du processus d’authentification,

facilitant ainsi sa compréhension et permettant d’identifier d’éventuels points de défaillance
dans le système.

Figure 6 : Diagramme de séquence de cas d’utilisation « Authentification »

14
Chapitre II : Etude conceptuelle

Diagramme de séquence "Créer un nouvel utilisateur"

Le diagramme de séquence ci-joint raconte l'histoire des interactions entre plusieurs acteurs
clés dans le processus d'ajout d'un nouvel utilisateur à une application e-commerce.

Tout commence avec l'administrateur, représenté par un cercle dans le diagramme. C'est lui
qui initie l'opération. Imaginez-le prêt à ajouter un utilisateur : il accède à l'interface du
système et déclenche la procédure d'ajout. En réponse, le système, tel un assistant réactif,
affiche un formulaire vierge, prêt à recevoir les détails de l'utilisateur.

L'administrateur saisit soigneusement les informations nécessaires : nom, adresse e-mail, mot
de passe, et d'autres détails importants. Une fois le formulaire dûment rempli, l’administrateur
n'a plus qu'à cliquer sur le bouton "Enregistrer", marquant ainsi l'étape décisive.

À ce moment, le système prend les informations et, avant de les conserver, valide que tout est
correct. Si tout est en ordre, ces données sont alors transmises à la base de données, où elles
seront stockées en toute sécurité.

Le processus se conclut lorsque le système renvoie un message de confirmation à

l'administrateur, un signal clair que l'ajout de l'utilisateur a été couronné de succès.

Ce diagramme de séquence offre une image simplifiée mais puissante du processus. Il éclaire
le chemin parcouru par chaque acteur et aide à comprendre comment les choses fonctionnent
en coulisse, tout en mettant en lumière les éventuels points faibles qui pourraient nécessiter
une attention particulière.

15
Chapitre II : Etude conceptuelle

Figure 7 : Diagramme de séquence "Ajouter un utilisateur"

Diagramme de séquence "Passer une commande"

Le diagramme de séquence ci-joint illustre les interactions entre les différents acteurs
impliqués dans le processus de commande d'un produit sur une application e-commerce.

L'utilisateur, représentant l'acteur principal, est symbolisé par un cercle. Les autres acteurs
concernés comprennent le système, la base de données et l'administrateur.

Le processus débute lorsque l'utilisateur effectue une recherche de produit dans le catalogue
de l'application. Une fois le produit trouvé, l'utilisateur a la possibilité de l'ajouter à son
panier. Après avoir sélectionné tous les produits qu'il souhaite commander, il passe à l'étape
de validation de sa commande.

À ce stade, le système présente à l'utilisateur un formulaire de paiement. L'utilisateur remplit

ce formulaire avec ses informations de paiement et clique sur le bouton "Payer". Le système
transmet ensuite ces données à la banque pour obtenir l'autorisation.

Si l'autorisation est accordée, le système enregistre la commande dans la base de données et

affiche un message de confirmation à l'utilisateur, indiquant que la commande a été réussie.

16
Chapitre II : Etude conceptuelle

En revanche, si l'autorisation est refusée, le système envoie un message d'erreur à l'utilisateur,

l'invitant à corriger ses informations de paiement avant de tenter à nouveau de passer sa
commande.

Ce diagramme de séquence offre une représentation claire du processus de commande,

permettant d'identifier les différentes étapes et interactions qui se déroulent entre l'utilisateur
et le système.

Figure 8 : Diagramme de séquence" faire une commande"

17
Chapitre II : Etude conceptuelle

Diagramme de classe

Figure 9 : Diagramme de classe

4. Conclusion
Tout au long de ce chapitre, nous avons approfondi la conception de notre application en
présentant l'analyse de notre projet, le diagramme de classes, ainsi que les diagrammes de
séquence associés. Ces éléments visent à faciliter la phase de réalisation et à rendre la mise en
œuvre de l'application plus fluide et accessible. Le chapitre suivant mettra en lumière les
résultats de cette démarche et les différentes conclusions issues du développement de
l'application requise.

18
Chapitre III : Réalisation & Implémentation

Chapitre III : Réalisation et Implémentation

1. Introduction
Après avoir présenté dans le chapitre précédent la conception et le fonctionnement global de
notre système, nous arrivons dans ce chapitre à la mise en œuvre de notre application. Dans ce
chapitre, nous présenterons l’environnement de travail qui inclut les outils de développement
(logiciels et technologies exploités). Nous allons ensuit décrire les différents langages utilisés.

2. Environnement de travail
Au cours de cette partie, nous présenterons les outils logiciels que nous avons utilisés pour la
réalisation du projet.

2.1. Environnements de développement logiciel

StarUML :

StarUML est un logiciel de modélisation UML (Unified Modeling Language). Étant simple
d’utilisation, nécessitant peu de ressources système, supportant UML 2, ce logiciel constitue
une excellente option pour une familiarisation à la modélisation.

Figure 10 : StarUML

Visual Studio :

Visual Studio est un éditeur de code développé par Microsoft pour Windows, Linux et
macOS2.Visual Studio code permet la mise en évidence de la syntaxe, la complétion
intelligente du code, les snippets et Git intégré.

Figure 11 : Visual Studio

19
Chapitre III : Réalisation & Implémentation

2.2. Environnement de développement Front-End

2.2.1. Définition React Native

C’est un framework JavaScript open source qui permet de développer des applications
mobiles natives pour iOS et Android à partir d’un seul code. Il est basé sur React, un
framework TypeScript populaire pour le développement d’applications web.

Figure 12 : React Native

2.2.2. Architecture de React Native

React Native permet de créer des applications mobiles pour iOS et Android avec JavaScript.
L'architecture est similaire à celle de React JS, mais elle inclut des éléments spécifiques aux
plateformes mobiles.

• Composants
Comme React, React Native repose sur des composants qui définissent la structure de
l'interface utilisateur. Cependant, contrairement à React JS qui utilise du HTML (JSX), React
Native utilise des composants natifs comme <View>, <Text>, et <Image>, qui sont rendus en
éléments natifs (iOS et Android).

• Bridge
React Native utilise un Bridge pour permettre la communication entre le code JavaScript et
les composants natifs. Lorsque le JavaScript modifie l'état ou l'interface utilisateur, ces
changements sont envoyés via le Bridge vers le code natif pour être exécutés sur le
périphérique. Cela permet à React Native d'intégrer des fonctionnalités natives, comme l'accès
à l'appareil photo ou au GPS.

20
Chapitre III : Réalisation & Implémentation

• Virtual DOM et Rendering

Comme React, React Native utilise un système de Virtual DOM pour optimiser les mises à
jour de l'interface. Cependant, le processus de rendu est un peu différent. Les changements
dans le Virtual DOM sont envoyés au Bridge, qui les applique sur le rendu natif spécifique à
iOS ou Android.

• Navigation

Pour la navigation, React Native utilise des bibliothèques comme React Navigation ou React
Native Navigation. Ces outils gèrent la pile de navigation, les écrans, les gestes, et les
transitions.

• Gestion de l'État
React Native gère l'état local de manière similaire à React, avec des hooks comme useState ou
des solutions comme Redux et Context API pour l'état global.

2.2.3. Définition React JS

C’est une bibliothèque JavaScript développée par Facebook pour créer des interfaces
utilisateur dynamiques et réactives. Elle permet de construire des applications web en utilisant
des composants réutilisables, avec un rendu optimisé grâce au Virtual DOM.

Figure 13 : React JS

21
Chapitre III : Réalisation & Implémentation

2.2.4. Architecture de React JS

React JS est une bibliothèque JavaScript utilisée principalement pour la création
d'applications web. Son architecture repose sur les concepts suivants :

• Composants

Composants Fonctionnels : Des fonctions JavaScript qui renvoient des éléments JSX
(JavaScript XML). Ils peuvent utiliser des hooks pour gérer des états ou des effets
secondaires.

Composants de Classe : Moins utilisés aujourd'hui, ces composants permettent aussi de gérer
l'état et le cycle de vie de l'application, mais via des classes JavaScript.

• Virtual DOM

React utilise un DOM virtuel pour améliorer la performance. Lorsqu'un état change, React
met à jour le Virtual DOM, puis le compare avec l'ancien DOM (diffing). Ensuite, il applique
uniquement les changements nécessaires au réel DOM de la page web.

• Unidirectional Data Flow

Le flux de données est unidirectionnel : les données circulent de l'état (state) d'un composant
parent vers les composants enfants via les props. Les changements d'état dans un composant
déclenchent une re-rendu de celui-ci et de ses composants enfants.

• React Router

Pour la gestion de la navigation entre différentes vues dans une application web à une seule
page (SPA), React utilise React Router, un outil pour gérer les routes et l'historique du
navigateur.

• State Management

React gère l'état local des composants via des hooks comme useState et useReducer. Pour les
applications plus complexes, des solutions comme Redux, Context API ou Recoil peuvent
être utilisées pour la gestion de l'état global.

22
Chapitre III : Réalisation & Implémentation

2.2.5. Comparaison entre React JS et React Native

2.2.6. Expo-Go
C’est une plate-forme de développement mobile qui facilite le développement d’applications
mobiles natives avec React Native. Elle fournit une série d’outils et de services qui peuvent
aider à accélérer le développement et à réduire la complexité.

Figure 14 : Expo-Go

2.2.7. Redux
C’est une bibliothèque JavaScript open source qui fournit une architecture globale pour gérer
l’état d’une application React. Elle est basée sur le modèle de programmation flux, qui permet
de gérer l’état d’une application de manière centralisée et prévisible. Redux est un outil
puissant qui peut aider à créer des applications React plus robustes et faciles à maintenir. Il est
utilisé par de nombreuses applications populaires, notamment Airbnb, Netflix et Uber.

23
Chapitre III : Réalisation & Implémentation

Figure 15 : Redux

2.3. Environnement de développement Back-End

2.3.1. Node.Js
C’est un runtime JavaScript open source qui permet d’exécuter du code JavaScript côté
serveur. Il est basé sur le moteur de JavaScript V8 de Google Chrome.

Figure 16 : Node.Js

2.3.2. Express.Js
C’est un framework web open source basé sur Node.js. Il fournit une série de fonctionnalités
qui peuvent aider à simplifier le développement d’applications web avec Nod

Figure 17 : Express.Js

24
Chapitre III : Réalisation & Implémentation

2.4. Choix de la base de données

Le choix de la base de données MongoDB pour une application e-commerce est justifié par un
certain nombre de facteurs, notamment :

• La flexibilité du modèle de document : MongoDB permet de stocker des données dans

des structures de données flexibles, telles que des documents JSON. Cela permet de
stocker facilement des données complexes, telles que des produits, des commandes et
des utilisateurs.

• La scalabilité : MongoDB est une base de données horizontalement scalable. Cela

signifie qu’elle peut être facilement mise à l’échelle en ajoutant des nœuds
supplémentaires. Cela est important pour les applications e-commerce, qui peuvent
générer un trafic important.

• La performance : MongoDB est une base de données performante. Elle peut gérer un
grand volume de transactions avec une latence faible.

• L’open source : MongoDB est une base de données open source. Cela signifie qu’elle
est gratuite et qu’elle est disponible pour tous.

Figure 18 : MongoDB

En conclusion, MongoDB est une base de données solide qui peut répondre aux besoins des
applications e-commerce. Elle est flexible, scalable, performante et open source.

3. Enchaînement des interfaces

3.1. Interface application mobile

3.1.1. Interface " Créer un compte "

L’interface "Créer un compte" de l’application Amazon est bien conçue et fonctionnelle. Elle
est facile à comprendre et à utiliser, et elle est sûre et sécurisée. L’interface est divisée en

25
Chapitre III : Réalisation & Implémentation

quatre zones principales : la zone de titre, la zone de saisie des informations personnelles, la
zone de boutons et la zone de validation.

Figure 19 : Interface de création de compte

La zone de titre est clairement visible et indique clairement l’objectif de l’interface. La zone
de saisie des informations personnelles contient les champs de texte nécessaires.

Les champs de texte sont correctement dimensionnés et espacés, et ils sont accompagnés de
libellés clairs. La zone de boutons contient deux boutons, un pour créer le compte et un pour
revenir à l’écran précédent. Les boutons sont bien dimensionnés et espacés, et ils sont clairs et
faciles à comprendre.

3.1.2. Interface d’authentification

L’interface d’authentification est divisée en deux zones principales : la zone de saisie des
informations d’identification et la zone de boutons.

26
Chapitre III : Réalisation & Implémentation

Figure 20 : Interface d’authentification

La zone de saisie des informations d’identification contient deux champs de texte, un pour le
nom d’utilisateur et un pour le mot de passe. Les champs de texte sont correctement
dimensionnés et espacés, et ils sont accompagnés de libellés clairs. La zone de boutons
contient deux boutons, un pour se connecter et un pour oublier le mot de passe. Les boutons
sont bien dimensionnés et espacés, et ils sont clairs et faciles à comprendre. L’interface utilise
un style cohérent et moderne. Les couleurs sont vives et contrastées, et les polices sont faciles
à lire.

27
Chapitre III : Réalisation & Implémentation

3.1.3. Interface page d’accueil

Figure 21 : Interface page d’accueil

28
Chapitre III : Réalisation & Implémentation

3.2. Interface application Web

3.2.1. Interface page d’accueil

Figure 22 : Interface page d’accueil

29
Chapitre III : Réalisation & Implémentation

3.2.2. Interface Admin

Figure 23 : Interface Admin

30
Chapitre III : Réalisation & Implémentation

3.2.3. Interface produit

Figure 24 : Interface produit

31
Chapitre III : Réalisation & Implémentation

3.2.4. Interface Panier

Figure 25 : Interface Panier

4. Conclusion
Ce chapitre a présenté la mise en œuvre de notre application, en détaillant les outils et
technologies utilisés. Nous avons opté pour React JS et React Native pour le développement
du front-end, permettant de partager du code entre le web et les mobiles, ainsi que Node.js et
Express.js pour le back-end. Le choix de MongoDB comme base de données a été motivé par
sa flexibilité et sa scalabilité, essentielles pour une application e-commerce.

Nous avons également abordé les interfaces de l'application mobile et web, en soulignant leur
ergonomie et leur facilité d’utilisation, pour offrir une expérience utilisateur optimale. En
somme, ce chapitre a permis de décrire l’implémentation technique de l’application, en posant
les bases d’une solution robuste et performante.

32
Conclusion générale

Conclusion Générale

Dans le cadre de ce projet de fin d’études, nous avons pris en charge la modernisation et
l’amélioration d'une application e-commerce existante, en réponse aux besoins croissants des
utilisateurs tunisiens en matière de commerce en ligne. Le secteur e-commerce en Tunisie,
bien que prometteur, fait face à plusieurs défis, notamment en termes de logistique, de
paiement en ligne et de confiance des consommateurs. Ainsi, notre projet visait à repenser
l'expérience utilisateur en modernisant l’interface et en ajoutant des fonctionnalités qui
répondent mieux aux attentes actuelles des utilisateurs.

Au fil des étapes de notre travail, nous avons d'abord réalisé une analyse approfondie de
l'application existante, ce qui nous a permis d'identifier les axes d’amélioration essentiels.
Ensuite, nous avons choisi les technologies les plus adaptées pour garantir la performance, la
flexibilité et l'évolutivité de l'application. La mise en œuvre concrète a permis de concrétiser
ces choix et de proposer une solution moderne, fluide et intuitive.

Le travail effectué a abouti à une application optimisée, prête à répondre aux défis du marché
actuel, tout en offrant une expérience utilisateur améliorée. Enfin, bien que ce projet ait
permis d’atteindre ses objectifs principaux, il ouvre la voie à de futures évolutions,
notamment en ce qui concerne l’optimisation de la logistique, l’intégration de nouveaux
modes de paiement et l’amélioration continue de la sécurité des transactions en ligne.

En somme, cette expérience a été un véritable challenge et une occasion d’appliquer des
concepts théoriques à un projet concret, tout en contribuant à l’évolution du commerce en
ligne en Tunisie.

33
Résumé

Ce rapport décrit le processus de conception, de développement et d’implémentation d’une

application e-commerce visant à moderniser une version existante pour répondre aux attentes
actuelles des utilisateurs en Tunisie. Après une analyse approfondie des limitations de
l’application précédente, notamment au niveau de l’interface utilisateur, des fonctionnalités et
de la sécurité des transactions, des solutions ont été proposées pour améliorer l’expérience
utilisateur et optimiser la performance de l’application. Le rapport se divise en trois chapitres :
le premier présente le contexte du projet, les défis du commerce en ligne en Tunisie, et une
étude critique de l’application existante ; le deuxième aborde l’analyse des besoins, la
méthodologie de conception et les diagrammes fonctionnels qui ont guidé le développement
de l’application ; enfin, le troisième chapitre détaille les choix technologiques (notamment
React JS, React Native et Node.js), ainsi que l’implémentation des interfaces mobile et web.
En conclusion, le projet a permis de créer une application plus fluide, sécurisée et
performante, répondant mieux aux besoins des utilisateurs tout en prenant en compte les
spécificités du marché tunisien.

Abstract

This report presents the design, development, and implementation process of an e-commerce
application aimed at modernizing an existing version to better meet the current needs of users
in Tunisia. After a thorough analysis of the previous application’s limitations, particularly in
terms of user interface, features, and transaction security, solutions were proposed to enhance
the user experience and optimize the application's performance. The report is structured into
three chapters: the first provides the project context, challenges of e-commerce in Tunisia, and
a critical analysis of the existing application; the second focuses on analyzing user needs, the
design methodology, and the functional diagrams that guided the application development;
the third chapter details the technological choices (including React JS, React Native, and
Node.js), as well as the implementation of mobile and web interfaces. In conclusion, the
project successfully created a smoother, more secure, and efficient application, better
addressing user needs while considering the specifics of the Tunisian market.

‫الملخص‬

‫يستعرض هذا التقرير عملية التصميم والتطوير والتنفيذ لتطبيق تجارة إلكترونية يهدف إلى تحديث النسخة الحالية لتلبية‬
‫ خاصة على مستوى‬،‫ بعد تحليل شامل للقيود التي تواجه التطبيق السابق‬.‫احتياجات المستخدمين في تونس بشكل أفضل‬
‫ ينقسم‬.‫ تم اقتراح حلول لتحسين تجربة المستخدم وتحسين أداء التطبيق‬،‫ وأمان المعامالت‬،‫ والوظائف‬،‫واجهة المستخدم‬
‫ ودراسة نقدية‬،‫ وتحديات التجارة اإللكترونية في تونس‬،‫ الفصل األول يقدم سياق المشروع‬:‫التقرير إلى ثالثة فصول‬
‫ والمخططات الوظيفية التي‬،‫ منهجية التصميم‬،‫للتطبيق الحالي؛ الفصل الثاني يركز على تحليل احتياجات المستخدمين‬
‫ مثل( أُعتمدت لتوجيه تطوير التطبيق؛ أما الفصل الثالث فيعرض االختيارات التكنولوجية‬React JS ،React Native
‫و‬Node.js) ‫ نجح المشروع في إنشاء تطبيق أكثر سالسة وأمانًا‬،‫ في الختام‬.‫ باإلضافة إلى تنفيذ واجهات المحمول والويب‬،
‫ يلبي احتياجات المستخدمين بشكل أفضل مع مراعاة خصوصيات السوق التونسي‬،‫وكفاءة‬.