Projet de Fin d’études

Licence Sciences et Techniques Génie Informatique

Département Informatique

Lieu de stage : AM Creative SARL

Développement d’une application web de

gestion de stock

Réalisé par : Encadré par :

 Araoua Mokhliss  Pr. Azeddine Zahi

Soutenu le 19/06/2025 devant le jury composé de :

Pr. Y. DHASSI
Pr. R. BEN ABBOU
Pr. A. ZAHI

Année Universitaire 2024-2025

 Remerciements
Tout d’abord, je remercie Dieu, le Tout-Puissant, qui m’a accordé la patience, la persévérance et la force
nécessaires pour mener à bien ce Projet de Fin d'Études.

Je tiens à exprimer ma profonde gratitude à l’ensemble de l’équipe pédagogique de la Faculté des

Sciences et Techniques de Fès pour la qualité de l’enseignement dispensé tout au long de mon parcours.

Je remercie tout particulièrement Monsieur le Professeur Azeddine ZAHI pour son encadrement
bienveillant, ses conseils précieux et son accompagnement tout au long de l’élaboration de ce travail.

Je tiens également à remercier chaleureusement les membres du jury, Monsieur le Professeur Y.

DHASSI et Monsieur le Professeur R. BEN ABBOU, pour l’honneur qu’ils m’ont fait en acceptant
d’évaluer ce mémoire.

Ma reconnaissance s’adresse également à Monsieur Mohammed BENYCHOU, directeur de la société

Am Creative, pour m’avoir accueilli au sein de son entreprise et m’avoir permis de réaliser ce stage dans des
conditions propices à l’apprentissage.

Enfin, je remercie sincèrement toutes les personnes, de près ou de loin, qui ont contribué à la réussite de
ce projet et m’ont soutenu durant cette expérience enrichissante.

1
 Résumé
Mon projet de fin d’études consiste en la création d'un site web pour la gestion d’inventaire. L'objectif
principal de ce site est de simplifier le processus de gestion du stock et d'optimiser la gestion des produits et
commandes.

Pour atteindre cet objectif, j’ai commencé par analyser les besoins des utilisateurs, puis j’ai conçu le site
en m’appuyant sur des techniques de conception web modernes. J’ai ensuite procédé à la réalisation en
utilisant des technologies adaptées telles que HTML, CSS, JavaScript, ainsi que des outils de
développement web comme Springboot, avec MySQL comme système de gestion de base de données.

Le présent rapport détaille les différentes étapes de conception et de réalisation de ce projet.

Summary
My end-of-study project involves the development of a web-based stock management application. The
main objective is to simplify and optimize the management of inventory, suppliers, and orders for
businesses.

To achieve this, I began by analyzing user requirements and proceeded to design the application using
modern development methodologies. The implementation was carried out using technologies such as Spring
Boot for the backend, Angular for the frontend, and MySQL for database management.

The application includes essential features such as product management, supplier tracking, order
processing, real-time inventory monitoring, and a comprehensive auditing system.

This report outlines the various stages of design and implementation, highlighting the use of modern
technologies and best practices to meet the practical needs of businesses in inventory management.

2
 Sommaire
Chapitre 1 : Contexte général du projet
1. Présentation de lieu de stage........................................................................8
L’étude de l’existant...................................................................................8
2. Problématique............................................................................................9
3. Solution Proposée......................................................................................9
Chapitre 2 : Analyse et conception
1. Analyse des besoins.................................................................................... 12
1.1 Acteurs de système.....................................................................................................12
1.2 Diagrammes des cas d’utilisation..................................................................................13
1.2.1 Diagramme des cas d'utilisation administrateur......................................................13
1.2.2 Diagrmme des cas d'utilisation Gestionnaire...........................................................17
1.2.3 Diagramme des cas d'utilisation d'employé.............................................................17
1.3 Description détaillée des cas d’utilisation et diagrammes (d’activités ou séquences)............18
1.3.1 Diagrammes de séquence.....................................................................................18
1.3.2 Diagrammes d’activité....................................................................................... 26
2. Modèle statique........................................................................................ 28
2.1 Diagramme de classes................................................................................................ 28
Chapitre 3 : Réalisation
1. L’environnement de développement..............................................................30
1.1 Les langages et technologies web..................................................................................30
1.2 Les outils................................................................................................................32
2. Les interfaces graphiques de l’application......................................................34
2.1 Page de connexion ................................................................................................34
2.2 Page d’accueil principale....................................................................................... 35
2.3 La création d’une commande sortante......................................................................36
2.4 Gestion des catégories ........................................................................................................ 38

Conclusion et Perspectives…..................................................................................... 40
Références............................................................................................................................. 41

3
 Liste des figures
