République Algérienne Démocratique et Populaire

Ministère de l’enseignement Supérieur et de la Recherche Scientifique

Université des Sciences et de la Technologie Houari Boumediene

Faculté d’Electronique et d’Informatique

Domaine Mathématiques - Informatique (MI)

Filière Informatique

Mémoire de Licence
Ingénierie des Systèmes d’Information et des Logiciels (ISIL)

Thème

Conception et mise en œuvre d'une plateforme web pour le

management des équipes de travail et l’affectation des tâches au sein
d’une entreprise

Présenté par

M. CHANANE Sami
Et

M. BOURENNANE Younes Nacer Eddine

L011/2020

Encadré par : Mme HANK Karima

Octobre 2020
 Remerciements

En premier, nous aimerions remercier le bon Dieu le tout puissant de nous

avoir donné le courage et la volonté de réaliser ce projet.

Nous désirons remercier nos chers parents qui nous ont soutenus et

encouragé durant toute notre vie et pendant notre cursus d’étude.

Nous exprimons nos profondes gratitudes et respectueuse reconnaissance à

notre encadreur : Mme HANK Karima Pour sa bonne volonté d'accepter

de nous encadrer, pour tout le temps qu’il nous a octroyé et pour tous les

conseils qu’il nous a prodigué.

Nous tenons à exprimer notre gratitude aux membres de jury pour avoir

accepté de juger ce travail.

Nos vifs remerciements s’adressent également à nos enseignants et à nos

amis, pour leur encouragement.

Enfin nous remercions toute l’équipe administrative et à tous ceux qui,

d’une manière ou d’une autre, ont contribué à la réussite de ce travail et

qui n’ont pas pu être cités ici.

2
Table des matières
Remerciements ..................................................................................................................................... 2
Liste des tableaux ................................................................................................................................. 3
Liste des figures ................................................................................................................................... 4
Liste des abbreviations ......................................................................................................................... 4

Introduction générale ........................................................................................................................ 5

Chapitre I : Présentation du cadre de projet .................................................................................. 6

I.1 Introduction................................................................................................................................. 6
I.2 Cadre général du projet ............................................................................................................... 6
I.3 Problématique ............................................................................................................................. 6
I.4 Contexte du projet....................................................................................................................... 7
Chapitre II : Présentation des solutions similaires ......................................................................... 8
II.1 Introduction ................................................................................................................................ 8
II.2 Présentation ................................................................................................................................ 8
II.3 Diagnostic des solutions similaires .......................................................................................... 10
Chapitre III : Spécifications des besoins ........................................................................................ 12
III.2 Langage de modélisation UML................................................................................................ 12
III.1 Introduction .............................................................................................................................. 12
III.2 Langage de modélisation UML................................................................................................ 12
III.3 Identification des acteurs ......................................................................................................... 12
III.4 Analyse des besoins fonctionnels ............................................................................................ 12
III.5 Spécifications des besoins non-fonctionnels............................................................................ 15
III.6 Les contraintes techniques de déploiement .............................................................................. 15
III.7 Diagramme de cas d'utilisation global ..................................................................................... 16
Chapitre IV : Conception ................................................................................................................ 17
IV.1 Introduction .............................................................................................................................. 17
IV.2 Description de la vue statique .................................................................................................. 17
IV.3 Le passage au modèle relationnel ............................................................................................ 18
IV.4 Description de la vue dynamique............................................................................................. 18
Chapitre V : Réalisation et tests ..................................................................................................... 24
V.1 Introduction ............................................................................................................................... 24
V.2 Technologies utilisées ............................................................................................................... 24
V.3 Le déploiement de la solution ................................................................................................... 26
V.4 Tests d'intégration ..................................................................................................................... 29

Conclusion......................................................................................................................................... 42

Bibliographie .................................................................................................................................... 42

3
Liste des tableaux
Tableau 1 : Présentation des solutions similaires............................................................................. 10

Liste des figures

Figure 1 : Diagramme de cas d'utilisation globale ............................................................................. 16
Figure 2 : Diagramme de classes ....................................................................................................... 17
Figure 3 : Diagramme de séquence "Authentification" ..................................................................... 19
Figure 4 : Diagramme de séquence "Changement de mot de passe" ................................................. 20
Figure 5 : Diagramme de séquence "Ajouter un événement" ............................................................ 21
Figure 6 : Diagramme de séquence "Envoyer un message" .............................................................. 22
Figure 7 : Diagramme de séquence " Assigner une tâche" ................................................................ 23
Figure 8 : Déploiement de la solution dans le réseau intranet d’une entreprise ................................ 27
Figure 9 : Diagramme de déploiement de l’application ..................................................................... 28

Liste des abbreviations

VPN: Virtual Private Network
UML: Unified Modeling Language
PME : Petite ou Moyenne Entreprise
iOS : iPhone Operating System
SaaS : Software as Service
FAI : Fournisseur d'Accès à Internet
HTML: HyperText Markup Language
CSS : Cascading Style Sheets
NoSQL : Not Only Structured Query Language
JSON : JavaScript Object Notation
API : Application Programming Interface
NPM : Node Package Manager
EJS : Embedded JavaScript templates
ODM : Object Data Modeling
IHM : Interaction Homme-Machine
SGBD : Système de Gestion de Base de Données
TCP/IP : Transmission Control Protocol/Internet Protocol
DBMS : Data Base Management System
HTTPS : Hypertext Transfer Protocol Secure

4
Introduction générale
Dans un univers hautement concurrentiel, le management des équipes de travail dans une
entreprise moderne est devenu un véritable enjeu stratégique. Afin de créer ou de maintenir ses
avantages concurrentiels, l’entreprise est continuellement menée à améliorer ses performances, ce
qui se traduit souvent par l’optimisation de ses processus et donc par une maitrise de ses ressources,
que celles-ci soient matérielles ou humaines. Elle cherche toujours le meilleur moyen pour
augmenter sa productivité et de confronter les différents conflits qui peuvent être engendrés par le
manque de coordination au sein de ses différentes unités organisationnelles.

L’informatique devrait être au cœur de toute stratégie d’entreprise. Les solutions logicielles et
les technologies sont en perpétuelles évolutions. Les entreprises aussi évoluent, et voient leurs
besoins informatiques changer selon leur cycle de vie.

Ce présent mémoire qui a pour thème « la Conception et mise en œuvre d'une plateforme web
pour le management des équipes de travail et l’affectation des tâches au sein d’une entreprise » est
structuré en cinq chapitres :

Le premier chapitre concerne la présentation du cadre de projet : il a pour objectif de situer le projet
dans son contexte général, à savoir la problématique qui a inspiré la création de notre plateforme
web, la description du projet et les objectifs à atteindre.
Le deuxième chapitre concerne la présentation des solutions similaires : dans ce chapitre, on se
concentre sur la présentation de quelques solutions logicielles qui sont connues sur le marché et qui
sont destinées pour la gestion des équipes de travail et l’affectation des taches.
Le troisième chapitre concerne les spécifications des besoins : nous définissons le Langage de
modélisation UML, identification des acteurs, analyse des besoins fonctionnels, spécification des
besoins non fonctionnels, les contraintes techniques de déploiement, pour arriver enfin à mettre une
vue sur l’utilisation générale du système.
Le quatrième chapitre concerne la conception : nous allons faire une conception détaillée de notre
application en présentant le diagramme de classes et les diagrammes de séquences, on va mettre
aussi en évidence une étude conceptuelle pour l’application et décrire les scénarios d’échange des
informations dans le système tout en se basant sur le langage de modélisation unifié UML.
Le cinquième chapitre concerne la réalisation et tests : c’est le dernier chapitre, c’est la partie de
l’implémentation et la réalisation de notre application, où nous présenterons l’environnement de
développement, les technologies utilisées, l’élaboration de diagramme de déploiement et les tests
d’intégration.

