Version Finale Du Rapport de Stage D'ingénieur

RAPPORT DE STAGE D'INGÉNIEUR
ORGANISME D’ACCUEIL
RÉALISÉ PAR :
AYA AMDOUNI
ICHRAK SOUSSI
Développement d’une application de gestion avec un

système de point de vente (POS) pour Taleen
ENCADRÉ PAR :
MME. SIRINE OMRANI
MR. MOHAMED MESKINE
SUPERVISÉ PAR :
MR. DHAOU BERCHECH
ANNÉE UNIVERSITAIRE: 2023-2024

Remerciement
Nous tenons à exprimer notre sincère gratitude envers toutes les personnes qui
ont contribué à la réussite de notre stage au sein de l'organisme d'accueil. Cette
expérience a été particulièrement enrichissante, et nous souhaitons exprimer
notre reconnaissance à ceux qui ont rendu cela possible.
Tout d'abord, nous adressons nos remerciements à Mme. Sirine Omrani, notre
encadrante, pour son précieux soutien, ses conseils avisés et sa disponibilité tout
au long de notre stage. Ses orientations ont grandement contribué à notre
développement professionnel, et nous sommes reconnaissants pour l'opportunité
qu'elle nous a offerte.
Nous tenons également à exprimer notre gratitude envers Mr. Mohamed

Meskine, qui a partagé son expertise avec nous et nous a guidés dans la
réalisation de nos missions. Sa patience et sa bienveillance ont été d'une grande
aide pour nous.
Nous adressons nos remerciements à Mr. Dhaou Berchech, qui a supervisé notre
travail et nous a fourni un cadre favorable à l'apprentissage. Sa confiance en nos
capacités nous a motivés à donner le meilleur de nous-mêmes.
Ce stage a été une expérience précieuse qui a contribué de manière significative

à notre formation d'ingénieur. Nous sommes reconnaissants envers tous ceux qui
ont fait partie de cette aventure et qui nous ont permis d'acquérir de nouvelles
compétences et connaissances.
1
TABLE DES MATIÈRES
Liste des figures......................................................................................................... 3
Liste des tables...........................................................................................................4
Introduction Générale.............................................................................................................. 5
Chapitre I. Contexte générale du projet................................................................................. 6
I.1 Introduction......................................................................................................................6
I.2 Présentation de l’entreprise..............................................................................................6
I.2.1 Présentation.............................................................................................................6
I.2.2 Les services.............................................................................................................6
I.3 Choix de la méthodologie................................................................................................7
I.4 Etude de l’existant........................................................................................................... 7
I.4.1 Etude actuelle du projet........................................................................................ 10
I.4.2 Etude concurrentielle............................................................................................ 12
Chapitre II. Etude conceptuelle............................................................................................. 13
II.1 Introduction.................................................................................................................. 13
II.2 Arborescence du projet.................................................................................................13
II.3 Présentation de la conception logicielle...................................................................... 14
I.3.1 Spécification des acteurs.......................................................................................15
I.3.2 Le diagramme de cas d’utilisation........................................................................16
I.3.3 Le diagramme des classes.....................................................................................27
II.5 Conclusion...................................................................................................................27
Chapitre III. Réalisation et résultats...................................................................................28
III.1 Introduction................................................................................................................28
III.2 Environnement logiciel............................................................................................... 29
III.3 Réalisations et validation............................................................................................ 30
III.3.1 Interface d’authentification................................................................................ 30
III.3.2 Dashboard Admin.............................................................................................. 30
III.3.2 Dashboard de la secrétaire................................................................................. 33
III.3.2 Dashboard du technicien....................................................................................34
Conclusion générale................................................................................................ 36
LISTE DES FIGURES
Figure 1 - Diagramme de cas d’utilisation générale

Figure 2 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer les employés»
Figure 3 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer les fournisseurs»
Figure 4 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer les clients»
Figure 5 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer le stock des ventes»
Figure 6 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer le stock d’achats»
Figure 7 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer la production»
Figure 8 - Diagramme de classe
Figure 9 -Interface d’authentification
Figure 10-Dashboard admin
Figure 11 - Interface d’achat
Figure 12 - Interface de vente
Figure 13 - Interface de gestion des employés
Figure 14 - Interface des clients
Figure 15 - Interface des fournisseurs
Figure 16 - Interface de Code Pin
Figure 17 - Interface de gestion de stock MP
Figure 18 - Interface de gestion de stock de vente
Figure 19 - Interface de gestion des formules de fabrication
3
LISTE DES TABLES
Tableau 1: Diagramme de cas d’utilisation générale

Tableau 2:Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer les
employés»
Tableau 3 - Description du cas d’utilisation « Gérer les clients»
Tableau 4 - Description du cas d’utilisation « Réinitialiser le mot de passe»
Tableau 5 - Description du cas d’utilisation « Faire des achats»
Tableau 6 - Description du cas d’utilisation « Gérer les ventes via le POS»
Tableau 7 - Description du cas d’utilisation « Gérer le stock des ventes»
Tableau 8 - Description du cas d’utilisation « Gérer le stock d’achats»
Tableau 9 - Description du cas d’utilisation « Gérer la production»
4
Introduction générale
Le stage constitue une étape cruciale dans le parcours académique et professionnel de