Figure 1 : Diagramme des cas d'utilisation de l’administrateur...............................................................16
Figure 2 : Diagramme des cas d'utilisation du gestionnaire....................................................................19
Figure 3 : Diagramme des cas d'utilisation d'employé..........................................................................19
Figure 4 : Diagramme de séquence créer commande sortante..................................................................22
Figure 5 : Diagramme de séquence créer compte utilisateur.................................................................24
Figure 6 : Diagramme de séquence de création de session d’’inventaire.....................................................27
Figure 7 : Diagramme d’activité Ajouter produit................................................................................29
Figure 8 : Diagramme de classes...................................................................................................... 30
Figure 9: Logo HTML.................................................................................................................. 32
Figure 10 : Logo CSS.................................................................................................................... 32
Figure 11: Logo Springboot............................................................................................................ 33
Figure 12 : Logo Javascript............................................................................................................ 33
Figure 13 : Logo Angular...............................................................................................................33
Figure 14 : Logo typescript.............................................................................................................34
Figure 15: Logo docker.................................................................................................................. 34
Figure 16 : Logo Enterprise Architect.............................................................................................. 34
Figure 17 : Logo Git/Github.......................................................................................................... 35
Figure 18 : Page de connéxion........................................................................................................36
Figure 19: Page d’accueil principale................................................................................................37
Figure 20 : Page de commandes.......................................................................................................38
Figure 21 : Formulaire de commande sortante..................................................................................... 39
Figure 22 : Table des catégories...................................................................................................... 39
Figure 23 : Formulaire d’ajout d’une catégorie..................................................................................40
Figure 24 : Ajouter une sous-catégorie..............................................................................................40
Figure 25 : Formulaire de modification d’une catégorie......................................................................40
Figure 26 : Pop-up de confirmation de suppression d’une catégorie........................................................41

4
 Liste des tableaux
Tableau 1 : Acteurs du système et leurs rôles.......................................................................................15
Tableau 2 : Description détaillée du cas d’utilisation créer commande sortante (admin/gestionnaire).
..................................................................................................................................................................... 21
Tableau 3 : Description détaillée du cas d’utilisation créer compte utilisateur ......................................23
Tableau 4 : Description détaillée du cas d’utilisation créer session d’inventaire.
.................................................................................................................................................................... 26
Tableau 5 : Description détaillée du cas d’utilisation Ajouter produit.....................................................28

Liste des acronyms

Acronyme Désignation

UML Unified Modeling Language

HTML HyperText Markup Language

CSS Cascading Style Sheets

JS JavaScript

5
 Introduction
Dans un monde de plus en plus interconnecté, où chaque instant compte et où les défis de la gestion
d’entreprise exigent des solutions performantes, l’optimisation de la gestion des stocks est devenue un enjeu
crucial. Pourtant, la gestion des stocks, des fournisseurs et des commandes reste souvent complexe et
chronophage, tant pour les gestionnaires que pour les entreprises.

Dans le cadre de ma formation en génie informatique, j’ai eu l’opportunité de relever ce défi en

développant une application web complète de gestion de stock, conçue pour répondre aux besoins croissants
des entreprises en matière d’optimisation logistique. Ce projet m’a permis d’explorer en profondeur les
problématiques actuelles liées à la gestion des stocks et d’y apporter une solution innovante, en m’appuyant
sur les technologies web les plus [Link] structure de ce rapport est organisée de manière à fournir une
vision complète du projet, depuis son analyse initiale jusqu'à sa mise en œuvre et son évaluation.

Mon rapport est structuré comme suite :

• Le premier chapitre consiste à présenter le lieu de stage, étudier l’existant, présenter la

problématique étudiée dans ce projet, ainsi que les solutions proposées.

• Le deuxième chapitre est consacré à l’analyse et la conception détaillée du système, en identifiant

les différents acteurs et leurs tâches, puis élaborer les différents diagrammes, à savoir le diagramme de cas
d’utilisation, d’activités et de classe.

• Le troisième chapitre présente l’environnement de développement et les interfaces de l’application.

6
Chapitre 1 : Contexte général du projet

7
1. Présentation de lieu de stage
Située à Fès, AM Creative est une entreprise spécialisée dans l’industrie publicitaire, offrant des solutions
innovantes en création, décoration et aménagement. Ils accompagnent leurs clients dans la réalisation de
projets uniques, alliant design, créativité et expertise technique.
Domaines d'Expertise :
◦ Enseignes et signalétiques : Conception et fabrication sur mesure d’enseignes LED, caissons
lumineux, panneaux publicitaires et totems, pour une visibilité maximale en intérieur comme en extérieur.
◦ Stickers et vinyles adhésifs : Réalisation de stickers personnalisés pour murs, véhicules et vitrines,
offrant des solutions esthétiques et durables pour tous les espaces.
◦ Impression grand format : Impression de supports de communication impactants tels que bannières,
affiches, roll-ups et kakémonos, adaptés à tous les événements et besoins promotionnels.
◦ Objets Publicitaires Personnalisés : Création d’objets personnalisés (t-shirts, mugs, stylos, etc.) pour
renforcer l’identité de marque et fidéliser les clients.
◦ Décoration intérieure et aménagement : Aménagement visuel et décoration d’espaces professionnels
ou commerciaux, alliant créativité, esthétisme et cohérence visuelle.
◦ Engagée envers l’excellence visuelle : AM Creative associe savoir-faire technique, créativité et
écoute client pour transformer chaque idée en une réalisation concrète et percutante.
Avec une approche sur mesure et une passion pour le design, AM Creative se positionne comme un acteur
incontournable de la communication visuelle au Maroc.
Pour plus d’informations : [Link]

