Universit´e Mohammed V de Rabat

´
E cole Nationale Sup´erieure d’Informatique et
d’Analyse des Syst`emes

Projet Springboot
Fili`ere : G´enie
Logiciel

Application de gestion des

tˆaches : ”TODO LIST”

R´ealis´e par :
ALBEZ Ayyoub Encadr´es par :
MOFLIH Manal M. ELHAMLAOUI
MOUDAR Aicha Mahmoud
ZAGNOUNI Kaoutar

Ann´ee Universitaire : 2021-2022

 Remerciements

Nous souhaitons en tout premier lieu adresser nos vifs remer-

ciements `a `a toutes les personnes dont l’intervention, de pr`es
ou de loin au cours de ce projet, a favoris´e son aboutissement.

Nous tenons ensuite `a exprimer toute notre gratitude

envers notre encadrant M.ELHAMLAOUI Mahmoud pour sa
disponibilit´e et ses conseils judicieux qui nous ont permis de
mener ce projet `a terme.

Enfin, nous esp´erons que le pr´esent ´ecrit pr´esentera notre

travail d´ecemment, et que ce projet soit `a l’horizon des
attentes de nos professeurs.

ENSIAS 1 Ann´ee universitaire:

2021/2022
 R´esum´e :

Ce rapport est le fruit du travail que nous avons r´ealis´e dans le cadre de

notre projet spring a` l’ENSIAS intitul´e ≪ Application de gestion des tˆaches

≫ . Le sujet

de notre projet est un service qui permet a` l’utilisateur de g´erer les tˆaches qui

lui ont ´et´e affect´ees, en lui permettant de valider les tˆaches effectu´ees.

L’applica- tion doit permettre `a l’administrateur d’ajouter des employ´es et

leur affecter des tˆaches.Enfin la plateforme doit pr´esenter une interface de

login pour l’utilisateur qu’il soit administrateur ou employ´e.

Afin de mener a` bien notre mission, il s’est av´er´e indispensable

d’entamer le travail par une ´etude fonctionnelle permettant d’identifier la probl

´ematique, ainsi que les caract´eristiques du syst`eme `a d´evelopper. Puis, nous

avons opt´e pour une

´etude conceptuelle afin de mieux d´efinir le comportement de notre application ceci

a` travers les diagrammes UML. On a d´evelopp´e l’application `a l’aide de

Angular en Front-End et Spring Boot en back-end, avec MySQL pour la base de

donn´ees.

ENSIAS 2 Ann´ee universitaire:

2021/2022
 Abstract :

This report is the result of the work we carried out as part of our spring

project at ENSIAS entitled ”Task management application”. The subject of our

project is a service that allows the user to manage the tasks assigned to him,

allowing him to validate the tasks performed. The application must allow the ad-

ministrator to add employees and assign them tasks. Finally, the platform must

present a login interface for the user, whether he is an administrator or an em-

ployee.

In order to carry out our mission, it was essential to start the work with a func-

tional study to identify the problem, as well as the characteristics of the system

to be developed. Then, we opted for a conceptual study to better define the be-

havior of our application through UML diagrams. We developed the application

using Angular in Front-End and Spring Boot in back-end, with MySQL for the

database.

ENSIAS 3 Ann´ee universitaire:

2021/2022
Table de mati`eres

Remerciements 1

Table des figures 6

Introduction G´enerale 7

1 9

Introduction 10
1.1 Cahier des charges...................................................................................................................10
1.1.1 Contexte et d´efinition du probl`eme ......................................................................10
1.1.2 Solution........................................................................................................................10
1.1.3 Besoins fonctionnels....................................................................................................11
1.1.4 Besoins non fonctionnels............................................................................................11

2 14

Introduction 14
2.1 Analyse du besoin :.................................................................................................................15
2.1.1 Diagrammes de cas d’utilisation.................................................................................16
2.2 Diagrammes de s´equences ...................................................................................................16
2.2.1 Diagramme de s´equence : ajout d’un employ´e ...................................................17
2.2.2 Diagramme de s´equence : Modification d’une tˆache ..........................................18

Conclusion 18

3 20

Introduction 21
3.1 R´ealisation de l’application .................................................................................................24
3.1.1 Page de login...............................................................................................................24
3.1.2 Cot´e Admin : ............................................................................................................25

Ajouter un nouvel employ´e : .................................................................................25

TABLE DE MATIE` RES TABLE DE MATIE` RES
4
 3.1.3 Cot´e Employ´e : ......................................................................................................27
