Ministère de l'enseignement supérieur et de la recherche scientifique et des

technologies de l'information et de la communication

Direction Générale des Etudes Technologiques
Institut Supérieur des Etudes Technologiques de Bizerte
Département Technologies de l’Informatique

RAPPORT DE STAGE DE PERFECTIONNEMENT

Sujet:

Développement d'une application web basée sur l'IA

pour générer des quiz interactifs.

Réalisé par : Sirine Kahweji

Encadré par : Mr Feres Othman

Période du stage : Du 15/06/2024 Au 15/07/2024

Organisme d’accueil : Technix Informatique

Adresse : Rue de la mosquée , 7015 Rafraf

Tel /Fax : +21670 034 677/ +21672 411 207

Email : info@technix.com.tn

Année Universitaire : 2023/2024

 REMERCIEMENTS

Je tiens tout d’abord à exprimer ma profonde gratitude envers l’entreprise TECHNIX IN-
FORMATIQUE pour m’avoir offert l’opportunité d’effectuer mon stage de perfectionnement
au sein de leur établissement. Ce fut une expérience enrichissante qui a grandement contribué à
mon développement professionnel.

Je tiens à adresser mes remerciements chaleureux à mon encadrant monsieur Feres Othmen
pour sa guidance précieuse et son soutien constant tout au long de cette période. Ses conseils
éclairés et son expertise ont été des atouts majeurs dans l’approfondissement de mes connais-
sances.

Je remercie également toute l’équipe de TECHNIX INFORMATIQUE pour leur accueil

chaleureux, leur collaboration professionnelle, ainsi que leur esprit de partage, d’échange et
d’innovation.

Finalement, un grand merci à L’institut Supérieur des études Technologique de Bizerte

pour m’avoir donné l’opportunité de réaliser ce stage de perfectionnement. et mes enseignants,
qui m’ont préparée à ce stage et m’ont fourni les outils nécessaires pour réussir.

i
 TABLE DES MATIÈRES

Introduction Générale 1

1 Etude de l’organisme du stage 2

1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Présentation de l’organisme . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.3 Les Services De Société . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.4 Organigramme de l’organisme . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.5 Description de la structure concernée par le stage . . . . . . . . . . . . . . . . 4

1.6 Présentation de thème de stage . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Etude préalable 6

2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.2 Description de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.3 Critiques de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.4 Solutions proposées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.5 Description détaillée de la solution finale . . . . . . . . . . . . . . . . . . . . 8

ii
 TABLE DES MATIÈRES

2.5.1 Préparer un logo pour l’application . . . . . . . . . . . . . . . . . . . 8

2.5.2 Etude de besoin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.5.3 Conception UML de la solution . . . . . . . . . . . . . . . . . . . . . 9

2.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3 La réalisation 16

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2 Environnement matériel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.3 Environnement logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.3.1 Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.3.2 MongoDB Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.3.3 Draw.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.3.4 Latex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.3.5 Postman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.4 Les Frameworks et les environnements de développement . . . . . . . . . . . 19

3.4.1 React JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.4.2 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.4.3 Node JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.4.4 Express JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.4.5 API Gemini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.4.6 GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.5 Principales interfaces graphiques . . . . . . . . . . . . . . . . . . . . . . . . 23

3.5.1 Page d’authentification . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.5.2 Page d’inscription . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.5.3 Page oublié Mot de Passe . . . . . . . . . . . . . . . . . . . . . . . . 24

3.5.4 Page pour changer le mot de passe . . . . . . . . . . . . . . . . . . . 24

iii
 TABLE DES MATIÈRES

3.5.5 Page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.5.6 Page de questions générées . . . . . . . . . . . . . . . . . . . . . . . . 25

3.5.7 Page de questions enregistrées . . . . . . . . . . . . . . . . . . . . . . 26

3.5.8 Page de tableau de bord . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.5.9 Page pour la gestion des utilisateurs . . . . . . . . . . . . . . . . . . . 27

