Dédicaces

Pour ceux qui ont cru en moi,

Ceux qui m’ont aimé et supporté,

Pour ceux qui ont fait de moi, ce que je suis aujourd’hui,

Maman, Papa,

Mes sœurs et toute la famille,

Mes très chers amis,

Je présente ce modeste travail grâce à vous et pour vous...

I
 Remerciement

C'est avec un grand plaisir que nous réservons cette page en signe de gratitude et

de reconnaissance à tous ceux qui ont assisté ce travail.

Je tiens particulièrement à remercier mon encadrante à l’Ecole Nationale

d’électronique et des télécommunications de Sfax, Mme Hazar Mliki, pour sa

disponibilité, sa patience, ses encouragements, son encadrement de qualité et

pour tous ses conseils judicieux tout au long de notre projet.

Mes vifs remerciements accompagnés de toute mes gratitudes s’adressent

également à mon encadrante professionnelle Mme Jamila Khlif et toute l’équipe

de Rec-inov pour leur accueil chaleureux, pour leurs aides et précieux conseils,

pour le temps alloué et les efforts fournis à me guider et à m’intégrer dans

l’environnement de travail.

Je tiens également à exprimer ma gratitude aux membres de jury, le président

Mr. Achref Mtibaa et l’examinatrice Mme. Emna Kallel d’avoir accepter

d’évaluer ce travail.

Enfin, J’exprime ma grande reconnaissance à tous mes enseignants pour la

formation de qualité qu’ils m’ont prodiguée tout au long de mon cursus

universitaire au sein de l’Ecole Nationale d’électronique et des

télécommunications de Sfax

II
 Table des matières
Introduction générale ............................................................................................................... 1
Chapitre 1 : Etude Préalable ................................................................................................... 2
Introduction ............................................................................................................................ 2
1 Cadre du projet .................................................................................................................... 2
1.1 Présentation de l’organisme d’accueil ......................................................................... 2
1.2 Contexte général du projet............................................................................................ 4
2 Problématique et étude de l’existant .................................................................................... 5
2.1 Problématique ............................................................................................................... 5
2.2 Etude de l’existant......................................................................................................... 5
2.3 Critiques de l’existant ................................................................................................... 8
3 Objectifs et solution proposée ............................................................................................. 8
4 Spécification des besoins ..................................................................................................... 9
4.1 Besoins fonctionnels...................................................................................................... 9
4.2 Besoins non fonctionnels............................................................................................. 12
5 Méthodologie de travail ..................................................................................................... 12
5.1 Les méthodes Agiles .................................................................................................... 13
5.2 Définition des sprints .................................................................................................. 14
6 Organigramme du projet .................................................................................................... 15
Conclusion ............................................................................................................................ 16
Chapitre 2 : Etude conceptuelle ............................................................................................ 17
Introduction .......................................................................................................................... 17
1 Modélisation avec UML .................................................................................................... 17
1.1 Définition de UML ...................................................................................................... 17
1.2 Diagrammes de UML .................................................................................................. 17
1.3 Diagramme des cas d’utilisation ................................................................................ 17
1.4 Diagramme de classes ................................................................................................ 18
1.5 Diagramme de séquence ............................................................................................. 18
2 Diagrammes des cas d’utilisation ...................................................................................... 18
2.1 Identification des acteurs ............................................................................................ 18
2.2 Diagramme de cas d’utilisation global....................................................................... 18
2.3 Diagramme de cas d’utilisation du recruteur ............................................................. 20
2.4 Diagramme de cas d’utilisation du candidat .............................................................. 23
2.5 Diagramme de cas d’utilisation de l’admin................................................................ 26
3 Description des diagrammes de séquences ........................................................................ 27
3.1 Diagramme de séquence du cas d’utilisation « Authentification » ............................ 27
3.2 Diagramme de séquence du cas d’utilisation « Ajouter une offre » ........................... 28
3.3 Diagramme de séquence du cas d’utilisation « Modifier une offre » ......................... 29
3.4 Diagramme de séquence du cas d’utilisation « Consulter une offre » ....................... 30
3.5 Diagramme de séquence du cas d’utilisation « Postuler à une offre » ...................... 31

III
 4 Description du diagramme de classes ................................................................................ 32
Conclusion ............................................................................................................................ 34
Chapitre 3 : Réalisation de l’application.............................................................................. 35
Introduction .......................................................................................................................... 35
1 Environnement du travail .................................................................................................. 35
1.1 Outils utilisés .............................................................................................................. 35
1.2 Framework utilisés...................................................................................................... 37
1.3 Langages utilisés ......................................................................................................... 39
2 Architecture de l’application ............................................................................................. 40
2.1 La couche présentation ............................................................................................... 41
2.2 La couche métier ......................................................................................................... 42
2.3 La couche de données ................................................................................................. 42
2.4 Choix de l’architecture côté serveur ........................................................................... 42
3 Captures des interfaces implémentées ............................................................................... 43
3.1 L’Authentification ....................................................................................................... 43
3.2 Mis à jour du profil ..................................................................................................... 45
3.3 Postulation à des offres ............................................................................................... 47
3.4 Gestion des offres ........................................................................................................ 49
3.5 Gestion des candidatures ............................................................................................ 49
3.6 Gestion des entretiens ................................................................................................. 50
3.7 Gestion des responsables ............................................................................................ 51
3.8 Gestion des utilisateurs ............................................................................................... 52
3.9 Gestion des emails ...................................................................................................... 53
Conclusion ............................................................................................................................ 54
Conclusion générale ............................................................................................................... 55

IV
 Liste des figures

Figure 1 : logo Rec-Inov ............................................................................................................ 3

Figure 2 : Page d’accueil du Site officiel de Rec-inov ............................................................... 4
Figure 3 : Logo Keejob .............................................................................................................. 6
Figure 4 : Site officiel Keejob .................................................................................................... 7
Figure 5 : Logo Fabskill ............................................................................................................. 7
Figure 6 : Site officiel de Fabskill .............................................................................................. 8
Figure 7 : Méthode SCRUM .................................................................................................... 14
Figure 8 : Diagramme de Gantt ................................................................................................ 16
Figure 9 : Diagramme de cas d’utilisation global .................................................................... 19
Figure 10 : Diagramme de cas d’utilisation du recruteur ......................................................... 20
Figure 11 : Diagramme de cas d’utilisation du candidat .......................................................... 24
Figure 12 : Diagramme de cas d’utilisation de l’admin ........................................................... 26
Figure 13 : Diagramme de séquence du cas d’utilisation « Authentification » ....................... 28
Figure 14 : Diagramme de séquence du cas d’utilisation « Ajouter Offre » ............................ 29
Figure 15 : Diagramme de séquence du cas d’utilisation « Modifier Offre » .......................... 30
Figure 16 : Diagramme de séquence du cas d’utilisation « Consulter Offre » ........................ 31
Figure 17 : Diagramme de séquence du cas d’utilisation « Postuler à Offre » ........................ 32
Figure 18 : Diagramme de classes ............................................................................................ 33
Figure 19 : Logo vs code .......................................................................................................... 35
Figure 20 : Logo Postman ........................................................................................................ 36
Figure 21 : Logo mongo DB Compass..................................................................................... 36
Figure 22 : Logo Bitbucket ...................................................................................................... 36
Figure 23 : Logo Trello ............................................................................................................ 37
Figure 24 : Logo draw.io .......................................................................................................... 37
Figure 25 : Logo React js ......................................................................................................... 37
Figure 26 : Logo Node JS ........................................................................................................ 38
Figure 27 : Logo Express JS .................................................................................................... 38
Figure 28 : Logo MongoDB ..................................................................................................... 38
Figure 29 : Logo Bootstrap ...................................................................................................... 39
Figure 30 : Logo langage javascript ......................................................................................... 39
Figure 31 : Logo HTML........................................................................................................... 39
Figure 32 : Logo CSS ............................................................................................................... 40
Figure 33 : Architecture 3-tiers ................................................................................................ 41
Figure 34 : Architecture de conception MVC .......................................................................... 42
Figure 35 : Processus de l'authentification avec JWT .............................................................. 44
Figure 36 : Interface de login ................................................................................................... 45
Figure 37 : Interface d’inscription ............................................................................................ 45
Figure 38 : Interface du profil candidat .................................................................................... 46
Figure 39 : Interface du profil d’entreprise .............................................................................. 46
Figure 40 : Interface de remplissage du cv .............................................................................. 47
Figure 41 : Dashboard du candidat .......................................................................................... 48

