Rapport Du Projet de Fin Detudes en Vue

Département : Mathématiques, Physique et Informatique
Filière : Sciences Mathématiques et Informatiques
Rapport du projet de Fin d’études
En vue de l'obtention du diplôme de Licence en Génie

Informatique
Thème
Développement d’une Plateforme web pour la filière

Sciences Mathématiques et Informatique de la
Faculté Polydisciplinaire de Taza
Réalisé par : Sous l’encadrement de :
Lamgarraj Mohamed Pr.Ismail Akharraz
Soutenu le : 23/07/2020
ANNÉE UNIVERSITAIRE : 2019 - 2020

FPT TAZA Plateforme GIFPT 2019/2020
Remerciements
C'est avec un immense plaisir que je réserve ces quelques

lignes en signe de gratitude et de reconnaissance à tous ceux
qui ont contribué de près ou de loin à l'élaboration de ce
travail.
Je souhaite adresser, en premier lieu, mes remerciements

les plus sincères à mon encadrant Pr.Ismail akharraz pour son
disponibilité, sa patience et son précieux suivi tout au long de
la réalisation de ce travail.
Je tiens également à remercier les membres du jury d'avoir

consacré une partie de leur temps à la lecture de ce mémoire
et pour l'intérêt qu'ils ont porté à ce travail.
Mes remerciements s'étendent à tous les enseignants du

département d'Informatique dans la faculté polydisciplinaire
de Taza d’avoir enrichi mes connaissances et de m’avoir guidé
durant ces années d’étude.
Je remercie enfin toutes les personnes qui ont contribué

de près ou de loin à l'accomplissement de ce travail.
LAMGARRAJ MOHAMED 1
Liste des abréviations
Abréviation Désignation
CRUD Create, Read, Update, Delete
MVC Model, View, Controller
WebRTC Web Real Time Comunication
Json RPC json remote procedure call
IOC Inversion of control
SOC Separation of concerns
DI Dependency injection
WAR Web Application Archive
JEE Java Entreprise Edition

DAO Data access object
DTO Data transfer object
JSON JavaScript Object Notation
POJO Plain old Java object
Ajax Asynchronous JavaScript and XML
API Application Programming Interface
JPA Java Persistence API
REST representational state transfer
ORM Object-relational mapping
SQL Structured Query Language

SGBD Système de gestion de base de
données
HTTP HyperText Transfer Protocol
XML Extensible Markup Language
DOM Document Object Model

CSS Cascading Style Sheet
UML unified modeling language
LAMGARRAJ MOHAMED 2
Liste des figures
Figure 1 : Plan d’architecture logicielle

Figure 2 : Le modèle MVC
Figure 3 : communication WebRTC
Figure 4 : logo de plateforme JEE
Figure 5 : logo de Spring
Figure 6 : logo de Spring boot
Figure 7 : logo de Spring Security
Figure 8 : logo de Hibernate
Figure 9 : logo d’Ajax
Figure 10 : logo de jQuery
Figure 11 : logo d’AngularJS
Figure 12 : logo de Bootstrap
Figure 13 : logo d’UML
Figure 14 : Intellij IDEA Ultimate 2019.2
Figure 15 : WebStorm 2020.1
Figure 16 : Tomcat
Figure 17 : logo de kurento MS
Figure 18 : connexion via kurento MS
Figure 19 : WampServer
Figure 20 : logo de Maven
Figure 21 : logo de Postman
Figure 22 : logo de Microsoft Visio
Figure 23 : Diagramme de cas d’utilisations
Figure 24 : Diagramme de séquence pour le scénario « authentification »
Figure 25 : diagramme de séquence d’exploitation de la bibliothèque
LAMGARRAJ MOHAMED 3
Figure 26 : diagramme de séquence des scénarios lié à la visioconférence

Figure 27 : Diagramme de classes
Figure 28 : Diagramme de déploiement
Figure 29 : Architecture logicielle de partie CRUD de GIFPT
Figure 30 : Architecture logicielle de partie RTC de GIFPT
Figure 31 : page de login
Figure 32 : page accueille de la bibliothèque
Figure 33 : page des cours
Figure 34 : Page des TDs
Figure 36 : Page de création de la visioconférence
Figure 37 : Page de configuration de la visioconférence
Figure 38 : visioconférence
Figure 39 : partage de l’écran pendant la visioconférence
LAMGARRAJ MOHAMED 4
Table des matières

Remerciements .................................................................................................................................1
Liste des abréviations .......................................................................................................................2
Liste des figures ................................................................................................................................3
Table des matières ............................................................................................................................5
Introduction ......................................................................................................................................7
Chapitre 1 : Contexte et étude fonctionnelle de projet. ....................................................................9
1.1 Introduction ........................................................................................................................ 10
1.2 Problématique..................................................................................................................... 10
1.3 Solution ................................................................................................................................ 10
1.4 Objectifs du projet .............................................................................................................. 10
1.5 Conclusion............................................................................................................................ 11
Chapitre 2 : Etude technique du projet .......................................................................................... 12
2.1 Introduction ........................................................................................................................ 13
2.2 Architecture en couches..................................................................................................... 13
2.3 Modèle MVC ......................................................................................................................... 15
2.4 WebRTC ................................................................................................................................ 16
2.5 Java EE .................................................................................................................................. 17
2.6 Spring ................................................................................................................................... 18
2.7 Spring Boot .......................................................................................................................... 18
2.8 Spring Security .................................................................................................................... 19
2.9 Hibernate ............................................................................................................................. 20
2.10 AJAX .................................................................................................................................... 21
2.11 jQuery ................................................................................................................................. 21
2.12 AngularJS ........................................................................................................................... 21
2.13 Bootstrap ........................................................................................................................... 22
2.14 UML ..................................................................................................................................... 23
2.15 Environnement logicielle de développement ............................................................... 23
2.15.1 IntelliJ IDEA ................................................................................................................ 23
2.15.2 WebStorm ................................................................................................................... 24
2.15.3 Apache Tomcat........................................................................................................... 24
LAMGARRAJ MOHAMED 5
2.15.4 Kurento Media Server (KMS) ................................................................................... 25

