République Tunisienne

Ministère de l’enseignement
Supérieure et
De la recherche scientifique

Université de Jendouba

Institut supérieur des langues appliquées

Et d’informatique de Béja

Département Informatique

Rapport De Projet De Fin

D’année

Intitulé
Système de gestion des rapports

Elaboré par
Khouloud Mathlouthi

Spécialité : Génie Logiciel et Système d’Information (GLSI)

Encadrant : Anwer Kalghoum

Année universitaire : 2023/2024

 Dédicaces…

Je dédie ce travail à :

À mes chers parents, vous êtes la source inépuisable de sagesse, d'amour et de soutien dans
ma vie. Vos sacrifices, votre dévouement et votre amour inconditionnel sont une source
d'inspiration pour moi chaque jour. Vous m'avez appris les valeurs fondamentales de la vie,
et je suis fière de vous avoir comme modèles.

À mon cher frère, nous avons partagé tant de souvenirs, de rires et de moments précieux. Ta
présence dans ma vie est un cadeau inestimable, et je suis reconnaissante de t'avoir comme
compagnon de route. Les liens que nous partageons sont inestimables, et je chéris chaque
instant passé à tes côtés.

A mes chers amis, qui ont été une source de réconfort et de motivation pour moi dans les
moments difficiles, et je suis extrêmement reconnaissante de les avoir à mes côtés.

Merci d’être toujours là pour moi

 Remerciements…

Il était agréable pour moi de m’acquitter d’une dette de reconnaissance envers tous ceux,
dont la contribution au cours de ce stage, a favorisé son aboutissement.

Ainsi, je tiens vivement à remercier mon encadrant Mr. Anwer Kalghoum qui n’a ménagé
aucun effort pour m’aider et m’orienter le long de mon projet.

Je souhaite également exprimer ma gratitude envers Mr. RAMZI GUESMI et Mr. TAREK
GUESMI pour avoir permis que ce projet se réalise au sein de leur startup DataDoit, et pour
l'accès aux ressources nécessaires.

J’adresse mes profonds remerciements à toute la famille de la startup pour leur accueil
chaleureux et leur esprit d’équipe et en particulier à Mme. SIWAR GARROURI pour m'avoir
aidé à m'adapter efficacement au sein de cette startup dynamique.

Je tiens également à exprimer ma gratitude à toute l’équipe pédagogique de L’institut

Supérieur des Langues Appliquées et d’Informatique de Beja pour les divers enseignements
qui nous ont permis la réalisation de ce projet.

Enfin, je voudrais remercier les membres du jury qui ont pris la peine d’évaluer ce travail, en
espérant qu’ils trouveront la clarté et la motivation qu’ils attendent.

Merci à toutes et à tous

Table des matières
___________________________________________________________________

Introduction générale.............................................................................................................................. 1
Chapitre I : Cadre général du Projet ........................................................................................................ 3
Introduction......................................................................................................................................... 3
I. Organisme d’accueil : Data Doit .................................................................................................. 3
II. Etude préalable ........................................................................................................................... 4
1) Etude de l’existant ................................................................................................................... 4
2) Problématique ......................................................................................................................... 4
3) Solution proposée ................................................................................................................... 5
III. Méthodologie adoptée............................................................................................................ 6
1) Choix de la méthode................................................................................................................ 6
2) Le langage de modélisation ..................................................................................................... 7
Conclusion ........................................................................................................................................... 7
Chapitre 2 : Analyse et spécifications des besoins .................................................................................. 8
Introduction......................................................................................................................................... 8
I. Identification des acteurs ............................................................................................................ 8
II. Spécifications des besoins fonctionnels ...................................................................................... 8
III. Spécifications des besoins non fonctionnels ........................................................................... 8
IV. Diagramme de cas d’utilisation ............................................................................................. 10
1. Diagramme de cas d’utilisation ............................................................................................. 10
2. Description du cas d’utilisation « Ajouter Rapport » ............................................................ 10
3. Description du cas d’utilisation « Modifier Rapport » .......................................................... 10
1. Description du cas d’utilisation « Supprimer Rapport » ....................................................... 11
Conclusion ......................................................................................................................................... 11
Chapitre 3 : Conception ......................................................................................................................... 12
Introduction....................................................................................................................................... 12
I. Choix architecturaux.................................................................................................................. 12
II. Modélisation dynamique........................................................................................................... 13
1. Diagrammes de séquences.................................................................................................... 13
2. Diagrammes d’activités ......................................................................................................... 15
Conclusion ......................................................................................................................................... 16
Chapitre 4 : Réalisation ......................................................................................................................... 17
 Introduction....................................................................................................................................... 17