tout étudiant. Il offre une opportunité unique de mettre en pratique les connaissances acquises
en classe, d'explorer le monde du travail, et d'acquérir une expérience concrète au sein d'une
organisation. Dans ce rapport, nous présentons une synthèse complète et réfléchie de notre
stage effectué au sein de Ilef Info services , qui s'est déroulé du 03/07/2023 au 03/09/2023.
Durant cette période, nous avons eu l'occasion d'intégrer une équipe dynamique et compétente.
Notre stage s'inscrit dans le cadre de notre formation académique et a pour objectif principal
d'acquérir une expérience pratique dans le domaine du développement web ainsi que de
contribuer activement aux projets et aux activités de l'entreprise.
Pour la réalisation de notre projet au sein de Ilef Info Services, nous avons choisi d'utiliser
l’ensemble de technologies modernes MERN, qui englobe MongoDB, Express.js, React.js, et
Node.js. Ces technologies sont devenues populaires dans le développement web pour leur
flexibilité, leur évolutivité, et leur capacité à fournir des solutions robustes et performantes.
L'utilisation de l'ensemble MERN a grandement contribué à notre succès dans la réalisation de
ce projet. Ces technologies modernes nous ont offert un environnement de développement
puissant, nous permettant de créer une application web performante et évolutive en tirant parti
des avantages de chacune des composantes de cet ensemble.
Ce rapport est structuré en plusieurs chapitres, chacun abordant un aspect spécifique de notre
expérience.
Le premier chapitre, intitulé "Contexte général du projet", offre une vue d'ensemble de
l'entreprise Ilef infoservices, de ses services, de la méthodologie adoptée pour le projet, ainsi
que des outils essentiels qui ont guidé notre travail.
Le deuxième chapitre, "Étude conceptuelle", plonge au cœur de la conception de notre projet
en détaillant l'architecture, les fonctionnalités et les interactions de l'application que nous
avons développée. Vous y trouverez une analyse approfondie des différentes composantes du
projet.
Le troisième chapitre, "Réalisations et résultats", décrit en détail les étapes de réalisation du
projet, les défis rencontrés, les solutions apportées, et les résultats obtenus.
Enfin, la conclusion générale de ce rapport résume les principaux enseignements tirés de mon
stage et met en évidence l'importance de cette expérience dans mon développement
professionnel.
Ce stage a été une expérience enrichissante, et nous espérons que ce rapport saura rendre
compte de manière fidèle de notre engagement et de notre contribution au sein de l'entreprise.
5
Chapitre 1 : Contexte général du projet
I. Introduction
Au cœur de toute initiative technologique réussie se trouve une compréhension approfondie
du contexte dans lequel elle prend forme. Dans ce chapitre inaugural, nous plongerons dans le
paysage qui a engendré notre projet, en mettant en lumière l'entreprise mère, ses valeurs, ses
services, ainsi que la méthodologie et les outils qui guideront notre parcours de
développement.
II. Présentation de l’entreprise

1. Présentation
DB CONSULTING est une société de service et d’ingénierie en informatique, fondée le 13

janvier 2020, experte dans le domaine des nouvelles technologies et de l’informatique, offrant
des solutions uniques et exceptionnelles à ses clients afin d’atteindre leurs objectifs d’affaires.
6
ILEF INFO SERVICES est une startup tunisienne filiale du groupe DB consulting basée à
Médenine, spécialisée dans le domaine des nouvelles technologies misant sur l’innovation et
l’expertise et qui s’engage à garantir la satisfaction de ses clients.
2. Les services
DB CONSULTING Group & Ilef Info Services offrent une diversité de services et
fonctionnalités à leurs clients comme le montre le tableau ci-dessous :
Pilotage Coaching agile et gouvernance - Gestion

de produit
Orientation utilisateur (User centric Framework agile (Scrum, Kanban...)

focus)
Traitement des données (Data Gestion des données

processing) Ingénierie des données
Analyse des données
Ingénierie Software, développement Web et Mobile

Gestion des API
Marketing numérique Branding SEO, SEA…
Gestion des talents Externalisation - Autonomisation des

talents
Recherches scientifiques - Virtuelle, réalité augmentée, Internet des

objets
Solutions Cloud AWS, Azure, Google Cloud…
Tableau1- Les différents services de l’entreprise.
3. Organigramme
L'organisation de DB CONSULTING France est représentée par la hiérarchie décrite
par l’organigramme illustré ci-dessus.
7
4. Phase apprentissage
Pendant cette phase, nous avons pu approfondir nos compétences en développement web en
travaillant avec les technologies MERN. Voici quelques-unes des compétences et des
connaissances que nous avons acquises:
MongoDB: Nous avons appris à concevoir des bases de données NoSQL efficaces pour
stocker et gérer les données liées au système de point de vente.
Express.js: Nous avons acquis une compréhension approfondie de la création d'API RESTful
robustes et sécurisées pour interagir avec la base de données MongoDB.
React.js: Nous avons développé des interfaces utilisateur modernes et réactives pour
l'application de gestion, en utilisant des composants réutilisables et des pratiques de gestion de
l'état.
Node.js: Nous avons travaillé sur le côté serveur de l'application en utilisant Node.js, en
mettant en œuvre des fonctionnalités essentielles et en assurant la communication fluide entre
le serveur et le client.
8
III. Choix de la méthodologie
Le choix de la méthodologie pour la réalisation de ce stage s'est orienté vers l'approche agile,
avec une mise en œuvre spécifique du framework Scrum. Cette décision découle de la nature
dynamique et collaborative du projet, ainsi que de son caractère évolutif.
1. Approche agile
L'approche Agile est une méthodologie de gestion de projet qui se caractérise par sa flexibilité
et son adaptabilité aux changements. Elle repose sur des cycles itératifs et incrémentiels,
permettant ainsi de diviser le projet en phases plus courtes appelées "itérations" ou "sprints".
Chaque itération produit un résultat partiel fonctionnel, favorisant ainsi une livraison continue
de valeur. L'Agile met l'accent sur la collaboration étroite entre les membres de l'équipe, la
communication transparente et le partage régulier d'informations.
L'objectif ultime de l'approche Agile est d'obtenir des résultats concrets plus rapidement, tout
en répondant de manière efficace aux évolutions des besoins et aux priorités changeantes du
projet.
2. Équipe du projet
Le framework Scrum est une approche de gestion de projet agile que nous avons adoptée pour
notre projet de développement d'une application de gestion avec un système de point de vente
(POS) pour Taleen. Scrum repose sur des valeurs, des piliers et des rôles clés qui favorisent
une collaboration efficace et une livraison incrémentielle de produits de haute qualité. Les
valeurs fondamentales de Scrum, qui guident notre travail au quotidien, sont la transparence,
l'inspection, l'adaptation et le courage.
Dans le cadre de notre projet Scrum, nous avons défini trois rôles principaux:
Product owner Taleen
Scrum master Dhaou BERCHECH
Équipe de développement Syrine OMRANI : PO & SM & Testeur