2.15.4 WampServer ............................................................................................................... 26
2.15.5 Apache Maven ............................................................................................................ 26
2.15.6 Postman ...................................................................................................................... 27
2.15.7 MS.Visio ....................................................................................................................... 27
2.16 Conclusion ......................................................................................................................... 27
Chapitre 3 Analyse et conception .................................................................................................. 28
3.1 Introduction :....................................................................................................................... 29
3.2 Spécifications des besoins ................................................................................................. 29
3.2.1 Besoins fonctionnels.................................................................................................... 29
3.2.2 Besoins non fonctionnels ............................................................................................ 30
3.3 Diagramme de cas d’utilisation ......................................................................................... 30
3.4 Diagramme de séquence .................................................................................................... 31
3.4.1 Diagramme de séquence du scénario « Authentification ». ................................... 32
3.4.2 Diagramme de séquence des scénarios liés à la
bibliothèque. .......................................................................................................................... 32
3.4.3 Diagramme de séquence des scénarios lié à la
visioconférence. ..................................................................................................................... 34
3.5 Diagramme de classes ........................................................................................................ 35
3.6 Diagramme de déploiement .............................................................................................. 36
3.7 Conclusion :.......................................................................................................................... 36
Chapitre 4 : Réalisation ................................................................................................................... 37
4.1 Introduction ........................................................................................................................ 38
4.2 Architecture logicielle ........................................................................................................ 38
4.3 Description de l’architecture ............................................................................................ 40
4.3.1 La partie CRUD ............................................................................................................. 40
4.3.2 La partie visioconférence............................................................................................ 42
4.4 Interfaces de l’application ................................................................................................. 43
4.5 Conclusion............................................................................................................................ 47
Conclusion générale......................................................................................................................... 48
Webographie ................................................................................................................................... 49
LAMGARRAJ MOHAMED 6
Introduction
De nos jours, il est très important d'avoir des outils numériques pour l’enseignement
et l’information des étudiants à distance.
En janvier 2020, et à cause de la crise provoquée par le nouveau corona virus, et pour
arrêter la propagation de l’épidémie, la plupart des pays touchés par ce virus ont déclaré
l’état d’urgence sanitaire et un confinement de 60 à 100 jours, ce qui imposé aux
ministères de l’éducation dans la plupart des pays d’arrêter l’année scolaire et
universitaire avant sa fin.
Au Maroc, depuis le 16 mars, les cours présentiels ont été suspendus dans l’ensemble
des établissements d’enseignement, de formation professionnelle et des universités,
privés et publics. Cette situation a mis le ministère de l’éducation face à un défi de sauver
l'année universitaire et scolaire, ce qui demande des moyens techniques et numériques à
mettre à la disposition des étudiants pour leurs permettre de continuer leurs formations
à distance.
Face à cette situation j’ai remarqué que les universités marocaines manquent de
moyens numériques d’enseignement. Et dans ce cadre je me suis engagé dans mon projet
de fin d’étude à la réalisation d’une plateforme qui contribuera à la formation en ligne des
étudiants de la filière SMI de la FPT, cette plateforme constituer aussi d’une espace
d’information des étudiants et d’échange d’informations entre les étudiants, les lauréats
et les professeurs.
Cette plateforme qui porte le nom GIFPT a été déjà initialisée par des lauréats de notre
filière de la faculté polydisciplinaire de Taza, j’ai pris la mission d’ajouter des
fonctionnalités qui permet suivre les études à distance à partir de cette plateforme, et j’ai
ajouté la couche sécurité pour offrir à l’utilisateur une meilleure expérience d’utilisateur.
Le travail présenté dans ce mémoire s’inscrit dans ce contexte. Mon projet est
composé de trois parties principales qui sont :
Création d’une bibliothèque : permet aux étudiant de trouver des cours, des TDs, des
tps, et des examens en format numérique.
Webconférence : cette partie représente un salon de formation qui permet aux
professeurs de faire des séances de cour en ligne.
La couche sécurité de l’application : assurer l’authentification et les autorisations.
Le projet est une application WEB développée en utilisant des technologies modernes
et très tendantes de nos jours, qui sont capables de répondre aux besoins de l’utilisateur,
qui est dans notre cas l’étudiant de la FPT, plus précisément, les étudiants de la filière
sciences mathématiques informatique.
LAMGARRAJ MOHAMED 7
Ce rapport est subdivisé en quatre chapitres : Le premier chapitre consiste à définir le

contexte et présenter une étude fonctionnelle de projet. Le deuxième chapitre concerne
l’étude technique du projet, puis, le troisième chapitre contient une conception détaillée
du projet, et je décrirai dans le dernier chapitre la partie de réalisation mettant l'accent
sur l’architecture globale de l’application. Enfin, je terminerai avec les conclusions de ce
travail.
LAMGARRAJ MOHAMED 8
Chapitre 1 : Contexte et étude fonctionnelle de

projet.
Dans ce chapitre, je présenterai le contexte général du projet. Je vais poser la

problématique que mon projet va essayer de résoudre, ensuit présenter la solution
proposée, puis une définition des objectifs et services attendu de ce projet.
LAMGARRAJ MOHAMED 9
1.1 Introduction
Dans ce chapitre, je vais présenter la problématique qui m’a poussé à réserver mon projet
de fin d’études pour la résoudre, puis je vais présenter la solution que je vais implémenter
dans ce projet, et les objectifs à atteindre dans ce projet.
1.2 Problématique
Malgré les efforts fournis par les universités marocaines en but de numérisation de leurs
services et leurs formations, les évènements récents (confinement provoqué par le virus
corona depuis le 16 mars de cette année) ont prouvé un manque dans les ressources et les
moyennes numériques d’enseignement et d’information des étudiants à distance. La même
situation c’est qui est connu dans notre filière SMI dans la faculté polydisciplinaire de Taza,
puisque les étudiants trouvent encore des difficultés à accéder aux informations
universitaires, sans oublier un manque d’espace de communication avec leurs professeurs ou
d’enseignement à distance, et un manque d’une bibliothèque numérique pour les supports
des cours, TDs et des examens en format numérique.
1.3 Solution
La solution proposée est une plateforme numérique pour les étudiants du filière SMI dans
la faculté polydisciplinaire de Taza. C’est une plateforme qui porte le nom GIFPT et qui a été
déjà initialisée par des lauréats de notre filière de la faculté polydisciplinaire de Taza. Il va
contenir des fonctionnalités offrant à l’étudiant un environnement lui permettant de suivre
toutes les nouveautés, les annonces, son état pédagogique, les cours, et de profiter de contact
continue avec leurs professeurs et mêmes avec des lauréats de cette filière.
Il va aussi aider les étudiants à suivre leurs études à distance au cas exceptionnelles comme
le confinement provoqué par la crise de covid-19, ou suivre des formations et des séances de
cours parallèles au cours présentiels dans les cas normales.
1.4 Objectifs du projet
L’objectif de ce projet est la création et la mise en place d’une solution pour aider les
étudiants à suivre leurs études et de profiter des services des professeurs et de scolarité à
distance.
La solution doit assurer en premier lieu l’ensemble des fonctionnalités suivantes :
 Un accès aux informations et état de l’étudiant facile et dématérialisé.
 Une bibliothèque des Cours des TDs et des Examens.
 Une espace de visioconférence pour l’enseignement à distance.
 Un accès facilité aux informations des professeurs (mail, site web…)
 Une information des étudiants sur les enseignements et les examens (emploi du
temps, horaires d’examens, résultats…)
 Un espace d’annonces.
 Des services sociaux plus accessibles.
 Des informations sur les offres d’emplois, les stages et les concours.
LAMGARRAJ MOHAMED 10
Parmi ces fonctionnalités, il y a ceux qui ont déjà été réalisées ou initialisées par les lauréats
d’anciennes promotions, mon travail consiste à ajouter d’autres services et compléter
d’autres, comme il est expliqué dans la phase de conception.
1.5 Conclusion
Dans ce chapitre j’ai posé la problématique que mon projet va essayer de
résoudre, comme j’ai présenté la solution proposée, puis une définition des objectifs et
services attendu de ce projet.
Chapitre 2 : Etude technique du projet
Dans ce chapitre, je présenterai l’étude technique détaillée du projet. Je vais parler

de l’architecture logicielle de notre projet ainsi que la plateforme utilisée pour le
développement (JAVA EE), et les autres outils et techniques et logiciels utilisés.
2.1 Introduction
Le projet consiste à développer une application web constituée d’un côté serveur ou
couche Back-end et d’un côté client ou couche Front-end. Ce concept s’appelle le
développement Full-Stack.
Pour avoir un projet bien écrit au niveau du code, et bien structuré au niveau d’architecture
logicielle, et capable de répondre à tous les besoins fonctionnelles et non fonctionnelles
attendu, j’ai choisi des Framework et des technologies qui sont compétentes et populaires
dans le marché de développement informatiques de nos jours.
Dans ce chapitre je vais citer et définir le maximum possible des outils et techniques utilisée
dans la réalisation.
2.2 Architecture en couches