2. L’étude de l’existant
Le processus actuel de gestion de stock dans les entreprises marocaines repose principalement sur des
méthodes manuelles et des systèmes traditionnels. Voici une description détaillée de ce processus :
◦ Gestion manuelle des stocks : Les entreprises utilisent généralement des registres papier ou des
feuilles de calcul Excel pour suivre leurs stocks. Les employés doivent physiquement compter les articles,
mettre à jour les registres, et effectuer des vérifications régulières pour maintenir l'exactitude des données.
◦ Suivi des fournisseurs : La communication avec les fournisseurs se fait principalement par
téléphone ou email. Les commandes sont souvent passées manuellement, et le suivi des livraisons repose sur
des appels de suivi et des vérifications physiques des documents de livraison.
◦ Gestion des commandes : Le processus de commande implique plusieurs étapes manuelles :
création de bons de commande, vérification des stocks disponibles, calcul des quantités à commander, et
suivi des délais de livraison. Cette approche est sujette aux erreurs humaines et aux retards.
◦ Inventaire et réconciliation : Les entreprises effectuent régulièrement des inventaires physiques
pour vérifier l'exactitude de leurs registres. Cette tâche est chronophage et nécessite souvent l'arrêt des
opérations normales. La réconciliation entre les registres et la réalité physique peut révéler des écarts
importants.

8
 3. Problématique
Dans un contexte où la technologie offre des solutions innovantes pour optimiser les processus
d'entreprise, le processus traditionnel de gestion de stock au Maroc présente des défis majeurs tant pour les
gestionnaires que pour les entreprises. Alors que les méthodes manuelles sont encore largement utilisées, la
nécessité de moderniser ce processus devient de plus en plus évidente.
Problématique :
Dans un monde où l'efficacité opérationnelle est cruciale et où la technologie façonne de nouvelles normes
de gestion, comment adapter le processus de gestion de stock au Maroc pour répondre aux besoins des
entreprises de manière plus efficace, transparente et accessible ?
Enjeux :
◦ Accessibilité et commodité : Comment rendre le processus de gestion de stock plus accessible aux
employés, en particulier à ceux ayant des contraintes de temps ou de ressources, tout en offrant une expérience
pratique et conviviale ?

◦ Transparence et traçabilité : Comment améliorer la transparence et la traçabilité des opérations de

stock, permettant aux gestionnaires de prendre des décisions éclairées en matière d'approvisionnement et de
gestion des stocks ?
◦ Efficacité opérationnelle : Comment optimiser la planification et la gestion des stocks pour les
entreprises, afin de minimiser les erreurs et d'assurer une utilisation optimale des ressources ?
◦ Intégration de la Technologie : Comment intégrer les outils technologiques pour moderniser le
processus de gestion de stock, en offrant des solutions innovantes qui simplifient les interactions entre les
différents acteurs de la chaîne logistique ?

4. Solution Proposée
Pour répondre à la problématique posée, mon projet propose plusieurs solutions innovantes :
Plateforme de Gestion de Stock en Ligne : je développerai une plateforme web intuitive permettant aux
gestionnaires de suivre, comparer et gérer leurs stocks en temps réel.
Gestion des Mouvements Automatisée : j’intégrerai un système de gestion des mouvements automatisé
pour les opérations de stock. Ce système permettra aux gestionnaires de visualiser leurs mouvements de stock
et de gérer les entrées/sorties en fonction de leur disponibilité. Les notifications seront automatiquement
envoyées aux responsables à chaque nouveau mouvement de stock, garantissant ainsi une traçabilité
optimale.
Historique des Transactions : Les gestionnaires auront accès à un historique détaillé de leurs
transactions passées sur la plateforme. Cela leur permettra de consulter facilement les détails de leurs
opérations précédentes et de suivre l'évolution de leurs activités sur la plateforme.
Gestion des Comptes par l'Administrateur : L'administrateur de la plateforme aura la possibilité de
gérer les comptes des utilisateurs pour garantir le bon fonctionnement du site web. Cela inclura la gestion
des autorisations, la vérification des comptes, la gestion des problèmes techniques éventuels, et toute autre
9
tâche nécessaire pour assurer la qualité et la sécurité de la plateforme.
En combinant ces fonctionnalités principales, ma plateforme vise à simplifier et à améliorer l'expérience
de gestion de stock, tant pour les gestionnaires que pour les fournisseurs, tout en offrant un environnement
sécurisé et efficace pour la gestion des transactions.

10
Chapitre 2 : Analyse et conception

11
1. Analyse des besoins
L'analyse des besoins est une étape cruciale dans le développement de mon application web de gestion
de stock. Cette application vise à faciliter la gestion et le suivi des stocks pour les entreprises. Pour garantir
une utilisation optimale et une satisfaction maximale des utilisateurs, il est essentiel de bien comprendre et
de définir les rôles et les fonctionnalités des différents acteurs du système. Les principaux acteurs identifiés
sont l'administrateur, le gestionnaire de stock, et l’employé. Chacun de ces acteurs joue un rôle distinct et
essentiel dans le fonctionnement de l'application. Cette section décrit en détail les responsabilités et les
fonctionnalités associées à chaque acteur afin de s'assurer que les besoins de tous les utilisateurs sont
correctement pris en compte.

1.1 Acteurs de système

Le tableau ci-dessous présente les différents acteurs du système et leurs cas d'utilisation :

Acteur Les Cas d’utilisation

