Vous êtes sur la page 1sur 102

Dédicace

Je dédie Ce modeste travail

* A Ma chère famille

A mes très chers parents qui ont toujours été là pour moi, et qui
m'ont donné un
Magnifique modèle de labeur et de persévérance. J'espère qu'ils
trouveront dans Ce travail toute ma reconnaissance
et tout mon amour.
* A Mon Cher père, à la personne la plus généreux au monde, à mon
artiste talentueux, à mon idole

En signe de reconnaissance à l’immense bien que tu as fait pour moi,


je l’offre cet humble travail. Les mots sauvent guerre exprimé ma
gratitude. Sache-bien papa que tu as toujours été ma source
d’inspiration, et que j’espère un jour te rendre fier

* A mon super maman, pour m’avoir donné la vie, pour ta bonne


éducation, pour tes tendres encouragements et tes conseils. Aucune
dédicace ne peut exprimer mes profonds sentiments envers toi.

A mon cher frère et ma chère sœur : Rami et Emna


A ma chère grand-mère : Yiaa
A mes chères amies pour leur soutien, amitié…
* A tous ceux qui ne sont chers

-i-
…Aymen

Remerciements

D'emblée je tiens à remercier DIEU le tout


puissant de nous avoir aidé à entamer et à terminer ce
travail.

Je dois être reconnaissante en remerciant


infiniment mon encadrante universitaire Madame Sonia
Kefi ainsi que mon encadrant de stage Monsieur Rhazi
Atroussi qui m'ont beaucoup aidée et soutenue pour que
ce travail soit bien organisé en me mettant sur la bonne
voie sur tous les plans et que sans eux ce travail ne
pourrait voir le jour.

Tous mes remerciements les plus sincères à toute


personne m'a aidé de près ou de loin pour réaliser et
présenter ce projet dans de bonnes conditions

-ii-
Table des matières

Introduction générale................................................................................................................1
Chapitre 1 : Cadre général du projet.........................................................................................2
Introduction.................................................................................................................................3
1.1 Présentation de la société.....................................................................................................3
1.2 Etude de l’existant.................................................................................................................4
1.2.1 Analyse et étude de l’existant..........................................................................................4
1.2.1.1 Solution 1 : TAHA voyages.......................................................................................4
1.2.1.2 Solution 1 : Traveltodo..............................................................................................5
1.2.1.3 Solution 3 : Tunisie booking......................................................................................5
1.2.2 Synthèse et critique de l'existant.....................................................................................6
1.3 Solution proposée..................................................................................................................7
1.4 Méthodologie de travail........................................................................................................8
1.4.1 Méthodologie agile..........................................................................................................8
1.4.2 Pourquoi Scrum ?...........................................................................................................8
1.4.3 Langages de modélisation.............................................................................................10
Conclusion................................................................................................................................11
Chapitre 2 : Spécification des besoins.....................................................................................12
Introduction...............................................................................................................................13
2.1 Capture des besoins............................................................................................................13
2.1.1 Capture des besoins fonctionnels..................................................................................13
2.1.2.1 Identification des acteurs........................................................................................13
2.1.2.2 Diagramme de cas d'utilisation général.................................................................13
2.1.1 Capture des besoins non fonctionnels...........................................................................14
2.1 Pilotage du projet avec scrum............................................................................................15
2.2.1 Equipe et rôle................................................................................................................15
2.2.2 Le backlog du produit...................................................................................................15
2.2.3 Planification de release.................................................................................................18
2.2 Environnement de travail....................................................................................................19
2.2.1 Environnement logiciel.................................................................................................19
2.2.1.1 Outils de développement, design et modélisation...................................................19
2.2.1.2 Plateforme de développement.................................................................................21

-iii-
2.2.1.3 Langages de programmation..................................................................................22
2.2.1.4 Framework utilisés..................................................................................................24
2.3 Architecture de l’application..............................................................................................29
Conclusion................................................................................................................................31
Chapitre 3 : Le Premier Release..............................................................................................32
Introduction...............................................................................................................................33
3.1 Développement du sprint 1 « authentification, inscription et gestion de profil »...............33
3.1.1 Analyse..........................................................................................................................34
3.1.1.1 Diagramme de cas d’utilisation sprint 1.................................................................34
3.1.1.3 Description de l’item « S’inscrire »........................................................................35
3.1.1.4 Description de l’item « Gérer profil ».....................................................................37
3.1.2 Conception....................................................................................................................39
3.1.2.1 Diagramme de séquence.........................................................................................39
3.1.2.2 Diagramme de classe sprint 1.................................................................................40
3.1.2.3 Réalisation...............................................................................................................41
3.2 Développement du sprint 2 « gestion des voyages, gestion de camping, gestion d’hôtel »45
3.2.1 Analyse..........................................................................................................................48
3.2.1.1 Diagramme de cas d’utilisation général.................................................................48
3.2.1.2 Descriptions de l’item « Gérer voyages »...............................................................48
3.2.1.4 Descriptions de l’item « Gérer hôtel »....................................................................51
3.2.2 Conception....................................................................................................................52
3.2.2.1 Diagramme de séquence.........................................................................................52
3.2.2.2 Diagramme de classe sprint 2.................................................................................56
3.2.2.3 Schéma Relationnel.................................................................................................56
3.2.2.4 Réalisation...............................................................................................................57
Conclusion................................................................................................................................60
Chapitre 4 : Le Deuxième Release..........................................................................................61
Introduction...............................................................................................................................62
4.1 Développement du Sprint 1 « Gestion de dossier, Gestion de groupe ».............................62
4.1.1 Analyse..........................................................................................................................64
4.1.1.1 Diagramme de cas d’utilisation du sprint 1............................................................64
4.1.1.2 Description de l’item « Gérer les dossiers »...........................................................65
4.1.1.3 Description de l’item « Gérer les groupes »...........................................................66
4.1.2 Conception....................................................................................................................67

-iv-
4.1.2.1 Diagrammes de séquence........................................................................................67
4.1.2.2 Diagramme de classe..............................................................................................68
4.1.2.3 Schéma Relationnel.................................................................................................69
4.1.3 Réalisation.....................................................................................................................69
4.1.3.1 Description des interfaces.......................................................................................69
4.2.1 Analyse..........................................................................................................................73
4.2.1.1 Diagramme de cas d’utilisation du sprint 2............................................................73
4.2.1.2 Description de l’item « Gérer les albums photos ».................................................73
4.2.1.3 Description de l’item « Statistiques »......................................................................74
4.2.2 Conception....................................................................................................................75
4.2.2.1 Diagramme de séquence.........................................................................................75
4.2.2.2 Diagramme de classe..............................................................................................76
4.2.2.3 Schéma Relationnel.................................................................................................76
4.2.2.4 Diagramme de classe général.................................................................................76
4.2.2.5 Réalisation...............................................................................................................78
Conclusion................................................................................................................................81
Conclusion générale................................................................................................................82
Liste des abréviations................................................................................................................83
Bibliographie............................................................................................................................84

-v-
Liste des figures

Figure 1: Taha Voyages.............................................................................................................5


Figure 2: Traveltodo..................................................................................................................5
Figure 3: TunisieBooking...........................................................................................................6
Figure 4 : Méthodologie agile Backlog produit.......................................................................10
Figure 5: Diagramme de cas d'utilisation général..................................................................14
Figure 6: Schéma de Release...................................................................................................18
Figure 7: Visual code logo.......................................................................................................19
Figure 8: Intellij logo...............................................................................................................19
Figure 9: Photoshop logo.........................................................................................................20
Figure 10: Illustrator logo.......................................................................................................20
Figure 11: Xcode logo..............................................................................................................20
Figure 12: Draw io logo...........................................................................................................20
Figure 13: Bitbucket logo.........................................................................................................21
Figure 14: Jira logo.................................................................................................................21
Figure 15: Swagger logo..........................................................................................................21
Figure 16: Aws logo.................................................................................................................21
Figure 17: S3 logo....................................................................................................................22
Figure 18: RDS logo................................................................................................................22
Figure 19: Ec2 logo..................................................................................................................22
Figure 20: Java logo................................................................................................................23
Figure 21: Typescript logo.......................................................................................................23
Figure 22: Javascript logo.......................................................................................................23
Figure 23: Html5 logo..............................................................................................................24
Figure 24: Css3 logo................................................................................................................24
Figure 25: SpringBoot logo......................................................................................................24
Figure 26: Spring Security logo...............................................................................................24
--
Figure 27: Angular10 logo.......................................................................................................25
Figure 28: Ionic logo................................................................................................................25
Figure 29: Chartjs logo............................................................................................................25
Figure 30: Dialogflow logo......................................................................................................26
Figure 31: Stripe logo..............................................................................................................26
Figure 32: Stripe flow diagram................................................................................................26
Figure 33: FCM logo...............................................................................................................27
Figure 34: Architecture technique du FCM.............................................................................28
Figure 35: Fonctionnement du FCM........................................................................................28
Figure 36: Architecture logicielle de l’application..................................................................29
Figure 37: Architecture de la couche présentation..................................................................30
Figure 38: Décomposition sprint 1 en Items............................................................................33
Figure 39: Diagramme de cas d’utilisation du sprint 1...........................................................35
Figure 40: Diagramme de cas d’utilisation « S’inscrire »......................................................35
Figure 41: Diagramme de cas d’utilisation « S’authentifier »................................................36
Figure 42: Diagramme de cas d’utilisation « Gérer profil »...................................................38
Figure 43: Diagramme de séquence User story 1.1 « S’authentifier »....................................39
Figure 44: Diagramme de séquence « Modifier Profil ».........................................................40
Figure 45: Diagramme de classe du sprint 1...........................................................................41
Figure 46: Page d'accueil (mobile)..........................................................................................41
Figure 47: Page d'accueil (web)..............................................................................................42
Figure 48: Interface de connexion et d’inscription (web)........................................................43
Figure 49: Interface de connexion Dashboard........................................................................44
Figure 50: Interface de connexion et d’inscription (mobile)...................................................44
Figure 51: Décomposition sprint 3 en Items............................................................................45
Figure 52: Diagramme de cas d’utilisation du sprint 2...........................................................48
Figure 53: Diagramme de cas d’utilisation « Gérer les voyages ».........................................49
Figure 54: Diagramme de cas d’utilisation « Gérer les campings ».......................................50