Visualiser la liste de ses tˆaches : ............................................................................27
Acc´eder au profil : ...................................................................................................27
3.2 Design pattern :.......................................................................................................................27
3.3 Design Pattern...................................................................................................................27
3.4 Les tests unitaires.............................................................................................................28
3.5 Les tests d’integration......................................................................................................29

Conclusion g´en´erale 30

5
Table des figures

2.1 Use Case............................................................................................................................16

2.2 Diagramme de s´equence pour l’ajout d’un employ´e .......................................................17
2.3 Diagramme de s´equence pour la modification d’une tˆache ............................................18

3.1 Logo Angular.....................................................................................................................21

3.2 Logo Spring Boot...............................................................................................................21
3.3 Logo MySQL................................................................................................................22
3.4 Logo Github................................................................................................................22
3.5 Logo Intellij.................................................................................................................22
3.6 Logo Postman....................................................................................................................23
3.7 page de login............................................................................................................................24
3.8 Home page...............................................................................................................................25
3.9 Ajout d’un employ´e ..............................................................................................................26
3.10 New task...................................................................................................................................26
3.11 D´etails des tˆaches ...............................................................................................................26
3.12 Liste des tˆaches ....................................................................................................................27
3.13 Profil employ´e .......................................................................................................................28
3.14 Se d´econnecter ......................................................................................................................28
3.15 Schema design pattern............................................................................................................29
3.16 Test....................................................................................................................................29
3.17 Design Pattern strategy....................................................................................................30
3.18 Les tests unitaires.............................................................................................................30
3.19 Create User..............................................................................................................................31
3.20 Liste des users..........................................................................................................................32
3.21 Liste des employees.................................................................................................................33
3.22 Suppression d’un employe......................................................................................................33
3.23 Suppression d’une tache.........................................................................................................34

6
TABLE DES FIGURES TABLE DES FIGURES

Introduction g´eneral
L’organisation du travail est le processus de d´efinition des actions dans

le but d’atteindre ses objectifs personnels et professionnels.

L’un des outil indispendable pour une bonne organisation est la To Do List,

que ce soit pour g´erer sa vie personnelle comme professionnelle, elle s’av`ere

efficace pour avoir une vision claire et suivre l’avancement de son travail ou encore

pour piloter un projet. Cela aide donc `a organiser le travail ,optimiser

l’effort et avoir une productivit´e et une rentabilit´e encore plus ´elev´ee.

En effet, au sein d’une entreprise, les employ´es doivent imp´erativement compl

´eter et effectuer les tˆaches qui leur ont ´et´e affect´ees, c’est pour r´epondre `a

ce besoin nous avons pens´e `a d´evelopper une application qui permet la gestion

des tˆaches.

D’une part, elle offre a` l’administrateur la possibilit´e de g´erer les employ´es ainsi

que de leur affecter des tˆaches. D’autre part elle permet aux employ´es d’avoir

une vision claire sur les tˆaches a` compl´eter ainsi que les valider une fois

effectu´ee.

Notre application a pour but d’une part de faciliter l’acc`es aux

informations et aux services que le clinique offre aux patients, elle accepte aussi

toute question venant du client, d’autres part la clinique utilise l’application pour

m´ediatiser son historiques, ses exploits et ses services qui la distingue aux autres

cliniques afin d’attirer le plus de patients possible.

ENSIAS 7 Ann´ee universitaire:

2021/2022
TABLE DES FIGURES TABLE DES FIGURES
Le pr´esent rapport, qui expose ce travail, est compos´e de trois

chapitres structur´es comme suit :

ENSIAS 8 Ann´ee universitaire:

2021/2022
TABLE DES FIGURES TABLE DES FIGURES

- Dans le premier chapitre, sera consacr´e au contexte g´en´erale du projet.

- Le deuxi`eme chapitre sera consacr´e a` l’analyse des besoins et `a la

concep- tion de notre projet.

- Dans le troisi`eme chapitre, on va d´ecrir l’environnement mat´eriel

et lo- giciel en donnant un aper¸cu sur les interfaces r´ealis´ees.

ENSIAS 9 Ann´ee universitaire:

2021/2022
Chapitre 1

Contexte g´en´eral du projet

1
0
1.1. CAHIER DES CHARGES CHAPITRE 1.

— Introduction
Le pr´esent chapitre permet d’identifier toutes les fonctionnalit´es de notre

appli- cation web pour chaque type d’utilisateur, et ceci en recensant les besoins

fonc- tionnels et d’appr´ehender la liste des exigences traduites par les besoins

non fonc- tionnels.

1.1 Cahier des charges

1.1.1 Contexte et d´efinition du probl`eme