• S'authentifier
• Consulter les comptes des utilisateurs
• Créer les comptes des utilisateurs
• Consulter les catégories de produits
• Ajouter une catégorie de produit
• Modifier une catégorie de produit
• Supprimer une catégorie de produit
• Consulter tous les produits
Administrateur • Ajouter un produit
• Modifier un produit
• Supprimer un produit
• Consulter l'historique des mouvements de stock
• Traiter les demandes de création des fournisseurs
• Consulter les alertes de stock
• Consulter les rapports d'inventaire
• Superviser les sessions d'inventaire
• Configurer les paramètres du système
• Assigner les droits d'accès des utilisateurs
• Consulter les logs d'audit
• Paramétrer la sécurité
• Configurer les notifications
• Effectuer les sauvegardes de la base de données
• Définir les profils de stockage
• Établir les règles de gestion des stocks
• Planifier les périodes d'inventaire
• Définir les types de mouvements de stock

12
 • Créer les commandes entrantes et sortantes
• consulter les commandes
• S'authentifier
• Ajouter produit
• Consulter les statistiques globales
Gestionnaire • Voir les alertes de stock
• Consulter les mouvements récents
• Enregistrer une entrée de stock
• Enregistrer une sortie de stock
• Consulter la liste des produits
• Consulter les produits
• Consulter les catégories
• Créer categorie
• Ajouter fournisseur
• Consulter la liste des fournisseurs
• Consulter les commandes
• Suivre l'état des commandes
• Consulter les mouvements de stock
• Démarrer une session d'inventaire
• Effectuer un comptage
• Valider les résultats
• Consulter les comptes d’utilisateurs
• Générer des rapports de stock
• Exporter les données
• Consulter les statistiques
• Consulter les alertes de stock
• Suivre les notifications
 S’authentifier.
 Consulter produits.
 Créer commandes (sortantes/entrantes).
Employé  Participer dans un inventaire.
 Consulter les commandes.
 Consulter stock.
 Signaler alerte.

Tableau 1 : Acteurs du système et leurs rôles

1.2 Diagrammes des cas d’utilisation
Le diagramme des cas d'utilisation est un outil clé en ingénierie logicielle qui illustre les interactions
entre les utilisateurs et le système. Il montre les différentes fonctionnalités de l'application et comment les
utilisateurs les utilisent. Les éléments principaux sont les acteurs, les cas d'utilisation et leurs interactions.
Ce diagramme aide à clarifier les besoins fonctionnels du système pour tous les participants au projet.
13
1.2.1 Diagramme des cas d'utilisation Administrateur

14
Figure 1 : Diagramme des cas d'utilisation de l’administrateur.

15
1.2.2 Diagramme des cas d'utilisation Gestionnaire

16
 Figure 2 : Diagramme des cas d'utilisation du gestionnaire.

1.2.3 Diagramme des cas d'utilisation d'employé

Figure 3 : Diagramme des cas d'utilisation d'employé.

17
 1.3 Description détaillée des cas d’utilisation et diagrammes (d’activités ou
séquences)
Dans cette section, je détaille les principaux cas d'utilisation de mon application web et leur
fonctionnement. Chaque cas d'utilisation décrit une interaction spécifique entre un utilisateur et le système,
incluant les étapes, les préconditions et les résultats attendus. Cette analyse permet de comprendre comment
le système répond aux besoins des utilisateurs et assure une mise en œuvre correcte des fonctionnalités.
Pour chaque cas d'utilisation, je fournis une description claire et structurée, couvrant les acteurs
impliqués, les scénarios principaux, les scénarios alternatifs et les extensions possibles. De plus, j ‘ajoute un
diagramme UML descriptif pour chaque cas d'utilisation. Ces diagrammes peuvent être des diagrammes de
séquence ou des diagrammes d'activité.
Les diagrammes de séquence illustrent l'ordre chronologique des interactions entre les différents acteurs
et le système, tandis que les diagrammes d'activité décrivent les flux de contrôle et les étapes opérationnelles
du processus. Ces diagrammes UML facilitent la visualisation et la compréhension des processus détaillés et
des interactions complexes dans le système.

1.3.1 Diagrammes de séquence

 Créer commande sortante (administrateur/gestionnaire)

Le tableau ci-dessous décrit le cas d'utilisation "Créer une commande sortante".

Champ Description
Nom du Cas Créer commande sortante
d'Utilisation

Acteurs Administrateur/gestionnaire
L’administrateur/gestionnaire crée une commande sortante en remplissant les
Description champs du formulaire.

L’utilisateur doit etre connecté

Préconditions

Une nouvelle commande est créée et inserée sur la liste des commandes.
Postconditions

18
 1. L’utilisateur accède à la page de commandes.
2. L’utilisateur remplit le formulaire de commande avec les informations
nécessaires.
Scénario 3. L’utilisateur soumet le formulaire.
Principal
4. Le système verifie les champs du formulaire.

5. La commande est bien créée.

- A1 : Les informations fournies sont invalides. Le système affiche un

message d'erreur et demande de corriger les informations.
Scénarios
Alternatifs

Notes Aucun.
Tableau 2 : Description détaillée du cas d’utilisation créer commande sortante (admin/gestionnaire).

La figure ci-dessous illustre le diagramme de séquence pour le cas d'utilisation "Créer commande
sortante" :

19
Figure 4 : Diagramme de séquence créer commande sortante.

20
 Créer utilisateur (admin)
Le tableau ci-dessous décrit le cas d'utilisation "Création des comptes utilisateurs ».

Champ Description
Nom du Cas Créer compte utilisateur
d'Utilisation

Acteurs L’administrateur
L'administrateur crée un compte utilisateur en saisissant ses informations.
Le systeme verifie les champs puis crée le compte avec un mot de passe
Description temporaire

