Université Chouaib Doukkali

École Supérieure de Technologie

Sidi Bennour

RAPPORT DE STAGE TECHNIQUE

Filière :

Génie Informatique

Présenté par

El Fath Doha

Application mobile de gestion de stock

Sous la direction du :
PR. EL AROUSSI Mehdi

Membres du jury :

 Mr. EL AROUSSI Mehdi

 MR. CHERKAOUI Badreddine

Année Universitaire 2023 – 2024

 Remerciement

Je tiens tout d'abord à exprimer ma profonde gratitude envers M. EL AROUSSI Mehdi,

mon encadrant de projet, pour son soutien, ses conseils avisés et son expertise tout au long de
ce parcours académique. Ses précieux conseils ont été d'une aide inestimable dans la
réalisation de ce projet, et sa disponibilité et sa bienveillance ont grandement facilité mes
démarches.

Je souhaite également adresser mes remerciements à toute l'équipe pédagogique pour leur
encadrement et leur accompagnement tout au long de mes études. Leur engagement et leur
dévouement ont été essentiels dans mon développement académique et professionnel.

Je tiens à exprimer ma reconnaissance envers mes camarades de classe et mes amis pour
leur soutien constant et leurs encouragements tout au long de cette période d'études. Leurs
conseils et leur amitié ont contribué à rendre cette expérience enrichissante et mémorable.

Enfin, je voudrais remercier ma famille pour leur soutien indéfectible, leur encouragement
et leur compréhension tout au long de ce parcours. Leur amour et leur soutien ont été mes
sources de motivation les plus importantes.
Liste des figures

Figure 1:Digramme des tâches à effectuer ........................................................... 6

Figure 2: Diagramme de cas d'utilisation ...........................................................11

Figure 3:Diagramme de Classe ...........................................................................14

Figure 4:Diagramme de Séquence ...................................................................... 16

Figure 5:Visual Studio ......................................................................................... 19

Figure 6:Ionic Framework ...................................................................................20

Figure 7:Angular Framework ..............................................................................20

Figure 8:HTML,CSS,JS ....................................................................................... 20

Figure 9:Capacitor .............................................................................................. 21

Figure 10:Dexie ................................................................................................... 21

Figure 11:StarUML ............................................................................................. 22

Table des matières
Remerciement ........................................................................................2
Introduction Générale .......................................................................... 1
Chapitre1: Planification et Structuration du Projet ........................... 2
1.1 Problématique .............................................................................................................................. 3
1.2 Objectifs........................................................................................................................................ 4
1.3 Fonctionnalités Nécessaires ......................................................................................................... 4
1.4 Ordonnancement des tâches ........................................................................................................5
Conclusion ............................................................................................................................................6

Chapitre2:La conception et démarche du projet .................................7

2.1 Principes de conception : ................................................................................................ 8
2.2 Utilisation d'UML dans la conception ................................................................................8
2.3 Méthodologie de Développement .................................................................................... 9
2.3.1 Description de la Méthodologie de Développement ...................................................... 9
3.2 Justification du Choix de cette Méthodologie ..................................................................9
2.3.3 Phases du Développement et leur Importance ..............................................................9
2.3.4 Intégration de la Conception dans la Méthodologie de Développement ........................9
2.4 Conception du Projet .................................................................................................... 10
2.4.1 Diagramme de Cas d'Utilisation ........................................................................................... 10
Présentation du Diagramme de Cas d'Utilisation ...........................................................................10
Explication des Fonctionnalités Principales ...................................................................................10
2.4.1 Diagramme de Classe ............................................................................................................11
Entités Principales: .........................................................................................................................11
Les Relations Entre les Entités Principales: ...................................................................................13
Diagramme de Séquence ................................................................................................................14
Scénario d'utilisation : Inscription et Authentification .................................................................. 14
Scénario d'utilisation : Mise à jour des Données ........................................................................... 15
Scénario d'utilisation : Authentification du Livreur .......................................................................15

Chapitre3: réalisation du projet ......................................................... 18

4.1 Outils Techniques Utilisés .............................................................................................19
3.2 Présentation des formes de l’application .......................................................................22
3.2.1 Présentation de l'Interface Utilisateur ........................................................................22
3.2.1 Présentation de l'Interface Livreur ............................................................................ 37
 Introduction Générale
