Université Cadi Ayyad

Ecole Supérieure de Technologie

-SAFI-

Stage de fin d’études

Licence professionnelle Métiers de
l’informatique

RÉALISATION D’UNE
APPLICATION WEB ET DESKTOP
DU SYSTÈME D’ASSURANCE

Département : Génie Informatique

Filière : Métiers de l’informatique

Réalisé par : Encadré par :

LEBDAOUI Meryam M. MALAOUI Taoufik

Année Universitaire 2020-2021

“Take the first step in faith, you don’t have to
see the whole staircase, just take the step.”

Martin Luther King Jr

1
Remerciements

Avant de commencer la réalisation de mon

rapport, je présente mes vifs remerciements, et
mes profondes gratitudes à ceux qui ont
contribué de près ou de loin à la réussite de ce
projet de fin d’études.
Et je remercie tout particulièrement :
Mme. ALLALI Fatima : Le chef de service
informatique au sein de la MATU assurance,
Mme. NOURELYAQUINE Houda pour leur
guide.
M. MALAOUI Taoufik : l’encadrent de mon
projet de fin d’etude, pour leur soutien, leur
aide et leur conseils durant la réalisation de ce
projet.
L’école Supérieure de Technologie de Safi
surtout les professeurs de génie informatique
pour leurs efforts lors de notre formation et
leur amour pour le domaine.
Mes Parents pour m’avoir donné l’opportunité
de suivre mes études et d’améliorer mon
savoir-faire en découvrant ce domaine.

2
Dédicaces

Je dédie ce travail :
À mes très chers parents

Rien ne pourra exprimer mes gratitudes, mon respect,

et mon amour éternel pour tous les sacrifices que vous
avez consenti pour mon éducation et pour bien être.
Trouvez dans ce travail l’expression de mon profond
amour.
À mes frères et à ma sœur.
À toutes ma grande famille
À mes amis pour leur fidélité.
À mes professeurs
pour leurs efforts afin de nous assurer une formation
solide.

3
 Table de matières
Remerciements 2

Dédicaces 3

Introduction 7

Partie 1 : Présentation de l’entreprise : Mutuelle d’Assurances des Trans-

porteurs Unis (MATU) 9
1. Assurance et Mutuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Assurance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Mutuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2. Historique de la MATU assurance . . . . . . . . . . . . . . . . . . . . . 9
3. La MATU en chiffres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4. Les différents services de la MATU . . . . . . . . . . . . . . . . . . . . . 10

Partie 2 : Cahier des charges 13

1. Contexte et objet du projet . . . . . . . . . . . . . . . . . . . . . . . . . 13
Contexte du projet : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Périmètre du projet : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2. Analyse des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Besoins entreprise : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Besoins fonctionnels : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Besoins non fonctionnels : . . . . . . . . . . . . . . . . . . . . . . . . . 14

Partie 3 : Conception de l’application 16

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Les outils utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1. Spring Boot : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2. Spring Data : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3. Spring Security : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4. JWT : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5. React js : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
6. Reactstrap : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
7. jQuery : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
8. NW js : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
9. Axios : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
10. MySql : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
11. Laragon : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Les technologies utilisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1. Visual Studio Code : . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2. LucidChart : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
L’UML (Langage de Modélisation Unifié) . . . . . . . . . . . . . . . . . . 21
Diagramme de cas d’utilisation : . . . . . . . . . . . . . . . . . . . . . 22
Diagramme de classe : . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Diagramme de séquence : . . . . . . . . . . . . . . . . . . . . . . . . . 24

4
 3. Conclusion : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Partie 4 : Réalisation de l’application : 26

1. Introduction : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2. L’application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3. L’application Desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4. Conclusion : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Conclusion 39

Références 40