3.5.10 Page pour la gestion des quizzes . . . . . . . . . . . . . . . . . . . . . 27

3.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Conclusion Générale 29

References 29

iv
 TABLE DES FIGURES

1.1 Logo Technix Informatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Organigramme de la société . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1 Logo MERN Stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.2 Logo TECHBOT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.3 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.4 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.5 Diagramme de séquence pour l’authentification . . . . . . . . . . . . . . . . . 11

2.6 Diagramme de séquence pour Générer quiz . . . . . . . . . . . . . . . . . . . 12

2.7 Diagramme de séquence pour Gérer ses quizzes . . . . . . . . . . . . . . . . . 13

2.8 Diagramme de séquence pour Consulter Tableau de bord . . . . . . . . . . . . 14

2.9 Diagramme de séquence pour Gérer les comptes . . . . . . . . . . . . . . . . . 14

2.10 Diagramme de séquence pour Gérer les quizzes . . . . . . . . . . . . . . . . . 15

3.1 PC de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.2 Logo Visual studio code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.3 Logo MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.4 Logo Draw.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

v
 Table des figures

3.5 Logo Latex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.6 Logo Postman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.7 Logo React JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.8 Logo Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.9 Logo Node JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.10 Logo Express JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.11 Logo Gemini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.12 Logo GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.13 Page d’authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.14 Page d’inscription . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.15 Page oublié Mot de Passe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.16 Page pour changer le mot de passe . . . . . . . . . . . . . . . . . . . . . . . . 24

3.17 Page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.18 Page de questions générées . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.19 Page de questions enregistrées . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.20 Page de tableau de bord . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.21 Page pour la gestion des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . 27

3.22 Page pour la gestion des quizzes . . . . . . . . . . . . . . . . . . . . . . . . . 27

vi
 INTRODUCTION GÉNÉRALE

De nos jours, l’intelligence artificielle (IA) occupe une place prépondérante dans le monde
de la technologie, influençant divers aspects de notre quotidien. Les entreprises, qu’elles soient
informatiques ou non, cherchent à tirer parti de cette ressource pour développer des projets
innovants et valorisants. Ces avancées technologiques visent à améliorer les performances, tout
en intégrant des objectifs de développement durable, de rapidité et de fiabilité dans leurs projets.

Dans ce contexte, notre projet de stage s’inscrit parfaitement dans cette dynamique en utili-
sant l’intelligence artificielle Gemini pour transformer l’apprentissage en une action simple et
efficace grâce à des quiz interactifs et personnalisés.

Ce projet illustre l’impact concret de l’IA sur l’amélioration des outils pédagogiques, dé-
montrant ainsi l’importance de l’intégration de l’IA dans les solutions éducatives modernes.

Ce rapport synthétise le travail que j’ai réalisé durant mon stage de perfectionnement, il est
subdivisé en 3 grands chapitres : Le premier chapitre présentera l’organisme d’accueil TECH-
NIX INFORMATIQUE , quant au second sera consacré à présenter une étude préalable de
l’application web que j’ai développée avec les différents diagrammes de conception UML. Tan-
dis que le troisième chapitre exposera l’environnement matériel et logiciel que j’ai utilisé lors
de la réalisation de ce projet. Et finalement, je clôture mon rapport par une conclusion générale.

1
CHAPITRE 1

ETUDE DE L’ORGANISME DU STAGE

1.1 Introduction

Du 15/06/2024 au 15/07/2024 , j’ai effectué un stage de perfectionnement au sein de l’entre-

prise TECHNIX INFORMATIQUE . Cette société m’a offert un stage aussi riche en nouvelles
connaissances.

Dans ce premier chapitre, je vais d’abord présenter cette société idéaliste, en détaillant ses
services, puis je vais expliquer le sujet du projet proposé.

1.2 Présentation de l’organisme

