Remerciements

J e tiens à exprimer ma profonde gratitude envers toutes les personnes

qui ont contribué à la réalisation de ce projet .

Tout d'abord, je souhaite remercier mon encadrant, Chtioui

Houssem eddine, pour son soutien constant, ses conseils éclairés et sa confiance en
mes capacités. Sa disponibilité et son expertise ont été d'une aide précieuse tout au long
de ce parcours.

Je tiens également à exprimer ma reconnaissance envers Souki Mahdi,

membre de l'équipe de développement, pour son engagement et son dévouement. Il
a apporté ses compétences et son enthousiasme, contribuant ainsi de manière
significative au succès de ce projet.
Je suis reconnaissante envers ma famille et mes amis pour leur soutien, leurs
encouragements et leur compréhension tout au long de cette période. Leur présence
et leur soutien ont été d'une importance capitale dans la réalisation de ce projet.

Enfin, je tiens à remercier toutes les personnes qui ont participé de près ou de
loin à ce projet.
 Table des matières

Introduction Générale
Chapitre I: Etude préalable
I- Introduction ................................................................................................................ 5

II- Contexte général du projet ....................................................................................... 5

III- Présentation de l’entreprise d’accueil ..................................................................... 5

IV- Etude de l’existant .................................................................................................... 6

IV-1- Analyse de l’existant ............................................................................................ 6

IV-2- Critique de l’existant ............................................................................................ 7

IV-3- Solution proposées .............................................................................................. 7

V- Spécifications des besoins ........................................................................................... 8

V-1- Identification des acteurs .......................................................................... 8

V-2- Besoins fonctionnels ................................................................................. 8

V-3- Besoins non fonctionnels .......................................................................... 8

V-4- Méthodologie de travail ............................................................................. 9

V-4-1- Méthodologie en V .................................................................... 10
V-4-2- Avantages de la méthodologie en V .......................................... 10
VI- Chronogramme ........................................................................................................ 11
VII- Conclusion ................................................................................................................. 11

Chapitre II: Etude Conceptuelle

I Introduction .............................................................................................................. 13
II- Définition UML .......................................................................................................... 13

III- Les avantages du langage UML ............................................................................. 14

IV- Diagramme de cas d’utilisation ............................................................................ 14
IV-1- Diagramme de cas d’utilisation général .................................................... 14

IV-2- Diagramme de cas d’utilisation général raffinés ........................................ 16

P a g e 2 | 38
 IV-3- Diagrammes de classes ............................................................................... 19

IV-4- Diagrammes de séquences ......................................................................... 20

IV-4-1- Diagramme de séquence du cas d’utilisation « Login» .................. 20
IV-4-2- Diagramme de séquence du cas d’utilisation «Ajouter formation . 22

IV-4-2- Diagramme de séquence du cas d’utilisation «Paiement» ............. 23

V- Conclusion ................................................................................................................. 24

Chapitre III: Réalisation

I Introduction .............................................................................................................. 26
II- Environnement de développement ........................................................................ 26

I-1-Choix technologiques .......................................................................................... 20

II-2- Diagramme de séquence du cas d’utilisation «Ajouter formation ................... 27
II-3- Environnement technique ................................................................................ 28

III- Architectures du système ........................................................................................ 29

III-1- Architecture physique ...................................................................................... 29

III-2- Architecture Logique ...................................................................................... 30

IV- Interface d’accueil .................................................................................................... 32

V- Interface d’inscription............................................................................................... 32

VI- Interface des catégories ........................................................................................... 34

VII- Interface du détail d'un cours .................................................................................. 35

VIII- Interfaces du tableau de bord de l'instructeur ....................................................... 36

IX- Conclusion ........................................................................................................... 38

Conclusion et perspectives
Webographie
 Introduction Générale

L'apprentissage en ligne est en constante évolution depuis plusieurs

années, et avec l'explosion de la pandémie de COVID-19, il est devenu essentiel
pour les enseignants et les étudiants de trouver des solutions efficaces pour
poursuivre les cours à distance. Les sites e-learning sont de plus en plus
populaires en raison de leur accessibilité et de leur flexibilité. Cependant, la
création de contenu pour ces sites peut être un défi, surtout pour les enseignants
qui ne disposent pas des compétences techniques nécessaires pour produire des
vidéos pédagogiques.
Pour répondre à ce défi, les technologies de production de contenu ont
considérablement évolué ces dernières années. Les outils en ligne tels que les
créateurs de vidéos animées, les logiciels de montage vidéo et les systèmes de
conversion de documents en vidéos ont rendu la production de vidéos
pédagogiques plus accessible à tous.
Ce rapport présente l'ensemble du travail effectué dans le cadre de ce projet
de création d'une plateforme e-learning innovante. Il est organisé en trois chapitres
qui sont décrits brièvement de la manière suivante :
 Le premier chapitre présentera le cadre général du travail au sein duquel
