Département Génie Informatique

Mémoire de Stage de Fin d’Etudes

Présenté pour l’obtention du

Diplôme Licence Professionnelle

Filière

Développement des Systèmes d'Information et de Communication

Entreprise

HIMAN Informatique

Présenté Par

AMOUHAL Nouhayla

Titre

Développement d’une application Web

de E-commerce des produits artistiques

Encadré au niveau de l’entreprise

Par

M. Soufiane EL HIDAOUI

Soutenu le 09/06/2023 devant le jury

Pr. A. RHATTOY UMI-EST-Meknès Encadrant académique

Pr. M. L. HASNAOUI UMI-EST-Meknès Examinateur

Année Universitaire : 2022/2023

 Remercîments

Tout d’abord à ALLAH l’unique dieu.

Je tiens à exprimer mes remerciements avec un grand plaisir et un grand
respect à mon encadreur Monsieur Soufiane EL HIDAOUI, pour Ses conseils, sa
disponibilité et ses encouragements qui m’ont permis de réaliser ce travail dans
les meilleures conditions, et aussi à Zeina Morin mon binôme de travail au
cours de mon stage.
Que les membres du jury trouvent ici mes plus vifs remerciements pour avoir
accepté d’honorer par leur jugement mon travail.
Je voudrai aussi exprimer ma gratitude envers tous ceux qui m’ont accordé leur
soutien, tant par leur gentillesse que par leur dévouement.
Sans oublier d’exprimer mes remerciements à tous mes professeurs qui m’ont
enseigné pour leurs efforts fournis tout au long de ma formation et aussi à tout
le corps administratif de l’EST.
Je ne peux pas nommer ici toutes les personnes qui de près ou de loin m’a aidé
et encouragé mais je les remercie vivement.
Enfin je tiens à dire combien le soutien quotidien de ma famille a été important
tout au long de ces quelques années, je leur dois beaucoup.

1
 Dédicace

Je dédie ce modeste travail à :

A mes parents qui ont toujours cru en moi et m’ont soutenu. Aucun hommage ne
pourrait être à la hauteur de leur sacrifice et leur soutien inconditionnel tant que matériel
et moral.
A tous les membres de ma famille, et à mes amis.
A tous mes professeurs tout au long de mon parcours scolaire.
A tous ceux qui ont contribué de près ou de loin pour que ce projet soit possible.

AMOUHAL NOUHAYLA

2
 Résumé :

Ma mémoire qui est encadré par Monsieur Soufiane EL HIDAOUI consiste

à concevoir et développer une application Web de E-commerce des produits
artistique.

J’ai structuré le mémoire en quatre chapitres comme suite :

• Premier chapitre : « Organisme d’accueil » ; j’ai bien présenté

l’entreprise qui m’a accueilli durant mon stage de fin d’étude qui est
HIMAN Informatique.
• Deuxième chapitre : « Contexte générale du projet » ; j’ai présenté
l’application réalisée durant mon stage en la mettant un cadre précis
et en élaborant son cahier de charges.
• Troisième chapitre : « Analyse et conception UML » ; ou j’ai choisi
l’UML comme langage de modélisation orienté objet.
• Quatrième chapitre : « Réalisation » ; j’ai réussi à faire une
application de E-commerce des produits artistique, en utilisant
l’éditeur de texte Visual Studio Code, la base de données MongoDB,
et les langages de programmation HTML, Nextjs et Tailwind CSS. Et
j’ai définie aussi les interfaces de cette application.
• Cinquième chapitre : « Bilan et conclusion » ; j’ai présenté un bilan
global de mon stage de fin d’études et j’ai fait une conclusion
générale de mon travail.

« Art Express » est une application web de e-commerce visant la

communauté artistique. L’objectif de ce projet est de créer une plateforme
offrant un marché virtuel pour ces clients.

3
Table des matières :
Remercîments ........................................................................................................................ 1
Dédicace ................................................................................................................................. 2
Résumé : ................................................................................................................................. 3
Table des matières :............................................................................................................... 4
Liste des figures ...................................................................................................................... 6
Introduction générale : ........................................................................................................... 8
Chapitre 1 : organisme d’accueil : .......................................................................................... 9
1. Introduction : .................................................................................................................. 9
2. Présentation d’organisme d’accueil : ............................................................................. 9
3. Structure et organigramme de l’entreprise : .................................................................. 9
4. Conclusion : ................................................................................................................... 10
Chapitre 2 : Contexte générale du projet : .......................................................................... 11
1. Introduction : ................................................................................................................ 11
3. Présentation du projet : ................................................................................................ 12
4. Diagramme de GANTT et planification : ....................................................................... 12
5. Cahier des charges : ...................................................................................................... 13
5.1. Description du l’application : ................................................................................. 13
5.2. Type de projet :...................................................................................................... 13
5.3. L’identité visuelle : ................................................................................................. 13
5.4. Les fonctionnalités : ............................................................................................... 16
6. Conclusion : ................................................................................................................... 17
Chapitre 3 : Analyse et conception UML : ............................................................................... 18
1. Introduction : ................................................................................................................ 18
2. Identification des acteurs :............................................................................................ 18
2.1. Acteur : .................................................................................................................. 18
2.2. Les acteurs de l’application : ................................................................................. 18
3. Les cas d’utilisation global : .......................................................................................... 19
4. Diagramme de cas d’utilisation :................................................................................... 20
4.1. Diagramme de cas d’utilisation de visiteur : ......................................................... 21
4.2. Diagramme de cas d’utilisation de client : ............................................................ 22
4.3. Diagramme de cas d’utilisation d’administrateur : ............................................... 22
5. Les scénarios : ............................................................................................................... 23

4
 5.1. Définition d’un scénario : ...................................................................................... 23
