Rapport de projet de fin d’étude

Année Universitaire 2018-2019
Ministère de l’Enseignement Supérieur de la Recherche Scientifique
Université de Carthage
Institut des Hautes Études Commerciales de
Carthage
Rapport de Projet de Fin d’Études présenté en vue de l’obtention du
Diplôme de la Licence Appliquée en Technologies de l’Information.
Intitulé du Projet : Réalisation d’une application de mise en relation B2C des
professions libérales
Réalisé Par :
Ghribi Fatma Ezzahra Ouedherfi Oumaima
Organisme d’accueil :
CosaVostra
Encadrant Académique : Encadrant Professionnel:
Mme. Ben Ishak Mouna (IHEC) Mr. Asli AmenAllah (CosaVostra)

Remerciements
Au terme de ce travail nous tenons à remercier tous ceux qui ont participé de près ou de loin
à la réalisation de ce travail.
La première personne que nous tenons à remercier est notre chère encadrante académique Mme
Ben Ishak Mouna, nous tenons également à remercier notre encadrant professionnel Mr Asli
AmenAllah, pour l’orientation, la confiance, la patience qui ont constitué un apport
considérable sans lequel ce travail n’aurait pas pu être mené au bon port.
Qu’ils trouvent dans ce travail un hommage vivant à sa haute personnalité.
Un grand Merci aussi à Mr Bahri Mouhamed le directeur de tanitlab chez CosaVostra pour son
soutien et ses conseils
D’une autre part nous exprimons nos vifs sentiments et remerciements à tous nos enseignants
pour la formation qu’ils ont eu le soin de nous apporter tout au long de notre cursus
universitaire.
Nous tenons aussi à adresser nos remerciements pour les membres du jury pour l’honneur qu’ils
nous ont fait pour évaluer ce travail.
Enfin, nous adressons nos plus sincères remerciements à tous nos proches et amis, qui nous
ont toujours soutenu et encouragé au cours de la réalisation de ce projet.

i
Sommaire
Introduction Générale......................................................................................................................1
Chapitre 1 : Contexte Général.....................................................................................................2
I. Introduction...............................................................................................................3
II. Cadre du stage ...........................................................................................................3
1. Présentation de l'organisme d'accueil..........................................................................3
2. Etude de l’existant .......................................................................................................3
3. Problématique et présentation du sujet........................................................................3
III. Méthodologie de travail ............................................................................................4
1. La méthode agile .........................................................................................................4
2. La méthode Scrum.......................................................................................................4
IV. Conclusion.................................................................................................................7
Chapitre 2 : Spécification et analyse de besoins .........................................................................8
I. Introduction...............................................................................................................9
II. Les rôles Scrum.........................................................................................................9
III. Spécification des besoins ........................................................................................11
1. Identification des acteurs...........................................................................................11
2. Identification des besoins fonctionnels .....................................................................12
3. Identification des besoins non fonctionnels : ............................................................13
IV. Modélisation et analyse des besoins........................................................................14
V. Le Backlog du produit.............................................................................................14
VI. Le planning des sprints............................................................................................23
VII. Prototypages des interfaces .....................................................................................23
VIII. Conclusion...............................................................................................................27
Chapitre 3 : Conception et réalisation .......................................................................................28
I. Introduction.............................................................................................................29
II. Les Exigences techniques........................................................................................29
1. Environnement matériel ............................................................................................29
2. Environnement logiciel et langages utilisés ..............................................................29
III. Réalisation des sprints.............................................................................................33

ii
1. Étude et réalisation du sprint 0 ..................................................................................33
A. Installation et configuration de l’environnement de travail ..................................33
B. Formation et développement des sites web ...........................................................33
C. Réalisation.............................................................................................................34
A. Diagramme des cas d'utilisation ............................................................................37
B. Analyse et raffinement de cas d’utilisation ...........................................................38
a. Raffinement de cas d’utilisation « s’inscrire ».................................................38
b. Raffinement de cas d’utilisation « S’authentifier »..........................................39
C. Conception.............................................................................................................40
a. “S’inscrire”.......................................................................................................40
b. “Authentification”............................................................................................41
D. Réalisation.............................................................................................................42
E. Burndown..............................................................................................................44
F. Rétrospective .........................................................................................................44
3. Etude et la réalisation du sprint 2 ..............................................................................44
a. Raffinement de cas d’utilisation « Consulter les offres » ................................46
b. Raffinement de cas d’utilisation « Gérer ses offres » ......................................48
C. Conception.............................................................................................................51
a. “Consulter ses offres”.......................................................................................51
b. “Consulter détail d'une offre ”..........................................................................51
c. “Rechercher une offre”.....................................................................................52
d. “Choisir Catégorie ”.........................................................................................52
e. “Consulter ses offres”.......................................................................................53
f. “Ajouter une offre”...........................................................................................53
g. “Supprimer une offre”......................................................................................54
h. “Modifier une offre ”........................................................................................54
D. Réalisation.............................................................................................................55
E. Burndown..............................................................................................................57
F. Rétrospective .........................................................................................................58

iii
a. Raffinement de cas d’utilisation « Assistance Artificielle »............................59
b. Raffinement de cas d’utilisation « Consulter profil prestataire ».....................60
c. Raffinement de cas d’utilisation « Devenir prestataire » .................................60
d. Raffinement de cas d’utilisation « Consulter son profil »................................61
e. Raffinement de cas d’utilisation « Consulter liste des Comptes »...................61
C. Conception.............................................................................................................63
a. Assistance Artificielle ......................................................................................63
b. Consulter profil prestataire...............................................................................64
c. “Devenir prestataire”........................................................................................64
d. “Consulter liste des comptes” ..........................................................................65
e. “Modifier un compte” ......................................................................................65
D. Réalisation.............................................................................................................66
E. Burndown..............................................................................................................67
F. Rétrospective .........................................................................................................68
IV. Diagramme de classe général..................................................................................68
V. Conclusion...............................................................................................................69
Conclusion et perspectives ............................................................................................................70

iv
Liste des figures
Figure 1: Cycle de vie de la méthode SCRUM ...............................................................................6
Figure 2 : Les rôles du Scrum..........................................................................................................9
Figure 3 : La détermination des rôles Scrum.................................................................................11
Figure 4 : Diagramme de cas d’utilisation globale........................................................................14
Figure 5 : Prototype de l’interface « inscription ».........................................................................24
Figure 6 : Prototype de l’interface « authentification ».................................................................24
Figure 7 : Prototype de l’interface « page d'accueil » ...................................................................25
Figure 8 : Prototype de l’interface « page offres liste » ................................................................25
Figure 9 : Prototype de l’interface « page offre cards » ................................................................26
Figure 10 : Prototype de l’interface « page détails ».....................................................................26
Figure 11 : Prototype de l’interface « profil d’un particulier ».....................................................27
Figure 12 : Interface Site Web « tk1 » ..........................................................................................34
Figure 13 : Interface site web « Ben Youssef »...........................................................................34
Figure 14 : Interface Landing Page « Accueil »..........................................................................35
Figure 15 : Interface Landing Page « A propos » ......................................................................35
Figure 16 : Interface Landing Page « Service ».........................................................................36
Figure 17: Interface Landing Page « Employee of the month »..................................................36
Figure 18 : Diagramme de cas d’utilisation de sprint 1.................................................................37
Figure 19 : Raffinement de cas d’utilisation “s’inscrire”..............................................................38
Figure 20 : Raffinement de cas d’utilisation “s’authentifier” .......................................................39
Figure 21 : Diagramme de séquence « s’inscrire » .......................................................................41
Figure 22 : Diagramme de séquence« s’authentifier »..................................................................42
Figure 23 : Interface « Inscription »..............................................................................................43
Figure 24 : Interface « Authentification ».....................................................................................43
Figure 25 : Burndown du sprint 1..................................................................................................44
Figure 27 : Raffinement de diagramme de cas d’utilisation “consulter offre”..............................46
Figure 28 : Raffinement diagramme de cas d’utilisation “Gérer ses offres” ................................48
Figure 29 : Diagramme de séquence « Consulter les offres ».......................................................51
Figure 30 : Diagramme de séquence « Consulter détails d'une offre ».........................................51
Figure 31 : Diagramme de séquence « Rechercher une offre » ....................................................52
Figure 32 : Diagramme de séquence « Choisir catégorie »...........................................................52
Figure 33 : Diagramme de séquence « Consulter ses offres » ......................................................53
Figure 34 : Diagramme de séquence « Ajouter une offre » ..........................................................53
Figure 35 : Diagramme de séquence « Supprimer une offre »......................................................54
Figure 36 : Diagramme de séquence « Modifier une offre » ........................................................55
Figure 37 : Interface « Ajouter une offre »....................................................................................55
Figure 38 : Interface « Modifier une offre »..................................................................................56