--
Figure 55: Diagramme de cas « Gérer les hôtels ».................................................................51
Figure 56: Diagramme de séquence « Consulter un voyage »................................................52
Figure 57: Diagramme de séquence « S’inscrire dans un voyage »........................................53
Figure 58: Diagramme de séquence « Supprimer un camping ».............................................54
Figure 59: Diagramme de séquence « Ajouter un hôtel ».......................................................55
Figure 60: Diagramme de classe de sprint 2...........................................................................56
Figure 61: Interfaces gestion de voyage (mobile)....................................................................57
Figure 62: Interface gestion de camping (mobile)...................................................................57
Figure 63: Interface liste de campings (web)...........................................................................58
Figure 64: Interface liste de voyages (web).............................................................................58
Figure 65: Interface mes voyages (back office).......................................................................59
Figure 66: Interface détails d'un voyage..................................................................................59
Figure 67: Interface destinations (web)...................................................................................60
Figure 68 : Décomposition sprint 1 en Items...........................................................................62
Figure 69: Diagramme de cas d’utilisation du sprint 1...........................................................64
Figure 70: Diagramme de cas d’utilisation « Gérer les dossiers ».........................................65
Figure 71 : Diagramme du cas d’utilisation « Gérer les groupes »........................................66
Figure 72: Diagramme de séquence « Valider un dossier »....................................................67
Figure 73: Diagramme de séquence « Envoyer un dossier »...................................................68
Figure 74: Diagramme de classe du sprint 1...........................................................................69
Figure 75: Interface « Ajout d’un dossier (mobile) »..............................................................70
Figure 76: Interface « Consulter un dossier (mobile) »...........................................................70
Figure 77: Interface « Consulter l’état d’un dossier et payement »........................................71
Figure 78: Interface user détails et chat..................................................................................71
Figure 79: Décomposition sprint 2 en Items............................................................................72
Figure 80: Diagramme de cas d’utilisation Sprint 2...............................................................73
Figure 81: Diagramme de cas d’utilisation « Gérer les albums photos »...............................73
Figure 82: Diagramme de cas d’utilisation « Consulter les statistiques »..............................74

--
Figure 83: Diagramme de séquence « Consulter les statistiques ».........................................75
Figure 84: Diagramme de classe de sprint 2...........................................................................76
Figure 85: Diagramme de classe général................................................................................77
Figure 86: Diagramme de déploiement....................................................................................78
Figure 87: Interface explorer et gestion de photos..................................................................78
Figure 88: Interface Chatbot (mobile).....................................................................................79
Figure 89: Interface Chatbot (web)..........................................................................................79
Figure 90: Dashboard Admin et notification (interface admin)..............................................80
Figure 91: Statistique (interface admin)..................................................................................80
Figure 92: Statistique (Interface membre professionnel).........................................................81

--
Liste des tableaux

Tableau 1 : Présentation de la société.......................................................................................3


Tableau 2 : Synthèse des applications existantes.......................................................................7
Tableau 3 : Caractéristiques essentielles de notre solution.......................................................8
Tableau 4 : Description des acteurs.........................................................................................13
Tableau 5 : Présentation de l’équipe SCRUM.........................................................................15
Tableau 6 : Backlog du produit................................................................................................15
Tableau 7 : Les user stories de sprint 1....................................................................................34
Tableau 8 : Backlog du sprint 1...............................................................................................34
Tableau 9 : Description textuelle du cas d’utilisation « S’inscrire ».......................................35
Tableau 10 : Description textuelle du cas d’utilisation « S’authentifier »..............................36
Tableau 11 : Description textuelle du cas d’utilisation « Réinitialiser mot de passe »...........37
Tableau 12 : Description textuelle du cas d’utilisation « Modifier profil ».............................38
Tableau 13 : Les user stories de sprint 2..................................................................................45
Tableau 14 : Backlog du sprint 2.............................................................................................46
Tableau 15 : Description textuelle du cas d’utilisation « S’inscrire dans un voyage »...........49
Tableau 16 : Description textuelle du cas d’utilisation « Chercher un camping »..................50
Tableau 17 : Description textuelle du cas d’utilisation « Ajouter un hôtel »..........................51
Tableau 18 : Les users stories du sprint 1................................................................................63
Tableau 19 : Backlog du sprint 1.............................................................................................63
Tableau 20 : Description textuelle du cas d’utilisation « évaluer les dossiers ».....................65
Tableau 21 : Description textuelle du cas d’utilisation « Inviter un membre ».......................66
Tableau 22 : Les user stories de sprint 2..................................................................................72
Tableau 23 : Backlog du sprint 2.............................................................................................72

--
Tableau 24 : Description textuelle du cas d’utilisation « Ajouter une image ».......................74
Tableau 25 : Description textuelle du cas d’utilisation « Consulter les statistiques »............74

--
Introduction générale

Dans un monde actif et continuellement évolutif, la motivation d’avoir des moyens


performants et efficaces de communication et d’échange d’information devient de plus en
plus fondamentale. Pour cela l’intégration de l’informatique est devenue une chose
primordiale dans tous les domaines.

La digitalisation des tâches dans le secteur du voyage et du tourisme évolue de plus en plus
et elle est devenue une nécessité sur ce marché. Les voyageurs ont eu accès à plus de choix,
plus d’outils et plus d’information que jamais.

Malgré ce progrès, on ne peut pas nier que cette numérisation présente des carences qui
limite l’accès des voyageurs et des agences de voyages aux informations avec un temps de
réponse très lent, une utilisation restreinte et un manque de communication entre les différents
membres.

C’est dans ce cadre que s’inscrit le présent travail de fin d'études pour l'obtention du
diplôme national d’ingénieur au sein de l’École Polytechnique de Sousse, dont l’objectif est
de concevoir, développer et réaliser une application mobile plus performante et efficace qui
joue le rôle d'intermédiaire entre les agences de voyage, les guides et les clients désirant un
voyage ou un camping avec certains critères. Cette application est nommée « Ayya ween ».

Le présent rapport sera structuré donc en quatre chapitres :

Dans un premier chapitre, nous présenterons le cadre général de ce projet de fin d’études, à
savoir la société GPRO Consulting ainsi que le sujet sur lequel portera notre PFE et la
méthodologie de travail adoptée.

Ensuite, dans le second chapitre, nous nous proposons de présenter et d’analyser les besoins
fonctionnels et non fonctionnels ainsi que la description de l’environnement de travail.

Le troisième chapitre sera consacré à détailler le travail réalisé durant le premier release en
précisant les étapes d’analyse, de conception et de réalisation.

Dans le dernier et quatrième chapitre, nous allons détailler le travail réalisé durant le
deuxième release en précisant les étapes d’analyse, de conception et de réalisation.

Nous clôturerons ce rapport par une conclusion générale dans laquelle nous évaluerons le
travail réalisé.
1|Page
Chapitre 1

Cadre général du projet

2|Page
Introduction

Le présent chapitre, est consacré à la présentation du cadre général du projet. Tout d’abord,
nous présentons l'organisme d'accueil où on a réalisé le projet de fin d'études. Ensuite, nous
effectuons une étude de l’existant. Enfin, nous expliquons notre méthode du travail, le
chronogramme du projet et le langage de modélisation que nous avons adoptée au cours de
notre travail.

1.1 Présentation de la société

L’entreprise d’accueil est « GPRO Consulting » est une société multi-facettes créée en
2015, elle permet d’effectuer un ensemble d’études et de consulting dans la mise en place des
systèmes d’informations, des logiciels de gestion industriel et du développement spécifique
adaptés aux besoins de ses clients.

Tableau 1 : Présentation de la société

Raison sociale GPRO Consulting


Nom du gérant Ghazi Atroussi
Adresse Avenue Mohamed Attia Khzema Ouest – Sousse
Email contact@gproconsulting.com
Site web www.gproconsulting.com
Téléphone 58 100 435 / 73 276 175
Compétences Java JEE - Spring MVC Framework- Angular – Ionic – Flutter

GPRO Consulting est basée à Sousse et comporte une équipe dynamique, des consultants
et un large réseau de partenaires. Elle possède un service informatique de qualité auprès des
PME/PMI, à très forte valeur ajoutée misant sur l’innovation et l’expertise et qui s’engage à
garantir la satisfaction de ses clients.

L’entreprise fournit des solutions dans des domaines diversifier liés aux :

 Système ERP (Entreprise Ressource Planning)

 Solutions logicielles de gestion industrielle et manufacturière,

 Assistance technique dans les différents processus industriels,


3|Page
 Etude et consulting dans la mise en place des systèmes d’information,

 Expertise en termes de préparation des certifications,

 Infogérance,

 Développement spécifique adapté au besoin des clients.

1.2 Etude de l’existant

GPRO Consulting propose une plateforme qui permet de gérer les voyages, les campings,
les hôtels, les dossiers de voyage. En effet, il s’agit d’une application qui joue le rôle
d'intermédiaire entre les agences de voyage, les guides et les clients désirant un voyage ou un
camping avec des certains critères.

Dans ce cadre, nous proposons d’analyser les solutions existantes sur le marché pour qu’on
puisse réaliser notre objectif.

1.2.1 Analyse et étude de l’existant


L’analyse de l’existant permet de détecter les problèmes et les difficultés des applications
existantes. Ainsi, il existe plusieurs plateformes en ligne qui permettent au voyageur de
trouver leurs destinations mais ils existent uniquement quelques solutions qui sont largement
utilisées. Après l’investigation que nous avons faite au milieu des experts métiers, nous avons
noté qu'uniquement les trois plateformes « Traveltodo » et « Taha voyages » et «
TunisieBooking » sont fréquemment visitées par les internautes que nous présenterons dans la
section suivante.

1.2.1.1 Solution 1 : TAHA voyages

TAHA Voyage est un Opérateur de Voyage basé en Tunisie, géré par une équipe
professionnelle et expérimentée, la manipulation à la fois entrantes et sortantes, Voyage
d'affaires en provenance et à tous les coins du monde.

4|Page
Figure 1: Taha Voyages

1.2.1.2 Solution 1 : Traveltodo

Traveltodo est la première agence de voyage en ligne en Tunisie qui offre des promotions
permanentes sur les voyages et les loisirs, pour découvrir La Tunisie du nord au sud, mais
aussi pour s’évader vers les 4 coins du monde.

Figure 2: Traveltodo

1.2.1.3 Solution 3 : Tunisie booking

Tunisie booking est une agence de voyage spécialiste des voyages sur mesure en Tunisie.
Consultez toutes nos offres de séjours à la carte, voyages de luxe ou voyages de noces. Une
équipe de conseillers est disponible pour réussir votre projet Voyages
5|Page
Figure 3: TunisieBooking

1.2.2 Synthèse et critique de l'existant


Notre critique se base sur deux critères. Tout d’abord, en point de vue technique, les
solutions existantes n'utilisent pas les techniques modernes de développement surtout au
niveau du front end pour la partie web et la partie mobile.

Ainsi, en point de vue performance et ergonomie, les solutions présentées rencontrent


plusieurs problèmes :

 Problème de performance : On trouve que le temps de réponse est très important


surtout en cas d’un grand trafic (lorsque l’application est utilisée simultanément par plusieurs
utilisateurs).

 Problèmes au niveau de l’expérience utilisateur :

- Pour les solutions existantes, la majorité des interfaces ne sont pas responsives. En effet,
l’utilisateur ne peut pas accéder à toutes les fonctionnalités en cas où il se connecte à travers
son smartphone car il y a une grande partie des interfaces ne sont pas visibles.
6|Page
- Pour réaliser une tâche, l’utilisateur doit passer par plusieurs interfaces pour accomplir son
objectif. Le principe de fonctionnement de ces solutions n’est pas basé sur l’approche de page
web unique (Single web page). Cette approche caractérise les applications modernes et c’est
la tendance actuelle au sein de la majorité des boîtes de développement internationales.

 Problème au niveau fonctionnel :