5
Table des figures
1 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . 22
2 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3 Diagramme de séquence . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4 L’accueil-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5 Le profil de l’administrateur-Web- . . . . . . . . . . . . . . . . . . . . . . . 27
6 L’authentification-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
7 Liste des clients-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
8 Modification d’un client-Web- . . . . . . . . . . . . . . . . . . . . . . . . . 28
9 Ajout d’un client-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
10 Liste des utilisateurs-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
11 Modification d’un utilisateur-Web- . . . . . . . . . . . . . . . . . . . . . . 30
12 Ajout d’un utilisateur-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . 30
13 Liste des assurances-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
14 Modification d’une assurance-Web- . . . . . . . . . . . . . . . . . . . . . . 31
15 Ajout d’une assurance-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . 32
16 L’accueil-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
17 Le profil de l’administrateur-Desktop- . . . . . . . . . . . . . . . . . . . . . 33
18 L’authentification-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . . . 33
19 Liste des clients-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
20 Modification d’un client-Desktop- . . . . . . . . . . . . . . . . . . . . . . . 34
21 Ajout d’un client-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
22 Liste des utilisateurs-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . . 35
23 Modification d’un utilisateur-Desktop- . . . . . . . . . . . . . . . . . . . . 36
24 Ajout d’un utilisateur-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . 36
25 Liste des assurances-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . . 37
26 Modification d’une assurance-Desktop- . . . . . . . . . . . . . . . . . . . . 37
27 Ajout d’une assurance-Desktop- . . . . . . . . . . . . . . . . . . . . . . . . 38

6
Introduction

Ayant atteindre la troisième année de licence en Informatique, un projet

de fin d’étude est demandé d’accomplir notre formation. Notre choix s’est
rapporté à concevoir et réaliser une application web en utilisant le spring
boot en backend et le react js en frontend.
Après de nombreuses recherches et demandes de stage, j’ai réussi à obte-
nir l’accord de la responsable du service informatique de l’entreprise. on est
amenée à réaliser une application web et desktop du système d’assurance.
Ce rapport contient 4 parties :

— La première partie : La présentation de l’entreprise MATU,

— La deuxième partie : Cahier des charges,
— La troisième partie : Conception de l’application,
— La quatrième partie : La réalisation de l’application.

Et on finit par une conclusion et l’ensembles des références où j’ai effectué

mes recherches.

7
 Partie 1 :
Présentation de l’entreprise : Mutuelle
d’Assurances des Transporteurs Unis
(MATU)

8
Partie 1 : Présentation de l’entreprise :
Mutuelle d’Assurances des Transporteurs
Unis (MATU)
1. Assurance et Mutuelle
Assurance
Une ASSURANCE est un organisme permettant à une personne appelée « l’assuré
» de bénéficier du secours et la gestion des risques assurables par « l’assureur » en cas
de survenance d’un sinistre. En souscrivant une assurance, vous transférez le coût d’une
perte potentielle à une compagnie d’assurance en échange d’une somme d’argent appelée
« prime » ou « cotisation » que l’assuré est tenu de verser selon les conditions et termes
du contrat.

Mutuelle
Un groupement son financement est solidaire : chaque membre apporte une cotisation,
permettant de financer une couverture sociale complémentaire à la Sécurité sociale, mais
aussi des actions de prévoyance, de solidarité et d’entraide.
2. Historique de la MATU assurance
La MATU a été créée par les professionnels du transport au début des années 80, afin
de répondre aux besoins en assurances de ce secteur vital pour l’économie marocaine.
Depuis sa création, la MATU a participé activement au développement du secteur
du transport, et de l’assurance automobile en particulier, en étant à l’écoute des profes-
sionnels, pour adapter au mieux nos solutions d’assurances à leurs besoins quotidiens.
Aujourd’hui, la MATU est fière de son statut d’expert en assurances automobile, parti-
culiers et flottes, capitalisant plus de 30 ans d’expérience aux services de tous les usagers
de la route.
Statut de mutuelle

L’objectif est la création de valeur, au profit de leurs clients et de la mutuelle ; le

but n’étant pas de dégager des bénéfices au profit des actionnaires, la richesse créée est
réinvestie pour offrir les meilleurs services au meilleur prix.
3. La MATU en chiffres
— + 500 MDHS
— + 250 Collaborateurs
— 2 Milliard de Dhs En actifs Financiers
— +120 Entreprises de transport
— 62 bureaux directs
— +100 Intermédiaires partenaires

9
4. Les différents services de la MATU
Direction générale :

La direction générale contient plusieurs sous services :

— PDG,
— Assistente DG,
— Conseillers DG,
— Achats inventaire DG.