La gestion efficace des stocks constitue un élément essentiel dans divers domaines d'activité,
qu'il s'agisse de la vente au détail, de la logistique, de la fabrication ou de l'entreposage. Dans
un environnement commercial compétitif, une gestion de stock inefficace peut entraîner des
pertes financières, des retards de livraison, une insatisfaction client et une baisse de
productivité. Ainsi, la mise en œuvre d'une application de gestion de stock robuste et
fonctionnelle revêt une importance capitale pour les entreprises cherchant à optimiser leurs
opérations commerciales.

L'objectif principal du présent projet est de concevoir et de développer une application

de gestion de stock complète et intuitive. Cette application vise à répondre aux besoins des
entreprises en proposant une solution centralisée pour la gestion des produits, des fournisseurs,
des clients et des commandes. En intégrant ces fonctionnalités clés, notre application vise à
améliorer l'efficacité opérationnelle, à réduire les coûts de stockage et de gestion, ainsi qu'à
renforcer la satisfaction client grâce à une meilleure gestion des commandes et des délais de
livraison.

Dans ce rapport de projet de fin d'études, nous présenterons en détail la conception, le

développement et l'implémentation de notre application de gestion de stock. Nous aborderons
également les défis rencontrés lors du processus de développement, les solutions apportées et
les résultats obtenus à travers des tests et des évaluations approfondis. Enfin, nous discuterons
des perspectives d'avenir pour l'application et ses implications potentielles dans le domaine de
la gestion de stock.

1
Chapitre1: Planification et Structuration du

Projet
Ce que nous avons traité dans le présent chapitre. Une étude préalable où nous décelons la
problématique, les objectifs et l’ordonnancement des tâches.

2
1.1 Problématique

Dans le cadre de ce projet, nous cherchons à résoudre plusieurs problématiques liées à la

gestion traditionnelle des stocks et à la nécessité d'une solution informatisée. Voici quelques
points supplémentaires à considérer pour affiner la problématique :

Gestion Manuelle Coûteuse et Chronophage : La gestion des stocks sur papier peut être
coûteuse en termes de temps et d'efforts. La collecte et la mise à jour des informations sur les
clients, les fournisseurs, les produits et les commandes nécessitent souvent beaucoup de temps
et de ressources. Comment pouvons-nous réduire ces coûts et améliorer l'efficacité grâce à
une solution informatisée ?
Difficulté de Suivi en Temps Réel : La gestion manuelle des stocks rend difficile le suivi
en temps réel de l'état des commandes, notamment pour savoir si elles ont été livrées,
annulées ou sont en cours de livraison. Comment pouvons-nous fournir aux utilisateurs une
visibilité instantanée sur l'état de leurs commandes et simplifier le processus de suivi ?
Communication Difficile avec les Livreurs : Actuellement, la communication avec les
livreurs pour obtenir des informations sur les commandes est souvent fastidieuse et nécessite
des appels téléphoniques fréquents. Comment pouvons-nous faciliter cette communication en
permettant aux utilisateurs de l'application de suivre l'état de leurs commandes de manière
autonome et sans effort supplémentaire ?
Gestion des Comptes Utilisateurs : Un autre défi est la gestion efficace des comptes
utilisateurs, notamment la création et la gestion des comptes pour les livreurs. Comment
pouvons-nous simplifier ce processus et garantir que seuls les utilisateurs autorisés puissent
accéder et modifier les informations pertinentes ?

En abordant ces problématiques, notre projet vise à proposer une solution informatisée de
gestion de stock qui non seulement simplifie le processus de gestion pour les utilisateurs, mais
aussi réduit les coûts, améliore l'efficacité et offre une visibilité accrue sur l'état des stocks et
des commandes.

3
1.2 Objectifs

Développer une application de gestion de stock complète et fonctionnelle, offrant une