I. Environnement matériel ........................................................................................................... 17
II. Environnement logiciel .............................................................................................................. 18
1. Outils de développement ...................................................................................................... 18
2. Langages et Frameworks ....................................................................................................... 19
III. Les interfaces ......................................................................................................................... 21
Conclusion ......................................................................................................................................... 23
Conclusion générale .............................................................................................................................. 24
Bibliographie.......................................................................................................................................... 25
Liste des figures
__________________________________________________________________________

Figure 1: logo de la startup DataDoit ...................................................................................................... 3

Figure 2: Cycle de vie en cascade ............................................................................................................ 6
Figure 3: Langage de modélisation UML ................................................................................................. 7
Figure 4: Diagramme de cas d'utilisation .............................................................................................. 10
Figure 5: Architecture trois-tiers ........................................................................................................... 13
Figure 6: Diagramme de séquence du cas d'utilisation "Ajouter Rapport" .......................................... 13
Figure 7: Diagramme de séquence du cas d'utilisation "Modifier Rapport" ........................................ 14
Figure 8: Diagramme de séquence du cas d'utilisation "Supprimer rapport" ...................................... 15
Figure 9: Diagramme d'activité pour "ajouter rapport" ........................................................................ 16
Figure 10: Diagramme d'activité pour "modifier rapport" .................................................................... 16
Figure 11: Environnement Matériel ...................................................................................................... 17
Figure 12: Visual studio code ................................................................................................................ 18
Figure 13: GitLab ................................................................................................................................... 18
Figure 14: React Js ................................................................................................................................. 19
Figure 15: HTML .................................................................................................................................... 19
Figure 16: CSS ........................................................................................................................................ 20
Figure 17: JSX ......................................................................................................................................... 20
Figure 18: Node Js ................................................................................................................................. 20
Figure 19: Mongo DB ............................................................................................................................. 21
Figure 20: Interface de la liste des rapports .......................................................................................... 21
Figure 21: Interface du formulaire pour ajouter rapport ...................................................................... 22
Figure 22: Interface du formulaire pour modifier rapport .................................................................... 22
Liste des tableaux

Table 1: Description textuelle de l'ajout de rapport ............................................................................. 10

Table 2: Description textuelle de la modification du rapport ............................................................... 11
Table 3: Description textuelle de la suppression du rapport ................................................................ 11
Acronymes

IA Intelligence Artificielle

HTML HyperText Markup Language

CSS Cascading Style Sheets

JS JavaScript
 Introduction générale

Partant d'une réalité tangible et devant les défis concrets rencontrés par le tableau de bord
initial, notre projet d'amélioration s'est imposé comme une réponse nécessaire à des
lacunes clés. Un tableau de bord existant, dédié à la visualisation des résultats issus d'une
caméra alimentée par l'intelligence artificielle, bien qu'instrumental dans la présentation des
statistiques et des événements, présentait des limites significatives.

Notre intervention ciblée a pris la forme d'une nouvelle page dédiée, offrant un espace
dynamique pour gestion des rapports. Cette décision stratégique découle d'une
reconnaissance profonde de la nécessité de créer une boucle de rétroaction utilisateur
robuste, encourageant l'expression des utilisateurs face aux événements enregistrés. Le
constat initial, ancré dans une réalité où l'interaction utilisateur était limitée, a conduit à une
solution proactive visant à créer une expérience utilisateur plus immersive et participative.

Conjointement, nous avons pris en compte l'évolution constante des besoins des
utilisateurs, une dynamique inhérente à tout système informatique. Ainsi, la seconde facette
de notre initiative s'est tournée vers l'optimisation globale du tableau de bord, en le rendant
responsive. Cette double approche, conjuguant l'ajout de fonctionnalités cruciales et
l'adaptation aux attentes changeantes des utilisateurs, aspire à améliorer de manière
significative l'expérience globale, sans altérer l'équilibre fonctionnel bien établi du système
initial.