Direction Développement réseau intermédiaires amp ; Atlantic :

Cette direction a 4 sous services :

— Animation réseau,
— Responsable régionaux,
— Souscription et Production RD,
— Assitance production commercial.

Direction Marketing et Communication :

Cette direction ne contient qu’un seul service qui s’en charge du marketing et commu-
nication générale avec les clients.
Direction financière :

La direction financière contient 6 sous groupes y compris :

— DAF,
— Comptabilité,
— Trésorerie,
— Recouvrement,
— Administratif Finance,
— Actuariat et contrôle de gestion.

Direction ressources humaines :

Le service ressources humaines contient 4 sous groupes :

— Bureau d’ordre RH,
— RH,
— Economat,
— Moyens généraux.

10
Direction système d’information :

Ce service est le service où j’ai effectué mon stage, il est divisé en 2 parties, la partie
développement, qui s’en charge de tout ce qui est programmation et développement des
applications internes et interfaces. La deuxième partie s’en charge de support, la supervi-
sion du réseau ...
Indemnisation :

L’indemnisation a 3 sous services :

— Administratif Corporel,
— Administratif Matériel,
— Administratif AT.

Indemnisation Matériel :

Ce service contient un sous service : Archive Matériel.

Direction RM, CI et Conformité :

— Audit,
— Controle interne,
— Risque management.

11
 Partie 2 :
Cahier des charges

12
Partie 2 : Cahier des charges
1. Contexte et objet du projet
Contexte du projet :

La MATU souhaite mettre en place une solution de la visualisation des Chiffre D’affaire
de ces clients. L’objectif est d’offrir aux responsables un outil de visualisation qui va leur
permettre de mieux suivre les assurances des clients.
Objectifs :
— Vision globale sur l’ensemble des assurances,
— Gain de temps dans l’élaboration des tableaux de bord,
— Accès à l’information en temps réel.

Périmètre du projet :

Il s’agit de mettre en place un système qui permet de :

— Générer des tableaux de bord de gestion des assurances à MATU : Trier, regrouper
ou répartir les données selon des critères définis.
— Gérer les utilisateurs qui peuvent accéder au contenu (Desktop et web).
— Gérer les clients de l’agence.
— Gérer les assurances.
— Mettre en place une gestion des droits d’accès.

2. Analyse des besoins

Besoins entreprise :

— Mesure de la performance de MATU dans le temps.

— Fluidité de circulation de l’information.
— Meilleure rapidité de recherche et pilotage de l’activité .
— Suivi en temps réel à l’aide de deux applications, desktop qui sera installer dans
les machines et autre web pour simplifier ce suivi.
— Augmentation de la qualité service.

Besoins fonctionnels :

Gestion des profils utilisateurs :

— Créer utilisateur : Le système devra créer et gérer des comptes utilisateurs protégés
par un login et mot de passe afin de contrôler l’accès au système. Elle devra attri-
buer des rôles limitant les tâches que l’utilisateur pourra effectuer dans le système
afin de garantir la qualité des données et de respecter les protocoles de gestion.

13
 — Modifier utilisateur : Le système devra permettre la modification des informations
d’un utilisateur.
— Supprimer utilisateur : Le système devra permettre la suppression d’un utilisateur
dans le cas où il n’est plus habilité à utiliser l’application.
Gestion des clients :
— Ajouter client : Le système devra permettre l’ajout d’un client.
— Modifier client : Le système devra permettre la modification des informations d’un
client.
— Supprimer client : Le système devra permettre la suppression d’un client.
Gestion des assurances :
— Ajouter assurance : Le système devra permettre l’ajout d’une assurance.
— Modifier assurance : Le système devra permettre la modification d’une assurance.
— Supprimer assurance : Le système devra permettre la suppression d’une assurance.

Besoins non fonctionnels :

Disponibilité : L’information devra être constamment disponible et accessible à tout

moment.
Sécurité : Le système devra respecter la confidentialité des données.
Ergonomie : Le système devra offrir une interface conviviale et facile à utiliser.
Performance : Le système devra être avant tout performant c’est à-dire à travers ses
fonctionnalités, elle devra répondre à toutes les exigences des utilisateurs d’une manière
optimale.
Paramétrage : Le système devra être modulaire et doit disposer d’un module de pa-
ramétrage sécurisé qui permet de personnaliser toutes reporting ou tableaux de bord à
mettre en place.

