Rapport Finale

République Tunisienne
Ministère de L’Enseignement Supérieur et de la Recherche Scientifique

Institut Supérieur des Etudes Technologiques de Kélibia
Rapport de stage de fin d’études

Elaboré en vue de l’obtention du diplôme de
Licence Appliquée en Technologies de l’Informatique

Parcours
Développement des Systèmes d’Information

Sujet
Conception, Développement application web de gestion

d'espace e-commerce et application mobile de
gestion de livraison
Organisme d'accueil
Gudzbulk
Réalisé par : MAKHLOUF Omar
GARSALLAH Ismail
Encadré par :
ZGUED Oussema : responsable générale de la société
WAHEB Aymen : Enseignant Technologue a ISET kélibia
Année universitaire : 2019 – 2020

Dédicaces
A ma très chère mère
Quoi que je fasse ou que je dise, je ne saurai point te remercier

comme il se doit. Ton affection me couvre, ta bienveillance me guide
et ta présence à mes côtés a toujours été ma source de force pour
affronter les différents obstacles.
A mon très cher père
Tu as toujours été à mes côtés pour me soutenir et m’encourager.

Que ce travail traduit ma gratitude et mon affection.
A mes très chers frères Ahmed et Rayen et ma belle-sœur Zaineb
Puisse Dieu vous donne santé, bonheur, courage et surtout réussite
A tous mes amis qui m’ont toujours encouragé, et à qui je souhaite

plus de succès.
A tous ceux que j’aime.
Merci !
Omar
i
Dédicaces
Avec l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui,

quels que soient les termes embrassés, je n’arriverais jamais à leur exprimer mon
amour sincère.
❖ A l’homme, mon précieux offre du dieu, qui doit ma vie, ma réussite et tout
mon respect : mon cher père Mohamed.
❖ A la femme qui a souffert sans me laisser souffrir, qui n’a jamais dit non à
mes exigences et qui n’a épargné aucun effort pour me rendre heureuse :
mon adorable mère Sémia.
❖ A mes belles sœurs Asma & Zaineb, qui n’ont pas cessée de me conseiller,
encourager et soutenir tout au long de mes études. Que Dieu les protège et
leurs offre la chance et le bonheur.
❖ A mes grands-parents, mes oncles et mes tantes. Que Dieu leur donne une
longue et joyeuse vie.
❖ A tous les cousins, les voisins et les amis que j’ai connu jusqu’à
maintenant. Merci pour leurs amours et leurs encouragements.
Ismail
ii
Remerciements
Avant de passer à la présentation de notre travail, nous voulons exprimer notre

gratitude et reconnaissance envers les personnes qui nous ont aidé à réaliser ce projet
de près ou de loin
Nous tenons à remercier tout particulièrement et a témoigner toute notre

reconnaissance à M. Oussema ZGUED notre encadrant au sein de Gudzbulk
D’avoir accordé toutes les chances de réussir ce projet et pour l’expérience
enrichissante et pleine d’intérêt qu’il nous a fait vivre durant la période de stage
Nous exprimons notre parfaite reconnaissance et nos remercîments à notre encadrant

M. Aymen WAHEB pour le temps qu’il a bien voulu consacrer à l’encadrement et
le suivi de ce travail, les conseils qu’il nous a prodigué durant les réunions qui ont
rythmées les différentes étapes de la rédaction de ce rapport, les discussions que nous
avons tenues ont permis d’orienter ce travail d’une manière sûre et pertinente. Nous
le remercions vivement pour son effort, sa disponibilité et surtout ses conseils qui
ont largement contribué à rehausser la valeur de ce travail.
Que les membre de jury trouvent, ici l’expression de nos remercîments pour
l’honneur qu’ils nous font en acceptant de juger ce travail.
Nous remercions, enfin, tous ceux qui, d'une manière ou d'une autre, ont contribué à
la réussite de ce travail et qui n'ont pas pu être cités ici.
iii
Table des matières
Dédicaces i
Dédicaces ii
Remerciements iii
Table des matières iv
Liste des figures vi
Liste des tableaux vii
Liste des abréviations viii
Introduction générale 1
Chapitre 1 : Cadre du projet 2
Introduction 2
1. Présentation d'accueil 2
1.1. Présentation de l'organisme 2
1.2. Présentation de Organigramme 3
1.3. Présentation Des services 3
2. Etude préalable 3
2.1. Etude et critique de l’existant : 3
2.2. Les objectifs : 4
2.3. Présentation de la solution proposée : 5
2.4. Journal de stage: 5
Conclusion 6
Chapitre 2 : Analyse et spécification des besoins 7
Introduction 7
1. Identification des acteurs : 7
2. Besoins fonctionnels 7
3. Besoins non fonctionnels 8
4. Méthodologie adoptée : 9
4.1. Définition 9
4.2. Choix de cycle de vie 9
4.3. Modèle incrémentale 9
5. Digramme des cas d’utilisation 10
5.1. Digramme des cas d’utilisation global : 10
5.2. Description des cas d’utilisation 13
5.2.1. Diagramme de cas d’utilisation de l’administrateur 13
5.2.2. Diagramme de cas d’utilisation de client 16
5.2.3. Diagramme de cas d’utilisation de livreur 18
Conclusion 19
Chapitre 3 : Conception 20
iv
Introduction 20
1. Langage utiliser : UML (Unified Modeling Langage) : 20
1.1. Définition 20
1.2. Les objectifs 20
1.3. Conception de l’application 21
1.4. Diagramme de la vue statique 21
1.5. Diagramme de la vue dynamique 25
Conclusion 31
Chapitre 4 : Réalisation 32
Introduction 32
1. Architecture du projet 32
1.1. Partie web 32
1.2. Partie mobile 32
2. Environnement matérielle et logicielle 33
2.1. Environnement matérielle 33
2.2. Environnement logicielle 34
3. Choix des technologies de développement 34
3.1. Back-end web 34
3.2. Front-end web 35
3.3. Application mobile 35
4. Etapes hébergement 36
4.1. Hébergement back-end 36
4.2. Hébergement Front-end 37
5. Interfaces réalisées 39
5.1. Les interface au niveau de la partie web 39
5.1.1. Coté client 39
5.1.2. Coté administrateur 47
5.2. Les interface au niveau de la partie mobile 51
Conclusion générale 55
Webographie i
v
Liste des figures
Figure 1 Logo société 2