Parmi les différentes façons de structurer une architecture, la mieux adaptée et maitrisée
en informatique est l’approche par couches. Une couche (Layer) est une division logique et
horizontale d’un système qui fournit une abstraction particulière du système à couches
supérieures. Chaque couche possède des responsabilités spécifiques.
Dans une structuration par couches, les couches inférieures prennent en charges des
responsabilités qui offrent un socle de base pour les couches supérieures, permettant
d’abstraire celles-ci de problématiques qui ne les concernent pas.
La plateforme JEE utilisant le Framework Spring pour le back-end, et le Framework

Angular.js pour le front-end, permettant de réaliser une application bien structurée en
couches séparément codés, assurent la notion de séparation des concepts (separation of
concerns). Ces couches collaborent entre eux du navigateur jusqu’à la base de données pour
assurer un meilleur profit des fonctionnalités de la plateforme.
Les couches constituant l’architecture logicielle de notre application sont :

 Couche Présentation
Cette couche correspond à la partie visible de l’application et interactive avec les
utilisateurs. On parle d’Interface Homme-Machine. Dans la plupart des cas, il s’agit d’une
interface client riche ou d’une interface web. Elle intercepte les événements et fait appel aux
services de la couche Vie Model.
 Couche Contrôleur
Cette couche regroupe les classes java nécessaires au logique métier. Elle comporte donc
les services offerts par le système à l’utilisateur. Ces services ne sont autres que
l’implémentation des scenarios identifiés lors de la phase de conception.
Lors de l’appel d’un service, ce dernier fait appel aux objets métier nécessaires pour
répondre à la requête de l’utilisateur.
 Couche Service
C’est une couche intermédiaire entre les couches contrôleur et la couche DAO (Data
Access Object), son rôle est de gérer les transactions qui seront ouverts à chaque appel de la
base de données.
Elle permet aussi de répartir les ressources entre les différents utilisateurs de l’application
afin de garantir une meilleure performance du serveur (utilisation des ressources seulement
à la demande).
 Couche d’accès aux données
C’est la couche qui regroupe les classes Java capables de fournir les données nécessaires
à la couche service, et par la suite aux services demandés par l’utilisateur. Cette couche est
modélisée dans notre système par des composants DAO.
Un DAO est un design pattern (patron de conception) utilisé dans les architectures logicielles
objet visant à isoler la logique de persistance dans des classes d’accès aux données.
 Couche stockage
Cette couche est responsable du stockage des données dans une base de données
relationnelles dont le modèle physique est déduit à partir du diagramme de classes du
système. Elle est gérée dans notre cas par le SGBD MySQL.
 Couche sécurité
Il s’agit d’une couche dédiée à la sécurité, chargée de vérifier l’authentification et les
autorisations d’accès aux pages et aussi le hachage des mots de passes des utilisateurs. Elle
agit dans deux cas sous forme de :
Security Interceptors : Il s'agit d'une couche dédiée à la sécurité composée de classes

Java chargées de vérifier l'authentification et les autorisations d'accès aux méthodes. Ces
classes seront automatiquement sollicitées lors de l'appel à une méthode protégée et
décideront de laisser passer la requête ou non en fonction des informations de sécurité qui
leur sont fournies et de celles dont elles ont besoin.
Security Filters : Il s'agit d'une simple configuration permettant d'autoriser ou non

l'accès à certaines pages en fonction de l'identité du demandeur et de ses éventuelles
autorisations.
Utilisateur
Figure 1 : Plan d’architecture logicielle
2.3 Modèle MVC

MVC littéralement Modèle Vue Contrôleur est un modèle d’architecture qui organise
l’application d'une manière à ce que le développement puisse se faire en couches
indépendantes, ce qui garantir une application maintenable. Il impose la séparation entre les
données, la présentation et les traitements, ce qui donne trois parties fondamentales dans
l'application finale comme suit :
 Couche Modèle
Permet d'enregistrer les données, de les récupérer, de les lister, de les supprimer, et de
les mettre à jour.
 Couche Vue
La vue correspond à l'interface avec laquelle l'utilisateur interagit.
Sa première tâche est de présenter les résultats renvoyés par le modèle.
Sa seconde tâche est de recevoir toutes les actions de l'utilisateur (clic de souris, sélection
d'une entrée, boutons, etc). Ces différents événements sont envoyés au contrôleur.
 Couche Contrôleur
Le contrôleur prend en charge la gestion des événements de synchronisation pour mettre
à jour la vue ou le modèle et les synchroniser. Il reçoit tous les événements de l'utilisateur et
enclenche les actions à effectuer. Si une action nécessite un changement des données, le
contrôleur demande la modification des données au modèle, et ce dernier notifie la vue que
les données ont changée pour qu'elle se mette à jour.
1 Requête http Contrôleur
3 2 demandes
4 des données
Renvois des
Présentation données
Réponse html 5
Vue Model
Figure 2 : Le modèle MVC
2.4 WebRTC
WebRTC web real time communications (communications web en temps réel), est un ensemble
de protocoles, de mécanismes et d'API qui fournissent aux navigateurs et aux applications mobiles
des possibilités de communication en temps réel (RTC) via des connexions Peer to Peer. Il a été conçu
comme une technologie qui permet aux navigateurs de communiquer directement sans la médiation
d'aucune sorte d'infrastructure. Cependant, ce modèle ne suffit que pour créer des applications Web
de base, des fonctionnalités telles que les communications de groupe, l'enregistrement de flux
multimédia, la diffusion multimédia ou le transcodage multimédia sont difficiles à mettre en
œuvre. Pour cette raison, de nombreuses applications nécessitent un serveur multimédia
intermédiaire comme kurento, red5, jitsi, Ant server et d’autres.
Communication sans webrtc :
Serveur
Serveur
Message Message
Communication avec webrtc :
Web media Server
Figure 3 : communication WebRTC
2.4 La programmation orientée aspects AOP

AOP est la programmation orientée aspects. L'AOP propose une façon de mettre en
œuvre certaines fonctionnalités de façon élégante et pratique, comme la séparation des
préoccupations (Separation of concerns : SOC) qui a une très grande influence sur
l’achèvement des certaines besoins non fonctionnelles tels que la maintenabilité.
L'AOP est un type de programmation qui propose de séparer le code technique du code
métier d'une application pour des préoccupations transversales qu'elles soient techniques ou
architecturales. Mais il faut marquer que l’AOP enrichit un modèle de POO mais ne le remplace
pas, elle la complète en proposant des solutions mises en œuvre de façon élégante à certaines
de ses limitations ou fonctionnalités manquantes, et elle permet de facilement implémenter
des fonctionnalités transverses de façon modulaire. Il est important de comprendre ce
concept afin de pouvoir aller plus loin dans le développement des applications Spring.
2.5 Java EE
Figure 4 : logo de plateforme JEE
Java EE simplifie le développement des applications d'entreprise en les basant sur des
composants standardisés et modulaires, en fournissant un jeu complet de services à ces
composants et en prenant automatiquement en charge un grand nombre des détails du
comportement de l'application, déchargeant le développeur d'un travail complexe de
programmation. Sun et un groupe d'industriels leaders du marché, sous les auspices de la
communauté ouverte JCP, ont permis d'unifier la totalité des standards et des API dans le
cadre de la plate-forme Java EE.
2.6 Spring
Figure 5 : logo de Spring
Spring est un Framework libre pour construire et définir l’infrastructure d’une application
java, dont il facilite et accélérer le développement et les tests, ce Framework est modulaire
et cela lui confère une certaine facilité pour la conception et la réalisation d'applications JEE.
Il est effectivement un conteneur dit « léger », c'est-à-dire une infrastructure similaire à un
serveur d'application J2EE.
Il prend donc en charge la création d'objets et la mise en relation d'objets par
l'intermédiaire d'un fichier de configuration qui décrit les objets à fabriquer et les relations de
dépendances entre ces objets.
L'efficacité de Spring par rapport à d'autres Framework Java est due à la faite qu'il
se sert des Beans (des simples POJO), de fichiers de configuration (fichiers XML) et
d'annotations (à partir la version 2.0 les annotations Spring se sont renforcées depuis la
version 2.5).
Spring s’appuie principalement sur l’intégration de trois concepts fondamentaux :
 L’inversion de contrôle est assurée de deux façons différentes : la recherche de