Les solutions existantes ne répondent pas parfaitement aux besoins de notre client car elles
ne possèdent pas par exemple, un module de gestion de dossiers qui permet de traiter les
dossiers des voyageurs. Ainsi, la plupart de ces solutions ne possèdent pas les modules de
gestion de camping et de paiement en ligne. Voici le tableau 2 qui compare les solutions
existantes selon des critères qui nous vise développer dans notre solution.

Tableau 2 : Synthèse des applications existantes

Gestion de dossiers en ligne


Gestion de camping
Regroupement de plusieurs
agences
Paiement en ligne
Notification en temps réel

D’après l’étude comparative faite dans le tableau 2, nous avons constaté que les solutions
existantes possédent des insuffisances. Ces lacunes se voient surtout au niveau de la gestion
de dossiers et le regroupement de plusieurs agences dans une même plateforme, vu que la
plupart des applications analysées se limitent uniquement au système de gestion de voyages et
d’hôtels.

1.3 Solution proposée


GPRO Consulting a trouvé une nécessité d’intervenir et de proposer une solution
centralisée et rapide au profit de tous les acteurs concernés par les voyages et les campings.
GPRO Consulting propose une plateforme capable d’intégrer toutes les fonctionnalités citées
plutôt.

Notre plateforme intitulée « Ayya Ween » permet de gérer les voyages, les campings, les
hôtels et les dossiers de voyage. C’est une application qui joue le rôle d'intermédiaire entre les
7|Page
agences de voyage, les guides et les clients désirant un voyage ou un camping avec certains
critères.

La solution proposée respectera les quatre points fondamentaux présentés dans le tableau 3.

Tableau 3 : Caractéristiques essentielles de notre solution


Caractéristiques Détails
Présenter toutes les informations au même endroit facilite les
procédures à entreprendre.
Centralisée
L’informatisation du processus offre une rapidité sans limites qui sera
bénéfique par tous les acteurs concernés.
Rapide
Le recueil de l’information et son accessibilité de façon de juste, offre
une chance de compétition équitable pour tous.

Équitable

La présentation de l’information de façon claire et nette est plus


avantageuse que la paperasse habituelle.
Ergonomique

1.4 Méthodologie de travail

Pour la performance de notre système de gestion d’informations, et pour satisfaire les


exigences du client en moindre coût et délai, nous avons utilisé une méthode agile pour le
déroulement du projet.

1.4.1 Méthodologie agile


Une méthode agile est une approche itérative et incrémentale, qui est menée dans un esprit
collaboratif. On citera comme méthodes de développement Agile :

 Scrum (1996)

 Rapid Application Développent (RAD, 1991)

 Extrême Programming (XP, 1999)

 Adaptive Software Développement (ASD, 2000)


8|Page
 Test Drivent Développement (TDD, 2002)

 Crystal Clédar (2004)

1.4.2 Pourquoi Scrum ?


Dans le cadre de notre projet et afin d’assurer le bon déroulement des différentes phases de
ce dernier, nous avons opté pour la méthode agile Scrum pour la conception et le
développement de notre système pour des raisons bien déterminées en effet le processus
Scrum s’adapte parfaitement à la décomposition du notre projet de fin d’étude, il se base sur
les avantages suivants :

 Plus de souplesse et de réactivité,

 Grande capacité d’adaptation au changement grâce à des itérations courtes,

 Satisfaire au mieux les besoins du client.

Scrum est une méthodologie agile qui consiste à avoir une équipe soudée orientant le projet
au fil de son avancement afin d’atteindre un but. Cette approche est à la fois dynamique et
productive, engendre la réalisation des fonctionnalités par itération en incluant la participation
du client. Chaque itération peut durer de deux à quatre semaines, à la fin de chaque sprint un
produit fonctionnel doit être livré. En effet, Scrum définit trois rôles qui sont :

 Le Product Owner est responsable du produit de l’équipe projet client et il représente


les utilisateurs finaux, son rôle est de :

 Définir la liste des fonctionnalités du produit.

 Prioriser les fonctionnalités en fonction de leur importance et leur valeur


ajoutée pour l’entreprise qu’il présente.

 Choisir la date de livraison des versions ainsi que leurs contenus.

 Valider les lots livrés avec l’équipe de développement

 Clarifier les besoins à l’équipe de développement si nécessaire

 Le Scrum master assure les tâches suivantes :

 S’assurer que Scrum0 cm est bien appliquée et respectée

 Encourager l’équipe à apprendre et à progresser pour qu’elle soit fonctionnelle,


productive et créative durant le projet
9|Page
 Eliminer les obstacles pouvant perturber la progression du travail.

 L’équipe de projet contient généralement de 2 à 10 développeurs. Elle regroupe tous les


rôles habituellement nécessaires à un projet, à savoir l’architecte, le concepteur, le
développeur, le testeur, etc. Elle est « auto organisée » et elle reste inchangée pendant
toute la durée du sprint. Son rôle principal est :

 Transformer les besoins exprimés dans le Sprint Backlog (est défini ci-dessous)
en fonctionnalités utilisables.

 Livrer régulièrement une version fonctionnelle du produit.

La figure ci-dessous présente le déroulement de la gestion de projet par Scrum.

Figure 4 : Méthodologie agile Backlog produit

 Besoins priorisés par le Product Owner.

 Besoins évalués par l’équipe.

 Sprint Backlog qui extrait du Backlog produit.

 Sprint (itération)

 Développement des fonctionnalités du Backlog de sprint.

 Aucune modification du Backlog de sprint possible.

 Mêlée quotidienne (Rencontre quotidienne)

 Point de contrôle quotidien de l’équipe.

 Intervention régulées – 2 min par personne.

 Produit livrable livré au Product Owner à la fin du sprint.

1.4.3 Langages de modélisation


10 | P a g e
Pour faciliter la modélisation de notre application, nous avons fait recours au langage de
modélisation unifié UML. L’Uml était développée dans le but de définir la notation standard
pour la modélisation des applications construites à l’aide d’objets.

Nous considérons que le langage le mieux adapté pour fournir une présentation
compréhensible. Les divers diagrammes UML permettent de bien exposer notre solution.

Conclusion

Dans ce chapitre, nous avons donné un aperçu du projet en décrivant l'organisme d'accueil,
GPRO Consulting, et le contexte du projet. Nous avons présenté aussi notre méthodologie de
travail pour réaliser notre projet, comme la méthode Scrum.

Le reste du rapport est organisé selon cette méthodologie. Le chapitre suivant traite la
préparation du projet.

11 | P a g e
Chapitre 2

Spécification des besoins

12 | P a g e
Introduction

Ce chapitre est consacré à la capture des besoins fonctionnels et non fonctionnels de notre
système, au pilotage de projet avec scrum, par élaboration du Backlog du produit avec une
planification des sprints ainsi qu’à la description de l’environnement de travail.

2.1 Capture des besoins

2.1.1 Capture des besoins fonctionnels


2.1.2.1 Identification des acteurs

Un acteur est la personne ou le matériel qui interagit avec notre système afin de réaliser
une valeur ajoutée. La plateforme de Place de marché IT fait intervenir quatre trois principaux
comme le montre le tableau 4.

Tableau 4 : Description des acteurs

Rôle Fonctions
Administrateur Un administrateur devra pouvoir approuver les voyages et les
campings, ajouter, modifier et supprimer les utilisateurs et les
données de référence. Il dispose de toutes les autorisations sur
l’application.
Membre Après sa connexion, il devra pouvoir ajouter des hôtels, des
professionnel voyages et des campings, valider des dossiers.
Membre Membre particulier : est connecté individuellement, il cherche des
particulier voyages et des camping ou il demande un voyage de groupe, il
envoie son dossier.

2.1.2.2 Diagramme de cas d'utilisation général

La figure 5 présente le diagramme de cas d’utilisation général

13 | P a g e
Figure 5: Diagramme de cas d'utilisation général

2.1.1 Capture des besoins non fonctionnels


Une fois les besoins fonctionnels sont bien définis, les besoins non fonctionnels doivent
être pris en compte tout au long du processus de développement de l’application à savoir :

Performance : Un minimum de délai d’attente.

Simplicité d’utilisation : un utilisateur avec un minimum de connaissance en application


mobile doit être capable de manipuler les différentes tâches de l’application.

Extensibilité : l’application doit permettre à tout moment l’ajout d’autres modules.

Portabilité : L’application doit être portable et fonctionnelle sur n’importe quel système
d’exploitation.

14 | P a g e
2.1 Pilotage du projet avec scrum

2.2.1 Equipe et rôle


Pour notre application les rôles sont repartis comme suit :

Tableau 5 : Présentation de l’équipe SCRUM

Rôles Scrum Personnes Affectées


Product Owner GPRO Consulting
Scrum Master Ghazi Atroussi
Team Aymen Souelmi

2.2.2 Le backlog du produit


Le Backlog du produit est l’artefact le plus important de Scrum. En effet, c’est l’ensemble
des caractéristiques fonctionnelles qui compose le produit. Ces caractéristiques sont appelées
des histoires utilisateurs (user story). Chaque histoire utilisateur est caractérisée par une
priorité définie par le Product Owner.

Le Backlog produit de notre futur système notre projet est le suivant :

Tableau 6 : Backlog du produit

Sprint User story En tant que … Je veux… Priorité


Authentification Membre professionnel M’authentifier 1
et membre particulier
Inscription Non abonné M’inscrire 2
Réinitialiser mot de Membre professionnel Réinitialiser mot de passe 2
passe et membre particulier
Gestion de profil Membre professionnel Afficher mon profil 3
et membre particulier
Gestion de profil Membre professionnel Modifier mon profil 3
et membre particulier
Gestion de profil Membre professionnel Modifier image de profil 3
et membre particulier
Gestion de profil Membre professionnel Désactiver profil 3
et membre particulier

15 | P a g e
Gestion de profil Membre professionnel Changer mot de passe 3
Authenti
fication,
«

et membre particulier
Gérer les voyages Membre professionnel Afficher les voyages 4
et membre particulier
Gérer les voyages Membre professionnel Rechercher un voyage 4
et Membre particulier
Gérer les voyages Membre professionnel Ajouter un voyage 4
Gérer les voyages Membre professionnel Supprimer un voyage 4
Gérer les voyages Membre professionnel Modifier un voyage 4
Gérer les voyages Membre particulier Ajouter un voyage dans mes 4
favoris
Gérer les voyages Membre particulier Supprimer un voyage de mes 4
« Gestion des voyages »

favoris
Gérer les voyages Membre particulier S’inscrire dans un voyage 5
Gérer les voyages Membre particulier Annuler l’inscription dans un 5
voyage
Gérer les voyages Membre professionnel Commenter un voyage 6
et membre particulier
Gérer les voyages Membre professionnel Supprimer mon commentaire 6
et membre particulier d’un voyage
Gérer les voyages Membre professionnel Consulter le voyage dans la 6
et membre particulier carte
Gérer les voyages Membre professionnel Partager media 6
et membre particulier
Gérer les voyages Membre particulier Demander un voyage de groupe 7
Gérer les voyages Membre particulier Demander un Guide 7
Gérer les campings Membre professionnel Ajouter un camping 8
« Gestion des campings »