Nous structurons notre présent rapport comme suit :

- Nous avons entamé notre projet en définissant le cadre général du projet, nous procéderons
à la présentation de l’entreprise d’accueil ainsi que les résultats de notre étude de l’existant
et la méthodologie de travail adoptée.

1
- Le deuxième chapitre, est consacré à l’analyse et à la spécification des exigences, détaillera
les exigences fonctionnelles et non fonctionnelles que nous avons identifiées et présentons
les différents cas d’utilisation.
- Au cours du troisième chapitre, nous expliquons les différents aspects conceptuels.
- Dans le dernier chapitre, nous allons étudier l’implémentation de l’application, en décrivant
l’environnement matériel et logiciel.

2
 Chapitre I : Cadre général du Projet

Introduction
Dans ce chapitre, nous découvrirons le cadre général de notre projet en suivant ces étapes :
- Nous présentons l’entreprise d’accueil brièvement
- Nous étudierons l’existant du projet.
- Nous proposerons notre solution
- Nous ferons part de notre méthodologie à adopter.

I. Organisme d’accueil : Data Doit

Figure 1: logo de la startup DataDoit

DataDoit est une startup axée sur les technologies de l’information et l’apprentissage
automatique (machine learning).
Cette entreprise se spécialise dans la fourniture de solutions novatrices visant à aider les
entreprises à exploiter pleinement le potentiel des données et à améliorer leurs
performances.
Grâce à son expertise en IA , DataDoit développe des outils de pointe pour l’analyse de
données, la prévision des tendances et la prise de décisions éclairées.

3
En collaborant avec des clients issus de divers secteurs d’activité, DataDoit a su se forger
une solide réputation en transformant les données en informations précieuses, permettant
ainsi aux entreprises d’accroître leur efficacité et leur productivité.
Dotée d’une équipe hautement qualifiée et animée par une passion pour l’innovation,
DataDoit est bien positionnée pour devenir un leader dans le domaine des technologies de
l’information et de l’apprentissage automatique.

II. Etude préalable

Dans cette section, nous procédons à une analyse approfondie de l'état actuel du tableau de
bord existant, mettant en lumière ses insuffisances et limitations. En se basant sur cette
analyse, nous présentons une solution adéquate pour répondre aux besoins identifiés.

1) Etude de l’existant
Le tableau de bord actuel constitue une interface visuelle qui offre une représentation
graphique détaillée des résultats générés par une caméra alimentée par l'intelligence
artificielle. Cette plateforme informatique a été méticuleusement conçue dans le but
premier de présenter de manière exhaustive des statistiques élaborées à partir des données
recueillies par la caméra. En se penchant sur les métriques et les tendances résultant de
l'analyse des informations visuelles capturées, le tableau de bord sert comme une fenêtre
informatique perspicace permettant aux utilisateurs d'accéder à des données cruciales.
Outre cette fonction statistique, il s'emploie également à mettre en évidence de manière
percutante les événements enregistrés par la caméra. Cette mise en évidence vise à offrir
une compréhension rapide et détaillée des moments saillants capturés, apportant ainsi une
valeur ajoutée à l'utilisateur qui peut rapidement identifier et explorer des événements
spécifiques.

2) Problématique
La lacune centrale observée au sein de ce tableau de bord réside dans son incapacité à
fournir un mécanisme permettant aux utilisateurs d'exprimer des retours spécifiques sur les
événements capturés. Cette limitation significative crée une brèche dans la boucle de
communication entre le système et ses utilisateurs, entraînant une diminution notable de

4
l'efficacité opérationnelle globale et de la réactivité du système dans son ensemble. Cette
carence compromet la capacité du tableau de bord à s'adapter de manière agile aux besoins
et aux exigences changeants des utilisateurs. Face à cette réalité, il devient impératif de
mettre en œuvre une intervention ciblée afin de remédier à cette lacune spécifique. Cette
intervention est cruciale pour rétablir une communication bidirectionnelle efficace,
favorisant ainsi une expérience utilisateur plus participative et une gestion plus proactive
des données et des retours associés aux événements capturés par la caméra. En corrigeant
cette limitation, nous visons à renforcer non seulement la fonctionnalité du tableau de bord
mais aussi la satisfaction et l'engagement des utilisateurs, contribuant ainsi à une
amélioration significative de la performance globale du système.