v
Figure 39 : Interface « Détails d’une offre ».................................................................................56
Figure 40 : Interface « Liste de mes offres ».................................................................................56
Figure 41 : Interface « liste des offres »........................................................................................57
Figure 44 : Raffinement de diagramme de cas d’utilisation “Devenir prestataire” ......................60
Figure 45 : Raffinement de diagramme de cas d’utilisation “Consulter liste des comptes” .........61
Figure 46 : Diagramme de séquence « Consulter mon profil ».....................................................63
Figure 47 : Diagramme de séquence « Consulter mon profil ».....................................................64
Figure 48 : Diagramme de séquence « Devenir Prestataire » .......................................................64
Figure 49 : Diagramme de séquence « Consulter liste des comptes » ..........................................65
Figure 50 : Diagramme de séquence « Modifier un compte » ......................................................65
Figure 51 : Interface « Mon Profil»...............................................................................................66
Figure 52 : Interface « liste des comptes »....................................................................................66
Figure 53: Interface « Profil d’un prestataire ».............................................................................67
Figure 55 : Diagramme de classe général......................................................................................68

vi
Liste des tableaux
Tableau 1: Tableau Les rôles en scrum...........................................................................................5
Tableau 2 : Tableau Les rôles en Scrum .......................................................................................10
Tableau 3 : Les acteurs et leurs rôles.............................................................................................12
Tableau 4 : Le Backlog du produit ................................................................................................23
Tableau 5 : Tableau de planning de travail ...................................................................................23
Tableau 6 : Tableau d’environnement matériel.............................................................................29
Tableau 7 : Environnement logiciel et langage utilisés .................................................................32
Tableau 8: Backlog sprint 1...........................................................................................................37
Tableau 9 : Description textuelle de cas d'utilisation « s’inscrire » ..............................................39
Tableau 10 : Description textuelle de cas d'utilisation « s’authentifier».......................................40
Tableau 11 : Backlog sprint 2........................................................................................................45
Tableau 12 : Description textuelle de cas d'utilisation « Consulter les offres »............................46
Tableau 13 : Description textuelle de sous cas d'utilisation «Consulter détails des offre»...........47
Tableau 14 : Description textuelle de sous cas d'utilisation «Rechercher une offre » ..................47
Tableau 15 : Description textuelle de sous cas d'utilisation « Choisir catégorie » .......................48
Tableau 16 : Description textuelle de cas d'utilisation « Gérer ses offres »..................................49
Tableau 17 : Description textuelle de sous cas d'utilisation « Ajouter une offre ».......................49
Tableau 18 : Description textuelle de sous cas d'utilisation « Consulter ses offres » ...................49
Tableau 19 : Description textuelle de sous cas d'utilisation « Modifier une offre » .....................50
Tableau 20 : Description textuelle de sous cas d'utilisation « Supprimer une offre » ..................50
Tableau 21: Backlog sprint 3.........................................................................................................58
Tableau 22 : Description textuelle de sous cas d'utilisation « Assistance Artificielle» ................59
Tableau 23 : Description textuelle de sous cas d'utilisation « Consulter profil d’un prestataire »60
Tableau24: Description textuelle de sous cas d'utilisation « Devenir Prestataire »......................61
Tableau 25 : Description textuelle du cas d'utilisation « Consulter son profil »...........................61
Tableau 26 : Description textuelle de cas d'utilisation « Consulter liste des Comptes » ..............62
Tableau 27 : Description textuelle de sous cas d'utilisation « Modifier un compte »...................62
Tableau 28 : Description textuelle de sous cas d'utilisation « Supprimer un compte » ................63

Introduction Générale
Page | 1
Introduction Générale
Depuis la fin du siècle dernier, le développement de l’informatique et le développement continu
des équipements associés ont permis de traiter de grandes quantités d’informations afin de
pouvoir en tirer parti pour la quasi-totalité des activités humaines. Aucune activité de production,
de services ou autres n’ont connu de progrès sans avoir eu recours aux technologies de
l’information et de la communication TIC, En effet les TIC sont devenues des alliés privilégiés
pour les internautes puisqu'elles permettent de détenir une information plus fiable et pertinente.
Littéralement, toute personne peut construire des pages web pour proposer des biens et des
services.
Soucieuse de se mettre en phase avec la nouvelle technologie du développement web une
application web en ligne, la société « Cosa Vostra » a choisi de se tourner vers un site web qui
propose des services en peinture, bâtiment, peinture décorative, électricité, plomberie...etc.
Dans le cadre de l’élaboration de notre projet de fin d’étude, « Cosa Vostra », l’entreprise
d’accueil, nous a confié l’implémentation d’une application web en ligne qui permet à leurs
utilisateurs d'exprimer leur besoin afin de trouver un service approprié et aux prestataires de
trouver des opportunités de travail.
Ce rapport décrit les différentes étapes de réalisation de notre projet de fin d'études et s'articule
sur trois chapitres.
Dans le premier chapitre intitulé « Contexte général », nous présenterons l’organisme d’accueil,
l’étude et critique de l’existant, les Solution proposée, et enfin la méthodologie de travail.
Dans le deuxième chapitre « Spécification et analyse de besoins », nous procéderons les rôles
scrum, La spécification des besoins, La modélisation et analyse des besoins ainsi que le Backlog
du produit et Le planning des sprints, et enfin nous présenterons le prototypage des interfaces.
Dans le troisième chapitre « Conception et réalisation », nous allons essayer d'éclaircir le choix
de l'architecture, Les exigences techniques rencontrés et la réalisation des sprints ainsi que le
diagramme de classe général, Et enfin Installation et test de l’application.
Finalement nous clôturons par une conclusion à travers laquelle nous ferons une synthèse de tout
ce qui a été fait tout au long des travaux de réalisation et présenterons les valeurs ajoutées du
projet et les perspectives futures.

Page | 2
Chapitre1: Contexte Général

Chapitre 1 : Contexte Général
Page | 3
I. Introduction
Au cours de ce chapitre, nous allons mettre le travail dans son contexte général. Nous
commençons par présenter l’organisme d’accueil. Ensuite nous présentons la problématique à
étudier tout au long de ce projet de fin d’études. Enfin, nous allons introduire la méthodologie de
travail adoptée.
II. Cadre du stage
1. Présentation de l'organisme d'accueil
CosaVostra est un cabinet de conseil en stratégie digitale basé à
Paris, Londres, Bordeaux et Tunis. Sa mission est la création de
sites professionnels sur mesure basé sur des dispositifs digitaux
agiles (site vitrine, site de services, site e-catalogue, site e-commerce, site spécifique, Application
web …) afin de satisfaire les besoins de sa clientèle.
2. Etude de l’existant
Pour résoudre un problème d'électricité un accident de plomberie, le client doit se déplacer
directement au local afin de chercher une offre qui satisfait ses besoins et son budget.
Ses déplacements peuvent être inutiles et même peuvent provoquer un gaspillage de temps.
D’ailleurs, même le vendeur n’a aucun moyen pour mettre à disposition ses annonces de vente et
services, à l’exception des supports traditionnels tels que les journaux ou les petites affiches.
Ainsi, un moyen fiable et automatisé permettant d’informer un grand nombre de clients des offres
de vente et des services nécessaires.
3. Problématique et présentation du sujet
Afin de remédier aux différents problèmes ci-dessus mentionnés, on nous a confié la réalisation
d'une application web proposant des offres de dépannages, afin de permettre aux internautes
l’opportunité non seulement de la consultation des offres de dépannages en ligne mais aussi
l'opportunité de poster des offres afin de devenir un prestataire de service.
L'idée de cette application existe déjà en France, que ce soit pour un dépannage spécifique à la
plomberie « www.plomberie-depannage.com » ou bien pour tout type de dépannages «
www.mesdepanneurs.fr ». Alors pourquoi pas un site tunisien ?

Page | 4
La conception et le développement de cette application présentent le noyau de notre projet de fin
d'études.
III. Méthodologie de travail
Cette partie, est réservée pour la représentation de la méthodologie optée pour but de mettre en
place la solution. Notre projet sera développé en utilisant Agile comme méthodologie de
développement.
Les choses peuvent être confuses, étant donné la complexité de la nomenclature. Au début, on
dirait presque que “Scrum” et “Agile” sont des mots interchangeables, mais ce sont deux notions
bien distinctes.[1]
1. La méthode agile
La méthode Agile permet de mieux maîtriser les projets informatiques sous les angles délais,
coûts et résultats.
Elle intègre aussi la notion de travail en équipe, une bonne communication entre les acteurs. Cela
permet d'augmenter la crédibilité de la conduite de projet par une plus grande prévisibilité et une
plus grande satisfaction des utilisateurs.
Le but est d'apporter le plus de valeur possible aux projets, de garantir une meilleure qualité de
communication avec l'utilisateur et un meilleur contrôle de qualité par le fait que les tests sont
effectués en continu, ce qui permet de détecter rapidement les problèmes.[w1]
2. La méthode Scrum
« La méthode Scrum (« Scrum » signifie « Mêlée » en anglais), ou plus exactement le cadre
méthodologique Scrum est de loin la méthode Agile la plus utilisée dans le monde. Expérimentée
en 1993, elle bénéficie aujourd’hui de nombreux retours d’expérience. Les conférences,
communautés, formations, blogs, outils et ouvrages à son sujet ne manquent pas. » [w2]
«Scrum» est utilisé depuis le début des années 1990 pour gérer le développement des produits
complexes. Scrum n’est pas en soi un processus ni une méthode de développement de produits,
c’est un canevas pour l’application de divers procédés et techniques de développement. Scrum
met en évidence l’efficacité relative des pratiques de gestion et de développement de produit en
place, de sorte que ces dernières puissent être améliorées. Scrum se compose de plusieurs
éléments que sont l’équipe Scrum et ses rôles associés, les événements, les artéfacts et les règles.