dépendances et l’injection de dépendances.
 La programmation orientée aspect.
 La couche d’abstraction.
Spring propose aussi un ensemble très complet de modules additionnels qui ne cesse de
s'enrichir pour faciliter la mise en œuvre de certaines fonctionnalités dans les applications,
tels que : Spring Extensions, Spring Data, Spring Mobile, Spring Web Services, Spring Tool Suite
(Extension eclipse pour Spring).
2.7 Spring Boot
Figure 6 : logo de Spring boot
Spring Boot est un projet ou un micro Framework java open source développé par le
groupe Pivotal, utilisé pour créer un micro-service. Il a notamment pour but de créer des
applications Spring autonomes, et faciliter la configuration d’un projet Spring et de réduire le
temps alloué au démarrage d’un projet.
Pour arriver à remplir cet objectif, Spring Boot permet de faire :
 Une injection des dépendances Spring simplifiée

Le site web https://start.spring.io/ nous permet de générer rapidement la structure de notre
projet en y incluant toutes les dépendances Maven nécessaires à notre application. Comme
en peut utiliser les « Starters » pour gérer les dépendances. On trouve les dépendances Maven
de Spring regroupé dans des « méga dépendances » afin de faciliter la gestion de celles-ci. Par
exemple si vous voulez ajouter toutes les dépendances pour gérer la sécurité il suffit d’ajouter
le starter « spring-boot-starter-security ».
 Une configuration automatique

Spring Boot configure automatiquement notre application en fonction des dépendances
que nous avons ajoutées au projet à l'aide de l’annotation @EnableAutoConfiguration au
point d'entrée de l'application. Par exemple, notre base de données MySQL se trouve sur mon
chemin de classe, je ne suis pas besoin de configuré aucune connexion à la base de données,
Spring Boot configure automatiquement une base de données en mémoire.
Le point d'entrée de l'application Spring Boot est la classe contenant
l’annotation @SpringBootApplication et la méthode principale.
Spring Boot analyse automatiquement tous les composants inclus dans le projet à l'aide de
l’annotation @ComponentScan.
 Un serveur de déploiement intégré
Avec Spring Boot nous n’avons pas besoin d’un serveur d’application pour nos applications.
Spring Boot fournit des serveurs intégrés dit (Embedded server) comme APACHE Tomcat que
je vais utiliser, afin de développer et de tester des applications web à la manière la plus facile,
et qui assure un temp de repense minimum.
2.8 Spring Security
Figure 7 : logo de Spring Security
Spring Security est un Framework qui fournit diverses fonctionnalités de sécurité comme
l’authentification et l'autorisation pour créer des applications JEE sécurisées.
Il s'agit d'un sous-projet du Framework Spring lancé en 2003 par Ben Alex. Plus tard, en
2004, il a été publié sous la licence Apache sous le nom de Spring Security 2.0.0.
Ce cadre cible deux principaux domaines d’application : l'authentification et
l'autorisation. L'authentification est le processus de connaissance et d'identification de
l'utilisateur qui souhaite accéder. Et l'autorisation est le processus permettant à l'autorité
d'effectuer des actions dans l'application et autoriser la demande Web, les méthodes et
l'accès au domaine individuel.
Spring Security présente de nombreux avantages. Certains d'entre eux sont donnés ci-
dessous.
 Prise en charge complète de l'authentification et de l'autorisation.
 Protection contre les tâches courantes
 Intégration de l'API Restful
 Intégration avec Spring MVC
 Portabilité
 Prise en charge de la configuration Java
2.9 Hibernate
Figure 8 : logo de Hibernate
Nous allons, cependant, nous intéresser à la couche la plus basse de notre architecture
d’application, c’est la couche d’accès aux données. Celle-ci permet d’interfacer le code métier
avec une source des données. L’intérêt est de pouvoir changer de base de données en n’ayant
besoin de ne modifier que la couche d’accès.
Pour réaliser cette tâche, il existe plusieurs solutions fournies par JEE qui sont appelé Java
Persistance API. Ce mécanisme qui gère la correspondance entre des objets d’une application
et les tables de base des données se nomme ORM (Object-Relationnal Mapping).
Pour cela, j’ai pris la décision d’utiliser Hibernate comme un Framework ORM, car il :
 Génère le code SQL nécessaire, ce qui rend l’application plus portable.
 Assure la récupération des données d’une manière optimisée.
 Assurer la portabilité du code en cas de changement de la base des données.
 Permet au développeur de penser en termes d’objet et pas en termes de lignes de

tables.
2.10 AJAX
Figure 9 : logo d’Ajax
AJAX (Asynchronous Javascript And XML) est une méthode de développement web
basée sur l'utilisation d'un script Javascript pour effectuer des requêtes web à l'intérieur d'une
page web sans recharger la page. AJAX rend plus interactifs les applications web et offre une
meilleure ergonomie ainsi qu’une réactivité améliorée en permettant de modifier
interactivement une partie de l'interface web (client) seulement.
2.11 jQuery
Figure 10 : logo de jQuery
JQuery est un Framework développé en JavaScript qui permet notamment de manipuler

aisément la DOM, d'utiliser AJAX, de créer des animations..., La vocation première de ce
Framework est de gagner du temps dans le développement des applications : « write less, do
more ».
2.12 AngularJS
Figure 11 : logo d’AngularJS
AngularJS est un Framework de développement Web, open-source, développé et géré

par Google. Ce Framework a été mis en place pour répondre à la plupart des défis rencontrés
dans le développement des applications Web à une seule page (Single page application SPA).
Au temps que je cherche un Framework qui permet de nous donner une meilleure expérience
utilisateur (User experience), j’ai choisi AngularJS car :
 AngularJS est un cadre efficace qui peut créer des applications Internet riches (RIA).
 Il permet de créer des applications web de type SPA, une seule page qui s’affiche et
change juste les données à afficher, ce qui donne une vitesse de réponse très élevée.
 AngularJS offre aux développeurs une option pour écrire des applications côté client
à l'aide de JavaScript d'une manière propre à MVC (Model View Controller).
 Les applications écrites en AngularJS sont compatibles avec tous les

navigateurs. AngularJS gère automatiquement le code JavaScript adapté à chaque
navigateur.
 Assurer l’injection de dépendances, il dispose d'un sous-système intégré d'injection

de dépendances qui aide le développeur à créer, comprendre et tester facilement les
applications.
 Le data-binding s'agit d'un moyen de lier la partie vue(html) à la partie logique
(contrôleur JavaScript).
 AngularJS est livré avec plusieurs service permet de fournir un ensemble de tâches
nécessaires au fonctionnement de notre application.
2.13 Bootstrap
Figure 12 : logo de Framework Bootstrap.
Bootstrap est un Framework destiné aux applications web. Développé par Twitter, et
distribué sous licence Apache 2. C’est un outil à considérer lors du développement rapide
d’applications web. C’est une collection d'outils utile à la création du design (graphisme, et
interactions avec la page dans le navigateur …) des sites et d'applications web. Il fournit des
codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments
interactifs, ainsi que des extensions JavaScript en option.
2.14 UML
Figure 13 : logo d’UML
UML le langage de modélisation unifié (Unified Modeling Language), est un langage