Figure 2 Organigramme de société 3
Figure 3 Journal du stage 6
Figure 4 Modèle incrémentale 9
Figure 5 Diagramme cas d'utilisation global 11
Figure 6 Cas d’utilisation de l’administrateur 13
Figure 7 Diagramme d'authentification 14
Figure 8 Cas d’utilisation de gère produit 15
Figure 9 Cas d’utilisation de client 16
Figure 10 Cas d'utilisation de livreur 18
Figure 11 Diagramme de classe global 22
Figure 12 Diagramme de séquence « authentification » 26
Figure 13 Diagramme de séquence « passer commande » 27
Figure 14 Diagramme de séquence « modifier état commande » 28
Figure 15 Diagramme de séquence « ajouter article » 29
Figure 16 Diagramme de séquence « modifier article » 30
Figure 17 Diagramme de séquence « ajouter article au panier » 31
Figure 18 L’architecture en trois tiers 32
Figure 19 modèle MVC 33
Figure 20 Télécharger CLI Heroku 36
Figure 21 Configuration base donné 37
Figure 22 Déployer l’application 37
Figure 23 « build » de l’application Angular 38
Figure 24 « Upload » les fichiers dans le serveur FTP 38
Figure 25 Page s'authentifier 39
Figure 26 Page s'inscrire 39
Figure 27 Page d’accueil 40
Figure 28 page categorie 41
Figure 29 page recherche 42
Figure 30 Page détails produit 43
Figure 31 Page gère panier 44
Figure 32 page passer commande 44
Figure 33 page profile 45
Figure 34 page détails commande 45
Figure 35 page liste envie 46
Figure 36 page modifier mot de passe 47
Figure 37 Page authentification admin 47
Figure 38 Page d’accueil administrateur 48
Figure 39 page historique commande 49
Figure 40 page liste produit 49
Figure 41 page ajout produit 50
Figure 42 page modifier produit 50
Figure 43 page modifier staff 51
Figure 44 page authentification livreur 51
Figure 45 liste commande a livrées 52
Figure 46 page détails commande 53
Figure 47 confirmation choix état commande 53
Figure 48 page historique commande 54
vi
Liste des tableaux
Tableau 1 description de sous cas d'utilisation "s'authentifier" 14

Tableau 2 Description de sous cas d'utilisation " Supprimer produit " 15
Tableau 3 Description de sous cas d'utilisation " Ajouter produit " 16
Tableau 4 Description de sous cas d'utilisation " Rechercher produit " 17
Tableau 5 Description de sous cas d'utilisation " passer commande " 17
Tableau 6 Description de sous cas d'utilisation " Modifier état commande " 18
Tableau 7 Liste des attributs de la classe commande 24
Tableau 8 Liste des attributs de la classe User 24
Tableau 9 Liste des attributs de la classe Commande_prod 25
Tableau 10 Table caractéristique 1 33
Tableau 11 Table caractéristique 2 33
vii
Liste des abréviations
A
API : Application Programming Interface
C
CSS : cascading style sheets (Feuilles de style en cascade)
CLI : Command-line
f
FTP : Protocole de transfert de fichier
H
HTML : Hypertext Markup Language.
I
IDE : Integrated Development Environment
J
J2EE : Java 2 Enterprise Edition
JDBC : java database connectivity
JS : JavaScript
JSON : JavaScript Object Notation
JWT : JSON Web Token
M
MVC : Model View Controller
P
PHP : Personal Home Page.
viii
S
SQL : Structured Query Language
U
UML : Unified Modeling Language
W
WAMP : Windows Apache MySQL Perl ou PHP ou Python
ix
Introduction générale
Actuellement, le monde connait une avance technologique considérable dans tous les
secteurs comme le domaine du commerce électronique. Cette évolution est due grâce à
l’informatique qui est devenue de plus en plus important surtout après le virus de Covid19, vue que
le monde a constaté qu’il faut informatiser tous les domaines pour assurer la continuité.
Les boutiques en ligne sont depuis des années, largement conseillés pour les sociétés qui se basent
sur la vente des produits et même des services. Ces types de sites web représentent un dispositif
global fournissant aux clients un pont de passage à l'ensemble des informations des produits, et
des services à partir d'un portail unique en rapport avec son activité.
D'une autre part ces sites offrent à la société la possibilité de profiter de cet espace pour exposer
ces produits à une plus large base de clientèle.
Notre projet est réalisé dans le cadre de projet de fin d'étude ayant comme objectif principal :
Développement application web de gestion d'espace e-commerce et application mobile de gestion
de livraison avec des outils qui sont considéré performant et solide « Spring, Angular, Ionic »
en se basant sur l’architecture 3 tiers pour garantir la bonne gestion, performance et rapidité de
notre application.
Le présent rapport, qui expose ce travail, est composé de quatre chapitres structurés comme suite
Dans le premier chapitre, nous présentons l'organisme d'accueil et on déduire l'étude de

l’existant de notre application web
Dans le deuxième chapitre, nous identifions les besoins fonctionnels ainsi que les acteurs de
notre application avec la méthodologie adoptée.
Dans le troisième chapitre, nous présentons les détails de conception et de modélisation des
différentes entités de l'application.
Dans le quatrième chapitre, on va récapituler les phases de réalisation et présente l'aspect

fonctionnel de notre application.
Finalement, le rapport s'achève par une conclusion générale rappelant les réalisations
essentielles de notre travail
1
Chapitre 1 : Cadre du projet

Introduction
Avant d’entamer les différentes parties de ce rapport, il convient de présenter

l’environnement dans lequel il a été mené. En effet, c’est l’environnement que dépend, en grande
partie, l’efficacité et la qualité d’un stage.
Ce chapitre présente tout d’abord l’organisme d’accueil, ensuite on va présenter l'étude

préalable qui nous mène à dégager la problématique et les objectifs du projet, puis on finira par
la solution proposée.
1. Présentation d'accueil
1.1. Présentation de l'organisme
Gudzbulk est une agence commerciale créée en 23/07/2019, gérée par Monsieur Oussema
Zgued, elle contient des équipements informatiques dans différents domaines :
● Design
● Architecture d’intérieur :
● Développeur : web et mobile.
Gudzbulk comporte comme matériels 6 ordinateurs, 2 pc portables, serveur, tableau et 2 Haut-

parleur. Pour les logiciels, ils se diffèrent d’un domaine à autre. Designer (Photoshop,
illustrateur, 3D max, Autocad, After effect, etc.…) Développeur (sublime, Node Js etc.…).
Figure 1 Logo société
2
1.2. Présentation de Organigramme
Figure 2 Organigramme de société
1.3. Présentation Des services

Plateforme web : Développement et mise en place de plateforme de vente en ligne. Site
institutionnel, site vitrines, e-commerce, portail intemet...
Innovation mobile : Création et modification des solutions mobile.
Design : Design et conception, création des logos et développement des chartes graphiques.
Architecture d’intérieur : création des plans 3D
2. Etude préalable
L'étude préalable est la première étape pour la réalisation d'un projet. Pour évaluer une
application il faut tout d'abord analyser et critiquer l’existant. Le résultat de cette section a pour
objectif d'étudier les solutions de gestion d’espace e-commerce et détermine les objectifs à
atteindre dans notre application web
2.1. Etude et critique de l’existant :