5.2. Spécification des scénarios : .................................................................................. 23
6. Diagramme de séquence : ............................................................................................ 26
7. Diagramme de classes :................................................................................................. 33
Conclusion : .......................................................................................................................... 34
Chapitre 4 : Réalisation ............................................................................................................ 35
Introduction :........................................................................................................................ 35
1. Outils et Framework de développements : .................................................................. 35
1.1. Visual Studio Code : ............................................................................................... 35
1.2. Mongo db : ............................................................................................................ 35
1.3. Node js : ................................................................................................................. 35
1.4. Next js : .................................................................................................................. 36
1.5. Tailwind Css : ......................................................................................................... 36
1.6. HTML (HyperText Mark-up language): .................................................................. 36
1.7. La base de données : ............................................................................................. 37
2. Les interfaces de Art Express : ...................................................................................... 40
2.1. Les interfaces pour visiteur, client et administrateur : ......................................... 40
2.2. Les interfaces pour client et administrateur : ....................................................... 43
2.3. Les interfaces pour l’administrateur : ................................................................... 46
Conclusion : .......................................................................................................................... 48
Chapitre 5 : Bilan et conclusion ............................................................................................... 49
1. Bilan professionnel :...................................................................................................... 49
2. Bilan personnel : ........................................................................................................... 49
Conclusion Générale : .............................................................................................................. 50
Bibliographie : .......................................................................................................................... 51

5
Liste des figures :
Figure 1 : Organigramme de l’entreprise ................................................................................. 10
Figure 2 : Tableau de planification de ArtExpress .................................................................... 12
Figure 3 : Diagramme de GANTT de ArtExpress ...................................................................... 13
Figure 4 : Palette de couleurs .................................................................................................. 14
Figure 5 : Logo Art Express....................................................................................................... 14
Figure 6 : Arborescence de l’application ArtExpress ............................................................... 15
Figure 7 : Tableau des cas d'utilisation global.......................................................................... 20
Figure 8 : Diagramme de cas d'utilisation de visiteur .............................................................. 21
Figure 9 : Diagramme de cas d’utilisation de client ................................................................. 22
Figure 10 : Diagramme de cas d’utilisation d’administrateur .................................................. 22
Figure 11 : Tableau des scénarios des cas d'utilisation du visiteur.......................................... 23
Figure 12 : Tableau des scénarios des cas d'utilisation du client............................................. 24
Figure 13 : Tableau des scénarios des cas d'utilisation d’administrateur ................................ 26
Figure 14 : Diagramme de séquence d’accès à l’accueil .......................................................... 26
Figure 15 : Diagramme de séquence recherche de produit .................................................... 27
Figure 16 : Diagramme de séquence consulter un produit ..................................................... 27
Figure 17 : Diagramme de séquence de connexion ................................................................ 28
Figure 18 : Diagramme de séquence d’ajout au panier ........................................................... 28
Figure 19 : Diagramme de séquence de passage de commande ............................................ 29
Figure 20 : Diagramme de séquence de modification de profile ............................................ 30
Figure 21 : Diagramme de séquence consultation de panier .................................................. 30
Figure 22 : Diagramme de séquence de l’historique des commandes .................................... 31
Figure 23 : Diagramme de séquence de gestion des commandes .......................................... 31
Figure 24 : Diagramme de séquence de gestion des produits ................................................ 32
Figure 25 : Diagramme de séquence de gestion des utilisateurs ............................................ 32
Figure 26 : Diagramme de classes Global ................................................................................ 34
Figure 27 : Base de données .................................................................................................... 37
Figure 28 : La schéma de document des utilisateurs ............................................................... 37
Figure 29: Le document des utilisateurs .................................................................................. 38
Figure 30 : La schéma de document des produits ................................................................... 38
Figure 31: Le document des produits ...................................................................................... 39
Figure 32 : La schéma de document des commandes ............................................................. 39
Figure 33: Le document des commandes ................................................................................ 40
Figure 34 : Interface de l'accueil .............................................................................................. 41
Figure 35 : Interface de recherche ........................................................................................... 42
Figure 36 : Interface de consultation de produit ..................................................................... 42
Figure 37 : Interface de panier................................................................................................. 43
Figure 38 : Interface de création de compte ........................................................................... 43
Figure 39 : Interface de passage de commande ...................................................................... 44
Figure 40 : Interface de paiement ........................................................................................... 44
Figure 41 : Interface du Profile ................................................................................................ 45
Figure 42 : Interface d’historique des commandes ................................................................. 45

6
Figure 43 : Interface d'authentification ................................................................................... 45
Figure 44 : Interface d’espace admin ....................................................................................... 46
Figure 45 : Interface de gestion des utilisateurs ...................................................................... 47
Figure 46 : Interface de consultation des commandes ............................................................ 47
Figure 47 : Interface de livraison des commandes .................................................................. 47
Figure 48 : Interface de gestion des produits .......................................................................... 48
Figure 49 : Interface de modification / création des produits ................................................. 48

7
 Introduction générale :

Grace à la pandémie de 2020, le E-Commerce a connu une incroyable

croissance en vue des différentes obligations auxquelles le monde a été soumis.
Plusieurs magasins et boutiques ont dû se fermer temporairement, pour plus
tard, se rouvrir tout en étant forcé de s’adapter aux changements dont le couvre-
feu, ce qui a naturellement pousser les consommateurs à se tourner vers
Internet.

Dans ce cadre, le choix du projet réalisé durant mon stage de fin d’étude.
Il s’agit d’une application web de E-Commerce centrée autour des produits
artistiques tel que des crayons, pastels, peinture de différents genres etc....

On a opté avec mon binôme en stage pour une application web vu qu’elle
n’a pas besoin d’être installé, économisant ainsi du temps aux clients potentiels
et l’espace mémoire. L’application est accessible par n’importe quel appareil et
ne dépend pas du système d’exploitation, de même pour le navigateur.

Par conséquent, ce rapport porte sur les différentes phases qui ont abouti
à ce projet. Sa composition consiste de cinq chapitres essentiels. Le premier
traite l’organisme accueil, le second aborde son contexte, le troisième son
analyse et conception, le quatrième chapitre présente l’application réalisée et le
dernier ou j’ai fait un bilan général de mon stage.