3) Solution proposée
Afin de surmonter les défis inhérents aux limitations actuelles, nous proposons une solution
qui transcende les contraintes identifiées. Notre proposition repose sur l'introduction
stratégique d'une toute nouvelle page dédiée au sein du tableau de bord, offrant aux
utilisateurs une palette de fonctionnalités. Ces fonctionnalités incluent la capacité de créer,
visualiser, mettre à jour et supprimer des rapports liés aux événements enregistrés par la
caméra. Cette expansion fonctionnelle vise à transformer radicalement l'expérience
utilisateur en créant un espace d'interaction dynamique et participatif.
En effet, l'objectif fondamental de cette initiative est d'instaurer une contribution directe
des utilisateurs à la qualité des données du système. En permettant la création de rapports
personnalisés, la visualisation aisée de l'ensemble des informations, la mise à jour en temps
réel et même la suppression en cas de besoin, nous ouvrons une nouvelle ère d'interactivité
au sein du tableau de bord. Cette proposition, au-delà d'être une simple addition de
fonctionnalités, constitue une réponse stratégique aux lacunes identifiées, élevant ainsi le
niveau de participation et d'engagement des utilisateurs.
Au cœur de cette solution réside la mise en place d'un mécanisme de gestion des rapports
efficace et intuitif. Cette approche vise à remédier aux déficiences notées dans la
communication entre le système et les utilisateurs, en instaurant une boucle de rétroaction
plus robuste. La gestion agile des rapports, tant du côté de la création que de la mise à jour

5
ou de la suppression, s'inscrit dans une vision globale visant à améliorer la réactivité du
tableau de bord aux besoins changeants des utilisateurs.

III. Méthodologie adoptée

Dans cette section, nous citerons la méthodologie qui sera utilisé en justifiant la raison de
notre choix.

1) Choix de la méthode

Nous choisissons la méthode du cycle de vie en cascade.

Le modèle cascade est un modèle de gestion linéaire qui peut diviser le processus de
développement en plusieurs phases de projet consécutives. L’aspect le plus important dans
ce modèle c’est qu’aucune étape ne peut être commencée après avoir terminé l’étape
précédente. D’où on parle d’une succession séquentielle d’étapes.
Avantages :
Parmi les avantages de modèle cascade, nous pouvons citer :
— Vérification et validation après chaque étape
— Maintenance facile

Figure 2: Cycle de vie en cascade

6
 2) Le langage de modélisation

Pour pouvoir faciliter la création de l’application, nous utiliserons le langage de modélisation

UML.

Figure 3: Langage de modélisation UML

Le langage UML (Unified Modeling Language) a été développé dans le but d’être un langage
de modélisation visuelle largement utilisé, offrant une syntaxe et une sémantique riches. Il
est couramment utilisé dans l’architecture, la conception et la mise en œuvre de systèmes
logiciels complexes, permettant de représenter à la fois leur structure et leur
fonctionnement.[1].

Conclusion

Dans ce chapitre, nous avons exposé le contexte général du projet. Nous avons présenté
l’organisme d’accueil ainsi que la problématique et la solution proposée pour y remédier.
Dans le prochain chapitre, nous nous concentrerons sur la première étape préliminaire,
communément désignée sous le nom d'analyse et spécifications des besoins.

7
 Chapitre 2 : Analyse et spécifications des
besoins

Introduction

A la suite de l’étude de l’existant et la proposition d’une solution, nous découvrons

ensemble le projet plus en détails coté fonctionnalité pour mettre ce dernier dans son
contexte général.

I. Identification des acteurs

L’acteur est une entité abstraite extérieure au système qui initialise l’action.
Notre application, nous permet de distinguer un seul acteur :
• L’utilisateur : c’est l’acteur principal auquel notre application est dédiée afin de lui
fournir l’aide.

II. Spécifications des besoins fonctionnels

Les exigences fonctionnelles sont des tâches et des fonctions que le système doit exécuter.
En effet, ce dernier ne peut être mis en service qu’une fois les conditions remplies.
Utilisateur :

• Ajouter rapport
• Modifier rapport
• Supprimer rapport

III. Spécifications des besoins non fonctionnels

Parmi les exigences et les contraintes que notre système doit respecter, nous pouvons citer :