Pour acheter un article de la marque BlueTwince, le client doit se déplacer directement aux
boutiques afin de chercher un article qui satisfait ses besoins. Ces déplacements peuvent être
inutiles et même peuvent provoquer un gaspillage de temps et au même temps a un impact
négatif sur la santé vu les conditions du pays avec ce dernier virus. D’ailleurs, vu l’état de pays
durant la dernière période de confinement le client n’a pas eu le courage pour se déplacer et
choisir ses besoins même le vendeur n’a aucun moyen pour mettre à disposition ses annonces
de vente de ces plusieurs produits vu qu’il n’a pas un site web , à l’exception des supports
traditionnels tels que les petites affiches du solde et les article de la nouvelle collection de plus
3
la gestion de stock d’un produit qu’il doit être vérifier à chaque fois que le client le choisie.
Ainsi, le e-commerce présente un moyen fiable et automatisé permettant au commerçant
d’informer un grand nombre de ses clients des offres de ses nouveaux produits. Divers autres
traitements sont, d’ailleurs, sources de problèmes, adoptant les méthodes traditionnelles de
travail tel que :
● Le règlement des paiements qui se fait en espèce ou par chèque, sur place (boutique).
● L’enregistrement des clients se fait manuellement sur papier (carte fidélité) vu qu’elle
ne dispose pas de plateforme qu’enregistre chaque client qui fait des achats de cet
marque.
● Les produits sont classés par catégorie (Homme, Femme, Enfant) et par sous-catégorie
non liées et non hiérarchisées, ce qui rend la recherche plus pénible.
● La vérification de disponibilité de produit vue le grand nombre de stock n’existe pas vu
qu’il ne dispose d’aucun outil de recherche
● La vérification des taille et quantité des produit désirées par le client est introuvable
alors que l’employée est obligée à chaque fois de se diriger vers le dépôt pour les vérifier
manuellement ce qui rend cette opération non pratique pour l’employé en termes de
temps et ressource et non satisfaisante pour le client
● La gestion des employées chargés de livraison se fait manuellement de tel façons que
l’administrateur ne sache pas qui est le livreur en charge de cette région et celui qui est
encore en congé
● La gestion des commandes prêt à livrer vu que la marque BlueTwins ne dispose pas
d’un service de livraison
2.2. Les objectifs :

D’après l’étude du marché, La majorité des applications de gestion des espace e-commerce
offrent des outils et service permettant, par exemple la livraison des articles à l’adresse demandé
par le client, la bonne recherche des produits efficace pour le client … Étant donné que
l’objectif majeur de notre application web, qui est basé sur l’architecture 3 tiers, est d’offrir une
espace générique, conviviale et surtout automatisé pour, essentiellement, faciliter à
l’administrateur de stocker les informations de produit tel que la quantité disponible, les
catégories, les tailles, la gestion des clients, et surtout la gestion de service de livraison pour leur
clientèle. Du coup on les résume dans les points qui suite
● Gérer les produits qui permet la vérification de disponibilité de ce dernier.

● Gérer les commandes pour qu’il puisse savoir l’état s’il est bien livré ou la vérifier avec
le client en cas de besoin
● Gérer le staff pour les classifier s’ils sont au congé ou bien ont changé leur adresse.
4
● Gérer les livraisons pour que l’administrateur peut suivre le travail de son staff
● Gérer les boutiques pour ajouter plus de point de livraison pour leur clients
Pour le service de client, en effet cette application web donne aux clients la possibilité de
s’inscrire, consulter les produits existants, passer leur commande en ligne, et de recevoir une
confirmation immédiate à travers le téléphone et enfin choisir le mode de livraison (boutique ou
domicile).
Pour l’application mobile c’est destiné pour le staff de livraison pour gérer les commandes prêtes
à livrer
2.3. Présentation de la solution proposée :

Pour résoudre les problèmes cités dans la partie étude et critique de l’existant, nous proposons
de créer une application simple et efficiente avec l’architecture 3 tiers et développé par des
technologies solides, rapides et performants (Angular, Spring, Ionic) qui vont assurer la bonne
manipulation des différentes opérations
La solution est de concevoir et développer une application web permettant de satisfaire au

maximum possible les différents besoins des clients et au même temps l’administrateur. Pour
cela l'application doit répondre aux besoins d'utilisateur et permettre d'accéder facilement et
rapidement aux informations. Aussi il doit contenir une interface conviviale, graphiquement
attirante et moderne. Puis notre application doit regrouper les produits de différentes catégories
pour faciliter l'achat, gagner le temps et l'argent aussi et par la suite augmenter le chiffre d'affaire
qui présente l'objectif principal de notre client.
2.4. Journal de stage:

En vue d’implémenter la solution, j’ai dû suivre ce planning d’objectifs présenté sous forme d’un
diagramme de Gantt.
5
Figure 3 Journal du stage
Conclusion
Dans ce premier chapitre, on a défini le champ de notre étude suivi d’une étude de l’existant
afin de préciser notre objectif à atteindre vers la fin accompagnée d’une solution proposée.
Dans le chapitre qui suite, on présente la spécification des besoins et la modélisation de la
solution proposée
6
Chapitre 2 : Analyse et spécification des besoins
Introduction
Ce chapitre vise à capter les besoins ainsi qu'à identifier les rôles des utilisateurs qui utilisent
l’application et préparer le plan de réalisation de notre projet. Dans un premier lieu, nous
commençons par définir les acteurs, par la suite nous spécifions les besoins fonctionnels et non
fonctionnels. Au niveau de la deuxième partie nous allons présenter la méthodologie qu’on va
adopter pour notre projet en analyserons ces besoins par l’émise de diagramme des cas
d’utilisations générale
1. Identification des acteurs :

L’application est composée de 4 acteurs, qui sont :
● Administrateur :
C’est la personne possédant le privilège de plus haut niveau. Il se charge de la gestion

des staff, produit, boutique, commande…
● Livreur
C’est la personne qui se charge de la modification des états des commande lors de la
livraison
● Client
C’est la personne qui peut s’authentifier à notre site web e-commerce, choisir des
articles, les ajoutes dans le panier et finalement finaliser sa commande en choisissant
l’adresse de livraison
● Visiteur
C’est la personne qui peut visualiser nos articles et les mettre dans le panier sans faire
l’authentification
2. Besoins fonctionnels
On peut diviser les besoins fonctionnels en trois parties, la première consiste à la création et la
mise en place des pages accessibles par le visiteur et le client c’est le front office.
La deuxième partie consiste à la mise en place des plusieurs pages de gestion pour
l’administrateur c’est le back office.
7
Enfin la troisième partie c’est pour le livreur pour qu’il puisse consulter et gérer les états des
commandes passer par le client. C’est la partie mobile
Donc les acteurs de notre application web sont les suivants :
Visiteur, Client, Administrateur, Livreur.
Partie front office : (visiteur, Client)
● Consulter les articles
● Gérer le panier
● S’authentifier (ou créer un compte)
● Passer commande (choisir mode livraison et l’adresse)
● Suivre l’état de livraison ?
Partie back office : (Administrateur)
● S’authentifier
● Gérer les articles (consulter, modifier, ajouter, supprimer)
● Gérer le staff (consulter, modifier, ajouter, supprimer)
● Gérer la boutique (consulter, modifier, ajouter, supprimer)
Partie mobile : (Livreur)
● S’authentifier
● Consulter les commandes selon région de livreur
● Modifier l’état de la commande
3. Besoins non fonctionnels

Ces besoins fondamentaux sont des contraintes techniques que notre application doit les
satisfaire :
● La rapidité : vu le nombre d’article important il est impérativement nécessaire que la durée

d’exécution des traitements s’approche le plus possible du temps réel.
● La performance : il s’agit d’optimiser le temps de changements des pages par l’utilisateur

des bonnes pratiques de développement.
● La sécurité il faut que l’on garantisse les données.
● L’extensibilité : l’architecture de l’application permettra l’évolution et la maintenance de