8
 Chapitre 1 : organisme d’accueil :
1. Introduction :
Dans ce chapitre, je vais introduire l’entreprise accueil qu’est HIMAN
Informatique, ses services en plus de l’organigramme de sa structure.

2. Présentation d’organisme d’accueil :

HIMAN Informatique est une entreprise de services numériques située à
Casablanca et à Meknès, dont le but est de proposer des solutions modernes
dans le domaine des logiciels, applications mobiles en plus des applications web
aux clients. Elle garantit plusieurs services en plus d’un développement durable
comme le support technique et résolution de problèmes, déploiement de
l’application, audit et test d’intrusion etc...
La mission de cette entreprise est d’accompagner ces clients tout au long
de leurs projets IT afin de trouver les solutions optimales qui répondent à leurs
besoins et ambitions.

Cette entreprise fait des interventions dans plusieurs domaines dont :

⚫ Banque et assurances
⚫ E-Commerce
⚫ Education
⚫ Bâtiments
⚫ Télécommunication

3. Structure et organigramme de l’entreprise :

L’organigramme ci-dessous représente la structure de l’entreprise
d’accueil :

9
 Figure 1 : Organigramme de l’entreprise

4. Conclusion :
L’entreprise HIMAN Informatique est une entreprise qui développe des
solutions digitales afin d’automatiser une certaine partie du travail des clients
augmentant ainsi leur productivité dans divers domaines. J’ai effectué un stage
de fin d’étude pour une durée de deux mois au sein de cette entreprise et ma
tâche était de développer une application web E-Commerce des produits
artistique avec mon binôme de stage.

10
 Chapitre 2 : Contexte générale du projet :
1. Introduction :
Dans le chapitre précédent, j’ai présenté l’entreprise d’accueil HIMAN
Informatique, sa mission, sa structure ainsi que les différents domaines
d’intervention.
A présent, je vais présenter mon projet au sein de cette société : une
application web de E-Commerce.
Pour décrire au mieux la réalisation de cette application, il serait judicieux
de commencer par une étude du domaine, définir la mission, construire un
diagramme de GANT pour mieux gérer le projet, ainsi qu’élaborer un cahier de
charges.

2. Étude de l’existant :
Par définition, l’e-commerce, électronique commerce, est une pratique
commerciale visant à lier des marchands et des acheteurs sur Internet dans le
but d’effectuer une transaction. Il peut s’agir non seulement d’acheter un
produit, mais également un service.
On retrouve plusieurs avantages offerts par l’e-commerce tel que :
➢ Contrairement à une boutique physique, un site de e-
commerce est ouvert de façon continue
➢ Audience plus large
➢ Le vendeur acquiert une connaissance fine du comportement
des clients grâce à des outils de marketing, en plus de l’analyse
de données en ligne
➢ Possibilité aux clients de comparer les prix d’un certain produit
dans plusieurs sites sans perdre énormément de temps et
rendant l’expérience plus agréable

Malgré ces avantages, l’e-commerce fait face à plusieurs complications et

difficultés :
➢ Limitations aux niveau technique
➢ Absence de la possibilité d’essayer un produit avant de
l’acheter
➢ Attente de l’expédition des articles achetés
➢ La sécurité

11
 Par ailleurs, en Avril 2023, le site web d’e-commerce le plus populaire est
amazon.com, suivi par avito.ma et enfin, en troisième position, aliexpress.com.

3. Présentation du projet :
Dans ce contexte, je présente une application web de e-commerce
spécialisée exclusivement dans la vente des produits artistiques, se concentrant
ainsi sur une communauté précise. Cette application permet aux clients
d’explorer les différents articles disponibles, chercher des produits en particulier.
Elle inclut aussi un paiement via PayPal, sans oublier un espace exclusif aux
administrateurs.

4. Diagramme de GANTT et planification :

Le diagramme de Gantt est un diagramme graphique pour la
planification des projets. Dans ce diagramme, on divise le projet en petites
tâches, en donnant à chaque tâche une durée. En faisant cela, on peut saisir les
tâches pour terminer le projet, la durée de chaque tâche, la situation
d'avancement, etc. en un coup d'œil.

Pour élaborer ce dernier, en représente chaque tâche par une barre dont
sa longueur et sa position reflètent la date de début, la date de fin et aussi la
durée de la tâche.

Et pour réaliser ce projet « Art Express » je vais se baser sur quatre tâches
principales qui sont :

✓ La réalisation du Cahier de charges.

✓ La modélisation UML.
✓ La programmation.
✓ Le test de l’application.

Avant d’entamer mon diagramme de GANTT il faut estimer pour chaque

tache le nombre de jours qu’il faut pour la réaliser dans le tableau suivant :

Tache Nombre de jours Date de début Date de fin

Cahier de charges 10 jours 05/04/2023 10/04/2023
Modélisation UML 12 jours 11/04/2023 15/04/2023
Programmation 60 jours 16/04/2023 28/05/2023
Test 10 jours 28/05/2023 31/05/2023

Figure 2 : Tableau de planification de ArtExpress

12
 Pour mettre en place ce diagramme on a utilisé Microsoft Project, donc le
diagramme de Gantt estimé pour Art Express est le suivant :

Figure 3 : Diagramme de GANTT de ArtExpress

5. Cahier des charges :

5.1. Description du l’application :
« Art Express » est une application web d’e-commerce spécialisée dans la
vente des produits artistiques tel que : différents types de peintures, marqueurs,
crayons, pastels ainsi que quelques accessoires améliorant l’expérience d’un
artiste.

5.2. Type de projet :

Art Express est une application web c’est-à-dire elle est capable d'interagir
avec tout systèmes d'exploitation. Elle nécessite que d’avoir une connexion
internet et un navigateur pour l’utilisée, ce qui facilite son utilisation.

5.3. L’identité visuelle :