Fondée en 2013 , Technix est une entreprise d’ingénierie agréée par l’État, qui opère dans
les secteurs du développement de logiciels scientifiques dédiés à l’éducation et aux entreprises.
Technix s’appuie sur des partenariats nationaux et internationaux et est composée d’un groupe
d’experts, d’ingénieurs et de consultants ayant fait la preuve de leur haute qualification dans le
domaine de l’ingénierie et de la gestion de projets.

F IGURE 1.1 – Logo Technix Informatique

2
 Chapitre 1. Etude de l’organisme du stage

1.3 Les Services De Société

Technix dispose d’une gamme de services flexibles selon la demande de leurs clients, cette
société idéaliste offre à ses clients des services largement riches pour assurer leur satisfaction :

— Développement Web : Couverture des applications web, mobiles et de bureau destinées

aux utilisateurs externes ou internes. Avec leurs développeurs qualifiés, Technix offre une
expérience dans différentes architectures et technologies pour le développement d’appli-
cations.
— Consultants en maintenance logicielle : En tant que société de conseil en logiciels agile,
Technix se concentre sur le maintien d’une équipe efficace composée d’ingénieurs hau-
tement qualifiés et expérimentés pour développer des solutions adaptées aux entreprises
de toutes tailles, dans divers secteurs d’activité. Avec une équipe dynamique aux compé-
tences variées, ils ont relevé presque tous les défis imaginables dans l’industrie et pos-
sèdent l’expérience nécessaire pour vous guider vers une solution efficace, performante
et couronnée de succès, répondant à vos attentes.
— UI/UX Design : Technix englobe les processus de conception de l’interface utilisateur
(UI) et de l’expérience utilisateur (UX) pour toute solution basée sur le web. Dans cha-
cun de leurs projets de conception web, Technix équilibre judicieusement la technologie,
l’esthétique visuelle et commerciaux, vous offrant des expériences en ligne rapides, per-
cutantes et convertissantes.
— Support et maintenance : Technix propose des services de support et de maintenance
orientés vers les résultats et rentables. Technix garantit :
— La satisfaction des exigences des clients et des critères de qualité.
— La flexibilité dans l’assemblage des packages de services et dans la tarification.
— Une expérience avec des technologies anciennes, mais principalement des techno-
logies de pointe.
— La possibilité d’une coopération à long terme sans risque d’interruption soudaine
des services.

3
 Chapitre 1. Etude de l’organisme du stage

1.4 Organigramme de l’organisme

F IGURE 1.2 – Organigramme de la société

1.5 Description de la structure concernée par le stage

Technix Informatique, reconnue par son expertise multidisciplinaire, se distingue particu-

lièrement dans le développement web. C’est précisément au sein de ce service que j’ai effectué
mon stage. Cette spécialisation souligne l’importance stratégique de ce domaine d’activité au
sein de l’entreprise et m’a permis d’acquérir des compétences approfondies dans le développe-
ment web au cours de mon stage.

1.6 Présentation de thème de stage

Technix excelle dans le développement de solutions web modernes et dynamiques, et l’uti-

lisation de la stack MERN (MongoDB, Express.js, React, Node.js) ainsi que Python constitue
un pilier essentiel de ses offres. Au cours de mon stage, ma mission était de développer une ap-
plication web utilisant la stack MERN pour générer des quiz interactifs et personnalisés nommé
« TechBot » permettant aux utilisateurs de générer des quizzes basés sur du contenu éducatif.

4
 Chapitre 1. Etude de l’organisme du stage

1.7 Conclusion

Technix m’a offert l’opportunité de découvrir des nouvelles technologies telle que le MERN
Stack en me donnant un aussi riche sujet de stage , je suis très reconnaissante à cette équipe
compétente.

Le prochain chapitre sera consacré à la définition d’une étude préalable approfondie, jetant
ainsi les bases nécessaires à la compréhension approfondie de notre démarche.