La gestion des tˆaches d’av`ere indispensable pour une bonne

organisation au sein d’une entreprise. Cependant, effectuer des tˆaches sans

avoir une ”todo list” est un travail al´eatoire et pas professionnel, et va

certainement diminuer la productivit´e des employ´es.

1.1.2 Solution

La solution sera une application web que nous allons concevoir pour la

gestion des tˆaches, qui va permettre d’affecter des tˆaches aux employ´es, de

les visualiser et de les valider quand ils l’auront effectu´e.

ENSIAS 11 Ann´ee universitaire:

2021/2022
1.1. CAHIER DES CHARGES CHAPITRE 1.

1.1.3 Besoins fonctionnels

Deux types d’utilisateurs de la plateforme se distinguent :

L’administrateur a la possibilit´e de :

· S’authentifier.
· Ajouter un employ´e.
· Acc´eder a` son profil et modifier les informations.
· Affecter une tache a` un employ´e.
· Modifier les d´etails d’une tˆaches.
· Visualiser la liste des tˆaches de tous les employ
´es. L’employ´e a la possibilit´e de :
· S’authentifier.
· Acc´eder a` son profil et modifier les informations.
· Visualiser la liste des tˆaches qui lui ont ´et´e affect´ees.
· Valider les tˆaches effectu´ees.

1.1.4 Besoins non fonctionnels

Les besoins non fonctionnels d´ecrivent toutes les contraintes techniques,

er- gonomiques et esth´etiques auxquelles est soumis le syst`eme pour sa r

´ealisation et pour son bon fonctionnement. En ce qui concerne notre projet, nous

avons d´egag´e les besoins suivants :

• La disponibilit´e : La plateforme doit ˆetre disponible pour ˆetre utilis´e par

les employ´es.

ENSIAS 12 Ann´ee universitaire:

2021/2022
1.1. CAHIER DES CHARGES CHAPITRE 1.

• La s´ecurit´e de l’acc`es a` l’application : Nous devons prendre en consid

´eration le crit`ere de la confidentialit´e, pour cela, l’administrateur, seul, qui
peut cr´eer des

comptes pour les employ´es afin d’acc´eder `a notre plateforme.

• La convivialit´e de l’interface graphique : La plateforme doit fournir

une interface conviviale et simple pour les utilisateurs , et par le biais de celle-ci

on d´ecouvrira ses fonctionnalit´es.

• La fiabilit´e : Les donn´ees fournies par l’application doivent ˆetre fiables. La
possibilit´e de retourner au page d’accueil de la plateforme a` partir de n’importe

quelle page de celle- ci.

• La performance : Le syst`eme doit r´eagir dans un d´elai pr´ecis, quel que
soit l’action de l’utilisateur.

ENSIAS 13 Ann´ee universitaire:

2021/2022
1.1. CAHIER DES CHARGES CHAPITRE 1.

Conclusion
Ce chapitre a ´et´e le point de d´epart pour l’´elaboration du projet, dans la

mesure ouˆ il d´ecrivait l’objectif g´en´eral a` atteindre,et le cahier de charge de

notre projet .

ENSIAS 14 Ann´ee universitaire:

2021/2022
Chapitre 2

Analyse et Conception

15
2.1. ANALYSE DU BESOIN : CHAPITRE 2.

Il est temps de s’attarder sur le cahier de charges pour ´etudier le besoin.

Pour cela, nous nous sommes appuy´es sur diff´erents outils de l’analyse

fonctionnelle que nous d´etaillerons au cours du chapitre.

2.1 Analyse du besoin :

Afin de cerner le besoin et de recenser les diff´erentes fonctions, il est

judi- cieux d’avoir recours a` l’analyse fonctionnelle via l’exploitation des diff

´erents dia- grammes UML (en l’occurence, le diagramme cas d’utilisation et

les diagramme de s´equence...).

ENSIAS 16 Ann´ee universitaire:

2021/2022
2.2. DIAGRAMMES DE SE CHAPITRE 2.
´ QUENCES

2.1.1 Diagrammes de cas d’utilisation

Nous avons illustr´e les fonctions de service, dont le rˆole est de repr´esenter

ce qui est attendu de l’application pour r´epondre aux besoins, a` travers les dia-

grammes cas d’utilisation suivants :

FIGURE 2.1 – Use Case

2.2 Diagrammes de s´equences

Les diagrammes de s´equences sont la repr´esentation graphique des interactions entre les ac-
teurs et le syst`eme selon un ordre chronologique. La dimension verticale du diagramme repr´esente

ENSIAS 17 Ann´ee universitaire:

2021/2022
2.2. DIAGRAMMES DE SE CHAPITRE 2.
´ QUENCES

le temps, permettant de visualiser l’enchaˆınement des actions dans le temps, et de sp´ecifier la

nais- sance et la mort d’objets. Les p´eriodes d’activit´e des objets sont symbolis´ees par des
rectangles, et ces objets dialoguent `a l’aide des messages.