Mohamed Meskine : Tech Lead
ichrak souissi : Développeur Front
Aya Amdouni : Développeur Back
Tableau 2- L’équipe du projet.
9
3. Planification du projet
Le cycle de vie d'un projet Scrum se déroule à travers des itérations appelées "sprints". Voici
un résumé succinct de ce cycle :
Backlog de produit: Création d'une liste priorisée des fonctionnalités à développer et à
améliorer, gérée par le Product Owner en fonction des besoins et des retours des parties
prenantes.
Planification de sprint: Réunion où le Product Owner présente les éléments prioritaires du
backlog, et l'équipe de développement décide de ce qu'elle livrera pendant le sprint. Les tâches
sont décomposées, et le temps nécessaire est estimé.
Sprint: Période de travail intensif (1 à 4 semaines) pendant laquelle l'équipe développe les
fonctionnalités définies. Les tests et l'intégration sont continus pour assurer la qualité.
Réunions quotidiennes : Réunions quotidiennes pour partager les progrès, les plans et les
obstacles.
Revues de sprint: Réunion à la fin du sprint où l'équipe présente les fonctionnalités terminées
pour recevoir des commentaires des parties prenantes.
Rétrospectives de sprint : Réunion pour réfléchir sur le sprint, identifier les améliorations et
définir des actions pour le prochain sprint.
Itérations continues: Le cycle recommence avec la planification d'un nouveau sprint, jusqu'à
ce que le produit atteigne ses objectifs ou les exigences du projet soient satisfaites.
10
Ceci est un résumé explicatif du déroulement de notre projet:
figure 1- Planification du projet.
Sprint 1: Page de connexion + 1ère interface admin
– Préparation de l'environnement de développement

– Développement de la page d’authentification ( front & back )
– Corriger et ajouter le mode light/dark
– Ajouter les champs de vérification sur les champs de connexion
– Avancer sur le travail demandé et la partie d’achats (front & back)
– Correction et finalisation des tâches
Sprint review + Sprint rétrospective
Sprint 2: Dashboard admin
– Terminer l’interface d’achat pour l’admin.

– Commencer la partie de POS pour les achats.
– Travailler sur le front et le back en parallèle.
– Terminer le POS d’achats (front & back).
11
– Commencer la première interface de ventes.
– Terminer le POS de ventes (front & back )
– Avancer sur la gestion des comptes
Sprint 3: Finaliser le Dashboard admin et secrétaire
– Ajouter les tableaux d’historiques sur les achats et les ventes

– Développer la partie de gestion des stocks
– Correction des bugs
– Préparer le Dashboard de la secrétaire
– Développer l’interface de deuxième authentification (code PIN) de la secrétaire
– Le Dashboard Admin pour la visualisation des statistiques
Sprint 4: Corriger et terminer le Dashboard admin, secrétaire et technicien
– Faire la liaison entre les différentes parties du Dashboard

– Terminer le Dashboard Admin
– Finaliser toutes les interfaces de secrétaire, technicien et Admin
Tableau 3 - Planification du projet.
4. Les logiciels utilisés

Dans le cadre de notre projet, nous avons utilisé plusieurs outils essentiels pour assurer une
gestion efficace du projet et une collaboration transparente au sein de l'équipe. Voici un aperçu
de ces outils utilisés pour notre projet :
Jira :
Jira est l'un de nos piliers pour la gestion de projet. Il nous permet de suivre les tâches, les
fonctionnalités et les problèmes spécifiques à notre projet. Grâce à Jira, nous gérons notre
backlog de produit, qui contient les tâches et les améliorations prioritaires pour notre
application de gestion. De plus, nous pouvons suivre visuellement la progression, identifier les
points de blocage et assigner des responsables à chaque élément, ce qui garantit une gestion
transparente de nos activités.
12
Confluence :
Confluence est notre plateforme de collaboration et de documentation. En tant qu'équipe de

développement, nous l'utilisons pour créer, organiser et partager des documents essentiels
pour notre projet. La simplicité d'utilisation de Confluence nous permet de collaborer
efficacement en créant des pages riches en contenu pour expliquer des concepts complexes de
manière claire.
GitLab :
GitLab est notre plateforme de gestion de code source, essentielle pour le développement
collaboratif et la gestion efficace de notre code. Dans le cadre de notre projet, nous avons
bénéficié de ses avantages tels que la gestion de version collaborative, le suivi complet des
historiques des modifications et la collaboration transparente entre les équipes de
développement et les parties prenantes.
Ces outils ont joué un rôle essentiel dans le succès de notre projet, en nous permettant de
gérer efficacement les tâches, de documenter nos progrès et de collaborer de manière
transparente pour atteindre nos objectifs.
IV. Etude de l'existant

1. Etude actuel du projet
Dans le contexte du projet, Taleen se distingue par sa transition réussie vers un système
informatisé de gestion. La société utilise une application de gestion avec système de Point de
Vente (POS) pour optimiser ses opérations commerciales. Grâce à cette solution, Taleen a déjà
relevé un certain nombre d'avantages significatifs :
● Efficacité Opérationnelle : L'application permet à Taleen d'automatiser et d'accélérer