8
Maintenabilité :
• Stabilité : Il est impératif que l'application maintienne sa stabilité même lors de
modifications. Cela garantit une expérience utilisateur constante malgré les
évolutions du système.
• Modificabilité : En cas de modifications spécifiées, l'application doit permettre une
implémentation aisée tout en minimisant les erreurs potentielles susceptibles de
perturber son fonctionnement.
• Testabilité : Le produit doit être valide par rapport à la spécification des besoins .
Fonctionnalité :
1. Exactitude : Le résultat de notre projet doit être exact et convenable aux besoins
spécifiés.
• Sécurité : La sécurité des données est un impératif. L'application doit mettre en
place des mesures robustes pour protéger les informations confidentielles.
Utilisabilité :
2. Facilité d'apprentissage : L’application doit être ergonomique et bien organisé afin de
minimiser l'effort de l'utilisateur.
Portabilité :
3. Adaptabilité : L'application doit être adaptable à différents environnements de travail
et fonctionner efficacement sur divers systèmes d'exploitation, garantissant ainsi une
portabilité maximale.
Efficacité :
4. L'efficacité de l’application doit être optimale, garantissant une réponse rapide aux
actions de l'utilisateur, minimisant ainsi les temps de chargement et d'exécution des
opérations.
Fiabilité :
5. La fiabilité de l'application est primordiale. L’application doit être robuste,
minimisant les erreurs et assurant une expérience utilisateur sans interruption,
même dans des conditions d'utilisation intensives.

9
IV. Diagramme de cas d’utilisation
1. Diagramme de cas d’utilisation

Figure 4: Diagramme de cas d'utilisation

2. Description du cas d’utilisation « Ajouter Rapport »

Nom du cas d’utilisation : Ajouter rapport

Acteur(s) : Utilisateur
Objectif : Ajouter un rapport
Précondition (s) : Page des rapports sélectionnée
Postcondition(s) : Liste de rapports mise à jour
Scénario nominal : 1. L’utilisateur demande d’ajouter un rapport.
2. La plateforme affiche un formulaire.
[Link] dernier remplit le formulaire.
4.L’application ajoute le rapport et mettre à
jour la liste des rapports.
Table 1: Description textuelle de l'ajout de rapport

3. Description du cas d’utilisation « Modifier Rapport »

Nom du cas d’utilisation : Modifier rapport

10
 Acteur(s) : Utilisateur
Objectif : Modifier un rapport
Précondition (s) : Page des rapports sélectionnée
Postcondition(s) : Rapport modifié avec succès
Liste de rapports mise à jour
Scénario nominal : 1. L’utilisateur demande de modifier un
rapport.
2. La plateforme affiche un formulaire.
3. L’utilisateur modifie les données.
4. Le système modifie le rapport et mettre à
jour la liste des rapports.
Table 2: Description textuelle de la modification du rapport

1. Description du cas d’utilisation « Supprimer Rapport »

Nom du cas d’utilisation : Supprimer rapport

Acteur(s) : Utilisateur
Objectif : Supprimer un rapport
Précondition (s) : Page des rapports sélectionnée
Postcondition(s) : Rapport supprimé avec succès
Liste des rapports mise à jour
Scénario nominal : 1. L’utilisateur demande de supprimer un
rapport.
[Link] système supprimer le rapport et mettre à
ajour la liste des rapports.
Table 3: Description textuelle de la suppression du rapport

Conclusion
Au cours de cette phase, l’accent a été mis sur les besoins fonctionnels et non fonctionnels
de notre application afin de cerner les fonctionnalités que doit offrir notre solution. Dans le
prochain chapitre, nous donnons une description plus détaillée concernant la conception de
notre application.

11
 Chapitre 3 : Conception

Introduction
À la suite de l’analyse des besoins et leurs spécifications, nous découvrirons dans ce présent
chapitre tout d’abord l’architecture globale que nous utiliserons dans le développement de
notre projet.
Ensuite, nous verrons les diagrammes de séquence.

I. Choix architecturaux

Architecture trois-tiers

Une architecture en trois niveaux (ou tiers) est un modèle logique utilisé pour structurer une
application ou un système informatique. Il permet de séparer clairement les différentes
couches logicielles en trois niveaux distincts, chacun ayant un rôle défini. Cette approche
permet de modéliser et de représenter l’application comme une pile de trois couches,
chacune remplissant une fonction spécifique.[2]