le projet a été réalisé, notre étude préalable, la spécification des besoins et la
méthodologie utilisée.

 Le second chapitre contiendra la conception de notre application et la

description des principes de la solution à l’aide du langage UML.

 Le troisième chapitre sera consacré à la description de l’environnement

de travail et la présentation du fonctionnement de la solution avec ses principaux
aperçus graphiques..

Pour finir, nous aurons une conclusion générale dans laquelle nous
récapitulerons tout le travail réalisé et des perspectives .
P a g e 5 | 38
 Etude préalable

I- Introduction:
L’étude préalable est une analyse permettant de vérifier la viabilité
technique d’un projet. En effet, dans ce chapitre nous présenterons en premier
lieu l’entreprise hôte au sein de laquelle ce projet a été réalisé, ensuite nous
fournirons une meilleure idée sur ce projet en le comparant aux solutions utilisées
actuellement tout en précisant les besoins fonctionnelles et non fonctionnelles.
II- Contexte général du projet :
Le projet consiste en la création d'une plateforme d'apprentissage en ligne
qui propose des cours gratuits et à des prix abordables pour les apprenants du
monde entier et qui offre diverses fonctionnalités pour faciliter la création de
contenus pour les enseignants et l'accès aux cours pour les apprenants.
La mise en œuvre du plateforme d'apprentissage en ligne est dans le cadre
d’un projet de fin d’année de la 4ème Génie Logiciel de l’école privée
d’ingénieurs « L’École Pluridisciplinaire Internationale de Sousse ».

III- Présentation de l’entreprise d’accueil :

Designed and Dusted est une startup innovante fondée en 2022, spécialisée
dans le développement de solutions créatives et novatrices. Elle propose des idées
originales pour résoudre les défis commerciaux, en mettant l'accent sur des
expériences de marque significatives. La société offre des services de refonte
d'identité visuelle, de reconstruction de sites web, ainsi que des solutions
créatives dans les domaines du branding, du marketing numérique et de la
communication. Grâce à son expertise approfondie du marché, elle fournit des
solutions uniques pour aider les entreprises à se démarquer et à réussir.

P a g e 6 | 38
 Chapitre I

Designed and Dusted est une startup innovante fondée en 2022,

spécialisée dans le développement de solutions créatives et novatrices. Elle
propose des idées originales pour résoudre les défis commerciaux, en mettant
l'accent sur des expériences de marque significatives. La société offre des
services de refonte d'identité visuelle, de reconstruction de sites web, ainsi que
des solutions créatives dans les domaines du branding, du marketing numérique
et de la communication. Grâce à son expertise approfondie du marché, elle fournit
des solutions uniques pour aider les entreprises à se démarquer et à réussir.
IV- Etude de l’existant :

Cette étape est considérée comme l’une des principales étapes lors de la
réalisation d’un nouveau projet. elle implique une analyse approfondie des solutions
actuelles afin d'identifier leurs points faibles et de proposer des fonctionnalités
répondant aux besoins des utilisateurs, tout en évitant les erreurs commises dans le
passé. Cette phase est essentielle pour garantir le succès et la qualité du projet final.

IV-1- Analyse de l’existant :

L’analyse de l’existant est une étape primordiale à toute mise en route
d’un projet. En effet, Elle nous permet de préciser les points faibles des solutions
actuelles afin de pouvoir y corriger et concevoir une application qui répond aux
besoins des utilisateurs.
Parmi les applications qui offrent des fonctions similaires à celles que nous
souhaitons réaliser dans notre application:
 Coursera :
Coursera propose une variété de cours en ligne, gratuits et payants, mais
les coûts élevés, la qualité variable des cours et le manque de support peuvent
affecter l'expérience d'apprentissage.

P a g e 7 | 38
 Chapitre I

 Udemy :
Udemy propose des cours de formation professionnelle, de tutoriels et
des formations en ligne sur une variété de sujets, mais sa qualité de cours est
variable en raison de l'absence de réglementation pour le contenu des instructeurs,
ce qui peut parfois conduire à la propagation d'idées dangereuses, ainsi qu'un
manque de support technique pour les utilisateurs.

 EdX :
EdX est une plateforme en ligne proposant des cours gratuits et payants
dans divers domaines, mais elle est confrontée à des coûts élevés et à une qualité
variable de cours. De plus, la plateforme manque de programmes en français, ce
qui limite l'accès à l'enseignement pour les francophones.

IV-2- Critique de l’existant :

 Coûts élevés des cours payants sur certaines plateformes
 Accès limité aux contenus pour les apprenants du monde entier, en particulier pour
ceux qui ont des barrières linguistiques
 Manque de réglementation sur le contenu proposé par les instructeurs
 Manque de compétences techniques des enseignants qui rend difficile la création