solution efficace pour la gestion des produits, des fournisseurs, des clients, le livreur et des
commandes.
Améliorer la précision des stocks en mettant en place un système de suivi en temps réel des
entrées et sorties de produits, permettant ainsi de minimiser les erreurs de stockage et les
ruptures de stock.
Simplifier le processus de commande en proposant une interface utilisateur intuitive et
conviviale, permettant aux utilisateurs de passer des commandes rapidement et facilement,
tout en offrant la possibilité de suivre l'état de leurs commandes en temps réel.
Optimiser l'efficacité opérationnelle en automatisant certaines tâches répétitives, telles que
la gestion des approvisionnements et des réapprovisionnements, afin de réduire les délais et
les coûts associés à la gestion de stock.
Améliorer la visibilité et le contrôle sur les opérations de stock en fournissant des rapports
détaillés et des analyses permettant aux gestionnaires de prendre des décisions éclairées et de
mieux anticiper les besoins futurs en stock.

En atteignant ces objectifs, notre projet vise à fournir une solution de gestion de stock
efficace et adaptée aux besoins des entreprises, contribuant ainsi à améliorer leur efficacité
opérationnelle et leur compétitivité sur le marché.
1.3 Fonctionnalités Nécessaires

 Système de gestion des produits : Permettre l'ajout, la modification et la

suppression des produits dans la base de données.
 Gestion des fournisseurs : Intégrer un module pour enregistrer les informations
des fournisseurs et gérer les relations avec ces derniers.
 Gestion des clients : Inclure des fonctionnalités pour enregistrer les
informations des clients et suivre les interactions avec ces derniers.
 Gestion des commandes : Permettre la création, la modification et le suivi des
commandes.
 Interface utilisateur conviviale : Développer une interface intuitive permettant
aux utilisateurs de naviguer facilement dans l'application et d'accéder rapidement aux
fonctionnalités principales.

4
  Suivi en temps réel des stocks : Mettre en place un système de suivi
automatique des entrées et sorties de produits pour maintenir des données de stock
précises.
 Interface de commande conviviale : Concevoir une interface de commande
simple et intuitive pour permettre aux utilisateurs de passer des commandes
rapidement et facilement.
 Suivi de l'état des commandes : Fournir aux utilisateurs un accès en temps réel
à l'état de leurs commandes, de la passation à la livraison, afin de faciliter le suivi et la
gestion des commandes en cours.
 Permettre la gestion des retours de produits enregistrés par les clients.

1.4 Ordonnancement des tâches

Le travail de développement de notre application de gestion de stock a été mené avec
rigueur et méthodologie, sous la direction attentive de notre encadrement. Afin de répondre
aux exigences de notre projet dans les délais impartis, nous avons mis en place une
organisation minutieuse des différentes étapes à suivre.

Le schéma ci-dessus représente les taches à réaliser

5
Tâches

Réalisation

conception

Analyse des besoins

L’utilisation
des
quelques
1 2 3 4 Semaines

Figure 1:Digramme des tâches à effectuer

Conclusion
En résumé, ce chapitre nous a fourni les outils nécessaires pour aborder notre projet de
manière stratégique et structurée. Il jette les bases d'une démarche méthodique qui guidera
notre travail tout au long du processus de développement de l'application de gestion de stock.

6
Chapitre2: La conception et démarche du

projet
Ce chapitre explore la conception et l'approche adoptées pour le projet, mettant en lumière l'utilisation
d'UML et la méthodologie de développement afin de garantir la création efficace et efficiente d'applications
mobiles répondant aux besoins spécifiques des utilisateurs.

7
2.1 Principes de conception :
Les applications mobiles doivent être conçues en tenant compte de plusieurs aspects clés
tels que l'ergonomie, la performance et la sécurité. L'ergonomie garantit une expérience
utilisateur intuitive, la performance assure une réactivité optimale de l'application, tandis que
la sécurité protège les données sensibles des utilisateurs. Ces principes fondamentaux jouent
un rôle crucial dans le processus de développement, assurant la satisfaction et la fidélisation
des utilisateurs tout en garantissant le succès de l'application sur le marché.

2.2 Utilisation d'UML dans la conception

L'UML (Unified Modeling Language) est un langage de modélisation standard utilisé pour
visualiser, spécifier, concevoir et documenter les systèmes logiciels. Dans ce projet, différents
diagrammes UML ont été utilisés pour représenter divers aspects de la conception :

1. Diagramme de cas d'utilisation : Ce diagramme représente les interactions entre les