d'analyse, de conception et de modélisation orienté objet. C’est une boite à outils qui permet
d’améliorer progressivement une méthode de travail, tout en préservant un mode de
fonctionnement.
2.15 Environnement logicielle de développement
Dans cette partie, je présenterai l’environnement de travail qui inclut les logiciels utilisés.
2.15.1 IntelliJ IDEA
Figure 14 : Intellij IDEA Ultimate 2019.2
IntelliJ IDEA est un IDE, autrement dit un ensemble d'outils destinés au développement
logiciel. Il est édité par la société commerciale JetBrains qui en assure le développement et le
support depuis janvier 2001.
IntelliJ IDEA est décliné en deux éditions :
Community : l'édition communautaire, open source, gratuite mais limitée, est le choix
idéal pour travailler sur des applications pures Java / Groovy ou des développements
Swing.
Ultimate : l'édition complète et payante permet entre autres le développement
d'applications Web JEE.
Dans ce projet, j’ai utilisé la version Ultimate puisque JetBrains permet à tous les étudiants
du monde de profiter de ce riche outil Gratuitement. Il suffit d'avoir une adresse mail
académique, et la Faculté Polydisciplinaire de Taza (FPT) fourni à ces étudiants une adresse
mail académique pour telles raisons.
2.15.2 WebStorm
Figure 15 : WebStorm 2020.1
WebStorm est un environnement de développement intégré (IDE) édité par la société

commerciale JetBrains, conçu spécifiquement pour les Framework de langage JavaScript
moderne, mais utilisable pour tous les langage frontend. La technologie est légère mais
complète car elle propose des solutions pour le développement côté client de très bonne
qualité.
2.15.3 Apache Tomcat
Figure 16 : Tomcat
Apache Tomcat est une implémentation open source d'un conteneur web qui permet
donc d'exécuter des applications web reposant sur les technologies servlets et JSP. Tomcat est
diffusé en open source sous une licence Apache. C'est aussi l'implémentation de référence des
spécifications servlets jusqu'à la version 2.4 et JSP jusqu'à la version 2.0 implémentée dans les
différentes versions de Tomcat.
En tant qu'implémentation de référence de plusieurs versions des spécifications

servlets/JSP, facile à mettre en œuvre et riche en fonctionnalités, Tomcat est quasi
incontournable dans les environnements de développements. Les qualités de ses dernières
versions lui permettent d'être fréquemment utilisé dans des environnements de production.
Depuis la version 4, Tomcat est composé de plusieurs éléments :
 Coyote : est le connecteur pour les protocoles de communications notamment HTTP,

AJP, ...
 Catalina : est le conteneur de servlets
 Jasper : est le moteur de JSP
2.15.4 Kurento Media Server (KMS)
Figure 17 : logo de kurento MS
Kurento est unserveur multimédia WebRTC et un ensemble d'API clientes open source,
publié sous les termes de la licence Apache version 2.0, qui simplifient le développement
d'applications vidéo avancées pour les plates-formes Web et smartphones. Ses
fonctionnalités incluent les communications de groupe, le transcodage, l'enregistrement, le
mixage, la diffusion et le routage des flux audiovisuels. Kurento propose un cadre multimédia
qui facilite la tâche de création d'applications multimédias avec les fonctionnalités suivantes :
Pipelines multimédias WebRTC dynamiques : Kurento autorise les pipelines
multimédias personnalisés connectés à des pairs WebRTC comme les navigateurs Web et les
applications mobiles.
Architecture client / serveur : les applications développées avec Kurento suivent une
architecture client / serveur. Il propose une interface WebSocket implémentant le protocole
Kurento, qui permet aux applications clientes de définir des topologies de pipeline.
Applications client Java et JavaScript : pour notre cas, l'utilisation typique d'un
déploiement KMS consiste en une architecture à trois couches, dans laquelle le navigateur de
l'utilisateur interagit avec le serveur KMS au moyen d'une application client intermédiaire
(GIFPT), suivant le protocole WebSocket. Il existe plusieurs bibliothèques clientes officielles
de Kurento, prenant en charge l'utilisation de Java et JavaScript pour les applications clientes.
Figure 18 : connexion via kurento MS
2.15.4 WampServer
Figure 19 : WampServer
Il fournit une distribution facile à installer. Ainsi, les développeurs peuvent se lancer
facilement dans le monde d'Apache. Pour le rendre encore plus pratique, WAMPSERVER est
livré avec toutes les fonctionnalités activées. Parmi ses fonctionnalités dont nous avons
besoin :
MySQL : il s'agit du Système de Gestion de Bases de Données (le SGBD), il va permettre
de sauvegarder les données.
PhpMyAdmin : phpMyAdmin est une interface entre nous et nos données, il est fait pour
simplifier l'administration de MySQL grâce à des pages web.
2.15.5 Apache Maven
Figure 20 : logo de Maven
Maven est un outil pour la gestion et l’automatisation de production des projets logiciels
Java en général. Maven utilise une approche déclarative où la structure du projet et son
contenu sont décrits dans un document XML. De plus il convient de se conformer à une
structure de projets standards et de bonnes pratiques. L'observation de ces normes permet
de réduire le temps nécessaire pour écrire et maintenir les scripts.
Il offre entre autres les fonctionnalités suivantes :
 Compilation et déploiement des applications Java (JAR, WAR)
 Gestion des librairies requises par l'application
 Exécution des tests unitaires
 Génération des documentations du projet (site web, pdf, Latex)
 Intégration dans différents IDE (Eclipse, IntelliJ)
2.15.6 Postman
Figure 21 : logo de Postman

Postman est un logiciel qui se focalise sur les tests des API. Il est devenu très populaire
pour tester les Microservices, notamment grâce à sa simplicité et ses fonctionnalités très
spécialisées.
Postman existe à ce jour en extension pour Chrome, mais l'éditeur a annoncé la fin
prochaine de celle-ci. Je vais donc utiliser le logiciel.
2.15.7 MS.Visio
Figure 22 : logo de Microsoft Visio
Microsoft Visio est un outil de création de diagrammes qui nous permet de créer des
diagrammes (allant de simples à complexes), qui facilitent la visualisation des données et la
modélisation des processus. Visio aide également pour créer des organigrammes détaillés,
des plans d'étage, des diagrammes de pivot, et spécialement des diagrammes d’UML claires
et bien désigné.
2.16 Conclusion
Dans ce chapitre, j’ai présenté une étude technique détaillée du projet. J’ai parlé de
l’architecture logicielle à adopter pour mon projet, j’ai parlé aussi des Frameworks utilisés et
les outils de développement utilisés.
Chapitre 3 Analyse et conception
Dans ce chapitre, je présenterai l’analyse et la conception des besoins et des

exigences des utilisateurs et une conception détaillée du mon projet. Je commencerai
par spécifier les cas d’utilisation, ensuite les diagrammes de séquences et enfin le
diagramme de classe et un diagramme de déploiement.
3.1 Introduction :
La conception est une phase très important dans la réalisation d’un projet , et spécialement
dans le processus de développement logiciel, dans ce chapitre je donnera une visions claire
des objectifs à atteindre du projet et des services que j’aurai ajouté à la plateforme GIFPT en
utilisant les diagrammes UML.je spécifierai les besoins à exploiter pour chaque utilisateur avec
un diagrammes de cas d’utilisation et je décrira la déroulement des actions durant
l’exploitation des services fournis par la plateforme en utilisant les diagrammes de séquence,
puis un diagramme de classes qui représentes les classes qui seront utilisées dans le
développement java des services ajoutés à cette plateforme. Et je finirai par un diagramme de
déploiement.
3.2 Spécifications des besoins
Après une étude de l’application existante (GIFPT), j’ai cité quelques problèmes à résoudre
et quelques fonctionnalités très importantes qui manquent et qui sont imposées par la
situation courant. Les services que j’ai décidé à jouter a GIFPT sont comme suit :
3.2.1 Besoins fonctionnels
D’après l’étude fonctionnelle que j’ai faite, la plateforme doit répondre aux besoins
suivants :
Pour les étudiants :
 La possibilité d’accéder à des cours, des TDs, des anciens examens et