de contenu sous forme de vidéos pédagogiques
 Manque de support technique pour aider les utilisateurs à résoudre les problèmes
rencontrés avec la plateforme (inscription, facturation, problèmes techniques)

P a g e 8 | 38
 Chapitre I

IV-3- Solutions proposées :

Notre application se concentre sur la résolution des points faibles des
applications existantes en offrant des fonctionnalités innovantes.
 Elle offre des cours gratuits et à des tarifs moins élevés, avec transcription et sous-
titrage en plusieurs langues pour un accès facile aux contenus audiovisuels pour les
apprenants du monde entier.
 La fonction de conversion de fichiers permet aux enseignants de créer facilement des
vidéos pédagogiques à partir de documents existants.
 Un système de validation de contenu assure la qualité et la crédibilité du contenu
publié par les enseignants.
 Une assistance technique est disponible pour aider les utilisateurs à résoudre tout
problème technique rencontré sur la plateforme.

V- Spécifications des besoins

L'étape de la spécification des besoins consiste à comprendre et à
déterminer les différentes fonctions et besoins du système. Dans cette phase, nous
présentons tous les principales fonctions et non-fonctions de notre projet.
V-1- Identification des acteurs :
Les principaux acteurs de notre application sont:
 Administrateur: a pour rôle la gestion des utilisateurs et la gestion des ressources.
 Instructeur: a pour rôle la gestion des ressources .
 Apprenant: a pour rôle le suivi des formations .

V-2- Besoins fonctionnels :

Dans cette partie , nous allons donner les différentes fonctionnalités

qu’offrira notre application:
Admin:
 Gestion des comptes(Apprenants/ Instructeurs)
 Validations des publications des Instructeurs
 Gestion de la sécurité
P a g e 9 | 38
 Chapitre I

 Fournir le support technique

Instructeurs:
 Création d’un compte
 Gestion des ressources(vidéos + documents)
 Conversion des documents en vidéos
 Paiement des modules premium
 Interaction avec le support technique
Apprenant:
 Création d’un compte
 Consultation des profils des instructeurs et des formations proposés
 Paiement des formations payantes
 Inscription aux formations
 Evaluation des formations
 Recherche des formations et des profils des instructeurs
 Téléchargement des cours
 Suivie de la progression
 Interaction avec le support technique

V-3- Besoins non fonctionnels :

 Performance : L'application doit être performante pour garantir une expérience

utilisateur fluide. Les temps de chargement doivent être rapides et les
fonctionnalités doivent répondre rapidement aux demandes des utilisateurs.
 Sécurité : L'application doit être sécurisée pour protéger les informations
personnelles des utilisateurs et les données de paiement .
 Accessibilité : L'application doit être accessible aux utilisateurs de tous niveaux.
Des fonctionnalités telles que des descriptions audio, des sous-titres et des
couleurs contrastées peuvent améliorer l'accessibilité de l'application.
 Évolutivité : L'application doit être évolutive pour permettre une croissance
future. Elle doit être capable de gérer une augmentation du nombre
d'utilisateurs et de contenus sans perte de performances.

P a g e 10 | 38
 Chapitre I

 Facilité d'utilisation : L'application doit être facile à utiliser pour tous les
utilisateurs, même ceux qui ne sont pas familiers avec la technologie. Les
fonctionnalités doivent être intuitives et les instructions claires.

V-4- Méthodologie de travail

Avec la complexité croissante des solutions logicielles, le besoin d'un

ensemble de règles pour organiser la programmation est devenu une nécessité
absolue. Par conséquent, de nombreuses lignes directrices sont apparues et ont
été condensés dans ce que nous appelons aujourd'hui les méthodologies de
développement logiciel.
L'objectif de ces méthodologies est de diviser le flux de travail du projet
en différentes phases dans l’intention d’une meilleure planification et gestion.

V-4-1- Méthodologie en V

Pour la réalisation de notre projet, Nous avons choisi la méthode en V

pour notre projet, qui est une amélioration du modèle en cascade. Cette méthode
comprend neuf étapes réparties en trois phases : conception, réalisation et
validation. Vous pouvez voir un schéma représentant ces étapes dans la figure
suivante:

Figure 1 : La méthodologie de conception en V .

P a g e 11 | 38
 Chapitre I

V-4-2- Avantages de la méthodologie en V

Les avantages de la méthodologie en V se résument ainsi :
 Obligation de valider chaque étape avant de passer à la suivante, minimisant ainsi
les risques d'erreurs.
 Simplicité de compréhension et de mise en œuvre, facilitant son adoption par les
équipes de projet.
 Grande utilisation dans les projets de grande envergure, témoignant de son
efficacité et de sa pertinence dans des contextes complexes.

VI- Chronogramme :
Les différentes étapes de réalisation de ce projet ainsi que
l’élaboration du rapport sont représentées par le diagramme de Gantt illustré
par la figure suivante:

Figure 2 : Chronogramme .

P a g e 12 | 38
 Chapitre I

VII- Conclusion
Ce chapitre a été dédié à la définition du contexte générale du projet ainsi
que la présentation de l’organisme d’accueil et la spécification des besoins divers
de l’application. Il nous a servi à bien comprendre le problème posé afin de
préciser nos objectifs à atteindre. Cet aperçu général est l’appui et le support de
base de notre conception que nous mettrons en évidence dans le chapitre qui
suit.

P a g e 13 | 38
 Chapitre II

Etude Conceptuelle

I- Introduction :
Dans le chapitre précédent, nous avons examiné les divers intervenants
impliqués dans notre solution, en décrivant les nombreuses fonctionnalités dont ils
pourront profiter. Nous entrons maintenant à l’une des phases les plus importantes
lors du développement d’une application, la conception. Dans cette étape nous allons
présenter tout d’abord les différents patrons de conception utilisés ainsi que le
diagramme de cas d’utilisation global et raffinés, le diagramme de classe et les
diagrammes de séquences.

II- Définition UML

Nous avons utilisé le langage UML (Unified Modeling Language) pour la
modélisation de notre système. UML permet de représenter de manière
standardisée les éléments d'un problème en utilisant une approche orientée objet.
Il nous a permis de créer des modèles informatiques des entités du monde réel, en
utilisant des vues statiques et dynamiques, exprimées à travers différents types de
diagrammes. Cette approche nous a aidés à représenter efficacement notre
système et à visualiser les interactions entre les différents objets.

P a g e 14 | 38
 Chapitre II

III- Les avantages du langage UML

Le langage de modélisation unifié UML est le moyen le plus utilisé pour faire la
conception d’un projet et il ne dépend d’aucun outil d’implémentation ou bien les langages
utilisés pour la partie développement du projet, il est caractérisé par :

 Indépendance : UML n'est lié à aucun langage de programmation spécifique ou

outil d'implémentation.
 Fiabilité : UML fournit des procédures détaillées pour le développement.
 Communication : UML est un langage standard qui facilite la communication entre
les membres de l'équipe.
 Abstraction : UML permet de modéliser le système de manière abstraite, en se
concentrant sur les concepts clés.
 Documentation : Les modèles UML servent de documentation visuelle pour le
projet.

IV- Diagrammes des cas d’utilisations

Le diagramme de cas d'utilisation est une représentation graphique qui
décrit comment un utilisateur interagit avec le système. Il permet de collecter et de
décrire les besoins des différents acteurs impliqués dans le système. En d'autres
termes, il s'agit d'une représentation des fonctionnalités du système du point de
vue de l'utilisateur. Le diagramme de cas d'utilisation est un outil qui permet de
modéliser les différentes interactions possibles entre le système et les utilisateurs,
et constitue ainsi une partie importante de l'aspect statique de la modélisation du
système[2].
IV-1- Diagramme de cas d’utilisation général :

Nous présentons ci-dessous le diagramme des cas d’utilisation

générale de notre application ce qui permet de décrire les fonctionnalités
globales. Ensuite nous détaillerons les cas d’utilisation les plus importants.

P a g e 15 | 38
Chapitre II

Figure 3 :Diagramme des cas d’utilisation global .

P a g e 16 | 38
 Chapitre II

IV-2- Diagrammes de cas d'utilisation raffinés :

Diagramme de cas d'utilisation raffiné “Assister aux formations”:

Figure 4: Diagramme de cas d'utilisation raffiné “Assister aux formations” .

- Acteur: Apprenant
-Description: Une fois que l'apprenant s'est authentifié, il peut consulter la
liste des différentes formations proposées sur la plateforme. Il peut choisir l'une
des formations disponibles, s'inscrire et effectuer le paiement via le système de
paiement si la formation est payante. Après son inscription, il est en mesure de
consulter le contenu de la formation et de suivre sa progression s'il avait déjà été
inscrit auparavant. L'apprenant peut également télécharger le contenu de la
formation et l’évaluer .

P a g e 17 | 38
 Chapitre II

Diagramme de cas d'utilisation raffiné “Gestion des ressources”:

Figure 5 : Diagramme de cas d'utilisation raffiné “Gestion des ressources”

- Acteur: Instructeur
-Description: Lorsque l'instructeur se connecte avec son compte, il peut
gérer ses ressources sur la plateforme. Il peut consulter les ressources qu'il a déjà
mises à disposition, ajouter de nouvelles vidéos ou documents, et même convertir
ses documents en vidéos en payant cette option supplémentaire. Il a également la
possibilité de supprimer des ressources si nécessaire.

P a g e 18 | 38
 Chapitre II

Diagramme de cas d'utilisation raffiné “Gestion des comptes”:

Figure 6 : Diagramme de cas d'utilisation raffiné “Gestion des comptes”