utilisateurs et le système. Il identifie les fonctionnalités offertes par le système et illustre
comment les utilisateurs interagissent avec ces fonctionnalités.
2. Diagramme de classes : Ce diagramme représente la structure statique du système en
identifiant les classes, les attributs, les méthodes et les relations entre les classes. Il permet de
visualiser les entités du système et leurs interactions.
3. Diagramme de séquence : Ce diagramme illustre les interactions entre les différents
objets du système dans le temps. Il montre comment les objets communiquent entre eux pour
réaliser un scénario d'utilisation spécifique.

Chaque diagramme UML joue un rôle spécifique dans la conception du projet :

 Le diagramme de cas d'utilisation aide à définir les fonctionnalités du système du

point de vue de l'utilisateur, en identifiant les besoins et les exigences fonctionnelles.
 Le diagramme de classes permet de concevoir la structure du système en identifiant
les entités principales, leurs attributs et leurs relations.
 Le diagramme de séquence aide à comprendre le flux d'exécution des scénarios
d'utilisation en illustrant les interactions entre les objets du système.

En utilisant ces diagrammes UML, la conception du projet est clarifiée et formalisée, ce

qui facilite la communication entre les membres de l'équipe de développement et garantit une
meilleure compréhension des besoins et des fonctionnalités du système.

8
2.3 Méthodologie de Développement

2.3.1 Description de la Méthodologie de Développement

Nous avons choisi d'adopter une approche itérative pour le développement de notre
application mobile de gestion de stock. Cette méthodologie permet des cycles de
développement rapides, avec des phases de planification, de conception, de développement,
de test et d'itération continue.

3.2 Justification du Choix de cette Méthodologie

Le choix de cette méthodologie découle de la nature dynamique et évolutive de notre projet.
En raison de la complexité des exigences de gestion de stock, une approche itérative offre la
flexibilité nécessaire pour répondre aux changements potentiels tout en assurant une livraison
rapide de fonctionnalités essentielles.

2.3.3 Phases du Développement et leur Importance

Les phases clés du processus de développement comprennent la planification initiale, la
conception de l'architecture, le développement des fonctionnalités, les tests et la mise en
production. Chaque phase joue un rôle crucial dans la progression du projet et la qualité du
produit final. Par exemple, une conception solide garantit une base stable pour le
développement, tandis que des tests rigoureux assurent la fiabilité et la robustesse de
l'application.

2.3.4 Intégration de la Conception dans la Méthodologie de Développement

La conception initiale a été soigneusement intégrée dans notre approche itérative. Les
principes de conception et les diagrammes UML ont guidé les premières phases de
développement, établissant une base solide pour l'implémentation des fonctionnalités.
Cependant, notre méthodologie itérative nous a également permis d'ajuster et de modifier la
conception au fur et à mesure que nous progressions, en nous adaptant aux nouvelles
exigences et aux retours d'utilisateur. Cette flexibilité a été cruciale pour répondre
efficacement aux défis rencontrés tout au long du développement et garantir la cohérence et la
qualité de l'application finale.

9
2.4 Conception du Projet

2.4.1 Diagramme de Cas d'Utilisation

Présentation du Diagramme de Cas d'Utilisation

Le diagramme de cas d'utilisation représente les interactions entre les acteurs (utilisateurs)
et le système. Dans notre application, nous avons deux acteurs principaux : le livreur et
l'utilisateur.

Acteurs :
 Livreur : Le livreur est chargé de changer l'état de la commande et de consulter les
informations des clients.
 Utilisateur : L'utilisateur est responsable de la mise à jour (ajout, suppression,
modification) des produits, des commandes et des informations relatives aux clients, aux
fournisseurs et aux livreurs. L'utilisateur doit également s'authentifier pour accéder à ces
fonctionnalités.

Cas d'utilisation :
1. Authentification :
Le livreur et l'utilisateur peuvent s'authentifier en utilisant leurs informations
d'identification.
2. Gestion des Produits :
L'utilisateur peut ajouter, supprimer ou modifier des produits.
3. Gestion des Commandes :
L'utilisateur peut créer de nouvelles commandes, les modifier ou les supprimer.
Le livreur peut changer l'état des commandes, tel que "en cours de traitement", "en
attente de livraison", etc.
4. Gestion des Informations :
L'utilisateur peut consulter et mettre à jour les informations des clients, des
fournisseurs et des livreurs.