Préconditions L’administrateur est connecté.

L’utilisateur recoit son email et mot de passe. Puis redirige a la page de
Postconditions modification de mot de passe dès sa premiere connexion.

1. L'administrateur saisit les informations de l'utilisateur

(identifiant, nom, prénom, emails, rôle)
2. Le système cree le compte avec mot de passe temporaire
3. L'utilisateur utilise ses informations pour se connecter
Scénario 4. Le compte est automatiquement activé et l'utilisateur est redirige
Principal vers la page de changement du mot de passe.

Scénarios Aucun.
Alternatifs

- L’utilisateur ne peut pas accéder a la page d’accueil jusqu’au changement du

Notes
mot de passe.
Tableau 3 : Description détaillée du cas d’utilisation «Créer compte utilisateur ».

21
 La figure ci-dessous illustre le diagramme de séquence pour le cas d'utilisation " Créer compte
utilisateur" :

Figure 5 : Diagramme de séquence créer compte utilisateur.

22
 Créer une session d’inventaire
Le tableau ci-dessous décrit le cas d'utilisation " Créer une session d’inventaire" :

Champ Description
Nom du Cas Créer une session d’inventaire
d'Utilisation

Acteurs administrateur/gestionnaire
L'utilisateur doit créer une nouvelle session d'inventaire en spécifiant les
détails de l'inventaire (nom, type, date prévue), sélectionner les produits à
Description inventorier, assigner les membres d'équipe et les zones. Le système vérifie la
validité des données et crée la session d'inventaire.

Préconditions L'utilisateur doit être authentifié.

L'utilisateur doit avoir les droits nécessaires pour créer un inventaire.
Les produits, utilisateurs et catégories doivent être disponibles dans le système.
Une nouvelle session d'inventaire est créée.
Postconditions Les produits sélectionnés sont associés à la session.
Les membres d'équipe sont assignés.
Les zones sont assignées.
1. L'utilisateur accède à la page de création d'inventaire.
2. L'utilisateur remplit les informations générales.
3. L'utilisateur sélectionne les produits à inventorier.
4. L'utilisateur assigne les membres d'équipe (compteurs).
5. L'utilisateur assigne les zones d'inventaire.
6. L'utilisateur soumet le formulaire.
7. Le système valide les données saisies.
Scénario 8. Le système vérifie la disponibilité des produits sélectionnés.
Principal 9. Le système vérifie la disponibilité des membres d'équipe.
10. Le système crée la session d'inventaire.
11. Le système associe les produits à la session.
12. Le système associe les membres d'équipe à la session.
13. Le système associe les zones à la session.
14. Le système confirme la création de la session.

23
 - A1 : Données invalides
- Le système affiche les erreurs de validation
- L'utilisateur corrige les erreurs et soumet à nouveau
- A2 : Produits non disponibles
- Le système affiche un message d'erreur
- L'utilisateur sélectionne d'autres produits
- A3 : Membres d'équipe non disponibles
- Le système affiche un message d'erreur
Scénarios - L'utilisateur sélectionne d'autres membres
Alternatifs - A4 : Zones déjà assignées
- Le système affiche un message d'erreur
- L'utilisateur sélectionne d'autres zones
- A5 : Erreur de création
- Le système affiche un message d'erreur
- L'utilisateur peut réessayer ou annuler

- Les sessions d'inventaire ne peuvent pas se chevaucher pour les mêmes zones
Notes

Tableau 4 : Description détaillée du cas d’utilisation créer session d’inventaire

24
 La figure ci-dessous illustre le diagramme de séquence pour le cas d'utilisation "créer session
d’inventaire " :

Figure 6 : Diagramme de séquence de création de session d’’inventaire.

25
 1.3.2 Diagrammes d’activité
 Ajouter un produit
Le tableau ci-dessous décrit le cas d'utilisation "Ajouter un produit :

Champ Description

Nom du Cas Ajouter un produit

d'Utilisation

Acteurs L’administrateur
L'administrateur ajoute un nouveau produit au système de gestion de stock.
Description

-L'administrateur est connecté.

Préconditions - Le produit n'existe pas dans le système.

Un nouveau produit est ajouté au système avec ses informations complètes.

Postconditions

1. L'administrateur accède à la page d'ajout de produit.

2. Le système charge les données de référence (catégories, unités,
fournisseurs).
3. L'administrateur remplit le formulaire avec les informations du produit.
4. L'administrateur valide le formulaire.
Scénario
5. Le système crée le produit et affiche un message de succès.
Principal

- A1 : Données invalides
- Le système affiche les erreurs de validation.
Scénarios
- L'administrateur corrige les champs invalides.
Alternatifs
- A2 : Code produit existant
- Le système affiche un message d'erreur.
- L'administrateur modifie le code produit.
- A3 : Scanner de code-barres
- L'administrateur active le scanner.
- Le système remplit automatiquement les champs.
Notes - Le produit peut être périssable ou non.
- Les prix d'achat et de vente sont obligatoires.
- Le stock initial est optionnel.
Tableau 5 : Description détaillée du cas d’utilisation Ajouter service.

26
La figure ci-dessous illustre le diagramme d’activité pour le cas d'utilisation "Ajouter un produit" :

Figure 7 : Diagramme d’activité Ajouter produit.

