Ce document présente un projet de stage consacré à la conception et au développement d'une application web de covoiturage, visant à faciliter la gestion d'une copropriété syndicale. Il se compose de quatre chapitres détaillant le schéma directeur, l'étude de projet, la conception et enfin la réalisation, en incluant les technologies utilisées et les interfaces graphiques. Les objectifs incluent la simplification du covoiturage, la gestion des utilisateurs et des trajets, ainsi qu'une attention particulière à la sécurité et à l'ergonomie de l'application.

2. application
web
de
covoiturage:
• Rapport du project de stage
• Filière :dévolopement dégital option web full stack
• Elaboré par : Encadrant : Mr. Aissaoui
• WALID NEGROU
• Yassine ech-
chaoui
• année universitaire 2022/2023
• Société: Lusso car

3. Introduction
générale:
• L’objectif de ce projet est de répondre aux besoins Du
client c’est-à-dire de concevoir et de réaliser une
application qui puisse lui faciliter la gestion d’une
copropriété syndicale. Ceux-ci en lui permettant de gérer
non seulement les cotisations de la copropriété mais aussi
les relevées des copropriétaires ainsi de leur.
• C’est dans ce cadre que ce projet de stagequ’a été rédiger.
Il consiste de façon générale à concevoir et mettre en place
une application web simple mais efficace qui permettra à
nos utilisateurs de faire du covoiturage.
• Ce rapport va donc nous permettre de mettre sur papier et
d’expliquer en détails la réflexion ainsi que l’intégralité du
processus de conception et de réalisation qu’il nous a été
nécessaire de suivre afin de réaliser notre projet.

4. • Le présent rapport, estcomposéde quatre chapitres structurés commesuit:
• ⦁ Dans le premier chapitre, « Schéma directeur », on met le projetdans son
contexte par une description du projetde façon globale, suivie de la planification du
processus deréalisation dans le temps.
• ⦁ Le deuxième chapitre, « Etude du projet», c’estla partie la plus cruciale du
projet, elle nous permet le développement d’uneapplication complète à travers
l’étude préalable suivie d’uneétude détaillée visantla spécification des besoins.
• ⦁ Le troisième chapitre, « Conception », présentela suite de l’analysereprésentant
la structurede notre projet, du point de vue des données et du traitement en
utilisant le langage UML.
• ⦁ Le quatrième et dernier chapitre, « Réalisation », dans lequel on expose les
différentes technologies utilisées, et aussiles langages de programmation qu’on a
choisie, pour enfin présenter les principales interfaces graphiques denotre
application.

5. Chapitre 1 :
Schéma
directeur
⦁ Description du
project
• Notre projet de stage porte sur la conception et la
réalisation d’une application web de covoiturage.
L’application doit permettre ses utilisateur de rechercher
un covoiturage, en fonctions de plusieurs critères la ville de
départ et d’arriver la date et l’heure de départ, le nombre
de passagers, les utilisateurs pourrons ajouter un trajet de
covoiturage définir les différentes escales s’il y en a ,toutes
fois chaque utilisateur a son propre profil ou il y définit ses
préférences tels que si il est fumeurs ou non, permet-il ou
non le trajet avec des animaux, aussi pour mieux protéger
nos utilisateurs nous avons mis en place un processus de
vérification des utilisateurs, seul les utilisateurs ayant un
badge de vérifications pourrons ajouter un trajet. Notre
premier objectif c’est de faciliter et de simplifier le
covoiturage en rendant l’usage de l’application plus intuitifs
à nos utilisateurs.

6. ⦁ Planification
du projet
• Dans le but de répertorier le travail nécessaire en vue de
mener à bien notre projet, nous avons décidé de suivre une
planification ordonnée selon le diagramme de Gantt, ce qui
nous permettra de mieux nous organiser et répartir les
tâches entre nous.
• Le diagramme de Gantt permet de visualiser dans le temps
les diverses activités liées composant notre projet. Il
permet de représenter graphiquement l'avancement du
projet.

7. Figure 1 :
Diagramme de
Gantt

8. Chapitre 2 :
Etude du
projet
Introduction:
• Dans ce chapitre nous allons effectuer dans un premier
temps une étude de l’existantafin d’en sortir avec le plus
d’informations concernant les besoins spécifiques à notre
projet, ensuite nous allons étudier en détail les
informations récoltées pour mieux les organisés
constituant ainsi notre cahier des charges.

9. ⦁ Etude de
l’existant :
• Les solutions de de covoiturage sont devenues
primordiales ils permettent non seulement aux utilisateurs
de faire des économies mais a grandes échelles contribue
quant à la réduction de pollution car il divise la quantité
d’émissions de gaz à effet de serre c’est pour cette raison
que l’on trouve plusieurs solutions de covoiturage dans le
marché. Parmi les solutions qui existentaujourd’hui nous
citons :
• ⦁ BlaBlaCar
• BLABLACAR est une application communautaire payantede
covoiturage.
• L'entreprise n'a cessé d'augmenter les frais prélevés sur les
trajets des passagers depuis sa création où le service était
gratuit53. En 2014, en fonction de la date de réservation,
les frais s'élèvent de 0,66 €+7,92 % à 1,19 €+12,48 % du
prix du trajet.
• L’application offre des interfaces dynamique et intuitifs :