Page | 5
Chaque élément a une raison d’être spécifique qui le rend indispensable à la réussite de
l’application de Scrum. » [w3]
La pratique de la méthode Scrum nous donne l’opportunité d’être intégré au sein de ce processus
et de participer aux cycles de développement.
Les termes les plus utilisés sont représentés par un tableau ci-dessous :
Terme Définition
Product Backlog C’est l’ensemble des fonctionnalités du produit que l’on veut
développer sous forme de « User story ».
Burndown Chart Diagramme qui permet de suivre l’état d’avancement du projet
Daily Scrum meeting C’est une réunion organisée quotidiennement qui ne dure pas plus
que 15 minutes
Produit partiel Résultat du sprint testé et potentiellement livrable.
Sprint Backlog Liste des fonctionnalités qui devront être mises en œuvre par le
logiciel.
Tableau 1: Tableau Les rôles en scrum
La figure suivante illustre simplement la mise en œuvre de SCRUM dans le projet :

Page | 6
Figure 1: Cycle de vie de la méthode SCRUM
Le principe de la méthode agile Scrum est de concentrer l'équipe de développement sur un
ensemble de fonctionnalités à réaliser de façon itérative, dans des itérations d’une durée de deux
à quatre semaines, appelées des Sprints. Chaque Sprint est caractérisé par un but défini par le
directeur de produit (Product Owner). Ce dernier choisit les fonctionnalités à implémenter dans
chaque itération. Chaque Sprint doit aboutir à la livraison d'un produit partiel. Durant un Sprint,
le Scrum Master (le meneur et facilitateur du projet) à la charge de résoudre les problèmes non
techniques et minimiser au maximum les perturbations extérieures. Un principe de base en Scrum
consiste à la participation permanente et active des clients, afin de discuter les fonctionnalités du
logiciel et de choisir les tâches qui seront implémentées dans chaque Sprint. Le client peut, à tout
moment, modifier ou ajouter des fonctionnalités à réaliser, néanmoins, il ne peut pas interrompre
ce qui est en cours de réalisation pendant un Sprint. [w4]
•Scrum a pour objectif tout d'abord de produire un logiciel fonctionnel en mettant en avant la
rentabilité et surtout la satisfaction du client. Ce dernier doit pouvoir donc juger, sur le tas, de
l'avancement de son produit.
•Dans la méthodologie Scrum, l'équipe de développement s'organise elle-même pour déterminer
la meilleure façon de produire les exigences les plus prioritaires.
•Scrum est une approche basée sur le principe d’une équipe soudée où il y a plus de coopération
et de communication ; Des réunions se font tous les jours (Daily meeting) et chaque semaine
(Weekly meeting) pour encadrer les équipes et recaler les objectifs.

Page | 7
•Finalement, à chaque fin de sprint, tout le monde a un pouvoir de décision. L'équipe devra
décider de livrer le produit en l'état, ou de continuer à améliorer le produit sur une itération
supplémentaire. [w5]
Après avoir choisis la bonne méthodologie, qui est une étape importante durant le cycle de
développement d’un produit informatique, nous allons présenter le formalisme choisi pour la
conception du site web. [2]
IV. Conclusion
Au cours de ce chapitre, nous avons présenté l'organisme d'accueil ainsi qu'une description
abrégée de notre projet à réaliser, tout en spécifiant la problématique et en proposant la solution
envisagée pour affronter la situation actuelle. Nous avons aussi présenté le langage et la
méthodologie choisie pour suivre notre projet. Dans le chapitre suivant nous allons faire la
spécification et l'analyse des besoins ainsi que la définition de notre Backlog de produit et la
préparation du planning de travail.

Page | 8
Chapitre2: Spécification et analyse de besoins

Chapitre 2 : Spécifications et analyse de besoins
Page | 9
I. Introduction
Avant de démarrer un projet, il est nécessaire de le définir et de le planifier afin de bien le piloter
et d’atteindre les objectifs fixés.
Dans ce chapitre, nous allons aborder la première phase de la méthode SCRUM qui est
indispensable pour le reste du travail. Il sera donc question de définir et de spécifier les besoins
fonctionnels et non fonctionnels avant d’analyser et de concevoir les diagrammes de cas
d’utilisations ainsi que le prototypage des interfaces.
II. Les rôles Scrum
Dans Scrum l'équipe à un rôle important, elle est construite afin d'optimiser la productivité et la
flexibilité. Donc, pour la réalisation et le développement d'un produit une équipe doit être bien
qualifiée et compétente pour assurer le bon déroulement d'un projet. [2]
Figure 2 : Les rôles du Scrum
Scrum présente trois rôles principaux, expliqués dans ce tableau comme suit :

Page | 10
Rôles Description Responsabilité
Product Owner
(Mohamed Bahri)
C'est une personne qui
représente les clients,
éclaircir leurs besoins,
détermine leurs priorités et
prend les décisions
nécessaires concernant
l'acheminement du projet.
• Doit porter la vision du produit
• Doit être disponible pour l'équipe
• Doit s'intéresser aux problèmes de
l'équipe
• Choisit la date et le contenu du
release
• Ajuster les fonctionnalités et les
priorités à chaque sprint si
nécessaire.
Scrum Master
(Amenallah Asli)
C'est une personne qui
s'assure de l'implication de
chaque membre de l'équipe
et de les aider à franchir les
obstacles rencontrés.
Autrement dit, c'est un coach
qui aide son équipe à
résoudre les problèmes.
• Protéger l'équipe des interférences
extérieures
• S'assure que toute l'équipe est
complètement fonctionnelle et
productive
• Programme des réunions et
propose des solutions
• Veille à l'amélioration de l'équipe
Développement Team
(-Oumaima Ouedherfi
-Fatma Ezzahra Ghribi)
Il n'y a pas de hiérarchie
entre les membres de
l'équipe, elle s'autogère.
l’équipe est composée de 2
à 9 personnes, constituée
d'une forte communication et
Coopération entre les
membres de l'équipe.
• Partager les responsabilités de
développement
• Les membres prennent les
décisions ensemble et s'adresse
directement au client.
Tableau 2 : Tableau Les rôles en Scrum
Dans ce contexte de ce travail, la répartition des rôles aux différents membres est représentée à
l'aide de ScrumWise comme suit :

Page | 11
Figure 3 : La détermination des rôles Scrum
III. Spécification des besoins
Cette partie va servir à poser les bases du recueil des besoins du système à réaliser. Pour pouvoir
clarifier les besoins des utilisateurs, qui ne sont pas toujours des informaticiens et de bien
comprendre les fonctionnalités que le système doit fournir, nous allons déterminer les besoins
fonctionnels et les besoins non fonctionnels.
1. Identification des acteurs
Un acteur représente une abstraction d’un ensemble de rôles joués par des entités externes et
interagissant directement avec le système. Il représente une personne, un matériel ou un logiciel
qui interagit directement avec le système en question.
Ce tableau propose une description détaillée de tous les acteurs qui interagissent avec le site.

Page | 12
Acteur Rôle
Administrateur Il est responsable de la gestion des offres et des profils des utilisateurs
que ce soit un prestataire de service ou bien un particulier.
Il assure aussi la maintenance de la plateforme.
Prestataire Celui qui peut publier des offres, Il possède un compte professionnel.
Client Celui qui peut consulter les offres disponibles, Il possède un compte
user.
Visiteur Il doit s'inscrire pour pouvoir accéder à l'application.
Tableau 3 : Les acteurs et leurs rôles
2. Identification des besoins fonctionnels
Les besoins fonctionnels sont les fonctionnalités qui doivent être offerts par le système et qui sont
indispensables pour les utilisateurs.
Les besoins fonctionnels nécessitent donc la mise en place d’un front office et d’un back office.
a) Le FrontOffice est la vitrine du site, c’est la partie du site internet qui est visible par les
internautes et avec laquelle il peut interagir.
Le FrontOffice propose des fonctionnalités diverses aux visiteurs.
- Les fonctionnalités destinées aux visiteurs :
S’inscrire : Les visiteurs doivent créer un compte afin de bénéficier des privilèges de
l’application, cette fonctionnalité donne accès aux visiteurs à deux choix soit s’inscrire en tant
que prestataire de service ou bien en tant que client deux formulaire d’inscription qu’ils devront
être remplis et validés, un email de validation de l’inscription sera envoyé par la suite à la
messagerie électronique.
- Les fonctionnalités destinées aux particuliers :
S’authentifier : L’authentification permet la saisie du login et du mot de passe afin de pouvoir
consulter les offres.