ses processus, réduisant ainsi le temps nécessaire pour effectuer des transactions, gérer
les stocks et interagir avec les partenaires commerciaux.
13
● Précision et traçabilité : La solution informatisée garantit une traçabilité précise des
ventes, des revenus et des stocks, éliminant les erreurs humaines potentielles liées à la
saisie manuelle d'informations.
● Analyse et prise de décision : Taleen peut générer rapidement des rapports détaillés sur
les performances commerciales, ce qui facilite la prise de décision éclairée grâce à une
visibilité en temps réel sur les indicateurs clés.
● Sécurité des Données : L'application offre des mesures de sécurité avancées pour
protéger les données, réduisant ainsi le risque de pertes ou d'accès non autorisés.
● Collaboration facilitée : Les échanges avec les employés, les fournisseurs et les clients
sont optimisés grâce à des outils de communication intégrés dans l'application.
2. Etude concurrentielle
Tandis que de nombreuses sociétés du secteur opèrent encore avec des méthodes manuelles et
des outils traditionnels pour gérer leurs opérations commerciales, Taleen se distingue en ayant
déjà mis en place un système informatisé de gestion, en l'occurrence une application de
gestion avec système de Point de Vente (POS). Cette transition vers un système informatisé a
permis à Taleen de résoudre certains des problèmes majeurs auxquels les sociétés utilisant des
outils traditionnels font face.
Notre application de gestion de stock, Taleen, et Zoho Inventory sont deux solutions
puissantes pour la gestion efficace des stocks, chacune offrant des fonctionnalités uniques
pour répondre aux besoins de gestion d'entreprise.
Ci-dessous, nous avons analysé certains des aspects clés qui permettent de comparer les deux
applications :
14
Nom du site Taleen Zoho Inventory
Logo
Comparaison -Taleen se distingue par son interface -Zoho Inventory propose également
utilisateur intuitive qui facilite la une interface utilisateur conviviale,
navigation et l'utilisation, même pour les mais certains utilisateurs ont noté
utilisateurs novices. La mise en place de une légère courbe d'apprentissage
notre application ne nécessite que peu de lors de la configuration initiale.
formation.
-Zoho Inventory propose une
-Notre application met l'accent sur la gamme étendue de fonctionnalités,
personnalisation des flux de travail, notamment la gestion des ventes,
permettant aux utilisateurs de créer des des achats, des expéditions, et une
processus adaptés à leurs besoins comptabilité intégrée. Cependant,
spécifiques. Il offre également une gestion certaines fonctionnalités peuvent
complète des employés, des clients, des sembler plus complexes pour les
fournisseurs et des stocks d’achats et de petites entreprises.
ventes
-Contient des fonctionnalités
-La solution informatisée garantit une d'historique des achats et des ventes
précision accrue des données et une qui sont essentielles pour une
traçabilité précise des achats et des ventes, gestion efficace de l'inventaire et
permettant une prise de décision éclairée des finances.
basée sur des informations précises.
Tableau 4 - Comparaison entre Taleen et Zoho Inventory.
V. Conclusion
En conclusion de ce premier chapitre, nous avons jeté les bases essentielles pour la
compréhension de notre projet au sein de la société d'accueil. Nous avons présenté la société,
exposé la description du projet, et clairement défini les principaux objectifs à atteindre.
Maintenant, pour progresser efficacement vers la réalisation de notre solution, nous entamons
une étape essentielle pour garantir une compréhension solide de notre projet avant de passer à
sa mise en œuvre: l'étude conceptuelle.
15
Nous allons établir une arborescence du projet pour une meilleure visualisation de sa
structure. Nous allons ensuite aborder la conception logicielle de manière approfondie, en
spécifiant les acteurs qui interagissent avec notre système. Puis présenter les différents
diagrammes permettant de mettre en évidence les interactions entre ces acteurs et le système.
Cette phase revêt une importance capitale, car elle nous permettra d'acquérir une vision
d'ensemble des interfaces existantes et des tâches qui nous attendent. Nous nous assurons de
suivre une voie claire et méthodique vers la réalisation de nos objectifs.
16
Chapitre 2 : Etude conceptuelle
I. Introduction
Le chapitre qui suit nous plonge au cœur de la conception de notre projet, en explorant
l'arborescence détaillée de l'application que nous avons développée. Chaque élément de
l'interface, chaque fonctionnalité et chaque interaction sont soigneusement décrits, mettant en
lumière les rôles des différents acteurs au sein de l'application. Ce chapitre offre une vue
complète et systématique de la manière dont l'application est structurée et comment elle
fonctionne.
II. Arborescence du projet

Le projet de développement de l'application de gestion avec un système de Point de Vente (POS) pour
Taleen :société spécialiste dans la fabrication et la vente de produits de nettoyage.
Trois acteurs principaux interagiront avec l'application après une authentification, chacun avec des
rôles clairement définis :
Administrateur qui a un rôle crucial en supervisant l'ensemble de l'entreprise via son espace.
Secrétaire et technicien qui auront une limitation d’accès sur certaines interfaces avec une deuxième
authentification par un code PIN.
Le schéma ci-dessus représente un vue globale de l’arborescence du projet:
17
III. Présentation de la conception logicielle
La conception logicielle, une étape cruciale dans le processus de développement
d'applications, transforme les idées en une réalité concrète. Son objectif premier est de définir
l'architecture, la structure et les interactions au sein du système. Dans cette section, nous
aborderons les acteurs majeurs qui ont contribué au projet, ainsi que les diagrammes de
classe, de cas d'utilisation et de séquences qui ont servi de fondations à notre conception.
1. Spécification des acteurs
L'application vise à servir trois principaux acteurs au sein de Taleen :
Administrateur : L'administrateur sera chargé de superviser l'ensemble de la société

grâce à un espace dédié. Il pourra accéder aux historiques de ventes et d’achats, gérer
les employés, les fournisseurs, les clients, ainsi que suivre les stocks de ventes et
d’achats et gérer les formules de production.
18
Secrétaire : La secrétaire peut gérer le stock d’achat et doit passer par une double
authentification pour gérer les ventes via le POS.
Technicien : Le technicien peut consulter le stock d'achats et doit passer par une
double authentification pour consulter les formules de production.
2. Diagrammes de cas d’utilisation

Le diagrammes ci-dessous permet de représenter les différentes cas d’utilisation de
l’application ainsi que les acteurs qui y participent.
Figure 1 - Diagramme de cas d’utilisation général
19
2.1 Les diagrammes de cas d’utilisation détaillés et leurs scénarios
Figure 2 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer les employés»
Tableau 1 - Description du cas d’utilisation « Gérer les employés »
Titre Gérer les employés
Acteur Admin
Pré condition L’admin est authentifié
Post condition L’admin peut gérer les employés
Scénario nominal 1) L’admin peut choisir un employé du tableau

pour le modifier ou le supprimer, ou il peut
cliquer sur le bouton "Ajouter" pour en publier
un nouveau.
2) Si l'admin choisit de modifier un employé, le
système affiche le formulaire de modification.
3) L'admin peut modifier les informations de
l'employé et valider les changements.
4) Si l'admin choisit de supprimer un employé
existant, le système supprime l’employé
5) Si l'utilisateur choisit d'ajouter un employé, le
système affiche le formulaire vide d'ajout
d'employé.
6) L'admin remplit le formulaire avec les
informations nécessaires.
7) L’admin valide l'ajout de l'employé..
8) Le système enregistre les modifications, les
suppressions et les ajouts dans la base de
données
Scénario alternatif 3.1) Le système détecte une erreur dans les

