25/06/2023

4ème année Génie informatique

RAPPORT : PROJET DE SYNTHES

Développement d’une application web e-commerce paramédical

Sous la direction de Mr : BOUTABIA Mohammed

Année universitaire : 2022-2023

Présenté par : KHARBACH Bilal

DIBANGOU Luccin
BENNANI Reda
Table des matières

REMERCIEMENTS....................................................................................2
INTRODUCTION GENERALE.....................................................................3
CHAPITRE I : CONTEXTE GENERALE DU PROJET........................................4
1. Analyse de l’existant :..........................................................................4
2. Analyse critique de l’existant :............................................................4
3. Solution proposée :.............................................................................5
CHAPITRE II : ANALYSE ET CONCEPTION DU PROJET................................5
1. Besoins fonctionnels :.........................................................................5
a. Client :..........................................................................................................................5
b. Administrateur :............................................................................................................5

2. Plan prévisionnel (GANTT) :................................................................6

3. Analyse et diagrammes :.....................................................................7
a. Les acteurs principaux :................................................................................................7
b. Cas d’utilisation :..........................................................................................................8
c. Diagramme de classe :..................................................................................................9

CHAPITRE III : REALISATIONS ET CONCEPTION.......................................11

1. Besoins techniques :.........................................................................11
2. Présentation des interfaces du site web :.........................................14
a. Page d’accueil :...........................................................................................................14
b. Boutique :...................................................................................................................15
c. Catégories :.................................................................................................................16
d. Connection et inscription :.........................................................................................17
e. Panier :.......................................................................................................................18

3. Présentation de l’espace Client :.......................................................19

4. Présentation de l’espace de l’administrateur :..................................20
CONCLUSION ET PRESPECTIVES.............................................................22

1
REMERCIEMENTS

Avant tout développement de cette riche expérience, il est jugé opportun de commencer ce
rapport par des remerciements, à ceux qui nous ont beaucoup aidé au cours de ce travail, et à
ceux qui ont eu la gentillesse de faire de cette expérience un moment de plaisir et
d’apprentissage intense.

D’abord nous voudrons témoigner toute notre gratitude à Monsieur BOUTABIA Mohammed,
notre encadrant professionnel et chef de filière pour ses orientations, ses aides et toutes les
facilités dont il nous a fait bénéficier ainsi que toutes les personnes ayant contribué de près ou
de loin à l’élaboration de ce travail et au bon déroulement de ce projet.

2
INTRODUCTION GENERALE

Ayant atteint la 4ème année universitaire en génie informatique au sein de l’université

international de Casablanca, un projet de synthèse est demandé d’accomplir. Notre choix s’est
rapporté à concevoir et réaliser un site web e-commerce des produits paramédicaux.

Nous nous sommes amenés à réaliser une plateforme conviviale et efficace, mettant en avant
une large quantité de produits et soins médicaux, orthopédiques. Nous voudrons faciliter
l'expérience d'achat en ligne au Maroc pour tous nos utilisateurs, en offrant une haute gamme
de produits et une interface intuitive.

Pour améliorer l'expérience d'achat en ligne, nous nous sommes amenés à élaborer une
interface conviviale où une grande variété de produits de santé, orthopédiques et médicaux
seront affichés efficacement.

Notre objectif principal c’est de fournir des fonctionnalités intuitives qui pourront répondre à
tous les besoins des clients en rendant leur expérience en ligne agréable et fluide.

Le rapport se divise en trois chapitres distincts. Le premier chapitre englobe la présentation de

la structure d'accueil de notre application web, ainsi que le cahier des charges correspondant.
Dans le deuxième chapitre, on abordera en détail toutes les analyses nécessaires ainsi que les
étapes de la conception de notre application y compris tous les diagrammes des différents
acteurs du système.

Enfin, le dernier chapitre est consacré à la présentation des outils que nous avons utilisés pour
la réalisation de l'application, accompagnés de toutes les captures d'écrans pertinentes ainsi
que les descriptions appropriées.

3
CHAPITRE I : CONTEXTE GENERALE DU PROJET

1. Analyse de l’existant :

Notre analyse pour notre site Web de commerce électronique paramédical comprenait
une étude détaillée des concurrents, des tendances du marché et des sites Web de
commerce électronique paramédical existants au Maroc.

Au cours de notre analyse de l’existant au Maroc, nous avons étudié les différentes
options de produits offertes, les étapes à suivre pour passer une commande et
effectuer un paiement, ainsi que l'expérience globale des utilisateurs.