27
2. Modèle statique
Le modèle statique est une représentation essentielle des éléments structurels de notre application web.
Il décrit les objets du système, leurs attributs, méthodes, et les relations entre eux. En utilisant des
diagrammes de classes UML, je peux visualiser la structure statique du système, facilitant ainsi la
compréhension des entités principales, leur organisation et leurs interactions.

2.1 Diagramme de classes

Le diagramme de classes offre une vue structurée des composants clés d'un système logiciel et de leurs
interactions. En présentant les classes, leurs attributs et méthodes, ainsi que les relations entre elles, ce
diagramme simplifie la compréhension de la structure statique de l'application. Dans cette
section,j’examinerai de près le diagramme de classes de mon application, mettant en évidence les entités
principales et leurs liens, essentiels pour le développement et la maintenance du système.
La figure ci-dessous illustre le diagramme de classe de mon application :

Figure 8 : Diagramme de classes.

28
Chapitre 3 : Réalisation

29
1. L’environnement de développement
Dans ce chapitre, je vais présenter les différents outils de développement que j'ai utilisé pour la
réalisation de mon application. Ces outils couvrent divers aspects du cycle de développement logiciel, allant
de la conception à l'implémentation, en passant par les tests et la gestion de projet. Je détaillerai les
caractéristiques de chaque outil et expliquerai comment ils ont contribué à la réussite de mon projet.

1.1 Les langages et technologies web

Figure 9 : Logo HTML

HTML (HyperText Markup Language) [2] est le langage standard pour créer des pages web. Dans mon
projet, HTML a servi de base pour structurer l'interface utilisateur de l'application. Il a permis de définir la
structure du contenu avec des éléments comme les titres, les paragraphes, les liens, les images et les
formulaires. En utilisant HTML, j’ai pu créer une interface claire et fonctionnelle, facilitant l'interaction
des utilisateurs avec notre application.

Figure 10 : Logo CSS

CSS (Cascading Style Sheets) [3] est le langage utilisé pour décrire la présentation des pages web, y
compris les couleurs, les polices, et la disposition des éléments. Dans mon projet, CSS a été utilisé pour
styliser l'interface utilisateur, rendant l'application visuellement attrayante et facile à utiliser. Grâce à CSS,
j’ai pu appliquer des styles cohérents à travers toutes les pages, améliorer la mise en page, et assurer la
réactivité de l'application sur différents appareils. En utilisant CSS, j’ai créé une expérience utilisateur
agréable et professionnelle.

30
 Figure 11 : Logo SpringBoot
Spring Boot [4] est un framework Java qui simplifie et accélère le développement d'applications Spring
autonomes et prêtes pour la production. Dans mon projet, j'ai utilisé Spring Boot pour construire la partie
backend de l'application, notamment pour le développement des services RESTful. Grâce à ses
fonctionnalités d'auto-configuration et à la possibilité d'intégrer des serveurs web (comme Tomcat)
directement dans l'application, j'ai pu démarrer rapidement le développement sans une configuration
complexe. Spring Boot m'a permis de me concentrer sur la logique métier plutôt que sur la configuration
fastidieuse, assurant ainsi une base solide, robuste et facile à déployer pour l'API de gestion de stock.

Figure 12 : Logo Javascript

JavaScript [5] est un langage de programmation essentiel pour le développement web, permettant de
rendre les pages interactives et dynamiques. Dans mon projet, j’ai utilisé JavaScript pour ajouter des
fonctionnalités interactives à l'interface utilisateur, telles que la validation des formulaires, la manipulation
du DOM, et la gestion des événements utilisateur. Grâce à JavaScript, nous avons pu améliorer l'expérience
utilisateur en rendant l'application plus réactive et interactive, assurant ainsi un comportement fluide et
intuitif.

Figure 13 : Logo angular

Angular [6] est un framework de développement d'applications web côté client, basé sur TypeScript, qui
facilite la création d'interfaces utilisateur dynamiques et interactives. Dans mon projet, j'ai utilisé Angular
pour développer le frontend de l'application de gestion de stock. Grâce à son architecture basée sur les
composants, à la gestion réactive de l'état (avec RxJS et les signaux) et à ses capacités de routage, j'ai pu créer
une expérience utilisateur fluide et performante. L'utilisation d'Angular a permis de structurer le code de
manière modulaire, d'assurer une forte typisation avec TypeScript, et de développer rapidement une interface
professionnelle et réactive.

31
 Figure 14 : Logo typescript
TypeScript [7] est un sur-ensemble de JavaScript, qui ajoute le typage statique au langage, permettant
ainsi de détecter les erreurs au moment de la compilation plutôt qu'à l'exécution. Dans mon projet, j'ai utilisé
TypeScript comme langage principal pour le développement de l'application frontend avec Angular. Grâce à
son système de types rigoureux, j'ai pu écrire un code plus robuste, plus facile à maintenir et à refactoriser.
TypeScript a amélioré la collaboration en rendant le code plus compréhensible pour les développeurs et a
permis une meilleure intégrité des données en garantissant que les variables et les fonctions respectent des
structures définies, réduisant ainsi les bugs et améliorant la qualité globale de l'application.

1.2 Les outils

Figure 15 : Logo XAMPP

