Final-Rapport Kholoud

Ministère De L’enseignement Supérieur Et De La Recherche Scientifique
Direction Générale Des Études Technologiques

Institut Supérieur des Études Technologiques de Kairouan
Rapport de stage
perfectionnement
Département : Technologie de
l’informatique
Réalisé par Organisme d’accueil Encadré par
Guezmil Ahmed ITGATE Hatem Diwani

Remerciements
Je tiens à remercier toutes les personnes qui ont contribué au succès de mon stage et
qui m'ont aidé lors de la rédaction de ce rapport.
Tout d'abord, j'adresse mes remerciements à mon maitre de stage, Mr Hatem Diwani,
pour son accueil, le temps passé ensemble et le partage de son expertise au quotidien. Grâce
aussi à sa confiance j'ai pu m'accomplir totalement dans mes missions. Il fut d'une aide
précieuse dans les moments les plus délicats.
Enfin, je tiens à remercier toutes les personnes qui m'ont conseillé et relu lors de la
rédaction de ce rapport de stage : ma famille, mes amis SAIF BA et MONGI
MANGUELISA camarade de promotion.
Sommaire
Introduction Générale..............................................................................................................1
Chapitre I : Cadre du stage....................................................................................................2
I. Présentation de la société..............................................................................................2
1. Présentation générale sur la société :.......................................................................2
2. Les départements et les services...............................................................................3
II. Contexte de stage.......................................................................................................3
Chapitre II : Spécification des besoins.......................................................................................4
I. Besoins fonctionnels......................................................................................................4
II. Besoins non fonctionnels...........................................................................................4
III. Méthodologie de conception :...................................................................................4
IV. Les logiciels utilisés....................................................................................................5
Chapitre III: Conception.........................................................................................................6
I. Diagrammes de cas d’utilisation de notre site web.......................................................6
1. Diagramme de cas d’utilisation d’un visiteur.............................................................6
2. Diagramme de cas d’utilisation d’un client................................................................7
3. Diagramme de cas d’utilisation du webmaster du site web......................................7
I. Environnement de travail.............................................................................................9
1. Environnement matériel...........................................................................................9
2. Environnement logiciel et langage :.........................................................................9
II. Enchaînement des écrans..............................................................................................11
Conclusion générale...............................................................................................................22
Netographie.............................................................................................................................23
Liste des figures
Figure 1:Emplacement géographique de la société ITGAT.......................................................2

Figure 2:Diagramme de cas d’un visiteur..................................................................................6
Figure 3:Diagramme de cas d’un client.....................................................................................7
Figure 4:Diagramme de cas du webmaster du site web.............................................................7
Figure 5:Interface Home pour visiteur.....................................................................................11
Figure 6: interface Shop pour veste le vision...........................................................................12
Figure 7:page carte pour inspecter le panier............................................................................12
Figure 8:page Search pour rechercher un produit....................................................................13
Figure 9:page registre pour l’inscription de client...................................................................13
Figure 10:page login pour connecter sur le plateforme............................................................14
Figure 11: page home pour viser le produit.............................................................................14
Figure 12: Interface shop pour l’admin....................................................................................15
Figure 13:Interface User pour gérer les client..........................................................................16
Figure 14:interface ordres pour gérer les ordres......................................................................16
Figure 15: interface Product pour gérer le produit...................................................................17
Figure 16:Interface catégories pour gérer les catégories de produit........................................17
Figure 17:Interfaces cart pour gérer le panier (admin).............................................................18
Figure 18:Interface Search pour chercher un produit...............................................................18
Figure 19:Interface home pour naviguer les produits..............................................................19
Figure 20:Interface shop pour naviguer et ajouter des produits aux paniers............................19
Figure 21:Interface ordres pour prévision la commande..........................................................20
Figure 22:Interface cart pour la panier du client......................................................................20
Figure 23:Interface Search pour rechercher un produit............................................................21
Introduction Générale
Des ventes de mains en mains, vers des ventes virtuelles, passent les priorités des
opérations de ventes des biens et des services, ce qui nous rend obligés de donner plus
d’importance à la vente électronique. Les boutiques en ligne sont depuis des années,
largement conseillés pour les sociétés qui se basent sur la vente des produits et même des
services Ces types de sites web représentent un dispositif global fournissant aux clients un
pont de passage à l’ensemble des informations, des produits, et des services à partir d’un
portail unique en rapport avec son activité. Les sites de vente en ligne permettent aux clients
de profiter d’une foire virtuelle disponible est quotidiennement mise à jours sans la moindre
contrainte, ce qui leur permettrai de ne jamais rater les coups de cœur, ainsi Une foire sans
problèmes de distance géographique, ni d’horaire de travail ni de disponibilité de transport.
D’une autre part ces sites offrent à la société de profiter de cette espace pour exposer ses
produits à une plus large base de clientèle. Le présent rapport, qui expose ce projet, est
composé de quatre chapitres structurés comme suit :
Dans le premier chapitre, je vais présenter l’entreprise dans laquelle j’ai effectué
mon stage ensuite je vais présenter le contexte de ce dernier. Le deuxième chapitre sera
consacré à l’analyse des besoins fonctionnels de projet. Dans le troisième chapitre, une étude
de la conception est réalisée. Finalement, au quatrième chapitre je vais étudier
l’implémentation de l’application, en décrivant l’environnement matériel et logiciel, et
donner un aperçu sur les interfaces réalisées.
1
Rapport du stage de perfection ISET KR 2020/2021
Chapitre I : Cadre du stage
Introduction
Dans ce chapitre nous allons aborder la présentation générale de notre projet Amado,
tout d’abord une présentation de l’organisme d’accueil, et par la suite, une présentation du
cadre du stage avec la problématique dégagée, l’étude de l’existant, la solution proposée et
la planification du projet
I. Présentation de la société
1. Présentation générale sur la société :
 Présentation de la société :
