MINISTERE DE L’ENSEIGNEMENT SUPERIEUR

ET DE LA RECHERCHE SCIENTIFIQUE
UNIVERSITE DE MONASTIR

INSTITUT SUPERIEUR D'INFORMATIQUE ET DE MATHEMATIQUES DE MONASTIR

Département informatique

MEMOIRE DE STAGE FIN D’ETUDES

Présenté en vue de l’obtention du diplôme de master

professionnelle en génie logiciel

Conception et développement d’une application web

et mobile « GetTraining »

Élaboré par : Sous la direction de :

Saad Yosra Mr. MALLAT Souhail ISIMM
Mr. ANGOUD Houssem ItGate

Année Universitaire 2019 / 2020

 DEDICACES

Je dédie ce modeste travail :

A mes très chers parents pour leur soutien, les sacrifices et

tous les efforts consentis pour mon éducation et ma
formation. Je tiens à vous témoigner ma reconnaissance,
mon amour et mon affection.

A mon fiancé, à qui je dois une grande part de la réussite de mon

projet grâce a son soutien et à sa compréhension et à qui je
souhaite tout le bonheur du monde.

Une pensée aux membres de ma grande famille, à mes chers amis

Et à tous ceux que j’aime et ceux qui m’aiment.

Yosra

2
 REMERCIMENTS

J’exprime mes vifs remerciements à tous les personnes qui ont

contribué au succès de mon stage qui m’ont aidé lors de la rédaction

de c rapport.

Mes remerciements vont particulièrement :

A M MALLAT Souhail, mon encadreur pédagogique à L’ISIMM. Son

écoute et ses conseils précieux dans les moments les plus délicates m’a

permis de cibler mes objectifs.

A M ANGOUD Houssem, mon maitre de stage au sein de ItGate

Groupe pour son accueil, le temps alloué et le partage de son expertise

au quotidien .Ainsi que son aide inestimable lors de cette période.

Aux membres du jury, pour l’honneur qu’ils m’ont donnés en

acceptant de juger mon travail.

Nous remercions par même occasion tous les enseignantes d’ISIMM

qui on consolidé ma formations tout le long de mes études qui m’a

beaucoup soutenu.

3
Résumé
Ce travail est élaboré dans le cadre de l‟obtention du Diplôme de mastère professionnel en
génie logiciel, organisé par l‟institut supérieur d‟informatique et mathématique de Monastir. Il
a été développé au sein de la société ITGATE.

L‟objectif principal de ce projet est de concevoir, développer et mettre en place une

application web et mobile facilite la recherche du stage intitulé « GetTraining » .qui serait
mise au service des candidats à la recherche des offres de stage ou des formations et des
sociétés et centres de formation à la recherche des stagiaires.

Cette application aiderait d‟une part la société ou bien le centre de formation à faire le bon
choix pour ces offres de stage et ces annonces de formation et d‟autre part les candidats pour
trouver l‟offre ou la formation qui correspond le mieux à leurs profils.

Mots clés: Angular 7, MySql, UML, Spring boot, Ionic 4

Abstract
This work is performed to obtain the diploma of The Proffesional Master in Software
Engineering, set by The High Institute of Mathematics and Computer Science in Monastir. It
was developed within the ITGATE Company.

The main objective of this project is to design, develop and implement a web and mobile
application that facilitates the search for the course entitled “GetTraining”.

This application would help the company or the training centre to make the right choice for
these internship offers and training announcements, and on the other hand the candidates to
find the offer or training that suits best their profiles.

Keywords: Angular 7, MySql, UML, Spring boot, Ionic 4

4
 Table des matières
Résumé ................................................................................................................................... 4
Introduction générale ................................................................................................... 12
Chapitre 1 : Présentation générale et étude préliminaire ........................... 14
1. Introduction ............................................................................................................................. 15
2. Présentation de projet............................................................................................................. 15
2.1. Cadre de projet ........................................................................................................ 15
2.2. Présentation de l’organisme d’accueil ...................................................................... 15
2.3. Présentation de l’entreprise ..................................................................................... 15
2.4. Activités et organigramme : ..................................................................................... 15
2.5. Coordonnées ........................................................................................................... 16
3. Contexte et motivation de travail : ......................................................................................... 16
4. problématiques........................................................................................................................ 17
4.1. Etude et analyse de l’existant : ............................................................................... 17
4.2. Description de l’existant : ....................................................................................... 17
4.2.1. Tanitjobs ......................................................................................................... 17
4.2.2. Stage-Tunisie .................................................................................................. 18
4.2.3. jobi.tn ............................................................................................................. 19
4.3. Etude comparative .................................................................................................. 20
4.4. Critique de l’existant .............................................................................................. 21
4.5. Solution proposé ..................................................................................................... 22
5. Objectifs .................................................................................................................................. 22
6. Les méthodologies de développement .................................................................................. 22
6.1. Les méthodes classiques .......................................................................................... 22
6.1.1. Modèle en cascade ........................................................................................ 23
6.1.2. Modèle en spirale : ........................................................................................ 23
6.1.3. Modèle en V : ................................................................................................. 24
6.2. Les méthodes agiles ................................................................................................. 25
6.3. Le processus Unifié(UP) ............................................................................................ 25
7. Méthode de travail adopté ..................................................................................................... 26
7.1. La branche gauche (fonctionnelle) : .......................................................................... 27
7.2. La branche droite (architecture technique) : ............................................................. 28
7.3. La branche commune : ............................................................................................. 28

5
 8. Planification de projet ............................................................................................................ 28
9. Conclusion ............................................................................................................................... 29

Chapitre 2 : Analyse et Spécification des besoins ............................................ 30

1. Introduction ............................................................................................................................. 31
2. Etude préliminaire ................................................................................................................... 31
3. Capture de besoins fonctionnels ............................................................................................. 31
3.1. Identification des acteurs ......................................................................................... 32
3.2. Besoins fonctionnels ................................................................................................ 32
4. Spécification semi-formelle des besoins................................................................................. 33
4.1. Langage de modélisation : ........................................................................................ 33
4.2. Diagramme de cas d’utilisations ............................................................................... 34
4.2.1 Diagramme de cas d’utilisation général ........................................................ 34
4.2.2 Spécification et raffinement des cas d’utilisation ........................................ 37
5. Diagramme des séquences ...................................................................................................... 44
6. Besoins non fonctionnels ........................................................................................................ 45
7. Architecture de sécurité .......................................................................................................... 45
7.1. L’intérêt de développer d’une API pour un site web : ................................................ 45
8. Les différentes architectures d’API : ....................................................................................... 46
8.1. Architecture d’API SOAP :......................................................................................... 46
8.2. Architecture d’API REST :.......................................................................................... 46
9. L’architecture d’API adoptée :................................................................................................. 46
10. Sécurisation d’Api Restful :................................................................................................... 47
10.1. Plateforme Spring Security : ..................................................................................... 47
10.2. Protocole d’authentification JWT :............................................................................ 47
11. Capture des besoins techniques........................................................................................... 50
11.1. Angular 7 : ............................................................................................................... 51
11.2. MySql : .................................................................................................................... 52
12. Conclusion ............................................................................................................................. 53

Chapitre 3 : Architecture et conception détaillée de système.................... 54

1. Introduction ............................................................................................................................. 55
2. Conception architecturale de notre application..................................................................... 55
2.1. Les Modelés architecturaux ...................................................................................... 55
2.1.1. Architecture 1-tiers (simple tiers) ................................................................. 55
2.1.2. Architecture 2-tiers ........................................................................................ 55

6
 2.1.3. Architecture 3-tiers ........................................................................................ 56
2.2. L’architecture applicative ......................................................................................... 57
2.3. L’architecture technique .......................................................................................... 57
2.3.1. Choix d’architecture ....................................................................................... 57
2.3.2. L’architecture de conception adoptée .......................................................... 58
3. Conception logiciel détaillée ................................................................................................... 66
3.1. Vue dynamique ........................................................................................................ 66
3.1.1. Diagramme d’activité..................................................................................... 66
3.2. Vue statique ............................................................................................................ 76
4. Conception de la base de données ......................................................................................... 78
4.1. Modèle conceptuel de donnée (MCD)....................................................................... 78
4.2. Modèle physique de données (MPD) ........................................................................ 80
5. Conception graphique ............................................................................................................. 82
5.1. Diagramme de navigation ........................................................................................ 82
6. Croquis de plateforme de notre application .......................................................................... 83
6.1. Partie admin ............................................................................................................ 83
6.2. Partie utilisateurs (Web) .......................................................................................... 84
6.3. Partie utilisateur (Mobile) ........................................................................................ 85
6.4. Interface édite profile (partie Mobile) ...................................................................... 86
7. Conclusion ................................................................................................................................ 86

Chapitre 4 : Réalisation................................................................................................ 87
1. Introduction ............................................................................................................................. 88
2. Environnement et outils de travails ........................................................................................ 88
2.1. Environnement matériel .......................................................................................... 88
2.2. Environnement logiciel............................................................................................. 88
2.2.1. Outils de conception ...................................................................................... 88
2.2.2. Outils de développement .............................................................................. 89
3. Plateformes de développement utilisé pour l’application Web ............................................ 91
3.1. Angular 7 ................................................................................................................. 91
3.2. SpringBoot ............................................................................................................... 93
3.3. Spring Security ......................................................................................................... 94
4. Plateformes de développement utilisées pour l’application mobile .................................... 94
4.1. Ionic et cordova ....................................................................................................... 94
4.2. Android SDK ............................................................................................................ 95

7
 5. Travail réalisé ........................................................................................................................... 95
5.1. Application Web côté Administrateur ....................................................................... 95
5.1.1. Interface « Accueil » ...................................................................................... 95
5.1.2. Interface « Gestion des Secteurs » ................................................................ 95
5.1.3. Interface « Gérer les sociétés » ..................................................................... 96
5.2. Application Web côté Client ..................................................................................... 96
5.2.1. Interface « Page D’accueil » .......................................................................... 96
5.2.2. Interface « Authentification » ....................................................................... 97
5.2.3. Interface « Détails Offre de stage » ............................................................. 99
5.2.4. Interface « Espace société » ........................................................................ 101
5.2.5. Interface « Publier une offre de stage » ..................................................... 102
5.3. Application Mobile..................................................................................................103
5.3.1. Interface « Page d’accueil » ......................................................................... 103
5.3.2. Interface « Authentification » .................................................................... 104
5.3.3. Interface « Editer Profil »............................................................................. 105
5.3.4. Interface « Détaille offre de stage »............................................................ 106
5.3.5. Interface « liste sociétés » ........................................................................... 108
5.3.6. Interface « Publier une offre de stage » .................................................... 110
6. Conclusion .............................................................................................................................. 110

Conclusion et perspectives......................................................................................... 111

Bibliographie ................................................................................................................... 112

8
 Table des figures

Figure 1:Logo société d’accueil "ITGate"................................................................................. 15

Figure 2: Organigramme de la société ..................................................................................... 16
Figure 3 : Capture de site Tanitjobs -interface d’accueil.......................................................... 18
Figure 4 : Capture de site Stage.tn -interface d’accueil ........................................................... 19
Figure 5 : Capture de site Jobi.tn - interface d’accueil ........................................................... 20
Figure 6 : Modèle en cascade .................................................................................................. 23
Figure 7 : Modèle en Spirale .................................................................................................... 24
Figure 8 : Modèle en Modèle en V ........................................................................................... 24
Figure 9 : Cycle de vie 2TUP ..................................................................................................... 27
Figure 10 : Diagramme de Gantt .............................................................................................. 29
Figure 11 : L’étude préliminaire dans 2TUP ............................................................................ 31
Figure 12 : Logo de Visual paradigme for UML ........................................................................ 34
Figure 13 : Diagramme de cas d’utilisation général ................................................................ 36
Figure 14 : Diagramme de cas d’utilisation « Gérer les offres de stages » .............................. 38
Figure 15: Diagramme de cas d’utilisation « Gérer Utilisateurs ». .......................................... 41
Figure 16 : Diagramme de séquence « Authentification»...................................................... 44
Figure 17: Model de communication d’API SOAP .................................................................... 46
Figure 18 : Mode de communication d’API REST ..................................................................... 46
Figure 19 : Utilisation du JWT lors des échanges client-serveur. ............................................ 48
Figure 20 : Représentation de structure Web-JWT.................................................................. 49
Figure 21 : Représentation du jeton JWT de manière codée et décodée. .............................. 50
Figure 22 : Situation de la capture des besoins techniques dans 2TUP. ................................. 51
Figure 23: Le taux de croissance et de développement des framework JavaScript ................ 52
Figure 24 : Le taux de croissance d’utilisation de BDD DQL ..................................................... 53
Figure 25 : Architecture 1-tiers. ............................................................................................... 55
Figure 26 : Architecture 2-tiers. ............................................................................................... 56
Figure 27 : Architecture 3-tiers. ............................................................................................... 56
Figure 28 : Architecture 3-tiers. ............................................................................................... 57
Figure 29 : Architecture technique. ......................................................................................... 58
Figure 30 : L’architecture de conception MVC. ........................................................................ 59
Figure 31 : Les interfaces de la couche DAO. ........................................................................... 60
Figure 32 : Les classes de la couche Contrôleur. ...................................................................... 61
Figure 33 : Les composants de la partie Vue............................................................................ 62
Figure 34 : Représentations des services. ................................................................................ 62
Figure 35 : Architecture MVVM. .............................................................................................. 63
Figure 36 : L’architecture MVVM dans le projet «View – ViewModel »................................. 64
Figure 37: L’architecture MVVM dans le projet «Model ». .................................................... 64
Figure 38 : Chargement des modules dans « app-routing.modules.ts ». ................................ 65
Figure 39 : Architecture SOA. ................................................................................................... 66
Figure 40 : L’utilisation des services. ........................................................................................ 66
Figure 41 : Diagramme d’activité « Inscription ». .................................................................... 68
Figure 42 : Diagramme d’activité « Modifier une offre de stage ». ......................................... 69
Figure 43 : Diagramme de séquence « authentification ». ...................................................... 71