V
Figure 42 : Interface des détails d’une offre............................................................................. 48
Figure 43 : Interface de la gestion des offres ........................................................................... 49
Figure 44 : Interface de la gestion des candidatures ................................................................ 50
Figure 45 : Interface de suivi des candidatures ........................................................................ 50
Figure 46 : Interface de gestion des entretiens ......................................................................... 51
Figure 47 : Interface d’entretien (visioconférence) .................................................................. 51
Figure 48 : Interface de gestion des responsables .................................................................... 52
Figure 49 : Dashboard de l’admin ............................................................................................ 52
Figure 50 : Interface de gestion des candidats ......................................................................... 53
Figure 51 : Interface de gestion des entreprises ....................................................................... 53
Figure 52 : Interface de la liste des emails ............................................................................... 54
Figure 53 : Interface de modification des emails ..................................................................... 54

VI
 Liste des tableaux

Tableau 1 : Tableau des sprints ................................................................................................ 15

Tableau 2 : Cas d'utilisation "Ajouter une offre" ..................................................................... 20
Tableau 3 : Cas d'utilisation "modifier offre" .......................................................................... 21
Tableau 4 : Cas d'utilisation "supprimer offre" ........................................................................ 22
Tableau 5 : Cas d’utilisation "Modifier compte" ..................................................................... 22
Tableau 6 : Cas d’utilisation "Planifier entretien" ................................................................... 23
Tableau 7 : Cas d’utilisation "Consulter les offres" ................................................................. 24
Tableau 8 : Cas d’utilisation "Créer compte" ........................................................................... 25
Tableau 9 : Cas d’utilisation "S’authentifier" .......................................................................... 25
Tableau 10 : Cas d’utilisation "Archiver compte" ................................................................... 26
Tableau 11 : Cas d’utilisation "Supprimer compte" ................................................................. 27

VII
 Introduction générale

Le recrutement a pour objectif de prendre des décisions, généralement c’est un choix de

positionnement suivant les profils adéquats. Il faut mettre en place une stratégie de
recrutement en accord avec la stratégie de l’entreprise. Le but, avant tout, est de trouver les
moyens qui nous permettent d’atteindre nos objectifs dans les meilleures conditions. Par
conséquent, chaque entreprise adopte ses propres stratégies ainsi que ses propres choix
techniques.
Au-delà, avec la mondialisation des marchés, les entreprises doivent s’adapter et agir avec
vivacité. Pour cela, l’entreprise « Rec-Inov » propose d’implémenter une nouvelle plateforme
de recrutements et d’entretiens qui permet d’améliorer les fonctionnalités et d’augmenter le
pourcentage d’embauche. Avoir une plateforme de recrutements et d’entretiens englobant
toutes les fonctionnalités et facilitant le processus du recrutement est l’un de ses objectifs.
Dans ce cadre s’inscrit notre projet de fin d’études qui consiste à concevoir et à développer
une plateforme de gestion d’entretiens et de recrutements assurant une nouvelle vision de
recrutement adoptée à l’entreprise « Rec-Inov ».
Ainsi, ce rapport est divisé en trois chapitres :
Le premier chapitre est consacré à la présentation du contexte du projet au cours duquel nous
présentons l’organisme d’accueil. Nous présentons l’étude de l’existant avec les problèmes
rencontrés puis nous dégageons la solution que nous avons adoptée ainsi que la méthodologie
de travail. Ainsi, nous analysons la faisabilité de notre solution en spécifiant les besoins
fonctionnels et non fonctionnels de l’application à développer.
Dans le deuxième chapitre, nous exposons la conception de l’application. Nous mettons alors
l’accent sur les diagrammes de cas de l’utilisation de séquences et le diagramme de classes.
Quant au dernier chapitre, nous le dédions à la phase de réalisation. Nous présentons notre
environnement du travail, l’architecture de notre application ainsi que la démarche de notre
travail appuyé par des captures d’écran.
Enfin nous clôturons ce manuscrit par une conclusion et quelques perspectives.

1
 Chapitre 1 : Etude Préalable

Introduction

Ce chapitre est consacré à la présentation de l'organisme d'accueil, suivie d’une présentation

du contexte général du projet. Ensuite nous élaborons une étude sur les applications déjà
existantes sur le marché suivie par une critique de l'existant.
Nous clôturons ce chapitre par une identification des objectifs du projet ainsi qu'une étude des
besoins fonctionnels et non fonctionnels et un chronogramme décrivant la planification du
projet tout au long de sa réalisation.

1 Cadre du projet

Le projet réalisé durant cette période de stage de six mois est une réponse aux besoins de
l’entreprise « Rec-Inov » d’intégrer une nouvelle plateforme des recrutements. Cette nouvelle
plateforme doit répondre aux besoins du recruteur et du candidat, d’où sa naissance sous le
titre : « Plateforme de gestion des recrutements ».
Ce travail se situe dans le cadre du projet de fin d’études au sein de l’entreprise « Rec-Inov »
en vue de l’obtention du diplôme d’ingénieur en informatique industrielle à l’Ecole Nationale
d’Electronique et Télécommunications de Sfax.

1.1 Présentation de l’organisme d’accueil

Cette partie sera consacré à la présentation de l’organisme d’accueil, commençons par une
présentation générale de l’entreprise puis ses objectifs et finalement ses domaines d’activités

1.1.1 Présentation générale

« Rec-Inov » est une startup labialisée spécialisée dans le domaine de recrutement en ligne.
La société « Rec-Inov » est située à Sfax, Tunisie, fondée en 2020 et fait partie de l'industrie
des services de technologie de l'information. Elle compte 12 membres au total.
La figure 1 présente le logo du startup « Rec-Inov ».

2
 Figure 1 : logo Rec-Inov

1.1.2 Objectifs

« Rec-Inov » a deux objectifs primordiaux, l’innovation et l’exécution.

L’innovation est le fait de créer et fournir des bases et des opportunités à l’équipe qui
développera des solutions innovantes afin de répondre aux besoins des clients actuels et
futurs.
L’exécution se manifeste par la création d’un environnement qui permettra à l’équipe à
travers le monde, de donner vie à leurs idées et de tenir les promesses faites à ses clients.

1.1.3 Les domaines d’activités

Les domaines d’activités de l’entreprise « Rec-Inov » sont :

- Intelligence artificielle : Pour assurer un matching intelligent et bien cibler les meilleurs
profils.
- MERN Stack : MERN c’est une combinaison de 4 technologies “mongodb, express,
ReactJs, NodeJs”, permettant de créer un site de recrutement en ligne (Frontend et
Backend).
- Blockchain : (Smart Contract, Doc Sign) pour automatiser et sécuriser les informations
des contrats.
La figure 2 présente l’interface d’accueil du site officielle du startup « Rec-inov ».

3
 Figure 2 : Page d’accueil du Site officiel de Rec-inov

1.2 Contexte général du projet

Aujourd'hui le recrutement en ligne est une véritable révolution du recrutement.

Le recrutement électronique fait référence à la méthode de recrutement sans papier.
Cette nouvelle pratique est de plus en plus répandue dans les entreprises car c'est un moyen
plus rapide et pratique de définir et de gérer les processus de recrutement. [1]
C'est aussi un moyen plus pratique pour les candidats qui peuvent multiplier le nombre de
leurs candidatures grâce au flux d'offres en ligne. [2]

1.2.1 Avantages et inconvénients de l’e-recruitment

Parmi les avantages du domaine de e-recruitment, nous citons :

- Faciliter le déroulement des procédures de recrutement.
- Offrir une solution économique pour le recruteur et même le candidat, sans avoir
l’obligation de se déplacer.
- Faciliter la sélection des meilleures personnes ayant les compétences requises.
- Donne un accès 24 X 7 à une collection en ligne de CVs
Toutefois, nous soulignons les inconvénients suivants :
- Suite à la facilité de la diffusion des opportunités d’emploi, il y aura une large gamme des
CVs et des candidatures à traiter.