Nous avons également pris le temps d'analyser les pratiques courantes sur le marché
marocain. Forts de ces connaissances, on a élaboré une approche stratégique qui
répond aux besoins spécifiques des utilisateurs tout en tirant parti des opportunités
prometteuses offertes par le marché.

2. Analyse critique de l’existant :

Nous avons identifié lors de notre analyse critique que les sites Web de commerce
électronique qui vendent des produits paramédicaux présentent certaines
imperfections.

De manière spécifique, nous avons identifié des lacunes dans l'expérience utilisateur et
l'ergonomie de nombreuses plateformes, ce qui complique la navigation et la
découverte des produits. De plus, l'offre limitée de produits paramédicaux sur certains
sites ne satisfait pas pleinement les besoins des consommateurs. Afin de proposer une
expérience conviviale et axée sur l'utilisateur, répondant de manière efficace et sans
effort aux attentes des professionnels paramédicaux, nous avons développé une
solution visant à résoudre ces problèmes présents dans le système actuel.

Notre objectif est de fournir une gamme de produits bien équilibrée, un service client
réceptif aux commentaires.

3. Solution proposée :

Notre solution proposée pour remédier aux lacunes identifiées dans l'existant des sites
web e-commerce paramédicaux est de développer une plateforme conviviale et
ergonomique qui offre une expérience utilisateur optimisée, on envisage d’intégrer
toutes les fonctionnalités de recherche avancée, de filtrage et de recommandation
personnalisée pour simplifier la navigation et faciliter la découverte des produits. En
plus, afin de proposer une vaste gamme de produits paramédicaux et de qualité
supérieure, nous avons l'intention de faire des collaborations avec divers fournisseurs.

4
CHAPITRE II : ANALYSE ET CONCEPTION DU PROJET

1. Besoins fonctionnels (cahier des charges) :

a. Client :

Le site web que nous prévoyons de développer propose quatre fonctionnalités

principales pour cet acteur qu’est le client :

Consultation du catalogue : On mettra à disposition de tous les visiteurs la possibilité

de consulter notre catalogue virtuel de produits.

Inscription : Pour passer à l'étape d'achat des produits, les visiteurs doivent s'inscrire et
devenir des clients enregistrés sur notre site.

Authentification : L'authentification est une étape cruciale dans tout site de commerce
électronique. C'est à travers cette étape que nous identifierons nos clients, leur
permettant de charger leur panier, effectuer le paiement de leurs factures et suivre leur
livraison.

Gestion du panier : Une fois authentifiés, nos clients auront la liberté d'ajouter ou de
supprimer des produits dans leur panier, ainsi que de mettre à jour les quantités des
articles commandés.

Ces quatre activités diverses, consultation, inscription, authentification et gestion du

panier, sont essentielles pour offrir une expérience utilisateur complète et faciliter le
processus d'achat sur notre site web e-commerce.

b. Administrateur :

Notre site web e-commerce paramédical comprendra un espace administrateur qui

offrira des fonctionnalités avancées de gestion des commandes, de modification des
produits et de gestion générale du site. Voici les principales spécifications de l'espace
administrateur :

Authentification sécurisée : Un compte administrateur sécurisé par un système

d'authentification pour garantir l’exclusivité d’accès aux fonctionnalités administratives.

Gestion des commandes : L'administrateur peut visualiser, trier et gérer les

commandes saisies par les clients. Il peut suivre le statut de SHIPPING des commandes,
les marquer comme traitées ou non, ainsi que gérer les retours ou les remboursements
si nécessaire.

5
 Gestion des produits : L'administrateur peut ajouter les nouveaux produits à la base de
données, modifier les informations existantes ainsi qu’il peut supprimer des produits
du catalogue. De plus, il est capable de gérer les catégories de produits spécifiques à
chaque produit.

2. Plan prévisionnel (GANTT) :

Un diagramme de gant représente un plan prévisionnel de gestion d’un projet, utilisé

pour planifier et organiser les différentes tâches d’un projet en fonction d’une durée
déterminée.

Le diagramme de gant de notre application paramédical sera présenté comme ceci :

6
3. Analyse et diagrammes :

a. Les acteurs principaux :

On a pu identifier lors de notre phase d’analyse de ce projet 3 principaux acteurs qui

participent à l’élaboration de ce système, le tableau ci-joint nous représente chaque
acteur avec son rôle correspondant :

b. Cas d’utilisation :