2.2.1 Diagramme de s´equence : ajout d’un employ´e

Ce diagramme de s´equences pr´esente la proc´edure de l’ajout d’un nouvel employ´e par l’ad-
ministrateur.

FIGURE 2.2 – Diagramme de s´equence pour l’ajout d’un employ´e

ENSIAS 18 Ann´ee universitaire:

2021/2022
2.2. DIAGRAMMES DE SE CHAPITRE 2.
´ QUENCES

2.2.2 Diagramme de s´equence : Modification d’une tˆache :

Ce diagramme de s´equences pr´esente la proc´edure de la modification des d´etails d’une

tˆache par l’administrateur.

FIGURE 2.3 – Diagramme de s´equence pour la modification d’une tˆache

ENSIAS 19 Ann´ee universitaire:

2021/2022
2.2. DIAGRAMMES DE SE CHAPITRE 2.
´ QUENCES

Conclusion
Maintenant apr`es avoir eu une bonne id´ee a` propos de la d´emarche analytique du projet, la
r´ealisation maintenant devra ˆetre notre prochaine tˆache `a faire avec beaucoup de
crit`eres qui doivent ˆetre pr´esents lors de la cr´eation que nous verrons apr`es. Dans le
chapitre suivant nous allons aborder la derni`ere partie qui repr´esente la partie r´ealisation
de notre application web, en se basant sur les m´ecanismes et les solutions d´etermin´es dans la
phase de conception.

ENSIAS 20 Ann´ee universitaire:

2021/2022
Chapitre 3

R´ealisation

21
 CHAPITRE 3.

L’intersection entre plusieurs technologies web en rapport a permis d’engendrer le rendu

final de ce projet. En effet, nous avons choisi de travailler avec Angular en Front-End, Spring Boot
en back-end, avec MySQL pour la base de donn´ees.

FIGURE 3.1 – Logo Angular

FIGURE 3.2 – Logo Spring Boot

ENSIAS 22 Ann´ee universitaire:

2021/2022
 CHAPITRE 3.

FIGURE 3.3 – Logo MySQL

Nous avons opt´e pour l’IDE Intellij, et de l’outil GitHub pour g´erer la collaboration et le d
´eveloppement de l’application.

FIGURE 3.4 – Logo Github

FIGURE 3.5 – Logo Intellij

ENSIAS 23 Ann´ee universitaire:

2021/2022
 CHAPITRE 3.

Pour effectuer les tests sur la base de donn´ees, nous avons utilis´e postman :

FIGURE 3.6 – Logo Postman

ENSIAS 24 Ann´ee universitaire:

2021/2022
3.1. RE´ ALISATION DE CHAPITRE 3.
L’APPLICATION
3.1 R´ealisation de l’application

3.1.1 Page de login

Chaque utilisateur (qu’il soit administrateur ou employ´e) doit passer par l’´etape de l’au-
thentification avant d’acc´eder a` la page d’accueil.

FIGURE 3.7 – page de login

ENSIAS 25 Ann´ee universitaire:

2021/2022
3.1. RE´ ALISATION DE CHAPITRE 3.
L’APPLICATION
3.1.2 Cot´e Admin :

La liste des employ´es avec le nombre des tˆaches qui lui sont affect´ees.

FIGURE 3.8 – Home page

Ajouter un nouvel employ´e :

L’administrateur doit cr´eer un compte pour un employ´e pour qu’il puisse se connecter `a
l’application.
L’adminitrateur peut affecter une nouvelle tˆache a` un employ´e

ENSIAS 26 Ann´ee universitaire:

2021/2022
3.1. RE´ ALISATION DE CHAPITRE 3.
L’APPLICATION

FIGURE 3.9 – Ajout d’un employ´e

FIGURE 3.10 – New task

L’adminitrateur peut acc´eder aux d´etails de la tˆache d’un employ

´e.

FIGURE 3.11 – D´etails des tˆaches

ENSIAS 27 Ann´ee universitaire:

2021/2022
3.2. DESIGN PATTERN : CHAPITRE 3.

3.1.3 Cot´e Employ´e :

Visualiser la liste de ses tˆaches :

Un employ´e visualise la liste des tˆaches qui lui sont affect´ees.

FIGURE 3.12 – Liste des tˆaches

Acc´eder au profil :

Un employ´e peut acc´eder a` son profil et modifier ses informations.