Docker [8] est une plateforme de conteneurisation qui permet de packager une application et toutes ses
dépendances dans un environnement isolé appelé conteneur. Dans mon projet, j'ai utilisé Docker pour
conteneuriser à la fois le backend Spring Boot et les services associés (comme la base de données
PostgreSQL). Grâce à Docker, j'ai pu garantir que l'application et ses dépendances s'exécutent de manière
cohérente dans n'importe quel environnement, qu'il s'agisse de mon poste de développement, d'un serveur de
test ou de production. Cela a grandement simplifié le processus de déploiement, éliminé les problèmes de
compatibilité ("ça marche sur ma machine") et facilité la gestion des différentes versions de l'application.

Figure 16 : Logo Enterprise Architect

Enterprise Architect [9] est un outil de modélisation et de conception de logiciels qui prend en charge la
modélisation UML, la génération de code, la documentation et la gestion des exigences. Dans mon projet,
j’ai utilisé Enterprise Architect pour créer des diagrammes de conception, y compris des diagrammes de
classes, des diagrammes de séquence et des diagrammes d'activité. Cet outil m’a permis de visualiser et de
communiquer efficacement la structure et le comportement de mon application, ainsi que de générer
automatiquement une documentation détaillée pour le développement. En utilisant Enterprise Architect,
32
j’ai pu rationaliser le processus de conception et garantir la cohérence et la qualité de notre architecture
logicielle.

Figure 17: Logo Git/Github

Dans mon projet, j’ai utilisé Git [10] et GitHub [11]. Git, un système de contrôle de version distribué,
m’a permis de suivre les modifications du code source, gérer les branches de développement et fusionner mes
travaux simultanément. Avec GitHub, une plateforme de développement collaboratif basée sur Git, j;ai
hébergé mon dépôt, sauvgarder mon code et facilité le développement en examinant les modifications
proposées et en gérant les problèmes rencontrés. Cette combinaison de Git et GitHub a été essentielle pour
organiser mon travail, et suivre mon progrès.

33
2. Les interfaces graphiques de l’application
Dans cette partie de la description du fonctionnement de l'application, je vais fournir des captures
d'écran illustrant chaque fonctionnalité de manière visuelle. Les captures d'écran seront accompagnées de
descriptions détaillées pour expliquer le flux de chaque fonctionnalité et mettre en évidence les interactions
utilisateur.

2.1 Page de connexion

La page de connexion de mon application est le point d'entrée sécurisé pour les utilisateurs. Elle est
conçue pour être simple et intuitive, offrant un accès direct à la plateforme de gestion de stock d'AM
Creative. Les utilisateurs y trouveront des champs dédiés pour leur adresse email et leur mot de passe, avec
des options pratiques comme "Se souvenir de moi" et "Mot de passe oublié ?" pour faciliter l'authentification.
Un bouton "Se connecter" permet d'accéder à l'application. En outre, la page affiche le logo de l'entreprise et
une brève description de la solution de "Gestion de Stock", invitant les utilisateurs à se connecter pour gérer
leur inventaire, suivre leurs commandes et optimiser leur chaîne d'approvisionnement. Cette page est pensée
pour assurer une expérience utilisateur fluide et sécurisée dès le premier contact.

Figure 18 : la page de connéxion

2.2 La page principal

34
 Figure 19 : Page d’accueil principale.

La page de tableau de bord de mon application est le centre de commande principal, offrant une vue
d'ensemble rapide et concise de l'état actuel du stock et des activités récentes. Sa conception est axée sur la
facilité de navigation et la présentation claire des informations.

Sur la gauche, une barre de navigation latérale permet un accès aisé aux différentes sections du système,
incluant la gestion des produits, des catégories, des mouvements de stock, des fournisseurs, des commandes,
de l'inventaire, des rapports, des alertes, des utilisateurs et des paramètres. En haut de la page, une barre
supérieure intègre une fonction de recherche globale, ainsi que des icônes pour les notifications, les réglages
et le profil utilisateur, assurant une accessibilité rapide aux fonctions transversales de l'application.

Le contenu principal du tableau de bord est organisé autour de plusieurs sections informatives. Des cartes
récapitulatives, ou indicateurs de performance clés (KPIs), présentent des chiffres essentiels tels que le
nombre total de produits, la valeur du stock, le nombre de produits en alerte et le décompte des fournisseurs,
avec des comparaisons par rapport aux périodes précédentes pour une vision dynamique de l'évolution du
stock. Une section dédiée aux mouvements récents affiche un tableau détaillé des dernières transactions,
offrant une traçabilité complète des entrées et sorties, incluant le produit, la quantité, le prix unitaire, la
date et l'utilisateur responsable.

Enfin, une zone spécifique aux alertes de stock met en évidence les produits dont les niveaux sont critiques,
indiquant le stock actuel, le seuil d'alerte et proposant des actions immédiates telles que la commande ou la
consultation des détails du produit. Cette organisation permet aux utilisateurs d'obtenir un aperçu
pertinent et exploitable de leur inventaire, facilitant la surveillance des activités et la prise de décision
rapide face aux situations nécessitant une intervention.

2.3 La creation d’une commande sortante :

Le processus de création d'une commande sortante s'initie lorsque l'utilisateur clique sur le bouton
"Créer une commande" depuis la page principale des commandes, déclenchant l'ouverture d'une fenêtre
modale permettant de sélectionner le type de commande.

35
 F

Figure 20: Page de commandes.