5
CHAPITRE 2

ETUDE PRÉALABLE

2.1 Introduction

Après avoir introduit Technix Informatique et fourni une vue d’ensemble du thème de mon
stage, ce chapitre sera consacré à une analyse préliminaire approfondie de mon projet de stage,
accompagnée de ses diagrammes de conception.

2.2 Description de l’existant

De nos jours, évaluer les compétences dans un sujet précis et à un niveau choisi n’est pas une
tâche aisée. Les formateurs, enseignants, étudiants, ou toute autre personne doivent rechercher
des questions et des tests à partir de diverses sources telles que des manuels, des documents
PDF, des fichiers Word, ou des notes personnelles. De plus, les systèmes de quiz existants
sont limités et standardisés, ne permettant pas une évaluation précise et efficace du niveau de
compétence dans un domaine spécifique.

2.3 Critiques de l’existant

La méthode traditionnelle de création et de gestion des quiz éducatifs comporte plusieurs

limitations et inconvénients majeurs :

• Temps Consommé : La collecte et l’organisation des questions à partir de différents do-

6
 Chapitre 2. Etude préalable

cuments nécessitent beaucoup de temps et d’efforts.

• Personnalisation Limitée : Trouver des quiz aux besoins spécifiques des personnes est
difficile, conduisant souvent à des quiz qui ne répondent pas aux besoins en termes de niveau
éducatif, de difficulté et de domaines de focus ect...

• Complexité de l’Évaluation du Niveau : les personnes doivent effectuer leur propre

évaluation manuellement, ce qui est un processus complexe et laborieux, il est difficile d’obtenir
une évaluation précise et cohérente des compétences.

• Perte de Données : Il existe un risque élevé de perdre les questions et les tests collectés
sur un sujet donné. L’absence de centralisation et de sauvegarde des données signifie que les
informations peuvent facilement être égarées ou oubliées, surtout lorsque les documents sont
dispersés entre différents formats et supports.

2.4 Solutions proposées

Pour relever ces défis, la solution proposée consiste à mettre en place une application web
utilisant l’intelligence artificielle Gemini et le stack MERN (MongoDB, Express.js, React,
Node.js).

Cette plateforme permettra aux utilisateurs de générer des quizzes personnalisés en spéci-
fiant le sujet, le niveau éducatif, le niveau de difficulté, le nombre de questions, et les domaines
de focus, tout en ayant la possibilité d’importer des fichiers pdf , word , texte , et images. Après
avoir répondu aux questions générées, les utilisateurs recevront un score pour évaluer leur ni-
veau de compétence. De plus, la plateforme offrira une interface intuitive pour sauvegarder,
rechercher, et supprimer les quizzes, assurant une gestion fluide et simple des contenus pour
une meilleure satisfaction des utilisateurs.

F IGURE 2.1 – Logo MERN Stack

7
 Chapitre 2. Etude préalable

2.5 Description détaillée de la solution finale

La solution finale que nous proposons est une application web exhaustive conçue pour ré-
pondre aux besoins spécifiques . Pour parvenir à l’objectif énoncé précédemment, j’ai suivi ces
étapes :

2.5.1 Préparer un logo pour l’application

La première étape cruciale de notre projet consiste à élaborer un logo distinctif avec ideo-
gram [1] pour la plateforme TECHBOT .

F IGURE 2.2 – Logo TECHBOT

2.5.2 Etude de besoin

Cette phase revêt une importance capitale car elle me permet d’obtenir une compréhension
approfondie et précise de ma solution.

Les besoins fonctionnels :

Les besoins fonctionnels sont ceux qui précisent ce que le système doit faire. En d’autres
termes, ils spécifient une fonction, un comportement ou une action que le système doit exécuter.

• Création de Quiz : Permettre aux utilisateurs de créer des quiz en remplissant un formu-
laire avec diverses options de personnalisation.