Page | 13
Consulter les offres : Cette fonctionnalité permet aux particuliers de consulter les offres
proposées par l’application web ainsi que la description et les informations appropriées de ces
derniers.
Rechercher une offre : Cette fonctionnalité permet aux particuliers de faire une recherche rapide
et précise de l’offre désirée.
- Les fonctionnalités destinées aux prestataires des services :
S’authentifier : L’authentification permet la saisie du login et du mot de passe afin de pouvoir
ajouter une offre
Ajouter une offre : Cette fonctionnalité permet aux prestataires des services d’ajouter une offre.
Consulter les offres : Cette fonctionnalité permet aux prestataires des services de consulter les
offres proposées par l’application web ainsi que la description et les informations appropriées de
ces derniers.
Rechercher une offre : Cette fonctionnalité permet aux prestataires de faire une recherche
rapide et précise de l’offre désirée.
Gérer son profil : Chaque prestataire de service peut grâce à cette fonctionnalité modifier les
informations relatives aux champs du formulaire qu’il a précédemment rempli tel que l’adresse
électronique, son e-mail et son mot de passe.
b) Le BackOffice est la partie invisible au public, elle n’est donc accessible que par le/les
administrateur(s) du site qui permet de gérer le contenu et les fonctionnalités.
Gérer les catégories : Cette fonctionnalité permet de consulter, de modifier, d’ajouter ou de
supprimer un ou plusieurs catégories d’offres.
Gérer les offres : Cette fonctionnalité permet de consulter, de modifier, d’ajouter ou de
supprimer un ou plusieurs offres de plusieurs prestataires indépendants.
Gérer les comptes : Cette fonctionnalité permet de consulter, de modifier, d’ajouter ou de
supprimer un ou plusieurs profilent des prestataires du service ainsi que les particuliers.
3. Identification des besoins non fonctionnels :
La sécurité : l'application devra sécurisée car les informations ne devront pas être accessibles à
tout le monde.
Performance : l’application doit être performant répond à toutes les exigences d’une manière
optimale.

Page | 14
La rapidité : la durée d'exécution des traitements s'approche le plus possible du temps réel.
L’ergonomie : l’application doit être facile à utiliser et garantir une meilleure expérience aux
utilisateurs.
IV. Modélisation et analyse des besoins
Dans cette partie, nous allons présenter le diagramme de cas d’utilisation global qui traduit d’une
façon semi-formelle les fonctionnalités du système.
Figure 4 : Diagramme de cas d’utilisation globale
V. Le Backlog du produit
Le Backlog Scrum est destiné à recueillir tous les besoins du client que l’équipe projet doit
réaliser. Il contient donc la liste des fonctionnalités intervenant dans la constitution d’un produit,
ainsi que tous les éléments nécessitant l’intervention de l’équipe projet. Tous les éléments inclus
dans le Backlog scrum sont classés par priorité indiquant l’ordre de leur réalisation.

Page | 15
Les caractéristiques fonctionnelles sont appelées des histoires utilisateurs (user story). Chacune
de ces Stories doit avoir un but métier et, par la suite, représente un cas d’utilisation détaillé. Les
histoires utilisateur de ce projet seront traitées par les cas d’utilisation les plus prioritaires.[3]
Chaque histoire d’utilisateur contient une estimation qui est l’évaluation initiale de l’équipe sur
la quantité de travail nécessaire pour implémenter cette exigence. Ce Backlog servira à piloter
l’équipe de développement et pourra évoluer tout au long de notre projet. Pour estimer la
complexité de nos user story, nous avons utilisé :
 5 : Simple
 8 : Normal
 13 : Difficile
 21 : Très Difficile
Ce backlog compose de 7 éléments :
Feature : Ordonner les user stories selon un sujet qui leur englobe.
ID : l’identifiant du chaque user story.
User Story : c’est une demande de fonctionnelle écrite pour mettre en avant les besoins
d’utilisateur.
Priorité : c’est la priorité de l’user story selon la valeur métier et l’ordre de réalisation
Complexité : la complexité de la réalisation de chaque user story.
Les critères d’acceptation : Représentent un ensemble de conditions que la story doit satisfaire
pour être considérée comme complète.
Feature ID User Story Priorité Complexité Les critères
d’acceptation
Sprints
#AI20 En tant que
visiteur je
veux
s’inscrire en
tant que
client.
1 13 - Remplir les
champs du
formulaire :
Prénom *,
Adresse mail*,
Mot de passe*,
Confirmer mot

Page | 16
Gestion
d’authentific
ation
et
d’inscription
de passe*.
-Cliquez sur
bouton créer un
compte.
-Cliquez sur
bouton
“demande un
service”
1
#AI30 En tant que
visiteur je
veux
s’inscrire en
tant que
prestataire.
2 21 - Remplir les
champs du
formulaire :
Prénom *,
Adresse mail*,
Mot de passe*,
Confirmer mot
de passe*.
-Cliquez sur
bouton créer un
compte.
-Cliquez sur
bouton ‘Devenir
prestataire”
- Remplir les
champs du
deuxième
formulaire :
Raison sociale *,
Domaine*,
Téléphone*,
Région*,
Statut*,
Numéro fiscal,
Tarif,

Page | 17
Description.
-Cliquer sur le
bouton
‘Compléter
infos’
#AI40 En tant
qu’utilisateur
je veux
s'authentifier
2 5 -Insérer des
données valides.
-bouton
(connecter)
-Vérification de
l’association
Adresse mail
/mot de passe :
Chaque
association
Correspond à un
profil
(espace réservé)
dépendant
du rôle de
l’utilisateur.
OU
-bouton
(connecter avec
Google).
OU
-bouton
(connecter avec
Facebook).
#PS10 En tant que
prestataire de
service je
veux ajouter
3 8 -Être
Authentifié en
tant que
prestataire de

Page | 18
Gestion
des offres
une offre. service
- Remplir le
champ du
formulaire de
l'ajout d’une
offre.
Titre*,
Région*,
Catégorie*,
Description,
- Clique sur le
bouton “ajouter”
2
#PS20 En tant que
prestataire je
veux
modifier mes
offres.
3 8 -Être
Authentifié
-Accéder à “mes
offres”
-Sélectionner
l’offre à
modifier.
-Modifier l’offre
sélectionnée
- Clique sur le
bouton
“Valider”
#PS30 En tant que
prestataire je
veux
supprimer
une de mes
offres.
4 8 -Être
Authentifié
-Accéder à
l’offre à
supprimer
-Supprimer
l’offre
sélectionnée
- Clique sur le

Page | 19
bouton
“Valider”
#PU10 En tant que
prestataire je
veux
consulter
mes offres.
5 8 -Être
Authentifié
-Accéder à la
page “mes
offres”
-Voir tous mes
offres.
#PU20 En tant que
prestataire je
veux
consulter les
détails de
mon offre.
6 13 -Être
Authentifié
-Accéder à “mes
offres”
-Sélectionner
l’offre à
consulter
- Accéder au
détail.
#PU30 En tant que
client /
prestataire je
veux
consulter les
offres
publier.
7 8 -Être
Authentifié
-Accéder aux
catégories
-Sélectionner
une catégorie
-Voir les offres.
#PU40 En tant que
client /
prestataire je
veux
rechercher
une offre.
8 13 Être Authentifié
-Accéder aux
offres
-Rechercher une
offre dans la
zone de

Page | 20
recherche ’
#PU50 En tant que
client /
prestataire je
veux
consulter les
détails d’une
offre.
9 13 -Être
Authentifié
-Accéder aux
offres
-Sélectionner
une offre
- Voir les détails
de l’offre
#PU60 En tant
qu’administr
ateur je veux
consulter les
offres.
10 13 -Être
Authentifié
-Accéder au
‘Option Admin’
- Accéder à la
liste des offres.
#AD4
0
En tant
qu’administr
ateur je veux
ajouter une
offre.
11 5 -Être
Authentifié en
tant
qu’Administrate
ur
- Remplir les
champs du
formulaire.
Titre*,
Région*,
Catégorie*,
Description,
- Clique sur le
bouton “ajouter”
#AD5
0
En tant
qu’administr
12 5 --Être
Authentifié en

Page | 21
ateur je veux
modifier une
offre.
tant
qu’Administrate
ur
- Accéder à une
offre
-Modifié l’offre
#AD6
0
En tant
qu’administr
ateur je veux
supprimer
une offre.
13 5 --Être
Authentifié en
tant
qu’Administrate
ur
- Accéder à
l’offre
-Supprimer
l’offre
Gestion
des comptes
#AD1
0
En tant que
client /
Prestataire
je veux
consulter
mon profil
14 8 -Être
Authentifié
-Accéder à
‘Mon profil’
3
#AD2
0
En tant que
client je veux
consulter
profil d’un
prestataire
15 13 -Être
Authentifié
-sélectionner
une offre
-Voir le profil
de prestataire
#AD3
0
En tant que
client je veux
des
informations
16 8 -Être
Authentifié en
tant que
prestataire
-Accéder à la

Page | 22
‘Chatbot’
#AD4
0
En tant
qu’administr
ateur je veux
consulter la
liste des
comptes
17 8 -Être
Authentifié
-Accéder au
‘Option Admin’
- Accéder à la
liste des
utilisateurs
En tant que
client je veux
devenir un
prestataire
18 -Être
Authentifié
-Accéder au
‘Mon pr’
- cliquer sur
« Devenir
prestataire »
#AD6
0
En tant
qu’administr
ateur je veux
supprimer un
compte
utilisateur.
19 8 -Être
Authentifié
-Accéder au
‘Option Admin’
- Accéder à la
liste des
utilisateurs
- Accéder au
profil à
supprimer
-Supprimer le
profil
#AD7
0
En tant
qu’administr
ateur je veux
modifier un
compte
20 8 -Être
Authentifié
-Accéder au
‘Option Admin’
- Accéder à la