- Acteur: Admin
-Description: Une fois que l'administrateur se connecte à son compte, il
dispose des droits pour gérer l'ensemble des comptes sur la plateforme. Il peut
consulter les comptes des apprenants et des instructeurs, les modifier et même les
supprimer si nécessaire.

IV-3- Diagramme de classes

Le diagramme de classes est une représentation statique essentielle dans
la modélisation orientée objet. Il permet de visualiser les éléments fondamentaux
d'un système tels que les classes, leurs attributs, leurs méthodes et les relations
existant entre les classes[3]. Cette représentation est primordiale pour comprendre
la structure d'un système et faciliter la conception de sa réalisation.

P a g e 19 | 38
 Chapitre II

Figure 7: Diagramme de classes global

Dans notre diagramme de classes illustré par la figure, nous avons :

 Les classes "Admin", "Instructeur" et "Apprenant" sont des sous-classes de la
classe "Utilisateur". La classe "Utilisateur" définit des attributs communs tels
que "nom", "email" et "mot de passe", ainsi que des méthodes pour se
connecter, se déconnecter et modifier le mot de passe.
 Chaque utilisateur a un rôle attribué, et chaque rôle est composé de
fonctionnalités (features) ayant des permissions représentées par des valeurs

P a g e 20 | 38
 Chapitre II

booléennes. Ces permissions définissent les droits et les autorisations de

l'utilisateur dans l'application.
 La classe "Formation" contient les détails d'une formation tels que son titre, sa
description, sa durée et son prix.
 La classe "Catégorie" est composée d'une liste de formations auxquelles elle
appartient. Elle possède également un attribut nom qui indique la catégorie
correspondante.
 Une catégorie est constituée d'une ou plusieurs formations, et chaque
formation appartient à une seule catégorie.
 Chaque instructeur a une spécialité et un rang. Ils ont la possibilité de déposer
des documents et de publier des vidéos. De plus, ils peuvent choisir de convertir
les documents en vidéos moyennant un paiement pour cette fonctionnalité.
 L'apprenant a la possibilité de s'inscrire à plusieurs formations, d'évaluer ces
formations et de télécharger des ressources associées. De cette manière, il peut
suivre sa progression s'il est déjà inscrit.

IV-4- Diagrammes de séquences :

Le diagramme de séquence est un outil de modélisation qui permet de
représenter les interactions entre les différents éléments d'un système. Il détaille
la chronologie des messages échangés entre ces éléments afin de mieux
comprendre leur mode de fonctionnement [4].

IV-4-1- Diagramme de séquence du cas d’utilisation « Login»

Le diagramme de séquence suivant montre la séquence d'interactions entre
les objets pour se connecter.

P a g e 21 | 38
 Chapitre II

Figure 8 : Diagramme de séquence du cas d’utilisation « Login»

Pour se connecter, l'utilisateur doit entrer son email et son mot de passe.
Une première validation est effectuée pour vérifier le format de l'email. Si la
première validation est vérifiée, une requête post est envoyée au contrôleur
d'authentification, qui envoie la demande au modèle utilisateur afin de vérifier
l'existence de cet utilisateur particulier. Si un utilisateur avec l'e-mail et le mot de
passe spécifiés n'existe pas, un message d'erreur est renvoyé du modèle utilisateur
au contrôleur d'authentification, qui renvoie une réponse d'erreur à la vue.
Dans le cas où l'utilisateur spécifié existe, les détails de l'utilisateur sont
renvoyés du modèle au contrôleur d'authentification, qui crée un jeton JWT et le
renvoie à la vue avec les données de l'utilisateur pour signifier le succès de
l'opération et l'utilisateur est dirigé vers la page d'accueil.

P a g e 22 | 38
 Chapitre II

IV-4-2- Diagramme de séquence du cas d’utilisation «Ajouter formation»

Figure 9 : Diagramme de séquence du cas d’utilisation «Ajouter formation»

Une fois que l'instructeur est authentifié, il est autorisé à déposer des documents
et à publier des vidéos. Après avoir rempli le formulaire et qu'il a été vérifié et
confirmé, une interface détaillée de la formation s'affiche, fournissant tous les
détails saisis. En cas de problème de saisie, un message d'erreur approprié est
affiché pour indiquer l'erreur et demander à l'instructeur de corriger les
informations saisies.

P a g e 23 | 38
 Chapitre II

IV-4-3- Diagramme de séquence du cas d’utilisation «Paiement»

Figure 10 : Diagramme de séquence du cas d’utilisation «Paiement»

L'apprenant et l'instructeur partagent un module de paiement commun.