Explication des Fonctionnalités Principales

 Authentification : Les acteurs doivent s'authentifier pour accéder aux fonctionnalités
de l'application.
 Gestion des Produits : Permet à l'utilisateur d'ajouter, de supprimer ou de modifier
des produits dans le système.

10
  Gestion des Commandes : Permet à l'utilisateur de créer, modifier ou supprimer des
commandes, tandis que le livreur peut modifier l'état des commandes.
 Gestion des Informations : L'utilisateur peut consulter et mettre à jour les
informations des clients, des fournisseurs et des livreurs.

Figure 2: Diagramme de cas d'utilisation

En résumé, le diagramme de cas d'utilisation capture les principales interactions entre les
acteurs (utilisateurs) et le système, décrivant les fonctionnalités essentielles de l'application et
les actions que chaque acteur peut effectuer.

2.4.1 Diagramme de Classe

Le diagramme de classes représente la structure statique de l'application, identifiant les
classes, leurs attributs et les relations entre elles.

Entités Principales:
1. Produit:
 ID: Identifiant unique du produit (clé primaire)

11
  Titre: Nom du produit
 Image: Lien vers l'image du produit
 Prix: Prix du produit
 Quantité: Quantité du produit en stock
2. Utilisateur:
 ID: Identifiant unique de l'utilisateur (clé primaire)
 Nom: Nom de l'utilisateur
 Email: Adresse email de l'utilisateur
 Mot de passe: Mot de passe de l'utilisateur
3. Commande:
 ID: Identifiant unique de la commande (clé primaire)
 Date: Date de la commande
 État: État de la commande (en cours, livrée, annulée)
 NumTel: Numéro de téléphone du client
 Produits: Liste des produits commandés (relation many-to-many avec Produit)
 FraisLivraison: Frais de livraison de la commande
4. Fournisseur:
 ID: Identifiant unique du fournisseur (clé primaire)
 Nom: Nom du fournisseur
 Email: Adresse email du fournisseur
 NumTel: Numéro de téléphone du fournisseur
 Adresse: Adresse du fournisseur
5. Livreur:
 ID: Identifiant unique du livreur (clé primaire)
 Nom: Nom du livreur
 Mot de passe: Mot de passe du livreur
 Email: Adresse email du livreur
 NumTel: Numéro de téléphone du livreur
6. Client:
 ID: Identifiant unique du client (clé primaire)
 Nom: Nom du client
 Email: Adresse email du client
 NumTel: Numéro de téléphone du client
 Adresse: Adresse du client

12
Les Relations Entre les Entités Principales:

1. Utilisateur:
 Gère plusieurs Fournisseurs.
 Gère plusieurs Clients.
 Gère plusieurs Livreurs.
 Gère plusieurs Produits.
 Passe plusieurs Commandes.
2. Fournisseur:
 Est géré par un Utilisateur.
3. Client:
 Est géré par un Utilisateur.
 Passe plusieurs Commandes.
4. Livreur:
 Est géré par un Utilisateur.
 Livre plusieurs Commandes.
5. Produit:
 Est géré par un Utilisateur.
 Est fourni par un Fournisseur.
6. Commande:
 Est créée par un Utilisateur (Client).
 Est associée à un Utilisateur (Client) qui l'a passée.
 Est livrée par un Utilisateur (Livreur).
 Comprend plusieurs Produits fournis par différents Fournisseurs.

13
 Figure 3:Diagramme de Classe
Le diagramme de classe présente la structure statique de notre système de gestion de
stock, décrivant les entités principales telles que les utilisateurs, les fournisseurs, les
clients et les produits, ainsi que leurs relations et attributs associés.

Diagramme de Séquence
Le diagramme de séquence illustre les interactions entre les objets du système dans le
temps pour un scénario spécifique.

Scénario d'utilisation : Inscription et Authentification

1. L'utilisateur accède à l'application pour la première fois.
2. L'utilisateur choisit l'option d'inscription et fournit ses informations personnelles (nom,
email, mot de passe).
3. Le système vérifie les informations fournies par l'utilisateur.
4. Si les informations sont correctes, le système enregistre l'utilisateur dans la base de
données et affiche l'interface utilisateur.