Gérer les campings Membre professionnel Rechercher un camping 8


et membre particulier
Gérer les campings Membre professionnel Modifier un camping 8
Gérer les campings Membre professionnel Supprimer un camping 8

16 | P a g e
Gérer les campings Membre particulier S’inscrire dans un camping 8

Gérer les campings Membre particulier Annuler l’inscription de 8


camping
Gérer les hôtels Membre professionnel Ajouter un hôtel 9
« Gestion des hôtels »

Gérer les hôtels Membre professionnel Modifier un hôtel 9


Gérer les hôtels Membre professionnel Supprimer un hôtel 9
Gérer les hôtels Membre professionnel Consulter un hôtel 9
et Membre particulier
Gérer les groupes Membre professionnel Inviter un membre dans un 10
et membre particulier groupe
« Gestion des groupes »

Gérer les groupes Membre professionnel Exclusion un membre de 10


et membre particulier groupe
Gérer les groupes Membre professionnel Consultation d’un groupe 10
et membre particulier
Gérer les groupes Membre professionnel Demande d'adhésion dans un 10
et membre particulier groupe
Gérer les dossiers Membre particulier Ajouter mon dossier 11
« Gestion des dossier »

Gérer les dossiers Membre particulier Modifier mon dossier 11


Gérer les dossiers Membre particulier Supprimer mon dossier 11
Gérer les dossiers Membre professionnel Evaluer un dossier 11
Gérer les dossiers Membre professionnel Valider un dossier 11
Gérer albums Membre particulier Ajouter des photo 12
« Gestion des albums photos »

photos
Gérer albums Membre particulier Voir l'ensemble des photos 12
photos
Gérer albums Membre particulier Supprimer mes photos 12
photos
Gérer albums Membre particulier Partager les photos dans les 12
photos réseaux sociaux

17 | P a g e
« Chatbot » « Statistique »

Consulter les Membre professionnel Consulter les statistiques 13


statistiques

Communiquer avec Membre professionnel Communiquer avec le Chatbot 14


le Chatbot et Membre particulier

2.2.3 Planification de release


Un plan de très haut niveau pour plusieurs sprints est créé pendant la planification de la
diffusion. C'est une ligne directrice qui reflète les attentes quant aux fonctionnalités qui seront
mises en œuvre et quand elles seront terminées. Il sert également de base pour suivre les
progrès au sein du projet. Les sorties peuvent être des livraisons intermédiaires effectuées
pendant le projet ou la livraison finale à la fin.

Pour créer un plan de diffusion, les éléments suivants doivent être disponibles :

- Un backlog de produits Scrum hiérarchisé et estimé

- La vitesse de l'équipe Scrum