Enfin, nous clôturons ce mémoire par une conclusion générale qui résume le travail réalisé, et
qui apprécie les compétences acquises durant cette expérience professionnelle.

5
 Chapitre I : Présentation du cadre de projet

Chapitre I : Présentation du cadre de projet

I.1 Introduction
I.2 Cadre général du projet
I.3 Problématique
I.4 Contexte du projet

I.1 Introduction
Ce chapitre a pour objectif de situer le projet dans son contexte général, à savoir la
problématique qui a inspiré la création de notre plateforme web, la description du projet et les
objectifs à atteindre.

I.2 Cadre général du projet

« Les gagnants seront ceux qui restructurent la manière dont l’information circule dans leur
entreprise » Bill Gates.
Une bonne communication interne est l’une des règles de base du travail dans une entreprise.
Une unité organisationnelle n’est pas la seule dans son coin, mais elle fait partie d’un tout avec les
autres unités ou structures. Le fait de savoir en bref la disponibilité des autres et sur quoi ils
travaillent ? Avec quels clients et quelles technologies ? Sur quel projet ? Ce qui permet de savoir
où s’adresser en cas de besoin pour obtenir des informations. Il est ainsi plus facile d’apporter de
l’aide au bon moment pour la résolution d’un problème, ou de savoir à qui demander de l’aide
lorsque l’on en a besoin.
Le travail en équipe est très important, l’union fait la force ! Les faiblesses des uns sont
compensées par les atouts des autres, et tout le monde progresse et travaille à la réalisation des
objectifs individuels et communs.
Des employés motivés et heureux donneront le meilleur d’eux-mêmes pour contribuer à la
réussite de l’entreprise.

I.3 Problématique
La plupart des entreprises optent pour une organisation à structures hiérarchiques, dont la quelle
chaque unité a son propre chef, dont la responsabilité et l’autorité sont limitées aux employés de
cette unité, et inversement, chaque employé est tenu à exécuter les tâches et de rendre les comptes à
son unique supérieur hiérarchique. La circulation de l’information dans ce type d’organisation
nécessite d’être renforcer afin d’améliorer l’esprit d’équipe, d’augmenter le sens d’appartenance et
de créer en quelque sorte une solidarité et un rapprochement entre tous les employés de l’entreprise.

Pour les entreprises qui ne disposent pas d’une solution de management des équipes de travail, le
manager qui est quotidiennement confronté à des changements sur les plannings d'interventions, ne
peut en aucun cas gérer efficacement ses employés s’il ne dispose pas d’une vision individuelle ni
collective de son personnel, il ne peut ni gérer convenablement les tâches, ni planifier les absences.

Dans certaines situations, il ne peut pas savoir en temps réel qui fait quoi ? Qui remplace qui ?
Qui est sur site et qui est en déplacement ? Qui a rejoint son poste de travail ? Et qui n’est pas
encore. Avec une solution logicielle de management il peut planifier ses employés et les faire
intervenir selon leurs aptitudes et leurs disponibilités et à optimiser la gestion du temps de travail et
la gestion des priorités pour bien s’adapter aux imprévus.

6
 Chapitre I : Présentation du cadre de projet

Pour les entreprises qui disposent de l’intranet, ce dernier n’est accessible qu’à partir des postes
de travail des employés se trouvant sur site, contrairement pour ceux qui sont en dehors de
l’entreprise ou en déplacements. Par mesures de sécurité, l’intranet n’est pas utilisé en externe, sauf
dans le cas des extensions comme l’Extranet ou le VPN qui sont utilisés dans le but de partager des
sources d’informations à un nombre restreint de personnes se trouvant en dehors de l'entreprise. Ces
extensions ne sont pas épargnées des risques d’exposer le système d’information de l’entreprise à
toute sortes d’attaques informatiques ou actions malveillantes qui proviennent de l’internet si elles
ne sont pas bien sécurisées.

En plus, si l’entreprise ne dispose d’aucune solution pour couvrir suffisamment les besoins des
employés qui se trouvant en déplacements, ces derniers vont sûrement utiliser les réseaux sociaux
grands publics à des fins de communication ou d’échanges d’informations sensibles à caractère
administratif ou professionnel, ce qui va exposer la confidentialité et la sécurité de système
d’information de l’entreprise à un vrai danger.

Une solution web pour le management des équipes de travail est devenue très utile non
seulement pour la gestion des taches mais aussi pour le control et le suivi des absences imprévues
en cas des problèmes inattendus comme les intempéries ou comme la pandémie covid19 qui a
touché tous les secteurs de notre vie en empêchant le déplacement des personnes pour rejoindre
leurs postes de travail ce qui a rendu les tâches des managers beaucoup plus complexes.

I.4 Contexte du projet

Notre solution est un logiciel métier, son objectif principal est d’améliorer considérablement le
management des équipes de travail, en assurant en même temps la bonne circulation de
l'information entre les différentes structures d’une entreprise quelles que soient les situations

C’est une solution web qui est destinée non seulement pour le management d’es équipes mais
aussi elle est une plateforme d’information et de communication. Elle peut être utilisée seule ou
comme un complément aux réseaux intranet déjà existants au niveau des entreprises, elle fonctionne
avec les navigateurs internet qui sont utilisés dans des pc, tablettes ou smart phones. Elle ne
demande pas d’être téléchargée ni d’être installée, en plus elle peut être lancée rapidement et
facilement par tout le personnel avec un minimum de manipulation.

7
 Chapitre II : Présentation des solutions similaires

Chapitre II : Présentation des solutions similaires

II.1 Introduction
II.2 Présentation
II.3 Diagnostic des solutions similaires

II.1 Introduction
Dans ce chapitre, on se concentre sur la présentation de quelques solutions logicielles connues
sur le marché et qui sont destinées ou proches au Management des équipes de travail et affectation
des taches. On va ensuite extraire les caractéristiques techniques ainsi que les fonctionnalités
utilisées afin de nous permettre de concevoir une solution similaire qui doit répondre aux attentes
des entreprises.

II.2 Présentation
Nous allons présenter quatre applications connues sur le marché avec leurs fonctionnalités.

II.2.1 Glip [1]

Lancée en 2012 aux États-
Unis
C’est une plateforme de
conversation qui permet aux
équipes de planifier, de
partager et d'organiser les
tâches de travail. Les
fonctionnalités de chat par
messagerie et vidéo facilitent
la communication entre les
membres d’une équipe,
tandis que le partage de
fichiers et la gestion de
tâches en collaboration favorisent l'efficacité et la productivité.
Fonctionnalités offertes :
- Répertoire des employés - Gestion des contacts - Gestion des tâches - Suivi du pourcentage de
progression d’une tâche - Gestion des calendriers - Forum de discussion - Messagerie textuelle
instantanée (chat) -
Messagerie - échange des
fichiers - Alertes et
Notifications.

II.2.2 Azendoo [2]

Lancée en 2012 aux
États-Unis
À partir de 7,50 $US/
mois/utilisateur

8
 Chapitre II : Présentation des solutions similaires

C’est une application de gestion du travail qui aide les équipes à planifier et à partager des
tâches, à synchroniser des projets et à communiquer plus efficacement. Elle aide les entreprises de
toutes tailles à stimuler leur productivité, et elle aligne les équipes de travail sur les mêmes objectifs
et suit le travail plus efficacement, en temps réel. Des entreprises comme Cisco, Coca-Cola, Cartier
et d’autres, s'appuient sur cette application pour faire leur travail et ne plus se limiter aux e-mails et
aux réunions.
Fonctionnalités offertes :
- Répertoire des employés - Gestion des contacts -Gestion des tâches - Suivi du pourcentage de
progression d’une tâche - Gestion des calendriers - Forum de discussion - échange des fichiers
- Alertes et Notifications.

II.2.3 Basecamp [3]