L’identité visuelle est l’ensemble des éléments visuels d’une application qui
permettent de l’identifier par rapport aux autres applications existant déjà.
Une identité visuelle efficace permet d’attirer l’attention de clients
potentiels, mais aussi d’assurer sa fiabilité et sa popularité auprès des
concurrents et des clients.
L’identité visuelle est constituée par des éléments graphiques tels que le
nom, le logo, la palette des couleurs utilisée et aussi le design de l’application
qu’on peut représenter par l’arborescence de l’application.

13
 5.3.1. Le nom de l’application :
Comme déjà cité, l’application de e-commerce se nomme « Art Express »
qui un nom composer par deux termes en anglais « Art » et « Express » le
premier signifie l’art et le deuxième signifie la rapidité c’est-à-dire cette
application va être fiable et rapide pour son service et qui est la vente des
produits artistique.
C’est un nom court et facile à retenir et qui définit très bien l’application.

5.3.2. Palette de couleurs :

L’application va se baser sur une palette de couleurs qui se base sur la
couleur rose, move, blanc et noir et elle va être la suivante :

Figure 4 : Palette de couleurs

5.3.3. Logo de l’application :

On a opté avec mon binôme pour un logo représentant une fleur de cerisier.
On a choisi cette fleur pour sa simplicité et élégance et pour présenter le thème
du projet et qui est l’art.

Figure 5 : Logo Art Express

14
 5.3.4. Arborescence :
L’arborescence est un outil qui permet à représenter l’architecture des
pages constituant l’application web, et elle décrit facilement les chemins de
navigation de ces visiteurs.
Pour Art Express elle va être composée de onze pages principales qui
sont : L’accueil, la page de recherche, celle de détails de produit, celle de
connexion, celle de création de compte, le profile, l’historique des commandes,
le panier, les pages pour les détails de la commande et la page de paiement.
Donc l’arborescence de Art Express va être la suivante :

Figure 6 : Arborescence de l’application ArtExpress

15
 5.4. Les fonctionnalités :
Pour représenter les fonctionnalités de Art Express je vais se baser sur
l’arborescence de cette application web réalisée précédemment.
Art Express offre une expérience conviviale et intuitive à ses visiteurs.
Celle-ci garantie une navigation facile à travers différents produits,
permettant aux visiteurs de trouver rapidement ce qu'ils recherchent. Les
visiteurs peuvent également effectuer des recherches spécifiques à l'aide de
mots-clés ou de filtres avancés. Ils peuvent voir les détails des produits, y
compris les descriptions, les images et les notes. De plus, les visiteurs peuvent
facilement ajouter des articles au panier et aussi créer leur compte pour devenir
des clients.
Une fois devenir client vous pouvait bénéficier d’autre avantages dont
passer des commandes et les payer en ligne et aussi vous pour gérer votre
compte, déconnecter et se connecter à nouveaux.
Consultation : Tous les visiteurs du site, sans exception peuvent faire une
consultation du catalogue riche présent sur note application.
Inscription : Après consultation, pour passer à la phase d'achat des
produits affichés, le visiteur doit devenir client, ce qui ne peut se faire qu'après
inscription.
Authentification : C'est l'activité principale de tout site de commerce
électronique. Avec cette étape, nous identifierons les clients qui chargent, paient
les factures et attendent la livraison.
Gestion du panier : Après authentification, le visiteur devient client et
peut librement ajouter ou supprimer des produits dans le panier, et en même
temps pouvoir mettre à jour la quantité d'articles commandés.
Passer et confirmer sa commande : Après la gestion de son panier, le
client peut passer des commandes et les payer en ligne sur l’application.
Gestion du compte client : le client peut aussi modifier ses informations
de compte nom ou mot de passe.

16
 5.3.5. Administrateur (Back office) :
Le back office permet d’administrer votre application mobile. Et donc
de la gérer d’une façon où cette application va respecter des règles que
l’administrateur mise en place.
Pour cette application l’administrateur va réaliser plusieurs tâches en
respectant le principe CRUD (create, read, update, delete) c’est-à-dire (créer, lire,
mettre à jour, supprimer), donc l’administrateur a le droit de créer, lire, mettre à
jour ou supprimer des informations de l’application en effectuant plusieurs
tâches tel que :
● Gérer les comptes utilisateurs (consulter ou supprimer).
● Gérer les produits (consulter, ajouter, modifier ou supprimer).
● Gérer les commandes (consulter ou livrer).

6. Conclusion :
Pour conclure « Art Express » est une application web de e-commerce
visant la communauté artistique. L’objectif de ce projet est de créer une
plateforme offrant un marché virtuel pour ces clients en employant des
technologies modernes ayant plusieurs fonctionnalités impératives à tout site de
e-commerce tout en préservant un design simple et intuitif.

17
 Chapitre 3 : Analyse et conception UML :
1. Introduction :
UML (Unified Modeling Language) est un langage de modélisation unifié
composé de diagrammes intégrés utilisés par les développeurs informatiques
pour représenter visuellement des objets, des états et des processus dans des
logiciels ou des systèmes.

Un langage de modélisation peut servir de modèle pour un projet,

garantissant une architecture d'information structurée ; il aide également les
développeurs à présenter leur description d'un système de manière
compréhensible par des experts extérieurs. UML est principalement utilisé pour
le développement de logiciels orientés objet.

Et de ma part on a choisi ce langage de modélisation pour faire la

conception de ce projet.

Et pour la faire je vais se baser sur quatre diagrammes UML qui sont :

➢ Diagramme de cas d’utilisation.

➢ Diagramme de séquence.
➢ Diagramme de classes.

2. Identification des acteurs :

Avant d’entamer la conception du projet je vais commencer d’abord par
déterminer les acteurs principaux de l’application web. Qu’est-ce qu’un acteur ?

2.1. Acteur :
Un acteur c’est celui qui déclenche des actions pour interagir avec le
système d’information, et il peut être un utilisateur ou un système (physique ou
moral).