- Conditions de satisfaction (objectifs pour l'emploi du temps, portée, ressources).

Dans notre cas, nous avons découpé notre projet en deux Release.

18 | P a g e
Figure 6: Schéma de Release

2.2 Environnement de travail

Dans cette partie, nous présenterons l'environnement technique relatif à la réalisation de


l'application.

2.2.1 Environnement logiciel


2.2.1.1 Outils de développement, design et modélisation

Visual code studio :

Pour le développement front-end (Mobile + Web), nous avons utilisé un nouvel éditeur
développé récemment par Microsoft : c’est Visual code studio.

Cet éditeur a gagné une très bonne satisfaction au sein de développeur front-end, c’est un outil
open source qui facilite le développement avec la nouvelle version de JavaScript appelée
TypeScript. [B1]

Figure 7: Visual code logo

IntelliJ IDEA :

Pour le développement Back-end, nous avons utilisé l’éditeur Intellij IDEA, est un
environnement de développement intégré de technologie Java destiné au développement de
logiciels informatiques. Il est développé par JetBrains et disponible en deux versions, l'une
communautaire, open source, tous deux supportent les langages de programmation Java,
Kotlin, Groovy et Scala. [B2]

Figure 8: Intellij logo

Adobe Photoshop :

Adobe Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur.
[B3]
19 | P a g e
Figure 9: Photoshop logo

Adobe Illustrator :

Adobe Illustrator un logiciel de création graphique vectorielle. Il fait partie de la gamme


Adobe, peut être utilisé indépendamment ou en complément de Photoshop, et offre des outils
de dessin vectoriel puissants. [B4]

Figure 10: Illustrator logo

Xcode :

Xcode est un environnement de développement pour macOS, ainsi que pour iOS, watchOS et
tvOS. [B5]

Figure 11: Xcode logo

Draw io :

Draw.io est une application gratuite en ligne, accessible via son navigateur (protocole https)
qui permet de dessiner des diagrammes ou des organigrammes [B6]

Figure 12: Draw io logo

Bitbucket :

Bitbucket est un service web d'hébergement et de gestion de développement logiciel utilisant


le logiciel de gestion de versions Git (et par le passé également le logiciel Mercurial).

Il s'agit d'un service freemium dont la version gratuite permet déjà de créer jusqu'à un nombre
illimité de dépôts privés, accessibles par cinq utilisateurs au maximum. [B7]

20 | P a g e
Figure 13: Bitbucket logo

Jira :

Jira est un système de suivi de bugs, un système de gestion des incidents, et un système de
gestion de projets développé par Atlassian. [B8]

Figure 14: Jira logo

Swagger :

Swagger est c’est un ensemble d’outils pour aider les développeurs dans la conception, le
build, la documentation et la consommation d’API. [B10]

Figure 15: Swagger logo

2.2.1.2 Plateforme de développement

Plate-forme cloud : AWS

AWS (Amazon Web Services) est une plateforme de Cloud computing complète et évolutive
fournie par Amazon qui comprend un mélange d’offres :

Infrastructure en tant que service (IaaS), Plateforme en tant que service (PaaS), Logiciel en
tant que service (SaaS).

Les services AWS peuvent offrir à une organisation des outils tels que la puissance de calcul,
le stockage de bases de données et des services de livraison de contenu. [B11]

Figure 16: Aws logo

Donc pour mettre l'application en valeur, plus développer et répond aux besoins du marché
nous implémentons les web services suivants :
21 | P a g e
Amazon S3 : Amazon Simple Storage Service (Amazon S3) est un service de stockage
d'objet offrant une évolutivité, une disponibilité des données, une sécurité et des performances
de pointe. Les clients de toutes tailles et de tous secteurs peuvent ainsi utiliser ce service afin
de stocker et protéger n'importe quelle quantité de données. [B12]

Figure 17: S3 logo

Amazon Relational Database Service (RDS) : configurez, gérez et dimensionnez facilement


une base de données relationnelle dans le cloud. Ce service offre une capacité économique et
ajustable ainsi qu'une automatisation des tâches administratives chronophages, telles que
l'allocation de matériel, le paramétrage de bases de données, l'application de correctifs et les
sauvegardes. [B13]

Figure 18: RDS logo

Amazon Identity and Access Management (IAM) : permet de contrôler de façon sécurisée
l'accès aux services et ressources AWS. Avec IAM, vous pouvez créer et gérer Amazon
Elastic Compute Cloud (Amazon EC2) est un service Web qui fournit une capacité de calcul
sécurisée et redimensionnable dans le cloud. [B14]

Figure 19: Ec2 logo

2.2.1.3 Langages de programmation

Java :

Java est une technique informatique développée initialement par Sun Microsystems puis
acquise par Oracle suite au rachat de l'entreprise. Défini à l'origine comme un langage de
programmation, Java a évolué pour devenir un ensemble cohérent d'éléments techniques.
[B15]

22 | P a g e
Figure 20: Java logo

TypeScript :

C’est un langage de programmation libre et open source développé par Microsoft qui a pour
but d'améliorer et de sécuriser la production de code JavaScript. C'est un sur- ensemble de
JavaScript (c'est-à-dire que tout code JavaScript correct peut être utilisé avec TypeScript). Le
code TypeScript est transcompilé en JavaScript, pouvant ainsi être interprété par n'importe
quel navigateur web ou moteur JavaScript. [B16]

Figure 21: Typescript logo

JavaScript :

C'est un langage de programmation qui est inclus dans le code HTML. Il permet d'apporter
des améliorations au langage HTML en permettant d'exécuter des commandes.

Mais dans notre projet en travaille par un outil de Java Script appelle TypeScript Type script
est un langage de programmation libre et open source développée par Microsoft qui a pour but
d'améliorer et de sécuriser la production de code JavaScript. [B17]

Figure 22: Javascript logo

HTML5 :

« Hyper Text Markup Langage 5 » considéré comme l’une des nouvelles technologies les
plus importantes, qui étaient émergées en 2010, et qui sont encore un travail ne sont pas
totalement finalisées par le W3C.

Elle est un langage de balisage conçu pour la création des pages Web. [B18]

23 | P a g e
Figure 23: Html5 logo

CSS3 :

« Cascading Style Sheets » permet d’arrondir les images, faire des ombres sur les divas, des
ombres sur du texte, des polices de caractères plus fun, des bordures d’images, etc. Et surtout
l’ajout de l’animation.

Il utilisait pour la description des styles et la disposition des éléments des pages HTML. [B19]

Figure 24: Css3 logo

2.2.1.4 Framework utilisés

SpringBoot :

Spring est un Framework de développement d'applications Java, qui apporte plusieurs


fonctionnalités comme Spring Security, SpringMVC, Spring Batch, Spring Ioc, Spring Data,
etc. Ces Frameworks ont pour objectif de faciliter la tâche aux développeurs. [B20]

Figure 25: SpringBoot logo

Spring Security :

Spring Security est un Framework de sécurité léger qui fournit une authentification et un
support d’autorisation afin de sécuriser les applications Spring. Il est livré avec des
implémentations d’algorithmes de sécurité populaires. [B21]

Figure 26: Spring Security logo

24 | P a g e
Angular10 :

Un Framework de développement, utilisé notamment par Gmail et Google +. Il permet de


faire des interfaces plus réactives et « one page », c’est-à-dire sans rechargement de la page.

La meilleure solution technique qui présente un vrai gain de productivité pour le


développement d’applications web ergonomiques. [B22]

Figure 27: Angular10 logo

Ionic 5 :

Ionic est un framework pour développer des applications mobiles hybride (Cross Platform).

Les applications ionic sont construites sur Apache Cordova par défaut. Ils ont accès à tous les
plug-ins Cordova qui vous permettent d'utiliser des fonctionnalités natives, telles que les
notifications push, les caméras, les accéléromètres, etc. [B23]

Figure 28: Ionic logo

Chart.js :

Chart.js est une bibliothèque JavaScript open source gratuite pour la visualisation des
données. [B24]

Figure 29: Chartjs logo

Dialogflow :

Dialogflow est une plate-forme de compréhension du langage naturel utilisée pour concevoir
et intégrer une interface utilisateur conversationnelle dans des applications mobiles, des
applications Web, des appareils, des robots, des systèmes de réponse vocale interactifs et des
25 | P a g e
utilisations associées. [B25]

Figure 30: Dialogflow logo

Stripe :

Stripe est une solution de paiement tierce, qui permet d'accepter les paiements par carte de
crédit et carte de débit dans votre Boutique en ligne. C'est une solution sûre et rapide. Vous
pouvez traiter les paiements presque immédiatement. [B26]

Figure 31: Stripe logo

Le paiement Stripe se compose de deux parties : front-end (tokenisation) et back-end


(demande de paiement réelle). L'intégration de paiement Stripe suivra ce flux pictural

Figure 32: Stripe flow diagram

Stripe permet de payer le contenu de manière transparente.

Tout ce qu'ils ont à faire est de saisir les détails de leur carte de crédit :

1- Les identifiants sont envoyés à Stripe.

2- Stripe tokenise les données et renvoie un token au back-end.

3- Le back-end crée une charge.

4- Les données sont à nouveau envoyées à Stripe, et il partage les détails avec les systèmes

26 | P a g e
de paiement.

5- Les systèmes de paiement répondent à Stripe et indiquent si tout va bien. Ou signaler


des problèmes.

6- Stripe répond au serveur sur l'état de la transaction.

Si tout se passe bien, l'utilisateur obtient du contenu. Sinon, un message d'erreur.

Firebase cloud messaging :

Pour gérer la notification dans notre application, nous avons utilisé le service de Google FCM
(Firebase Cloud Messenging).

Le Firebase Cloud Messaging (FCM) est un service de Google permettant l’envoi de


notifications Push à des terminaux. Il est supporté par les applications client iOS, Android ou
Web (JavaScript).

Une notification push est un message envoyé à l’utilisateur, ce message est lié à une
application installée. L’avantage de la notification push c’est que le message est reçu par
l’utilisateur même si l’application est fermée.

Pour bénéficier d’un service FCM, il faut tout d’abord Enregistrez les appareils pour recevoir
des messages de FCM. Une instance d'une application cliente s'inscrit pour recevoir des
messages, obtenant un jeton d'enregistrement qui identifie de manière unique l'instance
d'application.

Figure 33: FCM logo

La figure 34 présente l’architecture technique du FCM. En effet, cette architecture se repose


sur quatre phases.

• Création : Le message est composé, soit dans le compositeur de notifications, soit dans un
environnement approuvé, et une demande de message est envoyée au serveur.

• Envoi : Le serveur principal FCM reçoit la demande de message, génère un ID de message


et d'autres métadonnées et l'envoie à la couche de transport spécifique à la plate-forme.

• Transmission : Une couche de transport au niveau de la plate-forme, qui achemine le


message vers le périphérique cible, gère la remise des messages et applique la configuration

27 | P a g e
spécifique à la plate-forme.

• Réception : Sur l'appareil, l'application cliente reçoit le message ou la notification.

Figure 34: Architecture technique du FCM

La figure 35 présente le fonctionnement du service du FCM.

Figure 35: Fonctionnement du FCM

1. À chaque ouverture de l’application, elle demande un identifiant unique « TOKEN » à


FCM pour identifier l’application sur un appareil,

2. Envoi du TOKEN de FCM à l’application,

28 | P a g e
3. Transmission du TOKEN au serveur d’envoi qui va être stocké (ou rafraîchi) dans une base
de données,

4. Pour l’envoi d’une notification push, le serveur d’envoi transmet la notification push à
FCM. Pour cela il indique l’identifiant concerné et le message associé,

5. FCM vérifie les paramètres push (autorisations et identité de l’application) et transmet la


notification à l’appareil ciblé,

6. FCM envoie immédiatement un rapport de réception des notifications pour mettre la base
d’identifiants à jour (selon les désinstallations et la désactivation des notifications),

2.3 Architecture de l’application

Dans cette section, nous abordons l’aspect général de la plateforme à travers la présentation
de son architecture logicielle. Pour notre solution, on a adopté l’architecture nTiers illustrée
par la figure 36

29 | P a g e
Figure 36: Architecture logicielle de l’application

L’architecture trois-tiers (ou architecture trois niveaux) est un modèle d’architecture client-
serveur qui vise à séparer trois couches logicielles au niveau de la même application en la
présentant comme une superposition de trois couches dont chacune possède son propre rôle.

 La couche présentation :

C’est l’interface web qui permet à l’utilisateur de piloter l’application et de recevoir des
informations via l’explorateur ou des API web (Web services). Dans notre application, cette
couche est basée sur la technologie Angular, elle encapsule toute la logique de la présentation.
On a utilisé le pattern MVC (Modèle Vue Contrôleur) pour l’implémentation de cette couche,
qui permet l’indépendance entre les éléments d’interface et les composants métiers.

Figure 37: Architecture de la couche présentation

- Template : Les templates sont la partie visible d’une application Angular. Ils mélangent
le code HTML et le code Angular.

- Component : C’est une classe TypeScript, qui contient la configuration du composant.

- Service : Les services représentent une vaste catégorie qui inclut toute valeur, fonction,
ou fonctionnalité dont une application a besoin.

- Liaison par attributs : Ce sont les données de Typescript qui sont accessibles dans les
templates des composants.

30 | P a g e
- Liaison par événement : c’est un déclenchement des événements qu’on peut écouter :
click, keyup, mousemove qui permet l’exécution d’une méthode déclarée.

 La couche métier :

 La couche de contrôle : c’est la couche supérieure d’une application Web. Elle est
responsable du traitement de l’entrée de l’application et renvoie la réponse correcte à
l’utilisateur.

 La couche de service : réside sous la couche de contrôle. Elle agit comme une
frontière de transaction et contiennent le "code de plomberie" qui communique avec
des ressources externes telles que des systèmes de fichiers et des bases de données.
Ces méthodes sont souvent utilisées par plusieurs services d’application.

 La couche persistance : c’est la couche la plus basse d’une application Web. Elle est
responsable de la communication avec le stockage de données utilisées.

Conclusion

Dans ce chapitre, on a planifié notre travail, identifié les besoins fonctionnels et non
fonctionnels de notre application, les rôles des utilisateurs, par la suite on a présenté le
Backlog de notre système. Ainsi on a détaillé la phase de planification des sprints. Enfin on a
choisi l’architecture de notre projet ainsi que notre environnement de travail.

31 | P a g e
Chapitre 3

Le Premier Release

32 | P a g e
Introduction

Dans ce chapitre, nous allons détailler le travail réalisé durant le premier release. En effet,
chaque release, qui est l’ensemble d’itérations (sprint), représente une vision distribuée de la
période de la production du livrable. Ce premier Release comprend deux sprints :

 Sprint 1 « Authentification, Inscription et Gestion de profil »

 Sprint 2 « Gestion des voyage, Gestion de camping, Gestion d’hôtel »

Le développement de chaque sprint passe par les étapes d’analyse, de conception et de


réalisation.

3.1 Développement du sprint 1 « authentification, inscription et


gestion de profil »
Ce premier sprint s’étale sur 30 jours et se décompose en trois items :

 S’inscrire.

 S’authentifier.

 Gérer profil.

Figure 38: Décomposition sprint 1 en Items

33 | P a g e
Le tableau 7 présente les users stories du sprint 1.

Tableau 7 : Les user stories de sprint 1

ID U.S User Story


1.1 En tant qu’membre, je dois m’authentifier pour accéder à mon espace
1.2 En tant qu’utilisateur, je peux m’inscrire
1.3 En tant qu’membre, je peux réinitialiser mot de passe
2.1 En tant qu’membre, je peux uploader une image de profil
2.2 En tant qu’membre, je peux afficher mon profil
2.3 En tant qu’membre, je peux modifier mon profil
3.1 En tant qu’membre, je peux changer le mot de passe
3.2 En tant qu’membre, je peux désactiver mon profil

Le tableau 11 présente le backlog du sprint 1 est le suivant :

Tableau 8 : Backlog du sprint 1

Item User Story Description Priorité

S’inscrire S’inscrire En tant qu’utilisateur, je peux m’inscrire 1


S’authentifier En tant que membre, je dois m’authentifier pour accéder
S’authenti à mon espace 2
fier Réinitialiser mot En tant que membre, je peux Réinitialiser le mot de
de passe passe
Consulter profil En tant que membre je peux consulter mon profil

Modifier profil En tant que membre je peux modifier mon profil

Gérer Modifier image En tant que membre je peux uploader modifier une 3
profil de profil image de profil
Changer mot de En tant que membre, je peux changer le mot de passe
passe
Désactiver profil En tant que membre je peux désactiver mon profil

3.1.1 Analyse
3.1.1.1 Diagramme de cas d’utilisation sprint 1

34 | P a g e
Figure 39: Diagramme de cas d’utilisation du sprint 1

3.1.1.3 Description de l’item « S’inscrire »

 Diagramme de cas d’utilisation « S’inscrire »

Figure 40: Diagramme de cas d’utilisation « S’inscrire »

 Description textuelle du cas d’utilisation « S’inscrire »

Tableau 9 : Description textuelle du cas d’utilisation « S’inscrire »

Cas d’utilisation S’inscrire


Acteur Internaute
Précondition Utilisateur non inscrit
Post-condition Utilisateur inscrit
Scénario principal 1. L’utilisateur remplit le formulaire.
2. L’utilisateur clique sur bouton « S’inscrire ».
3. Le système enregistre la demande.
Scénario alternatif Le système affiche un message d’erreur «
Vérifiez votre saisie ».

35 | P a g e
3.1.1.2 Description de l’item « S’authentifier »

 Diagramme de cas d’utilisation « S’authentifier »

La figure 41 présente le diagramme de cas d’utilisation « S’authentifier ».

Figure 41: Diagramme de cas d’utilisation « S’authentifier »

 Description textuelle du cas d’utilisation « S’authentifier »

Le tableau 10 présente la description détaillée de l’user story 1 « s’authentifier »

Tableau 10 : Description textuelle du cas d’utilisation « S’authentifier »

Cas d’utilisation S’authentifier


Acteur Utilisateur du système
Préconditions l’utilisateur doit être activé.
Post-condition Utilisateur Authentifié

36 | P a g e
Scénario Nominal 1. L’utilisateur saisit son login et son mot de passe
ou il peut connecter via un compte Facebook ou
Google.
2. L’utilisateur confirme la saisie de ses données
d’identification.
3. Le système vérifie les données d’identification.
4. Le système affiche l’interface d’accueil
l’utilisateur.
Scénario D’exception E1. Si le login et/ou le mot de passe sont incorrects
L’enchaînement démarre au point 3. Le système
affiche un message d’erreur informant l’utilisateur
que son login ou mot de passe sont incorrects et le
scénario reprend à l’action1.

Le tableau 11 présente la description détaillée de l’user story 1 « réinitialiser mot de passe »

Tableau 11 : Description textuelle du cas d’utilisation « Réinitialiser mot de passe »

Cas d’utilisation Réinitialiser mot de passe


Acteur Utilisateur du système
Préconditions l’utilisateur doit être activé.
Post-condition Utilisateur Authentifié
Scénario Nominal 1. L’utilisateur clique sur le bouton « Forgot password »
2. L’utilisateur saisie son email.
3. Le système vérifie les données d’identification et envoyer
un code de vérification.
4. L’utilisateur saisie son email et son code de vérification.
5. Le système affiche l’interface de l’authentification.
Scénario D’exception E1. Si le code est incorrect
Le système affiche un message d’erreur informant
l’utilisateur que le code de validation le changement est
incorrects et le scénario reprend à l’action1.

3.1.1.4 Description de l’item « Gérer profil »

37 | P a g e
 Raffinement du cas d’utilisation « Gérer profil »

La figure 42 présente le raffinement de l’item « Gérer profil ».

Figure 42: Diagramme de cas d’utilisation « Gérer profil »

 Descriptions textuelles des cas d’utilisation de l’item « Gérer profil »

Le tableau 12 présente la description textuelle du cas d’utilisation « Modifier profil ».

Tableau 12 : Description textuelle du cas d’utilisation « Modifier profil »

Cas d’utilisation Modifier profil


Acteur Membre
Pré conditions Le membre doit être authentifié
Scénario nominal 1. Le membre demande la page « Profil ».
2. Le système affiche les informations du membre.
Scénario nominal 3. Le membre modifie les informations qu’il veut
changer il peut aussi modifier son image
4. Le membre peut changer son mot de passe

38 | P a g e
5. Le membre clique sur le bouton « Modifier ».
6. Le membre modifie ses informations et clique sur
le bouton « Terminer »
7. Le système vérifie les données saisies.
8. Le système enregistre les modifications effectuées
9. Le système notifié l’utilisateur
Post-condition Profil modifié.

3.1.2 Conception
3.1.2.1 Diagramme de séquence

 Diagramme de séquence « S’authentifier »

La figure 43 présente le diagramme de séquence « S’authentifier »

39 | P a g e
Figure 43: Diagramme de séquence User story 1.1 « S’authentifier »

 Diagramme de séquence « Modifier Profil »

La figure 44 présente le diagramme de séquence « Modifier Profil »

40 | P a g e
Figure 44: Diagramme de séquence « Modifier Profil »

3.1.2.2 Diagramme de classe sprint 1

La figure 45 présente les classes associées à ce sprint.

41 | P a g e
Figure 45: Diagramme de classe du sprint 1

La base de données relationnelle est une base de donnés comprenant des relations dynamiques
entre les différents objets contenus dans les tables :

Utilisateur (id_utilisateur, login, password, role)

Membre_Particulier (#id_utilisateur, nom, prenom, email, tél, adresse, pays, ville, photo)

Membre_Professionnel (#id_utilisateur, nom, prenom, email, tél, adresse, pays, ville, photo)

Administrateur (#id_utilisateur)

3.1.2.3 Réalisation

 Description des interfaces utilisateurs

Nous présentons dans ce qui suit quelques interfaces représentant le travail élaboré dans ce
sprint, l’accès à la page principale du site s’effectue sans authentification, c’est la première
interface de notre plateforme qui contient des bandes de publicité animés.

42 | P a g e
Figure 46: Page d'accueil (mobile)
Figure 47: Page d'accueil (web)

Chaque membre (membre particulier, membre professionnel, admin), doit s’authentifier


43 | P a g e
avant d’accéder aux déférentes fonctionnalités. L’authentification est assurée par les
interfaces illustrées par les figures 48 49 50

44 | P a g e
Figure 48: Interface de connexion et d’inscription (web)

Figure 49: Interface de connexion Dashboard

Figure 50: Interface de connexion et d’inscription (mobile)

45 | P a g e
3.2 Développement du sprint 2 « gestion des voyages, gestion de
camping, gestion d’hôtel »

Ce deuxième sprint s’étale sur 30 jours et se décompose en trois items :

 Gérer les voyages.

 Gérer les campings.

 Gérer les hôtels.

Figure 51:
Décomposition sprint 3 en Items

Tableau 13 : Les user stories de sprint 2

ID U.S User Story

4.1 En tant que membre professionnel et membre particulier, je peux consulter la liste des voyages
4.2 En tant que membre professionnel et membre particulier, je peux chercher un voyage
4.3 En tant que membre professionnel, je peux ajouter un voyage
4.4 En tant que membre professionnel, je peux supprimer un voyage
4.5 En tant que membre professionnel, je peux modifier un voyage
5.1 En tant que membre particulier, je peux ajouter un voyage dans mes favoris
5.2 En tant que membre particulier, je peux supprimer un voyage de mes favoris
5.3 En tant que membre particulier, je peux s’inscrire dans un voyage
5.4 En tant que membre particulier, je peux annuler l’inscription de voyage
46 | P a g e
6.1 En tant que membre professionnel et membre particulier, je peux commenter un voyage
6.2 En tant que membre professionnel et membre particulier, je peux supprimer mon commentaire
d’un voyage
6.3 En tant que membre professionnel et membre particulier, je peux consulter le voyage dans la
carte
6.4 En tant que membre professionnel et membre particulier, je peux partager un voyage sur les
réseaux sociaux
7.1 En tant que membre particulier, je peux demander un voyage de groupe
7.2 En tant que membre particulier, je peux demander un guide
7.3 En tant que membre professionnel et membre particulier je peux consulter la liste des campings
7.4 En tant que membre professionnel et membre particulier je peux chercher un camping.
8.1 En tant que membre professionnel, je peux ajouter un camping
8.2 En tant que membre professionnel, je peux modifier un camping
8.3 En tant que membre professionnel, je peux supprimer un camping
9.1 En tant que membre particulier, je peux s’inscrire dans un camping
9.2 En tant que membre particulier, je peux annuler l’inscription de camping
10.1 En tant que membre professionnel, je peux ajouter un hôtel
10.2 En tant que membre professionnel, je peux modifier un hôtel
10.3 En tant que membre professionnel, je peux supprimer un hôtel
10.4 En tant que membre professionnel et membre particulier je peux consulter un hôtel

Le tableau 14 présente le backlog du sprint 2

Tableau 14 : Backlog du sprint 2

Item User Story Description Priorité


Consulter la liste En tant que membre professionnel et membre
4
des voyages particulier, je peux consulter la liste des voyages
Gérer les voyages

Chercher un voyage En tant que membre professionnel et membre


4
particulier, je peux chercher un voyage
Ajouter un voyage En tant que membre professionnel, je peux ajouter
4
un voyage
Supprimer un voyage En tant que membre professionnel, je peux
4
47 | P a g e
supprimer un voyage
Modifier un voyage En tant que membre professionnel, je peux modifier
4
un voyage
Ajouter un voyage dans En tant que membre particulier, je peux ajouter un
4
mes favoris voyage dans mes favoris
Supprimer un voyage En tant que membre particulier, je peux supprimer
5
de mes favoris un voyage de mes favoris
S’inscrire dans un En tant que membre particulier, je peux s’inscrire
5
voyage dans un voyage
Annuler l’inscription En tant que membre particulier, je peux annuler
5
mon inscription de voyage
Commenter un voyage En tant que membre professionnel et membre
6
particulier, je peux commenter un voyage
Supprimer mon En tant que membre professionnel et membre
6
commentaire particulier, je peux supprimer mon commentaire
d’un voyage
Consulter un voyage En tant que membre professionnel et membre
6
dans la carte particulier, je peux consulter le voyage dans la carte

En tant que membre professionnel et membre


6
Partager un voyage particulier, je peux partager un voyage sur les
réseaux sociaux
Demander un voyage En tant que membre particulier, je peux demander
7
de groupe un voyage de groupe
Demander un guide En tant que membre particulier, je peux demander
7
un guide
Consulter la liste des En tant que membre professionnel et membre
8
Gérer les campings

campings particulier, je peux consulter la liste des campings


Chercher un camping En tant que membre professionnel et membre
8
particulier, je peux chercher un camping
Ajouter un camping En tant que membre professionnel, je peux ajouter
8
un camping

48 | P a g e
Modifier un camping En tant que membre professionnel, je peux
8
modifier un camping
Supprimer un camping En tant que membre professionnel, je peux
8
supprimer un camping
S’inscrire dans un En tant que membre particulier, je peux s’inscrire
8
camping dans un voyage
Annuler l’inscription En tant que membre particulier, je peux annuler
8
l’inscription de camping
Ajouter un hôtel En tant que membre professionnel, je peux ajouter
9
un hôtel
Modifier un hôtel En tant que membre professionnel, je peux
Gérer les hôtels

9
modifier un hôtel
Supprimer un hôtel En tant que membre professionnel, je peux
9
supprimer un hôtel
Consulter un hôtel En tant que membre professionnel, je peux
9
consulter un hôtel

3.2.1 Analyse
3.2.1.1 Diagramme de cas d’utilisation général

La figure 52 présente le diagramme de cas d’utilisation du sprint 2.

Figure 52: Diagramme de cas d’utilisation du sprint 2

3.2.1.2 Descriptions de l’item « Gérer voyages »

 Raffinement du cas d’utilisation « Gérer voyage »

La figure 53 présente le raffinement de l’item « Gérer les voyages ».

49 | P a g e
Figure 53: Diagramme de cas d’utilisation « Gérer les voyages »

 Descriptions textuelles des cas d’utilisation de l’item « Gérer voyage »

Le tableau 15 présente la description détaillée de l’user story « S’inscrire dans un voyage »

Tableau 15 : Description textuelle du cas d’utilisation « S’inscrire dans un voyage »

Cas d’utilisation S’inscrire dans un voyage


Acteurs Membre particulier
Pré conditions Le membre particulier doit être authentifié
Scénario Principal 1. Le membre particulier demande le voyage
2. Le système affiche le voyage
4. Le membre particulier consulte le voyage et clique sur le
bouton « s’inscrire »
5. Le système demande la confirmation pour valider l’inscription
6. Le système notifie l’utilisateur.
Post conditions de succès Inscription validé

50 | P a g e
3.2.1.3 Descriptions de l’item « Gérer camping »

 Raffinement du cas d’utilisation « Gérer camping »

La figure 54 présente le raffinement de l’item « Gérer les campings »

Figure 54: Diagramme de cas d’utilisation « Gérer les campings »

 Descriptions textuelles des cas d’utilisation de l’item « Gérer camping »

Le tableau 16 présente la description détaillée de l’user story « Chercher un camping »

Tableau 16 : Description textuelle du cas d’utilisation « Chercher un camping »

Cas d’utilisation Chercher un camping


Acteurs Membre particulier et membre professionnel
Pré conditions Le membre doit être authentifié

51 | P a g e
Scénario Principal 1. Le membre demande la page « Liste des campings »
2. Le système affiche la liste
3. Le membre cherche des campings par destination
4. Le système filtre la liste
Post conditions de succès Liste de camping affichée

3.2.1.4 Descriptions de l’item « Gérer hôtel »

 Raffinement du cas d’utilisation « Gérer hôtel »

La figure 55 présente le raffinement de l’item « Gérer les hôtels » par l’utilisateur

Figure 55: Diagramme de cas « Gérer les hôtels »

 Descriptions textuelles des cas d’utilisation de l’item « Gérer hôtel »

Le tableau 17 présente la description détaillée de l’user story 10.2 « Ajouter un hôtel »

Tableau 17 : Description textuelle du cas d’utilisation « Ajouter un hôtel »

Cas d’utilisation Ajouter un hôtel


Acteurs Membre professionnel
Pré conditions Le membre doit être authentifié
Scénario Principal 1. Le membre professionnel demande la page « Ajout hôtel ».
2. Le système affiche les champs à saisir.
3. Le membre professionnel remplit le formulaire et clique sur «
Ajouter »
4. Le système notifie l’utilisateur.
52 | P a g e
Post conditions de succès Hôtel ajouté
Post conditions d’échec Les données saisies ne sont pas valides.

3.2.2 Conception
3.2.2.1 Diagramme de séquence

 Diagramme de séquence « Consulter un voyage »

La figure 56 présente le diagramme de séquence « Consulter un voyage »

53 | P a g e
Figure 56: Diagramme de séquence « Consulter un voyage »

 Diagramme de séquence « S’inscrire dans un voyage »

La figure 57 présente le diagramme de séquence « S’inscrire dans un voyage »

Figure 57: Diagramme de séquence « S’inscrire dans un voyage »

54 | P a g e
 Diagramme de séquence « Supprimer camping »

La figure 58 présente le diagramme de séquence « Supprimer un camping ».

55 | P a g e
Figure 58: Diagramme de séquence « Supprimer un camping »

 Diagramme de séquence « Ajouter hôtel »

56 | P a g e
La figure 59 présente le diagramme de séquence « Ajouter un hôtel ».

Figure 59: Diagramme de séquence « Ajouter un hôtel »

3.2.2.2 Diagramme de classe sprint 2

57 | P a g e
La figure 60 présente le diagramme de classe de sprint 2

Figure 60: Diagramme de classe de sprint 2

3.2.2.3 Schéma Relationnel

La base de données relationnelle est une base de données comprenant des relations
dynamiques entre les différents objets contenus dans les tables :

Utilisateur (id_user, login, password, role)

Voyage (id_voyage, titre, description, date, prix, nbr, duree, picture, #id_destination,
#id_user)

Destination (id_destination, pays, ville, image, video, lontitude, latitude)

Camping (id_camping, description, nbr, date, prix, picture, #id_destination, #id_user)

Hôtel (id_hotel, description, adresse, etoile, image, #id_voyage, #id_user)

Commentaire (id_commentaire, description, #id_user, #id_voyage)


58 | P a g e
Inscription (id_inscription, date_inscription, #id_user, #id_voyage)

Mesfavoris (#id_user, #id_voyage)

3.2.2.4 Réalisation

 Description des interfaces

Nous allons consacrer cette partie pour la présentation de quelques interfaces élaborées
dans ce sprint. Les figures 61,62,63,64,65,66 et 67 présentent les interfaces de gestion de
voyage, gestion de camping et gestion des destinations.

Figure 61: Interfaces gestion de voyage (mobile)

Figure 62: Interface gestion de camping (mobile)

59 | P a g e
Figure 63: Interface liste de campings (web)

Figure 64: Interface liste de voyages (web)

60 | P a g e
Figure 65: Interface mes voyages (back office)

Figure 66: Interface détails d'un voyage


61 | P a g e
Figure 67: Interface destinations (web)

Conclusion

Dans ce chapitre, on a réussi à produire un incrément de valeur pour le client et utile dans
un environnement de production et on a effectué la conception et la réalisation du module de
sprint 1 et sprint 2.

Le release a été présenté dans le cadre d'une réunion de fin de release et préparation au
prochain. Cette réunion était à la présence de l'équipe du projet et quelques chefs de projets de
la société GPRO Consulting.

Dans le chapitre qui suit, nous allons produire un nouveau release couvrant les
fonctionnalités suivantes : Gestion de dossier, Gestion de groupe.

62 | P a g e
Chapitre 4

Le Deuxième Release

63 | P a g e
Introduction

Dans ce chapitre, nous allons détailler le travail réalisé durant le deuxième release. Tout
d’abord, un release, qui est l’ensemble de sprint (itérations), représente une vision distribuée
de la période de la production du livrable. Ce deuxième Release comprend deux sprints :

 Sprint 1 « Gestion de dossier, Gestion de groupe ».

 Sprint 2 « Gestion des albums photo, Statistique ».

Le développement de chaque sprint passe par les étapes d’analyse, de conception et de


réalisation.

4.1 Développement du Sprint 1 « Gestion de dossier, Gestion de


groupe »

Ce premier sprint s’étale sur 30 jours et se décompose en 2 items :

 Gérer les dossiers.

 Gérer les groupes.

Figure 68 : Décomposition sprint 1 en Items


64 | P a g e
Le tableau 18 présente les users stories qui forment le sprint 1.

Tableau 18 : Les users stories du sprint 1

ID U.S User Story


10.5 En tant que membre particulier je peux consulter mon dossier
10.6 En tant que membre particulier je peux envoyer mon dossier
10.7 En tant que membre particulier je peux modifier mon dossier
10.8 En tant que membre particulier je peux supprimer mon dossier
11.1 En tant que membre professionnel, je peux consulter les dossiers
11.2 En tant que membre professionnel, je peux valider les dossiers
11.3 En tant que membre professionnel, je peux refuser les dossiers
11.4 En tant que membre professionnel, je peux supprimer les dossiers
11.5 En tant que membre professionnel, je peux évaluer les dossiers
12.1 En tant que membre professionnel et membre particulier, je peux
inviter un membre
12.2 En tant que membre professionnel et membre particulier, je peux
exclure un membre
12.3 En tant que membre professionnel et membre particulier, je peux
consulter un groupe
12.4 En tant que membre professionnel et membre particulier, je peux
demander l'adhésion dans un groupe
12.5 En tant que membre professionnel et membre particulier, je peux
envoyer un message

Le tableau 19 présente le backlog du sprint 1.

Tableau 19 : Backlog du sprint 1

Item User Story Description Priorité

Consulter le dossier En tant que membre particulier, je peux consulter mon dossier 10
Gérer les

Envoyer le dossier En tant que membre particulier, je peux envoyer mon dossier 10
Modifier le dossier En tant que membre particulier, je peux modifier mon dossier 10
Supprimer le dossier En tant que membre particulier, je peux supprimer mon 10
65 | P a g e
dossier
dossi
ers Consulter les dossiers En tant que membre professionnel, je peux consulter les 10
dossiers
Valider les dossiers En tant que membre professionnel, je peux valider les dossier 11
Refuser les dossiers En tant que membre professionnel, je peux refuser les dossier 11
Supprimer les dossiers En tant que membre professionnel, je peux supprimer les 11
dossier
Evaluer les dossiers En tant que membre professionnel, je peux évaluer les dossier 11
Paiement En tant que membre particulier, je peux effectuer le paiement 11
Invitation En tant que membre professionnel et membre particulier, je 12
peux inviter un membre
Exclusion En tant que membre professionnel et membre particulier, je 12
peux exclure un membre
Consultation En tant que membre professionnel et membre particulier, je 12
peux consulter un groupe abonnement.
Demander l'adhésion En tant que membre professionnel et membre particulier, je 12
peux demander l'adhésion dans un groupe
Envoyer un message En tant que membre professionnel et membre particulier, je 12
peux envoyer un message

66 | P a g e
Gére
r les
grou
pes

67 | P a g e
4.1.1 Analyse

68 | P a g e
4.1.1.1 Diagramme de cas d’utilisation du sprint 1

La figure 69 présente le diagramme de cas d’utilisation du sprint 1.

Figure 69: Diagramme de cas d’utilisation du sprint 1

4.1.1.2 Description de l’item « Gérer les dossiers »

 Raffinement du cas d’utilisation « Gérer les dossiers »

La figure 70 présente le raffinement du cas d’utilisation du sprint 1.

Figure 70: Diagramme


de cas d’utilisation « Gérer les dossiers »

 Descriptions textuelles des cas d’utilisation de l’item « Gérer les dossiers »

Le tableau 20 présente la description détaillée de l’user story 11.5 « Évaluer les dossiers ».

Tableau 20 : Description textuelle du cas d’utilisation « évaluer les dossiers »

Cas d’utilisation Évaluer les dossiers


Acteurs Membre professionnel
Pré conditions Le membre particulier doit être authentifié
Scénario principal 1. Le membre professionnel demande la page
« Liste de dossier »
2. Le système affiche la page « Liste dossiers ».

69 | P a g e
3. Le membre professionnel demande le dossier
4. Le système affiche le dossier.
5. Le membre professionnel évalue le dossier.
6. Le système notifie l’utilisateur.
Post conditions de succès Dossier évalué

4.1.1.3 Description de l’item « Gérer les groupes »

 Raffinement du cas d’utilisation « Gérer les groupes »

La figure 71 présente le diagramme du cas d’utilisation « Gérer les groupes ».

Figure 71 : Diagramme du cas d’utilisation « Gérer les groupes »

 Descriptions textuelles des cas d’utilisation de l’item « Gérer les groupes »

Le tableau 21 présente la description détaillée de l’user story 10.1 « Inviter un membre »

Tableau 21 : Description textuelle du cas d’utilisation « Inviter un membre »

Cas d’utilisation Inviter un membre


Acteurs Membre particulier
70 | P a g e
Pré conditions Le membre particulier doit être authentifié
Scénario Principal 1. Le membre particulier demande la page
« Liste de groupes »
2. Le système affiche la page.
3. Le membre particulier clique sur le bouton «
Inviter un membre » et choisit le membre
4. Le système notifie l’utilisateur.
Post conditions de succès Invitation envoyée

4.1.2 Conception
4.1.2.1 Diagrammes de séquence

 Diagramme de séquence « Valider le dossier »

La figure 72 présente le diagramme de séquence « Valider un dossier ».

71 | P a g e
Figure 72: Diagramme de séquence « Valider un dossier »

 Diagramme de séquence « Envoyer un dossier »

La figure 73 présente le diagramme de séquence « Envoyer un dossier ».

72 | P a g e
Figure 73: Diagramme de séquence « Envoyer un dossier »

4.1.2.2 Diagramme de classe

La figure 74 présente le digramme de classe du sprint 1.


73 | P a g e
Figure 74: Diagramme de classe du sprint 1

4.1.2.3 Schéma Relationnel

Voyage (id_voyage, titre, description, date, prix, nbr, duree, picture)

Utilisateur (id_user, login, password, role)

Administrateur (#id_utilisateur)

Membre_Professionnel (#id_utilisateur, prenom, email, tél, adresse, pays, ville, photo,


is_active, is_delete)

Membre_Particulier (#id_utilisateur, prenom, email, tél, adresse, pays, ville, photo,


is_active, is_delete)

Dossier (id_dossier, passeport_recto, passeport_verso, document, note, #id_voyage, #id_user)

Groupe (id_groupe, destination, nombre, #id_user)

4.1.3 Réalisation
4.1.3.1 Description des interfaces

La figure 75 présente l’interface d’envoi d’un dossier dans la plateforme. L’utilisateur doit
scanner ou choisir une photo du passeport et un document nécessaire pour le voyage sous le
format PDF.

74 | P a g e
Figure 75: Interface « Ajout d’un dossier (mobile) »

La figure 76 présente l’interface du traitement d’un dossier envoyé un utilisateur vers le


membre professionnel. Ce dernier doit le valider, le mettre en attente ou le rejeter. En plus,
pour tout dossier, le membre professionnel peut ajouter une note qui contient une information
sur l’état du dossier.

75 | P a g e
Figure 76: Interface « Consulter un dossier (mobile) »

La figure 77 présente l’interface de suivi d’un dossier par le membre particulier. Il peut
consulter l’état de son dossier et en cas d’acceptation, il peut passer au payement en ligne.

Figure 77: Interface « Consulter l’état d’un dossier et payement »

La figure 78 présente le profil d’un membre quelconque et l’interface qui lui permet d’accéder
au chat avec un membre professionnel.

76 | P a g e
Figure 78: Interface user détails et chat

4.2 Développement du Sprint 2 « Gestion d’album photo et statistique »

Ce deuxième sprint s’étale sur 30 jours et se décompose en deux items :

 Gérer les albums photos.

 Statistique.

Figure 79: Décomposition sprint 2 en Items

Tableau 22 : Les user stories de sprint 2


77 | P a g e
ID U.S User Story
13.1 En tant que membre particulier, je peux ajouter des photos
13.2 En tant que membre particulier, je peux voir l'ensemble des
photos.
13.3 En tant que membre particulier, je peux supprimer mes photos
13.4 En tant que membre particulier, je peux partager les photos dans
les réseaux sociaux.
14.1 En tant que membre professionnel, je peux consulter les
statistiques.

Tableau 23 : Backlog du sprint 2

Item User Story Description Priorité

Ajouter des En tant que membre particulier, je peux ajouter


photos des photos. 13
Voir des En tant que membre particulier, je peux voir
photos l'ensemble des photos.
albums photos
Gérer les

13
Supprimer En tant que membre particulier, je peux
des photos supprimer mes photos 14
Partager des En tant que membre particulier, je peux partager
photos les photos dans les réseaux sociaux. 14
Consulter les En tant que membre professionnel, je peux
statistiques consulter les statistiques. 15

4.2.1 Analyse
4.2.1.1 Diagramme de cas d’utilisation du sprint 2

La figure 80 présente le diagramme de cas d’utilisation Sprint 2.

78 | P a g e
Figure 80: Diagramme de cas d’utilisation Sprint 2

4.2.1.2 Description de l’item « Gérer les albums photos »

 Raffinement du cas d’utilisation « Gérer les albums photos »

La figure 81 présente le diagramme de cas d’utilisation « Gérer les albums photos ».

Figure 81: Diagramme de cas d’utilisation « Gérer les albums photos »

 Descriptions textuelles des cas d’utilisation de l’item « Gérer les albums photos »

Le tableau 24 présente la description détaillée de l’user story 13.4 « Partager une photo ».

Tableau 24 : Description textuelle du cas d’utilisation « Ajouter une image »

Cas d’utilisation Inviter un membre


Acteurs Membre particulier et membre professionnel
Pré conditions Le membre particulier doit être authentifié
Scénario Principal 1. Le membre demande la page « Explorer »
2. Le système affiche la page.
3. Le membre consulte l’image et clique sur le
bouton partager et choisir le réseau social
(Facebook, Instagram…)
4. Le système notifie l’utilisateur.

79 | P a g e
Post conditions de succès Photo partagé

4.2.1.3 Description de l’item « Statistiques »

 Raffinement du cas d’utilisation « Statistiques »

Figure 82:
Diagramme de cas d’utilisation « Consulter les statistiques »

 Raffinement du cas d’utilisation « Statistiques »

Le tableau 25 présente la description détaillée de l’user story « Consulter les statistiques ».

Tableau 25 : Description textuelle du cas d’utilisation « Consulter les statistiques »

Cas d’utilisation Consulter les statistiques


Acteurs Membre professionnel
Pré conditions Le membre professionnel doit être authentifié
Scénario Principal 1. Le membre professionnel demande la page « Statistique ».
2. Le système affiche la page.
3. Le membre professionnel parcoure la liste des statistiques
Post conditions de succès Statique consulté

4.2.2 Conception
4.2.2.1 Diagramme de séquence

 Diagramme de séquence « Consulter les statistiques »

La figure 83 présente le diagramme de séquence « Consulter les statistiques ».

80 | P a g e
Figure 83: Diagramme de séquence « Consulter les statistiques »

4.2.2.2 Diagramme de classe

La figure 84 présente le diagramme de classe de sprint 2.

81 | P a g e
Figure 84: Diagramme de classe de sprint 2

4.2.2.3 Schéma Relationnel

Utilisateur (id_user, login, password, role)

Album_photos (id_storie, date_creation, image, #id_user)

4.2.2.4 Diagramme de classe général

La figure 85 présente le diagramme de classe général.

82 | P a g e
Figure 85: Diagramme de classe général
83 | P a g e
4.2.2.5 Réalisation

 Architecture physique

Un diagramme de déploiement est une vue statique qui sert à représenter l'utilisation de
l'infrastructure physique par le système et la manière dont les composants du système sont
répartis ainsi que leurs relations entre eux.

Figure 86: Diagramme de déploiement

 Description des interfaces

La figure 87 présente la page d’accueil qui contient tous les stories des membres inscrits et
les différentes publications faites sur les voyages et les campings. Tout membre peut consulter
ses propres photos et peut les partager sur les réseaux sociaux.

84 | P a g e
Figure 87: Interface explorer et gestion de photos

Les figures 88 et 89 présentent le chatbot qui permet d’aider l’utilisateur pendant son
voyage ou son camping et fournir une réponse immédiate à ses questions sur les guides
urbains gratuits, les promotions sur les circuits, les réservations, la préparation et la gestion
des voyages. L'apprentissage machine de l'IA du chatbot l'aide à apprendre de nouvelles
questions tirées de conversations avec des clients réels.

Figure 88: Interface Chatbot (mobile)

85 | P a g e
Figure 89: Interface Chatbot (web)

La figure 90 présente l’interface de notification pour l’administrateur si un voyage est


ajouté par le membre professionnel. L’état de chaque nouveau voyage ajouté est en attente
mais l’administrateur peut l’approuver ou le désactiver.

Pour chaque voyage ou camping crée une notification est envoyée à l'administrateur

Figure 90: Dashboard Admin et notification (interface admin)

La figure 91 présente le tableau de bord de l’administrateur qui affiche des statistiques sur
le nombre de voyage approuvé, le nombre de voyage en attende, … ainsi que pour les
campings.

Figure 91: Statistique (interface admin)


86 | P a g e
La figure 92 présente le tableau de bord du membre professionnel qui affiche des
statistiques sur le nombre de voyage crée, le nombre de personne inscrit dans un voyage, …
ainsi que pour les campings.

Figure 92: Statistique (Interface membre professionnel)

Conclusion

A la fin de ce chapitre, nous avons réussi à produire un incrément répondant aux besoins
du client et étant utilisé dans un environnement de production. Nous clôturons ce rapport par
une conclusion générale.

87 | P a g e
Conclusion générale

Notre projet de fin d’études effectué au sein de la société « GPRO Consulting » consiste à
la conception et au développement d’une application mobile et web pour la gestion des
voyages et des campings.

Cette application permet de faciliter les procédures nécessaires pour voyager et assure la
communication entre les agences de voyage, les guides et les clients. Elle est rapide,
dynamique et simple à utiliser.

Au terme de ce rapport, nous pouvons conclure que ce stage de fin d’études nous a donné
l’occasion opportune afin de confronter l’acquis théorique à l’environnement pratique,
puisqu’il nous a permis d’approfondir nos connaissances théoriques, acquises tout le long de
notre formation, par la pratique des nouvelles technologies.

Ce travail nous a fourni également un grand apport au niveau de plusieurs niveaux. Sur le
plan technique, nous avons appris à manipuler le Framework SpringBoot, Spring Security,
Ionic 5 et Angular 10, Stripe, Dialogflow et les services développés par Amazone web
Service et pleins d’autres outils. Nous avons également eu l’opportunité de maîtriser la
conception en utilisant UML.

Enfin, ce projet était une expérience enrichissante en termes d’apprentissage, mise en


pratique des connaissances théoriques et amélioration des aptitudes de communication qui
seront bénéfiques lors de l’intégration dans le monde professionnel.

88 | P a g e
Liste des abréviations

— API : Application Programming Interface

— CLI : Command Line Interface

— CSS : Cascading Style Sheets

— HTML : HyperText Markup Language

— HTTP : HyperText Transfert Protocol

— IDE : Integrated Development Environment

— MVC : Modèle Vue Contrôleur

— JSON : JavaScript Object Notation

— REST : REpresentational State Transfer

— RH : Ressources Humaines

— UI : User Interface

— UML : Unified Modeling Language

— URL : Uniform Resource Locato

— IT : Informatique Technologie

— IHM : Interface Homme Machine

— SQL : Structured Query Language

— MYSQL : My Structured Query Language

— JEE: Java Entreprise Edition


Bibliographie

[B1] https://angular.io/ [dernière date de visite 02/04/2021]

[B2] https://www.jetbrains.com/fr-fr/idea/ [dernière date de visite 02/04/2021]

[B3] https://www.adobe.com/fr/products/photoshop.html [dernière date de visite 02/04/2021]

[B4] https://www.adobe.com/fr/products/illustrator.html [dernière date de visite 02/04/2021]

[B5] https://developer.apple.com/fr/support/xcode/ [dernière date de visite 02/04/2021]

[B6] https://www.diagrams.net/ [dernière date de visite 02/04/2021]

[B7] https://www.atlassian.com/fr/software/bitbucket [dernière date de visite 04/04/2021]

[B8] https://www.atlassian.com/fr/software/jira [dernière date de visite 04/04/2021]

[B9] https://www.redhat.com/fr/containers/what-is-docker [dernière date de visite 04/04/2021]

[B10] https://swagger.io/ [dernière date de visite 04/04/2021]

[B11] https://aws.amazon.com/fr/ [dernière date de visite 12/04/2021]

[B12] https://aws.amazon.com/fr/s3/ [dernière date de visite 12/04/2021]

[B13] https://aws.amazon.com/fr/rds/ [dernière date de visite 14/04/2021]

[B14] https://aws.amazon.com/fr/iam/ [dernière date de visite 14/04/2021]

[B15] https://www.lemagit.fr/definition/Java [dernière date de visite 09/05/2021]

[B16] https://www.scriptol.fr/programmation/typescript.php [dernière date de visite 09/05/2021]

[B17] https://www.w3schools.com/js/ [dernière date de visite 09/05/2021]

[B18] https://www.w3schools.com/html/ [dernière date de visite 09/05/2021]

[B19] https://www.w3schools.com/css/ [dernière date de visite 09/05/2021]

[B20] https://spring.io/projects/spring-framework [dernière date de visite 11/05/2021]

[B21] https://spring.io/projects/spring-security [dernière date de visite 11/05/2021]

[B22] https://angular.io/docs [dernière date de visite 11/05/2021]

[B23] https://ionicframework.com/ [dernière date de visite 11/05/2021]


[B24] https://cda.needemand.com/2020/12/04/chart-js [dernière date de visite 13/05/2021]

[B25] https://fr.wikicore.net/wiki/Dialogflow [dernière date de visite 16/05/2021]

[B26] https://stripe.com/fr/payments/payment-methods-guide [dernière date de visite 19/05/2021]

Vous aimerez peut-être aussi