14
 Partie 3 :
Conception de l’application

15
Partie 3 : Conception de l’application
Introduction
Au cours de cette partie, j’ai présenté l’ensemble des outils et technologies utilisés pour
réaliser ce projet, passant à la solution UML pour tracer une vue globale du projet. Cette
partie est la base des parties suivantes concernant la réalisation de l’application.

Les outils utilisés

1. Spring Boot :

Spring Boot est un framework de développement JAVA. C’est une déclinaison du

framework classique de Spring qui permet essentiellement de réaliser des micro services
(ce sont la majeure partie du temps des services web qui sont regroupés en API).
Pour faire simple, Spring Boot est un framework de développement JAVA permettant la
création d’API web.

Avantages :
— Légèreté : Spring Boot a la particularité d’être très léger et d’embarquer avec lui
le strict minimum pour faire tourner votre service.
— Intégration facilitée : Spring Boot s’intègre particulièrement bien dans une archi-
tecture orientée micro services... et c’est l’un des seuls ! En effet, l’adoption des
architectures micro services au sein des organisations étant relativement récente, il
n’existait pas dans l’univers de JAVA de framework capable de créer des services
suffisamment légers et performants.
— Simplicité de prise en main : Spring Boot permet donc de créer une API de services
très simplement. Il suffit d’embarquer directement le serveur d’application dans un
seul et unique Jar qui est exécutable, par exemple, directement dans un service de
conteneur.
Les composants de Spring boot :
Chaque projet SpringBoot est composé de librairies dont notre projet a besoin... et de
rien d’autre. Ainsi, chaque projet Spring Boot embarque uniquement le strict nécessaire.
De manière générale, le framework propose en standard tout ce qui est nécessaire pour :
— Se connecter à toute base de données
— Sécuriser son API
— Créer des services web performants
— Distribuer la configuration entre les microservices
— etc..

16
2. Spring Data :

Spring Data est un projet Spring qui a pour objectif de simplifier l’interaction avec
différents systèmes de stockage de données : qu’il s’agisse d’une base de données rela-
tionnelle, d’une base de données NoSQL, d’un système Big Data ou encore d’une API
Web.
Le principe de Spring Data est d’éviter aux développeurs de coder les accès à ces
systèmes. Pour cela, Spring Data utilise une convention de nommage des méthodes d’accès
pour exprimer la requête à réaliser.

3. Spring Security :

Spring Security est un cadre d’authentification et de contrôle d’accès puissant et hau-

tement personnalisable. Il s’agit du standard de facto pour la sécurisation des applications
basées sur Spring.
Spring Security est un framework qui se concentre sur l’authentification et l’autori-
sation des applications Java. Comme tous les projets Spring, la véritable puissance de
Spring Security réside dans la facilité avec laquelle il peut être étendu pour répondre à
des besoins spécifiques.
Les fonctionnalités :
— Prise en charge complète et extensible de l’authentification et de l’autorisation.
— Protection contre les attaques telles que la fixation de session, le clickjacking, le
cross site request forgery, etc.
— Intégration facultative avec Spring Web MVC.
— etc.

17
4. JWT :

JWT (abréviation de JSON Web Token) est la normalisation manquante pour l’uti-
lisation de jetons pour l’authentification sur le web en général, et pas seulement pour
les services REST. Il est actuellement à l’état de projet sous la forme de la RFC 7519.
Il est robuste et peut transporter beaucoup d’informations, mais reste simple à utiliser
même si sa taille est relativement petite. Comme tout autre jeton, JWT peut être utilisé
pour transmettre l’identité d’utilisateurs authentifiés entre un fournisseur d’identité et
un fournisseur de services (qui ne sont pas nécessairement les mêmes systèmes). Il peut
également porter toutes les demandes de l’utilisateur, comme les données d’autorisation,
de sorte que le fournisseur de services n’a pas besoin d’aller dans la base de données ou
dans des systèmes externes pour vérifier les rôles et les autorisations de l’utilisateur pour
chaque demande ; ces données sont extraites du jeton.