4
- Avec le recrutement en ligne, il peut être difficile de cibler un groupe spécifique de
candidats et votre offre sera vue par de nombreuses autres personnes, ce qui représente
une lourde charge de travail. [3]

1.2.2 Description du domaine

Grâce à la digitalisation des procédures de recrutement, le recruteur est de plus en plus proche
de son candidat. Aujourd’hui, le concept de e-recrutement est devenu important.
Dans notre travail, nous allons s'intéresser à la partie de gestion de recrutement.
En effet, la gestion du recrutement touche différentes phases, citant, la diffusion d’offres, la
réception, le tri, l’analyse et la sélection des candidatures et les entretiens d’embauches.
Pour un grand nombre de candidatures à traiter, la gestion du recrutement peut demander des
ressources internes importantes.
C’est dans un souci d’optimisation et de simplification du processus que des outils de gestion
ont été créés spécialement pour le recrutement afin de faire disparaître les tâches
administratives et chronophages et laisser place à l’essentiel : la sélection des meilleures
candidatures.

2 Problématique et étude de l’existant

Nous entamons cette section par la description du problématique suivie par une étude de
l’existant.

2.1 Problématique

Le recrutement est un enjeu majeur pour les entreprises et les candidats. Cependant, trouver
les meilleurs talents peut être long et ennuyeux, gaspiller du temps et de l’argent, et exige une
organisation bien huilée. D’autre part, ces recrutements se passent généralement à travers des
plateformes, et suite à leurs diversités, le candidat se trouve devant un grand choix d’offres et
peut passer des heures sans trouver celles qui conviennent à ses aspirations. En plus, le
manque d’aspect interactif et des algorithmes de recherche assez intelligents rendent
l'expérience du candidat très pénible et lourde.

2.2 Etude de l’existant

Faire une étude préalable des solutions déjà existantes dans le marché est la clé primordiale de
succès de tout projet. De ce fait, nous effectuons une étude sur les solutions qui offrent des

5
services similaires à celles offertes par notre solution. En particulier, nous nous intéressons
aux outils : Keejob et Fabskill.

2.2.1.Keejob.com

Figure 3 : Logo Keejob

Keejob.com (cf. Figure 3) est un excellent outil en ligne dans le domaine de l'emploi en
Tunisie. Accessible à tous, il rassemble un média performant et innovant, d'une part, les
demandeurs d'emploi de qualité et les jeunes diplômés, et d'autre part, les professionnels du
recrutement et les entreprises.
Ce moteur de recherche multi-standards a été soigneusement pensé, conçu et présenté dans le
seul but d'optimiser les recherches.
De nombreux conseils, astuces et informations utiles permettront de mieux gérer les
demandes.
Cette solution permet d’accompagner les internautes : simples, gain de temps, facilité
d'utilisation, services exclusifs, etc.
En optimisant sa recherche sur Keejob.com, le candidat peut se concentrer sur la qualité de sa
candidature, rédiger et mettre à jour son CV.
En effet, Keejob.com fournit des services avancés aux entreprises et aux recruteurs, leur
permettant de mieux gérer le processus de recrutement et de réussir leur stratégie de
ressources humaines. [4]
La figure 4 présente une capture de l’interface du plateforme Keejob.

6
 Figure 4 : Site officiel Keejob

2.2.2 FabSkill

Figure 5 : Logo Fabskill

FabSkill (c.f.Figure 5) est une plateforme en ligne qui propose un processus de recrutement
innovant basé sur l'intelligence artificielle, les entretiens vidéo et l'évaluation collaborative
des candidats.
Cette solution facilite et accélére les processus de sélection, de suivi, d'évaluation et
d'embauche des candidats. De plus, elle permet d’investir le temps et les efforts dans les
meilleurs candidats.

7
Ainsi elle permet d’améliorer le processus de recrutement valorise la marque employeur
efficience optimisation, ciblage et gain de temps. [5]
La figure 6 présente une capture de l’interface du plateforme Fabskill.

Figure 6 : Site officiel de Fabskill

2.3 Critiques de l’existant

Malgré la diversification des services offerts par ces solutions, elles présentent plusieurs
défaillances.

2.3.1.Keejob.com

- Cette plateforme ne dispose pas de la partie dédiée aux recruteurs.

- Les interfaces de la plateforme manquent d'attractivité et elles sont compliquées.

2.3.2 FabSkill

- Cette plateforme ne donne l'accès à l'utilisateur de s'inscrire qu'à travers son compte
LinkedIn, google ou Facebook sinon il n'a pas le choix de créer un compte à travers un
formulaire propre au Fabskill.
- Cette plateforme est très lente, l’utilisateur doit attendre plus de 10 secondes pour naviguer
d’une page à une autre.

3 Objectifs et solution proposée

La solution proposée vise à mettre en œuvre une application web dynamique servant à fournir
toutes les fonctionnalités nécessaires à l’utilisateur sans qu’il tourne vers d'autres alternatifs.

8
Le but est de faciliter la procédure de recrutement pour les candidats et les recruteurs en
améliorant les processus de gestion des ressources humaines, ainsi que garantir
l’embauche des meilleurs talents sans perte de temps ni d’argent.
Les objectifs de ce projet sont :
- Un espace pour entreprises pour diffuser les offres et faire la sélection des
candidatures et un autre pour les candidats pour postuler et suivre l’état de leurs
candidatures.
- Faciliter l’inscription en important les données depuis une autre plateforme
(LinkedIn).
- Faciliter la procédure de recrutement en intégrant tous les outils (visioconférence,
notifications, mail automatique…)

4 Spécification des besoins

La spécification des besoins détermine ce que doit fournir le système ainsi que les fonctions
utiles.
Dans ce qui suit, nous détaillons les besoins fonctionnels et non fonctionnels liés à notre
application.

4.1 Besoins fonctionnels

Dans cette partie, nous citons les besoins fonctionnels de chaque acteur.

4.1.1 Candidat

- Formulaire d’inscription/connexion pour les candidats avec la possibilité de s’inscrire via

un compte LinkedIn pour faciliter l’inscription.

- Importer les données du cv du candidat : Le candidat peut remplir son cv manuellement

ou bien importer ses données (coordonnées, expériences académiques et professionnelles,
compétences…) à travers son compte LinkedIn ou les importer à partir d’un fichier (pdf,
word, odt, html).

9
- Modifier le profil : Une interface affiche les informations personnelles (nom, prénom,
adresse…) du candidat, avec la possibilité de changer la photo de profil ou ses
informations.

- Un Dashboard candidat : Un Dashboard contenant les offres publiées avec la possibilité de

consulter chaque offre ou postuler, et un calendrier pour rappeler les dates des entretiens.

- Suivi des candidatures : Le candidat peut suivre sa candidature à travers les notifications
ou à travers l’interface de suivi. De son côté le recruteur peut suivre les candidatures dans
son tableau de bord via un système de statut du candidat (en attente, refusé, recruté...)
pour mieux organiser les candidatures :
 En attente : les candidats à contacter pour un entretien ou pour faire un test
 Refusé : les candidats qui ne conviennent pas à l'aspiration du recruteur
 Test : les candidats qui vont faire un test.
 Entretien : les candidats qui vont faire un entretien.
 Recruté : les candidats acceptés

- Passer des entretiens : Le candidat peut faire un entretien vidéo (visioconférence), avec la
possibilité de partage d’écran et la discussion avec messages.

4.1.2 Entreprise

- Formulaire d’inscription/connexion pour les entreprises avec la possibilité de s’inscrire

avec LinkedIn pour faciliter l’inscription

- Modifier le profil : Une interface expose les informations liées à l’entreprise (nom
d’entreprise, adresse…), avec la possibilité de changer la photo de profil ou de modifier
ses informations.

- Formulaire de diffusion d’une offre pour les entreprises : Le recruteur doit remplir toutes
les données requises manuellement (exigence, type de contrat, adresse…) ou les importer
à partir d’un fichier (pdf, word, odt, html)

10
- Un Dashboard entreprise : Un Dashboard contenant un calendrier pour rappeler au
recruteur des dates spécifiques (entretien, événements…) ainsi que les offres qu'il a
publiées avec la possibilité de gérer ces offres (supprimer, ajouter, modifier).