2.2. Les acteurs de l’application :

Pour l’application web E-commerce « Art Express » il existe trois acteurs
principaux qui sont :
- Administrateur.
- Visiteur.
- Client.

18
 2.2.1. Administrateur :
L’administrateur a pour rôle la gestion de toute l’application web « Art
Express », c’est-à-dire la gestion des commandes, produits et utilisateurs (en se
basant sur le principe CRUD c’est-à-dire en ajoutant, modifiant ou supprimant
des informations).

2.2.2. Visiteur :
Le visiteur a pour rôle de parcourir l’application, consulter et chercher
des produits présentes sur l’application et il peut également créer un compte et
devenir client.

2.2.3. Client :
Le client a les privilèges d’un visiteur et un peu plus tant qu’il peut se
connecter et acheter des produits de l’application et il peut également modifier
son compte, consulter son historique de commandes et son panier.

3. Les cas d’utilisation global :

Avant de mettre en place le diagramme de cas d’utilisation on va les
mettre dans un tableau pour spécifier les cas d’utilisation exact pour chaque
acteur :

Acteur Cas d’utilisation

- Rechercher produits.
Visiteur - Consulter produit.
- Créer compte client.

- Rechercher produits.
Client - Consulter produit.
- Ajouter au panier.
- Passer commande.
- Gérer compte client.
- Consulter le panier.
- Consulter historique des commandes.

19
 - Gérer produits (consulter, modifier, supprimer et
Administrateur ajouter).
- Gérer commandes (consulter et livrer).
- Gérer utilisateurs (consulter et supprimer).
- Rechercher produits.
- Consulter produit.
- Ajouter au panier.
- Passer commande.
- Gérer compte client.
- Consulter le panier.
- Consulter historique des commandes.

Figure 7 : Tableau des cas d'utilisation global

4. Diagramme de cas d’utilisation :

Un diagramme de cas d'utilisation est un diagramme UML qui décrit le
comportement fonctionnel d'un système logiciel. Les cas d'utilisation
représentent des unités discrètes d'interaction entre un utilisateur (humain ou
machine) et un système. C'est une entité de travail importante dans un
diagramme de cas d'utilisation, avec des acteurs interagissant avec le cas
d'utilisation. Les cas d'utilisation aident à définir les besoins des utilisateurs et
les objectifs du système.

Dans un diagramme de cas d’utilisation on représente l’interaction d’un

acteur par des relations de différents types. Et pour ce projet je vais avoir besoin
de deux types de relation : la relation d’inclusion et la relation d’extension :

o La relation include : est une relation dans laquelle un cas d'utilisation

(cas d'utilisation de base) contient les fonctionnalités d'un autre cas
d'utilisation (cas d'utilisation inclus). Les relations d'inclusion
permettent la réutilisation des fonctionnalités dans les modèles de
cas d'utilisation.

20
 o La relation extend : est une relation, ou vous pouvez utiliser une
relation d'extension pour spécifier le comportement d'un cas
d'utilisation (extend) étendant un autre cas d'utilisation (base). Ce
type de relation révèle des détails sur le système ou l'application qui
sont généralement cachés dans les cas d'utilisation.

Et pour représenter le diagramme de cas d’utilisation pour Art Express je

suis basé sur une extension dans l’éditeur Eclipse pour mettre en place les
diagrammes UML.

Et pour mettre en place le diagramme de cas d’utilisation je vais le diviser

en trois diagrammes de cas d’utilisation un pour chaque acteur.

Donc je vais obtenir trois diagrammes de cas d’utilisations qui sont :

▪ Diagramme de cas d’utilisation d’administrateur.

▪ Diagramme de cas d’utilisation de visiteur.
▪ Diagramme de cas d’utilisation de client.

Et en se basant sur le tableau des cas d’utilisation global les digrammes de

cas d’utilisation seront les suivant :

4.1. Diagramme de cas d’utilisation de visiteur :

Figure 8 : Diagramme de cas d'utilisation de visiteur

21
4.2. Diagramme de cas d’utilisation de client :

Figure 9 : Diagramme de cas d’utilisation de client

4.3. Diagramme de cas d’utilisation d’administrateur :

Figure 10 : Diagramme de cas d’utilisation d’administrateur

22
 5. Les scénarios :
5.1. Définition d’un scénario :
Il s'agit d'une série de séquences spécifiques qui s'exécutent du début à
la fin du cas d'utilisation.

5.2. Spécification des scénarios :

5.2.1. Visiteur :

Cas d’utilisation Scénarios

Accéder à l’accueil
Rechercher des produits
Consulter produit
Créer compte client
Figure 11 : Tableau des scénarios des cas d'utilisation du visiteur
Scénario 1V : Accéder à l’application -> le système
affiche l’écran d’accueil.
Scénario 2V : « Scénario 1V » -> rechercher le
produit dans la barre de recherche -> le système
affiche le page contenant les résultats de la
recherche.
Scénario 3V : « Scénario 1V » -> sélectionner un
produit -> le système affiche le page contenant les
informations du produit.
Scénario 4V : « Scénario 2V » -> sélectionner un
produit -> le système affiche le page contenant les
informations du produit.
Scénario 5V : « Scénario 1V » -> cliquer le bouton «
Se connecter » -> le système affiche le page de
connexion -> cliquer le bouton « S’inscrire » -> saisir
les informations nécessaires -> cliquer sur le bouton
« S’inscrire ».

23
 5.2.2. Client :