Page | 23
utilisateur. liste des
utilisateurs
- Accéder au
profil à modifier
-Modifier le
profil
Tableau 4 : Le Backlog du produit
VI. Le planning des sprints
La réunion de planification des sprints est la partie la plus importante dans Scrum afin de
préparer le planning de travail et d’identifier le backlog des sprints. Il s'agit de choisir la durée
des sprints qui diffère selon la complexité du projet et le nombre de l'équipe. Ce projet sera divisé
sur 3 sprints dont les durées en jours se diffèrent d’un sprint à un autre suivant la quantité de
travail.
La figure suivante résume notre planning de travail
Sprint 1 Du 01/03/2019 au 22/03/2019
Sprint 2 Du 22/03/2019 au 17/04/2019
Sprint 3 Du 18/04/2019 au 03/05/2019
Tableau 5 : Tableau de planning de travail
VII. Prototypages des interfaces
Il s’agit de construire des prototypes d’apparence générale des interfaces utilisateurs. En effet, les
interfaces graphiques font que l’utilisateur final soit plus interactif, précis et le poussent à mieux
s’exprimer quant à ses attentes.

Page | 24
Les interfaces utilisateurs relatives à l’inscription, l’authentification, page d'accueil, page des
offres et leurs détails ainsi que la page profile s’illustrent comme suit :
Figure 5 : Prototype de l’interface « inscription »
Figure 6 : Prototype de l’interface « authentification »

Page | 25
Figure 7 : Prototype de l’interface « page d'accueil »
Figure 8 : Prototype de l’interface « page offres liste »

Page | 26
Figure 9 : Prototype de l’interface « page offre cards »
Figure 10 : Prototype de l’interface « page détails »

Page | 27
Figure 11 : Prototype de l’interface « profil d’un particulier »
VIII. Conclusion
A la fin de ce chapitre, le plan de release à suivre a été préparé à partir du Backlog de sprint déjà
défini. La définition du Backlog de produit a permis d’avoir une vision plus précise sur le sujet et
une compréhension plus profonde des tâches à réaliser. L’énuméré des besoins fonctionnels et
non fonctionnels du système ainsi que les acteurs et leurs rôles étaient à la base de l’élaboration
de cette partie.
Le prochain chapitre, sera consacré pour la phase de la réalisation de la solution.

Page | 28
Chapitre3 : Conception et réalisation

Chapitre 3 : Conception et réalisation
Page | 29
I. Introduction
Nous présentons dans ce chapitre la partie conception du projet. Nous commençons par
présenter l’environnement matériel et logiciel dans lesquels l’application a été développée.
Ensuite une description générale de notre application. Enfin nous mettons en évidence le côté
conceptuel de notre application qui constitue une étape fondamentale qui précède
l’implémentation, permet de détailler les différents diagrammes et scénarios à implémenter
dans la phase suivante. Les exigences techniques
II. Les Exigences techniques
L’environnement de travail représente l’ensemble d’outils matériels et logiciels ainsi que les
langages de programmation utilisés pour l'exécution d’une solution informatique.
1. Environnement matériel
Ce projet a été réalisé sur deux ordinateurs ayant les caractéristiques suivantes :
• Ordinateur : Asus
• Processeur : Intel Core i3
• Mémoire vive : 8Go
• Disque dur : 1To
• Système d’exploitation : Microsoft
Windows 10
• Ordinateur : Asus
• Processeur : Intel Core i7
• Mémoire vive : 8Go
• Disque dur : 1To
• Système d’exploitation : Microsoft
Windows 10
Tableau 6 : Tableau d’environnement matériel
2. Environnement logiciel et langages utilisés
Le tableau ci-dessus représente l’ensemble des différents logiciels que nous avons combinés
pour enfin avoir un résultat du travail :

Page | 30
Pour le développement d’Application
Angular
Avec cette technologie nous avons réalisé les interfaces pour
pouvoir profiter du directif building qui améliorent le travail en
équipe et les développements effectués en parallèle.
Nous avons choisi firebase comme base de données parce qu'il
offre des fonctionnalités telles que le Storage, la sécurité des
données, la messagerie et le hosting qui permet de faciliter le
travail du développement.
Pour le design de l'application on a choisi Matériel Design.
C’est un nouveau langage visuel et interactif de webdesign
centré sur l’expérience de l'utilisateur.
Adobe Photoshop il nous a aidés à traiter les images “web”
Nous avons choisi Visual studio comme outil de développement
parce qu'il nous permet de créer un environnement sur-mesure,
c'est aussi techniquement abouti et très flexible.
Côté fonctionnalités, VS Code se révèle bien pratique sur l'auto-
complétion du code puissant.
Dans un premier lieu, nous avons décidé de travailler avec des
Template Porto qui utilisent les langages HTML CSS3 et
bootstrap.
Afin de pouvoir afficher des images de hautes qualité et
d'utiliser des animations CSS3

Page | 31
En second temps, nous avons travaillé avec la template Fuse
pour les raisons qu’il est un excellent outil et une excellente
source d’apprentissage pour Angular. Mais il nécessite
également au moins un niveau minimum de connaissances en
Angular pouvoir repérer dans le code source.
Conception
Pour la conception UML s'était l’outil, Parce qu'il permet
d’obtenir une modélisation de très haut niveau et de Faire
collaborer des participants de tous horizons autour d'un même
document de synthèse.
Team work
les raisons d'utiliser SourceTree pour Git s'était:
Il permet de changer de copie de travail en un seul clic.
Il indique également dans quelle mesure vous êtes en avance
ou en retard par rapport à la version du référentiel et vous alerte
de pousser ou de tirer.
Donne une vue 'en temps réel' de vos fichiers locaux.
Chaque modification de validation et de fichier est affichée et
accessible.
fournissant un outil très puissant pour le contrôle de version.
TeamViewer est une solution rapide et sécurisée pour accéder à
distance aux ordinateurs.
Nous avons utilisé donc TeamViewer pour pouvoir accéder à
l’ordinateur du binôme en cas de bug.
Mail professionnelle sous la forme
« unnom@cosaVostra »
utiliser afin d'échanger des informations (Daily meeting, time,
membres), des documents.

Page | 32
Slack
Discussions sur le projet regroupe toute l'équipe de la société
«CosaVostra» et toutes les informations utiles pour pouvoir
collaborer en ligne.
ChatBot
DialogFlow c’est une interface API qui permet d’utiliser
l’intelligence de Google, Dans le cadre de créer un ChatBots
conversationnels pour mieux communiquer avec les utilisateurs
de l’application.
Maquettes
le choix de travailler des maquettes avec balsamique pour la
seule raison qu'on peut facilement créer une panoplie de dessins
d’application (wireframe) en glissant et déposant des éléments
dans l’interface.
Scrum Tools
on a pensé à Scrumwise comme solution de gestion de projet en
ligne utilisé pour la gestion de projet en type Agile.
Tableau 7 : Environnement logiciel et langage utilisés
Pourquoi Angular?

Page | 33
Angular est l’un des Framework les mieux réputés et les plus utilisés par les développeurs de
front-end. Il fournit donc nativement tout le nécessaire pour produire une application entière
avec une configuration standard :
Configuration de build et d'optimisation complète.
 Module d'animations.
 Module de "routing".
 Module de formulaires.
Les modules d’Angular permettent d'ajouter des fonctionnalités «bootstrap/Material Design»
aux Framework de base afin de pouvoir l’enrichir. De plus Angular offre de nombreuses
solutions et conceptions prêtes à l’emploi, Et il offre une documentation qui permet de trouver
toutes les informations nécessaires rapidement.
III. Réalisation des sprints
1. Étude et réalisation du sprint 0
A. Installation et configuration de l’environnement de travail
L'environnement de travail désigne l’ensemble des logiciels sur lesquels sont exécutés les
programmes de l'application web, Pour cela on a préparé :
 Ide : Visual studio code https://code.visualstudio.com/
 logiciel : Node js https://nodejs.org/en/download/ et Git https://git-scm.com/
Parce-que Angular nécessite un environnement de développement inclut Node.js et un
système de contrôle de version.
 Framework : Angular 7 https://angular.io/guide/quickstart/
 Logiciel : Sourcetree (git) https://www.sourcetreeapp.com/
 Base de données : Firebase https://firebase.google.com/docs/hosting/deploying
B. Formation et développement des sites web

Page | 34
Une formation HTML CSS Angular était prise en charge par la société, Dans le cadre de notre
formation et pour pratiquer les connaissances acquises auprès des tutoriels de la formation on
a créé deux sites web développé en HTML CSS et Bootstrap en utilisant des Template Porto,
Bootstrap est un Framework destiné à faciliter la création d’applications Web on peut
l’intégrer avec HTML et avec Angular.
Site TK-1 qui est la première ligue de kickboxing Tunisienne, Il est en ligne.
Figure 12 : Interface Site Web « tk1 »
Le deuxième site pour le Bijoutier ben Youssef.
Figure 13 : Interface site web « Ben Youssef »
C. Réalisation