ses modules.
8
● Ergonomie : les menus, les icônes doivent guider l’utilisateur afin de ne pas perdre le temps
de traitement.
4. Méthodologie adoptée :
4.1. Définition
Il existe différent type de cycles de développement dans la réalisation d’un site web, ces cycles
prendront en compte toutes les étapes de la conception d’un site :
● Cycle de vie en cascade.
● Cycle de vie en spirale.
● Cycle de vie en v.
● Cycle de vie incrémentale
4.2. Choix de cycle de vie

Après avoir cité les différents types du cycle de vie de développement, on a choisi le cycle
de vie incrémentale pour notre projet. Dans ce modèle chaque incrément est une construction
partielle du site (version du site).
4.3. Modèle incrémentale

● Trie les spécifications par priorités et les regroupements dans des groupes de
spécifications.
● Propose un développement du logiciel par morceaux, lesquels sont livrés successivement

au client, en venant se greffer à un noyau du site
Figure 4 Modèle incrémentale
9
5. Digramme des cas d’utilisation

Un cas d'utilisation est une description d'un ensemble de séquences d’actions effectuées par un
système pour créer un résultat visible à un acteur. Un cas d'utilisation désigne une exigence
fonctionnelle d’un système dans son ensemble. Les diagrammes de cas d’utilisation décrivent
ce qu'un système fait du point de vue d'un observateur externe. L'accent est mis donc sur ce
qu'un système fait, plutôt que sur la manière dont il le fait.
Un cas d'utilisation est une méthodologie utilisée dans l'étude du système dans le but d’identifier,
organiser et clarifier les exigences du système. Il est la composition des séquences possibles
des interactions entre les utilisateurs et les systèmes dans un environnement distingué et attaché
à un objectif bien déterminé.
5.1. Digramme des cas d’utilisation global :

Dans la figure qui suit, nous allons présenter une vue globale du système
10
Figure 5 Diagramme cas d'utilisation global
11
✔ Au niveau de la partie web(back-office), le visiteur n’a aucun droit d’accès pour cette partie
afin de garantir une sécurité maximale des données, sans authentification et vérification de
privilèges de l’administrateur aucune action est permis car le rôle principal du back-office
est l’administration des données de l’application
✔ Au niveau de la partie web (front-office), l’utilisateur a le droit de consulter et ajouter les

articles dans le panier mais le fait qu’il a créé un compte et s’authentifier il a le pouvoir de
passer des commandes, consulter l’historique de ce dernier, modifier les données de son
profile et finalement modifier son mot de passe
✔ Au niveau de l’application mobile l’utilisateur doit s’authentifier avec un compte créé par
l’administrateur pour qu’il puisse consulter les commandes passer par les clients selon sa
région
12
5.2. Description des cas d’utilisation

5.2.1. Diagramme de cas d’utilisation de l’administrateur
Le diagramme suivant nous montre les différentes fonctions effectuées par l’administrateur :
Figure 6 Cas d’utilisation de l’administrateur
13
S’authentifier
Figure 7 Diagramme d'authentification
Description textuelle de sous cas d’utilisation « s’authentifier »
Cas d’utilisation S’authentifier.
Acteur Administrateur.
Pré condition(s) L’administrateur se trouve sur la page de connexion.
Post-condition(s) L’administrateur se trouve sur l’accueil de l’application
❖ Sur la page de connexion, l’administrateur doit entrer son login et

mot de passe.
Scénario principal ❖ L’administrateur clique sur le bouton connexion.
❖ Le système vérifier la validité des informations de saisie.
❖ L’administrateur est redirigé vers le page menu.
Scénario
d’exception ❖ L’administrateur erroné le système affiche un message d’erreur
Tableau 1 description de sous cas d'utilisation "s'authentifier"
14
Gere produit
Figure 8 Cas d’utilisation de gère produit
Description textuelle de sous cas d’utilisation « Supprimer produit »
Cas d’utilisation Supprimer produit.
Acteur Administrateur.
Pré condition(s) L’administrateur authentifié
Post-condition(s) Produit supprimé
❖ L’administrateur consulte la liste des produits
❖ Choisir le produit à supprimer

Scénario principal
❖ Cliquer sur supprimer
❖ Le produit sélectionné est supprimé
Scénario
❖ Le système n’affiche aucun produit enregistrer dans la base de
d’exception
données
Tableau 2 Description de sous cas d'utilisation " Supprimer produit "
15
Description textuelle de sous cas d’utilisation « Ajouter produit »
Cas d’utilisation Ajouter produit
Acteur Administrateur
Pré condition(s) L’administrateur authentifié
Post-condition(s) L’ajout de produit est enregistré.
❖ L’administrateur sélectionne ajouter produit dans le menu
❖ L’administrateur remplit les champs nécessaires et clique sur le

bouton « Ajouter ».
Scénario principal
❖ Le système vérifie les informations saisies par L’administrateur
❖ L’administrateur est redirigé vers consulter liste des produits
Scénario ❖ L’administrateur introduit des informations Incorrectes.

d’exception
❖ Le système affiche un message d’erreur et demande à
l’administrateur de vérifier l’ensemble des champs.
Tableau 3 Description de sous cas d'utilisation " Ajouter produit "
5.2.2. Diagramme de cas d’utilisation de client

Le diagramme suivant nous montre les différentes fonctions effectuées par le client :
Figure 9 Cas d’utilisation de client

16
Description textuelle de sous cas d’utilisation « rechercher produit »
Cas d’utilisation Rechercher produit.
Acteur Client / Visiteur
Pré condition(s) L’utilisateur doit être sur la plateforme
Post-condition(s) Produit trouvé ou inexistant
❖ Le client / visiteur tape le nom de produit
Scénario principal ❖ Le client/visiteur clique sur le bouton chercher
❖ Le système vérifier la validité des informations de saisie et affiche

le produit
Scénario
❖ Le système ne trouve aucun produit enregistrer dans la base de
d’exception
données avec le nom introduit par l’utilisateur
Tableau 4 Description de sous cas d'utilisation " Rechercher produit "

Description textuelle de sous cas d’utilisation « passer commande »
Cas d’utilisation Passer commande
Acteur Client
Pré condition(s) Le client doit être authentifié et sur la page de panier
Post-condition(s) Commande passé par le client est enregistré
❖ Le client clique sur le bouton finaliser la commande
Scénario principal ❖ Le client remplit les données nécessaires du formulaire
❖ Le client choisit le mode de livraison
❖ Le client clique sur le bouton confirmer
Scénario ❖ Le client n’ajoute aucun produit dans le panier pour finaliser sa

d’exception commande
❖ Les données introduit par le client ne sont pas valides
Tableau 5 Description de sous cas d'utilisation " passer commande "
17
5.2.3. Diagramme de cas d’utilisation de livreur