Lancée en 2004 aux États-
Unis
À partir de
99,00 $US/mois/utilisateur
Disponible aux États-Unis,
Canada, Royaume-Uni,
Australie, Chine, Inde
C’est une application
collaborative de gestion de
projet et de suivi des tâches
quotidiennes utilisable par des
équipes de toutes tailles, des
Petites/Moyennes/Grandes
entreprises. En plus des
fonctionnalités pour la gestion des tâches et la communication d'équipe, Basecamp permet la
gestion et le stockage sécurisé des documents et des communications liées au projet.
Fonctionnalités offertes :
- Répertoire des employés - Gestion des contacts - Gestion des tâches - Suivi du pourcentage de
progression d’une tâche - Gestion des calendriers - Forum de discussion - Messagerie textuelle
instantanée (chat) - échange des fichiers - Alertes et Notifications.

II.2.4 Flock [4]

Lancée en 2014 en inde
À partir de
4,50 $US/mois/utilisateur
Plus de 25 000 entreprises à
travers le monde
C’est une application de
communication et de collaboration
conçue spécialement pour les
équipes qui recherchent un moyen
de communiquer plus rapidement et
plus efficacement. Vous pouvez
discuter de projets, partager des
idées et prendre des décisions plus
rapidement. Elle servi déjà plus de
25 000 entreprises à travers le monde.
Fonctionnalités offertes :
9
 Chapitre II : Présentation des solutions similaires

- Répertoire des employés - Gestion des contacts - Gestion des tâches -Suivi du pourcentage de
progression d’une tâche - Gestion des calendriers - Forum de discussion - Messagerie textuelle
instantanée (chat) - Messagerie - échange des fichiers - Alertes et Notifications.

II.3 Diagnostic des solutions similaires

Vu le nombre important de fonctionnalités offertes par ces solutions logiciels, nous avons cité
dans le tableau que les fonctionnalités qui sont destinés pour gestion des tâches et gestion des
équipes de travail.
Les fonctionnalités présentées dans le tableau1 seront la base de la conception de notre plateforme
web.

Tableau 1 : Présentation des solutions similaires

Glip Azendoo Basecamp Flock

Tarif du logiciel par

5 $US/mois 24.17 $US/mois 99,00 $US/mois 4,5 $US/mois
utilisateur

Lancée 2012 2012 2004 2014

Origine États-Unis États-Unis États-Unis Inde

PME aux PME aux PME aux