9
Figure 44 : Diagramme de séquence « postuler pour une offre ». .......................................... 73
Figure 45 : Diagramme de séquence « ajouter une offre de stage ». ..................................... 75
Figure 46 : Diagramme de Classe. ............................................................................................ 77
Figure 47 : Modèle Conceptuel de Données. ........................................................................... 79
Figure 48 : Modèle Physique de Donnée. ................................................................................ 81
Figure 49 : Diagramme de navigation. ..................................................................................... 83
Figure 50 : Interface pour l'admin. ........................................................................................... 84
Figure 51: Interface pour les utilisateurs (partie web) ............................................................ 84
Figure 52: Interface pour les utilisateurs (partie Mobile) ........................................................ 85
Figure 53 : Interface édite profile (partie Mobile) ................................................................... 86
Figure 54 : Architecture globale d’Angular [14]. ...................................................................... 91
Figure 55 : Capture d’écran du module AppModule. .............................................................. 92
Figure 56 : Capture d’écran du composant AppComponent. .................................................. 92
Figure 57 : Capture d’écran du service CandidatService. ........................................................ 93
Figure 58 : Arborescence du notre projet Spring Boot. ........................................................... 93
Figure 59 : Données sous format JSON. ................................................................................... 94
Figure 60 : Cryptage de Mot de passe...................................................................................... 94
Figure 61 : Logo Ionic. .............................................................................................................. 94
Figure 62 : Logo Android SDK. .................................................................................................. 95
Figure 63 : Interface « Accueil ». .............................................................................................. 95
Figure 64 : Interface « Gestion des Secteurs »......................................................................... 96
Figure 65 : Interface « Gérer les sociétés » .............................................................................. 96
Figure 66 : Interface « Page D’accueil ». .................................................................................. 97
Figure 67 : Interface « Inscription ». ........................................................................................ 98
Figure 68: Interface «Login». ................................................................................................... 98
Figure 69 : Alerte de contrôle des champs. ............................................................................. 99
Figure 70 : Interface «Détaille offre de stage». ..................................................................... 100
Figure 71 : Interface «Détaille offre de stage» après l’authentification. ............................... 101
Figure 72 : Interface «Postuler». ............................................................................................ 101
Figure 73 : Interface «Espace Entreprise». ............................................................................ 102
Figure 74 : Interface «Les demandes des stage». .................................................................. 102
Figure 75 : Interface « publier une offre de stage ».............................................................. 103
Figure 76 : Interface « Page d’accueil ». ................................................................................ 104
Figure 77 : Interface « Authentification ». ............................................................................ 105
Figure 78 : Interface « Editer Profil ». .................................................................................... 106
Figure 79 : Interface « Détaille offre de stage »..................................................................... 107
Figure 80 : Interface «Menu » ................................................................................................ 108
Figure 81 : Interface « liste sociétés ». ................................................................................... 109
Figure 82 : Interface « Centre de formation ». ...................................................................... 109
Figure 83: Interface « Publier une offre de stage ». ............................................................. 110

10
 Liste de Tableaux
Tableau 1 : comparaison fonctionnelle entre les solutions existantes ......... Erreur ! Signet non
défini.
Tableau 2: Tableau représentant les implémentations du processus Unifie -RUP et 2TUP
............................................................................................................Erreur ! Signet non défini.
Tableau 3 : Liste des principaux acteurs ...........................................Erreur ! Signet non défini.
Tableau 4: Description du cas d’utilisation « S’authentifier » ................................................. 37
Tableau 5 : Description du cas d’utilisation « Gérer les offres de stages » ............................. 38
Tableau 6 : Description du cas d’utilisation « Gérer utilisateurs ». ......................................... 42
Tableau 7 : Caractéristiques d’environnement matériel. ........................................................ 88
Tableau 8 : Caractéristiques du Smartphone utilisé. ............................................................... 88
Tableau 9: Outils de conception............................................................................................... 88
Tableau 10 : Outils de développement. ................................................................................... 89

11
 Introduction générale
L‟informatique devient une nécessité qu‟on ne peut pas ignorer. En effet, elle est perçue
comme une ressource indispensable dans tous les secteurs de l‟activité humaine sociale,
politique, économique, administrative et culturelle.

Notamment, on remarque une véritable évolution surtout au niveau des technologies. En

effet, l‟évolution des téléphones portables qui deviennent intelligents (smart) avec des
caractéristiques importantes permettant l‟accès rapide aux données et l‟intelligence artificielle
qui sert à résoudre des problèmes complexes, permettant de disposer de fonctions évoluées
pour gagner du temps et répondre aux besoins de l‟homme dans plusieurs domaines et donc
faciliter notre vie quotidienne. Cela nous permet de dire qu‟on vit une révolution innovatrice
dans le domaine de l‟informatique.

Cet environnement digital que nous devons exploiter, nous guide vers la résolution de
plusieurs problèmes tels que la perte de temps relatifs à la recherche, l‟insécurité des données
de l‟utilisateur et la plupart des plateformes présentent des interfaces surchargées (c‟est le
manque d‟ergonomie). Dans ce contexte, de nos jours, les étudiants font face à plusieurs
obstacles lors de la recherche de stages professionnels pour arriver à trouver l‟offre qui leur
permet d‟avoir une expérience professionnelle riche et leur permette d‟améliorer leurs
compétences. Ainsi, nous avons remarqué le besoin des entreprises d‟un outil efficace
permettant de dépasser ce problème.

Dans ce contexte, se déroule notre projet de fin d‟étude en collaboration avec l‟institut
supérieur d‟informatique et de mathématique de Monastir et avec la société ITGate1, qui
consiste à créer une application Web et Mobile GetTraining qui va se charger de faciliter la
recherche des stages pour les étudiants, qui s‟adaptent à leurs besoins et leurs profils. De plus,
elle va permettre aux entreprises de sélectionner les qualités des profils qui vont satisfaire
leurs besoins professionnels.

Notre application fait intervenir quatre acteurs principaux qui sont l‟admin (l‟admin de site),
les responsables des sociétés et des centres des formations et le candidat. Alors afin de
satisfaire au mieux ces utilisateurs, il est important de réaliser une plateforme cohérente et
agile pour assurer tous leurs besoins. Le présent rapport synthétise tout le travail que nous
avons effectué, il s‟articule autour de quatre grands chapitres désignés comme suit :

Le premier chapitre sera dédié à " présentation générale et étude préliminaire ". Nous
allons tout d‟abord présenter l‟organisme d‟accueil, ainsi que, le projet à réaliser. Ensuite
nous allons passer à l‟étude et à la critique de l‟existant pour proposer enfin une solution

1
ITGate est une société d’ingénierie informatique, crée en 2015 et spécialisée en développement et services
informatiques.

12
adéquate, les méthodologies de travail existantes, la méthodologie choisie et le planning de
réalisation.

Le second chapitre intitulé "Analyse et Spécifications les besoins" est focalisé sur la
méthodologie 2TUP, en d‟autre termes, l‟analyse des besoins fonctionnels et non fonctionnels

Dans le troisième chapitre, nommé "Architecture et Conception" détaillée du système, nous

présentons une analyse et une conception détaillées de cas d‟utilisation.

Le quatrième chapitre, sera réservé à la "Réalisation " de l‟application. Celui-ci passera en

revue l‟environnement de travail, les résultats obtenus et finalement tout en soulignant les
perspectives qui peuvent améliorer notre application.

13
Chapitre 1 : Présentation générale et
étude préliminaire

14
1. Introduction
Nous présentons dans ce chapitre, l‟organisme au sein duquel nous avons élaboré notre stage
en décrivant son secteur d‟activité. Par la suite, nous décrivons l‟étude de l‟existant ainsi que
ses limites afin de déduire la solution proposée, et pour finir, nous allons parler de la
méthodologie du développement que nous allons suivre durant notre projet.

2. Présentation de projet

2.1. Cadre de projet

Le présent travail intitulé GetTraining s‟inscrire dans le cadre de la préparation du projet de

fin d‟études, en vue de l'obtention du diplôme de Master professionnelle en Génie Logiciel au
sein de l‟institut supérieur d‟informatique et de mathématique de Monastir pour l‟année
universitaire 2019/2020. Notre stage a été effectué au sein de la Société ITGate.

2.2. Présentation de l’organisme d’accueil

Dans cette section nous présentons l‟organisme d‟accueil, son emplacement, son
organigramme et ses coordonnées.

2.3. Présentation de l’entreprise

ITGate-Group est une société SARL au capital de 50.000 D.T. Elle a été fondée en 2015 dont
l‟activité majeure est axée dans des nouvelles technologies de l‟information et de la
communication. Elle est spécialisée dans la création des sites web et le développement de
produits multimédia.
ITGate-Group a orienté ses activités de développement autour de l‟environnement de
l‟Internet et du multimédia, compte tenu de l‟inter grandissement des plates-formes
commerciales nationales et internationales pour ce type de produits, qui contribue
efficacement aux aléas économiques, motivées par la recherche de la rentabilité et la
satisfaction de sa clientèle. Cette jeune et puissante société nous a donné l'occasion d'enrichir
et renforcer nos connaissances concernant la conception et la réalisation des sites web et des
applications mobiles.

15
 Figure 1:Logo société d‟accueil "ITGate"

2.4. Activités et organigramme :

C‟est une société qui travaille dans le domaine des web et multimédia sous la gérance du
directeur Artistique & Technique: Mr. Angoud Houssem.
La société ITGate est formée de cinq départements globaux. Ils sont respectivement, le
département :
 Direction,
 Développement
 Communication et Marketing
 Ressources Humaines et Finance
La hiérarchie, l‟organigramme et les activités de la société sont représentés par la figure 1.2:

Figure 2: Organigramme de la société

2.5. Coordonnées

Les coordonnées d‟ITGate se présentent comme suit :

 Adresse : 12 Rue Abdelkader Daghrir Hammam Sousse – Sousse 4011
 Numéro Tel° : (+216) 73 325 001 / (+216) 54 161 325

16
  Numéro Fax: 73 325 001
 Site Web:www.itgate-group.com

3. Contexte et motivation de travail :

Le choix du projet de fin d‟études est une étape délicate, puisqu‟elle matérialise la transaction
entre l‟environnement éducationnel et la vie professionnelle. Plusieurs motivations ont orienté
notre choix
 En premier lieu, notre sujet approuve ses avantages qui sont le design et le développement
web.
 En second lieu, l‟idée du sujet présente une vraie solution pour
 les sociétés pour recruter le bon profil à partir de son bureau sans presque rien dépenser.
Ainsi que pour les stagiaires qui auront la possibilité de chercher les offres des stages et de
postuler et de déposer leurs CV en ligne sans avoir besoin de se déplacer.
 En troisième lieu, il me permet d‟approfondir davantage mes connaissances en matière de
l‟informatique en ayant l‟occasion de travailler avec de nouvelles technologies telles que
le Framework Spring Boot.

4. problématiques
Trouver un stage n‟est pas toujours facile, loin de là. Sans contacts et sans expérience, nous
pouvons avoir la sensation que la tâche est longue, pénible et complexe, les stagiaires passent
beaucoup de temps pour chercher une offre de stage convenable à leurs besoins. Donc
trouver un stage quand on est étudiant c‟est une mission un peu difficile. Face à ces
difficultés, les étudiants sont nombreux à accepter le premier stage qu'ils trouvent, et le
regrettent par la suite, à cause de mal choisi de sujet de projet de fin d‟étude missions
beaucoup moins intéressantes que prévues, manque de vision des dirigeants.

4.1. Etude et analyse de l’existant :

La réalisation de tout projet doit être précédée par une phase de l‟étude de l‟existant qui
détermine les points faibles et les points forts des systèmes actuels ainsi que les besoins du
client en vue de les prendre en considération lors de la conception et de la réalisation.

Dans cette section, nous présentons une étude basée sur les observations de différentes
applications web similaire aux applications qu‟on est demandé de réaliser. Cette étude nous
permettrons de dégager les atouts et les faiblesses d‟un système et permettront de recenser les
besoins afin de les traiter.

4.2. Description de l’existant :

De nombreux sites étrangers proposent des services ressemblent à notre système à implanter.
Nous avons effectué quelques recherches sur le présent sujet et nous vais proposer pour
chaque site trouvé une petite description qui permet de comprendre en générale son intérêt et
dégager les points forts et les points faibles des sites similaires.
Dans le tableau nous détaillons une synthèse des applications existantes:

17
4.2.1. Tanitjobs
Tanitjobs2 est un portail d‟offre d‟emploi permettant un accès à plusieurs espaces : espace
utilisateur, espace entreprise et espace formation avec la possibilité de déposer des offres
d‟emploi et des formations pour l‟espace entreprise et le dépôt d‟un cv, la postulation d‟une
offre et les prés inscription aux formations pour les membres de site.

Figure 3 : Capture de site Tanitjobs -interface d‟accueil

Les points forts :

 Site web responsive
 Ciblé à toutes les personnes
 large choix d‟offres d‟emploi dans les différents domaines

Les points faibles :

 l‟espace consacré aux entreprises n‟est pas gratuit
 Absence d‟un espace destiné aux stagiaires
 Il n‟est ya pas un grande choix d‟offres des stages
 Une grande partie dédiée aux publicités

4.2.2. Stage-Tunisie