Cas d’utilisation
Accéder à l’accueil
Rechercher des produits
Consulter produit
Se connecter
Ajouter au panier
Passer une commande
Gérer le compte client
Consulter le panier
Consulter l’historique des
commandes
Figure 12 : Tableau des scénarios des cas d'utilisation du client
Scénarios
Scénario 1C : Accéder à l’application -> le système
affiche l’écran d’accueil.
Scénario 2C : « Scénario 1C » -> rechercher le
produit dans la barre de recherche -> le système
affiche le page contenant les résultats de la
recherche.
Scénario 3C : « Scénario 1C » -> sélectionner un
produit -> le système affiche le page contenant les
informations du produit.
Scénario 4C : « Scénario 2C » -> sélectionner un
produit -> le système affiche le page contenant les
informations du produit.
Scénario 5C : « Scénario 1C » -> cliquer le bouton
« Se connecter » -> le système affiche le page de
connexion -> saisi l’email et le mot de passe ->
cliquer sur le bouton «se connecter ».
Scénario 6C : « Scénario 3C » ou « Scénario 4C » -
> cliquer le bouton « Ajouter au panier ».
Scénario 7C : « Scénario 1C » -> cliquer le bouton
« Ajouter au panier ».
Scénario 8C : « Scénario 6C » ou « Scénario 7C » -
> cliquer le bouton « Panier » -> se connecter ->
saisir les informations de livraison et paiement et
payer la commande.
Scénario 9C : « Scénario 5C » -> cliquer le bouton
« profile » dans le menu -> saisir les nouvelles
informations de profile -> cliquer le bouton « mise
à jour votre profile ».
Scénario 10C : « Scénario 5C » -> cliquer le bouton
« panier ».
Scénario 11C : « Scénario 5C » -> cliquer le bouton
« Historique des commandes » dans le menu.
24
 5.2.3. Administrateur :
Cas d’utilisation Scénarios
Accéder à l’accueil Scénario 1A : Accéder à l’application -> le système
affiche l’écran d’accueil.
Rechercher des produits Scénario 2A : « Scénario 1A » -> rechercher le
produit dans la barre de recherche -> le système
affiche le page contenant les résultats de la
recherche.
Consulter produit Scénario 3A : « Scénario 1A » -> sélectionner un
produit -> le système affiche le page contenant les
informations du produit.
Scénario 4A : « Scénario 2A » -> sélectionner un
produit -> le système affiche le page contenant les
informations du produit.
Se connecter Scénario 5A : « Scénario 1A » -> cliquer le bouton
« Se connecter » -> le système affiche le page de
connexion -> saisi l’email et le mot de passe ->
cliquer sur le bouton «se connecter ».
Ajouter au panier Scénario 6A : « Scénario 3A » ou « Scénario 4A » -
> cliquer le bouton « Ajouter au panier ».
Scénario 7A : « Scénario 1A » -> cliquer le bouton
« Ajouter au panier ».
Passer une commande Scénario 8A : « Scénario 6A » ou « Scénario 7A » -
> cliquer le bouton « Panier » -> se connecter ->
saisir les informations de livraison et paiement et
payer la commande.
Gérer le compte client Scénario 9A : « Scénario 5A » -> cliquer le bouton
« profile » dans le menu -> saisir les nouvelles
informations de profile -> cliquer le bouton « mise
à jour votre profile ».
Consulter le panier Scénario 10A : « Scénario 5A » -> cliquer le bouton
« panier ».
Consulter l’historique des Scénario 11A : « Scénario 5A » -> cliquer le bouton
commandes « Historique des commandes » dans le menu.

Gérer les commandes Scénario 12A : « Scénario 5A » -> cliquer le bouton

« Espace Admin » dans le menu -> cliquer le
bouton « Commandes » dans le menu à gauche ->
consulter ou livrer une commande.

25
 Gérer les produits
Gérer les utilisateurs
Figure 13 : Tableau des scénarios des cas d'utilisation d’administrateur
Scénario 13A : « Scénario 5A » -> cliquer le bouton
« Espace Admin » dans le menu -> cliquer le
bouton « Produits » dans le menu à gauche ->
consulter, ajouter, modifier ou supprimer un
produit.
Scénario 14A : « Scénario 5A » -> cliquer le bouton
« Espace Admin » dans le menu -> cliquer le
bouton « Utilisateur » dans le menu à gauche ->
consulter la liste des utilisateurs ou supprimer un
utilisateur.

6. Diagramme de séquence :
Les diagrammes de séquence sont des diagrammes d'interaction qui
détaillent comment les opérations sont effectuées : quels messages sont
envoyés et quand. Les diagrammes de séquence sont organisés dans le temps.
Le temps passe lorsque vous faites défiler la page. Les objets impliqués dans
l'opération sont répertoriés de gauche à droite en fonction de l'heure à laquelle
ils ont participé à la séquence de messages.

Il permet de décrire le processus exécuté lors d’un cas d’utilisation en

mettant en ordre les scénarios possibles lors de ce dernier.

Diagramme de séquence d'accès à l'accueil

Figure 14 : Diagramme de séquence d’accès à l’accueil

26
Diagramme de séquence recherche de produit

Figure 15 : Diagramme de séquence recherche de produit

Diagramme de séquence consulter un produit

Figure 16 : Diagramme de séquence consulter un produit

27
Diagramme de séquence connexion

Figure 17 : Diagramme de séquence de connexion

Diagramme de séquence d’ajout au panier

Figure 18 : Diagramme de séquence d’ajout au panier

28
Diagramme de séquence de passage d’une commande

Figure 19 : Diagramme de séquence de passage de commande

29
Diagramme de séquence de modification de profile

Figure 20 : Diagramme de séquence de modification de profile

Diagramme de séquence de consultation du panier

Figure 21 : Diagramme de séquence consultation de panier

30
Diagramme de séquence de l’historique des commandes

Figure 22 : Diagramme de séquence de l’historique des commandes

Diagramme de séquence de gestion des commandes

Figure 23 : Diagramme de séquence de gestion des commandes

31
Diagramme de séquence de gestion des produits

Figure 24 : Diagramme de séquence de gestion des produits

Diagramme de séquence de gestion des utilisateurs

Figure 25 : Diagramme de séquence de gestion des utilisateurs

32
 7. Diagramme de classes :