Le diagramme suivant nous montre les différentes fonctions effectuées par le livreur :
Figure 10 Cas d'utilisation de livreur
Description textuelle de sous cas d’utilisation « Modifier état commande »
Cas d’utilisation Modifier état commande
Acteur Livreur
Pré condition(s) Le livreur doit être authentifié
Post-condition(s) L’état de la commande sélectionné est modifié
❖ Le livreur clique sur commande qu’il va la modifier
Scénario principal ❖ Le livreur choisie le nouvel état de la commande
❖ Le livreur confirme son choix
❖ L’état de la commande est modifié
Scénario
❖ Le système ne trouve aucune commande enregistrer dans la base de
d’exception
données avec la région du livreur authentifié
Tableau 6 Description de sous cas d'utilisation " Modifier état commande "
18
Conclusion
Dans ce chapitre, nous avons cité les besoins fonctionnels et non fonctionnels de notre projet
ainsi la méthodologie adoptée dans notre application web accompagne du digramme de cas
d’utilisation générale.
Dane le chapitre suivant, nous présenterons la méthodologie conceptuelle utilisée
19
Chapitre 3 : Conception
Introduction
La conception est la phase la plus importante dans le cycle de développement d’un projet.
Le support de cette phase par des techniques et des outils appropriés est important pour produire
une application de haute performance et sert à minimiser l’effort du développement. Le but de
la conception est de comprendre et structurer les besoins du client.
Dans, ce chapitre je présente l’architecture de mon système selon le langage de modélisation

orienté objet UML. Ensuite, je passe à la deuxième partie la présentation des diagrammes de
Séquences et du diagramme de classe détaillés.
1. Langage utiliser : UML (Unified Modeling Langage) :

1.1. Définition
UML est utilisé pour spécifier, visualiser, modifier et construire les documents nécessaires
au bon développement d'un logiciel orienté objet.
UML offre un standard de modélisation, pour représenter l'architecture logicielle.
Les différents éléments représentables sont :
- Activité d'un objet/logiciel
- Acteurs
- Processus
- Schéma de base de données
- Composants logiciels
- Réutilisation de composants
1.2. Les objectifs

Parmi les objectifs du langage UML est :
- Représenter des systèmes entiers.
- Prendre en compte les facteurs d’échelle.
- Créer un langage de modélisation utilisable à la fois par les humains et les

machines.
- Construire les modèles sert de base de réalisation informatique.
20
1.3. Conception de l’application

Dans cette partie, on va présenter les diagrammes d’UML possibles et qu’ils sont
disponibles dans notre étude, nous allons définir les étapes suivantes :
⮲ Définir les acteurs et les activités.
⮲ Définir les diagrammes des cas d'utilisations.
⮲ Définir les diagrammes de séquences.
⮲ Définir le diagramme de classes.
1.4. Diagramme de la vue statique

Diagramme de classe
Le diagramme de classe est un schéma utilisé en génie logiciel pour présenter les classes
et les interfaces des systèmes ainsi que la différente relation entre eux.
Ce diagramme fait partie de la partie statique d’UML car il fait abstraction des aspects
temporels et dynamiques.
Une classe décrit les responsabilités ; le comportement et le type d’un ensemble d’objets.
Les éléments de cet ensemble sont les instances de la classe.
Une classe est un ensemble fonction et de données (attributs) qui sont liés ensembles par
un champ sémantique. Les classes sont utilisés dans la programmation orienté objet .elles
permettent de modéliser un programme et ainsi de découper une tâche complexe en plusieurs
petits travaux simples.
Une classe est une description abstraite d’un ensemble d’objet du domaine ; elle définit
leur structure ; leur comportement et leurs relations.
● Les classes d’objet dans notre projet sont les suivants :
21
Figure 11 Diagramme de classe global