- Gestion des candidatures : Une interface pour gérer les candidatures de chaque offre
facilement. Cette interface affiche les candidats qui ont postulé. Le recruteur peut
consulter le cv de chaque candidat et peut modifier l’état de sa candidature (Refusé, Test,
Entretien, Recruté).

- Envoi de mails groupés : Si le recruteur termine la présélection, nous pourrons envoyer

automatiquement des mails groupés et des notifications de : convocation, rejet, invitation
pour un entretien, ou demande d'informations, pour gagner du temps et améliorer
l'expérience utilisateur.

- Assurer des sessions d’entretien vidéo : Le recruteur peut planifier et participer à des
entretiens, avec la possibilité de partage d’écran et la discussion avec messages.

- CVthèque : Le recruteur dispose d’une bibliothèque des CVs des candidats qui ont postulé
à ses offres.

4.1.3 Responsable

C’est un acteur assigné par l’entreprise, il peut être un responsable de recrutement, RH. Il a
les mêmes droits que celles de l’entreprise sauf la gestion des responsables.

4.1.4 Admin

- Un Dashboard admin : Un Dashboard affichant les différentes statistiques de la plateforme

tel que le nombre des entreprises, des candidats, des offres...

- Une interface de gestion des utilisateurs : L’admin a le droit de consulter, supprimer ou

d’archiver les candidats et/ou les entreprises.

- Une interface éditeur mail : Cette interface contient les mails à envoyer automatiquement
aux utilisateurs.

11
 L’admin a l’accès de modifier l’objet et le corps de chaque mail

4.2 Besoins non fonctionnels

Cette application doit satisfaire les besoins non fonctionnels qui sont des besoins assurant le
bon fonctionnement de notre application.
Les besoins non fonctionnels liés à notre application sont :
- La sécurité : la sécurité dans notre projet est indispensable pour pouvoir protéger les données
personnelles des utilisateurs et la protection de notre système pour éviter toute sorte de fraude.

- La performance : l’application doit être réactive, autrement dit le temps de réponse devrait
être optimisé. Nous désignons par le temps de réponse le délai au bout duquel le système
parvient à répondre à une requête d'entrée. Ce terme traduit la rapidité de traitement réalisé
par le système.

- L’Ergonomie : l’application doit offrir des interfaces conviviales et faciles à utiliser en

assurant la meilleure expérience utilisateur possible.

- Maintenabilité : Les différents modules de l’application doivent être faciles à maintenir. Pour
cela, le code doit être lisible et bien structuré. D’où l’utilisation des standards proposés par la
société tels que : les noms des attributs et des variables, les noms des méthodes ainsi que la
disposition des commentaires.

5 Méthodologie de travail

Un projet informatique, quelle que soit sa taille et la portée de ses objectifs, nécessite
la mise en place d'un planning organisationnel tout au long de son cycle de vie. C'est
ainsi qu'est apparue la notion de méthode du travail.
Malgré la diversité des méthodes d'analyse et de conception, il est possible de les
classer en quatre catégories :
- Les méthodes cartésiennes ou fonctionnelles comme la méthode SADT
(Structured-Analysis-DesignTechnique) .
- Les méthodes systémiques telles que : MERISE, AXIAL ...
- Les méthodes objet : où seules 3 méthodes ont véritablement émergé :

12
  La méthode OMT de Rumbaugh
 La méthode BOOCH'93 de Booch
 La méthode OOSE de Jacobson.
- Les méthodes agiles telles que : XP, SCRUM, etc.

5.1 Les méthodes Agiles

Les méthodes agiles sont des méthodologies essentiellement dédiées pour la gestion de projets
informatiques.
Ces méthodes constituent un gain en productivité ainsi qu'un avantage compétitif tant du côté
client que du côté du fournisseur.
Les méthodes agiles reposent toutes sur des valeurs qui ont été énoncées dans le Manifeste
Agile :
- Priorité des personnes et des interactions sur les procédures et les outils.
- Priorité d’applications opérationnelles sur une documentation exhaustive.
- Priorité de la collaboration avec le client sur la négociation de contrat.
- Priorité de l’acceptation du changement sur la planification.
Ces 4 valeurs sont à mettre en regard des pratiques fréquemment rencontrées lors de la mise
en place de méthodes traditionnelles : priorité aux processus et outils, importance de la
documentation, respect du contrat à la lettre et planification rigide. [6]
Nous avons choisi la méthode SCRUM pour la mise en place de notre projet, car elle
représente plusieurs avantages par rapport aux autres méthodologies de développement. En
effet, elle permet d’assurer le bon déroulement du projet au sein de l’équipe.
Scrum est une méthode de développement agile orientée projet informatique dont les
ressources sont régulièrement actualisées.
La méthode Scrum tire son nom du monde du rugby (SCRUM = mêlée). Le principe de base
étant d'être toujours prêt à réorienter le projet au fil de son avancement.
C'est une approche dynamique et participative de la conduite du projet. La mêlée est une
phase de jeu essentielle au rugby. Elle permet au jeu de repartir sur d'autres bases. La réunion
dans la méthode Scrum relaie la métaphore. [7]
Les acteurs participants dans le cycle SCRUM sont :
- Le propriétaire du produit (Product Manager) : il représente le client, il est en contact avec
le Scrum master. Dans notre projet, c’est Mme Hanene Moalla.

13
- Le Scrum master : il est responsable de l’application quotidienne des directives Scrum.
C’est lui qui est chargé d’accorder un environnement de travail agréable pour l’équipe.
Dans notre projet, c’est Mme Jamila Khlif.
- L’équipe de travail : se compose de 2 à 9 personnes. Chaque membre de l’équipe doit
identifier pendant le Scrum ses tâches achevées et ses tâches restantes dans un « product
backlog » spécifique à chaque sprint. Dans notre projet, c’est l’équipe des employées et des
stagiaires.
Le processus de la méthodologie scrum est illustré dans la figure 7

Figure 7 : Méthode SCRUM

5.2 Définition des sprints

L'équipe de développement de « Rec-Inov » adopte la méthodologie de travail scrum. Avons

d'entamer le sprint, nous faisons une réunion avec le scrum master durant laquelle nous fixons
le « backlog » contenant les différentes tâches à réaliser durant chaque sprint ainsi nous
donnons une estimation du période nécessaire à la réalisation de ces tâches.
Dès que le sprint se termine, un « sprint review » aura lieu durant lequel toute l'équipe de
développement se réunissent avec le scrum master pour réviser et vérifier le travail réalisé et
fixer les tâches du sprint suivant.

14
 Tableau 1 : Tableau des sprints

Sprint Titre du sprint

Sprint 0 Cahier des charges
Sprint 1 Authentification
Sprint 2 Gestion des profils
Sprint 3 Gestion des CVs
Sprint 4 Gestion des offres
Sprint 5 Gestion des candidatures
Sprint 6 Gestion des entretiens
Sprint 7 Visioconférence
Sprint 8 Gestion des responsables
Sprint 9 Partie Admin
Sprint 10 Amélioration du design

6 Organigramme du projet

La figure 8 représente la répartition du temps consacré durant la période de stage pour la

réalisation des différentes tâches. Ces tâches qui doivent être décomposées en sous tâches de
façon à réaliser et modéliser une planification ordonnée sous la forme d’un « diagramme de
Gantt ».

15
 Figure 8 : Diagramme de Gantt

Conclusion

Nous avons entamé ce chapitre par une présentation de l’organisme d’accueil. Par la suite,
nous avons décrit le contexte du projet. Puis nous avons fait une étude et critique de l’existant
et spécifier les besoins fonctionnels et non fonctionnels liés à notre application.
Le chapitre suivant va détailler l’étude conceptuelle de notre solution via un ensemble de
diagrammes UML.

16
Chapitre 2 : Etude conceptuelle

Introduction

La réussite de toute étude dépend de la qualité de son départ. De ce fait, ce chapitre est
consacré à la description détaillée des différentes interactions entre l’utilisateur du système et
l’application qui sont illustrées par le diagramme de cas d’utilisation ainsi que leurs scénarios.

1 Modélisation avec UML

Vu l’importance cruciale de la modélisation dans le cycle de vie de n’importe quelle