Stage-Tunisie3 est un site web destiné aux stagiaires pour facilité la recherche d‟un stage avec
la possibilité de déposer des offres des stages par des entreprises.

2
https://www.tanitjobs.com/
3
http://www.stage-tunisie.tn/

18
 Figure 4 : Capture de site Stage.tn -interface d‟accueil

Les pointes fortes :

 Simple à utiliser.
 Ciblé par toutes les personnes.

Les points faibles :

 Manque d'information et de confidentialité
 Le site web existant n‟est pas à jour.
 Mauvaise gestion d‟espace privé de l‟École et université et l‟espace privé de l‟étudiante
 Les données n‟ont pas sécurisés
 Manque d‟ergonomie

4.2.3. jobi.tn

Jobi.tn4 est le premier site d‟emploi en Tunisie dans le domaine du digital il ce crée en 2015,
il permet un accès à deux espaces, espace employeur et espace chercheur d‟emploi.

Les pointes fortes :

 Site web responsif

 Ciblé à toutes personnes
 Site spécifié au domaine digital
Les pointes faibles :

 Manque d‟espace destiné aux stagiaires

4
https://www.jobi.tn/#!/

19
  L‟espace destiné aux entreprises n‟est pas gratuit
 S‟intéresse principalement aux offres d‟emploi
 Manque d‟ergonomie
 Difficulté à comprendre l‟interface et difficulté à chercher

Figure 5 : Capture de site Jobi.tn - interface d‟accueil

4.3. Etude comparative

Nous pouvons classer le résultat de l‟analyse des applications web existantes comme suit qui
sont décrit par le tableau ci-dessous :
 Attractivité : le visiteur doit se sentir ciblé, il faut qu‟il soit attiré par le site et que sa
navigation soit orientée et balisée. C‟est ici que l‟apparence de site sera évaluée.
 Espace entreprise : permet aux entreprises de s‟inscrire, gérer ses coordonnées,
postuler ses offres de stage et de chercher des candidatures pour leur postes.
 Espace stagiaire : permet aux stagiaire de s‟inscrire, gérer ses coordonnées, et de
chercher des offres de stage et de postuler son CV.
 sécurité, simplicité, ergonomie, performant, gratuité

20
 Tableau 1: Tableau 1 : comparaison fonctionnelle entre les solutions existantes

Fonctionnalités Tanitjobs Stage.tn Jobi

Attractivité

Espace
entreprise

Espace
stagiaire

Sécurité

gratuité

Simplicité

Performant

Ergonomie

4.4. Critique de l’existant

D‟après ce qui a été expliqué dans la table ci-dessus, on constate que la plupart de ces
applications web offrent des fonctionnalités assez similaires. Ces sites sont tous généralistes
offrant des espaces pour les utilisateurs qui permettent le suivi des offres d‟emploi, stages,
concours et formations. La présence des informations trop chargées sur la page d‟accueil ou
sur la colonne gauche ou droite en permanence gène les internautes.
D‟une part, nous remarque que ces applications présentent des pertes de temps relatives à la
recherche des profils adéquats et les compétences requises d‟une offre de la part de
l‟utilisateur et de l‟entreprise.
D‟autre part il n‟y a aucun site qui offre la possibilité de sélectionner les stagiaires d‟une
manière facile et rapide.

21
4.5. Solution proposé

Pour remédier a tous ces inconvénients, nous avons décidé de Réaliser et de développer une
application web et mobile pour la sélection et suivi des stagiaires sert évidement à :
 Faciliter la recherche de stage pour le stagiaire à partir d‟un filtrage des données selon
le lieu de poste, catégories, Entreprises.
 Assurer le Suivi des entretiens depuis une messagerie entre l entreprise et le candidat
 Consulter les feedbacks depuis un forum
 Sécurité de l‟accès aux données des utilisateurs
 Utilisation de la localisation par GPS
 Consultation des statistiques

5. Objectifs

On cherche donc à travers cette application à atteindre de multiples objectifs, notamment :

 Permettre d‟aider les entreprises et les centres des formations de déposer leur offre de
stage et leurs formations
 Permettre de faciliter la recherche de stage aux étudiantes
 Permettre aux étudiants de postuler leur CV dans les différentes offres de stage et faire
une préinscription dans les formations
 Permettre d‟aider les utilisateurs dans la prise de décision

6. Les méthodologies de développement

La méthodologie est un procédé adopté afin de nous formaliser les étapes à suivre pour le
développement du projet et pour que ce dernier répond d‟une manière efficace aux demandes
du client. Pour cela il est important de se baser sur une méthodologie rigoureuse qui prend en
compte toutes les étapes de la conception d‟une application.
Parmi les méthodologies de développement on cite les trois grandes méthodes : les méthodes
classiques, les méthodes agiles et les processus unifiés.

6.1. Les méthodes classiques

La méthode classique est une succession des phases qui se déverse les unes dans les autres et
on ne peut pas commencer une phase de l‟approche classique tant que la précédente n‟est pas
terminée. Alors ces méthodologies limitent les retours aux étapes précédentes. Parmi les
cycles classiques on a : les modèles en cascade, les modèles en spirale et les modèles en V.

22
6.1.1. Modèle en cascade
Ce modèle présenté par Winston W.Royce5 en 1970 .il se base sur 2 idées fondamentales [1] :

Figure 6 : Modèle en cascade

 Une étape ne peut pas être débutée avant que la précédente ne soit achevée
 La modification d‟une étape du projet a un impact important sur es étapes suivantes.

6.1.2. Modèle en spirale :

Défini par Berry Boehm6 en 1988 dans son article « A Spiral Model of Software
Development and Enhancement », le cycle en spirale reprend les étapes du cycle en V, mais
prévoit l‟implémentation de versions successives, ce qui permet de mettre l‟accent sur la
gestion des risques, la première phase de chaque itération étant dédiée à ce poste [1].

5
. Winston Walker Royce : était un informaticien américain, directeur du Lockheed Software Technology
Center à Austin, au Texas. Il a été pionnier dans le domaine du développement de logiciels.
6
.Barry Boehm : est un ingénieur en logiciel américain, professeur distingué informatique, en génie industriel et
en génie des système

23
 .

Figure 7 : Modèle en Spirale

6.1.3. Modèle en V :

Face aux problèmes de réactivité que pose l‟approche en cascade, l‟industrie informatique a
adopté le cycle en V dans les années 80, ce modèle ne se découpe plus en 7 mais en 9 phases
qui se répondent 2 à 2 : à chaque étape de conception correspond une phase de test ou de
validation, comme vous pouvez le voir ci-dessous.les neuf phases du cycle.

Figure 8 : Modèle en Modèle en V

Le modèle en V sont arrivées donc comme ceci [1] :

24
  Etude et analyse : l‟analyse ou la définition des besoins, la rédaction des
spécifications, la conception architecturale, la conception détaillée.
 Codage : développement de l‟application.
 Tests et validations : tests unitaires, test d‟intégration, tests de validation et
maintenance corrective.

Interprétation :

Les méthodes classiques ne permettent pas une vision réelle sur le résultat, manque de
flexibilité aux modifications des spécifications ou des changements brusques, démarche
complexe et risque de ne pas respecter le cycle.

6.2. Les méthodes agiles

Cette méthode se base sur quatre valeurs fondamentales :

 Personnes et interactions plutôt que processus et outils : L‟équipe est bien plus
importante que les moyens matériels ou les procédures.
 Logiciel fonctionnel plutôt que documentation complète : Il est vital que l‟application
fonctionne. Le reste est secondaire.il es préférable de commenter le code et de
transférer les compétences au sein de l‟équipe.
 Collaboration avec client plutôt que négociation de contrat : Le client doit être
impliqué dans le développement, il doit collaborer avec l‟équipe et fourni un feed-
back continu sur l‟adaptation du logiciel à ses attentes.
 Réagir au changement plutôt que suivre un plan : La planification initiale et la
structure du logiciel doivent être flexible aux demandes du client tout au long du
projet.

Parmi les méthodes Agile on a : XP (qui est une méthodologie légère qui met l‟accent sur
l‟activité de programmation et qui s‟appuie sur la communication, la simplicité et le feedback.
Elle est bien adaptée pour des projets de taille moyenne ou le contexte évolue en permanence)
et Scrum (qui définit un cadre de travail permettant la réalisation de projets complexes qui
sont divisés en plusieurs cycles de travail et qui nécessitent une longue durée de
développement).

6.3. Le processus Unifié(UP)

Le processus unifié est un processus de développement logiciel itératif, centré sur

l‟architecture, piloté par des cas d‟utilisation d‟UML et orienté vers la diminution des risques.
C‟est un patron de processus pouvant être adapté a une large classe de systèmes logiciels , à
différents domaines d‟application, à différents types d‟entreprises, à différents niveaux de
compétences et à différents tailles de l‟entreprise, il s‟articule autour de quatre phases :

 La phase d‟initialisation permet de décider la poursuite du projet ou son arrêt.

 La phase d‟élaboration poursuit trois objectifs principaux en parallèle identifier et
décrire, construire, lever les risques).

25
  La phase de construction consiste à concevoir et implémenter l‟ensemble des éléments
opérationnels.
 la phase de transition permet de faire passer le système informatique des mains des
développeurs à celles des utilisateurs finaux.

Parmi les processus unifié on peut citer RUP et 2TUP qui sont représentés dans le tableau ci-
dessous.

Tableau 2 : Tableau 2: Tableau représentant les implémentations du processus Unifie -RUP et

2TUP

RUP : Rational Unified Process 2TUP : Tow Tracks Unified

Process

Le rational Unified Process (RUP) Le 2TUP propose un cycle de

est l'une des plus célèbres développement en Y, qui dissocie
implémentations de la méthode PU. les aspects techniques des
Elle permet de donner un cadre au aspects fonctionnels.il commence
développement logiciel, répondant par une étude préliminaire qui
aux exigences fondamentales consiste essentiellement à
préconisées par les créateurs d'UML: identifier les acteurs, les
messages, produire le cahier des
Les principes
 Une méthode de charges et modéliser le
fondamentaux développement doit être contexte(le système est une boite
du processus guidée par les besoins des noire, les acteurs l'entourent et
utilisateurs. sont reliés à lui). le processus
Unifié(UP)
 Elle doit être centrée sur s'articule en suite autour de trois
l'architecture logicielle. phases essentielles:
 Elle doit être itérative et
incrémentale.  Une branche technique
 Une branche
fonctionnelle
 Une branche de
réalisation

7. Méthode de travail adopté

Notre projet est basé sur un processus de développement bien défini qui va de la
détermination des besoins fonctionnels attendus du système jusqu‟à la conception et le
codage final. C‟est pour cela qu‟on a besoin d‟un cycle de développement dissocie les
aspects technique des aspects fonctionnels tout en commençant par une étude préliminaire.
Notre choix s‟est alors porté vers la méthode 2TUP pour plusieurs raisons :

26
  Le projet représente une certaine complexité au niveau technique d‟où la nécessité de
prévoir une phase pour étudier toutes les exigences techniques qu‟il faut prendre en
considération avant d‟attaquer les spécifications fonctionnelles.
 Le projet fait abstraction dans son démarrage sur le logique métier pour se concentrer
sut l‟étude des scenarios et des fonctionnalités que peut apporter un moteur de
Workflow quel que soit le domaine métier qu‟il gère.
 A un moment donné, une liaison entre le modèle fonctionnel et le modèle technique
doit être faite pour vérifier l‟adaptation de l‟architecture technique avec les besoins de
l‟utilisateur.

Ce processus de développement logiciel est caractérisé par le suivant :

Figure 9 : Cycle de vie 2TUP

Le principe fondateur du 2TUP est que toute évolution imposée à un logiciel peut se
décomposer et se traiter parallèlement, suivant un axe fonctionnel et un axe technique.la
réalisation du logiciel consiste à fusionner les résultats de ces deux branches du processus.
Pour cela, il faut entamer une étude préliminaire qui est une première version de la
spécification générale et qui contient une description du service et des cas d‟utilisation
principaux.

Par ailleurs, selon le processus 2TUP que nous adoptons, nous devons passer obligatoirement
par tes trois branches suivantes :

7.1. La branche gauche (fonctionnelle) :

Les principales étapes de cette branche se présentent comme suit :

27
La capture des besoins fonctionnels : qui produit un modèle des besoins focalisé sur le
métier des utilisateurs.
L’analyse : elle consiste à étudier précisément la spécification fonctionnelle de manière a
obtenir une idée de ce que va réaliser le système en termes de métier

7.2. La branche droite (architecture technique) :

Elle capitalise un savoir faire technique .elle constitue un investissement pour le court et le
moyen terme. Cette branche comporte les étapes suivantes :
La capture des besoins techniques : elle recense toutes les contraintes et les choix
dimensionnant la conception du système .les outils et les matériels sélectionnés ainsi que la
prise en compte de contraintes d‟intégration avec l‟existant conditionnent généralement des
prés requis d‟architecture technique.
La conception générique : elle définit ensuite les composants nécessaires à la construction
de l‟architecture technique. Cette conception est complètement indépendante des aspects
fonctionnels.

7.3. La branche commune :

La réalisation du système consiste à fusionner les résultats des 2 branches. Cette fusion
conduite à l‟obtention d‟un processus en forme d‟Y. Cette branche comporte les étapes
suivantes :
La conception préliminaire : elle a pour l‟objectif d‟uniformiser et de réutiliser les mêmes
mécanismes pour tout un système informatique et écarte la plupart des risques de niveau
technique.
La conception détaillée : permet d‟étudier comment réaliser chaque composant. Le codage et
les tests : elle produit ces composants et teste au fur et à mesure les unités de code réalisées.
L’étape de recette : elle consiste enfin à valider les fonctions du système développé.