informations saisies.
3.2) Le système affiche un message d'erreur
indiquant le problème.
20
3.3) L'admin corrige les informations erronées.
6.1) Le système détecte une erreur dans les
informations saisies.
Figure 3 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer les fournisseurs»
Tableau 2 - Description du cas d’utilisation « Gérer les fournisseurs »
Titre Gérer les fournisseurs
Acteur Admin
Post condition L’admin peut gérer les fournisseurs
Scénario nominal 1) L’admin peut choisir un fournisseur du

tableau pour le modifier ou le supprimer, ou il
peut cliquer sur le bouton "Ajouter" pour en
publier un nouveau.
2) Si l'admin choisit de modifier un fournisseur,
le système affiche le formulaire de modification.
21
3) L'admin peut modifier les informations du
fournisseur et valider les changements.
4) Si l'admin choisit de supprimer un fournisseur
existant, le système supprime le fournisseur.
5) Si l'utilisateur choisit d'ajouter un fournisseur,
le système affiche le formulaire vide d'ajout
d’un fournisseur.
7) L’admin valide l'ajout du fournisseur.
données
Figure 4 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer les clients»
Tableau 3 - Description du cas d’utilisation « Gérer les clients»
Titre Gérer les clients
Acteur Admin
Post condition L’admin peut gérer les clients
22
Scénario nominal 1) L’admin peut choisir un client du tableau pour
le modifier ou le supprimer, ou il peut cliquer sur
le bouton "Ajouter" pour en publier un nouveau.
2) Si l'admin choisit de modifier un client, le
3) L'admin peut modifier les informations du
client et valider les changements.
4) Si l'admin choisit de supprimer un client
existant, le système supprime le client.
5) Si l'admin choisit d'ajouter un client, le
d’un client.
7) L’admin valide l'ajout du client.
données
Tableau 4 - Description du cas d’utilisation « Réinitialiser le mot de passe»
Titre Réinitialiser le mot de passe
Acteur Utilisateur
Système
Pré condition L’utilisateur a un compte enregistré dans le

système.
Post condition Le mot de passe est réinitialisé et mis à jour dans

la base de données.
Scénario nominal 1)L'utilisateur accède à la page de réinitialisation

de mot de passe.
2)Le système affiche un champ pour que
l'utilisateur saisisse son adresse email.
3)L'utilisateur saisit son adresse email et soumet
le formulaire.
3)Le système génère un code de vérification
unique et l'envoie sous forme d’un lien à
l'adresse email de l'utilisateur.
4)L'utilisateur ouvre le lien de vérification et il
sera amené à un interface pour saisir un nouveau
mot de passe
5)L'utilisateur saisit un nouveau mot de passe 2
fois pour la confirmation.
6)Le système met à jour le mot de passe de
l'utilisateur dans la base de données.
Scénario alternatif 3.1) Le système détecte une erreur dans

l’adresse mail saisie.
23
5.1) Le système détecte une erreur dans les
mot de passe saisies.
Tableau 5 - Description du cas d’utilisation « Gérer les bordereaux d’achats»
Titre Gérer les bordereaux d’achats
Acteur Admin
Système
Pré condition L’admin a un compte enregistré dans le système.
Post condition L’admin peut faire des achats
Scénario nominal 1)L'admin accède à l’interface d’achats.

2)Le système affiche les fournisseurs
disponibles.
3)L'utilisateur sélectionne un fournisseur.
4)Le système affiche les catégories de produits
disponibles pour le fournisseur sélectionné.
5)L'utilisateur choisit une catégorie de produits.
6)Le système affiche une liste de produits dans
la catégorie sélectionnée.
7)L'utilisateur sélectionne un ou plusieurs
produits pour générer leur bordereaux d’achats.
8)Le système ajoute l’achat au tableau des
historiques d’achats.
Tableau 6 - Description du cas d’utilisation « Gérer les ventes via le POS»
Titre Gérer les ventes via le POS
Acteur Admin
Secrétaire
Système
24
Pré condition L’utilisateur a un compte enregistré dans le
système.
Post condition L’utilisateur peut gérer les ventes via le POS
Scénario nominal 1)L'utilisateur (secrétaire ou admin) accède à

l'interface de gestion des ventes sur le POS.
2)Le système affiche une liste de catégories de
produits disponibles.
3)L'utilisateur sélectionne une catégorie parmi la
liste.
4)Si c'est le secrétaire, le système demande au
secrétaire de saisir son code PIN pour accéder
aux fonctionnalités de vente.
5)le secrétaire saisit son code PIN.
6)Si c'est le secrétaire, le système vérifie le code
PIN et autorise l'accès si le code est correct.
7)Le système affiche une liste de produits dans
la catégorie sélectionnée.
8)L'utilisateur choisit un ou plusieurs produits à
vendre en les ajoutant à la liste de vente.
9)L'utilisateur confirme la liste de produits à
vendre en cliquant sur payer.
10)L'utilisateur indique le montant reçu de
l'acheteur.
11)L'utilisateur sélectionne le mode de paiement
parmi les options disponibles (espèces, carte
bancaire).
12)L'utilisateur indique si le client demande une
livraison avec transport ou non.
13)Le système affiche un reçu de paiement
Le système enregistre la vente dans le tableau
des historiques de ventes.
Scénario alternatif 5.1) Le système détecte une erreur dans le code

PIN saisi.
5.3) La secrétaire corrige le code PIN.
10.1) Le système détecte que le montant reçu est
inférieur au montant à payer.
10.3) L'utilisateur corrige les informations
erronées.
25
Figure 5 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer le stock des ventes»
Tableau 7 - Description du cas d’utilisation « Gérer le stock des ventes»
Titre Gérer le stock des ventes
Acteur Admin
Post condition L’admin peut gérer le stock des ventes
Scénario nominal 1)L'admin accède à l'interface de stock.