— La couche de présentation des données est responsable de l’affichage et de

l’interaction avec l’utilisateur. [2]

— La couche métier offre des services applicatifs et métier à la couche présentation.

Pour fournir ces services, elle s'appuie, le cas échéant, sur les données du système,
accessibles au travers des services de la couche inférieure. En retour, elle renvoie à la
couche présentation les résultats qu'elle a calculés.[2]

— La couche de persistance des données concerne les données qui sont prévues pour
être stockées sur une période prolongée, voire de manière permanente.[2]

12
 Figure 5: Architecture trois-tiers

II. Modélisation dynamique

1. Diagrammes de séquences

Le diagramme de séquence est la représentation graphique des interactions entre les

acteurs et le système selon un ordre chronologique.

a) Diagramme de séquence du cas d’utilisation « Ajouter rapport »

Figure 6: Diagramme de séquence du cas d'utilisation "Ajouter Rapport"

13
Description :
1. L’utilisateur se connecte à l’application.
2. L’utilisateur choisit l’interface Events Reports.
3. Le système affiche la page Events Reports.
4. L’utilisateur demande d’ajouter un rapport en cliquant sur le bouton Add.
5. Le système affiche un formulaire.
6. L’utilisateur remplit le formulaire.
7. Si tous les champs sont remplis alors le rapport est ajouté à la base de données et la liste
des rapports et mise à jour. Sinon aucun rapport n’est ajouté.

b) Diagramme de séquence du cas d’utilisation « Modifier rapport »

Figure 7: Diagramme de séquence du cas d'utilisation "Modifier Rapport"

Description :
1. L’utilisateur se connecte à l’application.
2. L’utilisateur choisit l’interface Events Reports.
3. Le système affiche la page Events Reports.

14
4. L’utilisateur demande de modifier un rapport.
5. Le système affiche un formulaire contenant les anciennes données.
6. L’utilisateur modifie les données et clique sur le bouton Save Changes
7. Le système modifie le rapport dans la base de données.
8. La liste des rapports et mise à jour.

c) Diagramme de séquence du cas d’utilisation « Supprimer rapport »

Figure 8: Diagramme de séquence du cas d'utilisation "Supprimer rapport"

Description :
9. L’utilisateur se connecte à l’application.
10. L’utilisateur choisit l’interface Events Reports.
11. Le système affiche la page Events Reports.
12. L’utilisateur demande de supprimer un rapport.
13. Le système supprime le rapport.
14. La liste des rapports et mise à jour.

2. Diagrammes d’activités

15
 Figure 9: Diagramme d'activité pour "ajouter rapport"

Figure 10: Diagramme d'activité pour "modifier rapport"

Conclusion
Ce présent chapitre a présenté la description, la conception du système. Le prochain
chapitre se concentrera sur la phase de la réalisation.

16
 Chapitre 4 : Réalisation

Introduction

Dans ce dernier chapitre, nous présenterons le travail réalisé durant la phase

d’implémentation.

I. Environnement matériel

Pour réaliser ce projet, nous avons utilisé un ordinateur qui comporte ses caractéristiques
techniques suivantes :

Figure 11: Environnement Matériel

17
II. Environnement logiciel

1. Outils de développement

a) Visual studio code

Figure 12: Visual studio code

Visual studio code est un éditeur de code léger développé par Microsoft qui s’exécute sur
votre bureau et il est disponible pour Windows, MacOs et linux.[3]

b) GitLab

Figure 13: GitLab

Gitlab, c’est une plateforme permettant d’héberger et de gérer des projets web de A à Z.
Présentée comme la plateforme des développeurs modernes, elle offre la possibilité de

18
gérer ses dépôts Git et ainsi de mieux appréhender la gestion des versions de vos codes
sources.[5]

2. Langages et Frameworks

a) React Js

Figure 14: React Js

React est une bibliothèque JavaScript déclarative, puissante et souple, conçue pour la
construction d’interfaces utilisateur (UI). [4]

b) HTML

Figure 15: HTML

HTML est un langage de balisage. Son utilisation principale consiste à définir la structure du
contenu.[6]

c) CSS