5. React js :

React (aussi appelé React.js ou ReactJS) est une bibliothèque JavaScript libre déve-
loppée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la
création d’application web monopage, via la création de composants dépendant d’un état
et générant une page (ou portion) HTML à chaque changement d’état.
React est une bibliothèque qui ne gère que l’interface de l’application, considéré comme
la vue dans le modèle MVC. Elle peut ainsi être utilisée avec une autre bibliothèque ou
un framework MVC comme AngularJS. La bibliothèque se démarque de ses concurrents
par sa flexibilité et ses performances, en travaillant avec un DOM virtuel et en ne mettant
à jour le rendu dans le navigateur qu’en cas de nécessité2.
La bibliothèque est utilisée par Netflix3 (côté serveur uniquement depuis le 25 octobre
2017 pour gagner 50 % de performance4), Yahoo5, Airbnb6, Sony7, Atlassian8 ainsi que
par les équipes de Facebook, appliquant le dogfooding sur le réseau social éponyme, Ins-
tagram ou encore WhatsApp2. À la fin de 2015, WordPress.com annonce Gutenberg, une
interface pour les éditeurs de sites WordPress, développée en JavaScript avec Node.js et
React9,10.

18
6. Reactstrap :

Reactstrap est une bibliothèque compoent pour reactjs. Il fournit des composants
Bootstrap intégrés qui facilitent la création d’une interface utilisateur avec des composants
autonomes qui offrent une certaine flexibilité et des validations intégrées.

7. jQuery :

jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter
l’écriture de scripts côté client dans le code HTML des pages web. La première version
est lancée en janvier 2006 par John Resig.

8. NW js :

NW.js est un moteur d’application basé sur Chromium et node.js. On peut écrire des
applications natives en HTML et JavaScript avec NW.js. Il permet également d’appeler
des modules Node.js directement depuis le DOM et offre une nouvelle façon d’écrire des
applications natives avec toutes les technologies Web. Il a été créé au sein du centre
technologique Open Source d’Intel.

19
9. Axios :

Axios est une bibliothèque JavaScript fonctionnant comme un client HTTP. Elle per-
met de communiquer avec des API en utilisant des requêtes. Comme avec les autres clients
HTTP, il est possible de créer des requêtes avec la méthode POST.

10. MySql :

MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est

distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion
de base de données les plus utilisés au monde3, autant par le grand public (applications
web principalement) que par des professionnels, en concurrence avec Oracle, PostgreSQL
et Microsoft SQL Server. Son nom vient du prénom de la fille du cocréateur Michael
Widenius, My (sv). SQL fait référence au Structured Query Language, le langage de
requête utilisé.

11. Laragon :

Laragon est un environnement de développement web rapide, exible, intuitif, productif

et puissantqui d’adresse à tous.Laragon nous ore tout ce dont nous avons besoin pour créer
des applications web modernes.On peut avec faire fonctionner Apache et MySQL d’un
clic et déployer facilement des frameworksou CMS comme par exemple Laravel, Drupal
ou Wordpress.

20
Les technologies utilisées
1. Visual Studio Code :

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et macOS2.
Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la
syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git
intégré. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences
et installer des extensions qui ajoutent des fonctionnalités supplémentaires.

2. LucidChart :

Lucidchart est un espace de travail visuel qui combine la création de diagrammes, la

visualisation de données et la collaboration pour accélérer la compréhension et stimuler
l’innovation.

L’UML (Langage de Modélisation Unifié)

La réalisation d’un projet doit être impérativement précédée d’une méthodologie d’ana-
lyse et de conception qui a pour objectif de permettre de formaliser les étapes préliminaires
du développement, afin de rendre ce développement plus fidèle aux besoins. Les outils de
modélisation sont nombreux, j’ai choisi pour modéliser cette application le langage UML
qui est un langage de modélisation couramment utilisé dans tous projets logiciels. Le choix
d’UML vient pour plusieurs raisons dont :
— L’élaboration des modèles objet, indépendamment de tout langage de programma-
tion, l’UML permet donc de normaliser les concepts objet.
— UML est un support de communication performant : Il cadre l’analyse et facilite
la compréhension de représentations abstraites complexes.
— La structuration cohérente des fonctionnalités et des données.
Le langage UML ne se limite pas à de jolies images. S’il est utilisé correctement, l’UML
indique précisément comment le code doit être mis en œuvre à partir de diagrammes.
S’il est interprété avec précision, le code implémenté reflétera correctement l’intention du
concepteur. Une classe UML peut être impliquée dans une ou plusieurs relations avec
d’autres classes.