• Réponse et Évaluation : Offrir aux utilisateurs la possibilité de répondre aux questions

générées et de recevoir un score .

• Sauvegarde et Gestion des Quiz : Permettre aux utilisateurs de sauvegarder, rechercher

et supprimer leurs quiz.

• Interface Administrateur : Fournir une interface administrateur avec un tableau de bord

8
 Chapitre 2. Etude préalable

détaillé pour le suivi et la gestion des utilisateurs, des quiz, et des questions.

Les besoins non fonctionnels :

• Fiabilité : Garantir la fiabilité des questions générées et du système de sauvegarde des

quiz.

• Performance : Assurer des temps de réponse rapides, même lors du traitement de fichiers
volumineux (images, PDF, etc.), ainsi que la connexion avec un système extérieur .

• Sécurité : Assurer la sécurité des données utilisateur et des quiz sauvegardés.

• Convivialité et Accessibilité : Rendre l’interface utilisateur accessible et facile à utiliser

pour tous les types d’utilisateurs.

2.5.3 Conception UML de la solution

UML, ou Unified Modeling Language, est un langage de modélisation visuelle largement

utilisé dans le domaine de l’informatique et des systèmes d’information (SI). Il offre un moyen
standardisé de représenter graphiquement les différents aspects d’un système logiciel ou infor-
matique.

Identification des acteurs

• Administrateur : Cet acteur est responsable de la gestion globale du site. Il peut consulter
un tableau de bord et effectuer des tâches administratives pour assurer le bon fonctionnement du
site, comme consulter, supprimer, et rechercher des utilisateurs ainsi que consulter, supprimer,
et rechercher des quiz.

• Utilisateur : Un utilisateur peut s’authentifier, générer des quiz, enregister ,chercher et

supprimer des quiz .

Diagramme de cas d’utilisation

Les diagrammes de cas d’utilisation dépeignent les fonctionnalités globales et le périmètre

d’un système, en identifiant également les interactions entre le système et ses utilisateurs. Ils
mettent en lumière les actions accomplies par le système et la manière dont les utilisateurs
interagissent avec celui-ci, sans toutefois détailler le fonctionnement interne du système.

9
 Chapitre 2. Etude préalable

F IGURE 2.3 – Diagramme de cas d’utilisation

Diagramme de classe

Les diagrammes de classes éclairent la structure interne d’un système. En effet, ils décrivent
avec précision ses classes, ses attributs, ses opérations et les liens qui unissent ses objets.

10
 Chapitre 2. Etude préalable

F IGURE 2.4 – Diagramme de classe

Diagrammes de séquences

• Diagramme de séquence pour l’authentification

F IGURE 2.5 – Diagramme de séquence pour l’authentification

11
 Chapitre 2. Etude préalable

• Diagramme de séquence pour Générer quiz

F IGURE 2.6 – Diagramme de séquence pour Générer quiz

12
 Chapitre 2. Etude préalable

• Diagramme de séquence pour Gérer ses quizzes

F IGURE 2.7 – Diagramme de séquence pour Gérer ses quizzes

13
 Chapitre 2. Etude préalable

• Diagramme de séquence pour Consulter Tableau de bord

F IGURE 2.8 – Diagramme de séquence pour Consulter Tableau de bord

• Diagramme de séquence pour pour Gérer les comptes

F IGURE 2.9 – Diagramme de séquence pour Gérer les comptes

14
 Chapitre 2. Etude préalable

• Diagramme de séquence pour pour Gérer les quizzes

F IGURE 2.10 – Diagramme de séquence pour Gérer les quizzes

2.6 Conclusion

Dans ce chapitre, j’ai exposé une étude préalable de la solution que j’ai envisagée, détaillant
les étapes nécessaires à l’étude d’un projet. Ces étapes comprennent l’exploration des besoins,
l’élaboration d’une conception UML.