19
 Figure 16: CSS

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade
». Le CSS correspond à un langage informatique permettant de mettre en forme des pages
web (HTML ou XML). [7]

d) JSX

Figure 17: JSX

JSX est une extension syntaxique de JavaScript, souvent utilisée avec React, qui permet de
décrire l’apparence de l’interface utilisateur (UI). En utilisant JSX, on peut générer des
"éléments" React. [8]

e) NodeJs

Figure 18: Node Js

20
[Link] est une plateforme open-source conçue pour exécuter des applications du côté
serveur qui fonctionne sur un seul thread et est compatible avec plusieurs plateformes.[9]

f) MongoDB

Figure 19: Mongo DB

MongoDB est une base de données de type NoSQL qui se caractérise par son orientation
vers les documents. Ses caractéristiques uniques incluent une flexibilité supérieure et des
performances élevées.[10]

III. Les interfaces

• Gestion des rapports

Figure 20: Interface de la liste des rapports

21
Figure 21: Interface du formulaire pour ajouter rapport

Figure 22: Interface du formulaire pour modifier rapport

22
 • Dashboard responsive

Conclusion
Ce chapitre a été consacré à l’environnement logiciel et matériel de la réalisation du projet
ainsi que les interfaces graphiques.

23
 Conclusion générale

En conclusion de ce projet d'amélioration du tableau de bord dédié à la visualisation des

données générées par une caméra alimentée par l'intelligence artificielle, notre démarche a
été guidée par une volonté constante d'enrichir l'expérience utilisateur et de pallier les
limitations inhérentes à la version initiale. L'analyse approfondie de l'existant a mis en
évidence des opportunités d'amélioration, notamment dans la gestion des rapports et le
recueil de retours utilisateur.

La mise en œuvre de fonctionnalités a ouvert de nouvelles perspectives d'interaction,

permettant aux utilisateurs de contribuer activement à la gestion des rapports associés aux
événements capturés. Cette évolution, axée sur l'efficacité opérationnelle et la réactivité du
système, représente une avancée significative dans l'évolution de ce tableau de bord.
La mise en oeuvre du développement web à travers l’utilisation de Visual Studio Code et du
framework React, nous a offert l’opportunité de nous former de manière autonome et de
maîtriser efficacement ces outils.

En somme, notre projet se distingue par son approche pragmatique, cherchant à combler les
lacunes identifiées tout en préservant l'équilibre fonctionnel du système initial. Les
améliorations apportées renforcent la pertinence du tableau de bord dans le contexte
dynamique de la surveillance et de la visualisation des données générées par l'intelligence
artificielle. Cette démarche témoigne de notre engagement envers l'innovation continue et
la recherche constante de solutions qui répondent aux attentes évolutives des utilisateurs et
du domaine en constante évolution de l'informatique.

24
 Bibliographie

[1] « Qu’est-ce que le langage UML (langage de modélisation unifié) ? » Lucidchart

Https://[Link]/pages/fr/langage-uml (Consulté le 18 octobre 2023).
[2] « Architecture trois tiers : définition et explications, » [Link].
Https://[Link]/definition/[Link] (Consulté le 20 octobre 2023).
[3] « Use [Link] for quick edits online ! » Https://[Link] (Consulté
le 20 octobre 2023).
[4] « Qu’est-ce que React ? » Https://[Link]/tutorial/[Link] (Consulté le
20 octobre 2023).
[5] « GitLab, c’est quoi ? » [Link]
(Consulté le 22 octobre 2023).
[6] « Les bases du HTML - Apprendre le développement web | MDN. »
Https://[Link]/fr/docs/Learn/Getting_started_with_the_web (Consulté le 24
octobre 2023).
[7] «CSS » Https://[Link]/glossaire/css (Consulté le 24 octobre 2023).
[8] « Introduction à JSX – React². » Https://[Link]/docs/[Link]
(Consulté le 24 octobre 2023).
[9] « Qu’est-ce que [Link] et pourquoi l’utiliser ? » Kinsta®. Https://[Link]/fr/base-de-
connaissances/qu-est-ce-que-node-js (Consulté le 26 octobre 2023).
[10] « MongoDB : tout savoir sur la base de données NoSQL orientée document, » Formation
Data Science | [Link]. Https://[Link]/mongodb (Consulté le 26
octobre 2023).

25