Parmi les outils principaux de modélisation dans le domaine de l’ingénierie

logicielle il existe le diagramme de cas d’utilisation qui nous permettra de
représenter les différentes interactions entre un acteur et un système spécifique, il
élabore les fonctionnalités offertes par un système du point de vue de l’utilisateur.

 Diagramme de cas d’utilisation pour le visiteur :

7
 Diagramme de cas d’utilisation pour notre client :

 Diagramme de cas d’utilisation pour l’Administrateur :

8
c. Diagramme de classe :
Le diagramme de classe représente l’outil essentiel avant d’enchaîner la génération du
code, il nous permettra de visualiser la structure du système d’une manière statique en
représentant les composants principaux du système.

L’application web sera représenté par le diagramme de classe suivant :

d. Diagrammes de séquence :
Authentification :

9
Ajout de produit :

Recherche de produit

10
CHAPITRE III : REALISATIONS ET CONCEPTION

1. Besoins techniques :

a. JAVASCRIPT :

JavaScript est un langage de programmation polyvalent utilisé

pour rendre les sites Web interactifs et dynamiques. Cela se
fait côté client. Cela signifie que vous pouvez modifier le
contenu HTML, gérer les événements utilisateur et créer des
fonctionnalités interactives. JavaScript est un langage
interprété avec une syntaxe similaire à d'autres langages de
programmation. Il est orienté objet, possède un vaste
écosystème avec des dizaines de bibliothèques et de
Framework, et est pris en charge par tous les principaux
navigateurs Web.

b. CSS (Cascading Style Sheets) :

Cascading style sheets (CSS) est un langage de programmation qui

peut dicter la conception et le design des documents électroniques.
Avec des instructions simples fournies dans un code source clair,
vous pouvez ajuster la mise en page, les couleurs, les polices et
d'autres éléments de votre site Web à vos besoins. La sémantique
et le contenu des documents sont entièrement préservés grâce aux
feuilles de style en cascade. CSS a été introduit au milieu des années
1990 et est maintenant le langage de feuille de style standard pour
le World Wide Web.

c. BOOTSTRAP :

Bootstrap est un cadre de développement front-end très

populaire et ouvert, utilisé pour la création de sites web. Il nous
offre une vaste gamme de ressources ainsi que des
fonctionnalités prédéfinies qui nous facilitent la conception des
interfaces utilisateurs interactives et attrayantes. Grâce aux
composants modulaires et à la flexibilité, les développeurs
peuvent rapidement mettre en place des mises en page
réactives et esthétiquement plaisantes pour différentes tailles
d'écran.

11
d. NODE JS :

Node.js est un environnement JavaScript côté

serveur qui utilise le moteur JavaScript V8 de
Google. Il permet d'exécuter du code JavaScript
en dehors d'un navigateur web, ce qui peut être
utilisé pour développer des applications serveur
et des outils en ligne de commande.

Le Framework Express.js, qui simplifie la création

d'applications web en fournissant des
fonctionnalités et des outils supplémentaires.

e. REACT JS :

React.js est une bibliothèque JavaScript open-source qui est

utilisée pour créer des interfaces utilisateur interactives et
réactives. Elle permet la création de composants
réutilisables qui se mettent à jour efficacement et optimisée
en fonction des modifications d'état. React.js utilise une
approche basée sur les composants, ce qui signifie que
chaque composant représente un aspect particulier de
l'interface utilisateur. React.js offre des performances
élevées tout en réduisant les manipulations directes du
DOM grâce à sa gestion virtuelle du DOM (Document Object
Model)

f. MONGODB :

MongoDB, également connu sous le nom de base de données

NoSQL (pas seulement SQL), est un système de gestion de
base de données orienté documents. MongoDB utilise un
modèle de données flexible basé sur des documents JSON
(JavaScript Object Notation), ce qui lui permet de stocker et
de gérer des données non structurées ou semi-structurées.
Cela le distingue des bases de données relationnelles
traditionnelles.

12
 g. UML :

Le langage de modélisation unifié, également

connu sous le nom d'UML, est utilisé pour
représenter visuellement des systèmes logiciels.
Il présente une variété de diagrammes pour
illustrer les différentes perspectives d'un
système, y compris les cas d'utilisation, les
classes, les objets, les séquences, les états et les
collaborations. Ces diagrammes permettent de
communiquer et de documenter de manière
visuelle et compréhensible la structure, le
comportement et les interactions du système.

h. DOM :

L'interface de programmation standard