Le diagramme de classe est un diagramme qui fait partie des digrammes
diagrammes statique dans la modélisation UML. C’est un schéma qui représente
les classes et les interfaces d’un système d’information ainsi que la relation entre
eux.

Une classe décrit les responsabilités, le comportement et le type d'un

ensemble d'objets. Les éléments de cet ensemble sont les instances de la classe.

Une classe est un ensemble de fonctions et de données (attributs) qui

sont liées ensemble par un champ sémantique. Les classes sont utilisées dans la
programmation orientée objet. Elles permettent de modéliser un programme et
ainsi de découper une tâche complexe en plusieurs petits travaux simples.

Les classes peuvent être liées entre elles grâce au mécanisme d'héritage qui
permet de mettre en évidence des relations de parenté. D'autres relations sont
possibles entre des classes, chacune de ces relations est représentée par un arc
spécifique dans le diagramme de classes.

Elles sont finalement instanciées pour créer des objets (une classe est
un moule à objet : elle décrit les caractéristiques des objets, les objets
contiennent leurs valeurs propres pour chacune de ces caractéristiques lorsqu'ils
sont instanciés).

Pour l’application Art Express le diagramme de classes sera le suivant :

33
 <

Figure 26 : Diagramme de classes Global

Conclusion :
Dans ce chapitre, je me suis concentré sur les aspects analytique et
conceptuel de l’application.
Pour la phase analyse, j’ai défini les différents cas d’utilisations puis, je les
avais traduit au travers la construction des diagrammes de séquence et de classe,
dans la phase de conception.
Je vais consacrer le chapitre suivant pour la réalisation de l’application.

34
 Chapitre 4 : Réalisation
Introduction :
Après avoir abordé dans le chapitre précédent la conception de mon
application, je vais présenter dans ce chapitre la création et la mise en œuvre
des différents programmes, les principales interfaces via lesquelles les
utilisateurs (visiteur, client et administrateur) interagissent avec le système et sa
base de données, qui servent à la constitution de mon application et assurent
ses fonctionnalités.

1. Outils et Framework de développements :

Au cours de développements de l’application web « art express » j’ai utilisé
plusieurs outils que je vais présenter dans la suite :

1.1. Visual Studio Code :

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égrer.
J’ai utilisé Visual Studio Code version 1.76.0 comme éditeur de code pour
développer mon application web.

1.2. Mongo db :
MongoDB est un programme de base de données multiplateforme orienté
document et disponible en source. Classé comme un programme de base de
données NoSQL, Mongodb utilise des documents de type JSON avec des
schémas facultatifs. MongoDB est développé par Mongodb inc. et sous licence
Server Side Public License (SSPL).

1.3. Node js :
Node js est un environnement d'exécution JavaScript back-end open source,
multiplateforme qui s'exécute sur le moteur V8 et exécute le code JavaScript en
dehors d'un navigateur Web.

35
 Node js permet également d’exécuter du code JavaScript à l’intérieur de
Google Chrome et, grâce à Node, directement sur le serveur sans avoir besoin
d’utiliser une serveur web séparé, d’exécuter plusieurs opérations simultanées
de façon asynchrone et non bloquante en tirant profit des multiples fils
d’exécution (multithreading) des noyaux des processeurs modernes et il permet
aussi de d’installer et configurer les packages nextjs nécessaires pour chaque
application web.

1.4. Next js :
Next.js est un framework Web de développement frontal open-source
construit au-dessus de Node.js permettant aux applications web basées sur
React d'offrir des fonctionnalités telles que le rendu côté serveur et la génération
de sites web statiques.

1.5. Tailwind Css :

Tailwind est un Framework CSS "utile d'abord" qui fournit un catalogue
complet de classes et d'outils CSS qui vous permet de commencer facilement à
styliser un site Web ou une application.

1.6. HTML (HyperText Mark-up language):

C’est un langage de marquage (de structuration ou de balisage) dont le
rôle est de créer des pages web utilisant un serveur web et aussi formaliser
l’écriture d’un document avec des balises. Les balises permettent d’indiquer la
façon dont doit être présenté un document et les liens qu’il doit établissent avec
d’autre document.
Le langage HTML permet notamment la lecture des documents sur
internet à partir de déférentes machines, grâce au protocole http, permettant
d’accéder via les réseaux à des documents repérés par une adresse unique
appelée URL.

36
 1.7. La base de données :
Pour réaliser mon application j’avais besoin d’une base de données orienté
document que j’ai appelé « art express » constitué de trois documents qui sont :

Figure 27 : Base de données

1.7.1. Le document « users » :

Ce document contient les informations des utilisateurs qui on créer des
comptes dans l’application, son schéma est le suivant :

Figure 28 : La schéma de document des utilisateurs

37
 Figure 29: Le document des utilisateurs

1.7.2. Le document « products » :

On stock dans ce document on stock les produits de l’application, son
schéma est le suivant :

Figure 30 : La schéma de document des produits

38
 Figure 31: Le document des produits

1.1.1. Le document « orders » :

On stock dans ce document on stock les commandes de l’application, son
schéma est le suivant :

Figure 32 : La schéma de document des commandes

39
 Figure 33: Le document des commandes

2. Les interfaces de Art Express :

On se basant sur ce qui précède soit dans la conception UML ou
l’arborescence de mon application je vois que les acteurs de mon application ont
des cas d’utilisation en commun ce qui veut dire qu’ils ont des interfaces en
commun, et on se basant sur ça la présentation des interfaces de mon
application va être la suivante :

2.1. Les interfaces pour visiteur, client et administrateur :

Tant que l’administrateur est un utilisateur de base avec des accès
privilégiés donc il a les mêmes interfaces de client avec un peu plus, et tant que
le client est un visiteur de base qui a fait la création de compte donc il les mêmes
interfaces de client avec un peu plus.
Donc les interfaces communes entre le visiteur, client et administrateur
sont :
• L’accueil
• L’interface de recherche
• Le produit
• Le panier
• La création de compte
Et ils sont les suivants :

40
Figure 34 : Interface de l'accueil