21
Diagramme de cas d’utilisation :

Le diagramme des cas d’utilisation (Use Case Diagram) constitue la première étape
del’analyse UML en :
— Modélisant les besoins des utilisateurs.
— Identifiant les grandes fonctionnalités et les limites du système.
— Représentant les interactions entre le système et ses utilisateurs.
Le diagramme des cas d’utilisation apporte une vision utilisateur et absolument pas une
vision informatique. Il ne nécessite aucun connaissance informatique et l’idéal serait qu’il
soit réalisé par le client.
Le diagramme des cas d’utilisation n’est pas un inventaire exhaustif de toutes les fonctions
du système. Il ne liste que des fonctions générales essentielles et principales sans rentrer
dans les détails.

Figure 1 – Diagramme de cas d’utilisation

22
Diagramme de classe :

Le diagramme de classes est considéré comme le plus important de la modélisation

orientée objet, il est le seul obligatoire lors d’une telle modélisation. Il permet de fournir
une représentation abstraite des objets du système qui vont interagir pour réaliser les cas
d’utilisation. Il est important de noter qu’un même objet peut très bien intervenir dans
la réalisation de plusieurs cas d’utilisation. Les cas d’utilisation ne réalisent donc pas une
partition(7) des classes du diagramme de classes. Un diagramme de classes n’est donc pas
adapté (sauf cas particulier) pour détailler, décomposer, ou illustrer la réalisation d’un
cas d’utilisation particulier.
Il s’agit d’une vue statique, car on ne tient pas compte du facteur temporel dans le
comportement du système. Le diagramme de classes modélise les concepts du domaine
d’application ainsi que les concepts internes créés de toutes pièces dans le cadre de l’implé-
mentation d’une application. Chaque langage de Programmation orienté objet donne un
moyen spécifique d’implémenter le paradigme objet (pointeurs ou pas, héritage multiple
ou pas, etc.), mais le diagramme de classes permet de modéliser les classes du système et
leurs relations indépendamment d’un langage de programmation particulier.
Les principaux éléments de cette vue statique sont les classes et leurs relations : as-
sociation, généralisation et plusieurs types de dépendances, telles que la réalisation et
l’utilisation.

Figure 2 – Diagramme de classe

23
Diagramme de séquence :

Les diagrammes de séquence sont une solution populaire de modélisation dynamique

en langage UML, car ils se concentrent plus précisément sur les lignes de vie, les processus
et les objets qui vivent simultanément, et les messages qu’ils échangent entre eux pour
exercer une fonction avant la fin de la ligne de vie. Parallèlement à notre outil de création
de diagrammes UML, utilisez ce guide pour tout savoir sur les diagrammes de séquence
en langage UML.

Figure 3 – Diagramme de séquence

3. Conclusion :
Cette partie a présenté les différents outils et technologies utilisés pour réaliser cette
application, ainsi que sa conception y compris les diagrammes de cas d’utilisation, sé-
quence et de classe.

24
 Partie 4 :
Réalisation de l’application

25
Partie 4 : Réalisation de l’application :
1. Introduction :
Cette partie contient les interfaces de l’application, les figures ci-dessous représentent
quelques captures d’écran de pages de l’application. L’accueil, puis le profil de l’adminis-
trateur, on s’authentifie pour qu’on puisse ajouter des clients, modifier et supprimer, la
même chose pour les utilisateurs mais on peut changer les rôles aussi.
2. L’application Web

Cette figure présente la page d’accueil.

Figure 4 – L’accueil-Web-

26
 Cette figure présente le profil de l’administrateur, l’ID, l’email, nom d’utilisateur, le
mot de passe et ses rôles.

Figure 5 – Le profil de l’administrateur-Web-