connue sous le nom de DOM (Document
Object Model) représente la structure d'un
document HTML ou XML en tant
qu'arborescence d'objets. Il permet de
manipuler et de modifier dynamiquement
le contenu et le style d'une page web en
fournissant une représentation hiérarchique
des éléments du document, tels que les
balises, les attributs et le contenu texte..

i. Visual Studio Code :

Microsoft a créé un IDE léger et extensible appelé

Visual Studio Code (VS Code). Il est capable
d'écrire, de modifier et de déboguer du code
source dans un large éventail de langages de
programmation.

La coloration syntaxique, l'autocomplétions, la

gestion des versions avec Git, le débogage,
l'intégration avec des outils de build et des
terminaux intégrés sont parmi les nombreuses
fonctionnalités facilitant le développement offert
par VS Code. Il prend également en charge les
extensions, qui permettent d'ajouter des
fonctionnalités supplémentaires.

13
2. Présentation des interfaces du site web :

a. Page d’accueil :

La page se compose d’un grand titre au-dessous de l’entête « Bienvenue à mon para »,
ensuite on a mis 2 filtres majeurs :

 Nouvelles arrivées : ou on mettra la nouveauté qu’on a comme produits

 Les produits les plus vendus sous nom de « Meilleures ventes ».

L’entête où l’utilisateur aura la possibilité de rechercher le produit qu’il désire, les

différentes catégories, le panier, boutique pour accéder à tous les produits disponibles.

Le client peut cliquer sur le produit pour visualiser les informations complètes :

14
b. Boutique :

Un espace « Boutique » où le client trouve tous les produits disponibles avec le filtrage par
catégorie et par prix.

Le client peut cocher les catégories qu’il souhaite ainsi que le prix afin de faciliter ses
recherches comme suivant :

Résultat après avoir coché un filtre :

15
Le client peut également cocher même 2 filtres ou plusieurs en même temps :

c. Catégories :

La liste des catégories de nos produits :

16
d. Connection et inscription :

Un visiteur du site à la possibilité de s’inscrire et de se connecter afin de pouvoir acheter

nos produits.

Connection :

Inscription :

17
e. Panier :

Comme il est montré sur cette figure un utilisateur qui n’a pas de compte ne pourra pas
effectuer son achat, donc il est obligé de se connecter pour pouvoir payer ses achats :

Tandis que lorsqu’il est connecté il pourra remplir les informations nécessaires pour
accéder au paiement.

Lorsqu’un client met dans son panier les produits qu’il désire acheter, un petit numéro en
rouge au-dessus de la section panier qui s’affiche comme compteur indique le nombre des
articles mis au panier.

Le client peut également supprimer les articles qu’il souhaite de son panier.

18
3. Présentation de l’espace Client :

L'espace client de notre site web propose deux sections principales :

 La première section "Profil" : permet aux clients de consulter et de gérer leurs

informations personnelles telles que leur nom, le mail et le numéro de
téléphone.
 La deuxième section "Commandes" : affiche un récapitulatif des commandes
précédemment effectuées

Section Profil :

Section Commandes :

19
4. Présentation de l’espace de l’administrateur :

L’espace administrateur de notre site web propose quatre sections créer catégorie,
créer produit, gérer produit et gérer les commandes.

Créer catégorie : permet à l'administrateur d'ajouter de nouvelles catégories de

produits en spécifiant leur nom et leurs caractéristiques. Cela garantit une organisation
claire et structurée des produits disponibles.

Créer produit : permet à l'administrateur de créer de nouveaux produits en saisissant

les détails pertinents tels que le nom, la description, le prix, les images

20
Gérer produit :

Cette section offre une vue d'ensemble des produits existants avec des fonctionnalités
de modification et de suppression. L'administrateur peut ainsi mettre à jour.

Gérer les commandes :

Cette section permet à l’administrateur de suivre et gérer les commandes passées par
les clients.

21
CONCLUSION ET PRESPECTIVES

Au cours de cette expérience nous avons pu réalisés un site web performant qui facilitera
l’expérience d’achat en ligne des produits paramédicaux au Maroc.

Ce fut une expérience enrichissante qui nous a permis d’enrichir nos compétences techniques
et approfondir nos connaissances en programmation ainsi que d’apprendre des nouvelles
technologies telles que Node JS, REACT JS.

A l’avenir, nous avons prévu d’améliorer encore plus notre application web en ajoutant des
nouvelles fonctionnalités comme le développement d’une application mobile.

22