8. Planification de projet

Un bon planning est la clé principale de la réussite d‟un projet. En effet, le planning aide à
organiser et subdiviser le travail afin de séparer les tâches à réaliser. Il permet aussi d‟offrir
une meilleure estimation et gestion de temps nécessaire pour chaque tâche. De plus, il donne
assez de visibilité permettant d‟estimer approximativement la date d‟achèvement de chaque
tâche.

Le diagramme de Gantt est plus utilisé pour la gestion d‟un projet. Il permet de donner une
représentation graphique simple et compréhensible à l‟état d‟avancement des différentes
tâches du projet.

Le tableau montre le planning que nous avons adapté pour mener à bien la réalisation des
différentes parties du projet.

28
 Figure 10 : Diagramme de Gantt

9. Conclusion

Tout au long de ce chapitre, nous avons présenté l‟entreprise d‟accueil et les objectifs majeurs
à prendre en compte. De plus, nous avons fait une étude du système existant et une analyse
complète de la solution adoptée tout en précisant le choix méthodologique de développement.

Dans le chapitre suivant, nous allons passer à l‟analyse et à la spécification des besoins.

29
Chapitre 2 : Analyse et Spécification

des besoins

30
1. Introduction

La partie analyse et spécification des besoins est la partie la plus importante dans la réalisation
de n‟importe quel projet. Dans ce chapitre, on va identifier les acteurs du système et on va
extraire les besoins fonctionnels et non-fonctionnels. Par la suite on va présenter les
diagrammes de cas d‟utilisation accompagnés avec des descriptions détaillées, le diagramme
de classe et les diagrammes de séquence. Nous allons clôturer ce chapitre par une explication
de notre choix concernant les besoins techniques.

2. Etude préliminaire

L‟étude préliminaire(ou pré étude) est la toute première étape du processus 2TUP. Dans cette
partie nous procéderons à l‟analyse des besoins fonctionnels et non fonctionnels attendus de
l‟application à savoir le développement à travers la description des besoins du système qui
doivent répondre à l‟attente de l‟utilisateur. En effet l‟identification des besoins fonctionnels
représente une étape importante du processus de développement 2TUP qui est présenté dans
la figure suivante [1] :

Figure 11 : L‟étude préliminaire dans 2TUP

3. Capture de besoins fonctionnels

Nous allons s‟intéresser à la branche gauche du cycle en Y qui est la capture des besoins
fonctionnels. Notre application doit satisfaire les exigences de la totalité des utilisateurs.
Nous exposons dans ce qui suit leurs besoins fonctionnels et les besoins non fonctionnels.

31
3.1. Identification des acteurs

Un acteur représente une entité externe qui interagit avec le système. En réponse à l‟action
d‟un acteur, le système fournit un service qui répond à ses besoins. Notre application présente
3 acteurs identifiés dans le tableau suivant :

Tableau 3 : Tableau 3 : Liste des principaux acteurs

Acteur Rôle

Administrateur C‟est le superviseur qui a pour rôle de contrôler et rectifier le site

web pour assurer le bon fonctionnement du système.

Responsable de la société Le responsable a le droit de déposer des offres des stages et de

consulter la liste des candidats qui ont postulé.

Responsable centre de Le responsable a le droit de déposer des annonces des formations

formation et de consulter la liste des candidats qui sont pré inscrits.

Candidats Les candidats ont la possibilité de consulter les offres de stage et

les formations, gérer leurs profile, postuler leurs CV et faire une
préinscription dans les formations

3.2. Besoins fonctionnels

Pour notre application, nous avons sélectionné les besoins fonctionnels suivants :

Le système doit permettre : l‟authentification des utilisateurs par un login et un mot de passe
pour accéder aux différentes fonctionnalités.

L’administrateur aura la possibilité de :

- Consulter les Statistiques : permet de collecter les informations pour traiter la

statistique du nombre des entreprises et des candidats du site
- Approuver les demandes d’adhésion des entreprises : l‟administrateur doit vérifier
l‟existence réelle de la société et du centre de formation pour qu‟il approuve ou bien
rejette la demande d‟inscription
- Gérer les secteurs : ajouter, modifier ou bien supprimer les secteurs auxquels
appartient chaque entreprise

32
 - Contacter les Responsables : de société/centre de formation par e-mail

Notre application doit permettre aux « Responsables des sociétés » de :

- Faire l’inscription
- S’authentifier
- Gérer son profil : espace de création et personnalisation de profil pour la société et la
possibilité de mise à jour des informations
- Gérer l’offre de stage : englobe les opérations classiques qui peuvent être exécutées
sur l‟offre de stage telles que l‟ajout, la modification et la suppression
- Consulter les CV et les profils des candidats qui ont postulé pour les offres des
stages
- Traiter les demandes des candidats : en cas d‟acceptation la société peut contacter
le candidat
- Réinitialiser le mot de passe en cas d‟oubli via l‟email

Notre application doit permettre aux « Responsables des centres des formations » de :

- Faire l’inscription
- S’authentifier
- Gérer son profil : espace de création et personnalisation de profil pour le centre de
formation et la possibilité de mise à jour des informations
- Gérer les annonces des formations : permet d‟ajouter, modifier et mise à jour les
annonces des formations
- Consulter la liste des candidats qui font la préinscription
- Réinitialiser le mot de passe en cas d‟oubli via l‟email

Les fonctions offertes aux « Candidats » sont :

- Faire l’inscription
- S’authentifier
- Gérer son profil : permet d‟ajouter, modifier supprimer et mise à jour leur
informations
- Chercher des entreprises : selon les zones géographiques, ses informations et le
domaine souhaité
- Postuler aux offres des stages
- Faire une préinscription : préinscription pour une formation dans un centre de
formation
- Contacter entreprise : espace de discussion instantané pour contacter directement
l‟entreprise
- Recommander l’entreprise : le candidat peut évaluer l‟entreprise

4. Spécification semi-formelle des besoins

4.1. Langage de modélisation :

33
Pour faire la conception de notre projet nous avons utilisé le langage de modélisation objet :
UML (Unified Modeling Language ou le langage de modélisation unifié) [2] c‟est un langage
de modélisation graphique à base des pictogrammes conçu pour fournir une méthode
normalisée pour visualiser la conception d‟un système. Il est apparu dans le monde du génie
logiciel, dans le cadre de la conception orientée objet. Couramment utilisé en développement
logiciel et en conception orientée objet.
 UML permet de représenter un système selon différents vues complémentaires : les
diagrammes.
 Pour modéliser les besoins des utilisateurs nous avons utilisé des diagrammes statiques
tels que le diagramme de cas d‟utilisations, le diagramme de séquence et le diagramme de
classe. Nous avons choisi le logiciel « Visual paradigme for UML » pour faire la
conception UML car il est très puissant et simple à utiliser.

Figure 12 : Logo de Visual paradigme for UML

4.2. Diagramme de cas d’utilisations

Le diagramme de cas d‟utilisation permet de décrire les fonctionnalités du futur système et de

structure les besoins des utilisateurs. D‟abord nous détaillons les cas d‟utilisation de chaque
utilisateur et l‟interaction entre eux dans le diagramme de cas d‟utilisation général présenté ci-
dessous.

4.2.1 Diagramme de cas d’utilisation général

Ce diagramme permet d‟identifier les possibilités d‟interaction entre le système et les acteurs
(intervenants extérieurs au système). Il représente toutes les fonctionnalités que le système
doit fournir.

Avant de représenter le diagramme de cas d‟utilisation, il est important de connaitre ces

différents éléments qui sont :

34
  Un acteur : représente une personne, une organisation ou un système externe qui interagit
avec le système étudié en échangeant de l‟information.
 Un cas d’utilisation : représente un ensemble observable intéressant pour un acteur
particulier.
 Relation : exprime l‟interaction existante entre un acteur et un cas d‟utilisation.

Une représentation graphique des différents cas d‟utilisation de notre application est assurée
par ce diagramme de cas d‟utilisation général illustré dans la figure ci-dessous.

35
Figure 13 : Diagramme de cas d‟utilisation général

36
4.2.2 Spécification et raffinement des cas d’utilisation

Pour mieux comprendre les cas d‟utilisation exprimés dans le diagramme de cas d‟utilisation
général, nous avons détaillé les plus importants dans ce qui suit.

 Spécification de cas d‟utilisation « S‟authentifier » :

Nous résumons dans le tableau ci-dessous le scénario de déroulement du cas d‟utilisation

« Authentification d‟utilisateur ».

Tableau 4: Description du cas d‟utilisation « S‟authentifier »

Titre Cas d’utilisation

Résumé Authentification d‟utilisateur

Acteur Administrateur, Responsable société, Responsable centre

de formation, candidat.

Pré condition L‟utilisateur a demandé de s‟authentifier

Scénario principal 1) L‟utilisateur saisit ses informations de connexion

2) l‟utilisateur valide la connexion
3) le système vérifie les données saisies
4) le système dirige l‟utilisateur vers son espace

Poste condition Utilisateur connecté peut consulter son espace

Scénario alternatif 3) si les données saisies sont invalides

a. le système affiche un message d‟erreur
b. le scénario reprend à partir de 1.

37
 Diagramme de cas d‟utilisation « Gérer les offres de stages »

La figure ci-dessous représente le cas d‟utilisation « Gérer les offres de stages ».

Figure 14 : Diagramme de cas d‟utilisation « Gérer les offres de stages »

Nous résumons dans le tableau suivant le scénario de déroulement du cas d‟utilisation «

Gérer les offres de stages »

Tableau 5 : Description du cas d‟utilisation « Gérer les offres de stages »

Titre Cas d’utilisation

Résumé Gérer les offres de stages

Acteur Responsable société

Pré condition Le responsable doit s‟authentifier et l‟application dirige

l‟utilisateur vers son espace

38
Scénario principal Les postes conditions sont fournis en fonction du choix (cas
d‟utilisation) du responsable de société .elles peuvent être :

- Visualiser détails offre : page détails offre affiché

- Ajouter offre : une nouvelle offre ajoutée
- Modifier offre : offre modifiée avec succès
- Consulter listes des candidatures : accepté ou refusé
- Chercher une offre : offre trouvé

Scénario nominal Apres l‟authentification, le responsable de société peut

gérer ses offres des stages, ou choisir une action :

Visualiser détails offre :

1. Le responsable consulter ses offres de stages

2. Cliquer sur le bouton « description » pour consulter
les détails de l‟offre
3. Le système affiche la page détails l‟offre

Ajouter offre :

1. Le responsable clique sur le bouton ajouter offre

2. Un formulaire sera affiché pour que le responsable
remplisse les informations associées à l‟offre
3. L‟offre sera ajoutée avec succès

Modifier offre :

1. La responsable de société consulte la liste des offres

2. Cliquer sur le bouton modifier pour une offre
3. Modifier offre puis cliquer sur le bouton enregistrer
4. Offre mis à jour avec succès

Consulter la liste des candidatures associées à l’offre :

1. Cliquer sur l‟icône « user » situé à l‟offre pour