application, il fallait utiliser une méthode de modélisation qui s’adapte le mieux à nos besoins
et à nos exigences qui sont entre autres : L’ouverture, la réutilisabilité, la modularité et
l’extensibilité.
Pour répondre à ces exigences, nous avons choisis de modéliser notre solution avec le langage
de modélisation UML qui s’adapte parfaitement à la modélisation des applications à base
d’objets et qui offre grâce à ses différents diagrammes une grande souplesse permettant la
modélisation de différents aspects de l’application. Notre choix de ce langage se justifie aussi
par le fait que UML est devenu un standard de modélisation adopté pour toutes les
applications à aspect orienté objet.

1.1 Définition de UML

Se définit comme un langage de modélisation graphique et textuel destiné à comprendre et

décrire des besoins, spécifier, concevoir des solutions et communiquer des points de vue. [8]

1.2 Diagrammes de UML

Dans ce qui suit, nous présentons les différents diagrammes UML qui vont être utilisés tout au
long du projet.

1.3 Diagramme des cas d’utilisation

Il représente la structure des fonctionnalités nécessaires aux utilisateurs du système. Il est

souvent utilisé lors des étapes de capture des besoins fonctionnels et techniques. [9]

17
1.4 Diagramme de classes

C’est l’un des diagrammes les plus importants dans un développement orienté objet. Sur la
branche fonctionnelle, ce diagramme est prévu pour développer la structure des entités
manipulées par les utilisateurs. En conception, le diagramme de classes représente la structure
d’un code orienté objet. [10]

1.5 Diagramme de séquence

Il représente les échanges de messages entre objets, dans le cadre d’un fonctionnement
particulier du système. [11]

2 Diagrammes des cas d’utilisation

Cette section est dédiée à la présentation des acteurs de l’application ainsi que les différents
cas d’utilisation.

2.1 Identification des acteurs

Un acteur est une entité (personne physique ou entité logique) externe au système mais qui
interagit avec le système. Il est dit principal si c’est lui qui agit sur le système et secondaire
dans le cas opposé. L’application doit garantir une bonne communication entre les différents
acteurs en attribuant à chacun ses propres fonctionnalités. [12]
Les acteurs de notre système sont :
- Le recruteur : la personne qui va diffuser des offres et faire la présélection des candidats.
- Le candidat : c’est le demandeur d’emploi qui va postuler à travers la plateforme.
- Le responsable : c’est la personne ajoutée par le recruteur pour faire la gestion des offres et
des candidatures
- L’admin : c’est l’administrateur de la plateforme

2.2 Diagramme de cas d’utilisation global

Le diagramme de cas d’utilisation global est schématisé par la figure 9.

18
Figure 9 : Diagramme de cas d’utilisation global

19
 2.3 Diagramme de cas d’utilisation de l’entreprise

Le diagramme de cas d’utilisation du recruteur est schématisé par la figure 10 :

Figure 10 : Diagramme de cas d’utilisation de l’entreprise

Dans ce qui suit, nous détaillons chaque cas d’utilisation :

2.3.1 Cas d’utilisation : Gérer les offres

Le recruteur peut ajouter, modifier et supprimer les offres après l’authentification. Nous
décrivons dans ce qui suit le cas d’utilisation : « gérer les offres », « ajouter offre », «
modifier offre » et « supprimer offre ».
Le tableau 2 présente une explication détaillée du cas d’utilisation « Ajouter offre ».
Tableau 2 : Cas d'utilisation "Ajouter une offre"

Cas d’utilisation Ajouter offre

Acteur : Recruteur
Pré condition: Recruteur authentifié
Post condition: Offre ajouté

20
Scénario nominal : [Début]

1. Le recruteur remplit le formulaire nécessaire.

2. Le recruteur cliquez sur le bouton ajouter.

3. Le système effectue l’ajout de l’offre

4. Le système retourne un message de succès

[Fin]
Alternative : Le système affiche un message d’erreur s’il existe
une contrainte non respectée

Le tableau 3 décrit le cas d’utilisation « Modifier offre ».

Tableau 3 : Cas d'utilisation "modifier offre"

Cas d’utilisation Modifier offre

Acteur : Recruteur
Pré condition : Recruteur authentifié

Offre existant
Post condition: Offre modifiée
Scénario nominal: [Début]

1. Le recruteur recherche une offre

2. Le système vérifie l’existence d’une offre

3. Le système effectue la modification de l’offre
4. Le système retourne un message de succès.

[Fin]
Alternative : Le système affiche un message d’erreur s’il existe
une contrainte non respectée et fait retourner l’offre à l’état
initial.

Le tableau 4 détaillée le cas d’utilisation « Supprimer une offre ».

21
 Tableau 4 : Cas d'utilisation "supprimer offre"

Cas d’utilisation Supprimer offre

Acteurs: Recruteur
Pré condition : Recruteur authentifié

Offre existant
Post condition: Offre supprimé
Scénario nominal : [Début]

1. Le recruteur choisi une offre

2. Le recruteur cliquez sur le bouton supprimer.

3. Le système effectue la suppression de l’offre

4. Le système retourne un message de succès [Fin]

Alternative : Le système affiche un message d’erreur s’il existe un problème au
niveau de la base de données.

2.3.2 Cas d’utilisation : Modifier compte

Après authentification, le recruteur sera capable de modifier son compte.

Le tableau 5 décrit le cas d’utilisation « Modifier compte ».
Tableau 5 : Cas d’utilisation "Modifier compte"

Cas d’utilisation Modifier compte

Acteurs:Recruteur

Pré condition:Recruteur authentifié

Post condition :Compte modifiée

Scénario nominal: [Début]

1. Le candidat effectue la modification des informations

liées à un compte.

2. Le système retourne un message de succès. [Fin]

22
Alternative : Le système affiche un message d’erreur
s’il existe une contrainte non respectée et fait retourner
l’offre à l’état initial.

2.3.3 Cas d’utilisation : Planifier entretien

Le recruteur est le seul autorisé à planifier les entretiens. Cette planification n’est faite
qu’après son authentification (cf. Tableau 6).
Tableau 6 : Cas d’utilisation "Planifier entretien"

Cas d’utilisation Planifier entretien

Acteurs :Recruteur

Pré condition: Recruteur authentifié

Post condition: Entretien planifié

Scénario nominal : [Début]

1. Le recruteur remplit le formulaire nécessaire.

2. Le recruteur cliquez sur le bouton envoyer.

3. Le système effectue la planification de l’entretien.

4. Le système retourne un message de succès [Fin]

Alternative : Le système affiche un message d’erreur s’il
existe un problème au niveau de la base de données.

2.4 Diagramme de cas d’utilisation du candidat

Le diagramme de cas d’utilisation du candidat est schématisé par la figure 11 :

23
 Figure 11 : Diagramme de cas d’utilisation du candidat
Dans ce qui suit, nous détaillons chaque cas d’utilisation lié au candidat :

2.4.1 Cas d’utilisation : Consulter les offres

Un candidat peut consulter les différentes offres publiées sur la plateforme. (Cf. Tableau 7)
Tableau 7 : Cas d’utilisation "Consulter les offres"

Cas d’utilisation Consulter les offres

Acteur : Candidat

Pré condition: Offre existant

Post condition : List des offres affichées

Scénario nominal : [Début]

1. Le candidat clique sur le bouton « Liste des offres »

2. Le système affiche la liste des offres.

[Fin]
Alternative : Le système affiche un message d’erreur s’il existe un problème au niveau de
la base de données.

2.4.2 Cas d’utilisation : Créer compte

Un candidat peut créer un compte en remplissant un formulaire

24
 Le tableau 8 présente le cas d’utilisation « Créer compte ».
Tableau 8 : Cas d’utilisation "Créer compte"

Cas d’utilisation Créer compte

Acteur: Candidat

Pré condition: Aucune condition

Post condition: Compte créé

Scénario nominal: [Début]

1. Le candidat remplit le formulaire.

2. Le candidat clique sur le bouton « envoyer ».

3. Le système effectue la création du compte.

4. Le système retourne un message de succès.

[Fin]

Alternative : Le système affiche un message d’erreur s’il existe

un problème au niveau de la base de données.