des fiches de TPs à partir de la plateforme.
 La possibilité de rejoindre une séance de cours audio-visuel en ligne.
Pour les enseignantes :
 La possibilité de publier, de modifier et de supprimer un fichier de la
bibliothèque.
 La possibilité de créer et gérer une séance de cours audio-visuel en
ligne.
3.2.2 Besoins non fonctionnels

La plateforme à réaliser doit répondre à un certain nombre d’exigences non fonctionnelles.
Soit pour les taches déjà réalisé soit pour les nouvelles tâches que j’aurai ajouté Elle doit être
Utile : L’interface de l’application doit être simple, conviviale et facile à utiliser. Elle
renseigne l’utilisateur sur le contexte dans lequel il se trouve.
Performante : Le temps de réponse et le chargement des données doivent être
minimaux. La navigation d’un écran à un autre ne doit pas gêner l’utilisateur.
Sécurisé : Chaque utilisateur, pour accéder à l’application, est obligé de s’authentifier
par un nom d’utilisateur et un mot de passe. Il ne pourra accéder qu’aux pages qui lui sont
permises par son profil.
Maintenable : La plateforme doit être modulaire ce qui facilite la tâche d’ajouter d’autre
modules, notre solution doit s’adapter à tout changement.
3.3 Diagramme de cas d’utilisation
Les diagrammes de cas d’utilisation sont des diagrammes UML permettent de donner
une vision statique et globale du comportement fonctionnel d’un système logiciel. Ils sont
utiles pour des présentations auprès de la direction ou des acteurs d’un projet.
publier fichier
suprimer fichier
<<inclure>>
ensignant créer une séance
video
<<inclure>>
<<inclure>>
finir une séance video
<<inclure>>
identification
<<inclure>>
rejoindre une séance video <<inclure>>
etudiant
consulter fichier
Figure 23 : Diagramme de cas d’utilisations
3.4 Diagramme de séquence
Les diagrammes de séquence nous permettent de modéliser le comportement dynamique

de notre système en indiquant comment ses objets interagissent au moment de l’exécution,
en point de vue temporel.
Je présenterai maintenant les diagrammes de séquence pour les cas d’utilisation définit :
3.4.1 Diagramme de séquence du scénario

« Authentification ».
utilisateur GIFPT SGBD
demandé l'accés à l'application
Page d'authentification
saisir nom et mot de passe
nom et mot de passe

verification des données
alt
[utilisateur exist]
données correctes
page d'acceuil
[utilisateur non exist]

données incorrectes
page d'authentification(type d'erreur)
Figure 24 : Diagramme de séquence pour le scénario « authentification »
3.4.2 Diagramme de séquence des scénarios

liés à la bibliothèque.
utilisateur GIFPT SGBD
assert
authentification
demande d'accéder à la bibliothèque
données de pages bibliothèque
alt
role= ensignant
opt
action= publierDocument
demande d'ajout de document
formulaire d'ajout
remplir formulaire
demande d'enregistrer le document

ajouter le document au base de dpnnées
action= suprimerDocument
demande de supprission de document
demande de confirmation d'action
confirmer
demande de supprimer le document

supprimer les données de base de données
action= LireDocument
demande de lecture de document
demande de document
charger les données de document
document
document
role= etudiant
demande de lecture de document
demande de document
document
document
Figure 25 : diagramme de séquence d’exploitation de la bibliothèque
3.4.3 Diagramme de séquence des scénarios

lié à la visioconférence.
enignant GIFPT kurento

assert
ref
authentification
demande de création d'une visioconférence

génere id
signale de création d'une P2P connection (id)

création de canal
Canal d échange de media
etudiant
assert
ref
authentification
demande de rejoindre roomchat(id)
verifier id
signale de création p2p connection
opt
finir la session
demande de fermer la session
demande de couper la connection(id)

traiter le demande
canal fermé
connection perdu
Figure 26 : diagramme de séquence des scénarios lié à la visioconférence
3.5 Diagramme de classes
Le diagramme de classes est le plus important diagramme pour la modélisation orientée

objet. Il nous montre la structure interne de notre application. Il permet de fournir une
représentation abstraite des objets du système qui vont interagir pour réaliser les cas
d'utilisation.
A partir de l’analyse du projet et des diagrammes de séquence présentés, et en respectant

l’architecture des technologies utilisés, j’ai extrait un ensemble d’entités et de dépendances.
Cela a été traduit par UML dans le diagramme de classes suivant :
session file
adresse : URL Id : double
* titre : String ;
addUser() Date :String ;
deleteUser() 1 type : String;
nomFichier : String;
1 auteur : String;
compte createFile()
* deleteFile()
nomCompte : String
updateFile()
mdpCompte : String
1 getAllFile()
creat(); getOneFile(id)
dlete();
Séance update();
findAll();
findByID(id);
Id : double
titre : String
*
1
creatLesson()
finishLesson()
updateLesson()
etudiant ensignant
id : entier id : entier
nom :String nom : String
prenom : String prenom : String
CIN : String Mail : String
CNE :: String site : String
tele : String
Mail : String
Figure 27 : Diagramme de classes
3.6 Diagramme de déploiement

Dans UML, les diagrammes de déploiement modélisent l'architecture physique d'un
système. Les diagrammes de déploiement affichent les relations entre les composants
logiciels et matériels du système, d'une part, et la distribution physique du traitement, d'autre
part, et les chemins de communication et les relations de déploiement modélisent les
connexions dans le système.
Le diagramme de déploiement suivant met en évidence les différents niveaux de notre
application.
Serveur Centrale
serveur d'application :Apache tomcat
<<componant>>
spring boot SGBD
include
<<componant>> <<componant>> <<componant>>

Spring Security
includ e
GIFPT.war MySQL
include
<<componant>>
Hibernate
include
<<componant>>
kurento MS
client
<<componant>>
navigateur web
Figure 28 : Diagramme de déploiement
3.7 Conclusion :
Au cours de ce chapitre, j’ai mis en place la partie conception de l’application, j’ai identifié
les besoins et les analysés avec le diagramme de cas d’utilisations, et j’ai fait une description
des actions durant l’utilisations de l’application avec les diagrammes de séquences, puis j’ai
présenté le diagramme de classes et enfin le digramme de déploiement. Cette partie nous va
aider à bien commencer la réalisation de notre projet, comme je vais décrire dans le chapitre
suivant.
Chapitre 4 : Réalisation
Après la phase de conception du projet, dans ce chapitre, je présenterai la

phase de réalisation qui consiste à implémenter la solution envisagée. A cet effet, je
présenterai le cadre de réalisation du code qui permet de profiter des services attendus
de cette plateforme, à savoir L’architecture logicielle de notre application, ensuit nous
montrons l’essentiel des interfaces de notre solution à travers des captures d’écran.
4.1 Introduction
La réalisation d’une application web complet (ou développement Full-Stak) demande de
bien comprendre comment la communication client-serveur ce fait en premier lieu, et en
deuxième lieu de comprendre comment les technologies et les Framework choisis se
comportent durant cette communication, Dans ce projet je vais développer la couche Backend
et la couche Frontend pour répondre aux besoins fonctionnels déterminés, et ceci consiste à
:
- Configurer les dépendances entre les différents composants logiciels à utiliser.