Dans le chapitre suivant, nous nous pencherons sur les détails techniques du développe-
ment de site web. Nous fournirons une description de l’environnement matériel et logiciel, ainsi
qu’une présentation des principales interfaces graphiques.

15
CHAPITRE 3

LA RÉALISATION

3.1 Introduction

Ce chapitre présente l’environnement matériel et logiciel que je vais utiliser lors de la réali-
sation de mon application avec ses principales interfaces graphiques.

3.2 Environnement matériel

Le matériel utilisé pour la réalisation de l’application web est mon ordinateur portable , Il a
comme caractéristiques :

Marque : Lenovo .

Processeur : Intel Core I3-1005G1 10é Génération, 1.20 Ghz Up To 3.4 Ghz.

Système d’opération : Windows 10.

Mémoire RAM : 4.0 Go.

Disque dur : 256 Go SSD.

Ecran : Ecran 15.6" HD LED.

16
 Chapitre 3. La réalisation

F IGURE 3.1 – PC de travail

3.3 Environnement logiciel

3.3.1 Visual Studio Code

Visual Studio Code est un éditeur de code source léger mais puissant qui s’exécute sur
votre ordinateur de bureau et il est disponible pour Windows, MacOs et Linux. Il est livré
avec une prise en charge intégrée de JavaScript, Type Script et 5.Node.js, et possède un riche
écosystème d’extensions pour d’autres langages et environnements d’exécution (comme C++,
C, Java, Python, PHP, Go, .NET). [2]

F IGURE 3.2 – Logo Visual studio code

3.3.2 MongoDB Compass

Pour la réalisation de l’application TECHBOT, j’ai utilisé une base de données NoSQL :
Une base de données NoSQL est une base de données “non relationnelle”. Il est possible d’y
stocker des données sous une forme non structurée, sans suivre de schéma fixe. Les jointures ne
sont plus nécessaires. Pour cela, j’ai choisi d’utiliser le serveur de base de données MongoDB.

MongoDB : MongoDB occupe la 5e place dans le classement des systèmes de gestion de

bases de données les plus populaires en mars 2017, tous types confondus, et la première place
pour les systèmes de gestion de bases de données NoSQL, Elle est utilisée pour le stockage

17
 Chapitre 3. La réalisation

de volumes massifs de données. Contrairement à une base de données relationnelle SQL tra-
ditionnelle, MongoDB ne repose pas sur des tableaux et des colonnes. Les données prennent
la forme de documents enregistrés eux-mêmes dans des collections, une collection contenant
un nombre quelconque de documents. Les collections sont comparables aux tables, et les do-
cuments aux enregistrements des bases de données relationnelles. Contrairement aux bases de
données relationnelles, les champs d’un enregistrement sont libres et peuvent être différents
d’un enregistrement à un autre au sein d’une même collection. Le seul champ commun et obli-
gatoire est le champ de clé principale ("id"). Par ailleurs, MongoDB ne permet ni les requêtes
très complexes standardisées, ni les JOIN, mais permet de programmer des requêtes spécifiques
en JavaScript.[3]

Au cours de la réalisation de mon application, j’ai utilisé mongoDB Compass c’est le client
GUI officiel développé par MongoDB.

F IGURE 3.3 – Logo MongoDB

3.3.3 Draw.io

Draw.io est une application gratuite en ligne, accessible via un navigateur (Protocol https)
qui permet de dessiner des diagrammes ou des organigrammes.[4]

F IGURE 3.4 – Logo Draw.io

18
 Chapitre 3. La réalisation

3.3.4 Latex

LaTeX est un langage et un système de composition de documents créé par Leslie Lamport
en 1983. Plus exactement, il s’agit d’une collection de macrocommandes destinées à faciliter
l’utilisation du « processeur de texte » TeX de Donald Knuth.[5]

F IGURE 3.5 – Logo Latex

3.3.5 Postman