IT Gate est un groupe de Développement de Logiciels et de Services

Informatiques créé en 2015. Il est spécialisé dans la Création de Site Internet Vitrine,
la Création d'Applications Web et Mobile, le Graphisme, le Community Management,
le Référencement Web, avec une forte composante créative et technologique.
 Mission
Fournir des services informatiques personnalisés pour aider ses clients quelle que soit leur
taille, améliorer leurs capacités en termes d'agilité et de réactivité et faire face aux défis de la
transformation numérique.
 Localisation
Figure 1:Emplacement géographique de la société ITGAT
2
 Domaines :
Développement Web et Mobile
Référencement, Infogérance et Réseaux.
Formation, Systèmes Embarqués.
Design Graphique.
Web Développement et Mobile Développement
2. Les départements et les services

 Les Départements
 Départements graphiques.
 Départements vidéo et montage.
 Départements développements.
 Le service
 Développement web et applications mobile
 Community management
 Référencement naturel et payant
 Design multimédia et chartes graphiques
 Stratégie marketing digital
 Enregistrement du son et mixage
II. Contexte de stage

L'objectif au cours de ce stage est de concevoir et développer un projet défini par un site
web commercial de vente en ligne Amado avec le langage node.js et react.js.
3
Chapitre II: Specification des besoins
Introduction
La spécification et l’analyse des besoins constituent une étape essentielle et

importante dans le développement d’un système informatique. En effet, elle permet de
mieux comprendre le travail demandé en dégageant les besoins des différents
utilisateurs que le système doit accomplir.
I. Besoins fonctionnels
Les besoins fonctionnels se présentent en grandes parties
- Exposition des produits ainsi que leurs prix et caractéristiques.
- Inscription des clients.
- Ajout des produits choisis au panier.
- Confirmation de la commande.
II. Besoins non fonctionnels

 Ergonomie : notre application répondre à des normes ergonomiques : Interfaces
graphique conviviale, une application instructive pour la facilité d’utilisation.
 Sécurité
 Extensibilité : Le système doit être extensible afin que nous puissions ajouter à
tout moment autres fonctions.
 Sécurité l’application doit respecter la confidentialité des données, une
authentification est donc requise.
4
III. Méthodologie de conception :
Pour faciliter notre tâche nous avons recours au langage de modélisation unifié
(UML : Unified Modelling Language) c’est une notation qui permet de modéliser un
problème de façon standard. Ce langage est né de la fusion de plusieurs méthodes
existantes auparavant, et il est devenu une référence en termes de modélisation objet, à
un tel point que sa connaissance devienne indispensable pour un développeur.
IV. Les logiciels utilisés

• J’ai utilisé « Postman » pour teste le backend.
• J’ai choisi « Mongodb » comme base de données Mysql.
• Pour le développement de l’application web j’ai utilisé « Visual Studio Code»
Conclusion
Dans ce chapitre j’avais présenté les besoins fonctionnels et non fonctionnels de

l’application.
5
Chapitre III: Conception
Introduction
Après la spécification détaillée des principaux besoins, nous passons à l’étape de

conception qui permet de bien mener la phase d’implémentation.
I. Diagrammes de cas d’utilisation de notre site web
1. Diagramme de cas d’utilisation d’un visiteur
Avant de devenir client, un internaute ne possède que la possibilité de consulter le

catalogue des produits disponibles dans le stock du fournisseur et la possibilité de
s’inscrire pour devenir client sur notre site web.
Figure 2:Diagramme de cas d’un visiteur
6
2. Diagramme de cas d’utilisation d’un client
Figure 3:Diagramme de cas d’un client