2) L’admin choisit le stock de vente.
3) L’admin peut choisir un produit du tableau
pour le modifier ou le supprimer, ou il peut
cliquer sur le bouton "Ajouter" pour en publier
un nouveau.
4) Si l'admin choisit de modifier un produit, le
5) L'admin peut modifier les informations d’un
produit et valider les changements.
6) Si l'admin choisit de supprimer un produit
existant, le système supprime ce produit.
7) Si l'admin choisit d'ajouter un produit, le
d’un produit.
26
9) L’admin valide l'ajout du produit.
données.
Figure 6 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer le stock d’achats»
Tableau 8 - Description du cas d’utilisation « Gérer le stock d’achats»
Titre Gérer le stock d’achats
Acteur Admin
Secrétaire
Pré condition L’utilisateur est authentifié
Post condition L’utilisateur peut gérer le stock d’achats
Scénario nominal 1)L'utilisateur accède à l'interface de stock.

2) L’utilisateur choisit le stock d’achats.
3) L’utilisateur peut choisir un produit du
tableau pour le modifier ou le supprimer, ou il
peut cliquer sur le bouton "Ajouter" pour en
publier un nouvel achat.
4) Si l'utilisateur choisit de modifier un achat, le
27
5) L'utilisateur peut modifier les informations
d’un achat et valider les changements.
6) Si l'utilisateur choisit de supprimer un produit
existant, le système supprime cet achat.
7) Si l'admin choisit d'ajouter un achat, le
système affiche le formulaire vide d'ajout.
8) L'utilisateur remplit le formulaire avec les
9) L’admin valide l'ajout d’achat.
données.
Figure 7 - Diagramme de cas d’utilisation raffiné du cas d’utilisation «gérer la production»
Tableau 9 - Description du cas d’utilisation « Gérer la production»
Titre Gérer la production
Acteur Admin
Pré condition L’utilisateur est authentifié
Post condition L’utilisateur peut gérer la production
Scénario nominal 1)L'utilisateur accède à l'interface de production.

2)Le système affiche les catégories des produits.
3) L’utilisateur choisit une catégorie.
28
4)Le système affiche un tableau des formules.
5) L’admin peut choisir de modifier une formule
ou il peut cliquer sur le bouton "Ajouter" pour
en publier une nouvelle formule.
6) Si l'admin choisit de modifier une formule, il
doit cliquer sur le bouton mettre à jour pour
enregistrer les modifications.
7) Si l'admin choisit d'ajouter une formule, le
système affiche une case vide d'ajout.
8) L'admin remplit la case puis il clique sur le
bouton mettre à jour pour l’enregistrer.
9) Le système enregistre les modifications et les
ajouts dans la base de données.
3. Diagramme des classes
Figure 8 - Diagramme des classes
29
III. Conclusion
En conclusion, ce chapitre a servi de toile de fond détaillée pour la suite de notre travail. Nous avons
posé les fondations conceptuelles et fonctionnelles essentielles à la mise en œuvre de notre application.
À partir de cette base solide, nous sommes prêts à passer à la phase de développement, armés de
connaissances claires sur les fonctionnalités, les interactions et les flux de notre application.
30
Chapitre 3 : Réalisations et résultats
I. Introduction
Dans ce chapitre, nous explorerons le stack technologique MERN (MongoDB, Express.js, React,
Node.js) que nous avons sélectionné pour la création de l'application de gestion avec un système de
Point de Vente (POS) destinée à Taleen. Ce choix s'est fait dans le but d'exploiter les avantages offerts
par ce stack basé sur JavaScript. Nous plongerons dans les composants clés du frontend, du backend et
de la base de données, tout en mettant en évidence les outils essentiels tels que Postman, GitLab et
Docker qui ont facilité le développement, les tests et la gestion du code. Enfin, nous aborderons les
réalisations concrètes de cette phase, mettant en lumière les résultats obtenus et la validation de nos
choix technologiques.
II. Environnement logiciel

Nous avons choisi le stack technologique MERN (MongoDB, Express.js, React, Node.js) pour le
développement de l'application de gestion avec un système de Point de Vente (POS) pour Taleen.
31
Frontend Backend Base de donnés
NodeJs :
React : MongoDB :
C’est un environnement
C’est une bibliothèque de d'exécution open-source qui L'intégration de MongoDB comme système
construction d'interfaces permet de créer toutes sortes de gestion de base de données NoSQL
utilisateur garantissant une d’applications et outils côté permet de stocker et de gérer des données de
expérience utilisateur réactive et serveur en Javascript.
divers formats, ce qui est crucial pour une
interactive. application de gestion aux besoins variés.
Express.js : Le framework
Express.js facilitera la création
de routes et de services web,
accélérant ainsi le
développement des
fonctionnalités back-end
essentielles.
Test Gestion de code Dockerisation
Postman : Gitlab : Docker :
Parmi les nombreuses solutions pour Nous avons privilégié GitLab en tant que Dans notre projet, Docker a
interroger ou tester webservices et plateforme de gestion de code et de joué un rôle essentiel en
collaboration pour notre projet. Cette simplifiant le déploiement et la
API, Postman propose de
solution a permis d'héberger notre code gestion de l'application.
nombreuses fonctionnalités, une Docker est une plateforme
prise en main rapide et une interface source et d'optimiser la collaboration
open-source de
graphique agréable. Postman existe entre les membres de l'équipe grâce à des conteneurisation qui permet de
sous la forme d’une App fonctionnalités de suivi des problèmes et créer, de déployer et d'exécuter
(Windows/MacOS/Linux) et d’une de gestion des demandes de fusion. Cette des applications dans des
Chrome App approche a favorisé la coordination, les conteneurs légers et
révisions de code et la garantie de la autonomes.
qualité du code.
32
III. Réalisation et validations
1. Interface d’authentification
Il s'agit de la page de connexion qui permet à