Page | 35
Après une certaine maitrise de ces langages en a développé une Landing Page pour notre
application «Oui Mr» elle se distingue des autres pages du site par le fait qu'elle est censée de
représenter aux visiteurs, le site sur lequel il se trouve de manière claire et forte.
Afin de montrer les résultats de ce sprint, nous allons présenter quelques captures d'écran :
Figure 14 : Interface Landing Page « Accueil »
Figure 15 : Interface Landing Page « A propos »

Page | 36
Figure 16 : Interface Landing Page « Service »
Figure 17: Interface Landing Page « Employee of the month »
L'équipe Scrum doit tout d'abord définir le but de ce sprint avant de s'y lancer. Le but doit être
définie en terme métier et non pas en terme technique pour qu'il soit compréhensible par les
membres en dehors de l'équipe.
Ce sprint a pour but de développer la première partie de notre projet qui est la gestion
d’authentification et inscription.

Page | 37
Le tableau suivant résume le Backlog du sprint 1 :
Tableau 8: Backlog sprint 1
Cette partie comporte la conception du sprint 1 qui définit les composants sous forme de
diagramme de cas d’utilisation et diagramme de séquence système détaillé.
A. Diagramme des cas d'utilisation
La figure ci-dessus nous présente le diagramme des cas d'utilisations globaux pour ce premier
sprint.
Figure 18 : Diagramme de cas d’utilisation de sprint 1

Page | 38
B. Analyse et raffinement de cas d’utilisation
Le raffinement de cas d’utilisation consiste à recenser toutes les interactions entre le système
et les acteurs de façon textuelle. Le cas d’utilisation doit avoir un début et une fin clairement
identifiés. Il doit préciser quand ont lieu les interactions entre acteurs et système, et quels sont
les messages échangés. Il faut également préciser les variantes possibles sous forme de cas
nominaux, les cas alternatifs, les cas d’erreurs, tout en essayant d’ordonner séquentiellement
les descriptions, afin d’améliorer leur lisibilité. Chaque unité de description de séquences
d’actions est appelée enchaînement. Un scénario représente une succession particulière
d’enchaînements, qui s’exécute du début à la fin du cas d’utilisation.
Dans cette partie nous avons raffiné les cas d’utilisations de sprint 1.
a. Raffinement de cas d’utilisation « s’inscrire »
Figure 19 : Raffinement de cas d’utilisation “s’inscrire”
 Description textuelle du cas d'utilisation « s’inscrire »
Titre : S’inscrire
Acteur : Visiteur
Pré-condition : Accéder à la page inscription.
Post-condition : Visiteur inscrit
Scénario Nominal (1) : inscription de simple utilisateur : Ce cas d’utilisation commence
lorsque le visiteur demande au système de s’inscrire en tant que simple utilisateur.
1) L’utilisateur remplit le formulaire d’inscription.
2) L’utilisateur clique sur le bouton S’inscrire.
3) Le système envoie les données à la base de données.
4) le système affiche un mail de confirmation de l'inscription.
Scénario Nominal (2) : inscription de prestataire de service : Ce cas d’utilisation
commence lorsque l’utilisateur demande au système de s’inscrire en tant que prestataire de
service, ce scénario ressemble au scénario (1) sauf que le formulaire est différent.

Page | 39
Scénario alternatif :
1 : l’email saisi est déjà utilisé.
2 : Les données obligatoires ne sont pas saisies.
3 : le format de l’email est incorrect.
Le système affiche un message d’erreur.
Tableau 9 : Description textuelle de cas d'utilisation « s’inscrire »
b. Raffinement de cas d’utilisation « S’authentifier »
Figure 20 : Raffinement de cas d’utilisation “s’authentifier”
 Description textuelle de cas d'utilisation « s’authentifier »
Titre : S’authentifier
Acteur : Prestataire
Pré-condition : Accéder à la page d’authentification
Post-condition : Prestataire s’authentifier
Scénario Nominal (1) : s’authentifier avec mail : Ce cas d’utilisation commence
lorsque le prestataire demande au système de s’authentifier avec mail.
1) L’utilisateur saisit son mail et son mot de passe.
2) L’utilisateur clique sur le bouton login.
3) Le système vérifier les données à la base de données.
4) le système ouvre la page d’accueil.
Scénario Nominal (2) : s’authentifier avec Facebook : Ce cas d’utilisation commence
lorsque l’utilisateur demande au système de s’authentifier avec Facebook.

Page | 40
1) L’utilisateur clique sur le bouton “Se connecter avec Google”.
2) Le système vérifier les données à la base de données.
3) le système ouvre la page d’accueil.
Scénario Nominal (3) : s’authentifier avec Gmail : Ce cas d’utilisation commence
Lorsque l’utilisateur demande au système de s’authentifier avec Gmail ; ce scénario
ressemble au scénario(2) sauf que le bouton change.
1 : l’email saisi est incorrect.
2 : le mot de passe saisi est incorrect.
3 : le format de l’email est incorrect.
Le système affiche un message d’erreur.
Tableau 10 : Description textuelle de cas d'utilisation « s’authentifier»
C. Conception
Au niveau de la conception. Diagramme de séquence assure une représentation des
collaborations entre des objets pour la réalisation d’un cas d’utilisation, selon un point de vue
temporel et une représentation de la chronologie des envois de messages entre les objets.
a. “S’inscrire”
 Diagramme de séquence « s’inscrire »

Page | 41
Figure 21 : Diagramme de séquence « s’inscrire »
b. “Authentification”
 Diagramme de séquence « s’authentifier »

Page | 42
Figure 22 : Diagramme de séquence« s’authentifier »
D. Réalisation
Afin de montrer les résultats de ce sprint, nous allons présenter quelques captures d'écran. La
figure ci-dessous représente la page d’inscription.

Page | 43
Figure 23 : Interface « Inscription »
L’interface suivant permet à l’utilisateur d’accéder au système après une validation de son
mail et son mot de passe.
Figure 24 : Interface « Authentification »

Page | 44
E. Burndown
Burndown chart est un graphe, mis à jour à la fin de chaque sprint, montrant la tendance de
l’avancement dans la réalisation des éléments du backlog. [1]
Figure 25 : Burndown du sprint 1
F. Rétrospective
Au cours de la réalisation de ce sprint ce qui bien marché s’authentifier et inscription, aussi
nous avons rencontré quelques problèmes, à savoir :
-l’inscription pour le prestataire.
3. Etude et la réalisation du sprint 2
Ce sprint a pour but de développer la deuxième partie de notre projet qui est la gestion des
offres.
Le tableau suivant résume le backlog du sprint 2 :

Page | 45
Tableau 11 : Backlog sprint 2
La partie suivante comporte Dans notre cas, la spécification fonctionnelle s'introduit par le
diagramme de cas d'utilisation d'UML, la description textuelle et les diagrammes de séquences
de ces derniers.
La figure ci-dessus nous présente le diagramme de cas d'utilisations de sprint 2:

Page | 46
a. Raffinement de cas d’utilisation « Consulter les offres »
Figure 27 : Raffinement de diagramme de cas d’utilisation “consulter offre”
 Description textuelle de cas d'utilisation « Consulter les offres »
Titre : Consulter les offres
Acteur : Client
Pré-Condition : Être authentifié
Post-Condition : Choisir Catégorie, Recherche une offre, Consulter détail des offres
Scénario Nominal (1) : Consulter les offres : Ce cas d’utilisation commence lorsque
le client demande à la plateforme de consulter les offres.
1) Le client accède à la page d’accueil du site.
2) Le client clique sur la page offres.
Tableau 12 : Description textuelle de cas d'utilisation « Consulter les offres »
 Description textuelle de sous cas d'utilisation « Consulter détail d’une offre»
Titre : Consulter détail d’une offre
Acteur : Client
Pré-Condition : Consulter les offres
Post-Condition : Consulter détail d’offre
Scénario Nominal (1) : Consulter détail une offre : Ce cas d’utilisation commence

Page | 47
lorsque
le client demande à la plateforme de consulter une offre.
2) Le client se redirige vers la page des catégories.
3) Le client choisit catégorie à consulter ces offres.
4) Le client clique sur une offre.
5) Page de détail s’ouvre.
Tableau 13 : Description textuelle de sous cas d'utilisation «Consulter détails des offre»
 Description textuelle de sous cas d'utilisation « Recherche une offre»
Titre : Recherche une offre
Acteur : Client
Pré-Condition: Consulter les offres
Post-Condition: Recherche une offre
Scénario Nominal (1) : Recherche une offre : Ce cas d’utilisation commence lorsque
le client demande à la plateforme de recherche une offre.
1) Le client accède à la page d’accueil.
4) Le client écrit dans la zone de recherche.
5) résultat de recherche affiche.
1 : aucune offre trouvée :
Le système n’affiche aucun résultat.
Tableau 14 : Description textuelle de sous cas d'utilisation «Rechercher une offre »
 Description textuelle de sous cas d'utilisation « Choisir catégorie»