2.4.3 Cas d’utilisation : S’authentifier

Le tableau 9 décrit le cas d’utilisation « S’authentifier ».

Tableau 9 : Cas d’utilisation "S’authentifier"

Cas d’utilisation S’authentifier

Acteur : Candidat

Pré condition : Login et mot de passe doivent être corrects

Post condition: Candidat authentifié

Scénario nominal :[Début]

1. L'utilisateur saisit son login et son mot de passe

2. Il confirme en cliquant sur le bouton «se connecter »

3. Le système affiche l’espace personnel du candidat
[Fin]

25
Alternative : Le système affiche un message d’erreur si le login ou
le mot de passe est incorrect.

2.5 Diagramme de cas d’utilisation de l’admin

Figure 12 : Diagramme de cas d’utilisation de l’admin

L’admin est capable de gérer les comptes des candidats/entreprises en archivant ou en
supprimant un compte.

2.5.1 Cas d’utilisation : Archiver compte

Le tableau 10 décrit le cas d’utilisation « archiver compte ».

Tableau 10 : Cas d’utilisation "Archiver compte"

Cas d’utilisation Archiver compte

Acteur : Admin
Pré condition : Admin authentifié

Compte existant
Post condition: Compte archivé
Scénario nominal : [Début]

1. Le recruteur choisit un compte

2. Le recruteur clique sur le bouton archiver.

26
3. Le système effectue l’archivage du compte.

4. Le système retourne un message de succès [Fin]

Alternative : Le système affiche un message d’erreur

s’il existe un problème au niveau de la base de données.

2.5.2 Cas d’utilisation : Supprimer compte

Le tableau 11 détaille de cas d’utilisation « Supprimer compte ».

Tableau 11 : Cas d’utilisation "Supprimer compte"

Cas d’utilisation Supprimer compte

Acteur : Admin
Pré condition : Admin authentifié

Compte existant
Post condition: Compte supprimé
Scénario nominal : [Début]

1. Le recruteur choisit un compte

2. Le recruteur cliquez sur le bouton supprimer.

3. Le système effectue la suppression du compte.

4. Le système retourne un message de succès [Fin]

Alternative : Le système affiche un message d’erreur

s’il existe un problème au niveau de la base de données.

3 Description des diagrammes de séquences

Un diagramme de séquence est une présentation graphique des interactions entre les objets du
système selon un ordre chronologique. Dans cette section, nous présentons les différents
diagrammes de séquences de notre application.

3.1 Diagramme de séquence du cas d’utilisation « Authentification »

La figure 13, présente le diagramme de séquences associé au cas d’utilisation :

« Authentification ».

27
 Figure 13 : Diagramme de séquence du cas d’utilisation « Authentification »

3.2 Diagramme de séquence du cas d’utilisation « Ajouter une offre »

Afin d’ajouter une offre, le recruteur doit saisir les données spécifiques à l’offre. Ces données
vont être vérifiées et en cas de problème, un message d’erreur est affiché. Par la suite, le
recruteur va enregistrer les données de l’offre. Le message affiché après l’envoi des données
permet d’avertir le recruteur sur le statut de l’ajout (cf. Figure 14).

28
 Figure 14 : Diagramme de séquence du cas d’utilisation « Ajouter Offre »

3.3 Diagramme de séquence du cas d’utilisation « Modifier une offre »

Afin de modifier une offre, le recruteur doit saisir les informations à modifier. Ces
informations vont être vérifiées et en cas de problème, un message d’erreur est affiché. Par la
suite, le recruteur va envoyer les données et l’offre est modifiée avec succès. Le message
affiché après l’envoi des données permet d’avertir le recruteur sur le statut de la modification
(cf. Figure 15).

29
 Figure 15 : Diagramme de séquence du cas d’utilisation « Modifier Offre »

3.4 Diagramme de séquence du cas d’utilisation « Consulter une offre »

Afin de consulter une offre, le candidat doit afficher la liste des offres et sélectionner l’offre
adéquate. S'il n'y a pas d'erreur, les données sont affichées au candidat, sinon un message
d’erreur est affiché.

30
 Figure 16 : Diagramme de séquence du cas d’utilisation « Consulter Offre »

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

Afin de postuler sur une offre, le candidat doit consulter la liste des offres. S’il y a une offre
convenable, il doit remplir un formulaire. Ces données saisies vont être vérifiées et en cas de
problème, un message d’erreur est affiché.

31
 Figure 17 : Diagramme de séquence du cas d’utilisation « Postuler à Offre »

4 Description du diagramme de classes

Nous présentons dans cette partie le diagramme de classes de notre application. Les
diagrammes de classes expriment de manière générale la structure statique d’un système à
travers un ensemble de classes et des relations entre ces classes. Une classe est une abstraction
pour un ensemble d’objets ayant le même état, offrant le même comportement et ayant les

32
mêmes liens avec d’autres objets. Le diagramme de classes est donc un modèle permettant de
décrire de manière abstraite et générale les liens entre les objets. [13]
La figure 18 représente le diagramme de classe générale de notre application.

Figure 18 : Diagramme de classes

33
Conclusion

Dans ce chapitre, nous avons fait l’étude des cas d’utilisation de notre application. Le
diagramme de cas d’utilisation nous a permis de formaliser les besoins de manière
synthétique, puis d’expliciter chaque cas d’utilisation de manière textuelle.
Par la suite, nous avons établi les diagrammes de séquences et de classes.
Dans le chapitre suivant, nous présentons les différents outils et l’architecture utilisés pour
implémenter notre solution.
De plus, des captures des interfaces implémentées sont exposées.

34
 Chapitre 3 : Réalisation de l’application

Introduction

Au cours de cette dernière partie, nous présentons d’abord l’environnement du travail, ainsi
que les différents outils de développement utilisés. Par la suite, nous présentons l’architecture
générale du notre projet. Enfin, nous illustrons la réalisation de notre travail en se basant sur
des captures des interfaces qui décrivent les diverses fonctionnalités mises en place dans
l’application.

1 Environnement du travail

Un bon environnement assure le bon déroulement du travail et peut garantir de bons résultats.
La réalisation de ce projet a nécessité l’utilisation d’un nombre d’outils et de technologies
cités ci-dessous.

1.1 Outils utilisés

Dans cette partie, nous présenterons les outils utilisés dans l’implémentation de notre
application.

1.1.1 Vs code

Visual Studio Code (cf. Figure 19) est un éditeur de code créé par Microsoft pour Windows,
Linux et MacOs. Les fonctionnalités incluent la prise en charge du débogage, de la mise en
évidence de la syntaxe, de la complétion de code intelligente, des extraits de code, de la
refactorisation du code et de Git intégré. [14]

Figure 19 : Logo vs code

35
1.1.2 Postman

Postman (cf. Figure 20) est un logiciel qui permet de gérer les APIs directement ou dans le
cadre de tests d’intégration. [15]

Figure 20 : Logo Postman

1.1.3 MongoDB Compass

MongoDB Compass (cf. Figure 21) est une interface graphique puissante pour interroger,
agréger et analyser les données MongoDB dans un environnement visuel. Compass offre une
libre utilisation avec source disponible, et peut être exécuté sur MacOs, Windows et Linux.
[16]

Figure 21 : Logo mongo DB Compass

1.1.4 Bitbucket

Bitbucket (cf. Figure 22) est un service web d'hébergement et de gestion de développement
logiciel utilisant les logiciels de gestion de versions Git et Mercuriale. [17]

Figure 22 : Logo Bitbucket

1.1.5 Trello

Trello (cf. Figure 23) est un outil de collaboration qui organise les projets en tableaux. En un
coup d'œil, Trello permet de savoir sur quoi nous travaillons, qui travaille sur quoi et où
quelque chose est en cours. [18]

36
 Figure 23 : Logo Trello

1.1.6 Draw.io

draw.io (cf. Figure 24) est une pile technologique open source pour la création d’applications
de diagrammes et l’application de diagrammes d’utilisateur final basée sur un navigateur. [19]

Figure 24 : Logo draw.io

1.2 Framework utilisés

Dans cette partie, nous présentons les Framework utilisés dans le développement de notre
application.

1.2.1 React js