l'administrateur, à la secrétaire et au technicien de
s'identifier afin d'accéder à leurs interfaces respectives. Pour
l'administrateur, son rôle inclut l'attribution des adresses
e-mail et des mots de passe aux autres utilisateurs, leur
permettant ainsi de s’identifier.
figure 9 - interface d’authentification
2. Dashboard admin
Le Dashboard Administrateur est la pièce maîtresse de l'application, offrant à l'administrateur une vue
centralisée et complète des opérations et des performances de l'entreprise. Il sert de hub de gestion,
permettant à l'administrateur de superviser et de contrôler divers aspects de l'entreprise grâce à des
interfaces spécialisées.
2.1 Dashboard
Figure 10 - Dashboard
33
2.2 Interface de gestion des bordereaux d’achats
Figure 11 - 1er interface de gestion des bordereaux d’achats
Figure 12 - 2ème interface de gestion des bordereaux d’achats

L'interface de gestion des bordereaux d'achats est une section essentielle du Dashboard
Administrateur, conçue pour faciliter le processus d'approvisionnement en produits auprès de différents
fournisseurs. Elle permet à l'administrateur de sélectionner les produits achetés et de gérer les
transactions avec les fournisseurs.
Fonctionnalités de l'interface de gestion des bordereaux d'achats:
1- Sélection de Fournisseurs et de Catégories : Dans cette partie de l'interface, l'administrateur peut
parcourir une liste de fournisseurs avec lesquels l'entreprise a des relations commerciales. Chaque
fournisseur est associé à différentes catégories de produits. L'administrateur peut choisir un fournisseur
spécifique et une catégorie de produits pour affiner la sélection.
2- Sélection de Produits Achetés : Une fois qu'un fournisseur et une catégorie sont sélectionnés,
l'interface affiche une liste de produits disponibles correspondant à cette catégorie spécifique. Chaque
produit est accompagné d'informations telles que le nom du produit, la description, le prix unitaire et le
niveau de stock actuel.
34
2.3 Interface de vente
Figure 13 - 1er interface de vente
Figure 14 - 2ème interface de vente

L'interface de vente, également appelée Point de Vente (POS), est une partie cruciale de l'application.
Elle permet à l'administrateur de mettre en vente des produits avec leurs détails de prix, tandis que les
clients peuvent choisir les produits à acheter et effectuer des transactions.
Fonctionnalités de l'Interface de Vente (POS):
Dans cette section, l'administrateur peut visualiser tous les produits disponibles à la vente. Chaque
produit est accompagné d'informations telles que le nom, la description, le prix unitaire et le niveau de
stock actuel.
Une fois que le client a choisi les produits à acheter, il peut passer à la génération de la facture. La
facture affiche la liste des produits sélectionnés, les quantités, les prix unitaires et le montant total dû.
Une fois le paiement effectué, un reçu est automatiquement généré. Le reçu inclut les détails de la
transaction, la liste des produits achetés, les quantités, les prix et le montant total payé. Le reçu peut
être imprimé ou envoyé par courrier électronique au client.
35
2.4 Interface de Gestion des Employés
Figure 13 - Interface de gestion des employés
Figure 14 - Interface d’ajout d’un employé

Dans cette section, l'administrateur peut gérer les informations et les autorisations des employés de
l'entreprise. Les fonctionnalités incluent :
● Liste des employés : L'administrateur peut accéder à une liste complète des employés de
l'entreprise.
● Gestion des employés et des autorisations : L'administrateur peut modifier les informations des
employés, attribuer des autorisations spécifiques et même créer ou supprimer des comptes
d'employés.
36
2.5 Interface de Gestion des Clients
Figure 15 - Interface de gestion des clients
Cette section permet à l'administrateur de gérer les données des clients de l'entreprise. Les
fonctionnalités comprennent :
● Liste des Clients : L'administrateur peut consulter la liste de tous les clients enregistrés.
● Ajout/Modification/Suppression de Clients : L'administrateur peut ajouter de nouveaux clients,
mettre à jour leurs informations ou même supprimer des profils obsolètes.
2.6 Interface de Gestion des Fournisseurs
Figure 16 - Interface de gestion des fournisseurs
37
Figure 17 - Interface d’ajout d’un fournisseur
L'interface de gestion des fournisseurs offre à l'administrateur la possibilité de gérer efficacement la

liste des fournisseurs, de spécifier les catégories de produits qu'ils fournissent et d'associer des produits
spécifiques à chaque fournisseur.
2.7 Interface de Gestion du stock
Figure 18 - Interface de gestion de stock
38
Figure 18 - Interface de gestion de stock de vente
L'interface de gestion de stock offre à l'administrateur la possibilité de gérer efficacement la liste des
produits, de spécifier leurs catégories avec leurs détails de prix et de quantité.
2.7 Interface de Gestion des formules de production
Figure 19 - Interface de gestion des formules de production