Titre : Choisir catégorie
Acteur : Client
Pré-Condition : Consulter les offres

Page | 48
Post-Condition : Choix d’une catégorie
Scénario Nominal (1) : Choisir catégorie : Ce cas d’utilisation commence lorsque
le client demande à la plateforme de choisir catégorie.
3) Le client choisit catégorie à consulter.
Tableau 15 : Description textuelle de sous cas d'utilisation « Choisir catégorie »
b. Raffinement de cas d’utilisation « Gérer ses offres »
Figure 28 : Raffinement diagramme de cas d’utilisation “Gérer ses offres”
 Description textuelle de sous cas d'utilisation « Gérer ses offres »
Titre : Gérer ses offres
Post-Condition : Gérer ses offres
Scénario Nominal (1) : Gérer ses offres : Ce cas d’utilisation commence lorsque le
prestataire demande à la plateforme de Gérer ses offres.
1) Le prestataire accède à la page d’accueil.
2) Le prestataire se redirige vers la page « mes offres ».

Page | 49
Tableau 16 : Description textuelle de cas d'utilisation « Gérer ses offres »
 Description textuelle de sous cas d'utilisation « Ajouter une offre »
Titre : Ajouter une offre
Pré-Condition : Consulter ses offres
Post-Condition : Offre Ajoutée
Scénario Nominal (1) : Ajouter offre : Ce cas d’utilisation commence lorsque
le prestataire demande à la plateforme d’ajouter une offre.
1) Le prestataire accède à la page d’accueil du site.
2) Le prestataire clique sur le lien ajouter une offre.
3) Le prestataire remplit le formulaire d’ajout.
4) Le prestataire cliquez sur le bouton ajouter.
Tableau 17 : Description textuelle de sous cas d'utilisation « Ajouter une offre »
 Description textuelle de sous cas d'utilisation « Consulter ses offres »
Titre : Consulter ses offres
Pré-Condition : Gérer ses offres
Post-Condition : Consulter ses offres
Scénario Nominal (1) : Consulter ses offres : Ce cas d’utilisation commence lorsque le
prestataire demande à la plateforme de consulter ses offres.
1) Le prestataire accède à la page d’accueil.
2) Le prestataire se redirige vers la page « mes offres ».
3) Le prestataire consulte sa liste des offres.
Tableau 18 : Description textuelle de sous cas d'utilisation « Consulter ses offres »

Page | 50
 Description textuelle de sous cas d'utilisation « Modifier une offre»
Titre : Modifier une offre
Post-Condition : Offre modifiée
Scénario Nominal (1) : Modifier offre : Ce cas d’utilisation commence lorsque
le prestataire demande à la plateforme de modifier une offre.
2) Le prestataire se redirige vers la page mes offres.
3) Le prestataire choisit l’offre à modifier.
4) Le prestataire valide la modification de l’offre.
Tableau 19 : Description textuelle de sous cas d'utilisation « Modifier une offre »
 Description textuelle de sous cas d'utilisation « Supprimer une offre »
Titre : Supprimer une offre
Post-Condition : offre supprimée
Scénario Nominal (1) : Supprimer offre : Ce cas d’utilisation commence lorsque
le prestataire demande à la plateforme de supprimer une offre.
2) Le prestataire se redirige vers la page mes offres.
3) Le prestataire choisit l’offre à supprimer.
4) Le prestataire cliquez sur le bouton Supprimer.
Tableau 20 : Description textuelle de sous cas d'utilisation « Supprimer une offre »

Page | 51
C. Conception
a. “Consulter ses offres”
 Diagramme de séquence « Ajouter une offre »
Figure 29 : Diagramme de séquence « Consulter les offres »
b. “Consulter détail d'une offre ”
 Diagramme de séquence système «Consulter détail d’une offre»
Figure 30 : Diagramme de séquence « Consulter détails d'une offre »

Page | 52
c. “Rechercher une offre”
 Diagramme de séquence « Rechercher une offre »
Figure 31 : Diagramme de séquence « Rechercher une offre »
d. “Choisir Catégorie ”
 Diagramme de séquence « Choisir catégorie »
Figure 32 : Diagramme de séquence « Choisir catégorie »

Page | 53
e. “Consulter ses offres”
 Diagramme de séquence « Consulter ses offres »
Figure 33 : Diagramme de séquence « Consulter ses offres »
f. “Ajouter une offre”
 Diagramme de séquence « Ajouter une offre »
Figure 34 : Diagramme de séquence « Ajouter une offre »

Page | 54
g. “Supprimer une offre”
 Diagramme de séquence « Supprimer une offre »
Figure 35 : Diagramme de séquence « Supprimer une offre »
h. “Modifier une offre ”
 Diagramme de séquence « Modifier une offre »

Page | 55
Figure 36 : Diagramme de séquence « Modifier une offre »
D. Réalisation
Afin de montrer les résultats de ce sprint, nous allons présenter quelques captures d'écran.
La figure ci-dessous représente la page d’ajout.
Figure 37 : Interface « Ajouter une offre »
La figure ci-dessous représente la page de modifier en affichant l’interface de modifier et le
bouton de suppression.

Page | 56
Figure 38 : Interface « Modifier une offre »
La figure ci-dessous permet d'afficher les détails d’une offre:
Figure 39 : Interface « Détails d’une offre »
La figure représente la page des offres d’un prestataire, Ici le prestataire peut supprimer et
modifier ces offres :
Figure 40 : Interface « Liste de mes offres »

Page | 57
La figure représente la page des offres de tous les prestataires :
Figure 41 : Interface « liste des offres »
E. Burndown

Page | 58
F. Rétrospective
Au cours de la réalisation de ce sprint ce qui bien marché l’ajout, suppression et la
modification, aussi nous avons rencontré quelques problèmes, à savoir :
-la recherche qui en peut l’améliore pour être plus précise
Nous allons entamer le dernier Sprint. Pour cela, Nous commençons par présenter le Backlog
du ce sprint, ensuite nous passons à la conception et nous clôturons par la partie la réalisation.
Le tableau suivant résume le backlog du sprint 3 :
Tableau 21: Backlog sprint 3
Cette partie comporte la conception du sprint 3 qui définit les composants sous forme de
diagramme de cas d’utilisation et diagramme de séquence système détaillé.
La figure ci-dessus nous présente le diagramme de cas d'utilisations de sprint 3 :

Page | 59
a. Raffinement de cas d’utilisation « Assistance Artificielle »
 Description textuelle de sous cas d'utilisation « Assistance Artificielle »
Titre : Assistance Artificielle
Acteur : Client
Post-Condition : Avoir une information
Scénario Nominal (1) : Recherche une offre : Ce cas d’utilisation commence lorsque
le client demande à la plateforme d’avoir une information.
2) Le client clique sur icone “chatbot”.
3) Le client tape sa question dans la zone “écrire un message”.
Tableau 22 : Description textuelle de sous cas d'utilisation « Assistance Artificielle»

Page | 60
b. Raffinement de cas d’utilisation « Consulter profil prestataire »
 Description textuelle de sous cas d'utilisation « Consulter profil prestataire »
Titre : Consulter profil d’un prestataire
Acteur : Client
Pré-Condition: Être authentifié
Post-Condition: Consulter profil d’un prestataire
Scénario Nominal (1): Recherche une offre : Ce cas d’utilisation commence lorsque
le client demande à la plateforme de consulter profil d’un prestataire.
4) Le client choisit l’offre à consulter.
5) le client clique sur onglet “Profil de prestataire”.
Tableau 23 : Description textuelle de sous cas d'utilisation « Consulter profil d’un
prestataire »
c. Raffinement de cas d’utilisation « Devenir prestataire »
Figure 44 : Raffinement de diagramme de cas d’utilisation “Devenir prestataire”
 Description textuelle de sous cas d'utilisation « Devenir prestataire »
Titre : Devenir Prestataire
Acteur : Client
Post-Condition: passée au profil prestataire
Scénario Nominal (1) : Consulter mon profil : Ce cas d’utilisation commence lorsque

Page | 61
Le client demande à la plateforme de devenir prestataire
2) Le client se redirige vers la page ‘mon profil’.
3) Le client clique sur le bouton “devenir prestataire”
4) Le client remplie le formulaire de prestataire.
Tableau24: Description textuelle de sous cas d'utilisation « Devenir Prestataire »
d. Raffinement de cas d’utilisation « Consulter son profil »
 Description textuelle de sous cas d'utilisation « Consulter son profil »
Titre : Consulter son profil
Acteur : Prestataire ou client
Post-Condition: profil consultée
Scénario Nominal (1) : Consulter mon profil : Ce cas d’utilisation commence lorsque
le prestataire ou client demande à la plateforme de consulter son profil.
1) Le Prestataire ou client accède à la page d’accueil du site.
2) Le prestataire ou client se redirige vers la page ‘mon profil’.
3) Page de profil s’ouvre.
Tableau 25 : Description textuelle du cas d'utilisation « Consulter son profil »
e. Raffinement de cas d’utilisation « Consulter liste des Comptes »
Figure 45 : Raffinement de diagramme de cas d’utilisation “Consulter liste des comptes”