PME aux grandes
Pour entreprises grandes grandes grandes
entreprises
entreprises entreprises entreprises
Cloud, SaaS, Cloud, SaaS, Cloud, SaaS,
Web Installation Cloud, SaaS, Web Web Installation Web Installation
(Mac, Installation (Mac, (Mac, (Mac,
Déploiement
Windows) Windows) Mobile Windows) Windows)
Mobile (iOS, (iOS, (Androïde) Mobile (iOS, Mobile (iOS,
(Androïde) (Androïde (Androïde
Langue Anglais Anglais Anglais Anglais
Organigramme de
Non Non Non Non
l’entreprise
Notification
Non Non Non Non
Présence /Absence
Répertoire des employés Oui Oui Oui Oui
Gestion des contacts Oui Oui Oui Oui
Gestion des tâches Oui Oui Oui Oui
Suivi du pourcentage de
Oui Oui Oui Oui
progression d’une tâche
Gestion des calendriers Oui Oui Oui Oui
Forum de discussion Oui Oui Oui Oui
Messagerie Oui Non Non Oui
Messagerie textuelle
Oui Non Oui Oui
instantanée (chat)
Echange des fichiers Oui Oui Oui Oui
Alertes et Notifications Oui Oui Oui Oui
Les concepteurs des logicielles cités précédemment ont choisi les fonctionnalités et les
technologies selon les besoins du marché.

10
 Chapitre II : Présentation des solutions similaires

Nous avons constaté que ces concepteurs ont opté pour les applications natives, qui sont
adaptées avec leur société. Contrairement, elles peuvent présenter des inconvénients si on s’engage
à les acquérir et à les utiliser dans notre société pour les raisons suivantes :
- Une application native doit systématiquement être installée sur les appareils des utilisateurs avec
sous réserve qu’elle soit compatible avec leurs systèmes d’exploitation : Windows, Mac, Linux,
Androïde, iOS …etc., cette contrainte de comptabilité va réduire le nombre des modèles des
appareils à utiliser.
- Une application native plus récente et plus performante demande des appareils plus sophistiqués
ce qui veut dire plus chers, ce qu’il n’est pas à la portée de tout le personnel de l’e entreprise.
- Elle nécessite fréquemment des mises à jour qui obligent le personnel de les télécharger
régulièrement.
- Etant donné, qu’elles ne sont pas faciles à les développer et à les maintenir à cause de la diversité
des marques d’appareils qui sont utilisés par le personnel de l’entreprise, elles sont plus couteuses
pour les acquérir.
Nous avons constaté aussi que la plupart des Logiciels fonctionnent en mode SaaS qui permet
aux éditeurs des logiciels de les héberger sur des cloud et l’utilisateur souscrit un abonnement
mensuel ou annuel, ce qui n’est pas souhaité par certaines entreprises qui préfèrent acquérir ces
applications pour que la sauvegarde de données et les mises à jour soient effectuées sur leurs
propres centres de données pour des raisons techniques, de confidentialité et de souveraineté. Les
entreprises veulent être indépendantes et être loin de tout conflit ou litige qui peut causer l’arrêt du
logiciel. En plus le coût du fonctionnement en mode SaaS est nettement supérieur en comparant
avec une application web surtout pour les grandes entreprises.

En examinant les logiciels présentés dans le tableau, on remarque qu’ils offrent presque les
mêmes fonctionnalités afin qu’ils répondent aux besoins des entreprises modernes. C’est pour cette
raison que notre application web à concevoir ne va pas sortir de cette règle, notre objectif est
d’essayer de concevoir et réaliser une application non seulement pour la gestion des équipes de
travail et l’affectation des taches, mais aussi nous allons ajouter un organigramme interactif de
l’entreprise qui permet au personnel d’avoir une vue générale sur l’organisation et sur les postes
hiérarchique au sein de l’entreprise ce qui va augmenter l’esprit d’équipe, renforcer le sens
d’appartenance et de créer en quelque sorte une solidarité entre le personnel. En plus elle sera une
plateforme web fonctionnelle avec tous les appareils des utilisateurs et elle sera logée dans les
centres de données des entreprises pour des raisons de confidentialité et de souveraineté et elle peut
être utilisée en interne via un portail intranet ou à distance via l’internet.

11
 Chapitre III : Spécifications des besoins

Chapitre III : Spécifications des besoins

III.1 Introduction
III.2 Langage de modélisation UML
III.3 Identification des acteurs
III.4 Analyse des besoins fonctionnels
III.5 Spécifications des besoins non-fonctionnels
III.6 Les contraintes techniques de déploiement
III.7 Diagramme de cas d'utilisation globale

III.1 Introduction
Avant de commencer ce chapitre, et en se référant aux chapitres précédents, on peut dire que les
besoins ne seront détectés qu’après l’étude des problématiques qui touchent le management des
équipes de travail au sein des entreprises, surtout pour gérer le personnel dispersé et pour avantager
le travail à distance.
Dans cette partie, on commence principalement à définir les différents acteurs du système, on
entame l’étude des besoins fonctionnels et nous définissons les besoins non fonctionnels, ensuite
nous parlons sur les contraintes techniques de déploiement, à la fin nous arrivons à réaliser le
diagramme des cas d’utilisation globale à l’aide de langage UML.

III.2 Langage de modélisation UML

Le langage UML est un langage visuel constitué d’un ensemble de schémas, appelés des
diagrammes, qui donnent chacun une vision différente du projet à traiter. Il nous fournit donc des
diagrammes pour représenter le logiciel à développer : son fonctionnement, sa mise en route, les
actions susceptibles d’être effectuées par le logiciel, etc.
Ce langage ne préconise aucune démarche, ce n’est donc pas une méthode. Chacun est libre
d’utiliser les types de diagramme qu’il souhaite, dans l’ordre qu’il veut. Il suffit que les diagrammes
réalisés soient cohérents entre eux, avant de passer à la réalisation du logiciel. [5]

Dans notre travail, on va utiliser les diagrammes suivants : le diagramme des cas d’utilisation
global, le Diagramme des Classes, le Diagramme des séquences et le Digramme de déploiement.

III.3 Identification des acteurs

On peut distinguer trois types d’utilisateurs : l’Administrateur, le Manager et l’Employé.
1. L’employé : Il s’agit de tout employé simple de l’entreprise qui est chargé d’accomplir les tâches
qui lui sont assignées, il n’est responsable que de lui-même.
2. Le Manager : il s’agit d’un responsable d’une unité organisationnelle ou une structure, il lui
revient donc d’animer, de coordonner et de manager chaque employé. Il doit pour cela régler les
différents types de problèmes soient d’ordre humain, technique ou matériel, son rôle est de répartir
la charge de travail entre ses employés en tenant compte des compétences de chacun.
3. L’Administrateur : il s’agit d’un informaticien, le responsable de l’intranet ou il est seulement
désigné pour l’administration de cette plateforme web.

III.4 Analyse des besoins fonctionnels

Dans cette partie, nous allons mettre les fonctionnalités suivantes à la disposition des acteurs :
 La Création des comptes : elle est gérée uniquement par l’administrateur, ce dernier va attribuer
au préalable à tous les noms des utilisateurs des mots de passe associés avant d’être distribués en
main propre aux personnels de l’entreprise. Ces informations doivent être introduites correctement
12
 Chapitre III : Spécifications des besoins

par l’utilisateur lors de chaque authentification, afin qu’il puisse accéder à son espace de travail. Cet
espace va lui donner la possibilité de changer son mot de passe autant de fois qu’il le désire.
 Authentification : elle est disponible sur la page d’accueil qui s’affiche au lancement de
l’application, l’utilisateur doit introduire correctement son nom d’utilisateur et son mot de passe
pour que le système l’accepte. Dans le cas contraire, le système va lui afficher un message d’erreur.
Après l’authentification, l’utilisateur accède directement à son espace de travail et précisément à
son profil utilisateur qui s’affiche par défaut.
 Organigramme de l’entreprise : c’est une représentation schématique interactive qui permet aux
utilisateurs de visualiser en temps réel tous les liens fonctionnels et hiérarchiques de différentes
unités de l’entreprise. Il permet aussi l’accéder à tous les postes de travail. Le fait que l’employé
trouve sa position dans l’organigramme de l’entreprise, renforce son esprit d’équipe et augmente le
sens d’appartenance à l’entreprise, surtout lorsqu’il se sent éloigné de ses collègues.
 Poste de travail d’un employé : il est représenté dans l’organigramme sous forme d’une case
interactive et identifié par son nom, sa photo d’identité et la fonction qu’il occupe, afin de permettre
aux autres d’accéder directement pour consulter son profil utilisateur ou son calendrier des
évènements.
 Profil utilisateur : c’est la page qui s’affiche par défaut après l’authentification, elle se trouve
dans l’espace utilisateur, il contient les informations personnelles de l’utilisateur : son nom et
prénom, sa fonction, ses numéros de contacts personnel. L’utilisateur a le droit de changer ses
informations personnelles à tout moment.
 Contacts : chaque utilisateur dispose de sa propre liste favorite des utilisateurs classé par ordre
alphabétique. Il peut la créer suivants ses besoins.
 Calendrier des évènements : chaque utilisateur dispose de son propre calendrier, qui va permettre
aux autres utilisateurs de consulter son contenu afin d’être informés sur sa présence, son absence,
son éventuel remplaçant intérimaire et de ce qui fait et ce qu’il comptait faire dans les prochains
jours, ça aide à la gestion des équipes de travail, à l’échange de l’information, à amélioration de la
communication et de la collaboration.
 Gestion des Tâches : elle s’occupe de toutes les tâches envoyées par le manager à ses
collaborateurs, elles peuvent contenir comme pièces jointes des fichiers documents, images, audio
et vidéo. L’avancement d’exécution d’une tache est représenté par une barre de progression qui est
ajustée par l’exécuteur de la tâche, elle peut être suivie on ligne par tous les concernés. Ces derniers
peuvent suivre la traçabilité de l’affectation de cette tâche.
 Messagerie : elle s’occupe de tous les échanges des messages entre le personnel de l’entreprise,
elle peut contenir comme pièces jointes des documents, images, fichiers audio et des vidéos, ces
messages peuvent être envoyés à plusieurs destinataires en même temps, les fichiers en format PDF
audio et vidéo, peuvent être lus directement sans les télécharger. Si l’espace de stockage dédié à la
messagerie est limité, l’utilisateur ne peut pas envoyer des messages si sa boite d’envoi est pleine, il
ne peut pas recevoir des messages si sa boite de réception est aussi pleine.
 Messagerie textuelle instantanée (chat) : c’est une conversation entre deux personnes, cette
fonctionnalité est accessible à partir de la liste des contacts.
 Forum de discussion : c’est une conversation entre plus de deux personnes, cette fonctionnalité
est accessible à partir de gestion des taches.
 Notification : c’est une action d’affichage qui informe instantanément l’utilisateur sur un
changement d’un état lié à une fonctionnalité, cette notification est représentée par un chiffre qui
s’incrémenter à chaque nouvel état et de décrémente à chaque lecture d’une notification.
Les notifications se d’éclanches dans les cas suivants :
 Gestion des événements :
o La réception d’un évènement dans le calendrier des évènements.
o La modification ou l’annulation d’un évènement par le responsable.
 Gestion des tâches :
o La réception d’une tâche.

13
 Chapitre III : Spécifications des besoins

o La modification ou l’annulation d’une tache par le responsable.

o L’annulation d’une tache par le concerné, dans ce cas-là le responsable est informé par une
notification.
o La réception d’un nouveau message textuel dans un forum de discussion, organisé autour d’une
tâche.
 Messagerie :
o L’émetteur de message :
- À l’arrivée de 90% de la capacité de stockage de la boite d’envoi
- La boite d’envoi est plaine, le message ne peut pas être envoyé.
- La boite de réception de destinataire est plaine, le message ne peut pas être envoyé.
o Le récepteur de message :
- À la réception d’un nouveau message
- À l’arrivée de 90% de la capacité de stockage de la boite de réception
- La boite de réception est plaine, le message ne peut pas être reçu.
 Messagerie textuelle instantanée (chat):
o La réception d’un message textuel

Les fonctions associées aux Acteurs de système :

III.3.1 l’Employé
Le système va permettre à tout employé d’utiliser les fonctionnalités suivantes :
 Authentification
o S’authentifier pour accéder à l’application en tapant le user Name et le mot de passe.
 Gestion de l’espace de travail
o Modifier son mot de passe
 Gestion de profil utilisateur
o Consulter/Modifier ses informations personnelles.
o Consulter les profils utilisateur des autres.
 Organigramme de l’entreprise
o Consulter l’organigramme de l’entreprise
o Consulter les postes de travail du personnel.
 Gestion de contacts
o Consulter la liste des contacts
o Rechercher un contact
o Ajouter/Supprimer un contact
 Gestion de calendrier des évènements
o Consulter les calendriers
- Consulter son calendrier
- Consulter les calendriers des autres
o Ajouter/ Modifier/Supprimer un évènement sur son calendrier.
 Gestion de tâches
o Consulter les tâches reçues ou assignées
o Ajuster la barre de progression
o Entrer en forum de discussion textuel au tour d’une tâche
 Gestion des messages
o Consulter la liste des messages envoyés
o Consulter la liste des messages reçus.
o Envoyer des messages à un seul ou à plusieurs utilisateurs.
o Supprimer un mail dans la liste des mails envoyés.
o Supprimer un mail dans la liste des mails reçu.
o Messagerie textuelle instantanée (chat)
14
 Chapitre III : Spécifications des besoins

o Envoyer/recevoir des messages textuelles.

 Gestion de notifications
o Recevoir les notifications.
o Consulter les notifications.

III.3.2 le Manager
En plus des fonctions attribuées à l’employé de l’entreprise, le Manager ou le responsable d’une
unité organisationnelle, dispose des fonctions supplémentaires suivantes :
 Gestion des évènements
o Planifier/Modifier/Supprimer un évènement à ses employés.
 Gestion des tâches
o Envoyer ou Assigner/Modifier/Supprimer une tâche à ses employés.

III.3.3 l’Administrateur
En plus que des fonctions attribuées à l’employé de l’entreprise, l’administrateur dispose des
fonctionnalités supplémentaires suivantes :
 Création des comptes
 Organigramme de l’entreprise
o Ajouter/Modifier/Supprimer une unité organisationnelle d’une entreprise.
o Ajouter/Modifier/Supprimer un poste de travail.

III.5 Spécifications des besoins non-fonctionnels

Après la spécification des besoins fonctionnels, on passe à l’identification des besoins non
fonctionnels ou dites les besoins techniques. Parmi ces besoins on peut citer :
- Validité des besoins : elle doit répondre aux besoins des entreprises.
- Fiabilité : elle doit avoir la capacité de fonctionner sans pannes et de donner des résultats corrects
quelles que soient les conditions de fonctionnement.
- Ergonomie : elle doit avoir une interface utilisateur simple pour faciliter l'utilisation, Cela signifie
que l'opérateur doit fournir un minimum d'entrées pour obtenir le rendement souhaité et que la
machine minimise les sorties non souhaitées pour l'homme.
- Portabilité : elle doit avoir la capacité de fonctionner dans différents environnements d'exécution,
qu'il s'agisse d'environnements matériels ou logiciels.
- Compatibilité : elle doit avoir la capacité de coexister et de fonctionner de manière satisfaisante
avec d’autres systèmes dans le même environnement.
- Sécurité : elle doit être protégée contre les attaques de logiciels malveillants ou les accès non
autorisés.
- Maintenabilité : elle doit avoir la capacité d'être maintenue facilement et en peu de temps.
- Efficacité : avant de la mettre sur le marché, elle doit passer par les tests unitaires, les tests
d’intégration et les tests de validation afin de confirmer qu’elle répond réellement à ses
spécifications.
- Performance : elle doit être performante, c'est-à-dire qu'elle doit répondre aux actions de
l'utilisateur dans un délai très court.
- Scalabilité : elle doit maintenir ses fonctionnalités et ses performances en cas de forte demande.

III.6 Les contraintes techniques de déploiement

Notre application web ne présente pas réellement des contraintes techniques de déploiement,
pour qu’elle soit fonctionnelle, elle a besoin seulement de :

15
 Chapitre III : Spécifications des besoins

- l’acquisition d’une adresse IP publique avec un nom du domaine et une connexion internet avec
un très haut débit, elles sont disponibles au niveau d’un fournisseur FAI en Algérie comme
l’opérateur « Algérie Telecom ».
- l’installation des équipements actifs dans une salle informatique, comme un serveur applicatif,
serveur de gestion base de données et les baies de stockage.
- L’installation des équipements de sécurité réseaux comme des firewalls afin d’épargner les
serveurs et la base de données de tout danger.

III.7 Diagramme de cas d'utilisation global

À ce niveau, on présente les fonctionnalités générales du système sous forme d’un diagramme
des cas d’utilisation global qui relie les acteurs aux différents modules.

Figure 1 : Diagramme de cas d'utilisation globale

16
 Chapitre IV : Conception

Chapitre IV : Conception
IV.1 Introduction
IV.2 Description de la vue statique
IV.3 Le passage au modèle relationnel
IV.4 Description de la vue dynamique

IV.1 Introduction
Dans le présent chapitre nous allons entamer une partie importante du développement de notre
application c’est de faire une conception détaillée en présentant une vue statique et une vue
dynamique sous différents diagrammes (diagramme de classes et diagrammes de séquences).

IV.2 Description de la vue statique

Le diagramme de classes est le diagramme le plus utilisé d’UML. Il décrive les types des objets
qui composent un système et les différents types de relations statiques qui existent entre eux.

Figure 2 : Diagramme de classes

17
 Chapitre IV : Conception

IV.3 Le passage au modèle relationnel

Employé (employe_id, username, password, type, nom, prénom, dateNaissance, imageUrl, bureau,
numTelPortable, num4chifres, adresseEmail, estConnecté, unité_id*, manager_id*)
EmployéSimple (employéSimple_id, employe_id*)
Manager (manager_id, employe_id*)
Administrateur (administrateur_id, employe_id*)
AjouterAuContacts (employe_id*, employe_id*)
UnitéOrganisationnelle (unité_id, nom, type, manager_id*, unité_id*)
MessageTextuel (msgInstantané_id, texte, envoyé_le, envoyéPar, employe_id*, tache_id*)
Évènement (evenement_id, titre, type, début, fin, détail, planifié_par)
ÉvènementPrévuPour (employe_id*, évenement_id*)
Message (message_id, titre, fichiers, texte, envoyé_le, envoyé_par, message_id*)
MessageEnvoyéA (message_id*, employe_id*)
Tache (tache_id, titre, début, fin, fichiers, documentation, progression, créé_le, créé_par)
TacheAssignéA (tache_id*, employe_id*)

IV.4 Description de la vue dynamique

Les diagrammes de séquences sont la représentation graphique des interactions entre les acteurs
et le système selon un ordre chronologique dans la formulation UML. Le diagramme de séquences
permet de montrer les interactions d’objets dans le cadre d’un scénario d’un diagramme de cas
d’utilisations.
Il est difficile de représenter tout le système dynamique dans un seul diagramme de séquence,
chacun étant généralement lié à une sous-fonction du système.
Les diagrammes de séquences des itérations citées ci-haut sont les suivantes :

18
 Chapitre IV : Conception

IV.4.1 Authentification
Dans le diagramme suivant, nous présentons le scénario relatif à l’Authentification. L’utilisateur
doit saisir le « Nom d’utilisateur » et le « mot de passe » avant d’accéder à son profil utilisateur.

Figure 3 : Diagramme de séquence "Authentification"

19
 Chapitre IV : Conception

IV.4.2 Changement de mot de passe

Dans le diagramme suivant, nous présentons le scénario relatif au « Changement de mot de passe »

Figure 4 : Diagramme de séquence "Changement de mot de passe"

20
 Chapitre IV : Conception

IV.4.3 Planifier un évènement

Dans le diagramme suivant, nous présentons le scénario relatif à « Ajouter un évènements »

Figure 5 : Diagramme de séquence "Ajouter un événement"

21
 Chapitre IV : Conception

IV.4.4 Envoyer un Message

Dans le diagramme suivant, nous présentons le scénario relatif à « Envoyer un mail ».

Figure 6 : Diagramme de séquence "Envoyer un message"

22
 Chapitre IV : Conception

IV.4.5 Envoyer ou Assigner une tâche

Dans le diagramme suivant, nous présentons le scénario relatif à « l’Envoi ou l’Assignement
d’une tâche ».

Figure 7 : Diagramme de séquence " Envoyer ou Assigner une tâche"

23
 Chapitre V : Réalisation et tests

Chapitre V : Réalisation et tests

V.1 Introduction
V.2 Technologies utilisées
V.3 Le déploiement de la solution
V.4 Tests d'intégration

V.1 Introduction
Après avoir effectué l’analyse et la conception de la solution web, nous allons dans ce présent
chapitre, décrire en premier lieu les outils de développement utilisés. Ensuite l’élaboration du
diagramme de déploiement et à la fin les tests d'intégration.

V.2 Technologies utilisées

Le choix des technologies et des outils logiciels adéquats est primordial pour le développement
de notre application et pour faciliter sa réalisation.

V.2.1 Environnement logiciel

- L’éditeur de texte : l’écriture du code a été faite par l’éditeur de texte « Visual
Studio code » qui est un éditeur de code open-source développé par Microsoft pour
Windows, Linux et MacOs, supportant un très grand nombre de langages.
- Logiciel de création de diagrammes : pour les besoins de notre projet, nous avons utilisé
l’outil de modélisation « Visual Paradigm Online Diagrams » qui nous a permis réaliser
les différents diagrammes contenus dans ce mémoire.

V.2.2 Environnement technique

- HTML5 : c’est le langage de balisage pour la structure et la présentation des pages Web
dans le navigateur, il est souvent utilisé conjointement avec le langage de programmation
JavaScript et des feuilles de style en cascade CSS.
- CSS3 : c'est un langage de style utilisé pour décrire comment les éléments HTML doivent
être affichés sur l’écran, c’est à dire de choisir la couleur du texte, sélectionner la police et
définir la taille du texte, les bordures, le fond, …etc.
- Bootstrap : c’est un framework côté client populaire et gratuit utilisé pour développer des
sites web attrayants et réactifs.
- Semantic UI : c’est un autre Framework côté client de grande qualité qui brille
notamment par sa simplicité, il a un design élégant, subtil et plat qui offre une
expérience utilisateur légère.
- Java Script : souvent abrégé en « JS », est un langage de script léger, orienté objet,
principalement connu comme le langage de script des pages web. Mais il est aussi utilisé
dans de nombreux environnements extérieurs aux navigateurs web tels que Node.js,
Apache. [6]
- JQuery : c’est une bibliothèque javascript multiplateforme utilisée côté client,
elle aide le développeur web à écrire des scripts soignés en moins de temps et
moins de lignes de code.

24
 Chapitre V : Réalisation et tests

- Node.js : c’est un environnement d'exécution JavaScript monothread orientée

évènements, open sources et multiplateforme, utilisant le moteur d'exécution V8 de
Google chrome qui analyse et exécute du code JavaScript très rapidement et il
fonctionne d'une manière non bloquant (asynchrone), Cela le rend léger, efficace et
parfaitement adapté aux applications qui fonctionnent en temps réel, gourmandes en
données qui s'exécutent sur des appareils distribués. Comme c’est le cas de notre
application.
- Express.js : c’est un Framework d'application web le plus populaire pour
node.js. Il rend le développement des applications web plus rapide et plus
facile. Il offre aussi de nombreux outils pour rendre le développement plus
optimisé, plus sécurisé et plus flexible.
- MongoDB : c’est un système de gestion de base de données open-source et multiplateforme
orienté document, classé comme NoSQL, répartissable sur un nombre
quelconque d'ordinateurs pour plus de sécurité et de productivité, et ne
nécessitant pas de schéma prédéfini des données pour une meilleure flexibilité
Nous avons choisi le MongoDB, l’Express.js et le Node.js pour les raisons
suivantes :
1. Ils sont gratuits et open-source.
2. Node.js est très rapide grâce au moteur V8 et son fonctionnement asynchrone.
3. L'utilisation de JavaScript à la fois côté client et côté serveur, rend le développement de
l'application plus soigné et plus facile.
4. L'utilisation de JSON comme format pour l'échange de données sur toutes les couches. Il n'est
donc pas nécessaire d'utiliser des bibliothèques pour convertir les données lors des interactions
côté client et côté serveur. De plus, JSON permet également de travailler facilement avec des API
externes.
5. Node.js a un gestionnaire de packages NPM, c'est le plus grand registre de
logiciels au monde, il nous a fourni les bibliothèques nécessaires pour réaliser
notre application.
- EJS : c’est un langage simple de création de modèles (Template). Cela nous
permet d'intégrer du code JavaScript brut dans notre HTML.
- Mongoose : c’est une bibliothèque ODM pour MongoDB et Node.js, elle offre
des outils pour faciliter la manipulation des données.
- Passport.js : c’est un middleware d'authentification pour Node.js, il est modern,
flexible et compatible avec Express.
- Helmet.js : est une bibliothèque javascript qui permet de sécuriser
l'application Web en définissant divers en-têtes HTTP.
- Socket.IO : [7] c’est une bibliothèque JavaScript qui permet une communication bidirectionnelle
en temps réel entre les clients et le serveur. Elle utilise les WebSockets par défaut et comme les
navigateurs ne gèrent pas tous les WebSockets, cette bibliothèque est capable d'utiliser d'autres
techniques de communication synchrones en choisissant la technique la plus adaptée pour chaque
client comme :
WebSocket
Adobe Flash Socket
AJAX long polling
AJAX multipart streaming
Forever Iframe
JSONP Polling
Nous avons utilisé cette bibliothèque dans notre application pour faire fonctionner en temps
réel la réception de tâches, la réception des messages, le chat et les notifications.

25
 Chapitre V : Réalisation et tests

- FullCalendar : c’est une bibliothèque JavaScript légère coté client, pour créer des calendriers
pleine taille et élégants. Nous l'avons utilisé dans notre application pour créer un calendrier
d'événements pour chaque employé.
- Multer : c’est un middleware node.js pour la gestion de multipart/form-data, qui est
principalement utilisé pour télécharger des fichiers. [8]
- GridFS : c’est la spécification MongoDB pour stocker et récupérer des fichiers volumineux tels
que les fichiers images, les fichiers audio, la vidéo...etc.
Mongo DB peut stocker des fichiers d'une taille maximale de 16 Mo, par contre avec GridFS, nous
pouvons stocker des fichiers plus volumineux, en utilisant par défaut deux collections :
Le « fs.files » pour stocker les métadonnées des fichiers et le « fs. Chunks » pour stocker le
binaire des fichiers après l'avoir divisé en morceaux (255 Ko chacun).
- howler.js : c’est une bibliothèque audio JavaScript que nous avons utilisé
pour créer le lecteur audio.
- Video.js : c’est une bibliothèque vidéo JavaScript que nous avons utilisé
pour créer le lecteur vidéo.
- Editor.js : c’est un éditeur de style bloc pour les histoires riches en médias. Il
génère des données propres en JSON au lieu d'un lourd balisage HTML.
- Les navigateurs internet : c’est un logiciel conçu pour consulter et afficher
le World Wide Web. Techniquement, c'est au minimum un client HTTP.
Au cours de notre développement, nous avons effectué les tests par les
navigateurs suivants : Google Chrome et Mozilla Firefox. Mozilla Firefox Google Chrome

V.3 Le déploiement de la solution

Après la conception de notre plateforme web, une dernière étape reste à accomplir, c’est
l’hébergement de l’application afin qu’elle devienne accessible et manipulable par tous les
utilisateurs.
Notre application web est tout simplement un outil en ligne créé sur-mesure pour répondre
aux besoins des entreprises dans le domaine de management des équipes de travail. Elle est
hébergée dans un serveur applicatif, accessible de l’internet via les navigateurs, elle peut être aussi
accessible des postes de travail de l’entreprise si elle est intégrée au réseau intranet.

V.3.1 Architecture logicielle

Dans notre application nous utiliserons une architecture 3-Tiers, basée sur
l'environnement client–serveur, cette architecture est un cas particulier du modèle n-tiers. Les trois
couches logicielles de notre application sont :
1. La couche présentation : elle correspond à la partie visible et interactive de notre application
pour les utilisateurs, elle est représentée en pages HTML pour être exploitée par un navigateur web.
Cette couche s’occupe des requêtes de l'utilisateur à destination de Serveur http, et en retour elle
présente à l’utilisateur les informations renvoyées par ce Serveur.
2. La couche de Traitement : elle correspond à la partie fonctionnelle de notre application, celle qui
décrit les opérations que l'application opère sur les données en fonction des requêtes des utilisateurs.
3. La couche accès aux données : elle s’agit de la couche d’accès aux données, sur cette couche, un
SGBD est installée, dans notre cas c’est le MongoDB. Le serveur de base de données est requêté
par le serveur applicatif afin d’utiliser un certain nombre de données.

26
 Chapitre V : Réalisation et tests

V.3.2 Architecture matérielle

Afin qu’elle soit accessible par tous les employés de l’entreprises, elle doit être installée dans un
serveur applicatif connecté en permanence à l’internet via un firewall et avec une connexion à très
haut débit. Ce serveur prend une position intermédiaire entre le navigateur internet et le serveur de
base de données pour former une architecture de 3 tiers. L’hébergement de notre application web
peut être effectué au niveau des entreprises qui ont leurs propres réseaux intranet et leurs propres
centres de données. Elle peut être utilisée seule ou intégrée à cet intranet et accessible via son
portail.

Figure 8 : Déploiement de la solution dans le réseau intranet d’une entreprise

V.3.3 Elaboration du diagramme de déploiement

En langage de modélisation unifié (UML), un diagramme de déploiement est une vue statique
qui sert à représenter l'utilisation de l'infrastructure physique par le système et la manière dont
les composants du système sont répartis ainsi que leurs relations entre eux [9]

27
 Chapitre V : Réalisation et tests

Figure 9 : Diagramme de déploiement de l’application

- The Client Device : c'est l'équipement utilisé par l’employé, qu'il s'agisse d'un pc, d'une tablette ou
d'un Smartphone.
- The web browser : c’est le navigateur web qui affiche les résultats envoyés par le serveur http,
reçoit les manipulations de l'utilisateur et les transmet au même serveur. Notre solution prend en
charge toutes les versions stables des navigateurs majeurs.
- The Dynamic web server : c'est un ordinateur puissant qui héberge le logiciel « serveur http » ainsi
qu’un logiciel supplémentaire appelé « express application server », il stocke également les
fichiers de composants de l’application web (modèles HTML, fichiers ccs, fichiers JavaScript,
images. etc.).
- The http server : c'est le serveur http de node.js.
- The Express application : c’est un logiciel spécial qui traite les requetés. Nous avons créé ce
logiciel à l'aide de diverses bibliothèques côté serveur telles qu’Express.js, Mongoose, socket.io ...
etc.
- Files : ce sont les fichiers de composants de notre application tels que HTML templates, fichiers
CSS, fichiers JavaScript, images …etc. Ils sont stockés sur le disque dur du Dynamic web server.
- The Data base server : c'est un ordinateur puissant qui contient le système de gestion de base de
données MongoDB pour fournir des services de base de données au logiciel Express application.
- The Disk Array : c’est un équipement composé d'un ensemble de disques regroupé destinés pour
stocker les données de l’application.

28
 Chapitre V : Réalisation et tests

V.3.4 Le fonctionnement de la solution

Les étapes d’exécution d’une Requête/Réponse :
1. Les pages web de notre application contiennent divers widgets avec lesquels un utilisateur peut
interagir. Le widgets est un élément de base de l’interface graphique, il représente les boutons
poussoir des icônes de notification et des zones de texte ...etc., permettant la manipulation de
l'application via les navigateurs web. Chaque action sur un widget provoque immédiatement l'envoi
d'une requête.
2. Lorsque le https server reçoit une demande https s’agissant d'une requête dynamique de la part
du navigateur web, il va la transmettre à un logiciel spécial appelé « Express application » chargé de
traiter cette requête. Ce dernier lit les informations contenues dans la requête « request data », avant
tout traitement. Après le traitement de la requête, le logiciel « Express application » renvoie au
navigateur web une réponse via le serveur https.
3. Le navigateur web envoi une requête http à l’équipement « http server ».
4. Le logiciel serveur http intercepte la requête et la transmet à un logiciel spécial appelé « express
application » après avoir détecté qu'il s'agit d'une demande dynamique.
5. Le logiciel « express application » traite la requête et accède à la base de données. La
bibliothèque Mongoose utilisée dans notre solution va mettre l'interaction avec la base de données
plus sécurisé, elle s'appuie sur « MongoDB Node.js native driver » pour communiquer avec la base
de données à travers un Socket TCP/IP ordinaire.
6. Si la réponse du logiciel « express application » doit contenir du HTML, ce logiciel va extraire la
Template HTML adéquate à partir du système de fichiers « files » et il va créer ensuite une nouvelle
page web en plaçant les données dans leurs espaces réservés dans la Template.
7. Le logiciel « express application » envoie à travers le « http server » une réponse http au
navigateur web, cette réponse peut contenir du HTML ou d'autres types de données. Le navigateur
web reçoit le statut 200 ("ok") si n’a pas une erreur durant le traitement de la requête, sinon le
navigateur web reçoit un message d’erreur. Quand le navigateur web reçoit une réponse http, il va
mettre à jour la page web. Si la réponse http contient une nouvelle page html, dans ce cas-là le
navigateur va lire le contenu de la page html et envoi des requêtes distinctes pour obtenir des
fichiers statiques tels que les feuilles de style en cascade CSS pour la mise en page, et
de JavaScript pour la programmation informatique des fonctionnalités plus avancées. …etc. Le
serveur http à son tour va intercepter ces requêtes et il charge directement les fichiers nécessaires à
partir du système de fichiers et envoie les réponses au navigateur. Ce dernier va terminer la page
web pour qu’elle soit exploitable par l’utilisateur.

Remarque : Le serveur peut envoyer au client des données à afficher sans avoir reçu une requête de
la part du client, grâce aux techniques de communication en temps réel utilisées par la bibliothèque
Socket.IO cités précédemment.

V.4 Tests d'intégration

Les Tests d'intégration est une phase qui est précédée par les tests unitaires et qui est
généralement suivie par les tests de validation qui testent l’ensemble avec des données réelles.
Dans les tests unitaires on vérifie le bon fonctionnement de chaque portion ou module de
logiciel. Par contre, dans les tests d’intégration, les différents modules qui ont été testés séparément
vont être progressivement assemblés pour construire un programme exécutable qui va être lui aussi
testé. Ce test d’intégration a pour cible de détecter les erreurs non détectables par les tests unitaires.
Ces tests permettent surtout de vérifier la bonne utilisation des interfaces entre modules. Ils
permettent également de vérifier que l’application, dans son ensemble, réalise bien les
fonctionnalités spécifiées.
Afin de réaliser les tests d’intégration, nous avons choisis les tests suivants :

29
 Chapitre V : Réalisation et tests

V.4.1 Test de l’Authentification

Après l'accès à notre solution, la première page qu’on va rencontrer est la page
d'Authentification, on doit d’abord insérer correctement un nom d'utilisateur et son mot de passe
associé afin de réussir notre connexion, sinon, un message d'erreur apparaîtra.

Après une connexion réussie, on va être redirigé vers l’Espace utilisateur.

V.4.2 Test de l’organigramme de l’entreprise

Cet organigramme est accessible à partir de l’Espace utilisateur en cliquant sur le bouton
Organigram situé dans la barre latérale principale.

30
 Chapitre V : Réalisation et tests

Ce faisant, la page de l’organigramme des unités organisationnelles apparaît.

A chaque fois qu’on clique sur l'une de ces unités, un autre organigramme apparaîtra, qui va
nous présenter tous les employés de cette unité.

Afin de consulter le profil utilisateur d'un employé, on doit cliquer sur son nœud présenté dans
l'organigramme.

V.4.3 Test gestion de contacts

La liste des contacts est accessible en cliquant sur le bouton Contacts situé dans la barre latérale
principale de l’Espace utilisateur.

31
 Chapitre V : Réalisation et tests

Ce faisant, la page de la liste des contacts apparaîtra.

A côté de chaque contact il y’a des icônes (raccourcis) qui ramènent vers d'autres fonctionnalités
et qui nous permettent d’envoyer à ce contact des mails, d’entamer une conversation textuelle (chat)
ou de visiter son profil utilisateur.

V.4.4 Test de la Messagerie textuelle instantanée (chat)

Cette fonctionnalité est accessible à partir de la page liste des contacts.
En cliquant sur l’icône chat situé à côté d’un contact choisi, la page de Messagerie textuelle
instantanée apparaîtra.

Cette page affichera les messages textuels envoyés et recus dans le cadre d’une conversation.
32
 Chapitre V : Réalisation et tests

V.4.5 Test de planification d’un évènement

La planification d’un évènement est accessible en cliquant sur le bouton Plan new event situé
dans la barre latérale principale.

Ce faisant, la page de planification d'un nouvel événement apparaîtra.

Avant de planifier un évènement on doit saisir d’abord les informations relatives à cet
évènement, en suite on va choisir les employés concernés et à la fin on clique sur le bouton Plan.
L’événement crée va être placé dans les calendriers des évènements des employés concernés afin
qu’ils soient consultables par tous les utilisateurs.

33
 Chapitre V : Réalisation et tests

La page suivante présente un calendrier des évènements d’un employé.

V.4.6 Envoyer ou Assigner une tâche

Cette fonction est accessible en cliquant sur le bouton New Task situé dans la barre latérale
principale de l’Espace utilisateur.

34
 Chapitre V : Réalisation et tests

Ce faisant, La page de création d'une nouvelle tâche apparaîtra.

En remplissant les informations relatives à cette tâche. Le Manager va choisir ensuite les
employés désignés pour cette tâche, en sélectionnant ceux qui sont chargés de l’exécution « Assign
To » et ceux qui sont destinataires de cette tâche « Send To », ensuite en cliquant sur le bouton
Send, la tâche va être envoyée aux employés sélectionnés.

Ensuite, la page suivante se présente au Manager, elle contient une liste des taches envoyées.

35
 Chapitre V : Réalisation et tests

Les employés concernés de cette tâche peuvent suivre l'avancement de son exécution à travers
une barre de progression. Ils peuvent aussi accéder à tout le détail de cette tâche ainsi que sa
traçabilité. En plus, un forum de discussion est offert au groupe concerné par cette tâche.

La page suivante présente le détail de la tâche ainsi que l’avancement de son exécution.

36
 Chapitre V : Réalisation et tests

La page suivante présente le forum de discussion entre les concernés.

La page suivante présente la traçabilité de la tâche.

37
 Chapitre V : Réalisation et tests

V.4.7 Test de la Messagerie

1- Test de l’envoi d’un Message :
Cette fonction est accessible en cliquant sur le bouton New Mail situé dans la barre latérale
principale de l’Espace utilisateur.

Une page de la création d’un nouveau message apparaîtra.

Avant d’envoyer ce message, on va saisir d’abord les informations nécessaires et ensuite on va

choisir les employés concernés par ce message « Send to » ainsi que d’autres contacts qui seront
des destinataires seulement qu’à titre d’information « CCs », à la fin on doit cliquer sur le bouton
Send pour envoyer le message aux contacts sélectionnés.

38
 Chapitre V : Réalisation et tests

Ensuite, la page de une liste des messages envoyés s’affiche.

Cette page nous présente les messages envoyés, classés par ordre chronologique, en indiquant
l’objet de message, la liste des destinataires ainsi que la date et l’heure exacte de l’envoi.

L’espace consommé de la mémoire de stockage par les messages envoyés est représentée par
une barre de progression qui est affichée en haut de la page.

2- Test de la réception d’un Message :

Afin d’accéder à la liste des messages reçus à partir l’espace utilisateur, on doit cliquer sur le
bouton Received Mails situé dans la barre latérale principale de l’Espace utilisateur.

39
 Chapitre V : Réalisation et tests

Ce faisant, la page des messages reçus apparaîtra.

Cette page présente les messages reçus, classés par ordre chronologique de réception, en
indiquant l’objet de message, le nom de l’émetteur ainsi que la date et l’heure exacte de la
réception.

L’espace consommé de la mémoire de stockage par les messages reçus est représentée par une
barre de progression qui est affichée en haut de la page.

V.4.8 Test des notifications

Les notifications s’affichent instantanément pour nous informer sur un changement d’un état lié
aux fonctionnalités suivantes :
 Gestion des événements :
o La réception d’un évènement dans le calendrier des évènements.
o La modification ou l’annulation d’un évènement par le responsable.
 Gestion des taches :
o La réception d’une tache.
o La modification ou l’annulation d’une tache par le responsable.
o L’annulation d’une tache par le concerné, dans ce cas-là le responsable est informé par une
notification.
o La réception d’un nouveau message textuel dans un forum de discussion, organisé autour d’une
tâche.
 Messagerie :
o L’émetteur de message :
- À l’arrivée de 90% de la capacité de stockage de la boite d’envoi
- La boite d’envoi est plaine, le message ne peut pas être envoyé.
- La boite de réception de destinataire est plaine, le message ne peut pas être envoyé.
o Le récepteur de message :
- À la réception d’un nouveau message
- À l’arrivée de 90% de la capacité de stockage de la boite de réception
- La boite de réception est plaine, le message ne peut pas être reçu.

40
 Chapitre V : Réalisation et tests

 Messagerie textuelle instantanée (chat):

o La réception d’un message textuel

Ces notifications sont représentées par des icônes situés dans la barre de navigation qui est
affichée en haut de toutes les pages de notre application web,

Ces notifications ont été toutes testées lors de ce test d’intégration, voici quelques-unes des
résultats que nous avons obtenus :

41
 Conclusion

Conclusion
Suite aux compétences acquises durant notre formation de Licence ISIL à l’université USTHB,
qui nous a permis d’analyser les systèmes d’information des entreprises afin de dégager les
déficiences et proposer des suggestions en vue de leur amélioration. Dans notre projet on a proposé
une plateforme web permettant d’améliorer le management des équipes de travail et de renforcer le
rapprochement entre les employés d’une entreprise surtout pour le personnel travaillant à distance.
Notre solution va instaurer un nouveau statut au sein de l’entreprise, c’et le statut d’une
entreprise moderne qui privilégie la collaboration et qui converti le salarié en collaborateur « c’est
de travailler avec l’entreprise plutôt que pour l’entreprise », ce qui va donc améliorer
considérablement le dynamisme du travail et va créer un espace d’interaction entre les employés
d’une entreprise afin de garantir une meilleure productivité et clarté du travail.
La réalisation d’un tel projet, nous a permis d’apprendre et de toucher du doigt une partie des divers
aspects du métier de développeur et de celui du concepteur. C’est une expérience très enrichissante
durant laquelle nous avons appris à nous organiser afin de construire un plan de travail. Cette
expérience nous a aussi permis de nous familiariser avec les différents outils logiciels ainsi qu’avec
différents technologies web telles que : HTML5, CSS, Bootstrap, Semantic UI, Java Script,
JQuery, Node.js, Express.js, MongoDB, Passport.js, Socket.IO …etc.

Notre application peut être étendue par l’ajout de nouvelles fonctionnalités telles que : la gestion
documentaire, la gestion de personnel, la gestion de pointage, la vidéo conférence…etc.
Elle se trouve sur le lien [10]

Enfin nous espérons que notre projet de fin d’études puisse satisfaire nos enseignants de
l’USTHB qui n’ont ménagé aucun effort à nous instruire et nous espérons aussi qu’il sera une aide
pour les autres promotions que nous leur souhaitons beaucoup de succès dans leurs études.

Bibliographie
[1] https://glip.com
[2] https://www.azendoo.com
[3] https://basecamp.com
[4] https://www.flock.co
[5] https://openclassrooms.com/fr/courses
[6] https://developer.mozilla.org/fr/docs/Web/JavaScript.
[7] https://en.wikipedia.org/wiki/Socket.IO
[8] https://www.npmjs.com/package/multer
[9] https://fr.wikipedia.org/wiki/Diagramme_de_d%C3%A9ploiement
[10] https://github.com/sicoire/pfe2

42