React (cf. Figure 25) est une bibliothèque JavaScript open source frontend pour la création
d’interfaces utilisateur. Il est maintenu par Facebook et une communauté d’entreprises et de
développeurs individuels. [20]

Figure 25 : Logo React js

1.2.2 Node JS

Node.js (cf. Figure 26) est un environnement d’exécution JavaScript back-end open source,
multiplateforme, qui s'exécute du code javascript en dehors d’une navigation web. [21]

37
 Figure 26 : Logo Node JS

1.2.3 Express JS

Express.js (cf. Figure 27), ou simplement Express, est un Framework d’application Web
back-end pour Node.js, publié en tant que logiciel libre et open source. Il est conçu pour créer
des applications web et des API. Il a été appelé le Framework de serveur standard pour Node
JS. [22]

Figure 27 : Logo Express JS

1.2.4 MongoDB

MongoDB (cf. Figure 28) est un programme de base de données NoSQL open source orienté
document multiplateforme. MongoDB utilise des documents de type JSON avec des schémas
facultatifs. [23]

Figure 28 : Logo MongoDB

1.2.5 Bootstrap

Framework (cf. Figure 29) qui permet de créer des sites et des applications web. Bootstrap est
une boîte à outils open source pour le développement avec HTML, CSS et JS. [24]

38
 Figure 29 : Logo Bootstrap

1.3 Langages utilisés

Dans cette partie, nous présentons les langages utilisés pour coder notre application.

1.3.1 Javascript

JavaScript (cf. Figure 30) est un langage de programmation textuel utilisé à la fois côté client
et côté serveur qui vous permet de rendre les pages Web interactives. Alors que HTML et
CSS sont des langages qui donnent une structure et un style aux pages Web, JavaScript donne
aux pages Web des éléments interactifs qui engagent un utilisateur. [25]

Figure 30 : Logo langage javascript

1.3.2 HTML

HTML5 (cf. Figure 31) est la dernière évolution des standards qui définissent HTML. Le
terme HTML5 regroupe deux concepts différents : Il s'agit de la nouvelle version du langage
HTML, avec de nouveaux éléments ; mais aussi un ensemble plus large de technologies qui
offrent des sites web plus variés et puissants. [26]

Figure 31 : Logo HTML

39
1.3.3 CSS

Le terme CSS (cf. Figure 32) est l'acronyme anglais de « Cascading Style Sheets » qui peut se
traduire par "feuilles de style en cascade". Le CSS est un langage informatique utilisé sur
l'internet pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi
appelé les fichiers CSS, comprennent du code qui permet de gérer le design d'une page en
HTML. [27]

Figure 32 : Logo CSS

2 Architecture de l’application

Pour implémenter notre application, nous avons adopté l’architecture trois tiers. En effet,
l’architecture trois tiers, également appelée architecture à trois niveaux ou à trois couches, est
une architecture client-serveur dans laquelle coexistent et sont maintenus des modules
indépendants permettant le rendu d'une interface utilisateur (GUI), les processus logiques,
fonctionnels et métiers ainsi que l'accès aux données. [28]
La figure 33 illustre l’architecture de développement de notre projet.

40
 Figure 33 : Architecture 3-tiers
Dans cette approche, les couches communiquent entre elles à travers un modèle d’échange et
chacune d’entre elles propose un ensemble de services rendus. Les services d’une couche sont
mis à la disposition de la couche supérieure. Par conséquent, une couche ne peut pas invoquer
les services d’une couche plus basse que la couche immédiatement inférieure ou plus haute
que la couche immédiatement supérieure.

2.1 La couche présentation

Cette couche correspond aux IHM implémentées en React Js, pour la création de nos pages
web spécifiques à notre application. La couche de présentation assure la logique de
navigation. Elle reçoit les différentes requêtes http envoyées par l’utilisateur via l’interface du
système. La couche présentation est une application web accessible via internet ou via
l’intranet d’une entreprise. Aucun traitement métier n’est à implémenter dans cette couche.

41
2.2 La couche métier

Elle correspond à la partie fonctionnelle de l'application, celle qui implémente la logique

métier, et qui décrit les opérations que l'application opère sur les données en fonction des
requêtes des utilisateurs, effectuées au travers de la couche de présentation.

2.3 La couche de données

Elle correspond à la partie gérant l'accès aux données de l'application. Ces données peuvent
être propres à l'application, ou gérées par une autre application

2.4 Choix de l’architecture côté serveur

Dans notre application, nous nous intéressons seulement aux Framework Express JS 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 34 afin de mieux
organiser le code de notre système. [29]

Figure 34 : Architecture de conception MVC

En effet, le patron MVC se compose de :
Vue : correspond à l’IHM (interface homme-machine). Cette partie se concentre sur
l’affichage, ainsi nous trouvons essentiellement du code HTML.

42
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.

3 Captures des interfaces implémentées

Les interfaces d’une application constituent un élément fondamental pour atteindre sa

réussite. Ces interfaces doivent obéir à des chartes graphiques et aux règles d’ergonomie pour
que l’utilisateur s’adapte rapidement à la logique de l’application.
A travers cette section, nous présentons les interfaces les plus importantes de notre application
ainsi que quelques standards et modules utilisés.

3.1 L’Authentification

L’authentification est une procédure importante à travers laquelle un système informatique

permet d’identifier l’identité d’une personne. Le but est d’autoriser ou de refuser l’accès à
certaines ressources. Afin d’assurer la sécurité de l’accès à notre plateforme, nous choisissons
d’utiliser JWT (Json Web Token) qui est un standard définissant une façon sécurisée de
transmettre les données en format JSON. Les JWTs peuvent être signés en utilisant un secret
avec l’algorithme HMAC (keyed-hash message authentication code) ou une paire de clés
publique et privée utilisant RSA (algorithme de cryptographie). Pour mieux comprendre le
processus de l’authentification via JWT, la figure 35 explique ces différentes étapes.

43
 Figure 35 : Processus de l'authentification avec JWT

La figure 35 montre que, lorsque l’utilisateur se connecte avec succès, un JWT sera retourné
et doit être enregistré. Généralement, l’enregistrement a lieu dans le stockage local. Chaque
fois que l’utilisateur veut se connecter ou accéder à une ressource protégée, l’agent utilisateur
doit envoyer le JWT, généralement dans l’en- tête « Authorization » en utilisant le schéma
Bearer. C’est un mécanisme d’authentification sans état puisque l’état de l’utilisateur n’est
jamais sauvegardé dans la mémoire du serveur. Les routes protégées du serveur vérifient la
présence d’un JWT valide dans l’en-tête « Authorization », et s’il est présent, l’utilisateur sera
autorisé à accéder aux ressources protégées.
Ainsi, notre application donne la possibilité de s’inscrire de deux manières. Soit en
remplissant le formulaire présenté par la figure 37, soit en se connectant à travers LinkedIn.
La redirection de chaque utilisateur de la plateforme s’effectue suivant son rôle.
Les deux figures 36 et 37 présentent respectivement l’interface graphique de la
connexion(login) et celle de l’inscription.

44
 Figure 36 : Interface de login

Figure 37 : Interface d’inscription

3.2 Mis à jour du profil

Notre plateforme permet à chaque candidat après son inscription de modifier son profil. La
mise à jour du profil est valable pour le candidat (cf. Figure 38) comme pour l’entreprise (cf.
Figure 39).

45
 Figure 38 : Interface du profil candidat

Figure 39 : Interface du profil d’entreprise

La figure 40 présente l’interface du cv qui permettra au candidat d’ajouter ses formations

académiques, expériences professionnelles et compétences…

46
 Figure 40 : Interface de remplissage du cv

3.3 Postulation à des offres

La postulation à des offres n’est possible que pour les candidats déjà inscrits sur la
plateforme. La postulation nécessite le remplissage du cv qui présente différents champs
obligatoires (cf. Figure 40). Chaque candidat doit définir ses coordonnées, son expérience, ses
compétences, pour qu’il puisse trouver les offres qui conviennent à son CV.
Le candidat aura l’accès à postuler à n’importe quelle offre affichée dans le « Dashboard ».
Ce dernier contient un calendrier permettant de suivre les dates réservées aux entretiens.
Ainsi, le candidat peut consulter les détails de chaque offre.
Les figures 41 et 42 présentent respectivement le « Dashboard » et l’interface de détail de
l’offre.