22
Le diagramme de classe identifie les classes et les interfaces d’un système ainsi que les
différentes relations entre eux. Donc ce diagramme va effectuer une bonne modélisation de la
base de données du système et à partir un schéma bien organisé on a défini ce diagramme de
classe.
⮲ Elaboration du modèle relationnel:
⮚ Article (id_article, description_article, designation, img_article, note, prix,

taux_remise, taux_tva, #id_catégorie, #id_mode) ;
⮚ Categorie (id_categorie, categorie_lib) ;
⮚ Mode (id_mode, mode_lib) ;
⮚ Taille (id_taille, lib_taille, #id_categorie) ;
⮚ Taille_prod (id_taille_prod, #id_article, #id_taille, quantite) ;
⮚ Commande (id_cmd, date_cmd, prix_total, tel_commande, date_limit, #id_user,

#id_etat_cmd, #id_adresse, #id_mod_liv, #id_boutique)
⮚ Commande_prod (id_commande_prod, #id_article, #id_cmd, quantite, sous_total,

taille) ;
⮚ User (id_user, nom, prenom, tel, # id_compte, #id _privilege, #id_adresse )
⮚ Compte (id_compte, login, password) ;
⮚ Privilege (id_privilege, lib_privilege) ;
⮚ Newslettre (id_news, email)
⮚ Modelivraison (id_modliv, lib_mod_liv) ;
⮚ Etatcommande (id_etat_cmd, lib_etat_cmd) ;
⮚ Livraison (id_livraison, date_liv, #id_cmd, #id_modliv) ;
⮚ Boutique(id_boutique,lib_boutique,description_boutique,tel_boutique,mail_boutiq-
ue)
⮚ Adresse (id_adresse, lib_adresse, #id_city) ;
⮚ City (id_city, lib_city, zip_code, #id_state) ;
⮚ State (id_state, lib_state) ;
⮚ Favorie (id_favorie, #id_user,#id_article)
23
⮲ Description de diagramme de classe :
Dans cette description en va décrire les principales classes de notre diagramme avec détaille
précise.
Classe Commande
Attribut Description
id_cmd C’est l’identifiant du commande
date_cmd C’est la date que la commande a été passer
date_limit C’est la date qu’il faut livrée la commande avant ce dernier
prix_total C’est le montant a payée dans la commande
tel_commande C’est le numéro de téléphone pour contacter le client qui a

commandé ce dernier
#id_user C’est l’identifiant de client qui a passé le commande
#id_etat_cmd C’est l’identifiant de l’état du commande
#id_adresse C’est l’identifiant de l’adresse de livraison de commande
#id_mod_liv C’est l’identifiant de mode de livraison (domicile /

boutique)
#id_boutique C’est l’identifiant de la boutique si le client choisie un

point relais
Tableau 7 Liste des attributs de la classe commande

Classe User
id_user C’est l’identifiant du l’utilisateur
nom C’est le nom de l’utilisateur
prenom C’est le prenom de l’utilisateur
tel C’est le numéro de téléphone de l’utilisateur
# id_compte C’est l’identifiant de compte de l’utilisateur
,#id _privilege C’est l’identifiant de privilege de l’utilisateur
#id_adresse C’est l’identifiant de l’adresse de livraison de commande
Tableau 8 Liste des attributs de la classe User
24
Classe Commande_prod
id_commande_ C’est l’identifiant de commande_prod

prod
#id_article C’est l’identifiant de l’article
#id_cmd C’est l’identifiant de commande
Quantite C’est la quantite désirée dans la commande
Sous_total C’est le prix sous total de la commande
Taille C’est le taille de produit commandé
Tableau 9 Liste des attributs de la classe Commande_prod
1.5. Diagramme de la vue dynamique

Nous présentons dans cette parties les diagrammes de séquence de notre application qui
sert à modéliser les interactions entre les objets.
▪ Diagramme de séquence relatif : s’authentifier
Le scénario du cas d’utilisation « S’authentifier », l’utilisateur remplit le formulaire

d’authentification et clique sur le bouton « se connecter ». Ensuite le système vérifie les données
saisies.
25
La figure suivante illustre une description détaillée du scénario relatif au cas d’utilisation
« S’authentifier ».
Figure 12 Diagramme de séquence « authentification »
▪ Diagramme de séquence relatif : passer commande
A travers ce diagramme, nous allons décrire le scénario du cas d’utilisation « passer

commande » Dans un premier lieu, le visiteur ajoute des produits désirés dans son panier, puis click
sur le logo du panier, le système vérifie l’existant des articles dans le panier et dirige l’utilisateur
vers la page du panier (dans le cas contraire ou le panier est vide le système lui dirige vers la page
d’accueil). Dans la page panier il existe deux bouton, si l’utilisateur choisit de finaliser son
commande alors qu’il n’est pas authentifié le système lui dirige vers la page d’authentification pour
créer un compte ou bien s'authentifier, après avoir se connecté le système lui affiche le formulaire
de livraison de son commande après le remplissage de formulaire avec des donnée valide le client
choisit le mode de livraison à une point relais ou bien son adresse personnelle et finalement il clique
sur commander
26
La figure suivante illustre une description détaillée du scénario relatif au cas d’utilisation «
passer commande ».
Figure 13 Diagramme de séquence « passer commande »
• Diagramme de séquence relatif : modifier état commande
A travers ce diagramme, nous allons décrire le scénario du cas d’utilisation « modifier état
commande » Dans un premier lieu, le livreur doit être authentifié à travers l’application mobile
fournis par l’entreprise puis il sélectionne la commande en cours de livraison, contact le client puis
il passe son choix si la dernière est livrée ou bien annulée
27
La figure suivante illustre une description détaillée du scénario relatif au cas d’utilisation « modifier
état commande ».
Figure 14 Diagramme de séquence « modifier état commande »
▪ Diagramme de séquence relatif : ajouter article
A travers ce diagramme, nous allons décrire le scénario du cas d’utilisation « ajouter article »
Dans un premier lieu, l’administrateur demande au système de faire un ajout. Une fois le formulaire
est affiché, il remplit les champs de saisies puis enregistre ses données. Le système s’assure d’abord
que les champs obligatoires n’ont pas la valeur NULL Ensuite il enregistre les informations entrées
dans la base de données.
28
La figure suivante illustre une description détaillée du scénario relatif au cas d’utilisation « ajout
article ».
Figure 15 Diagramme de séquence « ajouter article »
▪ Diagramme de séquence relatif : Modifier article
A travers ce diagramme, nous allons décrire le scénario du cas d’utilisation « modifier article »
Dans un premier lieu, l’administrateur demande au système la liste des articles existant. Une fois
la liste est affiché, il clique sur le bouton modifier d’un article. Une fois le formulaire est affiché, il
modifie les donnée puis appuyé sur modifier. Le système s’assure d’abord que les champs
obligatoires n’ont pas la valeur NULL ou bien des valeur non convenable Ensuite il enregistre les
informations entrées dans la base de données.
29
La figure suivante illustre une description détaillée du scénario relatif au cas d’utilisation « modifier
article ».
Figure 16 Diagramme de séquence « modifier article »
▪ Diagramme de séquence relatif : ajouter article au panier
A travers ce diagramme, nous allons décrire le scénario du cas d’utilisation « ajouter article au
panier »
Dans un premier lieu, le client navigue vers la page détail article. Une fois les informations des
articles est affiché, il tape sur « ajouter au panier ». Le système vérifie si bien en stock avec cette
taille et quantité puis il ajoute ce dernier dans le panier
30
La figure suivante illustre une description détaillée du scénario relatif au cas d’utilisation «
ajouter article au panier».
Figure 17 Diagramme de séquence « ajouter article au panier »
Conclusion
Tout au long de ce chapitre, nous avons adressé la conception qui se résume dans les
diagrammes de classe et séquence de notre application web et mobile.
En ce qui suit nous intéressons à représenter l'interface de notre projet
31
Chapitre 4 : Réalisation
Introduction
Dans ce chapitre on va présenter l’architecture et l’environnement matérielle et logicielle de
notre application web et mobile, en argumentant les choix techniques, enfin on décrit notre
application avec des capture d’écran.
1. Architecture du projet
1.1. Partie web
Nous avons choisi l’architecture en trois tiers comme montré dans la figure ci-dessous
C’est pour cela qu’il s’agit d’une architecture partagée entre les trois composant : notre client
/administrateur, un système de gestion de base de données et un serveur d’application.
Figure 18 L’architecture en trois tiers
1.2. Partie mobile

Pour notre livreur, pour que son application soit maintenable et efficace et pour que
l’architecture s’oriente vers l’architecture MVC qui sépare entre les données, les traitements, et
la présentation qu’on va les expliquer chacune de dernier :
⮲ Le Modèle c’est tout ce qui est traitement et interaction avec la base de données
⮲ La vue ce sont les résultats renvoyés par le modèle en attendant les nouvelles actions du
livreur
⮲ Le Contrôleur c’est la gestion des évènements de synchronisations pour la mise à jour

de la vue
32
Dans cette figure nous expliquons le principe de cette architecture
Figure 19 modèle MVC
2. Environnement matérielle et logicielle

2.1. Environnement matérielle
Afin de réaliser notre projet, nous avons travaillé sur deux ordinateurs dont les caractéristiques
sont les suivant :
Processeur : Intel core i7 @2.8GHz
Mémoire : 8 Go
Carte graphique : GTX 1050 4 Go
Disque dur : 1 To
Système d’exploitation : Windows 10 - 64bits
Tableau 10 Table caractéristique 1
Processeur : Intel core i7 @2.8GHz
Mémoire : 32 Go
Carte graphique : GTX 1060 6 Go
Disque dur : 1 To – 256 SSD
Système d’exploitation : Windows 10 – 64 bits
Tableau 11 Table caractéristique 2
33
2.2. Environnement logicielle

WampServer est une plate-forme de développement Web sous
Windows qui vous permet de créer des applications Web dynamiques
avec Apache2, PHP, MySQL et Maria DB.
Visual studio code est un éditeur de code extensible développé par

Microsoft pour Windows, Linux et MacOs.
Spring Tool suit (STS) est un IDE étendu pour Eclipse. Il se spécialise
dans le développement
Git Bash une application pour les environnements Microsoft

Windows qui fournit une couche d'émulation pour une expérience de
ligne de commande Git. Bash est un acronyme pour Bourne Again
Shell. Un shell est une application de terminal utilisée pour s'interfacer
avec un système d'exploitation via des commandes écrites.
PowerAMC est un logiciel de conception créé par la société SAP, qui

permet de modéliser les traitements informatiques et leurs bases de
données associées.
3. Choix des technologies de développement

Dans cette partie nous nous intéressons aux langages et aux bibliothèque utilisées durant le
développement de notre projet.
3.1. Back-end web

Spring Boot est un micro-Framework open source géré par une société appelée Pivotal. Il
fournit aux développeurs Java une plate-forme pour démarrer avec une application Spring de
qualité production configurable automatiquement. Avec lui, les développeurs peuvent démarrer
rapidement sans perdre de temps à préparer et configurer leur application Spring.
Nous avons utilisé cet outil pour développer des web services retournant les données sous
format JSON qui seront consommés par la partie front end développée en Angular.
34
JEE Pour le développement de l’application, nous avons utilisé la plateforme JEE (Java Entreprise
Edition) dans la partie Back-end, dans sa 8ème version. Parmi les avantages de la plateforme JEE,
on peut citer :
- Technologie sans frais : Java (sur lequel est basé JEE) est une technologie Open Source, les outils
de développement JEE sont disponibles gratuitement.
- Maintenabilité : Les applications JEE sont plus faciles à entretenir, dans la plupart des cas, ils
sont conçus en plusieurs couches. Il est facile d'ajouter de nouvelles fonctionnalités tierces pour les
applications JEE en raison de sa fonction d'évolutivité
- Indépendance : Les applications développées avec JEE peuvent être déployées sur la plupart des
matériels disponibles. Elles offrent une flexibilité de matériel à l'utilisateur final. Ainsi, l’utilisateur
peut déployer et exécuter des applications JEE sur le système d'exploitation et le matériel de son
choix.
• JPA[12] La Java Persistence API (abrégée en JPA), est une interface de programmation Java
permettant aux développeurs d'organiser des données relationnelles dans des applications utilisant
la plateforme Java. La Java Persistence API est à l'origine issue du travail du groupe d'experts JSR
220.
• REST API[13] REST est un style d’architecture qui repose sur le protocole HTTP : On accède
à une ressource (par son URI unique) pour procéder à diverses opérations (GET lecture / POST
écriture / PUT modification / DELETE suppression), opérations supportées nativement par HTTP
• JSON (JavaScript Object Notation – Notation Objet issue de JavaScript) est un format léger
d'échange de données. Il est facile à lire ou à écrire pour des humains. Il est aisément analysable
ou général par
3.2. Front-end web

Angular est un Framework Javascript côté client qui permet de réaliser des applications de
type "Single Page Application". Il est basé sur le concept de l'architecture MVC (Model View
Controller) qui permet de séparer les données, les vues et les différentes actions que l'on peut
effectuer.
3.3. Application mobile

Ionic Framework est une boîte à outils d'interface utilisateur open source pour créer des
applications mobiles et de bureau performant et de haute qualité à l'aide des technologies Web
- HTML, CSS et JavaScript - avec des intégrations pour les cadres populaires comme Angular
et React.
35
Ionic est la seule pile d'application mobiles qui permet aux développeurs Web de créer des
applications pour tous les principaux magasins d'application et le Web mobile à partir d'une base
de code unique e avec adaptive Styling, les applications Ionic ont l'air et se sentent chez elles
sur chaque appareil
4. Etapes hébergement
Dans cette partie nous allons présenter les différentes étapes de l’hébergement de notre site (coté
front et back)
4.1. Hébergement back-end
Pour pouvoir héberger le backend de notre application il faut tout d’abord passer par les étapes
suivantes
• Télécharger Heroku CLI
Figure 20 Télécharger CLI Heroku
• S’authentifier au service de Heroku
• Configuration de base de données l’application sur Heroku
36
Figure 21 Configuration base donné
• Configuré le git, Déployer et lancer l’application
Figure 22 Déployer l’application
4.2. Hébergement Front-end

Après avoir héberger notre application Spring (back-end) nous passons maintenant aux étapes de
l’hébergement do notre application Angular (Front-end)
• « Build » de l’application Angular
37
Figure 23 « build » de l’application Angular
• « Upload » les fichiers dans le serveur FTP à partir de l’application « FileZilla »
Figure 24 « Upload » les fichiers dans le serveur FTP
38
5. Interfaces réalisées
Dans cette partie, nous présentons les principales interfaces de notre projet
5.1. Les interface au niveau de la partie web

5.1.1. Coté client
🟂 Page d’authentification
Dans la figure ci-dessous nous représentons la page d’authentification dans laquelle le client
doit insérer des données valide en cas s’il n’est pas encore inscrit ou bien son email et mot de
passe correct s’il a déjà un compte
Figure 25 Page s'authentifier
Figure 26 Page s'inscrire
39
🟂 Page d’accueil
Lors de l’ouverture de l’application web nous pouvons voir tous les articles mais sans le
pouvoir de faire le filtrage
Figure 27 Page d’accueil
40
🟂 Page Categorie
La figure ci-dessous démontre les différents moyens de filtrages possibles qui peut le faire
notre client comme par catégorie, par prix croissant ou décroissant ou bien avec la marge de
prix
Figure 28 page categorie
41
🟂 Page de recherche produit
La figure ci-dessous présenter le résultat de recherche en insérant un mot clé
Figure 29 page recherche
42
🟂 Page détails produit
Dans La figure ci-dessous le client peut consulter les différents détails de produit sélectionné
comme les tailles disponible avec leur quantité disponible ainsi qu’il peut l’ajouter à sa liste
de favoris en cliquant sur l’icône de cœur situé à côté du designation de ce dernier
Figure 30 Page détails produit
43
🟂 Page gère panier
Dans La figure ci-dessous le client peut consulter les différents articles ajouter à son panier
avec le pouvoir de les supprimer de ce dernier
Figure 31 Page gère panier
🟂 Page passer commande
Si le client choisi de finaliser son commande l’application lui dirige vers la page comme le
montre la figure ci-dessous ou il est obligé de remplir le formulaire de ses coordonnées
personnelles ensuit il doit choisir la méthode de livraison si veut livrer son coli a une point
relais qu’il choisit (boutique BlueTwins) ou bien sa propre adresse
Figure 32 page passer commande
44
🟂 Page profile client
Dans La figure ci-dessous le client peut consulter les différentes informations personnelles
ainsi qu’il peut les modifier
Figure 33 page profile
🟂 Page détails commande
Dans la figure ci-dessous le client peut consulter les détails de commande qu’il a passer
Figure 34 page détails commande
45
🟂 Page produit désirés
Lorsque le client est authentifié il peut ajouter des articles a sa liste d’envie en cliquant sur
cœur situé dans la page de détails et il peut les supprimer en visitant la page ci-dessous ou
il a le pouvoir de les supprimer ou bien les consulter
Figure 35 page liste envie
🟂 Page modifier mot de passe
Le client a le pouvoir de changer son propre mot de passe en cliquant sur le buton modifier
mot de passe le serveur vérifie le mot de passe actuel s’il est bien saisi il continue à la
vérification de conformité de deux autres champs de mot nouveaux mot de passe sinon il
affiche une alerte d’erreur au niveau des champs incorrecte
46
Figure 36 page modifier mot de passe
5.1.2. Coté administrateur

• Page authentification
L’administrateur doit insérer les données fournit par l’entreprise pour qu’il puisse avoir
l’accès à l’espace administratif de site
Figure 37 Page authentification admin
47
🟂 Page d’accueil administrateur
Après l’authentification l’administrateur se dirige vers la page de statistique dans laquelle il

peut consulter les différentes informations de sa plateforme
Figure 38 Page d’accueil administrateur
🟂 Page historique commande
L’administrateur peut consulter l’historique des commandes gérer par son staff de livraison
en mentionnant l’agent chargé par cet commande, la date de livraison et le prix collecté par
commande
48
Figure 39 page historique commande
🟂 Page lister produit
L’administrateur peut consulter la liste des produits dans laquelle il peut modifier,
supprimer et ajouter des produits
Figure 40 page liste produit
49
🟂 Page ajouter produit
Après l’authentification de l’administrateur il sélectionne depuis le menu ce qu’il veut

ajouter et l’application lui affiche le formulaire ci-dessous puis il remplit les champs avec
des données valide
Figure 41 page ajout produit
🟂 Page modifier produit
Après que l’administrateur choisie un article à modifier un formulaire de donnée s’affiche

en ajoutant des champs de tailles disponible selon sa catégorie qu’il peut les remplir par la
quantité disponible de chacune de ses dernier
Figure 42 page modifier produit
50
🟂 Page modifier staff
L’administrateur peut modifier les adresses de ses staff de plus il a le pouvoir de désactivé son
compte en cas de sortie en congé ou maladie
Figure 43 page modifier staff
5.2. Les interface au niveau de la partie mobile

🟂 Page authentification
Dans la figure ci-dessous nous représentons la page d’authentification dans laquelle le

livreur doit insérer des données valide fournit par l’administrateur
Figure 44 page authentification livreur
51
🟂 Page liste commande
Dans la figure ci-dessous nous représentons la page liste de commande filtré par la région
de notre livreur authentifier en affichant la date limite qu’il ne pourra pas la dépasser lors de
livraison
Figure 45 liste commande a livrées
🟂 Page détails commande
Le livreur peut consulter les diffèrent information du commande comme la liste des produit
sous forme d’images, les information de client (nom, prenom, numéro téléphone, …), la date
qu’il ne faut pas la dépasser, le prix total que le client doit le payé à la livraison et enfin l’état
de cet commande si c’est bien livré ou elle a été annulée par le client en le contactant par
téléphone.
52
Figure 46 page détails commande
Après la sélection du nouvel état de commande le livreur dois confirmer sans choix à travers
la figure ci-dessous
Figure 47 confirmation choix état commande

53
🟂 Page historique commande
Le livreur peut consulter l’historique des commande déjà livré ou bien annulé dans sa région
Figure 48 page historique commande
Conclusion
Dans ce chapitre nous avons spécifier l’environnement logiciel et matériels et pour développer
ce projet, nous avons citées les technologies utiliser mors de développement de cet travaille et
on a fini par lister les diffèrent partie de notre projet
54
Conclusion générale
L’objectif de ce travail est de créer une application web pour une espace e-commerce de la
marque BlueTwins et une application mobile pour la gestion des commandes prêt à livrée
Le point de départ de notre projet est l’étude de l’existant afin de déterminer les spécifications
des besoins qui nous mené par la suit à la conception qui est aussi une partie assez importante
pour le déroulement de notre projet et pour avoir la solution adéquate.
Ensuit nous sommes passez aux différentes phases de développement web au cours de laquelle
nous avons essayé de mettre en valeur les compétences acquises durant ces trois dernières
années a l’iset kélibia mais aussi nous a familiariser avec des nouvelles technologies. Les
avantages bénéfiques et les plus important se trouve dans sur le plan social.
L’intégration dans une équipe professionnelle de travail, la communication et la coordination

avec les différents membres de l’équipe malgré les difficultés que nous avons vus pendant les
jours de confinement. En outre ce projet a représenté une grande opportunité de faire face à des
nouveaux problèmes et surtout nous a poussé a faire des formations en ligne en certains langage
de programmation (Angular, Ionic, Spring boot) sans oublier le soutienne de notre encadreur au
seine de l’entreprise.
Aujourd’hui nous sommes arrivés à satisfaire le besoin de l’entreprise et leur client BlueTwins
malgré notre application peut être améliorée en intégrant la fonctionnalité de paiement avec le
QR code à travers l’application « D17 » fournit par la poste tunisienne
55
Webographie
[1] https://stackblitz.com/
[2] https://stackoverflow.com/
[3] https://angular.io/docs
[4] https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/
[5] https://ionicframework.com/docs
[6] https://fireship.io/
[7] https://getbootstrap.com/docs/4.1/getting-started/introduction/
[8] https://fr.wikipedia.org/wiki/PowerAMC
[9] https://www.callicoder.com/deploy-host-spring-boot-apps-on-heroku

Rapport Finale

Transféré par

Droits d'auteur :

Formats disponibles

Rapport Finale

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

Rapport Finale

Transféré par

Droits d'auteur :

Formats disponibles

République Tunisienne

Ministère de L’Enseignement Supérieur et de la Recherche Scientifique

Rapport de stage de fin d’études

Licence Appliquée en Technologies de l’Informatique

Développement des Systèmes d’Information

Conception, Développement application web de gestion

Réalisé par : MAKHLOUF Omar

ZGUED Oussema : responsable générale de la société

WAHEB Aymen : Enseignant Technologue a ISET kélibia

Année universitaire : 2019 – 2020

A ma très chère mère

Quoi que je fasse ou que je dise, je ne saurai point te remercier

A mon très cher père

Tu as toujours été à mes côtés pour me soutenir et m’encourager.

A mes très chers frères Ahmed et Rayen et ma belle-sœur Zaineb

Puisse Dieu vous donne santé, bonheur, courage et surtout réussite

A tous mes amis qui m’ont toujours encouragé, et à qui je souhaite

A tous ceux que j’aime.

Avec l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui,

Avant de passer à la présentation de notre travail, nous voulons exprimer notre

Nous tenons à remercier tout particulièrement et a témoigner toute notre

Nous exprimons notre parfaite reconnaissance et nos remercîments à notre encadrant

Figure 1 Logo société 2

Tableau 1 description de sous cas d'utilisation "s'authentifier" 14

Dans le premier chapitre, nous présentons l'organisme d'accueil et on déduire l'étude de

Dans le quatrième chapitre, on va récapituler les phases de réalisation et présente l'aspect

Chapitre 1 : Cadre du projet

Avant d’entamer les différentes parties de ce rapport, il convient de présenter

Ce chapitre présente tout d’abord l’organisme d’accueil, ensuite on va présenter l'étude

● Développeur : web et mobile.

Gudzbulk comporte comme matériels 6 ordinateurs, 2 pc portables, serveur, tableau et 2 Haut-

Figure 1 Logo société

1.2. Présentation de Organigramme

Figure 2 Organigramme de société

1.3. Présentation Des services

Innovation mobile : Création et modification des solutions mobile.

Architecture d’intérieur : création des plans 3D

2.1. Etude et critique de l’existant :

2.2. Les objectifs :

● Gérer les produits qui permet la vérification de disponibilité de ce dernier.

2.3. Présentation de la solution proposée :

La solution est de concevoir et développer une application web permettant de satisfaire au

2.4. Journal de stage:

Figure 3 Journal du stage

Chapitre 2 : Analyse et spécification des besoins

1. Identification des acteurs :

C’est la personne possédant le privilège de plus haut niveau. Il se charge de la gestion

Donc les acteurs de notre application web sont les suivants :

Visiteur, Client, Administrateur, Livreur.

Partie front office : (visiteur, Client)

● Consulter les articles

● S’authentifier (ou créer un compte)

● Passer commande (choisir mode livraison et l’adresse)

● Suivre l’état de livraison ?

Partie back office : (Administrateur)

● Gérer les articles (consulter, modifier, ajouter, supprimer)

● Gérer le staff (consulter, modifier, ajouter, supprimer)

● Gérer la boutique (consulter, modifier, ajouter, supprimer)

Partie mobile : (Livreur)