14
 5. L'utilisateur peut maintenant accéder aux fonctionnalités de l'application, y compris la
gestion des commandes, des produits et des informations des clients, fournisseurs et livreurs.

Scénario d'utilisation : Mise à jour des Données

1. L'utilisateur effectue une mise à jour sur une commande, un produit ou des
informations personnelles.
2. Le système enregistre les modifications dans la base de données.
3. L'utilisateur visualise les résultats de la mise à jour sur l'interface utilisateur.

Scénario d'utilisation : Authentification du Livreur

1. Le livreur accède à l'application et choisit l'option d'authentification.
2. Le livreur fournit son email et son mot de passe.
3. Le système vérifie les informations d'authentification du livreur.
4. Si les informations sont correctes, le système affiche l'interface du livreur avec les
fonctionnalités spécifiques à ce rôle.
5. Sinon, le système affiche un message d'erreur indiquant que les informations
d'authentification sont incorrectes.

15
Figure 4:Diagramme de Séquence

16
 Le diagramme de séquence illustre les interactions dynamiques entre les différentes entités
du système lors de l'exécution d'un scénario spécifique, offrant une vue détaillée du flux de
contrôle et des échanges d'informations entre les objets.
Conclusion
Dans ce chapitre, la conception a été établie avec précision grâce à l'utilisation d'UML,
tandis que la méthodologie itérative a été choisie pour sa flexibilité. L'intégration
harmonieuse de la conception dans le processus de développement a été soulignée,
garantissant ainsi une progression efficace du projet.

17
Chapitre3: réalisation du projet

Dans ce chapitre, nous explorons les outils essentiels qui ont été utilisés pour la conception, le
développement et la mise en œuvre de notre projet de gestion stock

18
3.1 Outils Techniques Utilisés
Pour le développement de l'application mobile, une série d'outils et de technologies ont été
sélectionnés pour répondre aux besoins spécifiques du projet. Voici une description détaillée
de chaque outil utilisé :

Environnements de Développement Intégrés (IDE) :

Ionic CLI :
 Ionic CLI (Command Line Interface) est un outil en ligne de commande utilisé
pour la création, la gestion et le déploiement de projets Ionic. Il offre une gamme de
commandes pour générer des composants, démarrer un serveur de développement
local, compiler et construire des applications pour différentes plateformes, notamment
Android, iOS et le Web.
Visual Studio :
 Visual Studio est un environnement de développement intégré (IDE) développé
par Microsoft. Il offre une suite complète d'outils pour le développement
d'applications mobiles, web et bureau, prenant en charge une variété de langages de
programmation, y compris C#, JavaScript et TypeScript.

Figure 5:Visual Studio

Frameworks et Langages :
Ionic Framework :
 Ionic Framework est un framework open-source utilisé pour le développement
d'applications mobiles multiplateformes. Il utilise des technologies web standards telles que
HTML, CSS et JavaScript pour la création d'interfaces utilisateur riches et interactives. Ionic
offre une multitude de composants prêts à l'emploi et une architecture robuste pour la
construction d'applications performantes et évolutives.

19
 Figure 6:Ionic Framework

Angular :
 Angular est un framework JavaScript développé par Google, utilisé pour la
construction d'applications web à grande échelle. Dans le contexte d'Ionic, Angular est
utilisé comme framework principal pour structurer et organiser le code de l'application,
offrant des fonctionnalités telles que la gestion des routes, la liaison de données, et la
création de composants réutilisables.

Figure 7:Angular Framework

HTML / JS / SCSS :
 HTML (HyperText Markup Language), JavaScript et SCSS (Sassy CSS) sont
les langages de programmation utilisés pour le développement de l'interface utilisateur
de l'application. HTML est utilisé pour structurer le contenu des pages, JavaScript
pour la logique et l'interaction, tandis que SCSS est utilisé pour styliser les éléments
de l'interface utilisateur de manière modulaire et réutilisable.

Figure 8:HTML,CSS,JS
Services et Outils :
Capacitor :

20
  Capacitor est un outil de développement d'applications mobiles open-source,
créé par l'équipe Ionic, permettant de déployer des applications web modernes sur
différentes plateformes, y compris Android, iOS et le Web. Capacitor offre des
fonctionnalités telles que l'accès aux fonctionnalités natives des appareils, la gestion
des plugins et la compilation des applications pour différentes plateformes.