Une fois le type "Commande Sortante" (OUTGOING) sélectionné, l'interface présente un formulaire
complet et intuitif divisé en trois sections principales :
la première section concerne les informations générales où l'utilisateur doit sélectionner le client (champ
obligatoire), définir la date de livraison prévue et ajouter des commentaires optionnels.
la deuxième section, dédiée aux articles de la commande, permet d'ajouter dynamiquement des produits via
un système de recherche avec autocomplétion, où chaque article nécessite la saisie de la quantité (obligatoire),
tandis que l'unité et le prix unitaire sont automatiquement remplis en fonction du produit sélectionné, avec la
possibilité d'ajouter ou de supprimer des articles grâce à des boutons "+" et "-", le système vérifiant en temps réel
la disponibilité du stock pour chaque article.
la troisième section, spécifique aux commandes sortantes, gère les détails de paiement en offrant différents
modes (ESPECES, CARTE, CHEQUE, VIREMENT), avec des champs supplémentaires pour les chèques
(numéro, banque, montant, dates d'émission et d'échéance). Tout au long du processus, le système effectue des
validations en temps réel, vérifiant la cohérence des montants, la disponibilité du stock et la complétude des
champs obligatoires, affichant des messages d'erreur contextuels si nécessaire. Une fois toutes les informations
validées, l'utilisateur peut soumettre la commande, qui est alors créée avec le statut "DRAFT" (Brouillon),
déclenchant un message de confirmation et une redirection vers la liste des commandes où la nouvelle commande

36
apparaît en haut de la liste.

Figure 21 : Formulaire de commande sortante.

2.3 Gestion des catégories

Figure 22 : Tableau des catégories.

S’il clique sur ‘Ajouter u n e c a t é g o r i e ’, il sera rediriger vers le formulaire pour ajouter une
catégorie.

37
 Figure 23 : Formulaire d’ajout d’une catégorie.

Figure 24 : Ajouter une sous-catégorie.

Figure 25 : Formulaire de modification d’une catégorie.

38
 Figure 26 : Pop-up de confirmation de suppression d’une catégorie.
L'administration des catégories permet à l'administrateur de gérer efficacement les différentes catégories
disponibles dans l'application. Lorsque l'administrateur clique sur "Catégories", il peut consulter la liste
complète des catégories existantes. À partir de là, il a la possibilité de modifier, supprimer ou chaque
catégorie. De plus, l'administrateur peut ajouter une nouvelle catégorie en saisissant les informations
nécessaires. Cette fonctionnalité offre à l'administrateur un contrôle complet sur la structure des catégories
de l'application.

39
 Conclusion et Perspectives
Au terme de cette période de stage et de réalisation du projet de fin d'études, j'ai acquis une expérience
précieuse dans le développement d'une application de gestion de stock complète et fonctionnelle. Ce projet
m'a permis de mettre en pratique mes compétences en développement d'applications web modernes, en
concevant une architecture robuste avec Spring Boot pour le backend et Angular pour le frontend.
J'ai appris à travailler avec des technologies et outils modernes tels que Java 17, Spring Boot, Spring
Security, Spring Data JPA, Angular, TypeScript, SCSS, MySQL, Docker, Git, GitHub Actions, et Maven.
Chaque étape du projet, de la conception initiale du système de gestion d'inventaire à l'implémentation des
fonctionnalités avancées comme les commandes d'achat, la gestion des fournisseurs et clients, et les
mouvements de stock, a été une opportunité pour moi d'améliorer ma compréhension des bonnes pratiques de
développement d'applications d'entreprise.
J'ai également appris l'importance de la sécurité des applications, de l'audit des opérations, et de
l'expérience utilisateur dans le succès d'une application de gestion d'entreprise.
Cette expérience a été enrichissante et formatrice, me préparant à relever de futurs défis dans le
domaine du développement d'applications d'entreprise. Je suis satisfait du résultat final qui inclut un
système complet de gestion de stock avec authentification JWT, gestion des rôles utilisateurs, suivi des
mouvements d'inventaire, génération de rapports, et interface utilisateur moderne et responsive.
Comme perspectives d'amélioration, j'envisage d'étendre mon application en intégrant des
fonctionnalités avancées telles qu'un système de paiement en ligne pour faciliter les transactions avec les
clients et fournisseurs, l'implémentation de notifications en temps réel via WebSocket pour les alertes de
stock, et le développement d'une version mobile de l'application pour permettre la gestion d'inventaire sur le
terrain. Je prévois également l'intégration de fonctionnalités d'analyse prédictive pour optimiser la gestion
des stocks et réduire les coûts d'inventaire.

40
 Références
[1] G. Booch, J. Rumbaugh et I. Jacobson, The Unified Modeling Language User Guide, Boston:
Addison-Wesley, 2005.

[2] «HTML For Beginners The Easy Way,» [En ligne]. Available: [Link] [Accès le 15 5
2025].
[3] «MDN Web Docs,» [En ligne]. Available:
[Link] [Accès le 15 5
2025].

[4] «Spring-boot,» [En ligne]. [Link] [Accès le 8 5 2025].

[5] «[Link],» [En ligne]. Available: [Link] [Accès le 18 5 2025].

[6] «Docker,» [En ligne]. Available: [Link] [Accès le 10

5 2025].

[8] «Angular,» [En ligne]. Available: [Link] [Accès le 11 5

2025].

[9] «Sparx Systems - Enterprise Architect,» [En ligne]. Available: [Link] [Accès
le 1 5 2025].

[10] «Git,» [En ligne]. Available: [Link] [Accès le 20 4 2025].

[11] «GitHub,» [En ligne]. Available: [Link] [Accès le 22 4 2025}.

41