- Concevoir, manipuler et interroger des bases de données avec Hibernate,JPA et mySQL.
- Concevoir le code de back-end et les API d'accès à ces données sous forme des
webservices, en utilisant Java avec le Framework Spring.
- Concevoir le code de front-end qui est exécuté sur la plateforme de l'utilisateur. Le plus
souvent un navigateur Web avec Javascript utilisant la Framework AngularJS et des pages web
utilisant Bootstrap.
4.2 Architecture logicielle

L’architecture logicielle donne une image sur le découpage logique de l’application et la
façon de regrouper les composants selon le type de fonction et traitements qu’ils effectuent.
Pour notre solution, l’application GIFPT basée sur une architecture multicouche, respectant
toujours l’architecture d’une application web (Données, Traitement, Intégrateur), avec un
client AngularJS et un coté serveur JEE Spring qui se basent sur une architecture MVC.
Pour que notre architecture soit claire et lisible, je présenterai l’architecture responsable des
services CRUD séparément de l’architecture responsable de visioconférence, Les deux
schémas suivants expliquent bien l’architecture de notre application :
Entit
é
Coté serveur (backend)
Réponse Json Coté client (frontend)
Requête Http
Figure 29 : Architecture logicielle de partie CRUD de GIFPT
Figure 30 : Architecture logicielle de partie RTC de GIFPT
4.3 Description de l’architecture

4.3.1 La partie CRUD
Afin qu’un client Web AngularJS, puisse interagir avec le Backend Spring (soit que
l’utilisateur créer une requête http, soit que AJAX fait ses traitement asynchrones), il a été
décidé de créer un RESTful API. Ainsi, toutes opérations exécutées par le client auront un point
d’accès à l’API. Puisque notre application est basée sur la notion CRUD (Create , Read , Update
, Delete) .Le communication se fait comme suit :
1- Le client Web exécute une des opération CRUD envoyant une requête HTTP à travers
les méthodes d'actions GET, POST, PUT, PATCH, DELETE.
2- Le microservice Spring Boot (dispatcher servlet) détecte l’opération et passe
l’événement au contrôleur du microservice (couche contrôleur). Celui-ci sauvegarde le DTO
passé en paramètre, envoie la requête de création au service (couche métier).
3- Le service fait deux tâches importantes, il exécute la logique métier correspondant au
contrôleur, et converti le DTO a des entités (beans) consommables par la couche suivante.
4- La couche DAO fournir les données nécessaires pour la couche métier, et par la suite aux
services demandes par l’utilisateur.et sauvegarder les données fournies par la couche métier
dans la base de données, pour automatiser cette tache en utilise Hibernate pour le mapping
objet relationnelle. Hibernate fait la correspondance entre les données stockées en base de
données sous formes des tables, et les objets créés à partir des classes entité dans
l’application, on spécifie les colonnes de la table par les variables, on ajoute à sa clé primaire
l’annotation @Id puis s'il y a une clé étrangère on doit la joindre avec @JoinColumn
Définitions :
 Pour le Coté client :
View : Ce n’est rien que des lignes de html combiné avec CSS, Bootstrap et des éléments de
AngularJS pour data-binding. Chaque vue fonctionne avec un contrôleur. La vue consomme
les données en data-binding et appelle les méthodes du contrôleur
Model : Les modèles sont dédiés à un type de données. Ils contiennent la donnée et toutes
les méthodes de manipulation de cette dernière.
Controller : Faire des traitements puis utiliser les méthodes de services pour envoyer les
données au serveur. Les services sont des classes d’appels serveurs. Ils contiennent des
méthodes qui gèrent les requêtes http pour communiquer avec la partie backend.
Data binding : Le data-binding bidirectionnel (2 way data-binding) est rendu possible grâce
au scope. Le scope est le “linker” d’une application AngularJS, c’est lui qui contient les
variables et fonctions qui font la liaison entre vues et contrôleurs. Il permet donc aux données
de pouvoir être mises à jour par les vues et par le modèle. L’injection de dépendances permet
de charger certaines parties de l’application seulement quand c’est nécessaire. Et l’un des gros
points fort d’AngularJS vient du fait que les applications écrites sont entièrement testables.
 Pour le Coté serveur :

Rest API : La technologie REST (Représentationnel State Transfer) peut être considérée
comme la langue d'Internet. Les api REST s'appuient sur les verbes fournis par le protocole
HTTP. Ce sont des mots-clés qui définissent l'action que l'on souhaite effectuer sur une
ressource. Les deux principaux sont GET et POST mais il existe également PUT, DELETE. PUT
pour modifier ou mettre à jour l'état d'une ressource (un objet, un fichier ou un bloc), GET
pour récupérer une ressource, POST pour créer cette ressource, et DELETE pour la supprimer.
Le média peut être des données JSON ou XML.
Couche Controller : Des classes responsables de gérer les interactions entre clients Web
et microservice REST (par exemple, les requêtes Web) Un contrôleur sera défini dans notre
application par l'annotation @RestController, placée avant le nom de la classe. Pour décider
qu’il est le contrôleur qui va traiter l’URI en ajout l’annotation @RequestMapping au-dessus
de l'annotation @RestController, pour s'assure que toutes les URI commençant par
"/categories" seront traités par ce contrôleur. Concernant @RequestMapping au-dessus de la
méthode, sa valeur sera concaténée au @RequestMapping du contrôleur
Couche Métier : Cette couche implémente l'ensemble de la logique métier de l'application,

indifféremment des sources de données utilisées et de la présentation. Elle effectue des
opérations CRUD (Create, Research, Update, Delete) sur des objets persistés et leur appliquer
ensuite des traitements métier.
Cette couche est aussi responsable des aspects transverses : sécurité (vérification des
permission), convertit le DTO en entité pour pouvoir communiquer avec la base de données.
.
Couche accès aux données : C’est la couche qui regroupe les classes Java capables de
fournir les données nécessaires à la couche métier, et par la suite aux services demandes par
l’utilisateur. Cette couche est modélisée dans notre système par des composants DAO.
Un DAO est un design pattern (patron de conception) utilisé dans les architectures logicielles
objet visant à isoler la logique de persistance dans des classes d’accès aux données.
DTO : Classes responsables de définir les informations requises pour les interactions entre
clients Web et microservice. Il simplifie les transferts de données entre les sous-systèmes
d'une application logicielle. Les objets de transfert de données sont souvent utilisés en
conjonction des objets d'accès aux données
Couche persistance : Responsables du stockage des données dans un base de données

relationnelle. Dans notre cas il est géré par le SGBD MySQL.
Couche sécurité : Il s’agit d’une couche dédiée à la sécurité, chargée de vérifier

l’authentification et les autorisations d’accès aux pages et aussi le hachage des mots de passes
des utilisateurs, dans notre cas j’ai utilisé Spring Security pour répondre à ces besoins.
Inversion de contrôle : L’Ioc (inversion of control) est un principe abstrait qui définit un
motif de conception dans lequel le flux de contrôle d'un système est inversé par rapport à un
développement procédural. L'injection de dépendances est un motif de conception qui
propose un mécanisme pour fournir à un composant les dépendances dont il a besoin. C'est
une forme particulière d'inversion de contrôle.
Injection de dépendance : permet "d'échanger" une classe par une autre et d'avoir
plusieurs configurations d'application. Maintenant on peut appeler ces classes « Des Beans ».
Il existe 4 types d'injections de dépendances : Injection par constructeur, Injection par
interface, Injection par mutateur et Injection par champs. On peut faire de l'injection de
dépendance à la main sans utiliser d'outils ou bien utiliser des Framework comme notre cas,
on va utiliser Spring.
4.3.2 La partie visioconférence

1-Un WebSocket est créé entre le client AngularJS (à partir de service javascript webrtc)
et le serveur d'applications spring boot (le contrôleur websoket) pour implémenter un
protocole de signalisation personnalisé.
2-Un autre WebSocket est utilisé pour effectuer la communication entre le client Java
Kurento (à partir de contrôleur kurento) et le serveur multimédia Kurento.
3-Kurento vérifier les ip utilisant la signalisation et créer un canal de transport de média