3.2 Design pattern :

3.3 Design Pattern

Le patron de conception strat´egie vous propose de prendre une classe dot´ee d’un
compor- tement sp´ecifique mais qui l’ex´ecute de diff´erentes fa¸cons, et de d´ecomposer ses

ENSIAS 28 Ann´ee universitaire:

2021/2022
3.2. DESIGN PATTERN : CHAPITRE 3.
algorithmes en classes s´epar´ees appel´ees strat´egies.
La classe originale (le contexte) doit avoir un attribut qui garde une r´ef´erence vers une
des strat´egies.

ENSIAS 29 Ann´ee universitaire:

2021/2022
3.4. LES TESTS UNITAIRES CHAPITRE 3.

FIGURE 3.14 – Se d´econnecter

On a implementer un patron strategy qui permet la sauvegarde des emails dans les tables
Employe et User en se basant sur un contexte de type string qui va specifier la table.

3.4 Les tests unitaires

Selon la structure du code on a essaye d’implementer des tests selon le type de composant
teste(Controller, Model, Repository, Service).

ENSIAS 30 Ann´ee universitaire:

2021/2022
3.5. LES TESTS D’INTEGRATION CHAPITRE 3.

FIGURE 3.15 – Schema design pattern

FIGURE 3.16 – Test

3.5 Les tests d’integration

Conclusion
Dans ce chapitre, nous avons ´etay´e la r´ealisation de notre application, en commen¸cant
par les technologies utilis´ees dans la mise en œuvre de cette application. Ensuite nous avons pr
´esent´e des captures d’´ecran illustrant le rendu final de ce projet, sans oublier les tests.

ENSIAS 31 Ann´ee universitaire:

2021/2022
 Conclusion g´en
´erale

FIGURE 3.17 – Design Pattern strategy

FIGURE 3.18 – Les tests unitaires

Conclusion g´en´erale
On a pr´esent´e dans ce rapport toutes les ´etapes n´ecessaires pour

l’analyse, la conception et le d´eveloppement qu’on a opt´e pour r´ealiser

notre application web ”TODO List” pour la gestion des tˆaches dans une

ENSIAS 32 Ann´ee universitaire:

2021/2022
 Conclusion g´en
entreprise, qui propose une ´erale

ENSIAS 33 Ann´ee universitaire:

2021/2022
 Conclusion g´en
´erale

FIGURE 3.19 – Create User

vision claire pour une bonne organisation des tˆaches affect´ees au sein d’un
projet.

L’´elaboration de la plateforme nous a permis de nous confronter a` une

exp´erience quasi-professionnelle dans le domaine du d´eveloppement des

appli- cations que nous ne puissions qualifier que d’enrichissante. En outre, elle

nous a offerte de l’opportunit´e de concr´etiser nos connaissances th´eoriques

`a l’aide d’un cas r´eel. Ainsi, ce projet nous a apport´e le plus concernant

les langages de pro- grammations et les plateformes qu’on a d´ecouvertes et

pratiqu´es. En outre, on a appris `a communiquer, travailler en groupe, a` r

´epartir les tˆaches et a` respecter les d´elais pr´evus. A titre g´en´eral, ce

ENSIAS 34 Ann´ee universitaire:
2021/2022
 Conclusion g´en
projet a constitu´e une exp´erience professionnelle ´erale

ENSIAS 35 Ann´ee universitaire:

2021/2022
 Conclusion g´en
´erale

FIGURE 3.20 – Liste des users

exceptionnelle.

Cependant, nous pouvons dire que notre application est toujours a` la port´ee d’am

´eliorations et d’enrichissements par certaines techniques et fonctionnalit´es.

ENSIAS 36 Ann´ee universitaire:

2021/2022
 Conclusion g´en
´erale

FIGURE 3.21 – Liste des employees

FIGURE 3.22 – Suppression d’un employe

ENSIAS 37 Ann´ee universitaire:

2021/2022
 Conclusion g´en
´erale

FIGURE 3.23 – Suppression d’une tache

Webographie
[1] Lien : https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/
.
[2] Lien : https://www.youtube.com/watch?v=zTkKgKP6oDE&list=PL41m5U3u3wwkIXH6SeAZSKmdp3x
index=20 .
[3] Lien : https://angular.io/guide/lifecycle-hooks.
[4]Team, B. (n.d.). Bootstrap. Lien : www.getbootstrap.com
[5]Cours en ligne openclassrooms Springboot Lien :
https://openclassrooms.com/fr/courses/6900101-creez-une-application-java-avec-spring-boot

ENSIAS 38 Ann´ee universitaire:

2021/2022