Après l’inscription, le visiteur devient client. Il est donc apte de continuer toute une
procédure d’achat en ligne sur notre site.
3. Diagramme de cas d’utilisation du webmaster du site web
Figure 4:Diagramme de cas du webmaster du site web
Le terme webmaster de site web désigne communément celui qui est chargé
d'un site web. Il gère toute la mise en place technique et Parfois la mission éditoriale,
il doit gérer au jour le jour la technique et mettre à jour le contenu du site web.
7
Conclusion
Dans ce chapitre, j’avais essayé de bien présenter les différents diagrammes

conceptuels du projet. Ces diagrammes vont être la base sur laquelle j’avais réalisé mon
projet .Le chapitre suivant intitulé réalisation, nous permettrai de présenter l’environnement
matériel et logiciel de développement ainsi que des imprimes écrans détaillées de notre
application.
8
Chapitre VI : Réalisation
Introduction
Dans ce dernier chapitre de ce rapport à la partie réalisation, je vais présenter dans un

premier lieu l’environnement matériel et logiciel de développement et les outils de travail.
Par la suite, je vais décrivais la phase d’implémentation en se basant sur quelques interfaces.
I. Environnement de travail
1. Environnement matériel
Pour la réalisation du projet, j’ai utilisé un pc portable :
• Processor: AMD Ryzen 5 5600H with Radeon Graphics 3.30 GHz

• RAM : 12.0 GB
• System type : 64-bit operating system, x64-based processor
• Graphic Card : Nvidia Rtx 3050
2. Environnement logiciel et langage :

A. Environnement logiciel
Postman est une application permettant de tester des API, créée en 2012 par
Abhinav Asthana, Ankit Sobti et Abhijit Kane à Bangalore pour répondre à
une problématique de test d'API partageable.
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,
9
la mise en évidence de la syntaxe, la complétion intelligente du code, les
snippets, la refactorisation du code et Git intégrer.
Node.js est une plateforme logicielle libre en JavaScript, orientée vers
les applications réseau évènementielles hautement concurrentes qui
doivent pouvoir monter en charge.
MongoDB Compas est un client graphique pour MongoDB. Compas

se connecte à votre cluster MongoDB et présente deux onglets
Databases et Performance.
B. Environnement langage
L’HyperText Markup Langage, généralement abrégé HTML, est

le langage de balisage conçu pour représenter les pages web.
Les feuilles de style en cascade, généralement appelées CSS, forment

un langage informatique qui décrit la présentation des
documents HTML et XML
JavaScript est un langage de
programmation de scripts principalement employé dans les pages
web interactives mais aussi pour les serveurs2 avec l'utilisation
(par exemple) de Node.js et React.js.
Express.js est un framework pour construire des applications web basées sur
Node.js. C'est de fait le framework standard pour le développement de
serveur en Node.js
10
Mongoose est l'un des orms qui nous offre la possibilité d'accéder aux données Mongo avec
des requêtes faciles à comprendre. Mongoose joue un rôle d'abstraction sur votre modèle de
base de données.
II. Enchaînement des écrans

Interface Pour Visiteur
Figure 5:Interface Home pour visiteur
11
Figure 6: interface Shop pour veste le vision
Figure 7:page carte pour inspecter le panier
12
Figure 8:page Search pour rechercher un produit
Figure 9:page registre pour l’inscription de client
13
Figure 10:page login pour connecter sur le plateforme
Interface Pour Admin
Figure 11: page home pour viser le produit
14
Figure 12: Interface shop pour l’admin
Figure 13:Interface User pour gérer les client
15
Figure 14:interface ordres pour gérer les ordres
Figure 15: interface Product pour gérer le produit
16
Figure 16:Interface catégories pour gérer les catégories de produit
Figure 17:Interfaces cart pour gérer le panier (admin)
17
Figure 18:Interface Search pour chercher un produit
Interface Pour Utilisateur
Figure 19:Interface home pour naviguer les produits
18
Figure 20:Interface shop pour naviguer et ajouter des produits aux paniers
Figure 21:Interface ordres pour prévision la commande
19
Figure 22:Interface cart pour la panier du client
Figure 23:Interface Search pour rechercher un produit

Conclusion
Chapitre est consacré à la présentation de résultat du projet. J’avais décrit en premier