Dans ce module, l'instructeur peut choisir de payer pour l'option de conversion des
documents en vidéos, tandis que l'apprenant effectue des paiements pour accéder
aux formations payantes. Pour gérer les transactions, le système utilise la
plateforme de paiement Stripe.
Lorsque l'instructeur ou l'apprenant demande une transaction, le système
affiche une interface utilisateur fournie par Stripe. Cette interface permet à
l'utilisateur de saisir les informations nécessaires pour le paiement. Une fois les
données saisies, l'API de Stripe est utilisée pour vérifier ces informations, en les
envoyant depuis le contrôleur approprié. Cette vérification garantit le bon
déroulement de la transaction et la sécurité des paiements effectués.

P a g e 24 | 38
 Chapitre II

V- Conclusion
Dans ce chapitre, nous avons abordé la définition du langage de
modélisation UML ainsi que la conception de notre solution. Cette conception a été
illustrée par un diagramme de cas d'utilisation général et des raffinements pour
chaque acteur, ainsi qu'un diagramme de classes pour l'aspect statique et des
diagrammes de séquence pour l'aspect dynamique. Le prochain chapitre se
concentrera sur la phase finale de notre projet, à savoir la mise en œuvre de la
solution.

P a g e 25 | 38
 Chapitre III

Réalisation

I- Introduction
Après avoir présenté la partie conception, Ce chapitre contient la partie
réalisation de notre solution au but de rapporter le travail accompli. Pour cela, au
début, nous commençons par la présentation des outils matériels et logiciels
utilisés pour développer notre solution. Ensuite, nous présentons les captures
d’écran qui montre les différentes fonctionnalités.

II- Environnement de développement

Dans cette sous-section, nous décrivons les frameworks et les logiciels

exploités pour concevoir notre solution.
II-1- Choix technologiques :

 React.js
ReactJS est une bibliothèque JavaScript open source utilisée pour créer des
sites Web. Ce qui favorise le React des autres frameworks populaires, c'est la
possibilité de créer des composants d'interface utilisateur réutilisables, il peut gérer
une grande quantité de modifications de données sans avoir besoin de recharger la
page (Virtual-DOM), c'est l'un des concepts du côté serveur[5].

P a g e 26 | 38
 Chapitre III

 Node.js
Node.js est le runtime qui permet d'écrire toutes nos tâches côté serveur,
en JavaScript,telles que la logique métier, la persistance des données et la
sécurité. Node ajoute également des fonctionnalités que le JavaScript du
navigateur standard ne possède pas, comme par exemple l'accès au système de
fichiers local[6].

 Expressjs
Express est une Framework d'applications Web Node.js minimaliste et
flexible qui fournit un ensemble de fonctionnalités robuste pour les applications
Web et mobiles[6].

 MongoDB
MongoDB est un programme de gestion de base de données NoSQL open
source. Les bases de données NoSQL sont très utiles pour travailler avec de grands
ensembles de données distribuées. MongoDB est un outil qui permet de gérer des
informations orientées document,de stocker ou de récupérer des informations [7].

II-2- Environnement technique :

 Visual Studio Code

Visual Studio Code est un éditeur de texte léger mais puissant qui s'exécute
sur votre bureau et est disponible pour Windows, macOS et Linux. Il est livré avec
une prise en charge intégrée de JavaScript, TypeScript et Node.js et dispose d'un
P a g e 27 | 38
 Chapitre III

riche écosystème d'extensions pour d'autres langages (tels que C++, C#, Java,
Python, PHP, Go) et des environnements d'exécution (tels que .NET et Unity)[8].

 Postman
Postman est une plate-forme de collaboration pour le développement d'API.
Les fonctionnalités de Postman simplifient chaque étape de la création d'une API
et rationalisent la collaboration afin que vous puissiez créer de meilleures API, plus
rapidement[9].

 Draw.io
Draw.io est un logiciel gratuit de création de diagrammes en ligne pour la
création d’organigrammes, de diagrammes de processus, d’organigrammes, de
diagrammes UML, ER et de réseaux[10].

III- Architectures du système

L'architecture du système est essentielle pour le développement d'une
application réussie. Elle définit la structure et l'organisation des différentes parties
du système, garantissant ainsi son bon fonctionnement. Cette section consiste à
présenter les architectures comportementales et structurelles de notre système,
on distingue l’architecture physique et l’architecture logique.

P a g e 28 | 38
 Chapitre III

III-1- Architecture physique

Figure 11 : Architecture physique

Notre architecture physique représenté par l’image ci-dessus nous renseigne

sur la relation entre les différentes parties du système tout en spécifiant les
technologies utilisées dans ces parties.
On distingue React JS dans la partie client qui communique avec la partie
Backend (Serveur) via des API. Quant à la partie Backend, elle est développée en
Node JS et elle communique avec la base de données mongoDB via l’envoi des
requêtes, ce dernier va retourner des données qui vont être transféré au client via
des réponses http.
III-2- Architecture Logique :
Le Model-View-Controller (MVC) est l’un des patrons de conceptions les
plus populaires et les plus utilisés lors du développement des applications. Il a
commencé à être utilisé depuis l’année 1978 pour développer des clients lourds mais
grâce à sa puissance il a été adopté rapidement pour le développement des
applications web [1].
Ce patron de conception est utilisé pour répondre aux besoins des applications
interactives en séparant les préoccupations liées aux différents composants au sein de
leur architecture respective. Les trois principaux composants sont les suivants :
 Le Modèle : il contient les données brutes de l'application et ne contient aucune