Figure 9:Capacitor
Dexie
 Dexie est une bibliothèque JavaScript utilisée pour l'accès aux bases de
données indexées, offrant une interface simple et puissante pour interagir avec les
bases de données locales dans les applications web. Dans le contexte de l'application
mobile, Dexie est utilisé pour gérer la base de données locale, permettant le stockage
et la récupération des données de manière efficace et sécurisée.

Figure 10:Dexie
Logiciel de Conception :
5. StarUML :
 StarUML est un logiciel de modélisation et de conception UML (Unified
Modeling Language) qui offre une interface conviviale pour créer des diagrammes de
classes, de séquence, de cas d'utilisation, etc.

21
 Figure 11:StarUML

En utilisant ces outils et technologies, nous avons pu développer une application mobile
robuste et performante, offrant une expérience utilisateur riche et engageante sur une variété
de plateformes.

3.2 Présentation des formes de l’application

L’application contient 2 interface (utilisateur et client),et chaque interface contient
plusieurs pages sont présentées pour offrir une expérience fluide aux utilisateurs. La page
d'authentification est la première étape, où les utilisateurs saisissent leurs identifiants pour
accéder à l'application. Une fois authentifiés, la page de connexion leur permet de se
connecter à leur compte. La page principale, dotée d'un menu intuitif, offre une navigation
aisée vers les différentes sections de l'application. Les pages dédiées aux produits permettent
aux utilisateurs de visualiser, ajouter, modifier ou supprimer des produits de l'inventaire. Les
pages des commandes permettent de consulter et de gérer les commandes passées par les
clients. Enfin, les pages relatives aux informations clients permettent de visualiser et de
modifier les détails des clients enregistrés.

3.2.1 Présentation de l'Interface Utilisateur

Dans l'interface utilisateur, plusieurs pages sont présentées pour offrir une expérience
fluide aux utilisateurs.