Page | 62
 Description textuelle de cas d'utilisation « Consulter liste des Comptes »
Titre : Consulter liste des comptes
Acteur : Administrateur
Post-Condition : Consulter liste des comptes
Scénario Nominal (1) : Consulter liste des comptes : Ce cas d’utilisation commence
lorsque l’administrateur demande à la plateforme de consulter liste des comptes.
1) L’administrateur accède à la page d’accueil.
2) Le client se redirige vers la page “Option Admin”.
3) Le client choisit “la liste des comptes”
Tableau 26 : Description textuelle de cas d'utilisation « Consulter liste des Comptes »
 Description textuelle de sous cas d'utilisation « Modifier un compte »
Titre : Modifier un compte
Pré-Condition : Consulter liste des comptes
Post-Condition: Compte modifiée
Scénario Nominal (1) : Modifier compte : Ce cas d’utilisation commence lorsque
le prestataire demande à la plateforme de modifier un compte.
1) L’administrateur accède à la page d’accueil du site.
2) L’administrateur se redirige vers la page option admin.
3) L’administrateur choisit la liste des comptes.
4) L’administrateur choisit le compte à modifier.
5) L’administrateur valide la modification du compte.
Tableau 27 : Description textuelle de sous cas d'utilisation « Modifier un compte »

Page | 63
 Description textuelle de cas d'utilisation « Supprimer un compte »
Titre : Supprimer un compte
Pré-Condition : Consulter liste des comptes
Post-Condition : Compte supprimée
Scénario Nominal (1) : Supprimer compte : Ce cas d’utilisation commence lorsque
le prestataire demande à la plateforme de supprimer un compte.
1) L’administrateur accède à la page d’accueil du site.
2) L’administrateur se redirige vers la page option admin.
3) L’administrateur choisit la liste des comptes.
4) L’administrateur choisit le compte à supprimer.
5) L’administrateur valide la suppression du compte.
Tableau 28 : Description textuelle de sous cas d'utilisation « Supprimer un compte »
C. Conception
a. Assistance Artificielle
 Diagramme de séquence « Assistance Artificielle »
Figure 46 : Diagramme de séquence « Consulter mon profil »

Page | 64
b. Consulter profil prestataire
 Diagramme de séquence « Consulter mon profil »
Figure 47 : Diagramme de séquence « Consulter mon profil »
c. “Devenir prestataire”
 Diagramme de séquence système « Devenir prestataire »
Figure 48 : Diagramme de séquence « Devenir Prestataire »

Page | 65
d. “Consulter liste des comptes”
 Diagramme de séquence « Consulter liste des comptes »
Figure 49 : Diagramme de séquence « Consulter liste des comptes »
e. “Modifier un compte”
 Diagramme de séquence « Modifier un compte »
Figure 50 : Diagramme de séquence « Modifier un compte »

Page | 66
D. Réalisation
Afin de montrer les résultats de ce sprint, nous allons présenter quelques captures d'écran.
La figure ci-dessous représente la page Consulter mon profil.
Figure 51 : Interface « Mon Profil»
La figure représente la page de consulter la liste des comptes, aussi des boutons pour
supprimer et modifier les comptes, disponible pour les administrateurs uniquement :
Figure 52 : Interface « liste des comptes »

Page | 67
La figure ci-dessous permet d'afficher le profil du prestataire de service, la personne qui a
ajouté l'offre :
Figure 53: Interface « Profil d’un prestataire »
E. Burndown

Page | 68
F. Rétrospective
Au cours de la réalisation de ce sprint ce qui bien marché consulter son profil et la liste de son
profil, aussi nous avons rencontré quelques problèmes, à savoir :
-devenir un prestataire et comment on passe de profil prestataire au profil client
IV. Diagramme de classe général
Pour le stockage de données nous avons utilisé la nouvelle génération de bases de données qui
ne suivent pas le modèle relationnel des bases de données classiques firebase, C’est une base
de données No SQL construite pour les applications en général.
Une base de données entièrement gérée et native au cloud qui facilite le stockage, la
synchronisation et l'interrogation des données pour les applications Web, mobiles.
Notre base de données contient uniquement deux collections users et offres, la première
contient toutes les informations concernant les utilisateurs et la deuxième contient toutes les
informations concernant les offres.
Figure 55 : Diagramme de classe général

Page | 69
V. Conclusion
Au cours de ce tout dernier chapitre, nous avons présenté l'environnement logiciel et matériel.
Ainsi le langage que nous avons utilisé pour développer notre application.
Par la suite une présentation détaillée de chacun des 3 sprints a été faite selon la méthodologie
de gestion de projet SCRUM, en présentant la conception de chaque sprint, la réalisation des
interfaces les plus importantes pour chaque sprint, Burndown et enfin les rétrospective de
chaque sprint.

Conclusion général et perspectives
Page | 70
Conclusion et perspectives
Nous avons essayé tout au long de notre travail de construire notre application en ligne
incrément par incrément en utilisant la méthodologie Scrum. Le présent rapport détaille toutes
les étapes par lesquelles nous sommes passés pour arriver au résultat attendu.
C’était une expérience à la fois enrichissante et passionnante. Elle nous a permis de faire un
premier pas vers le milieu professionnel, d’interagir avec ce nouveau monde et de se sentir un
acteur actif et agissant dans cette dynamique entrepreneuriale. Notre expérience au sein de la
société « Cosa Vostra » nous a offert l’occasion de nous prendre en charge, et de pousser
toutes nos limites pour nous surpasser et présenter un projet fini à l’image de la réputation de
notre prestigieux institut.
Sur le plan humain, ce stage nous a offert la possibilité d’améliorer nos capacités d’adaptation,
de communication et d’acquérir des facultés de collaboration avec l’environnement
professionnel.
Ce projet nous a aussi offert l’opportunité d’acquérir une expérience pour gérer le travail au
sein d’une hiérarchie du point de vue amélioration de notre aptitude en communication,
collaboration, adaptation avec l’environnement professionnel et respect des échéances.
En conclusion, ce stage a été une expérience extrêmement enrichissante tant sur le plan
personnel que professionnel. Il nous a non seulement permis de découvrir l’univers du travail
mais encore d’avoir une vision plus claire sur notre avenir.
En plus des fonctionnalités déjà développées, l’application peut être améliorée par l’ajout des
nouvelles fonctionnalités telles que l’ajout d’une interface de chat entre le particulier et le
prestataire de service. En plus, nous comptons améliorer notre solution en se basant sur les
points faibles dégagés au cours de son utilisation.

Bibliographie & Webographie
Page | 71
Bibliographie
[1] B.E & M.S Bachtobji, «Rapport PFE,» 2016.
[2] «SCRUM le guide pratique de la méthode agile la plus populaire » Dunod,2010.
[3] le backlog de produit-Scrum, Agilité et Rock’nroll book
Webographie
[w1] L’agiliste. Guide de démarrage Scrum. Juin 2013. Disponible sur :
http://www.agiliste.fr/fiches/guide-demarrage-scrum/ (Consulté le 26/03/2019)
[w2]SARFATI, P. (2015, 02 19).Formations Scrum. Récupéré sur scrum.fr:
http://www.scrum.fr/formation-scrum/ (Consulté le 02/04/2019)
[w3] L’agiliste. Guide de démarrage Scrum. Juin 2013. Disponible sur :
http://www.agiliste.fr/fiches/guide-demarrage-scrum/ (Consulté le 05/04/2019)
[w4]http://www.icescrum.org/ (Consulté le 10/05/2019)
[w5]http://support.objecteering.com/objecteering6.1/help/fr/objecteering_uml_modeler/diagra
ms/ class_diagrams.htm (Consulté le 13/05/2019)
[w6] https://www.scrumwise.com/ (Consulté le 12/05/2019)

Rapport de stage IHEC, Carthage 2019
RESUME
Ce projet de fin d’étude est réalisé dans le cadre de projet de fin d’études en vue de
L’obtention du diplôme de la licence appliquée en technologie de l’information appliqué à la
gestion. Il a été développé au sein de la société CosaVostra, en collaboration avec
Institut des hautes études Commerciales de Carthage . Ce projet s’intitule «Réalisation d’une
application de mise en relation B2C de professions libérales », consiste à concevoir et
développer une plateforme dont laquelle nous avons utilisée UML comme langage de
modélisation, FireBase comme système de gestion de base de données et les technologies
Web : Angular, HTML5, CSS3, Bootstrap.
Mots clés: Angular, UML, HTML5, CSS3, Bootstrap, firebase.
SUMMARY
This project of end of studies is carried out as part of a graduation project aimed at obtaining a
degree in applied information technologie applied to management. It has been developed
within the company CosaVostra, in collaboration with the Institute of Higher Commercial
Studies of Carthage. This project is titled " Realization of a B2C linking application for liberal
professions
", consists in designing and developing a platform of which we used
UML as a modeling language, FireBase as a database management system and web
Technologies : Angular, HTML5, CSS3, Bootstrap.
Key words: Angular, UML, HTML5, CSS3, Bootstrap, firebase.

Rapport de projet de fin d’étude

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Rapport de projet de fin d’étude

Similaire à Rapport de projet de fin d’étude (20)

Rapport de projet de fin d’étude