41
 Figure 35 : Interface de recherche

Figure 36 : Interface de consultation de produit

42
 Figure 37 : Interface de panier

Figure 38 : Interface de création de compte

2.2. Les interfaces pour client et administrateur :

Tant que l’administrateur est un utilisateur de base avec des accès
privilégiés donc il a les mêmes interfaces de client avec un peu plus.
Donc les interfaces communes entre le client et l’administrateur sont :
• Passage de commande
• L’interface de paiement
• L’interface de mise à jour de profile
• L’historique des commandes
• L’authentification
Et ils sont les suivants :

43
Figure 39 : Interface de passage de commande

Figure 40 : Interface de paiement

44
 Figure 41 : Interface du Profile

Figure 42 : Interface d’historique des commandes

Figure 43 : Interface d'authentification

45
 2.3. Les interfaces pour l’administrateur :
De plus que l’administrateur est un client de l’application de base mais il a
comme déjà cité des privilèges de gestion de plus qui permet de gérer
l’application Art Express.
Donc les interfaces communes entre le visiteur, client et administrateur
sont :
• L’espace admin
• L’interface de gestion des utilisateurs
• L’interface de gestion des commandes
• L’interface de livraison des commandes
• L’interface de gestion des produits
• L’interface de modification / création des produits
Et ils sont les suivants :

Figure 44 : Interface d’espace admin

46
 Figure 45 : Interface de gestion des utilisateurs

Figure 46 : Interface de consultation des commandes

Figure 47 : Interface de livraison des commandes

47
 Figure 48 : Interface de gestion des produits

Figure 49 : Interface de modification / création des produits

Conclusion :
Dans ce chapitre j’ai, au premier lieu, présenté les différents outils et
langages que j’ai utilisés pour implémenter mon application. Par la suite, j’ai
présenté les interfaces de l’application en fonctionne des acteurs de celle-ci.

48
 Chapitre 5 : Bilan et conclusion
1. Bilan professionnel :
Ce stage m’a apporté une nouvelle expérience professionnelle enrichissante.
Grâce à deux mois passés au sein de la société de HIMAN Informatique, j’ai
acquis de nouvelles connaissances autant sur le milieu de l’entreprise que sur les
langages informatiques.
Le stage dans un milieu professionnel est constructif. En effet, j’ai pu
développer mes compétences professionnelles grâce à l’environnement dans
lequel j’ai effectué mon stage. J’ai eu la charge de la conception d’un site, du
cahier des charges à la réalisation tout en respectant les éléments et les souhaits
formulés par les responsables de la société en travaillant dans un binôme avec
une autre stagiaire Zeina Mokrini. Tous les objectifs du cahier des charges ont
été respectés.
Travaillé en binôme était bénéfique pour moi car il me permet d’améliorer
mes compétences de travail en groupe et aussi la bonne maitrise d’utilisation de
GitHub pour le suivi des taches de mon binôme et pour implémenter mes taches.

2. Bilan personnel :
Tout comme au niveau professionnel, ce stage m’a aidé à développer mes
connaissances personnelles et m’a fait découvrir de nouveaux outils. Ces deux
mois m’ont permis de réaliser une application web et de maitriser de nouveaux
technologies (cité dans le 4-ème chapitre).
J’ai aussi pu découvrir la vie au sein d’une entreprise. Le fait de se référer à
un tuteur constitue une aide dont je n’aurais pu me passer et s’adresser à un
supérieur hiérarchique en construisant une explication et une argumentation a
été instructif. Et aussi la prise de la parole dans des réunions professionnels soit
avec mon encadrent ou mon binôme et aussi mes collègues.

49
 Conclusion Générale :

Au cours de ce travail, j’ai présenté les différentes étapes ayant conduit à

la mise en œuvre d’une application web dédiée au e-commerce des produits
artistiques et qui s’appelle Art Express.

J’ai commencé par recenser l’impact de la pandémie de covid 19 sur le

domaine de E-commerce.

Le langage de modélisation UML a constitué le support de l’analyse des

besoins et la conception de l’application web via les différents diagrammes UML
couvrant les aspects fonctionnels, dynamiques et statiques de tout le
développement.

Pour enfin réaliser l’application, j’ai utilisé MongoDB pour implémenter à

base de données et les langages Nextjs, Tailwind CSS et l’environnement Node
js pour la développer.

Ce projet a fait l’objet d’une expérience intéressante, très bénéfique pour

moi. En effet, il m’a permis d’enrichir mes connaissances théoriques et
compétences dans le domaine de la conception et de la programmation.
Ajoutant à ceci, la mise en application des connaissances acquises tout au long
de mes études.

En plus, c’était une bonne occasion pour réaliser un travail concret avec
des objectifs clairs et bien définis.

50
Webographie :

 http://fr.wikipedia.org/
 L’extension UMLET sur l’éditeur de code Eclipse : conception des
diagrammes de cas d’utilisation.
 https://online.visual-paradigm.com/ : conception des diagrammes de
séquences et classe.
 https://color.adobe.com/es/create/color-wheel : la palette des colleurs.
 https://www.shopify.com/fr/blog/business-e-commerce-en-ligne-10-
erreurs?term=&adid=649055497090&campaignid=18874936056&gclid=
Cj0KCQjwjryjBhD0ARIsAMLvnF-
lHeygfSgdRRPJAQfaeGk2MnakPx3j32bmD4yjpRTAHTKyNV_4IJAaAhgkEAL
w_wcB&cmadid=516752332;cmadvertiserid=10730501;cmcampaignid=2
6990768;cmplacementid=324494362;cmcreativeid=163722649;cmsiteid
=5500011#1
 https://www.wizishop.fr/blog/ecommerce-avantages-inconvenients
 https://www.similarweb.com/fr/top-websites/morocco/e-commerce-
and-shopping/
 https://cloud.mongodb.com/ : le création de base de données.
 https://wireflow.co/ : L’arborescence de l’application.

51