consulter la liste des candidatures qui lui est
associées
2. Le système récupère et affiche la liste des
candidatures
3. La responsable peut :
3.1.Soit accepter la candidature en cliquant sur le
bouton « accepté » et dans ce cas l‟état de la
candidature sera changé (accepté
3.2. Soit refuser la candidature et l‟état de
candidature sera changé (refusé)

39
 4. une notification sera enregistrée dans la base de
données et envoyée par le système au candidat pour
l‟informer de l‟état de sa candidature

Scénario alternatif En cas d’ajout offre

Lorsque la responsable de société veut ajouter de nouvelles

offres alors il remplit un formulaire :

 s‟il laisse un champ vide alors le système le

colorera ce champs en rouge et la page reste
affichée.

40
 Diagramme de cas d‟utilisation « Gérer Utilisateurs » :

Figure 15: Diagramme de cas d‟utilisation « Gérer Utilisateurs ».

41
Nous résumons dans le tableau suivant le scénario de déroulement du cas d‟utilisation «
Gérer Utilisateurs ».

Tableau 6 : Description du cas d‟utilisation « Gérer utilisateurs ».

Titre Cas d’utilisation

Résumé Gérer les utilisateurs

Acteur Administrateur

Pré condition Le responsable doit s‟authentifier et l‟application dirige

l‟utilisateur vers son espace

Scénario principal Les postes conditions sont fournis en fonction du choix (cas
d‟utilisation) de l‟administrateur .elles peuvent être :

- Consulter profil centre de

formation/société/candidat : profil affiché
- Chercher centre de formation/société/candidat :
candidat/société/ centre de formation trouvé
- Consulter liste des avis : liste des avis affichés
- Consulter liste des offres pour une société : liste des
offres de la société affichée
- Consulter liste des annonces pour un centre de
formation : liste des annonces de centre affichée

Scénario nominal Apres la consultation des liste des utilisateurs (soit liste de
candidat soit liste des sociétés soit liste des centres de
formation), l‟administrateur peut choisir une action parmi :

Consulter profil candidat/société/centre de formation :

1. Cliquer sur l‟icône « utilisateurs » pour consulter le

profil d‟une société ou d‟un candidat ou d‟un centre
de formation
2. Profil affiché

Chercher candidat/société/centre de formation :

1. Créer un mot clé dans la barre de recherche

2. Candidat/société/centre de formation trouvé

42
Consulter liste des avis :

1. Cliquer sur l‟icône « liste avis » pour afficher la

page liste avis
2. Page liste des avis affichés

Consulter la liste des offres pour une société :

1. Cliquer sur l‟icône « liste offre » pour afficher la

page liste offre
2. Page liste des offres pour cette société affichée

Consulter la liste des annonces pour un centre de

formation :

1. Cliquer sur l‟icône « liste annonce » pour afficher la

page liste annonce
2. Page liste des annonces pour ce centre de formation
affichée

43
5. Diagramme des séquences

Un diagramme de séquence sert à illustrer un cas d‟utilisation à travers les échanges de

message entre les objets dans e cadre d‟un fonctionnement particulier du système. Lors de
cette étape, on décrit de façon détaillée, les différentes interactions entre les objets de
l‟application.

5.1. Diagramme de séquence « Authentification » :

La figure ci-dessous présente le diagramme de séquence du système du cas d‟utilisation

«Authentification ».

Figure 16 : Diagramme de séquence « Authentification»

44
6. Besoins non fonctionnels
Ce sont des exigences qui ne concernent pas spécifiquement le comportement du système
mais plutôt ils identifient des contraintes internes et externes du système. Les principaux
besoins non fonctionnels de notre application se résument dans les points suivants :

 Performance : l‟application doit être performante à travers ses fonctionnalités et doit

répondre à toutes les exigences des clients d‟une manière optimale et non ambigüe.
 Fiabilité : bon fonctionnement de l‟application sans détection de défaillance
 Rapidité : le déplacement entre les pages doit être facile et rapide.
 L’ergonomie : les interfaces doivent être facile à utiliser, simples, ergonomes, adaptées à
l‟utilisateur et lisibles. L‟application doit respecter les standards d‟ergonomies telle que la
densité d‟éléments sur l‟écran, le choix de couleurs, l‟utilisateur est guidé lors de la saisie de
certaines informations afin de respecter les formats des champs de la base de données.
 Contrôle de saisie : l‟application prendra également en considération le contrôle de structure
de données pour éviter tout risque d‟erreur au niveau des informations.
 Contrôle du champ : permet de contrôler le champ des données obligatoires.
 Sécurité : l‟application assure la sécurité d‟utilisation par la nécessiter d‟attribuer des rôles à
chaque utilisateur pour attribuer les activités de chacun d‟eux ainsi les comptes des utilisateurs
sont sécurisés par mot de passe crypté, par mécanisme de vérification d‟authentification par
Token JWT qui doit implémenter pour chaque tentative de connexion et la sécurité au niveau
du payement.

7. Architecture de sécurité
7.1. L’intérêt de développer d’une API pour un site web :

L‟API peut être résumée à une solution informatique qui permet à des applications de
communiquer entre elles et de s‟échanger mutuellement des services ou des données. Il s‟agit
à réaliser d‟un ensemble de fonctions (que l‟on peut appeler via une requête http) qui facilite,
via un langage de programmation, l‟accès aux services d‟une application. En fait, l‟API est
un moyen efficace de faire communiquer deux programmes informatiques.
Pour lui permettre d‟évoluer plus facilement, pour séparer encore plus distinctement back-end
et front-end et pour faciliter le développement d‟applications web ou pour laisser les membres
le droit de coder une « surcouche », par exemple pour un site web.

45
8. Les différentes architectures d’API :

Il existe deux grands protocoles de communications sur lesquels s‟adossent les API : Simple
Object Access Protocol (SOAP) et Representational Transfer (REST). Le second s‟est
désormais largement imposé face au premier car il est plus flexible. Il a donné naissance aux
API dites REST ou RESTful.

 La différence majeure entre ces 2 éléments est le degré de liaison entre le client et le
serveur.

8.1. Architecture d’API SOAP :

SOAP est un protocole reposé exclusivement sur XML pour envoyer des messages. Cette
technologie est échouée car elle repose sur une messagerie binaire, la messagerie XML. En
fait, de nombreux développeurs ont trouvé SOAP lourd et difficile à utiliser.

Figure 17: Model de communication d‟API SOAP

8.2. Architecture d’API REST :

REST est un style d‟architecture, fournit une alternative plus légère. Au lieu d‟utiliser XML
pour effectuer une requête, REST s‟appuie souvent sur une URL simple. Dans certaines
situations, on peut fournir des informations supplémentaires de manière particulière, mais la
plupart des services WEB utilisant REST reposent exclusivement sur l‟obtention des
informations nécessaires à l‟aide de l‟approche URL.

Figure 18 : Mode de communication d‟API REST

9. L’architecture d’API adoptée :

Si nous choisissons le type d‟API celle qui s‟adapte le mieux à nos besoins de mon
application, nous choisirons l‟API REST pour plusieurs raisons : simple à utiliser, propre et
polyvalente pour beaucoup de types d‟échange d‟informations entre logiciels et ne fait usage

46
que du protocole http. Ce type d‟API est un type très spécial d‟interface qui nous avons
développé sur Spring Boot.

Les utilisateurs (d‟autres applications) peuvent appeler RESTful API et recevoir un résultat.
Mais, cette API ne peut pas être publique, en raison de leur sensibilité, nous devons donc les
sécuriser.

En fait, il existe une technique mise en œuvre pour sécuriser notre API qui est l‟utilisation de
Spring Security avec l‟implémentation de protocole d‟authentification JWT (JSON Web
Token). Alors on peut dire que l‟accès à l‟API Rest est sécurisé d‟une manière statless, par
Spring Security en utilisant JWT.

10. Sécurisation d’Api Restful :

Pour comprendre le fonctionnement de sécurité d‟Api il est nécessaire de comprendre la

plateforme Spring Security et le protocole JWT.

10.1. Plateforme Spring Security :

C‟est un cadre d‟authentification et de contrôle d‟accès (autorisation) puissant et hautement

personnalisable. C‟est la norme de facto pour la sécurisation des applications basées sur
Spring, elle fournit une solution de sécurité complète pour les applications logicielles
d‟entreprise bases sur Java EE qui nous fournit un système de sécurité utile et hautement
configurable.

En effet, ce Framework est caractérisé par :

 Prise en charge complète et extensible pour l‟authentification et l‟autorisation,

 Sauvegarde de mot de passe crypté dans la base de données,
 Protection contre les attaques que la fixation de session, le détournement de clic, la
falsification de requêtes intersites, etc.

10.2. Protocole d’authentification JWT :

Json Web Token est un standard (RFC 7519) qui définit une solution compact et autonome
pour transmettre de manière sécurisée des informations entre les applications en tant qu‟objet
structuré au format JSON (Java Script Objet Notation). Ces informations peuvent être
vérifiées et approuvées car elles sont signées numériquement.

Les JWT peuvent être signés à l‟aide de l‟algorithme HMAC7 qui est symétrique (avec une
clé privée) ou à l‟aide de RSA8 qui est asymétriques (avec une paire de clés publique et
privée).

7
.HMAC (Hash Message Authentication Code) parfois développé sous forme de code d’authentification de
message à hachage ou de code d’authentification à base de hachage est un type spécifique de code
d’authentification

47
 Principe de JWT :

Json Web Token (JWT) est un standard qui connaît aujourd‟hui une grande popularité dans la
communauté des développeurs informatiques. Il décrit une façon d‟échanger des informations
entre plusieurs tiers, avec la souplesse et la légèreté du format JSON et tout cela de façon
sécurisée. Elle permet donc d‟échanger du contenu pour un utilisateur authentifié grâce à la
clé secrète utilisée dans la signature. La signature permet également d‟assurer l‟intégrité du
contenu. Le principe est représenté par la figure ci-dessous.

Figure 19 : Utilisation du JWT lors des échanges client-serveur.

 Structure de JWT :

Un JWT est simplement constitué de trois parties séparées par un point comme c‟est
représenté par la figure ci-dessous.

8
.RSA (ronald Rivest, adi Shamir et leonardo Adleman) est un type de cryptographie à clé publique utilisé pour
le cryptage des données de courrier électronique et d’autres transactions numériques sur internet.

48
 Figure 20 : Représentation de structure Web-JWT

Le header : comprend généralement deux parties(le type du jeton JWT et l‟algorithme de

hachage utilisé (tel que HMAC SHA256 ou RSA)).

Le Payload : le contenu est un simple objet avec les informations à échanger entre le client et
le serveur (expiration du token, identité de l‟utilisateur connecté,…). On peut y placer
librement des champs personnalisés et propres à nos besoins (public claims) et des attributs
réservés définis dans la spécification (registered claims).

Quelques « registered claims » :

 Iss : origine du token (issuer)

 Sub : sujet (subject)
 Exp : date d‟expiration du token (expiration)
 Iat : date de création du token (issued at)

La signature : pour créer la partie signature, il faut utiliser le header codé, le Payload codé et
un secret. Elle est utilisée pour s‟assurer que le message n‟a pas été modifié en cours de route.

La figure ci-dessous montre un JWT qui à le Header et le Payload précédents et il est signé
avec un secret.

49
 Figure 21 : Représentation du jeton JWT de manière codée et décodée.

11.Capture des besoins techniques

Les principales étapes de la branche technique se présentent comme suit :

 L’étape capture des besoins techniques : cette étape recense toutes les contraintes
sur les choix de technologies pour la conception du système. Les outils et le matériel
sélectionné ainsi que la prise en compte de contraintes d‟intégration avec l‟existant
(prérequis d‟architecture technique).
 L’étape conception générique : définit les composants nécessaires à la construction
de l‟architecture technique. Cette conception est complètement indépendante des
aspects fonctionnels. elle permet de générer le modèle de conception technique qui
définit les Framework.

50
 La figure ci-dessous montre la situation de la capture des besoins techniques dans 2TUP
[3].

Figure 22 : Situation de la capture des besoins techniques dans 2TUP.

Nous avons choisi les contraintes techniques suivantes pour notre application :

 Développez une application web en utilisant le Framework angular7.

 Utilisation de base de données MySql

11.1. Angular 7 :

Angular 7 est un Framework d‟application web open source basé sur JavaScript développé et
géré par l‟équipe angulaire de Google, été publié le 18 octobre 2018. Les services dans
Angular 7 nous permettons de définir un code accessible et réutilisable dans plusieurs
composants. On a considéré l‟utilisation d‟Angular 7 comme choix technique pour les raisons
et les besoins suivants :

 Plateforme extensible, compréhensible et flexible : la notion de composants va

permettre de rendre le code extensible et modulaire. Il devient alors facile d‟ajouter, de
modifier ou de supprimer des directives.
 Navigation fluide pour l’utilisateur : le nombre d‟accès au serveur est fortement
diminué car la communication se fait majoritairement en mode asynchrone.
 Haute performance : Angular rend très simple l‟organisation de choses comme les
dépendances et le chargement dynamique.
 Responsives : les applications développées avec Angular sont responsives et
s‟adaptent à tous les écrans : desktop, mobile et tablette.

La figure ci-dessous représente une comparaison entre Angular et autres Framework

JavaScript avec npm trends [4].

51
 Figure 23: Le taux de croissance et de développement des framework JavaScript

11.2. MySql :

MySql est une open source système de gestion de base de données relationnelle (SGBDR). On
a considéré l‟utilisation MySql comme choix technique pour les raisons suivantes :

 Rapide : le serveur MySql est très rapide, des tests de performances sont disponibles
sur le site de MySQL
 Facile à utiliser : MySql est beaucoup plus simple à utiliser que la plupart des
serveurs de base de données commerciaux
 Connexion et sécurité : disposent d‟un système de sécurité permettant de gérer les
personnes et les machines pouvant accéder aux différentes bases
 Portabilité : MySQL tourne sur divers systèmes tels qu‟Unix, Windows, Linux ou
OS/2.

La figure ci-dessous représente une comparaison entre MySQL et autres BDD SQL présenté
par Dv-Engines.com [5].

52
.

Figure 24 : Le taux de croissance d‟utilisation de BDD DQL

12.Conclusion

Dans ce chapitre, nous avons défini d‟une part les besoins fonctionnels et les besoins non
fonctionnels et d‟autre part, nous avons présenté le diagramme du cas d‟utilisation général et
quelques diagrammes de séquence système et grâce aux besoins techniques nous avons réussi
à dégager les composants techniques qui vont intervenir dans notre projet.

Le chapitre suivant sera dédié à la conception détaillée de notre application.

53
Chapitre 3 : Architecture et
conception détaillée de système

54
1. Introduction
En se référant à la démarche 2TUP, et après avoir déterminé la partie de capture et analyse
des besoins, nous passons à la phase de conception qui représente deux étapes essentielles à la
démarche, ces étapes nous permettant de passer d‟une structure fonctionnelle via les cas
d‟utilisation à une structure objet sous forme de modèle de classe.
Au cours de ce qui suit, nous allons traiter la présentation de l‟architecture globale de notre
application et l‟architecture de conception adoptée. Ensuite, nous allons détailler la
conception de la base de données. On va mieux présenter la conception logicielle via les deux
vues statistique et dynamique. Puis, nous allons clôturer ce chapitre par la représentation de
conception graphique.

2. Conception architecturale de notre application

2.1. Les Modelés architecturaux

Après avoir fait le choix de la méthodologie 2TUP, la démarche de conception sera en

adéquation sur l‟architecture de l‟application.

2.1.1. Architecture 1-tiers (simple tiers)

Les 3 couches applicatives s‟exécutent sur la même machine, nous parlons d‟informatique
centralisée (contexte multiutilisateur dans le cadre d‟un site central (mainframe)).toutes les
fonctionnalités sont donc comprises dans une seule couche logicielle.

L‟architecture1-tiers est présentée par cette figure [6].

Figure 25 : Architecture 1-tiers.

2.1.2. Architecture 2-tiers

L‟architecture à deux nivaux (aussi appelée architecture 2-tiers, tiers signifiant rangé en
anglais) caractérise les systèmes clients/serveurs :

55
  Pour lesquels le client demande une ressource et le serveur la lui fournit directement, en
utilisant ses propres ressources.
 Cela signifie que le serveur ne fait pas appel à une autre application afin de fournir une
partie du service .l‟architecture 2 tiers est présenté par la figure ci-dessous [6].
 Pour la présentation et les traitements sont sur le client
 Les données sur le serveur
 Le contexte multiutilisateur avec accès aux données centralisées (middleware)

Figure 26 : Architecture 2-tiers.

2.1.3. Architecture 3-tiers

Dans l‟architecture à 3 niveaux (appelée architecture 3-tiers), il existe un niveau

intermédiaire, c‟est à dire que nous avons généralement une architecture partagée entre :

1- Un client c'est-à-dire l‟ordinateur demandeur de ressources, équipée d‟une

interface utilisateur (généralement un navigateur web) chargée de la présentation.
2- Le serveur d’applications (appelé également middleware), chargé de fournir la
ressource mais faisant appel à un autre serveur.
3- Le serveur de données, fournissant au serveur d‟applications les données dont il a
besoin. L‟architecture 3 tiers est présentée par la figure ci-dessous [6].

Figure 27 : Architecture 3-tiers.

Concernant le partage des 3 modules on distingue que :

 Pour la présentation est sur le client

 Les traitements sont pris par un serveur intermédiaire

56
  Les données sont sur un serveur de données
 Contexte multiutilisateur internet

2.2. L’architecture applicative

Sur le plan logique, notre application est constituée de trois couches. Ces trois couches se
conforment à l‟architecture de couches fermées « Closed layer architecture » (une couche peut
communiquer seulement avec la couche qui lui est adjacente). La figure suivante présente
l‟architecture java EE d‟une application web en trois couches :

Le concept de partitionner une application en couches et de garder toutes la logique de

l‟application dans ces couches distinctes et séparées, a été introduit bien avant l‟approche
orientée objet. Ainsi une application est divisée en trois couches logiques, chacune traitant des
fonctions spécifiques :

 Présentation : interface usager et présentation

 Logique du logiciel à produire (besoins, services de l‟entreprise) : les règlements de
l‟entreprise et la logique de l‟application
 Logique des données : base de données et intégration des services de l‟entreprise.

Figure 28 : Architecture 3-tiers.

Ce concept nous permet de créer des composants indépendants et de les déployer sur des
plates-formes différentes. En fait, ce concept est très utilisé dans le développement des
applications multi-tiers. Plus tard, il faut s‟adapter au modèle de conception Model-Vie-
Controller(MVC) qui est un modèle très commun pour développer des applications
distribuées et multi-tiers.

Pour ce faire, notre architecture (3-tiers) est mise en œuvre suivant le modèle MVC (Model,
View, Controller).

2.3. L’architecture technique

2.3.1. Choix d’architecture

La figure ci-dessous, montre que l‟application est décomposée en deux parties appelées par la
partie front-end et la partie back-end .elle possède deux modes de communication synchrone

57
(HTTP REST) et asynchrone (communication à base de messages).les deux parties partagent
une base de données MySQL.

L‟application back-end communique avec un serveur d‟applications qui contient un conteneur

web qui s‟appelle Tomcate et un Framework Spring qui va charger d‟assurer l‟inversion de
contrôle pour prend en charge l‟exécution principale de programme, il cordonne et contrôle
l‟activité de l‟application.

Cette architecture présente plusieurs avantages. En effet, une application orientée objet
communique avec une base de données relationnelle, elle a besoin d‟utiliser une couche DAO
pour faire la correspondance entre les données relationnelles avec les objets c'est-à-dire elle
est responsable sur le mapping objet relationnel. En effet, l‟application composée d‟un
ensemble des micro-services et basée sur le protocole REST pour les transferts des données.
Ce protocole envoie les données sous format Json (Java Script Object Notation).

Figure 29 : Architecture technique.

2.3.2. L’architecture de conception adoptée

Le bon choix de l‟architecture est une phase capitale dans le cycle de vie d‟une application.
Pour cette raison nous présentons dans cette partie, les technologies globales avec lesquelles
nous réalisons notre projet, soulignant que notre choix est focalisé sur les deux points
essentiels liés à nos besoins techniques :

 L‟amélioration du temps de réponse de notre application.

 Avoir un code maintenable, modulaire et compréhensible.

58
Nous avons eu recours à l‟architecture MVC pour la partie back-end, l‟architecture MVVM
pour le front-end comme l‟architecture globale de notre application.

 Choix de architecture coté back-end (coté serveur)

Dans notre étude, nous s‟intéressons seulement aux Framework le plus mature Spring Boot
qui permet de respecter le modèle d‟architecture MVC.

En effet, MVC (modèle-vue-contrôleur) est un patron de conception qui permet de bien

découper (ou séparer) le code en trois parties comme l‟illustre la figure ci-dessous afin de
mieux organiser le code de notre système [7]:

Figure 30 : L‟architecture de conception MVC.

Vue : correspond à l‟IHM (interface homme-machine). Cette partie se concentre sur

l‟affichage pour cela on trouve essentiellement du code HTML.

Modèle : modèle de données qui représente la couche métier de l‟application. Il représente les
données brutes et l‟interaction avec la base de données.

Contrôleur : il orchestre la procédure entre la vue et le modèle .c‟est une logique de contrôle
qui permet de gérer les événements et d‟assurer la synchronisation.

59
Puisque nous avons adapté l‟architecture MVC, l‟explication du diagramme de classes sera
faite en trois parties

Première partie : Modèle

Cette partie est composée de deux couches : la couche métier et la couche DAO.

 Couche métier : c‟est la représentation objet de la base de données.

 Couche DAO (Data Access Object) : cette couche nous permet l‟accès à la base de données.
Elle est composée des interfaces java qui étendent des interfaces prédéfinies fournies par
Spring. L‟implantation de ces interfaces est générée par le Framework lors de l‟exécution.
Cette couche est constituée de ces interfaces qui se représentent dans la figure suivante:

Figure 31 : Les interfaces de la couche DAO.

Deuxième partie : contrôleur

Cette couche fait le lien entre la partie vue et partie modèle. Les classes de cette partie
implémentent les traitements qui vont être invoqués par le navigateur. Ils font appel aux
classes DAO pour communiquer avec la base de données. Généralement leurs méthodes
retournent au client (browser) des données au format JSON. Cette couche est constituée de
classes suivantes de la figure suivante :

60
 Figure 32 : Les classes de la couche Contrôleur.

Troisième partie : Vue

Le développement sous Angular déplace la partie vue côté client. Une application est
structurée sous forme de composant. Un composant est relatif à un scénario d‟interaction avec
l‟utilisateur. Un composant est défini via 3 types de ressources :

 Un fichier HTML qui définit le contenu et la structure de page à afficher.

 Un fichier CSS pour la mise en forme
 Une classe Typescript qui implémente le comportement dynamique de la page

Dans notre application nous identifiant les composants suivants qui sont définis dans la figure
ci-dessous :

61
 Figure 33 : Les composants de la partie Vue.

En plus du composant, la partie vue comporte un ensemble des services. Un service est une
classe typescript qui sert à partager des données entre les composants et qui communique avec
la partie back-end (avec le Contrôleur) via le protocole http.

Nous identifiant les services qui sont présentés dans la figure ci-dessous :

Figure 34 : Représentations des services.

 Choix de l’architecture coté front-end (coté client)

Plusieurs technologies se présentent, mais notre choix va être restreint sur Angular 7
puisqu‟elle est la plateforme open source la plus populaire et la plus utilisée qui permet de
respecter le modèle d‟architecture MVVM (modèle, vue, vue-modèle). Le modèle MVVM est

62
similaire au modèle MVC en ce qui concerne le modèle et la vue la seule différence réside
entre le C (Controller) et la VM (View Model). Il comprend trois composants comme il est
indiqué dans la figure suivante [8] :

Invoque les méthodes

View Model
de modèle
Data binding

View Model
Contient l‟ensemble Représente les données
des vues à afficher
Avise les méthodes reçues de serveur

Figure 35 : Architecture MVVM.

Comme elle indique dans la figure ci-dessus le projet est composé d‟un ensemble des modules
(les modules sont la base d‟une application Angular afin de mieux structurer le code et
faciliter la réutilisation. Il fournit un contexte de compilation pour les components). Chaque
module est composé de plusieurs components (aussi les services, directives, pipes,..), chacun
contient une page html qui présente le V (View) est un fichier type script qui présente le VM
(View Model) qui charge d‟exposer les objets de données du modèle d‟une manière que les
objets soient facilement gérés et présentés.

63
 Figure 36 : L‟architecture MVVM dans le projet «View – ViewModel ».

Le modèle : est un conteneur contient les données métier de l‟application. Il permet de faire
l‟échange avec le serveur et notifie la Vue-Modèle de tout changement. Comme elle est
indiquée dans la figure ci-dessous.

Figure 37: L‟architecture MVVM dans le projet «Model ».

Afin de gérer les différents modules Angular propose un mécanisme nommé Lazy loading.
C‟est une fonctionnalité permettant de charger du code applicatif lorsque celui-ci sera
sollicité, plutôt que de charger toute l'application dès son démarrage. L'avantage de ce
mécanisme se situe évidemment au niveau des performances, puisque l'on va pouvoir
proposer un affichage de l'application beaucoup plus rapidement en ne chargeant que la partie
nécessaire (un module sera chargé lorsque sa route sera appelée), et en déferrant le
chargement des autres parties.

64
La figure ci-dessous montre un exemple de chargement des modules et des components dans
l‟application.

Figure 38 : Chargement des modules dans « app-routing.modules.ts ».

 L’architecture SOA

Notre plateforme est basée sur l‟architecture orientée services(SOA) qui est une approche
utilisée pour créer une architecture basée sur l‟utilisation d‟un ensemble des services (tels que
les services web RESTful qui remplissent certaines fonctions comme la production des
données et la fourniture des services par l‟appel d‟une URLs en http) [9].

Un service web est un composant logiciel identifié par une URI, dont les interfaces publiques
sont définies et appelées en XML. Ils sont transportés par les protocoles http mais qui peuvent
s‟appuyer sur d‟autres protocoles de transport. La consommation d‟un web service revient à
appeler une simple URL http (get, post, put, delete, update).

L‟implémentation de notre application en utilisant les services web permettant de produire un

système faiblement couplé.

SOA ayant comme objectif :

 Décomposer une fonctionnalité en un ensemble des services

 Augmenter les performances des organisations
 Réduire les couts
 Améliorer la flexibilité des processus.

La figure suivante présente cette architecture.

65
 Figure 39 : Architecture SOA.

La figure indiquée comme suit montre les services qui représentent l‟intermédiaire avec la
partie Back-end.

Figure 40 : L‟utilisation des services.

3. Conception logiciel détaillée

Cette partie présente la conception logicielle de notre application en se basant sur le langage
UML. Tout en respectant les contraintes du modèle MVC, nous allons construire une vue
statique sous forme de diagramme de classes et une vue dynamiques sous forme de
diagramme d‟activité et de séquences.

3.1. Vue dynamique

Les diagrammes de vue dynamique permettent de comprendre et de décrire le comportement

des objets et leurs interactions. Ces modèles offrent une vision microscopique du
fonctionnement du système. Ils servent à mettre en évidence des relations temporelles entre
les objets .nous allons représenter les aspects dynamiques entre les classes de notre
application à l‟aide des diagrammes d‟activités et des diagrammes de séquence.

3.1.1. Diagramme d’activité

 Définition

66
C‟est un diagramme associé à un objet particulier ou à un ensemble d‟objets, qui illustre les
flux entre les activités et les actions. Il permet de représenter graphiquement le déroulement
d‟un cas d‟utilisation [10].

Dans la phase de conception, les diagrammes d‟activités sont particulièrement adaptés à la

description des cas d‟utilisation en venant, par exemple , illustrer et consolider leur
description textuelle. Ainsi leur représentation est sous forme d‟organigrammes, ce qui les
rend utiles dans la phase de réalisation.

 Diagramme d’activité du cas d’utilisation « inscription » :

La phase d‟inscription est indispensable pour passer d‟un simple visiteur du site qui n‟a le
droit que de consulter les offres des stages et les annonces de formations à un candidat qui
peut postuler pour des offres de stage désirer et faire une préinscription aux formations .

Le processus d‟inscription d‟un nouvel utilisateur peut-être résume dans le diagramme

d‟activités suivantes de figure ci-dessous.

67
 Figure 41 : Diagramme d‟activité « Inscription ».

 Diagramme d’activité du cas d’utilisation « Modifier un offre de stage »

Modifier les offres des stages en ligne permet aux responsables des sociétés d‟organiser leurs
offres des stages ainsi les données de ces offres selon des secteurs différents, selon le type de
ce stage etc. Elles peuvent contenir des descriptions et des informations concernant ces stages.

Le processus de modification, peut-être résumé dans le digramme d‟activité suivant de figure

ci-dessous :

68
 Figure 42 : Diagramme d‟activité « Modifier une offre de stage ».

3.1.2. Diagramme de séquence détaillé

 Définition

Un diagramme de séquences est un diagramme d‟interaction qui expose en détail la façon

dont les opérations sont effectuées : quels messages sont envoyés et quand ils le sont, sont
organisés en fonction du temps qui s‟écoule au fur et à mesure que nous parcourons la page.

69
 Diagramme de séquence du cas d’utilisation « Authentification avec Spring Security,
JWT »

Spring Security nous permet de sécuriser l‟application d‟une manière statless en se basant sur
le token qui nous génère à partir de ce framework.

Pour utiliser notre token, il faut d‟abord le créer. Pour cela, il est nécessaire de s‟authentifier
avec son identifiant et son mot de passe auprès de l‟application afin que celle-ci nous renvoie
le token. Une fois le token obtenu, nous pouvons faire appel à nos URL sécurisées en
envoyant le token avec notre requête. La méthode la plus courante pour envoyer le token est
de l‟envoyer à travers l‟en-tête http Authorization.

Ce processus d‟authentification est représenté par la figure ci-dessous.

70
Figure 43 : Diagramme de séquence « authentification ».

71
 Diagramme de séquence du cas d’utilisation « Postuler à une offre »

Le diagramme de séquence présenté dans la figure ci-dessous illustre le déroulement de

l‟opération Postuler à une offre. Cette activité est privilégiée uniquement pour le candidat
adhérent, il doit remplir un formulaire puis une vérification doit être effectuée par le système.
Ensuite la classe « PostulerController Rest API » reçoit une requête avec les paramètres URI
« Postuler » et la méthode : POST et il invoque la méthode insert de l‟interface « Ipostuler
DAO » pour ajouter le CV et les informations du candidat à la base des données. La
responsable de société peut consulter les différents CV envoyées par les candidates.

72
Figure 44 : Diagramme de séquence « postuler pour une offre ».

73
 Diagramme de séquence du cas d’utilisation « ajouter offre de stage »

Le diagramme de séquence présenté dans la figure ci-dessous illustre le déroulement de

l‟opération « ajouter offre de stage». Cette activité est privilégiée uniquement pour la
responsable de société, il doit saisir les détails des offres de stage, puis une vérification doit
être effectuée par le système. Ensuite la requête est passée à la classe « StageController REST
API » qui appelle la méthode insert de « Istage DAO » pour accéder à la base de données.
Les informations de l‟offre de stage seront insérées dans notre base des données.

74
Figure 45 : Diagramme de séquence « ajouter une offre de stage ».

75
3.2. Vue statique

Pour cette section, nous illustrons l‟aspect statique de notre application en présentant le
diagramme de classes.

Le diagramme de classes est un schéma utilisé en génie logiciel pour présenter les classes et
les interfaces des systèmes ainsi que les différentes associations entre celles-ci. Ce diagramme
fait partie de la partie statique d‟UML car il fait abstraction des aspects temporels et
dynamiques.

Le schéma ci-dessous représente le diagramme de classes de notre application définissant les

entités du monde réel du système d‟information d‟une application.

76
Figure 46 : Diagramme de Classe.

77
4. Conception de la base de données
Dans cette section, nous présentons la conception détaillée de la base de données qui sera
stockée sur un serveur base de données. Nous commençons par présenter le modèle
conceptuel de données (MCD).

4.1. Modèle conceptuel de donnée (MCD)

Un modèle conceptuel des données identifie les entités métiers de notre application ainsi que
les relations entre elles. Nous avons identifié les entités suivantes :

 L‟entité « Utilisateur » : modélise tous les utilisateurs de l‟application, plusieurs

entités héritent de « Utilisateur »
 L‟entité « Rôle » : représente le rôle de chaque utilisateur.
 L‟entité « Commentaire» : représente le commentaire d‟un candidat sur une offre de
stage
 L‟entité « Secteur » : représente les différents secteurs aux qu‟elle appartient chaque
société
 L‟entité « Offre_stage » : représente la liste des offres de stage ajouté par la
responsable de société
 L‟entité « Formation » : représente la liste des formations ajoutées par la responsable
de centre de formation

La figure ci-dessous présente le modèle Entité/Association de notre base de données.

78
Figure 47 : Modèle Conceptuel de Données.

79
4.2. Modèle physique de données (MPD)

Un modèle physique de données (MPD) est une étape de définition des données à l‟intérieur
de la structure physique de l‟ordinateur c'est-à-dire le résultat de la décision technique qui a
été prise en fonction des objets et des contraintes techniques. Un Modèle Physique de
Données est un formalisme qui permet de préciser le système de stockage employé pour un
système de gestion de base de données. La figure suivante représente le modèle physique de
la base de données de notre application.

80
Figure 48 : Modèle Physique de Donnée.

81
5. Conception graphique
Le but du graphisme est de mieux faire comprendre les informations via un contenu visuel.
Elle permet d‟informer l‟utilisateur sur la manière de naviguer entre les différentes interfaces
de l‟application. À titre d‟exemple nous présentons quelques croquis traduisant les besoins de
ce projet ainsi le diagramme de navigation.

5.1. Diagramme de navigation

Dans cette partie, nous allons présenter le diagramme de navigation de notre site web tout en
détaillant quelques interfaces.

Les interfaces adressées à l‟admin

 L‟interface « établir statistique » : l‟admin peut consulter la statistique des candidats,

des sociétés et des centres de formations. il peut aussi consulter leurs détails.
 L‟interface « Gérer secteur » : l‟admin peut ajouter, modifier, supprimer des secteurs.

Les interfaces adressées aux responsables des sociétés

 L‟interface « gérée les offres des stages » : permet aux responsables des sociétés de
consulter leur espace et publier leurs offres des stages. elle permet aussi de supprimer
ou de modifier ses offres des stages.
 L‟interface « consulter liste des candidats » : les responsables des sociétés peuvent
consulter la liste des demandes des candidats, ainsi qu‟accepter ou bien refuser leur
demande.

Les interfaces adressées aux responsables des centres des formations

 L‟interface « gérée les annonces des formations » : permet aux responsables des
centres des formations de consulter leur espace et de publier leur annonces des
formations. elle permet aussi de supprimer ou de modifier ses annonces.
 L‟interface « consulter la liste des candidats préinscrit » : les responsables peuvent
consulter la liste des candidats qui font la préinscription.

Les interfaces adressées aux candidats

 L‟interface « gérée son profil » : permet aux utilisateurs de consulter leur profil et de
modifier leurs informations personnelles via le bouton „modifier‟.
 L‟interface « consulter les offres de stage » : permet aux candidats de consulter les
offres de stage.

La figure ci-dessous présente le diagramme de navigation de notre application web.

82
 Figure 49 : Diagramme de navigation.

6. Croquis de plateforme de notre application

Avant de commencer le développement technique de notre site web, nous allons nous
concentrer sur une étape importante dans la création d‟un site sur mesure : Croquis (sketch)
les croquis permettent d‟ajuster l‟aperçu global de l‟interface ou l‟idée générale sur les
besoins et de les concevoir de manière précise. En effet, les interfaces graphiques donnent une
vision claire de l‟application avant sa réalisation.

Dans ce qui suit, nous présentons deux exemples d‟interfaces que nous avons choisies parmi
les interfaces les plus importantes.

6.1. Partie admin

L‟utilisateur a la possibilité à partir de cette interface de consulter son espace et de gérer les
tâches et les détails qui lui sont effectués et qui sont sous sa responsabilité.

83
 Figure 50 : Interface pour l'admin.

6.2. Partie utilisateurs (Web)

Les utilisateurs (candidates, responsables société, responsable centre de formation) ont la

possibilité à partir de cette interface de consulter ses espace et des gères ses besoins.

Figure 51: Interface pour les utilisateurs (partie web)

84
6.3. Partie utilisateur (Mobile)

Figure 52: Interface pour les utilisateurs (partie Mobile)

85
6.4. Interface édite profile (partie Mobile)

Les utilisateurs (candidates, responsables société, responsable centre de formation) ont la

possibilité à partir de cette interface de modifier leur profiles.

Figure 53 : Interface édite profile (partie Mobile)

7. Conclusion
Nous venons de terminer cette partie de conception, qui consiste à déterminer aussi bien les
méthodes de travail que la conception graphique de notre site web avec ses parties statiques et
dynamiques.

Dans le chapitre suivant nous allons aborder la partie réalisation de notre site web d‟ou est
présentée l‟application finale, en se basant sur les mécanismes et les solutions déterminés
dans la phase de conception.

86
Chapitre 4 : Réalisation

87
1. Introduction
Après avoir terminé l‟étape de conception, on abordera tout d‟abord le chapitre réalisation.
Dans ce chapitre nous allons décider dans quel environnement nous allons travailler, exposer
les choix techniques utilisés et le langage adopté, et présenter l‟implémentation et les tests
réalisés.

2. Environnement et outils de travails

Cette section, décrit l‟environnement « matériel » mis à la disposition du notre projet ainsi
que l‟environnement « logiciel » qui nous a permis la mise en place de notre application.

2.1. Environnement matériel

Nous avons utilisé comme environnement matériel un ordinateur ACER qui possède ses
caractéristiques suivantes :

ordinateur Acer
Processus pentium
Mémoire vive (RAM) 4 GO DDR3
Disque Dur 300 GO
Système d‟exploitation Windows 7 professionnel

Tableau 7 : Caractéristiques d‟environnement matériel.

Pour tester les fonctionnalités de notre application mobile nous avons utilisé un Smartphone
Samsung S5 comme le montre le tableau suivant.

Système Android8.1 Oreo (Go Mémoire vivre(RAM) 16 Go, 4GoRAm

Edition)

Résolution 960*540 pixels Mémoire flash Libre(MO) 25180

Processeur QuadCore, 1.4GHz Batterie 2600 mAh

Tableau 8 : Caractéristiques du Smartphone utilisé.

2.2. Environnement logiciel

Dans cette partie, nous détaillons les logiciels utilisés lors de la phase de conception et la
phase développement illustrée par les deux tableaux suivants.

2.2.1. Outils de conception

Tableau 9: Outils de conception.

Outil Description Utilisation

Visual Paradigm Logiciel de modélisation UML. Création des diagrammes

88
 UML comme diagramme de
cas d‟utilisation, de
séquence, d‟activité et
diagramme de classe.
Latex Ensemble de programmes libres Créer le rapport de notre
pour le traitement de texte projet, le traiter et sa mise en
scientifique, nous utilisons pour page.
créer notre rapport le traiter et
sa mise en page.
Balsamiq Mockup Outil de maquettage et de Réaliser les croquis de notre
wireframing qui permet de créer application.
des designs graphiques
d‟interface utilisateur pour des
applications desktop, web et
mobiles.
Power AMC Logiciel de modélisation. Il Créer le diagramme MCD et
permet de modéliser les MPD.
traitements informatiques et
leurs bases de données
associées.

2.2.2. Outils de développement

Tableau 10 : Outils de développement.

Outil Description Utilisation

Web Storm Est un IDE pour les langages On a utilisé comme IDE pour
Web (HTML, CSS et Angular 7 tous le long de
JavaScript) développé par phase de développement.
l‟entreprise JetBrains et basé sur
la plateforme Intellij IDEA. Il
offre un support avancé pour est
framework populaire comme
Angular, Nodejs React, etc.
HTML 5 C‟est un langage qui permet de Nous l‟avons utilisé pour
composer des pages web. créer les pages de notre site
web. Création de pages de
notre site web.

CSS3 Est un langage de style qui Gérer l‟apparence de la page

définit la présentation des web (agencement,
documents HTML. Par exemple, positionnement, décoration,
CSS couvre les polices, les couleurs.)
couleurs, les marges…

Intellij IDEA Intellij IDEA a été développé On a utilisé comme un IDE

89
 par JetBrains, anciennement pour Spring boot tout le long
connu sous le nom d‟IntelliJ. Il de la phase de
offre des fonctionnalités telles développement.
que la navigation avancée dans
les codes et la possibilité de ré-
factoriser les codes, ce qui en
faisait un produit très populaire.
Il a même reçu la distinction
d‟être élu meilleur outil de
programmation basé sur Java en
2010, en mettant à l‟écart des
outils bien établis tels que
NetBeans, Eclipse et
JDévelopper.
Postman Une application moderne est Utilisé pour le test d‟API,
construite sur des APIs. Il est le pour le construire et de tester
plus complet API pour les rapidement des requêtes http.
développeurs et 10000
entreprises dans le monde.

PhpMyAdmin Est une application web de Permet d‟exécuter, très

gestion pour les systèmes de facilement et sans grandes
gestion de base de données connaissances dans le
MySQL réalisée en PHP et domaine des bases de
distribuée sous licence GPL. Il données, de nombreuses
s‟agit de l‟une des plus célèbres requêtes comme les créations
interfaces pour gérer une base de de table de données, les
données MySQL sur un serveur insertions, les mises à jour,
PHP. De nombreux hébergeurs, les suppressions, les
qu‟ils soient gratuits ou payants, modifications de structure de
le proposent ce qui permet à la base de données.
l‟utilisateur de ne pas avoir à
l‟installer.
WampServer WampServer tient son nom des Serveur de notre base de
trois logiciels, Apache le serveur donné
http, MySQL le gestionnaire de
base de données et PHP le
langage de programmation. Il est
une plateforme de
développement web sous
Windows pour des applications
web dynamique. Il englobe tous
les outils nécessaires pour le
fonctionnement d‟une
application web et il possède
également une interface de
gestion des bases des données
faciles à utiliser PHPMyAdmin

90
3. Plateformes de développement utilisé pour l’application Web
3.1. Angular 7

Angular est un framework javascript open source développé par Google. Est l‟une des
Framework les mieux réputés et les plus utilisées par les développeurs de front-end. Ce
framework est utilisé pour développement des applications web en java script (Typescript)
permettant de respecter le modèle d‟architecture MVVM et basé sur des composants
côté présentation [13].

La figure ci-dessous représente l‟architecture globale d‟Angular.

Figure 54 : Architecture globale d‟Angular [14].

Le framework Angular qui est basé sur plusieurs concepts, nous détaillons dans la suite
quelques-uns :

 Le module : c‟est une classe type script avec le décorateur @NgModule, c‟est la
première structure de base dans Angular il est un peu comme un package java. Une
application Angular est composée d‟au moins un module. La figure suivante présente
une capture d‟écran du module AppModule pris de notre code.

91
 Figure 55 : Capture d‟écran du module AppModule.

 Le composant : c‟est une classe type script avec le décorateur @Component. Il

représente une vue de l‟application. Une application Angular est un arbre de
composants Angular. La figure suivante présente une capture d‟écran du composant
AppComponent pris de notre code.

Figure 56 : Capture d‟écran du composant AppComponent.

 Le service : c‟est une classe type script avec le décorateur @Injectable. Il sert à
partager des données entre le composant, ou bien factorisé un traitement réutilisable.
La figure suivante présente une capture d‟écran du service CandidatService pris de
notre code.

92
 Figure 57 : Capture d‟écran du service CandidatService.

3.2. SpringBoot

Spring boot est un framework Java open source utilisé pour créer un Micro Service. Il est
développé par l‟équipe pivot. Il est facile de créer des applications de printemps autonomes et
prêts à la production avec Spring Boot. Spring Boot contient une prise en charge complète de
l‟infrastructure pour le développement d‟un micro-service [15]. La figure ci-dessous présente
une capture d‟écran de la structure de notre application générée par Spring Boot.

Figure 58 : Arborescence du notre projet Spring Boot.

Le type de retour de données de micro service sous format JSON (JavaScript Object Notation)
c‟est un format de données qui est léger, facile à lire et écrire pour les humains et il est
aisément analysable par les machines. Il est basé sur le langage JavaScript [16].

Comme l‟indique la figure ci-dessous exemple d‟ajout d‟un admin.

93
 Figure 59 : Données sous format JSON.

3.3. Spring Security

Est un cadre d‟authentification et de contrôle d‟accès puissant et hautement personnalisable.

C‟est la norme de facto pour la sécurisation des applications basées sur Spring boot. Il est une
framework qui fournit à la fois l‟authentification et l‟autorisation aux applications Java [17].
Parmi les fonctionnalités offertes par Spring Security, le cryptage de mot de passe. Comme
l‟indique la figure ci-dessous.

Figure 60 : Cryptage de Mot de passe.

4. Plateformes de développement utilisées pour l’application mobile

4.1. Ionic et cordova

Ionic est un framework open source utilisé pour développer des applications mobiles. Il
fournit des outils et des services pour créer une interface utilisateur mobile avec une
apparence et une convivialité natives. Ionic Framework nécessite un wrapper natif pour
pouvoir fonctionner sur des appareils mobiles.

Il s‟agit d‟un didacticiel d‟introduction couvrant les bases d‟Ionic open source framework et
expliquant comment gérer des divers composants et sous-composants.

Figure 61 : Logo Ionic.

94
4.2. Android SDK

L‟Android SDK est le kit de développement propose par Google aux développeurs souhaitant
programmer des applications pour terminaux mobiles tournant sous Android.

Figure 62 : Logo Android SDK.

5. Travail réalisé
Dans cette partie, on présentera quelques interfaces de notre application web et mobile en
montrant les fonctionnalités les plus importantes de cette plateforme.

5.1. Application Web côté Administrateur

5.1.1. Interface « Accueil »

L‟interface présentée dans ce qui suit, apparaît chaque fois que l‟admin est authentifié. C‟est
elle qui permet de démarrer la navigation. Cette interface permet à l‟administrateur de site de
gérer les secteurs, gérer les sociétés et les centres de formations et consulter les statistiques
relatives au nombre des sociétés et des centres de formations inscrites.

Figure 63 : Interface « Accueil ».

5.1.2. Interface « Gestion des Secteurs »

Cette interface englobe les opérations classiques qui peuvent être exécutées par
l‟administrateur à un secteur tel que l‟ajout, la modification, la suppression.

La figure ci-dessous décrit l‟interface Gestion des secteurs.

95
 Figure 64 : Interface « Gestion des Secteurs ».

5.1.3. Interface « Gérer les sociétés »

L‟interface présentée par la figure ci-dessous montre la liste des sociétés inscrites dans la
plateforme. À partir de cette interface l‟admin peut gérer les différentes sociétés, en cliquant
sur le bouton « Detaille », les détails des sociétés seront affichés. L‟admin peut aussi
supprimer un compte d‟une société en cliquant sur le bouton « Supprimer ».

Figure 65 : Interface « Gérer les sociétés »

5.2. Application Web côté Client

5.2.1. Interface « Page D’accueil »

Dans cette interface, le candidat a le droit d‟accès de consulter les offres de stage et les
annonces de formations mais il n‟a pas le droit de postuler à une offre ou de faire une
préinscription a une formation qu‟après l‟inscription et l‟authentification. La figure ci-dessous
décrit l‟interface « Page D‟accueil ».

96
 Figure 66 : Interface « Page D‟accueil ».

5.2.2. Interface « Authentification »

Les utilisateurs (Responsable société, Responsable centre de formation, Candidat) doivent

obligatoirement remplir les deux champs pour se connecter. Les figures ci-dessous présentent
l‟interface d‟inscription et le contrôle des champs (username et password) lors de
l‟authentification de l‟utilisateur.

97
Figure 67 : Interface « Inscription ».

Figure 68: Interface «Login».

98
 Figure 69 : Alerte de contrôle des champs.

5.2.3. Interface « Détails Offre de stage »

En cliquant sur « Détaille » dans la page d‟accueil, l‟interface « offres de stage » apparaît
comme l‟indique la figure suivante. Elle affiche les détailles de cette offre ( titre de l‟offre,
nom de la société ,la logo de société, la date de début et la date de fin de stage et la durée de
stage , le type de stage , les technologies utilisés et quelques informations sur la société). Un
message affiché indique que le candidat doit être inscrit pour qu‟il puisse postuler.

99
 Figure 70 : Interface «Détaille offre de stage».

Après avoir inscrit et authentifier un bouton « postuler » est affiché à côté de titre de l‟offre
comme l‟indique la figure suivante. Le candidat peut postuler à cette offre en cliquant sur ce
bouton pour envoyer leur CV.

100
 Figure 71 : Interface «Détaille offre de stage» après l‟authentification.

Figure 72 : Interface «Postuler».

5.2.4. Interface « Espace société »

Le responsable de société peut ajouter une nouvelle offre de stage en ajoutant toutes les
informations concernant l‟offre et de consulter la liste des candidates postulés à cette offre à
partir de cette interface.

101
 Figure 73 : Interface «Espace Entreprise».

Liste des candidates postulées à une offre de stage.

Figure 74 : Interface «Les demandes des stage».

5.2.5. Interface « Publier une offre de stage »

L‟interface présentée par la figure suivante montre l‟interface « publier une offre de stage ».
Le responsable de société peut ajouter une nouvelle offre en ajoutant toutes les informations
concernant l‟offre.

102
 Figure 75 : Interface « publier une offre de stage ».

5.3. Application Mobile

Comme nous avons cité précédemment, notre application mobile est dédiée aux responsables
des sociétés, aux responsables des centres de formation et aux candidats. Cette application est
accessible depuis un Smartphone. Nous allons illustrer dans la suite quelques interfaces de
cette application pour mieux montrer son fonctionnement.

5.3.1. Interface « Page d’accueil »

Dans cette interface, le candidat a le droit d‟accès de consulter les offres de stage et les
annonces de formations mais il n‟a pas le droit de postuler à une offre ou de faire une
préinscription a une formation qu‟après l‟inscription et l‟authentification.

103
 Figure 76 : Interface « Page d‟accueil ».

5.3.2. Interface « Authentification »

L‟utilisateur (responsable société, responsable centre de formation, candidat) doit entrer son
nom d‟utilisateur et son mot de passe pour accéder à leur espace.

104
 Figure 77 : Interface « Authentification ».

5.3.3. Interface « Editer Profil »

Apres avoir authentifié l‟utilisateur peut éditer leur profil a partir de cette interface.la figure
suivante présente l‟interface éditer profil pour un candidat.

105
 Figure 78 : Interface « Editer Profil ».

5.3.4. Interface « Détaille offre de stage »

En cliquant sur l‟offre de stage dans la page d‟accueil, l‟interface « offres de stage » apparaît
comme l‟indique la figure suivante. Elle affiche les détailles de cette offre ( titre de l‟offre,
nom de la société ,la logo de société, la date de début et la date de fin de stage et la durée de
stage , le type de stage , les technologies utilisés et quelques informations sur la société). Un
message affiché indique que le candidat doit être inscrit pour qu‟il puisse postuler.

106
 Figure 79 : Interface « Détaille offre de stage ».

La page d‟accueil contient que les offres de stage et à partir de ce bouton qui situait au-
dessous de la page d‟accueil le candidat peut consulter la liste des sociétés, la liste des centres
de formation et les annonces des formations.

107
 Figure 80 : Interface Menu

5.3.5. Interface « liste sociétés »

En cliquant sur « Sociétés» dans la barre de menu, l‟interface « Liste des sociétés » apparait
comme l‟indique la figure suivante. Cette interface donne la liste des sociétés inscrites dans
« GetTraining», ainsi que quelques détails sur chaque société.

108
 Figure 81 : Interface « liste sociétés ».

Figure 82 : Interface « Centre de formation ».

109
5.3.6. Interface « Publier une offre de stage »

Le responsable de société peut ajouter une nouvelle offre après l‟authentification en ajoutant toutes
les informations concernant l‟offre.

Figure 83: Interface « Publier une offre de stage ».

6. Conclusion
Tout au long de ce chapitre, on a présenté un manuel d‟utilisation de l‟application à
travers des interfaces sous forme de scénario pour faciliter la compréhension pour l‟utilisateur
de l‟application.

Dans ce qui suit, on clôture le présent rapport par une conclusion générale et une perspective.

110
Conclusion et perspectives
Ce travail s‟inscrit dans le cadre du projet de fin d‟études en vue de l‟obtention du diplôme de
mastère professionnel en génie logiciel. Il a pour objectif de concevoir et de développer une
application web et mobile facilite la recherche du stage intitulé « GetTraining » au sein de la
boite de développement « ITGate ».

Ce travail se résume en la conception et la réalisation d‟une application dédiée aux stages et

formations, il se présente comme un outil d‟aide à la décision permettant à l‟utilisateur (que
ce soit un responsable de société/centre de formation ou un candidat) de prendre la bonne
décision ou de chercher la meilleure offre pour sa demande. L‟application permet aux
responsables de publier leurs offres de stage et les annonces de formation et facilite la
recherche du stage ou bien formation au candidat.

Quant à la conception générale est détaillé UML est utilisé comme langage de modélisation
et 2TUP comme méthodologie de développement. Ainsi la réalisation faite avec «Angular 7 »,
« Spring boot » comme langage de programmation et « MySql » comme système de gestion
de base de données.

Cette application me donne l‟occasion de maitriser de nouveaux langages de programmation

que seront utiles dans ma future vie professionnelle.

Tout travail reste toujours à améliorer c‟est pour cela que j‟ai essayé de développer cette
application de façon qu‟elle sera extensible à l‟ajout d‟autres fonctionnalités permettant
d‟enrichir ce projet.

Par ailleurs cette application peut être enrichie en :

- Ajoutant à l‟application une évaluation pour l‟offre (le candidat peut donner son avis à-
propos d‟une offre par « aime » ou « aime pas »). De cette façon l‟entreprise peut se
renseigner sur les offres les plus intéressantes aux candidats.

- Elevant le niveau de sélection des candidats en introduisant de nouvelles recommandations.

- Permettant aux utilisateurs la possibilité de commenter une offre on leur offrir plus d‟espace
plus ouvert de communication entre le candidat, le recruteur et l‟admin.

111
Bibliographie
[1] http ://www.responsive-mind.fr/cycles-developpement-informatique/

[2] https ://www.google.com/search ?q=uml+de_nition+en+francais&source=lnms&

tbm=isch&sa=X&ved=0ahUKEwid9szI2bXiAhUKThUIHcOQACEQ AUIDigB&biw

=1366&bih=625#imgdii=TFsebQ20PSFjoM :&imgrc=wA6UdvtKdm YXM :

[3] https ://fr.scribd.com/doc/57496887/U-M-L-Methode-2TUP

[4] https ://www.npmtrends.com/angular-vs-nodejs-vs-react-native

[5] https ://db-engines.com/en/ranking trend/relational+dbms

[6] https ://docplayer.fr/6500611-Architectures-et-web.html

[7] https ://openclassrooms.com/fr/courses/26832-apprenez-a-programmer-enjava/

25552-structurez-mieux-votre-code-avec-le-pattern-mvc.

[8] https ://www.journaldev.com/20292/android-mvvm-design-pattern.

[9] SOA Components In Life Insurance - Policy Administration Systems j FAST -

Blog

[10] http ://docwiki.embarcadero.com/RADStudio/Rio/fr/D%C3%A9_nition des

diagram

mes d%27activit%C3%A9s UML 2.0

[11] https ://openclassrooms.com/fr/courses/2035826-debutez-lanalyse-logicielle-

avecuml/

2048781-les-di_erents-types-de-diagrammes

[12] https ://openclassrooms.com/fr/courses/4055451-modelisez-et-implementez-

unebase-

de-donnees-relationnelle-avec-uml/4457193-apprehendez-les-objets-et-le-
modelerelationnel

[13] https ://blog.invivoo.com/les-nouveautes-dans-angular-7/

[14] https ://www.google.com/search

?q=architecture+angular+7&source=lnms&tbm=isch

&sa=X&ved=0ahUKEwjR-9P48tPiAhWABWMBHWjFBn4Q AUIECgB&biw=1242&

112
bih=568#imgrc=qJg7BSIoWmPq1M :

[15] https ://www.tutorialspoint.com/spring boot/index.htm

[16] https ://en.wikipedia.org/wiki/JSON

[17] https ://spring.io/projects/spring-security

113
114
115