Conception et réalisation
d’une application web
Réalisé par : Med Salah Yosser
Abbessi Dhaker
Encadré par : Mme
Souad Zid

Plan
1
Introduction
Solution proposée
Etude de l’existant
1
2
3
4
5
Méthodologie adoptée
Analyse et spécification de l’exigence
Conception
Réalisation
Conclusion
6
7
8

Introduction :
• les services web ont provoqué une forte évolution dans le monde de
l’informatique distribuée et un bouleversement majeur dans la façon de
concevoir des architectures.
• Un des intérêts de l’informatique distribuée est de faciliter l’interconnexion
entre applications distantes, indépendamment des plateformes et des
langages utilisés.
• Dans ce cadre on va réaliser une application web pour une société, cette
application permet aux clients (représentant) de faciliter le service de
payement, les commandes et les activités qui ont pu faire au sein de
l’entreprise.

Etude de l’existant :
• Problématique :
Actuellement l’une des problématiques principales l’accord avec les clients (
Représentant) de la société surtout à cause de la situation de l’épidémie et
d’autres problèmes de payements et de commande. Certain clients favorisent
l’échanges à distances et minimiser la mobilité dans la société et surtout faire
une réclamation sans venir à l’entreprise.
• Cadre de projet :
Le présent mémoire est réalisé dans le cadre de la préparation du projet de fin
d’étude (PFE) présenté en vue de l’obtention du diplôme de licence en
technicien supérieure en licence appliquée en science et technologie de
l’information et de la communication : pour l’année universitaire 2020-2021.

Solution proposée :
• L’objectif essentiel de ce stage est de concevoir et développer une
application pour les représentants de la société. En effet, la société
rencontre des problèmes concernant les payements, les commandes et les
activités des utilisateurs, pour remédier, en va réaliser une application qui
permet de répondre aux besoins de représentant , de faire ses activités
facilement et aussi de Gérer tous les commandes et les payements.

Méthodologie adoptée :
• Scrum agile méthode :
Scrum est une des méthodes de gestion de projet Agile. En tant que telle, son
objectif est d’améliorer la productivité des équipes, tout en permettant une
optimisation du produit grâce à des feedbacks réguliers avec les utilisateurs
finaux.

• LE SCRUM MASTER : D’après le guide du Scrum Master, le Scrum Master
est un serviteur-leader pour l’équipe, le garant de l’application de
l’approche. . Le Scrum Master le fait en aidant tout le monde à comprendre
la théorie, les pratiques, les règles et les valeurs de Scrum.
• LE PRODUCT OWNER : Pour faire court, on peut dire que le rôle du
Product Owner est de faire le pont entre la partie métier et la partie
technique du projet. Il est donc le relai entre le client et l’équipe de
développement.
• L’ÉQUIPE DE DÉVELOPPEMENT : L’équipe de développement est
chargée de transformer les besoins exprimés en fonctionnalités utilisables.
L’équipe peut être pluridisciplinaire et embarquer plusieurs types de
personnes : développeurs, architectes logiciel, analystes fonctionnel,
graphistes, ergonomes, ingénieur système, etc.

Analyse et Spécification du
projet :
• Besoins fonctionnels : Les besoins fonctionnels expriment les
principales fonctionnalités de l’application sans se préoccuper de la façon
de l’implémentation.
Authentification : lors de lancement de l’application une interface
d’authentification s’affiche, pour sécuriser l’application car elle est destinée
pour les identifiants de la société seulement.
Consultation de différent page : une fois l’utilisateur se connecte il y a diffèrent
page s’affichent (page de commande, règlement, activité).

Les différents acteurs :
Représentant :
Gérer les règlements de
payer
Gérer une commande
Gérer une activité
Administrateur :
Gérer les règlement de
payer
Gérer une commande
Gérer une activité

• Besoins non fonctionnels :
Rapidité
Sécurité
Efficacité
Réactivité

• Diagramme de cas d’utilisation :
Représentant
Administrateur
Gérer une commande
Gérer les règlements de payer
S’authentifier
Gérer une activité
Se connecter
include
include
include
include
Ajouter un représentant
Modifier un représentant
Supprimer un représentant
S’authentifier
Se connecter
include
include
include
include

• Cas d’utilisation approfondis
Administrateur
Gérer la commande
Gérer les règlements de payer
Gérer l’activité
Ajouter une activité
Modifier une activité
Supprimer une activité
Ajouter une commande
Modifier une commande
Supprimer une commande
Ajouter
Modifier
Supprimer
extend
extend
extend

Conception du projet :
• Diagramme de classe :

• Diagramme de séquence ( authentification ) :
Entrer e-mail
Entrer mot de passe
Cliquer sur se connecter
Envoyer les info de cnx
Email et mot de passe sont correctes
Valider le mot de passe
Accepter les infos
Passer a une autre page
incorrectes
Annuler

• Diagramme de séquence d’une commande :
Ajouter une commande
Formulaire d’ajout
Remplir les champs
Ajouter commande détail
Ajouter une commande avec succès
Liste du commande
ajouter

• Diagramme de séquence d’une commande: suppression :
Supprimer un client
Afficher liste de client
Sélectionner id client a supp
Demande de suppression
Suppression de client avec
succès
Client supprimer

• Diagramme de séquence d’une commande: Modification :
Modifier les coordonnés de client
Afficher liste de client
Sélection de client à modifier Demande de modification
Modification de coordonnés avec
succès
Coordonnés modifier

 N.B : les mêmes diagrammes pour la partie règlement et activité.

Réalisation :
• Technologie utilisé :
Angular

• Environnement Logiciel :
Lucidchart Vs code
Lucidchart Vs code

• Interface de l’application :
Page d’accueil

Page d’inscription

Page de connexion

Page de commande

Page d’activité

Page de règlement

Conclusion :
• Au terme de ce rapport, nous pouvons conclure que ce stage de fin
d'études nous donne l'opportunité de connecter les connaissances
théoriques avec l'environnement pratique.
• Cette application résoudre le problème de payements, commandes et
activités par conséquent, elle limite les nombres des utilisateurs à la
société.
• Enfin, nous espérons que le travail que nous accomplissons être à vos
confiances.

Merci pour votre Attention
Des questions ?