entre les utilisateurs webrtc.
Cette communication s'effectue via le protocole Kurento qui utilise la spécification JSON-
RPC 2.0 pour coder ses messages API.
Définitions :
WebSocket : est une technologie évoluée qui permet d'ouvrir un canal de communication
bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez
envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans
avoir à aller consulter le serveur pour obtenir une réponse.
JSON-RPC : est un protocole d'appel de procédure distante simple codé en JSON. JSON-
RPC permet l'envoi de notifications et l'envoi de plusieurs appels au serveur auxquels il est
possible de répondre dans le désordre.
4.4 Interfaces de l’application
Figure 31 : Page d’authentification
Figure 32 : Page d’accueil de la bibliothèque
Figure 33 : Page des cours
Figure 34 : Page des TDs
Figure 35 : Page d’accueil de la Visioconférence
Figure 36 : Page de création de la visioconférence
Figure 37 : Page de configuration de la visioconférence
Figure 38 : visioconférence
Figure 39 : partage de l’écran pendant la visioconférence
4.5 Conclusion
Dans cette dernière partie de mon travail j’ai expliqué comment notre application GIFPT
fonctionner en respectant l’architecture logicielle obtenu par la collaboration de toutes les
sous architectures des outils et des Framework utilisés. J’ai présenté également, notre
plateforme à travers quelques vues de cette dernière.
Conclusion générale
L’immigration vers la numérisation de l’enseignement et l’information des étudiants, est
devenue une solution qui s’impose plus qu’être un choix, et cela devient clair au temps des
crises comme la crise provoquée par le virus corona.
C’est dans ce cadre que s’inscrit ce projet de fin d’études effectué au sein de la faculté
poly-disciplinaire de Taza, en vue de l’obtention du diplôme universitaire : licence en génie
Informatique. Il consiste à continuer le processus de développement d’une plateforme
numérique qui va mettre à disposition des étudiants de la filière SMI toute information
nécessaire, et assurer une communication continue entre les professeurs et les étudiants.
Pour atteindre cet objectif j’ai commencé par une étude préalable qui a permis de décrire
et de comprendre les principaux concepts autour desquels tourne mon projet. Puis j’ai
effectué une étude fonctionnelle où j’ai décidé les fonctionnalités à ajouter à la plateforme
GIFPT, ensuite j’ai fait une étude technique contenant une recherche sur les technologies et
les moyens qui peuvent aider à réaliser ce projet. J’ai choisi des technologies et des Framework
qui ont une bonne réputation dans le domaine de développement informatique. Ensuite j’ai
fait une analyse des besoins et une conception bien détaillée du projet. Enfin, j’ai abordé
l’étape de réalisation au cours de laquelle j’ai traduit la modélisation conceptuelle en code de
deux partie back-end et front-end utilisant les différentes technologies et techniques choisis.
Le choix des technologies a porté ses fruits en poussant les performances de l’application
à des records surprenants. D’autre part, la décomposition en couches permet de bénéficier
d’un maximum de flexibilité et d’extensibilité propice à un développement facile pouvant être
effectuée par des taches séparées.
Les perspectives possibles à la suite du présent projet sont multiples et couvrent plusieurs
aspects, tels que l’hébergement de l’application sur un serveur web et la création d’une
version mobile.
Finalement, cette expérience est une opportunité que j’ai saisie et dans laquel j’ai acquis
énormément des compétences en travaillant avec des technologies récentes et sollicitées sur
le marché, plus particulièrement, le développement des applications avec la spécification Java
EE et en utilisant des Framework très connus à titre exemple Spring, Spring boot, AngularJS,
Spring MVC, Spring Security, Hibernate, Bootstrap…et l’utilisation des techniques de RTC
comme webRTC, kurento… Elle m’a offert l’opportunité d’intégrer le monde de
développement informatique et de mettre en pratique les connaissances théoriques acquises
tout au long de mon cursus universitaire tout en enrichissant ces connaissances et cette
formation théorique et pratique acquise durant mes études à la faculté polydisciplinaire de
Taza.
Webographie
https://spring.io/guides/
https://spring.io/projects/spring-boot/
https://hibernate.org/orm/
https://www.baeldung.com/
https://www.tutorialspoint.com/spring_boot/
https://www.luv2code.com/
https://www.jmdoudoux.fr/
https://WWW.youssfi.net/
https://doc-kurento.readthedocs.io/en/6.14.0/
https://webrtc.org/
https://tutsgalaxy.com/
https://www.websocket.org/aboutwebsocket.html
https://restfulapi.net/

Rapport Du Projet de Fin Detudes en Vue

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport Du Projet de Fin Detudes en Vue

Transféré par

Droits d'auteur :

Formats disponibles

Département : Mathématiques, Physique et Informatique

Filière : Sciences Mathématiques et Informatiques

Rapport du projet de Fin d’études

En vue de l'obtention du diplôme de Licence en Génie

Développement d’une Plateforme web pour la filière

Réalisé par : Sous l’encadrement de :

Lamgarraj Mohamed Pr.Ismail Akharraz

ANNÉE UNIVERSITAIRE : 2019 - 2020

C'est avec un immense plaisir que je réserve ces quelques

Je souhaite adresser, en premier lieu, mes remerciements

Je tiens également à remercier les membres du jury d'avoir

Mes remerciements s'étendent à tous les enseignants du

Je remercie enfin toutes les personnes qui ont contribué

Liste des abréviations

MVC Model, View, Controller

WebRTC Web Real Time Comunication

Json RPC json remote procedure call

IOC Inversion of control

SOC Separation of concerns

WAR Web Application Archive

JEE Java Entreprise Edition

JPA Java Persistence API

REST representational state transfer

ORM Object-relational mapping

SQL Structured Query Language

DOM Document Object Model

Liste des figures

Figure 1 : Plan d’architecture logicielle

Figure 26 : diagramme de séquence des scénarios lié à la visioconférence

Table des matières

2.15.4 Kurento Media Server (KMS) ................................................................................... 25

Ce rapport est subdivisé en quatre chapitres : Le premier chapitre consiste à définir le

Chapitre 1 : Contexte et étude fonctionnelle de

Dans ce chapitre, je présenterai le contexte général du projet. Je vais poser la

1.4 Objectifs du projet

Chapitre 2 : Etude technique du projet

Dans ce chapitre, je présenterai l’étude technique détaillée du projet. Je vais parler

2.2 Architecture en couches

La plateforme JEE utilisant le Framework Spring pour le back-end, et le Framework

Les couches constituant l’architecture logicielle de notre application sont :

Security Interceptors : Il s'agit d'une couche dédiée à la sécurité composée de classes

Security Filters : Il s'agit d'une simple configuration permettant d'autoriser ou non

Figure 1 : Plan d’architecture logicielle

2.3 Modèle MVC

1 Requête http Contrôleur

Figure 2 : Le modèle MVC

Communication sans webrtc :

Communication avec webrtc :

Web media Server

Figure 3 : communication WebRTC

2.4 La programmation orientée aspects AOP

Figure 4 : logo de plateforme JEE

Figure 5 : logo de Spring

 L’inversion de contrôle est assurée de deux façons différentes : la recherche de

2.7 Spring Boot

Figure 6 : logo de Spring boot

 Une injection des dépendances Spring simplifiée

 Une configuration automatique

2.8 Spring Security

Figure 7 : logo de Spring Security

Figure 8 : logo de Hibernate

 Génère le code SQL nécessaire, ce qui rend l’application plus portable.

 Assure la récupération des données d’une manière optimisée.