Pour s’authentifier, on saisie le nom d’utilisateur et le mot de passe, puis connecter.

Figure 6 – L’authentification-Web-

27
Dans cette figure, on affiche la liste des clients.

Figure 7 – Liste des clients-Web-

On peut modifier les informations d’un client comme la figure ci-dessous.

Figure 8 – Modification d’un client-Web-

28
On ajoute un client comme suit :

Figure 9 – Ajout d’un client-Web-

Dans cette figure, on affiche la liste des utilisateurs.

Figure 10 – Liste des utilisateurs-Web-

29
On peut modifier les informations d’un utilisateur comme la figure ci-dessous.

Figure 11 – Modification d’un utilisateur-Web-

On ajoute un utilisateur comme suit :

Figure 12 – Ajout d’un utilisateur-Web-

30
Dans cette figure, on affiche la liste des assurances.

Figure 13 – Liste des assurances-Web-

On peut modifier une assurance comme la figure ci-dessous.

Figure 14 – Modification d’une assurance-Web-

31
 On ajoute une assurance comme suit :

Figure 15 – Ajout d’une assurance-Web-

3. L’application Desktop
Cette figure présente la page d’accueil.

Figure 16 – L’accueil-Desktop-

32
 Cette figure présente le profil de l’administrateur, l’ID, l’email, nom d’utilisateur, le
mot de passe et ses rôles.

Figure 17 – Le profil de l’administrateur-Desktop-

Pour s’authentifier, on saisie le nom d’utilisateur et le mot de passe, puis connecter.

Figure 18 – L’authentification-Desktop-

33
Dans cette figure, on affiche la liste des clients.

Figure 19 – Liste des clients-Desktop-

On peut modifier les informations d’un client comme la figure ci-dessous.

Figure 20 – Modification d’un client-Desktop-

34
On ajoute un client comme suit :

Figure 21 – Ajout d’un client-Desktop-

Dans cette figure, on affiche la liste des utilisateurs.

Figure 22 – Liste des utilisateurs-Desktop-

35
On peut modifier les informations d’un utilisateur comme la figure ci-dessous.

Figure 23 – Modification d’un utilisateur-Desktop-

On ajoute un utilisateur comme suit :

Figure 24 – Ajout d’un utilisateur-Desktop-

36
Dans cette figure, on affiche la liste des assurances.

Figure 25 – Liste des assurances-Desktop-

On peut modifier une assurance comme la figure ci-dessous.

Figure 26 – Modification d’une assurance-Desktop-

37
 On ajoute une assurance comme suit :

Figure 27 – Ajout d’une assurance-Desktop-

4. Conclusion :
Cette partie avait pour but la présentation des différentes fonctionnalités de l’applica-
tion que ça soit au niveau du web ou le desktop.

38
Conclusion

Ce rapport a présenté le travail effectué au sein du service informatique

de la matu, j’ai été sensée de réaliser une application qui permet d’offrir aux
responsables un outil de visualisation qui va leur permettre de mieux suivre
les assurances des clients. l’application nous permet aussi l’ajout, la modifi-
cation et la suppression des clients, des utilisateurs .. et les visualiser. Ainsi
que la modification des rôles pour les utilisateurs.

Grâce à ce projet, on a développé beaucoup de nouvelles connaissances et

de savoir-faire dans le domaine de développement web. En plus de cela, on a
développé de nombreuses compétences pour résoudre les problèmes auxquels
on est confronté, quels qu’ils soient, en n’abandonnant jamais et en cherchant
des solutions partout.

Ce Projet était, pour moi, une opportunité pour savoir des nouvelles tech-
nologies dans le domaine du web comme spring boot et react js qu’on a jamais
étudié.

J’ai gardé un excellent souvenir de ce projet. C’était une très bonne ex-
périence valorisante et encourageante pour moi dans l’avenir.

39
Références

— https://reactjs.org/
— https://spring.io/projects/spring-boot
— https://jquery.com/
— https://lucid.app/users/loggedOut?rskn=true
— https://matu-assurance.ma/
— https://reactstrap.github.io/
— https://github.com/axios/axios
— https://jwt.io/
— https://nwjs.io/
— https://github.com/nwjs/nw.js/

40