logique décrivant comment présenter les données à l'utilisateur.
 La Vue : elle est responsable de présenter et de mettre en forme les données du
Modèle pour l'utilisateur.

P a g e 29 | 38
 Chapitre III

 Le Contrôleur : il se place entre la Vue et le Modèle. Il écoute les événements

déclenchés et exécute la réaction appropriée en conséquence en mettant à jour le
Modèle ou la Vue.
En séparant ces responsabilités, le MVC permet de simplifier la conception de
l'application, d'améliorer la maintenabilité et de rendre le code plus réutilisable.

Figure 12 :Model MVC .

Dans notre plateforme, le niveau Client (View) sera développé en utilisant

JavaScript, HTML et CSS, avec ReactJS comme framework. Il s'agit de l'interface avec
laquelle l'utilisateur interagira pour accéder aux fonctionnalités de notre
application.
Le niveau de logique métier (contrôleur) sera développé avec Node.js et
Express.js. Ce niveau représente le serveur d'application qui agira comme un pont
de communication entre le niveau client et le niveau de base de données. Il servira
les pages HTML à l'appareil de l'utilisateur, acceptera les requêtes HTTP de
l'utilisateur et fournira les réponses appropriées.

P a g e 30 | 38
 Chapitre III

IV- Interface d’accueil:

Figure13 :interface d’accueil

L'interface d'accueil de la plateforme présente les catégories de cours

disponibles, telles que l'informatique, le design graphique, le marketing, les
langues, etc. Les utilisateurs peuvent facilement naviguer et choisir parmi ces
catégories pour trouver des cours qui les intéressent. En plus des catégories,
l'interface inclut également des sections telles que "À propos" et "Contact" pour
fournir des informations supplémentaires aux utilisateurs.

P a g e 31 | 38
 Chapitre III

V- Interface d’inscription:

Figure 14:Interface d’inscription

Lors de l'inscription sur la plateforme, les utilisateurs peuvent choisir entre deux
rôles : apprenant ou instructeur. Selon le rôle sélectionné, une interface spécifique
s'affiche.
Pour les instructeurs, une interface de tableau de bord est proposée. Cette
interface leur permet de gérer leurs cours et d'ajouter du contenu . Les instructeurs
ont également accès à des informations sur les revenus générés par leurs cours.
Pour les apprenants, une interface présente différentes catégories de cours.
Les apprenants peuvent explorer ces catégories, consulter les descriptions de
cours, les compétences acquises, les avis des autres étudiants et s'inscrire aux cours
qui les intéressent.
Cette approche de différenciation des interfaces en fonction du rôle choisi
assure une expérience utilisateur adaptée aux besoins spécifiques des instructeurs
et des apprenants.

P a g e 32 | 38
 Chapitre III

VI- Interface des catégories:

Figure 15: Listes des catégories

La plateforme propose une vaste gamme de catégories de cours couvrant

divers domaines tels que l'informatique, le design graphique, les langues, les
affaires, les sciences, etc. Chaque catégorie regroupe plusieurs cours
soigneusement sélectionnés et publiés par des instructeurs experts dans leur
domaine respectif.
VII- Interface du détail d'un cours:

Figure 16: Cours détaillés

P a g e 33 | 38
 Chapitre III

L'interface d'une page de détails d'un cours est conçue pour offrir aux
utilisateurs une vue détaillée et complète des informations essentielles liées au
cours. Elle présente plusieurs éléments clés pour aider les étudiants à prendre une
décision éclairée quant à leur participation.
Tout d'abord, le titre du cours est clairement affiché, permettant aux
utilisateurs d'identifier rapidement le sujet principal du cours.
Ensuite, une description détaillée du cours est fournie, mettant en évidence
les objectifs d'apprentissage et les compétences que les étudiants pourront
acquérir en le suivant. Cela permet aux utilisateurs d'avoir une compréhension
approfondie du contenu proposé et de déterminer si cela correspond à leurs
besoins et à leurs intérêts.
Le prix du cours est également indiqué, qu'il s'agisse d'un cours payant ou
gratuit. Cette information est cruciale pour les utilisateurs qui souhaitent évaluer la
valeur du cours avant de s'inscrire.
Le nom de l'instructeur ou de l'enseignant responsable du cours est affiché,
offrant aux utilisateurs des informations sur l'expertise et les qualifications de
l'instructeur.
Les avis et les évaluations des étudiants précédents sont également
présentés, donnant aux utilisateurs un aperçu des expériences des autres étudiants
et de la qualité du cours. Cela peut aider les utilisateurs à évaluer la pertinence et
la fiabilité du contenu.
La durée estimée du cours est mentionnée, permettant aux utilisateurs de
planifier leur emploi du temps en conséquence. Cela est important pour les
utilisateurs qui ont des contraintes de temps et qui souhaitent s'assurer qu'ils
pourront suivre le cours sans problème.
La date d'upload du cours est affichée pour informer les utilisateurs de la
fraîcheur des informations. Cela est particulièrement pertinent pour les cours liés
à des domaines en constante évolution, où il est important de s'assurer que le
contenu est à jour.
Enfin, un bouton d'inscription est présent, offrant aux utilisateurs la
possibilité de s'inscrire directement au cours. Cela facilite le processus d'inscription
et encourage les utilisateurs intéressés à passer à l'action.