47
 Figure 41 : Dashboard du candidat

Figure 42 : Interface des détails d’une offre

48
3.4 Gestion des offres

Après la phase d’inscription, chaque entreprise aura l’accès à la plateforme pour gérer ses
offres.
La gestion des offres inclut l’ajout, la modification et la suppression de ces dernières. Nous
présentons dans la figure 43 l’interface de la gestion des offres.

Figure 43 : Interface de la gestion des offres

3.5 Gestion des candidatures

Après la postulation des candidats, la liste des candidatures sera consultée par le recruteur
comme indiqué par la figure 44. Pour faire le choix entre ces candidatures, le recruteur peut
consulter les détails des candidatures, modifier l’état de chacune et planifier des entretiens.
Par la suite, le recruteur doit cliquer sur le bouton enregistrer pour sauvegarder les
changements, la plateforme envoie automatiquement des emails et des notifications pour
informer les candidats de chaque modification d’état de leurs candidatures.

49
 Figure 44 : Interface de la gestion des candidatures
Chaque candidat peut consulter l’état de ses candidatures à travers l’interface présentée par la
figure 45.

Figure 45 : Interface de suivi des candidatures

3.6 Gestion des entretiens

Après la phase de planification des entretiens, chaque recruteur peut consulter l’interface des
entretiens. La gestion des entretiens inclut la modification du temps, du date ou l’annulation
des entretiens. Nous présentons dans la figure 46 l’interface de gestion des entretiens.

50
 Figure 46 : Interface de gestion des entretiens
Notre application a l’avantage d’offrir une interface de visioconférence pour élaborer
l’entretien entre le candidat et l’entreprise. La figure 47 présente une capture d'une
visioconférence.

Figure 47 : Interface d’entretien (visioconférence)

3.7 Gestion des responsables

Chaque recruteur peut ajouter des responsables à travers l’interface de gestion des
responsables présentée par la figure 48 afin qu’ils gèrent les offres, les candidatures et
participent à des entretiens.

51
 Figure 48 : Interface de gestion des responsables

3.8 Gestion des utilisateurs

L’administrateur de la plateforme peut consulter le Dashboard et voir le nombre des

candidats, entreprises, offres et entretiens enregistrés dans la base des données ainsi que les
différentes statistiques (cf. Figure 49).

Figure 49 : Dashboard de l’admin

L’admin peut gérer les utilisateurs à travers les deux interfaces illustrées par les figures 50 et
51 présentant respectivement l’interface de la gestion des candidats et celle des entreprises.
La gestion des candidats/entreprises inclut la suppression ou l’archivage d’un candidat ou une
entreprise.

52
 Figure 50 : Interface de gestion des candidats

Figure 51 : Interface de gestion des entreprises

3.9 Gestion des emails

L’administrateur de la plateforme peut voir la liste des emails à envoyer automatiquement

vers les différents utilisateurs.
L’interface de cette liste est présentée par la figure 52.

53
 Figure 52 : Interface de la liste des emails
De plus, l’admin aura peut consulter le contenu du mail et modifier son objet et son corps.
L’interface de la modification du mail est illustrée par la figure 53.

Figure 53 : Interface de modification des emails

Conclusion

Dans ce chapitre, nous avons présenté le travail élaboré. Nous avons commencé par la
description de l’environnement du travail. Par la suite, nous avons présenté l’architecture de
notre projet avec quelques interfaces de l’application afin de donner une vision claire sur le
travail réalisé.

54
 Conclusion générale

Au terme de ce rapport, nous adressons le bilan de notre travail qui a mené à la réalisation du
projet intitulé « conception et développement d'une application web de gestion de recrutement
en ligne » effectué au sein de l’entreprise « Rec-Inov » dans le cadre du projet de fin d’études.
L’objectif de ce stage était de concevoir et développer une plateforme de gestion de
recrutements en ligne.
Le travail élaboré nous a été très instructif du point de vue des connaissances acquises. Il nous
a procuré une opportunité pour explorer un nouvel environnement logiciel. Il nous a aussi
donné l’occasion d’améliorer nos connaissances dans le développement ainsi que plusieurs
autres aspects.
Nous avons implémenté notre application en utilisant le langage de programmation Javascript
précisément l’environnement d'exécution NodeJS et son Framework ExpressJS coté Back-
end, ReactJs coté Front-end et MongoDB comme système de gestion de base de données.
Nous avons suivi la méthodologie SCRUM qui nous a aidés pour contrôler le cycle de vie de
développement de notre solution tout en respectant les bonnes pratiques.
Non seulement, les bénéfices ont été réalisés sur le plan technique mais aussi sur le plan
social. L’intégration dans une équipe de travail a été une expérience qui marquera la période
de réalisation du projet au sein de l’organisme d’accueil.
Une évolution possible de notre projet consiste en une première étape à ajouter une partie chat
grâce à laquelle les utilisateurs de l’application peuvent communiquer entre eux. De plus ce
projet ne va pas se limiter à une application web mais nous envisageons créer une version
mobile.
Nous souhaitons enfin que ce travail soit d’un grand apport pour la société et constituera une
rampe de lancement pour d’autres projets plus vastes et encore plus ambitieux.

55
 Webographie

1. https://www.talentsoft.fr/ (12/02/2021)
2. https://recrutement.softy.pro/ (12/02/2021)
3. https://www.appvizer.fr/ (11/02/2021)
4. https://www.keejob.com (17/02/2021)
5. https://fabskill.com/ (18/02/2021)
6. https://authorzilla.com (21/07/2021)
7. https://www.journaldunet.com (21/07/2021)
8. https://fr.scribd.com (22/07/2021)
9. https://laurent-audibert.developpez.com/ (22/07/2021)
10. https://www.lucidchart.com (23/07/2021)
11. https://www.ionos.fr/ (23/07/2021)
12. https://www.memoireonline.com/ (24/07/2021)
13. https://lecourspratique.blogspot.com (24/07/2021)
14. https://code.visualstudio.com (15/08/2021)
15. https://www.encora.com/ (16/08/2021)
16. https://docs.mongodb.com/ (16/08/2021)
17. https://bitbucket.org (17/08/2021)
18. https://trello.com/ (17/08/2021)
19. https://drawio-app.com (18/08/2021)
20. https://fr.reactjs.org (18/08/2021)
21. https://toptal.com (19/08/2021)
22. https://stackoverflow.com/ (19/08/2021)
23. https://www.mongodb.com/ (20/08/2021)
24. https://www.w3schools.com/ (20/08/2021)
25. https://techterms.com/ (21/08/2021)
26. https://www.investopedia.com/ (21/08/2021)
27. https://www.mygreatlearning.com/ (22/08/2021)
28. https://www.01net.com (22/08/2021)
29. https://medium.com/ (23/08/2021)

i
 Conception et développement d'une
application web de gestion de recrutement

Ahmed Adnen Chwayekh

Résumé :

Ce projet est réalisé dans le cadre du projet de fin d’études. Le but du projet est de créer une
plateforme de recrutement. Il est destiné pour les recruteurs qui s’occupent de la gestion des
offres, entretiens et candidats. En effet, cette plateforme a pour objectif de faciliter la sélection
des meilleurs candidats. Pour ce faire, nous avons implémenté notre application en utilisant le
langage de programmation Javascript précisément l’environnement d'exécution NodeJS et son
Framework ExpressJS coté Back-end, ReactJs coté Front-end et MongoDB comme système
de gestion de base de données.

Abstract:

This project is being carried out as part of the graduation project. The aim of the project is to
create a recruitment platform. It is intended for recruiters who deal with the management of
offers, interviews and candidates. Indeed, this platform aims to facilitate the selection of the
best candidates. To do this, we implemented our application using the JavaScript
programming language precisely the runtime environment NodeJS and its Framework
ExpressJS on the Back-end side, ReactJs on the Front-end side and MongoDB as the database
.management system
:‫تلخيص‬

Mots clés :

Recrutement, Offres d’emploi, React JS, Node JS, Express JS, MongoDB.

Key-words:
Recruitment, Jobs, React JS, Node JS, Express JS, MongoDB.

ii