L'interface de gestion des formules de production offre à l'administrateur la possibilité de gérer
efficacement la liste des formules où il va avoir les catégories des produits et les formules
correspondantes et il peut suivre la production et mettre à jour la quantité produite à chaque fois.
3. Dashboard secrétaire
La secrétaire joue un rôle crucial dans la gestion quotidienne des ventes et des stocks. Son accès
restreint garantit la sécurité des données tout en lui permettant de contribuer efficacement aux activités
opérationnelles de l'entreprise.
● Accès Sécurisé au POS: La secrétaire peut accéder au Point de Vente (POS) avec une
deuxième authentification par code PIN, ce qui assure la sécurité des transactions et des
données.
39
Figure 20 - Interface de deuxième authentification pour le secrétaire
● Gestion de Stock Simplifiée: La secrétaire peut suivre les niveaux de stock et enregistrer les
ventes, contribuant ainsi à la gestion efficace des produits disponibles.
Figure 21 - Interface de gestion du stock d’achats
4. Dashboard technicien
Le tableau de bord du technicien dans l'application de gestion avec système de Point de Vente (POS)
pour Taleen offre un accès ciblé aux fonctionnalités essentielles liées à la gestion des stocks et à la
production. Le technicien peut utiliser ces fonctionnalités pour contribuer efficacement à la chaîne de
production tout en bénéficiant d'un niveau approprié d'accès restreint.
● Accès au stock d'Achats : Le technicien a la possibilité de consulter les niveaux de stock pour
les produits achetés. Cela lui permet de surveiller les quantités disponibles.
40
Figure 22 - Interface de stock d’achat
● Accès aux Formules de Fabrication : Le technicien peut accéder aux détails des formules de
production avec une deuxième authentification par code PIN. Cela lui permet de comprendre
les compositions des produits et de suivre les processus de fabrication.
Figure 23 - Interface de deuxième authentification pour le technicien
Figure 24 - Interface des formules de stock
41
Conclusion générale
Notre stage au sein de l'entreprise Ilef Info Services a été une expérience exceptionnelle et
formatrice qui nous a permis d'acquérir des compétences pratiques essentielles dans le
domaine du développement web. Ce stage nous a offert un aperçu précieux du monde
professionnel, en mettant en lumière les défis et les opportunités qui se présentent dans ce
domaine. Nous avons pu observer de près les dynamiques d'une entreprise prospère et
innovante, ainsi que les méthodologies et les outils de travail qui contribuent à son succès.
Nous avons travaillé exclusivement sur le développement web, en utilisant des technologies
avancées telles que GitLab, Docker, React, Node.js et Express. Ces outils ont enrichi notre
bagage de compétences et ouvert de nouvelles perspectives dans notre domaine d'études.
De plus, pour l'organisation de notre travail et le suivi de notre avancement, nous avons eu la
chance de nous familiariser avec des outils de pointe tels que Jira et Confluence. Ces
plateformes ont grandement facilité la gestion de nos tâches et la collaboration au sein de
l'équipe.
En rétrospective, ce stage nous a également permis de mieux comprendre nos propres intérêts
et aspirations professionnelles. Il a renforcé notre détermination à poursuivre une carrière
dans le développement web en nous fournissant un aperçu concret des responsabilités et des
défis qui nous attendent.
En conclusion, ce stage a été une étape essentielle dans notre parcours académique et
professionnel. Il a renforcé notre confiance, élargi nos horizons, et nous a préparés à relever
de nouveaux défis dans le futur. Nous sommes enthousiastes à l'idée de mettre en pratique les
compétences acquises et de continuer à apprendre et à évoluer dans notre domaine. Notre
stage chez Ilef Info Services restera une expérience inoubliable qui a contribué de manière
significative à notre développement personnel et professionnel.
Perspectives et axes d'amélioration : Pour l'avenir, nous suggérons d'explorer davantage les
domaines émergents du développement web, tels que l'intelligence artificielle et l'Internet des
objets, afin de rester à la pointe de l'innovation.
En somme, notre expérience chez Ilef Info Services a été extrêmement bénéfique, et nous
sommes impatients de voir comment l'entreprise continuera de se développer et d'innover dans
son domaine. Nous sommes reconnaissants pour cette opportunité et enthousiastes à l'idée de
contribuer à l'avenir de l'entreprise.
42
43

Version Finale Du Rapport de Stage D'ingénieur

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

Version Finale Du Rapport de Stage D'ingénieur

Transféré par

Droits d'auteur :

Formats disponibles

RAPPORT DE STAGE D'INGÉNIEUR

Développement d’une application de gestion avec un

ANNÉE UNIVERSITAIRE: 2023-2024

Nous tenons également à exprimer notre gratitude envers Mr. Mohamed

Ce stage a été une expérience précieuse qui a contribué de manière significative

Figure 1 - Diagramme de cas d’utilisation générale

Figure 8 - Diagramme de classe

Figure 9 -Interface d’authentification

Figure 10-Dashboard admin

Figure 11 - Interface d’achat

Figure 12 - Interface de vente

Figure 13 - Interface de gestion des employés

Figure 14 - Interface des clients

Figure 15 - Interface des fournisseurs

Figure 16 - Interface de Code Pin

Figure 17 - Interface de gestion de stock MP

Figure 18 - Interface de gestion de stock de vente

Figure 19 - Interface de gestion des formules de fabrication

Tableau 1: Diagramme de cas d’utilisation générale

Tableau 4 - Description du cas d’utilisation « Réinitialiser le mot de passe»

Tableau 5 - Description du cas d’utilisation « Faire des achats»

Tableau 6 - Description du cas d’utilisation « Gérer les ventes via le POS»

Tableau 7 - Description du cas d’utilisation « Gérer le stock des ventes»

Tableau 8 - Description du cas d’utilisation « Gérer le stock d’achats»

Tableau 9 - Description du cas d’utilisation « Gérer la production»

Le stage constitue une étape cruciale dans le parcours académique et professionnel de

II. Présentation de l’entreprise

DB CONSULTING est une société de service et d’ingénierie en informatique, fondée le 13

Pilotage Coaching agile et gouvernance - Gestion

Orientation utilisateur (User centric Framework agile (Scrum, Kanban...)

Traitement des données (Data Gestion des données

Ingénierie Software, développement Web et Mobile

Marketing numérique Branding SEO, SEA…

Gestion des talents Externalisation - Autonomisation des

Recherches scientifiques - Virtuelle, réalité augmentée, Internet des

Solutions Cloud AWS, Azure, Google Cloud…

Tableau1- Les différents services de l’entreprise.

Product owner Taleen

Scrum master Dhaou BERCHECH

Équipe de développement Syrine OMRANI : PO & SM & Testeur

Tableau 2- L’équipe du projet.

figure 1- Planification du projet.

Sprint 1: Page de connexion + 1ère interface admin

– Préparation de l'environnement de développement

Sprint review + Sprint rétrospective

Sprint 2: Dashboard admin

– Terminer l’interface d’achat pour l’admin.

Sprint review + Sprint rétrospective

Sprint 3: Finaliser le Dashboard admin et secrétaire

– Ajouter les tableaux d’historiques sur les achats et les ventes

Sprint review + Sprint rétrospective

Sprint 4: Corriger et terminer le Dashboard admin, secrétaire et technicien

– Faire la liaison entre les différentes parties du Dashboard

Tableau 3 - Planification du projet.

4. Les logiciels utilisés

Confluence est notre plateforme de collaboration et de documentation. En tant qu'équipe de

IV. Etude de l'existant

● Efficacité Opérationnelle : L'application permet à Taleen d'automatiser et d'accélérer

Tableau 4 - Comparaison entre Taleen et Zoho Inventory.

II. Arborescence du projet

Le schéma ci-dessus représente un vue globale de l’arborescence du projet:

1. Spécification des acteurs

L'application vise à servir trois principaux acteurs au sein de Taleen :