lieu les plates-formes matérielles et logicielles qui m'aide à construire l'application.
Finalement j’avais donné une vue d'ensemble sur le travail réalisé en donnant des captures
écrans et des explications concernant chaque interface.
20
Conclusion générale
Notre travail consiste à concevoir et à réaliser une application web permettant
essentiellement la gestion des artisans dans les différents domaines afin de satisfaire les désirs
des clients.
Ce projet nous a donné l’opportunité de travailler sur un sujet complet depuis la phase
de conception jusqu’à la phase de réalisation de l’application.
En effet, tout au long de cette période réservée au projet nous avons pu concevoir et
réaliser les différents modules pour répondre correctement aux exigences du sujet.
On peut conclure que le travail effectué, dans le cadre de ce projet de perfectionnement.
Nous avons développé des interfaces qui nécessitent une étude des différentes
techniques d’interfaçage en HTML, CSS java script.
A la fin de ce projet nous devons signaler que notre application n’était qu’un simple
essai afin de résoudre les problèmes qu’on a rencontré dans la gestion des tâches. Sa
réalisation est très intéressante car elle nous a permis de mettre en pratique des nouvelles
notions (Conception UML) et de nous familiariser avec le monde professionnel en touchant
de plus près la vie professionnelle.
21
Netographie
www.w3schools.com tutoriel ( JS , Bootstrap ) .

www.bootstrap.net documentation Bootstrap
www.stackoverflow.net forum des cours
www.github.com
22

Final-Rapport Kholoud

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Final-Rapport Kholoud

Transféré par

Droits d'auteur :

Formats disponibles

Ministère De L’enseignement Supérieur Et De La Recherche Scientifique

Direction Générale Des Études Technologiques

Réalisé par Organisme d’accueil Encadré par

Guezmil Ahmed ITGATE Hatem Diwani

Chapitre I : Cadre du stage....................................................................................................2

1. Présentation générale sur la société :.......................................................................2

2. Les départements et les services...............................................................................3

II. Contexte de stage.......................................................................................................3

Chapitre II : Spécification des besoins.......................................................................................4

II. Besoins non fonctionnels...........................................................................................4

III. Méthodologie de conception :...................................................................................4

IV. Les logiciels utilisés....................................................................................................5

Chapitre III: Conception.........................................................................................................6

I. Diagrammes de cas d’utilisation de notre site web.......................................................6

1. Diagramme de cas d’utilisation d’un visiteur.............................................................6

2. Diagramme de cas d’utilisation d’un client................................................................7

3. Diagramme de cas d’utilisation du webmaster du site web......................................7

2. Environnement logiciel et langage :.........................................................................9

II. Enchaînement des écrans..............................................................................................11

Figure 1:Emplacement géographique de la société ITGAT.......................................................2

IT Gate est un groupe de Développement de Logiciels et de Services

Figure 1:Emplacement géographique de la société ITGAT

Développement Web et Mobile

Référencement, Infogérance et Réseaux.

Formation, Systèmes Embarqués.

Web Développement et Mobile Développement

2. Les départements et les services

II. Contexte de stage

La spécification et l’analyse des besoins constituent une étape essentielle et

II. Besoins non fonctionnels

IV. Les logiciels utilisés

• J’ai choisi « Mongodb » comme base de données Mysql.

• Pour le développement de l’application web j’ai utilisé « Visual Studio Code»

Dans ce chapitre j’avais présenté les besoins fonctionnels et non fonctionnels de

Après la spécification détaillée des principaux besoins, nous passons à l’étape de

I. Diagrammes de cas d’utilisation de notre site web

1. Diagramme de cas d’utilisation d’un visiteur

Avant de devenir client, un internaute ne possède que la possibilité de consulter le

Figure 2:Diagramme de cas d’un visiteur

Figure 3:Diagramme de cas d’un client

3. Diagramme de cas d’utilisation du webmaster du site web

Figure 4:Diagramme de cas du webmaster du site web

Dans ce chapitre, j’avais essayé de bien présenter les différents diagrammes

Dans ce dernier chapitre de ce rapport à la partie réalisation, je vais présenter dans un

• Processor: AMD Ryzen 5 5600H with Radeon Graphics 3.30 GHz

2. Environnement logiciel et langage :

Visual Studio Code est un éditeur de code extensible

MongoDB Compas est un client graphique pour MongoDB. Compas

L’HyperText Markup Langage, généralement abrégé HTML, est

Les feuilles de style en cascade, généralement appelées CSS, forment

II. Enchaînement des écrans

Figure 5:Interface Home pour visiteur

Figure 7:page carte pour inspecter le panier

Figure 9:page registre pour l’inscription de client

Interface Pour Admin

Figure 11: page home pour viser le produit

Figure 13:Interface User pour gérer les client

Figure 15: interface Product pour gérer le produit

Figure 17:Interfaces cart pour gérer le panier (admin)

Interface Pour Utilisateur

Figure 19:Interface home pour naviguer les produits

Figure 21:Interface ordres pour prévision la commande

Figure 23:Interface Search pour rechercher un produit