10. Figure 2 :
Interface
d'accueil

11. ⦁ TICTACTRIP
• Tictactrip est un comparateur et combinateur de bus, train et
covoiturage. Ces combinaisons permettent d'améliorer la
desserte, économiser temps et prix sur son trajet. En évitant
des détours vers les grandes villes, une grande économie
carbone est faite. Cela s'appelle l'intermodalité. Le futur du
déplacement pour tous.

12. Figure 3:
interface de
recherche

13. ⦁ Critique de
l’existant
• Ci-dessous un tableau comparatif des solutions de suivi des
projets qui existent aujourd’hui avec les avantages et les
inconvénients de chacune :

14. ⦁ Analyse et
spécification
des besoins
• La réussite de tout projet dépend de la qualité de son
départ. De ce fait, l’étape de spécification des besoins
constitue la base de départ de notre travail.
• Cette étape est conçue pour la détermination des
différentes fonctionnalités attendues du système. Nous
présentons tout d’abord, les acteurs concernés de notre
système. Puis, nous entamons l’étude des besoins
fonctionnels et non fonctionnels.

15. 4.1
Identifications
des acteurs
• Tout systèmeinteractif, doit assurer et faciliter l’interaction
avec ses utilisateurs. Un acteur représente le rôle d’une
entité externe exploitant le systèmeà travers ses
différentes interfaces. Nous spécifions dans le cadre de ce
projet les acteurs du système, qui se divisent en quatre
catégories comme suit :
• ⦁ Administrateur : qui s’occupe de l’administration de
l’application web.
• ⦁ Utilisateur : qui peux ajouter des trajets ou faire partie
d’un trajet.

16. 4.2
identifications
des besoins
• de notre a dans cette section, nous allons exposer les
besoins fonctionnels et non fonctionnels pplication.
⦁ Besoins fonctionnels
Les besoins fonctionnels:
sont ceux qui doivent répondre aux exigences du futur
systèmeen termes de fonctionnalités. Ils permettent de
générer les cas d’utilisation. Les besoins recensés sont
comme suit :

17. Gestion des
utilisateurs :
• La gestion des utilisateurs sera pilotée par les différents
types d’utilisateurs de la plateforme. Cette tâche consistera
essentiellement en :
⦁ L’administrateur aura le droit d’ajouter (insérer) ou
supprimer tous utilisateurs
⦁ L’administrateur pourra vérifier et attribuer un badge de
vérification pour les utilisateurs.
⦁ Les utilisateurs pourront modifier leurs préférences et
leurs profils.

18. Gestion des
covoiturages :
• La gestion des trajets effectuée par les utilisateurs de
l’applications, ils doivent être en mesure de :
⦁ Ajouter un covoiturage
⦁ Consulter les informations des covoiturages qu’ils ont
crée
⦁ Modifier leurs covoiturages
⦁ Supprimer leurs covoiturages
⦁ Rechercher un covoiturage

19. Besoins non
fonctionnels
⦁ FiLes besoins non fonctionnels décrivent toutes les
contraintes auxquelles le bilité : Notre application doit
fonctionner de façon cohérente sans erreurs.
⦁ Souplesse et confort d’utilisation : Pour faciliter
l’utilisation, notre application doit offrir une interface unifiée,
conviviale et facile à manipuler ou utiliser.
⦁ Rapidité : Notre application doit optimiser les traitements
pour avoir un temps de réponse minimal.
⦁ Maintenabilité : Notre code source doit être modulable,
lisible, commenté et compréhensible afin d’assurer son état
évolutif et extensible par rapport aux besoins de l’entreprise.
⦁ Sécurité : Les comptes des utilisateurs sont sécurisés par
mot de passe (longueur, caractères spéciaux, expiration,
politique de réutilisation…)

20. ⦁ Règles de
gestion
• Pour une meilleure gestion de notre application, nous
avons définis les règles de gestion suivantes :

21. ⦁ Conclusion
• Ce chapitre a été dédié à une étude globale du projet. On a
consacré beaucoup de temps pour cette partie, ce qui nous
a permis de bien déterminer les objectifs du projet ainsi
que les différentes fonctionnalités que l’application doit
gérer et les exigences à atteindre. Cette étude nous a
permis de rassembler toutes les informations nécessaires
pour entamer une analyse conceptuelle et approfondie du
projet.

22. Chapitre 3 :
Conception
⦁ Introduction :
Dans ce chapitre nous allons entamer la partie de
conception, nous allons représenter l’activité du système
en fonction des différents événements et des acteurs. Nous
utiliserons UML pour modéliser ces différentes
informations relatives aux données préalablement
déterminés.