Postman permet de construire et d’exécuter des requêtes HTTP, de les stocker dans un his-
torique afin de pouvoir les rejouer, mais surtout de les organiser en Collections. Cette classi-
fication permet notamment de regrouper des requêtes de façon « fonctionnelle » (par exemple
enchaînement d’ajout d’item au panier, ou bien un processus d’identification).[6]

F IGURE 3.6 – Logo Postman

3.4 Les Frameworks et les environnements de développe-

ment

3.4.1 React JS

React JS : React (aussi appelé React.js ou ReactJS) est une bibliothèque JavaScript libre
développée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter
la création d’application web monopage, via la création de composants dépendant d’un état et
générant une page (ou portion) HTML à chaque changement d’état.

19
 Chapitre 3. La réalisation

Grâce à React, il est facile de créer des interfaces utilisateurs interactives. Définissez des
vues simples pour chaque état de votre application, et lorsque vos données changeront, React
mettra à jour, de façon optimale, juste les composants qui en auront besoin.

F IGURE 3.7 – Logo React JS

3.4.2 Bootstrap

Bootstrap est un framework développé par l’équipe du réseau social Twitter. Proposé en
open source (sous licence MIT), ce framework utilisant les langages HTML, CSS et JavaScript
fournit aux développeurs des outils pour créer un site facilement. Ce framework est pensé pour
développer des sites avec un design responsive, qui s’adapte à tout type d’écran, et en priorité
pour les smartphones. Il fournit des outils avec des styles déjà en place pour des typographies,
des boutons, des interfaces de navigation et bien d’autres encore. On appelle ce type de frame-
work un "Front-End Framework".

F IGURE 3.8 – Logo Bootstrap

3.4.3 Node JS

Node.js est un environnement d’exécution JavaScript côté serveur, conçu pour créer des ap-
plications réseau évolutives. Construit sur le moteur JavaScript V8 de Google Chrome, Node.js
permet d’exécuter du code JavaScript en dehors d’un navigateur, ce qui en fait une solution

20
 Chapitre 3. La réalisation

idéale pour le développement de serveurs et d’applications backend. L’une des principales

caractéristiques de Node.js est son architecture asynchrone et orientée vers les événements,
qui permet de gérer un grand nombre de connexions simultanées avec une faible empreinte
mémoire. Cette approche non bloquante est particulièrement efficace pour les applications en
temps réel, comme les services de chat, les jeux en ligne, et les API qui nécessitent des mises
à jour instantanées. Node.js dispose également d’un vaste écosystème de modules et de biblio-
thèques via npm (Node Package Manager), facilitant le développement rapide et modulaire de
projets. Grâce à sa performance, sa flexibilité et sa capacité à utiliser JavaScript de bout en bout
(du client au serveur), Node.js est devenu un outil incontournable pour les développeurs web
modernes.

F IGURE 3.9 – Logo Node JS

3.4.4 Express JS

Express.js est un framework pour Node.js. Il fournit un ensemble robuste de fonctionna-

lités pour le développement d’applications web et mobiles. Avec Express.js. La simplicité et
la flexibilité d’Express.js permettent une gestion efficace des requêtes HTTP, des routes, des
middlewares et des modèles de réponse, tout en offrant la possibilité d’étendre ses capacités
grâce à une vaste collection de plugins et de modules tiers. Express.js est largement utilisé dans
le développement de projets backend, en raison de sa rapidité, de sa légèreté et de sa capacité à
s’intégrer facilement avec d’autres frameworks et bibliothèques JavaScript.

F IGURE 3.10 – Logo Express JS

21
 Chapitre 3. La réalisation

3.4.5 API Gemini

Gemini est un modèle de langage développé par Google, Il représente une avancée signifi-
cative dans le domaine de l’intelligence artificielle, capable de générer du texte, de traduire des
langues et d’effectuer de nombreuses autres tâches complexes.