1. Interface d'Authentification :
a. Cette page présente un formulaire où les utilisateurs peuvent saisir leurs
identifiants (nom d'utilisateur, mot de passe) pour accéder à l'application.

22
b.

23
2. Interface de Connexion :
a. Sur cette page, les utilisateurs peuvent se connecter à leur compte en
fournissant leurs informations d'authentification. Une fois connectés, ils sont
redirigés vers la page principale de l'application.

b.

24
3. Page Principale avec Menu :
a. L'écran principal affiche un menu de navigation permettant aux utilisateurs de
choisir parmi différentes sections de l'application telles que les produits, les
commandes, les clients, etc.

b.

25
 c.
4. Interface des Produits :
a. Cette page affiche une liste des produits disponibles dans l'inventaire, avec des
détails tels que le nom, la quantité en stock et le prix.

26
 b.
5. Interface d'Ajout de Produit :
a. Sur cette page, les utilisateurs peuvent ajouter de nouveaux produits à
l'inventaire en saisissant les informations nécessaires telles que le nom, la
quantité et le prix.

27
 b.
6. Interface de Modification ou Suppression de Produits :
a. Cette page permet aux utilisateurs de modifier les détails des produits existants
ou de les supprimer de l'inventaire si nécessaire.
7. Interface des Commandes :
a. Cette page affiche une liste des commandes passées par les clients, avec des
informations telles que la date de la commande, l'état actuel et le montant total.

28
 b.
8. Interface d'Ajout de Commande :
a. Sur cette page, les utilisateurs peuvent ajouter de nouvelles commandes au
système en saisissant les informations nécessaires, telles que le client concerné

29
 par la commande, le montant de la livraison, la quantité des produits, le statut
de la commande et le montant total qui sera calculé automatiquement.

b.
9. Interface des Livreurs :

30
 a. Cette page permet aux utilisateurs d'accéder aux informations relatives aux
livreurs enregistrés dans le système, telles que leur nom, leur adresse e-mail et
leur numéro de téléphone.

b.
10. Interface d'Ajout de Livreur :
a. Sur cette page, les utilisateurs peuvent ajouter de nouveaux livreurs au système
en saisissant les informations requises, telles que le nom, l'adresse e-mail et le
numéro de téléphone du livreur.

31
 b.
11. Interface de Modification ou Suppression de Livreur :
a. Cette page permet aux utilisateurs de modifier les détails des livreurs existants
ou de les supprimer du système si nécessaire.
12. Interface des Fournisseurs :
a. Cette page affiche une liste des fournisseurs enregistrés dans le système, avec
des détails tels que leur nom, leur adresse e-mail et leur numéro de téléphone.

32
 b.
13. Interface d'Ajout de Fournisseur :
a. Sur cette page, les utilisateurs peuvent ajouter de nouveaux fournisseurs au
système en saisissant les informations requises, telles que le nom, l'adresse e-
mail et le numéro de téléphone du fournisseur.

33
 b.
14. Interface de Modification ou Suppression de Fournisseur :
a. Cette page permet aux utilisateurs de modifier les détails des fournisseurs
existants ou de les supprimer du système si nécessaire.
15. Interface des Clients :

34
a. Cette page affiche une liste des clients enregistrés dans le système, avec des
détails tels que leur nom, leur adresse e-mail et leur numéro de téléphone.

b.

35
16. Interface d'Ajout de Client :
a. Sur cette page, les utilisateurs peuvent ajouter de nouveaux clients au système
en saisissant les informations requises, telles que le nom, l'adresse e-mail et le
numéro de téléphone du client.

b.
17. Interface de Modification ou Suppression de Client :

36
 a. Cette page permet aux utilisateurs de modifier les détails des clients existants
ou de les supprimer du système si nécessaire.

3.2.1 Présentation de l'Interface Livreur

Dans l'interface livreur, plusieurs pages sont présentées pour offrir une expérience
fluide aux utilisateurs.

1. Page Principale :

2. Interface de Consultation des Informations des Clients :

37
 a. Sur cette page, livreur peut consulter les informations détaillées des clients
enregistrés dans le système, y compris leur nom, leur adresse e-mail et leur
numéro de téléphone.

b.
3. Interface de Modification de l'État des Commandes :
a. Cette page permet aux livreurs de modifier l'état des commandes, par exemple
en mettant à jour l'état de livraison de la commande.
4. Interface des Commandes :
a. Cette page affiche une liste des commandes passées par les clients, avec des
informations telles que la date de la commande, l'état actuel et le montant total.

38
b.

39
 Conclusion Générale
En conclusion, ce projet de création et de développement d'une application mobile de
gestion de stock a été une expérience enrichissante et instructive. À travers ce rapport, nous
avons exploré en détail chaque aspect du processus, de la conception à la réalisation, en
passant par la planification et la structuration du projet. Nous avons mis en lumière les
méthodologies de développement utilisées, les outils et technologies employés, ainsi que les
différentes formes de l'application.

Ce projet nous a permis de mettre en pratique nos connaissances théoriques acquises tout
au long de notre parcours d'études. Il nous a également confrontés à des défis réels, nous
poussant à faire preuve de créativité, de résilience et de rigueur dans notre approche.

En rétrospective, nous avons appris l'importance de la planification minutieuse, de la

collaboration efficace et de l'adaptabilité face aux changements. Nous sommes fiers du
résultat obtenu et confiants dans le potentiel de cette application à répondre aux besoins des
utilisateurs et à apporter une valeur ajoutée dans le domaine de la gestion de stock.

Enfin, ce projet nous a également offert l'opportunité de perfectionner nos compétences

techniques, de renforcer notre esprit d'analyse et de développer notre capacité à résoudre des
problèmes complexes. Nous espérons que ce rapport servira de source d'inspiration et de
référence pour d'autres projets similaires à l'avenir.

Nous tenons à exprimer notre gratitude envers toutes les personnes qui ont contribué de
près ou de loin à la réussite de ce projet, ainsi qu'à nos encadrants et mentors pour leur soutien
continu et leurs précieux conseils.

40
 Bibliographie

Référence Auteur Livre

1 Pr.EL AROUSSI Mehdi Cours sur UML et Génie Logiciel

2 Pr. Toumi Cours sur JavaScript, HTML et CSS

Webographie

Référen Site web

ce
4 https://ionicframework.com/docs

5 https://capacitorjs.com/docs

6 https://angular.io/docs

41