23. ⦁ Diagramme
de cas
d’utilisation
• Le diagramme de cas d’utilisation d’UML illustre le rôle de
chaque acteur ainsi que l’étendue de ses responsabilités.
• Nous avons choisi d’étudier les cas d’utilisation détaillés
pour chaque acteur de notre système.

24. Figure 6: Diagramme de cas d’utilisation

25. ⦁ Diagramme
de séquence
• Le diagramme de séquence nous permet de montrer les
interactions d'objets dans le cadre d'un scénario d'un
diagramme de cas d'utilisation.

26. Figure 7:
Diagramme de
séquence
d'authentification

27. ⦁ Diagramme
de classe
• Le diagramme de classes est une représentation statique
des éléments qui composent un systèmeet leurs relations.
La figure suivante représente les classes intervenant dans
notre système:

28. Figure 8:
Diagramme de
classes

29. ⦁ Conclusion
• Dans ce chapitre, nous avons présenté notre étude
conceptuelle du système. En se basant sur le langage UML,
à travers le diagramme de classe.
• Pour la réalisation de l’ensemble des diagrammes dans ce
chapitre on a utilisé Lucidchart.

30. Chapitre 4 :
Réalisation
• 1. Introduction:
Après avoir achevé la partie de l’analyse des besoins et la
partie de conception, vient l’étape qui prend le plus de
temps celle de la réalisation. L’objet de ce chapitre est de
présenter l’environnement de travail, et de donner un
aperçu sur le travail accompli à travers des captures
d’écran.

31. 2 Environnement
technique
• Dans ce paragraphe nous décrivons les différents outils et
logiciels utilisés pour la mise en œuvre de l’application
web.

32. REACT JS est un e bibliothèque JavaScript libre développée par
Facebook depuis 2013. Le but principal de cette bibliothèque est de
faciliter la création d'application web mono page, via la création de
composants dépendant d'un état et générant une page (ou portion)
HTML à chaque changement d'état.

33. • Redux est une bibliothèque open-source JavaScript de
gestion d'état pour applications web. Elle est plus
couramment utilisée avec des bibliothèques comme
React ou Angular pour la construction d'interfaces
utilisateur. Semblable à l'architecture Flux.

34. • Git est un logiciel de gestion de versions décentralisé.
C'est un logiciel libre créé par Linus Torvalds, et
distribué selon les termes de la licence publique
générale GNU version 2. En 2016, il s’agit du logiciel de
gestion de versions le plus populaire qui est utilisé par
plus de douze millions de personnes.

35. • Adobe XD est un vectoriel outil de conception de
l’expérience utilisateur pour les applications Web et des
applications mobiles.

36. • Visual paradigm est un logiciel de création de
diagrammes tout-en-un qui prend en charge une grande
variété de diagrammes commerciaux et techniques.

37. • MongoDB est un systèmede gestion de base de
données orienté documents, répartissable sur un
nombre quelconque d'ordinateurs et ne nécessitant pas
de schéma prédéfini des données

38. • Spring Boot est un nouveau Framework, conçu pour
simplifier le démarrage et le développement de
nouvelles applications Spring. Le Framework propose
une approche dogmatique de la configuration, qui
permet d'éviter aux développeurs de redéfinir la même
configuration à plusieurs endroits du code.

39. Interfaces
et exécution
• Cette partie est consacrée à présenter quelques interfaces
de l’application réalisée.
• Toutes les maquettes figurants dans ce paragraphe on était
désignée par WALID NEGROU

41. ⦁ Conclusion
• .Dans ce chapitre, nous avons traité les
détails de la réalisation de notre
application, qui est la phase qui nous a pris
le plus de temps afin de mettre en place la
majorité des fonctionnalités déterminées
dans notre cahier de charge.
• Nous avons montré les différentes
interfaces de notre application ainsi que
l’environnement technique

42. Conclusion
générale
• Dans ce rapport, nous avons exposéles étapes de conception
et de développement de notreapplication qui consisteà
créer une application web pour la gestion d’un syndicatde
copropriété.
• Notre travails’estdéroulé sur quatreétapes, nous avons
commencé par une étude de l’existant qui c’estavérer
inexistant.
• Dans la deuxième phase, nous avons spécifiéles besoins
fonctionnels et non fonctionnels que doit respecter
l’application suivis par l’identification des acteurs qui
interagissentavec le système.
• La troisième étape concernaitla conception de notre
application en utilisant le diagrammede classes.
• Dans la dernière phase, nous avons évoquéles différentes
technologies utilisées ainsi que quelques interfaces de notre
application.
• Ce projet sesitue en effet, dans le cadre du projet de fin
d’année du troisième cycled’ingénieur en informatique et
réseaux. Ce projetétait une véritable expérience de travail en
collaboration, qui nous a permis de bien gérer la répartition
des tâches et de renforcer l’espritde partagede
connaissanceainsique la synchronisation denotre travail.

43. Bibliographie
• LUCIDCHART : https://www.lucidchart.com/
•
• MONGODB : https://www.mongodb.com/
• GITHUB : https://www.github.com/
• REACTJS : https://fr.reactjs.org/
• https://www.wikipedia.org/