P a g e 34 | 38
 Chapitre III

VIII- Interfaces du tableau de bord de l'instructeur:

Figure 17: Formulaire d’ajout des cours

Le formulaire d'ajout de cours sur le tableau de bord de l'instructeur permet

de saisir le nom du cours, sa description et de sélectionner la catégorie
correspondante. Il offre également la possibilité de publier des documents et des
vidéos associés. Cela facilite la création de cours complets et engageants pour les
apprenants.

Figure 18: Liste des cours d’un instructeur

L'interface des cours d'un instructeur lui permet de gérer tous les cours qu'il
a déposés. Il peut les modifier, les supprimer ou voir les détails de chaque cours.
Cette interface offre à l'instructeur un contrôle complet sur ses cours, lui
permettant de maintenir et de mettre à jour facilement son contenu pédagogique.
Grâce à cette fonctionnalité, l'enseignant peut s'assurer que ses cours sont à jour,
pertinents et répondent aux besoins de ses apprenants.

P a g e 35 | 38
 Chapitre III

IX- Conclusion
Dans ce chapitre, nous avons défini l'environnement logiciel de notre projet.
Nous avons décrit en détail l'architecture que nous avons adoptée et nous avons
également inclus des captures d'écran des différentes interfaces de la plateforme
que nous avons développée.

P a g e 36 | 38
 Conclusion et perspectives
En conclusion, ce rapport présente notre projet de création d'une plateforme e-
learning innovante, centrée sur des solutions efficaces pour l'apprentissage en
ligne. Malheureusement, en raison de contraintes de temps, certaines des
fonctionnalités envisagées n'ont pas pu être entièrement réalisées.
Cependant, nous sommes parvenus à concevoir et déployer une plateforme
e-learning conviviale et intuitive, offrant des cours gratuits et abordables, ainsi que
des fonctionnalités de conversion de fichiers. Ces fonctionnalités répondent à
certains des défis identifiés, améliorant ainsi l'expérience d'apprentissage des
utilisateurs.
Pour les perspectives futures, nous prévoyons de continuer à améliorer le
contenu proposé sur la plateforme, en prenant en compte les retours des
utilisateurs et les nouvelles tendances éducatives .
Nous envisageons également de nous étendre vers de nouveaux domaines,
d'intégrer l'intelligence artificielle et l'analyse des données pour des fonctionnalités
avancées, ainsi que d'établir des partenariats stratégiques avec des institutions
éducatives et des experts du domaine.

P a g e 37 | 38
 Webographie
[1]: https://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur Date
de dernière consultation : 22/04/2023.
[2]: https://www.ibm.com/docs/fr/rational-soft-arch/9.5?topic=diagrams-use-
case Date de dernière consultation : 22/04/2023.
[3]: https://www.ibm.com/docs/fr/rsar/9.5?topic=diagrams-class Date de
dernière consultation : 22/04/2023.
[4]: https://www.ibm.com/docs/fr/rsm/7.5.0?topic=uml-sequence-diagrams
Date de dernière consultation : 22/04/2023.
[5]: https://sokeo.fr/react-js/ Date de dernière consultation : 22/04/2023.
[6]: https://openclassrooms.com/fr/courses/6390246-passez-au-full-stack-
avec-node-js-express-et-mongodb/6466231-demarrez-votre-serveur-node Date de
dernière consultation : 22/04/2023.
[7]: https://www.mongodb.com/fr-fr/nosql-explained Date de dernière
consultation : 22/04/2023.
[8]: https://fr.wikipedia.org/wiki/Visual_Studio_Code Date de dernière
consultation : 22/04/2023.
[9]: https://latavernedutesteur.fr/2020/03/06/outil-de-test-tester-vos-api-
avec-postman/ Date de dernière consultation : 22/04/2023.
[10]: https://www.blogdumoderateur.com/tools/diagrams-net-draw-io/ Date
de dernière consultation : 22/04/2023.

P a g e 38 | 38