Une API Gemini, quant à elle, constitue l’interface permettant à des développeurs d’inté-
grer les capacités de ce modèle dans leurs propres applications. En fournissant un ensemble de
règles et de protocoles bien définis, l’API Gemini offre la possibilité de créer des applications
innovantes en tirant parti des fonctionnalités avancées de ce modèle de langage.[7]

F IGURE 3.11 – Logo Gemini

3.4.6 GitHub

GitHub est un service web d’hébergement et de gestion de développement de logiciels,

utilisant le logiciel de gestion de versions Git.[8]

F IGURE 3.12 – Logo GitHub

22
 Chapitre 3. La réalisation

3.5 Principales interfaces graphiques

3.5.1 Page d’authentification

F IGURE 3.13 – Page d’authentification

3.5.2 Page d’inscription

F IGURE 3.14 – Page d’inscription

23
 Chapitre 3. La réalisation

3.5.3 Page oublié Mot de Passe

F IGURE 3.15 – Page oublié Mot de Passe

3.5.4 Page pour changer le mot de passe

F IGURE 3.16 – Page pour changer le mot de passe

24
 Chapitre 3. La réalisation

3.5.5 Page d’accueil

F IGURE 3.17 – Page d’accueil

3.5.6 Page de questions générées

F IGURE 3.18 – Page de questions générées

25
 Chapitre 3. La réalisation

3.5.7 Page de questions enregistrées

F IGURE 3.19 – Page de questions enregistrées

3.5.8 Page de tableau de bord

F IGURE 3.20 – Page de tableau de bord

26
 Chapitre 3. La réalisation

3.5.9 Page pour la gestion des utilisateurs

F IGURE 3.21 – Page pour la gestion des utilisateurs

3.5.10 Page pour la gestion des quizzes

F IGURE 3.22 – Page pour la gestion des quizzes

27
 Chapitre 3. La réalisation

3.6 Conclusion

Au sein de ce chapitre, j’ai mis en lumière les interfaces principales de mon projet, accom-
pagnant cette présentation par une justification approfondie de mon environnement de dévelop-
pement.

28
 CONCLUSION GÉNÉRALE

Au terme de cette expérience enrichissante au sein de l’entreprise TECHNIX INFORMA-

TIQUE, je tire des conclusions robustes quant à l’impact positif de mon stage sur mon dévelop-
pement professionnel et personnel.

Grâce à cette expérience, j’ai découvert de nouvelles technologies telles que le MERN
Stack, et j’ai compris l’importance de bien maîtriser et d’explorer l’intelligence artificielle pour
créer des projets innovants et marquants. Alors que la plupart des développeurs craignent ces
avancées technologiques, les développeurs intelligents sont ceux qui parviennent à manipuler
cette technologie et à la transformer en un outil pour concevoir des projets plus compétitifs et
avancés.

La réalisation de ce projet a non seulement consolidé mes compétences techniques, mais a

également façonné ma capacité à évoluer dans un environnement professionnel dynamique.

En résumé, cette expérience a été bien plus qu’une simple immersion dans le monde profes-
sionnel , elle a été une opportunité transformative qui a façonné ma vision du travail collaboratif
et renforcé mes compétences techniques.

29
 BIBLIOGRAPHIE

[1] https://ideogram.ai/t/explore
[2] https://fr.wikipedia.org/wiki/Visual_Studio_Code
[3] https://fr.wikipedia.org/wiki/MongoDB
[4] https://www.tice-education.fr/tous-les-articles-er-ressources/
articles-internet/819-draw-io-un-outil-pour-dessiner-des-diagrammes-en-ligne
[5] https://labmath.uqam.ca/presentation-de-la-classe-memoireuqam1-3/
logiciels-de-composition-latex/
[6] https://blog.webnet.fr/presentation-de-postman-outil-multifonction-pour-api-web/
[7] https://ai.google.dev/gemini-api/docs
[8] https://fr.wikipedia.org/wiki/GitHub

30