REPUBLIQUE TUNISIENNE UNIVERISTE DE SFAX

***********
FACULTE DE SCIENCE DE SFAX
MINISTERE DE L’ENSEIGNEMENT
SUPERIEUR ***********
ET LA RECHERCHE
SCIENCTIFIQUE DEPARTEMENT DE
L’INFORMATIQUE ET
DE COMMUNICATION

PROJET DE FIN D’ETUDES

présenté à

La faculté des sciences de sfax

en vue de l’obtention du
DIPLOME DE LICENCE EN :
SCIENCE DE L’INFORMATIQUE

par
MOHAMED AMINE YOUSFI

Cyber Security Maturity Assessment

Organisme d’accueil : Code Cooperation

M. Atef Boujelben Président

Mme. Raouia Bouabdallah Examinatrice
Mme. Sirine Rebai Siala Encadrante académique
M. Hamrouni Karim Encadrant professionnel

Année académique 2022/2023

 DEDICACES

C’est avec profonde gratitude et mots sincères, que je dédie ce

modeste travail À mes chers parents, ma source de vie, d’amour et
de force, qui m’ont toujours encouragé et motivé pour atteindre
mes objectifs. Merci pour vos sacrifices, votre patience et vos
prières. À ma sœur, ma source de tendresse et de sagesse. Merci
d’être toujours à mes cotés et se me supporter. À ma petite soeur,
ma source de joie et de bonheur. Mes sincères remerciements
s’adressent à toute ma grande famille pour son amour et son
appui. À mes chers amis, ma source d’inspiration. À tous ceux que
j’aime et qui ont toujours été présents dans ma vie. Merci du fond
du coeur.

À vous tous,
Je dédie ce travail.

Mohamed Amine

FACULTE DES SCIENCES SFAX Page i

 REMERCIEMENTS

Je tiens à exprimer ma profonde gratitude et ma reconnaissance envers toutes les personnes

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

Tout d’abord, je souhaite remercier sincèrement les responsables de l’entreprise "Code

Cooperation" de m’avoir offert l’opportunité précieuse d’effectuer mon stage de fin d’études
au sein de leur organisation. Leur soutien et leur confiance ont été essentiels pour la réussite de
ce projet.

Je tiens également à exprimer ma reconnaissance envers M. Karim Hamrouni et Mme

Sirine Rebai, mes encadrants, pour leurs conseils précieux et leur disponibilité tout au long de
ce projet. Leurs orientations et leurs directives ont été d’une grande aide pour moi.

Je saisis également cette occasion pour exprimer ma profonde gratitude envers toute l’équipe
pédagogique et administrative de la Faculté des Sciences. Leur engagement et leur dévouement
pour offrir une formation de qualité sont inestimables. Leur soutien continu a été une source de
motivation et d’inspiration tout au long de mes études.

Enfin, j’adresse mes remerciements les plus sincères aux membres du jury qui ont accepté
d’évaluer ce travail. Leur expertise et leur contribution sont d’une valeur inestimable. J’espère
que ce travail répondra à leurs attentes en termes de clarté et de synthèse.

Cette expérience m’a permis d’apprendre énormément et de développer des compétences

telles que la gestion du stress dans les moments difficiles et la capacité à persévérer malgré les
situations complexes. Je suis profondément reconnaissant envers tous ceux qui ont fait partie de
ce parcours et qui ont contribué à son succès.

Mes sincères remerciements à tous.

FACULTE DES SCIENCES SFAX Page ii

 Signature

Président

Signature :

FACULTE DES SCIENCES SFAX Page iii

 TABLE DES MATIÈRES

LISTE DES FIGURES viii

LISTE DES TABLEAUX ix

INTRODUCTION GÉNÉRALE 1

1 Etude Préalable et Contexte Géneral 2

1.1 Contexte Générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.2 Présentation de la société . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.3 Présentation du projet . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.1.4 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Analyse de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2.1 Etude de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2.2 Critique de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Spécification des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.1 Besoins fonctionnels : . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.2 Besoins non fonctionnels : . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4 Méthodologie du travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4.1 Choix de la méthodologie : . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4.2 Présentation de la Methode SCRUM . . . . . . . . . . . . . . . . . . . 9
1.4.3 Langage de modélisation . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2 Analyse et conception 11
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2 Identification des acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3 Backlog de produit : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4 Planification des sprints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

FACULTE DES SCIENCES SFAX Page iv

TABLE DES MATIÈRES

2.5 Diagramme de cas d’utilisation global . . . . . . . . . . . . . . . . . . . . . . 14

2.6 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.7 Description détaillée de diagramme de classe . . . . . . . . . . . . . . . . . . 17
2.8 Description détaillée de quelques cas d’utilisation . . . . . . . . . . . . . . . . 18
2.8.1 Cas d’utilisation «s’inscrire» . . . . . . . . . . . . . . . . . . . . . . . 18
2.8.2 Diagramme de séquence «s’inscrire» . . . . . . . . . . . . . . . . . . 20
2.8.3 Cas d’utilisation «s’authentifier» . . . . . . . . . . . . . . . . . . . . . 21
2.8.4 Diagramme de séquence «s’authentifier» . . . . . . . . . . . . . . . . 23
2.8.5 Cas d’utilisation «Assessment» . . . . . . . . . . . . . . . . . . . . . 24
2.8.6 Diagramme de séquence «Assessment» . . . . . . . . . . . . . . . . . 24
2.8.7 Cas d’utilisation «Gérer des membres» . . . . . . . . . . . . . . . . . 26
2.8.8 Diagramme de séquence «Gérer des membres» . . . . . . . . . . . . . 27
2.8.9 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3 Réalisation 28
3.1 Architecture du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.1.1 Architecture physique du projet . . . . . . . . . . . . . . . . . . . . . 29
3.1.2 Architecture logique du projet . . . . . . . . . . . . . . . . . . . . . . 30
3.2 Cadre de réalisation et choix . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.2.1 Environnement matériel . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.2.2 Environnement logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.2.2.1 Outils logiciels : . . . . . . . . . . . . . . . . . . . . . . . . 31
3.2.2.2 Langages de programmation . . . . . . . . . . . . . . . . . 33
3.2.2.3 Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.2.2.4 DigitalOcean . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2.2.5 Amazon S3 . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2.2.6 MYSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.2.2.7 Github Actions . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.2.2.8 Yaml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.4 Réalisation de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.4.1 Développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.5 Réalisation du site web et déploiement de la solution . . . . . . . . . . . . . . 45
3.5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.5.2 Réalisation du site web de CSMA . . . . . . . . . . . . . . . . . . . . 45
3.5.3 Déploiement de notre solution . . . . . . . . . . . . . . . . . . . . . . 45

FACULTE DES SCIENCES SFAX Page v

TABLE DES MATIÈRES

3.5.4 Choix de la méthode de déploiement . . . . . . . . . . . . . . . . . . . 45

3.5.5 Architecture du pipeline de déploiement . . . . . . . . . . . . . . . . . 46
3.5.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Conclusion et Perpectives 49

Nétographie i

ii

FACULTE DES SCIENCES SFAX Page vi

 LISTE DES FIGURES

1.1 Logo Code Cooperation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 figure d’un fichier excel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Méthodologie agile Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.4 UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1 Jira dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2 Cas d’utilisation globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.3 Diagramme de classes globale . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4 Diagramme de Cas d’utilisation s’inscrire . . . . . . . . . . . . . . . . . . . . 18
2.5 Diagramme de séquence du scénario s’inscrire . . . . . . . . . . . . . . . . . . 20
2.6 Diagramme de Cas d’utilisation d’authentification . . . . . . . . . . . . . . . . 21
2.7 Diagramme de Séquence d’authentification . . . . . . . . . . . . . . . . . . . 23
2.8 Cas d’utilisation de creation d’un Assessment . . . . . . . . . . . . . . . . . . 24
2.9 Cas d’utilisation de creation d’un Assessment . . . . . . . . . . . . . . . . . . 25
2.10 Diagramme de cas d’utlisation du scénario gérer les membres . . . . . . . . . . 26
2.11 figure de diagramme du séquence du cas «gérer les membres » . . . . . . . . . 27

3.1 Architecture physique globale du projet . . . . . . . . . . . . . . . . . . . . . 30

3.2 Architecture logique du projet . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.3 figure de registration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.4 figure de confirmation par mail . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.5 interface d’authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.6 interface pour permettre d’accéder pour créer un nouveau assessment . . . . . 40
3.7 interface de confirmation pour un nouveau assessment . . . . . . . . . . . . . 40
3.8 Interface pour créer un nouveau assessment . . . . . . . . . . . . . . . . . . . 41
3.9 interface pour télécharger et voir les documents téléchargés . . . . . . . . . . 41
3.10 interface de Maturity Rating . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.11 interface de Maturity Rating . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.12 interface de Maturity Rating . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

FACULTE DES SCIENCES SFAX Page vii

LISTE DES FIGURES

3.13 interface de la liste des membres . . . . . . . . . . . . . . . . . . . . . . . . . 44

3.14 interface d’ajout d’un nouveau membre . . . . . . . . . . . . . . . . . . . . . 44
3.15 Architecture de pipeline de déploiment . . . . . . . . . . . . . . . . . . . . . 47
3.16 Interface des secrets de GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.17 Interface de déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

FACULTE DES SCIENCES SFAX Page viii

 LISTE DES TABLEAUX

TABLE 1.1 : Comparaison des méthodologies........................................................................ 9

TABLE 2.1 : Backlog du produit CSMA.................................................................................. 22
TABLE 2.2 : Tableau des environnements logiciels .................................................................27
TABLE 3.1 : Cas d’utilisation pour l’authentication..................................................................37

FACULTE DES SCIENCES SFAX Page ix

 INTRODUCTION GÉNÉRAL

L’audit joue un rôle crucial pour les entreprises, leur permettant d’évaluer leur performance
et de garantir leur conformité aux normes en vigueur. Cependant, la réalisation de ces évaluations
peut souvent être fastidieuse et chronophage, notamment lorsqu’elles sont effectuées manuellement
à l’aide de fichiers Excel.

C’est pourquoi nous avons développé une plateforme d’automatisation complète de cette
tâche. Notre solution vise à simplifier et optimiser le processus, en éliminant les erreurs humaines
et en fournissant une analyse plus précise et détaillée des résultats.

Grâce à notre plateforme, les entreprises peuvent effectuer leurs évaluations de manière plus
efficace et efficiente. Les fonctionnalités automatisées réduisent les efforts nécessaires, tandis
que l’analyse approfondie des données fournit des informations pertinentes pour améliorer la
performance et assurer la conformité.

Nous espérons que ce projet permettra aux entreprises de réaliser leurs évaluations de manière
plus efficace et précise, tout en minimisant les coûts et les efforts nécessaires à cette tâche
importante.

Notre rapport se compose de trois chapitres qui décrivent le travail accompli tout au long
de notre stage : le premier chapitre intitulé Etude Préalable et Contexte Générale , présente
l’organisme d’accueil, le projet et l’étude de l’existant .Le deuxième chapitre intutilé Analyse et
Conception s’intéressera à la préparation de l’environnement de travail de développement .Le
troisieme chapitre intitulé Réalisation sera dédié à l’espace administratif . Nous clôturerons, ce
rapport par une conclusion générale.

FACULTE DES SCIENCES SFAX Page 1

Chapitre

1
Etude Préalable et Contexte Géneral

Sommaire
1.1 Contexte Générale . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.2 Présentation de la société . . . . . . . . . . . . . . . . . . . . . 3
1.1.3 Présentation du projet . . . . . . . . . . . . . . . . . . . . . . . 4
1.1.4 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Analyse de l’existant . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2.1 Etude de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2.2 Critique de l’existant . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Spécification des besoins . . . . . . . . . . . . . . . . . . . . . . 7
1.3.1 Besoins fonctionnels : . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.2 Besoins non fonctionnels : . . . . . . . . . . . . . . . . . . . . . 7
1.4 Méthodologie du travail . . . . . . . . . . . . . . . . . . . . . . . 8
1.4.1 Choix de la méthodologie : . . . . . . . . . . . . . . . . . . . . 8
1.4.2 Présentation de la Methode SCRUM . . . . . . . . . . . . . . . 9
1.4.3 Langage de modélisation . . . . . . . . . . . . . . . . . . . . . . 10
1.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

FACULTE DES SCIENCES SFAX Page 2

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

1.1 Contexte Générale

1.1.1 Introduction

Ce chapitre est dédié à l’établissement du contexte général de notre projet. Nous commençons
par présenter l’organisme d’accueil, Code Cooperation, ainsi que la méthodologie choisie pour
sa réalisation, après avoir décrit la problématique à résoudre. Ensuite, nous nous intéressons
à l’analyse et à l’évaluation des solutions existantes avant de proposer notre propre solution.
Ce projet s’inscrit dans le cadre de la préparation d’un projet de fin d’études visant à obtenir
un diplôme en génie logiciel de la faculté des Sciences de Sfax. Il a été réalisé au sein de
l’entreprise Code Cooperation sur une période de 4 mois.

1.1.2 Présentation de la société

CodeCooperation[1] est une société basée à Berlin et à Tunis, spécialisée dans les services
et le conseil en informatique. Contrairement aux autres sociétés de développement de logiciels,
CodeCooperation se distingue par son concept novateur qui consiste à offrir un support de Chief
Technical Officer (CTO) aux startups et aux entreprises, ainsi qu’un développement évolutif à
long terme. Ils sont responsables du développement de leurs propres logiciels, en s’appuyant sur
les compétences techniques et personnelles de jeunes talents tunisiens autonomes et créatifs. Les
principales activités de CodeCooperation comprennent le soutien en tant que cofondateur pour
les jeunes entreprises avec de nouvelles idées, la conception et le développement d’applications
web ou mobiles personnalisées et de haute qualité en utilisant les dernières technologies.

F IGURE 1.1: Logo Code Cooperation

FACULTE DES SCIENCES SFAX Page 3

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

1.1.3 Présentation du projet

Notre projet consiste à recevoir et réaliser une application web dédiée aux entreprises ,
une solution d’audit automatisée conçue pour remplacer les fastidieux processus manuels basés
sur les fichiers Excel. Grâce à notre application, les entreprises peuvent dire adieu aux tâches
chronophages et propices aux erreurs humaines. Notre technologie avancée collecte les données
en temps réel, les analyse selon des règles d’audit préconfigurées et génère des rapports précis
et personnalisables. En automatisant l’audit, nous offrons une efficacité accrue, des audits plus
fiables et une optimisation des ressources.

1.1.4 Problématique

À l’ère de la transformation numérique et de l’évolution des pratiques commerciales, l’audit

des entreprises est confronté à des défis croissants en termes d’efficacité, de précision et de
conformité. Les méthodes traditionnelles d’audit manuel, notamment l’utilisation de fichiers
Excel, sont souvent fastidieuses, sujettes aux erreurs humaines et limitées dans leur capacité
à fournir des informations approfondies sur la performance globale des entreprises. Dans ce
contexte, comment l’adoption d’une plateforme d’automatisation complète peut-elle simplifier
et optimiser le processus d’audit, en éliminant les erreurs humaines, en améliorant l’efficacité
opérationnelle et en fournissant une analyse approfondie des données pour renforcer la conformité
aux normes, faciliter la prise de décision éclairée et stimuler l’amélioration continue des performances
organisationnelles ? En permettant l’automatisation des tâches répétitives et l’intégration des
données provenant de différentes sources, cette plateforme offre aux auditeurs la possibilité de
se concentrer sur des tâches à plus forte valeur ajoutée, tout en fournissant des informations
pertinentes et en temps réel pour une évaluation plus précise de la performance. De plus,
en exploitant les capacités de l’intelligence artificielle et de l’apprentissage automatique, elle
peut détecter les anomalies, identifier les tendances et les risques potentiels, offrant ainsi une
approche proactive de l’audit. Dans cette perspective, comment cette solution d’automatisation
peut-elle permettre aux entreprises d’optimiser leurs processus d’audit, de garantir une conformité

FACULTE DES SCIENCES SFAX Page 4

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

rigoureuse aux normes en vigueur et de stimuler une culture d’amélioration continue axée sur
l’excellence opérationnelle et la création de valeur durable ?

1.2 Analyse de l’existant

Au début de chaque de projet, il est nécessaire de faire une étude des solutions existantes
dans le marché pour mieux comprendre les besoins et maintenir l’aspect innovateur du projet.
Dans une première partie, nous décrivons les différentes solutions existantes. Puis, nous nous
intéressons à comparer ces produits et critiquer chacun .

1.2.1 Etude de l’existant

L’étude de l’existant permet de déterminer les points faibles et les points forts d’un produit
actuel pour pouvoir déterminer les besoins du client, en vue d’en prendre en considération
lors de la conception et la réalisation de notre application. Dans cette section, nous présentons
une analyse de quelques exemples d’applications marchands. Ensuite, nous formulerons une
solution de la problématique.

- Audit par fichier excel : L’audit par fichier Excel désigne l’utilisation de fichiers Excel
pour effectuer des évaluations et des analyses de données dans le cadre d’un processus d’audit.
Il s’agit d’une méthode manuelle où les auditeurs saisissent, organisent et analysent les données
d’audit à l’aide de feuilles de calcul Excel. Il convient de noter que l’audit par fichier Excel peut
être une solution temporaire ou adaptée aux petites échelles d’audit, mais pour des audits plus
vastes ou plus complexes, l’utilisation d’applications spécialisées d’audit automatisé peut offrir
des avantages supplémentaires en termes d’efficacité, de précision et de génération de rapports.

FACULTE DES SCIENCES SFAX Page 5

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

F IGURE 1.2: figure d’un fichier excel

1.2.2 Critique de l’existant

Après avoir étudié les solutions précédentes, nous présentons dans la suite une analyse
comparative illustrée par le tableau :

Nom de la solution CSMA Excel Sheets

Temps requis ! 7
précision ! 7
risque d’erreur humain ! 7
traçabilité ! 7
capacité de détection d’erreurs complexes ! 7
TABLE 1.1: etude comparative entre les deux traveaux étudiés

A l’aide de la présente étude du solution existante, nous avons réussi à cerner les insuffisances
de l’existant.

FACULTE DES SCIENCES SFAX Page 6

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

1.3 Spécification des besoins

1.3.1 Besoins fonctionnels :

Dans la suite, nous définissons les besoins fonctionnels de notre application.

— Le système doit permettre aux utilisateurs de :

- S’inscrire et se connecter

- Modifier son propre profil

- Gérer Assessment

- Consulter ses propres Assessments

- Modifier son propre Assessment

— Le système doit permettre aux admines de :

- S’inscrire et se connecter

- Modifier son propre profil

- Gérer Assessment

- Consulter ses propres Assessments

- Modifier son propre Assessment

- Ajouter des nouveaux membres

- consulter la liste des memebres

- Gérer les membres

- Contacter les membres

1.3.2 Besoins non fonctionnels :

Pour assurer le bon fonctionnement de notre système, il faut prendre en considération des
contraintes. Nous avons ensuite énoncé les exigences considérées comme étant les plus importantes

FACULTE DES SCIENCES SFAX Page 7

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

pour le projet :
— La sécurité : Assurer une meilleure sécurité d’accès à un compte en passant par une étape
d’authentification, mais aussi protéger les données confidentielles de nos clients
— L’ergonomie :Les interfaces de notre solution doivent être compréhensibles et conviviales
— Maintenabilité : L’architecture de l’application devrait soutenir son extensibilité et son
maintenance
— Performance : La solution devrait être rapide afin de réduire le temps de réaction.

1.4 Méthodologie du travail

1.4.1 Choix de la méthodologie :

Notre équipe a dû choisir entre des méthodes classiques et agiles. Une gestion classique est
une méthode prédictive caractérisée par le découpage séquentiel et itératif du cycle du projet.
Donc, tous les besoins doivent être définis au début de réalisation. En appliquant cette méthode,
l’équipe doit suivre le cahier des charges pour livrer le produit dans sa version finale. En effet,
ce manque de flexibilité et l’absence d’interaction avec le client peut affecter l’anticipation aux
changements et aux imprévus pendant l’exécution et impliquer des retards et coûts supplémentaires
dans le cas de déception du client. Dans le cas d’une méthode agile, le projet est divisé en
sous-projets avec des objectifs à court terme pour laisser la place aux changements et imprévus.
Contrairement à la méthode traditionnelle, l’agilité offre une grande flexibilité aux changements
du client. Elle privilégie donc sa satisfaction et l’interaction avec lui. En effet, cette méthodologie
propose :
— Des solutions opérationnelles
— Une collaboration avec les clients
— La réponse rapide aux changements. Pour bénéficier de la flexibilité et l’interaction du client,
Code Cooperation favorise les méthodes agiles que avons utilisé durant la réalisation de ce
projet.

FACULTE DES SCIENCES SFAX Page 8

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

1.4.2 Présentation de la Methode SCRUM

La méthode agile Scrum vise à définir un cadre avec des rôles qui sont clairs et précis
découpés en petites itérations pour faciliter la mise en oeuvre de projets complexes. Un tel
cadre se fonde sur l’adaptabilité, l’inspection et la transparence .
Un projet Scrum est rythmé par un ensemble d’itérations définies avec précision et limitées
dans le temps nommés sprints . Un sprint peut durer de 1 à 4 semaines au cours desquelles nous
avons une version du produit utilisable selon la liste d’objectifs définis à son début. Comme
illustré dans la figure 1.3, la méthode scrum définit trois rôles principaux :

F IGURE 1.3: Méthodologie agile Scrum

— Product Owner : C’est le représentant du client qui est responsable de traduire ses
besoins pour créer, planifier, valider les sprints

— Scrum Master : C’est un membre de l’équipe qui assure le contrôle du bon déroulement
du projet et facilite le travail de l’équipe de développement

— Équipe de développement : qui englobe les membres responsables de livrer le travail

demandé pour chaque sprint avec un haut niveau de qualité. Dans notre projet, notre encadrant
est le scrum master, un membre de l’équipe a joué le rôle de product owner et notre équipe de
développement est composée de développeurs, de testeurs, un designer . Après avoir présenté
globalement notre projet en décrivant l’organisme d’accueil, la problématique puis la méthodologie
adoptée, nous passons à l’étude préalable de ce projet.

FACULTE DES SCIENCES SFAX Page 9

CHAPITRE 1. ETUDE PRÉALABLE ET CONTEXTE GÉNERAL

1.4.3 Langage de modélisation

Après le choix de la méthodologie de travail, nous avons besoin de fixer le langage de

modélisation adéquat avec la méthodologie adoptée. Ainsi, nous avons choisi UML, acronyme
anglais pour ”Unified Modeling Language”. C’est un langage visuel composé d’un ensemble de
diagrammes. Ces diagrammes donnent chacun une vision différente du projet a réalisé. Il nous
fournit ainsi une collection de formes pour représenter le logiciel à développer : fonctionnement,
mise en route. Ainsi, il nous permet de décrire de façon visuelle et graphique l’ensemble des
besoins nécessaires des solutions fonctionnelles et techniques de notre projet .

F IGURE 1.4: UML

1.5 Conclusion

Dans le chapitre précédent, nous avons consacré notre attention à une étape fondamentale :
décrire avec minutie le contexte de notre projet. À travers l’utilisation du cadre du projet, nous
avons présenté la problématique et effectué une analyse approfondie des différentes solutions
existantes. Nous avons également dévoilé la méthodologie de travail adoptée, ainsi que le
langage de modélisation utilisé pour notre étude. En entamant le prochain chapitre, nous nous
plongerons dans la phase de l’analyse et de la conception, où nous allons développer et peaufiner
nos idées avec précision.

FACULTE DES SCIENCES SFAX Page 10

CHAPITRE 2. ANALYSE ET CONCEPTION

Chapitre

2
Analyse et conception

Sommaire
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2 Identification des acteurs . . . . . . . . . . . . . . . . . . . . . . 12
2.3 Backlog de produit : . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4 Planification des sprints . . . . . . . . . . . . . . . . . . . . . . 14
2.5 Diagramme de cas d’utilisation global . . . . . . . . . . . . . . 14
2.6 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . 16
2.7 Description détaillée de diagramme de classe . . . . . . . . . . 17
2.8 Description détaillée de quelques cas d’utilisation . . . . . . . 18
2.8.1 Cas d’utilisation «s’inscrire» . . . . . . . . . . . . . . . . . . . . 18
2.8.2 Diagramme de séquence «s’inscrire» . . . . . . . . . . . . . . . 20
2.8.3 Cas d’utilisation «s’authentifier» . . . . . . . . . . . . . . . . . 21
2.8.4 Diagramme de séquence «s’authentifier» . . . . . . . . . . . . . 23
2.8.5 Cas d’utilisation «Assessment» . . . . . . . . . . . . . . . . . . 24
2.8.6 Diagramme de séquence «Assessment» . . . . . . . . . . . . . . 24
2.8.7 Cas d’utilisation «Gérer des membres» . . . . . . . . . . . . . . 26
2.8.8 Diagramme de séquence «Gérer des membres» . . . . . . . . . 27
2.8.9 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

FACULTE DES SCIENCES SFAX Page 11

CHAPITRE 2. ANALYSE ET CONCEPTION

2.1 Introduction

Dans le chapitre précédent, nous avons abordé la sélection de la méthode Scrum. À présent,
nous entamerons la phase la plus captivante de cette méthodologie, connue sous le nom de
"phase d’analyse et de conception". Au cours de ce chapitre, nous examinerons en détail la
conception, en commençant par l’identification des acteurs, la création du backlog du produit
et des cas d’utilisation, ainsi que la présentation des diagrammes de classes et de séquences .

2.2 Identification des acteurs

Pour notre solution, nous identifions les acteurs suivants :

Les entreprises : Ce sont les principaux utilisateurs de l’application web. Elles bénéficient
de l’automatisation de leurs processus d’audit, de rapports précis et personnalisables, d’une
efficacité accrue, de audits plus fiables et d’une optimisation des ressources.

Les administrateurs système : Ils sont responsables de la gestion des utilisateurs, de la

sécurité et de la maintenance de l’infrastructure de l’application web.

Ces acteurs représentent une liste de base et pourraient être complétés en fonction des
besoins spécifiques de votre projet.

2.3 Backlog de produit :

Le backlog du produit est l’artefact essentiel de la méthodologie Scrum qui est défini par
un ensemble de critères fonctionnels ou techniques. Ce dernier, renforce l’organisation et la
collaboration et maintient chacun en ligne avec les attentes et les objectifs.
Les user stories du projet se présentent comme suit :

FACULTE DES SCIENCES SFAX Page 12

CHAPITRE 2. ANALYSE ET CONCEPTION

— User story : Il s’agit d’une fonctionnalité du système à développer traduite en fonction

du langage utilisateur. Elle est écrite sous la forme suivante :
En tant que <qui> je veux <tâche> afin de < résultat>
— Estimation : C’est le coût de réalisation par jour, qui assure le suivi de la planification ;
— Priorité : Il s’agit de l’ordre des priorités fixé par le Product Owner pour une fonctionnalité
( il est compris entre 1 et 4 avec une priorité majeure pour la valeur 1).

Le backlog relatif à notre produit est illustré par la figure 2.1 suivante :

F IGURE 2.1: Jira dashboard

FACULTE DES SCIENCES SFAX Page 13

CHAPITRE 2. ANALYSE ET CONCEPTION

2.4 Planification des sprints

A ce stade, après avoir fixé les grandes fonctionnalités, nous pouvons passer à la phase de
planification. Cette étape permet de repartir le travail en question en sprints. Avec nos échanges
durant les réunion de planification, nous avons réussi à évaluer la complexité des tâches et de
proposer des différentes perspectives et visions.
Dans ce qui suit, nous présentons la planification prévue des sprints avec le tableau 2.1 suivant :

Nom du Sprint Date de début Date de fin

Sprint 1 :Réalisation de la partie
10 / 02 / 2023 25 / 02 / 2023
s’inscrire et authentification
Sprint 2 : Réalisation de la partie
26 / 02 / 2023 26 / 03 / 2023
du création d’un assessment
Sprint 3 : Réalisation de la partie
27 / 03 / 2023 27 / 04 / 2023
calcul de résultat et visualisation du dashboard
Sprint 4 : Réalisation de la partie
01 / 05 / 2023 16 / 05 / 2023
du Gérer profil et Assessment
TABLE 2.1: Plannification des sprints

2.5 Diagramme de cas d’utilisation global

Dans le but de modéliser les différentes fonctionnalités de ce système, nous avons utilisé le
langage UML et plus précisément le diagramme des cas d’utilisation.
Ce type de diagramme sert à :
— Modéliser les grandes fonctionnalités en question
— Présenter les différentes interactions entre le système et ses acteurs.

Cette figure illustre un diagramme de cas d’utilisation général qui décrit les fonctionnalités
pour chaque acteur.

FACULTE DES SCIENCES SFAX Page 14

CHAPITRE 2. ANALYSE ET CONCEPTION

F IGURE 2.2: Cas d’utilisation globale

FACULTE DES SCIENCES SFAX Page 15

CHAPITRE 2. ANALYSE ET CONCEPTION

2.6 Diagramme de classe

F IGURE 2.3: Diagramme de classes globale

Dans la figure 2.3 nous présentons plus de détails sur les classes impliquées dans notre
solution.

FACULTE DES SCIENCES SFAX Page 16

CHAPITRE 2. ANALYSE ET CONCEPTION

2.7 Description détaillée de diagramme de classe

TABLE 2.2: tableau de description de diagramme de classe

Nom de la classe Déscription

Cette classe représente
User
l’utilisateur du plateforme
Cette classe représente
Role
le rôle que l’utilisateur peut prendre.
cette classe représente
Assessment
l’assessment qui va être crée par l’utilisateur
Cette classe contient
Role
le type de role que l’utilisateur peut prendre
Cette classe représente
Comment
le commentaire que l’utlisateur peut écrit pour une question
Cette classe contient
Response
les réponses d’un utilisateur pour un assessment
Cette classe contient
Groupe
les différents questions d’un assessment
Cette classe contient
Option
les différents options qu’une question peut prendre
Cette classe représente
Question
la liste des questions dans un assessment
Cette classe représente
File
les fichiers qui sont téléchargés par l’utilisateur

ce tableau présente la description textuelle du diagramme de classe en plus de détails .

FACULTE DES SCIENCES SFAX Page 17

CHAPITRE 2. ANALYSE ET CONCEPTION

2.8 Description détaillée de quelques cas d’utilisation

Dans la partie présente, nous mettons l’accent sur l’aspect dynamique du système. Pour
décrire quelques scénarios importants du dashboard client, nous présentons dans ce qui suit un
diagrammes de séquence et un diagramme de cas d’utlisation .

2.8.1 Cas d’utilisation «s’inscrire»

F IGURE 2.4: Diagramme de Cas d’utilisation s’inscrire

L’objectif de ce cas d’utilisation est de permettre aux utilisateurs de créer un compte sur la
plateforme, en incluant une étape de confirmation par e-mail pour valider leur adresse e-mail
et activer leur compte. Cette méthode de confirmation par e-mail est couramment utilisée pour
garantir l’authenticité des informations fournies par les utilisateurs et prévenir les abus.

FACULTE DES SCIENCES SFAX Page 18

CHAPITRE 2. ANALYSE ET CONCEPTION

TABLE 2.3: Description textuelle du cas d’utilisation « s’inscrire »

Ce cas d’utilisation offre une méthode fiable pour créer des comptes
utilisateur tout en garantissant que les adresses e-mail sont valides
Objectif
et vérifiées. Cela contribue à renforcer la sécurité et l’intégrité des
données de la plateforme.

Acteur Utilisateur : La personne qui souhaite créer un compte sur la plateforme.

L’utilisateur a accès à une adresse e-mail valide.

Pré condition
L’utilisateur a accès à un navigateur web à l’application correspondante

Le compte utilisateur est créé et activé avec succès.

Post condition
l’interface sera chargée

- L’utilisateur accède à la page d’inscription sur la plateforme.

- L’utilisateur fournit les informations requises pour créer un compte,
telles que le firstname, lastname...
- L’utlisateur soumet le formulaire d’inscription
Scénario normal - Le système vérifie les informations fournies par l’utilisateur.
- Le système génère un lien de confirmation unique et l’associe au compte créé
- L’utlisateur clique sur le lien de confirmation pour activer le compte
- L’utilisateur peut désormais se connecter à la plateforme en utilisant
ses identifiants

Si l’utilisateur fournit des informations invalides lors de l’inscription

Scénario alternatif (par exemple une adresse e-mail incorrecte), le système affiche
un message d’erreur approprié et demande à l’utilisateur de corriger les informations

Ce tableau ci dessous tableau présente la description textuelle du cas d’utilisation « s’inscrire»

en exposant l’objectif, les acteurs, le scénario principal, les prés conditions/les post conditions
ainsi que les exceptions.

FACULTE DES SCIENCES SFAX Page 19

CHAPITRE 2. ANALYSE ET CONCEPTION

2.8.2 Diagramme de séquence «s’inscrire»

F IGURE 2.5: Diagramme de séquence du scénario s’inscrire

Dans cette partie , nous avons défini le process de creation d’un nouveau compte en utilisant
le service de mailjet pour la confirmation par e-mail qui assure la vérification de l’identité ,
réduit les risques de création de faux comptes ou d’utilisation de comptes frauduleux, ce qui
contribue à maintenir l’intégrité de la plateforme.

FACULTE DES SCIENCES SFAX Page 20

CHAPITRE 2. ANALYSE ET CONCEPTION

2.8.3 Cas d’utilisation «s’authentifier»

F IGURE 2.6: Diagramme de Cas d’utilisation d’authentification

Ce cas d’utilisation concerne le processus d’authentification sécurisée sur une plateforme

en utilisant un code à deux facteurs et la possibilité pour l’utilisateur de renouveler son mot
de passe. Il vise à renforcer la sécurité du compte en ajoutant une couche supplémentaire
d’authentification et à offrir aux utilisateurs la possibilité de mettre à jour leur mot de passe
en cas de besoin.

FACULTE DES SCIENCES SFAX Page 21

CHAPITRE 2. ANALYSE ET CONCEPTION

TABLE 2.4

Ce cas d’utilisation concerne le processus d’authentification sécurisée

sur une plateforme en utilisant un code à deux facteurs et la possibilité
pour l’utilisateur de renouveler son mot de passe.
Objectif
L’objectif principal est de renforcer la sécurité du compte en ajoutant
une couche supplémentaire d’authentification et de permettre aux utilisateurs
de mettre à jour leur mot de passe en cas de besoin.

Acteur La personne qui souhaite accéder à son compte sur la plateforme.

- L’utilisateur possède un compte sur la plateforme.

Pré condition - L’utilisateur a accès à un moyen de communication supplémentaire pour recevoir
le code à deux facteurs .

- L’utilisateur est authentifié avec succès et peut accéder à son compte

Post condition - L’utilisateur a la possibilité de renouveler son mot de passe en cas de besoin,
renforçant ainsi la sécurité du compte.

- L’utilisateur accède à la page de connexion sur la plateforme.

- L’utilisateur entre son identifiant et son mot de passe .
- Le système vérifie les informations d’identifiacation fournies par l’utilisateur .
- Si les informations sont valides , le système envoie un code à
Scénario normal
deux facteurs à l’utilisateur.
- Le système vérifie le code à deux facteurs saisi par l’utilisateur .
- Si le code à deux facteurs est valide , l’utilisateur est authentifié avec succès
et peut accéder à son compte .

- Si les informations d’identification fournies par l’utilisateur

sont invalides, le système affiche un message d’erreur approprié
Scénario alternatif et demande à l’utilisateur de les corriger.
- Si le code à deux facteurs est incorrecte, le système affiche un message d’erreur
et demande à l’utilisateur de réessayer

FACULTE DES SCIENCES SFAX Page 22

CHAPITRE 2. ANALYSE ET CONCEPTION

2.8.4 Diagramme de séquence «s’authentifier»

F IGURE 2.7: Diagramme de Séquence d’authentification

Comme illustré dans la figure 2.7, nous avons utilisé la service JWT en tant que service
d’authentification pour garantir le bon déroulement de cette étape. C’est un service personnalisable
qui nous permet de traiter les données de cette partie en toute indépendance de notre base de
données. En effet, son maintient des identités de nos utilisateurs qui sont stockées dans sa propre
base de données optimise la confidentialité de notre solution et fournit un accès sécurisé à notre
application .

FACULTE DES SCIENCES SFAX Page 23

CHAPITRE 2. ANALYSE ET CONCEPTION

2.8.5 Cas d’utilisation «Assessment»

F IGURE 2.8: Cas d’utilisation de creation d’un Assessment

Ce cas d’utilisation concerne le processus de création d’un assessment, comprenant des

questions auxquelles les utilisateurs doivent répondre, ainsi que la possibilité de faire des commentaires
et de faire télécharger des fichiers pertinents liés à la question.

2.8.6 Diagramme de séquence «Assessment»

comme illustré dans la figure Lors de la création d’un assessment, si tous les champs requis
sont remplis, le processus de mise à jour et de soumission se déroule sans problème. Cependant,
si tous les champs ne sont pas remplis, des difficultés peuvent survenir lors de la soumission de
l’assessment.

FACULTE DES SCIENCES SFAX Page 24

CHAPITRE 2. ANALYSE ET CONCEPTION

Lorsque certains champs nécessaires ne sont pas remplis, le système peut afficher un message
d’erreur indiquant les champs manquants ou demandant à l’utilisateur de les compléter avant de
pouvoir soumettre l’assessment. Cela permet de s’assurer que toutes les informations essentielles
sont fournies et que l’assessment est complet.

F IGURE 2.9: Cas d’utilisation de creation d’un Assessment

FACULTE DES SCIENCES SFAX Page 25

CHAPITRE 2. ANALYSE ET CONCEPTION

2.8.7 Cas d’utilisation «Gérer des membres»

Les fonctionnalités de gestion des membres de l’équipe, illustrées dans la figure 2.9, offrent
à l’administrateur la possibilité d’ajouter de nouveaux membres en fournissant leurs informations,
de modifier l’état des membres existants et d’afficher la liste complète de tous les membres de
l’équipe. Ces fonctionnalités facilitent la maintenance et la mise à jour de la composition de
l’équipe en fonction des besoins et des exigences de l’organisation.

F IGURE 2.10: Diagramme de cas d’utlisation du scénario gérer les membres

FACULTE DES SCIENCES SFAX Page 26

CHAPITRE 2. ANALYSE ET CONCEPTION

2.8.8 Diagramme de séquence «Gérer des membres»

F IGURE 2.11: figure de diagramme du séquence du cas «gérer les membres »

Ce diagramme concerne la fonctionnalité permettant à un administrateur d’ajouter un nouveau

membre à l’équipe, sous réserve que les données fournies soient valides.

2.8.9 Conclusion

Dans ce chapitre, nous avons développé la conception de notre application. Pour ce faire,
nous avons introduit deux diagrammes dynamiques : le diagramme de cas d’utilisation et le
diagramme de séquence, ainsi qu’un diagramme statique, à savoir le diagramme de classe. Pour
concrétiser la conception entreprise précédemment, nous aborderons, dans le prochain chapitre,
l’implémentation de notre application, tout en présentant l’environnement de travail.

FACULTE DES SCIENCES SFAX Page 27

CHAPITRE 3. RÉALISATION

Chapitre

3
Réalisation

Sommaire
3.1 Architecture du projet . . . . . . . . . . . . . . . . . . . . . . . 29
3.1.1 Architecture physique du projet . . . . . . . . . . . . . . . . . . 29
3.1.2 Architecture logique du projet . . . . . . . . . . . . . . . . . . . 30
3.2 Cadre de réalisation et choix . . . . . . . . . . . . . . . . . . . . 31
3.2.1 Environnement matériel . . . . . . . . . . . . . . . . . . . . . . 31
3.2.2 Environnement logiciel . . . . . . . . . . . . . . . . . . . . . . . 31
3.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.4 Réalisation de l’application . . . . . . . . . . . . . . . . . . . . 38
3.4.1 Développement . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.5 Réalisation du site web et déploiement de la solution . . . . . 45
3.5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.5.2 Réalisation du site web de CSMA . . . . . . . . . . . . . . . . . 45
3.5.3 Déploiement de notre solution . . . . . . . . . . . . . . . . . . . 45
3.5.4 Choix de la méthode de déploiement . . . . . . . . . . . . . . . 45
3.5.5 Architecture du pipeline de déploiement . . . . . . . . . . . . . 46
3.5.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

FACULTE DES SCIENCES SFAX Page 28

CHAPITRE 3. RÉALISATION

3.1 Architecture du projet

Après avoir définit les fonctionnalités de notre solution, nous nous focalisons dans cette
partie sur l’architecture générale de notre système. Tout dabord, nous présentons l’architecture
physique adoptée au cours de la réalisation de ce projet. Puis, nous exposons l’architecture
logique de la solution proposée.

3.1.1 Architecture physique du projet

Ce type d’architecture nous permet d’illustrer les composants matériels du système en

question, ainsi que l’interaction entre eux. En adoptant l’architecture 3-couches, nous avons
profité de la séparation physique et logique des fonctionnalités, ceci nous permet d’étendre et
personnaliser chaque couche indépendamment des autres. En effet, cette séparation nous aide
à développer plus vite en garantissant l’utilisation des meilleurs outils et langages pour chaque
niveau. De plus, en spécifiant une couche pour le traitement des données, nous améliorons la
sécurité de notre projet et contrôlons l’accès aux données. Comme le montre la figure 2.2, notre
architecture est basée sur les 3 tiers suivantes :
— Présentation : Cette couche représente la partie front-end développé avec Next.js qui fournit
les interfaces dynamiques pour interagir avec le client.
— Métier des données : Cette couche correspond au niveau intermédiaire qui prend en charge
le traitement des requêtes HTTP avec les fonctions développées en Nest.JS .

— Accès aux données : Cette couche est associée au serveur de base des données permettant
de gérer et sauvegarder les données.

FACULTE DES SCIENCES SFAX Page 29

CHAPITRE 3. RÉALISATION

F IGURE 3.1: Architecture physique globale du projet

3.1.2 Architecture logique du projet

Nous avons choisi l’architecture multi-couches comme une architecture logique de notre
système. En effet, cette architecture est fondée sur le principe d’isolation et de superposition des
responsabilités de chacun des ensembles de composants logiques qui se comportent comme une
couche. Et pour décrire les différentes couches intervenants dans la structure logique de notre
projet, nous présentons la figure 3.2 qui illustre l’architecture à 5-couches de notre solution.

F IGURE 3.2: Architecture logique du projet

Comme indiqué dans cette figure, notre architecture est constituée de 5 couches distinctes :

— Présentation : ceci est le niveau avec lequel l’utilisateur interagit qui contient un ensemble
de contrôleurs pour traiter les requêtes HTTP et afficher différents résultats d’interface via des
vues

FACULTE DES SCIENCES SFAX Page 30

CHAPITRE 3. RÉALISATION

— Objets de transfert de données (Dtos) : cette couche permet de décrire de manière

abstraite les données qui seront échangées

— Services : c’est la couche contenant la logique métier de notre solution

— Models : c’est la couche qui représente les entités de ce projet

— Data : Il s’agit d’une couche responsable de la gestion des bases de données contenant
des reposotiries. Ainsi, elle assure la connexion avec MySQL en utilisant la bibliothèque TypeORM.

3.2 Cadre de réalisation et choix

3.2.1 Environnement matériel

Système d’exploitation Windows 10-64 bit

CPU Intel(R) Core(TM) i5
RAM 8 GO
Disque Dur 512 GO
TABLE 3.1: tableau d’environnement materiel

3.2.2 Environnement logiciel

3.2.2.1 Outils logiciels :

Nous commençons par détailler les outils logiciels adoptés pour la mise en oeuvre de notre
PFE.

v Visual Studio Code

Visual Studio Code[2] est un éditeur de code open-source
développé par Microsoft supportant un très grand
nombre de langages grâce à des extensions. Il supporte
l’autocomplétion, la coloration syntaxique, le débogage,
et les commandes git.

FACULTE DES SCIENCES SFAX Page 31

CHAPITRE 3. RÉALISATION

v Swagger
Swagger spécifie un ensemble de métadonnées qui
décrivent une API REST. Si vous avez un fichier Swagger
définissant une API REST, vous pouvez l’ajouter à votre
projet en tant que source de synchronisation externe.
Cette source peut être synchronisée avec le projet.
Voir Ajouter une définition Swagger comme source
de synchronisation. Pour plus d’informations sur la
synchronisation, voir Vue Synchronisation.

v GitHub
GitHub[3] is an open-source hosting service that allows
programmers and developers to share their code projects
and collaborate on them. It can be considered as a
dedicated cloud for computer code.

v OverLeaf
Overleaf[4] est une plateforme en ligne gratuite
permettant d’éditer du texte en LATEX sans aucun
téléchargement d’application. En outre, elle offre la
possibilité de rédiger des documents de manière
collaborative, de proposer ses documents directement à
différents éditeurs (IEEE Journal, Springer, etc.

v Jira Software
Jira Software[5]est logiciel de gestion de projets
développé par Atlassian en 2002 . Vu que nous avons
opté pour la méthodologie agile scrum, l’utilisation de
Jira software nous a facilité la gestion des user stories, des
taches et des sprints pour simplifier la collaboration dans
notre équipe. Ce logiciel nous a permis aussi de suivre et
contrôler l’avancement de travail.

FACULTE DES SCIENCES SFAX Page 32

CHAPITRE 3. RÉALISATION

v Figma
Au cours du développement de notre projet, nous avons
utilisé l’outil de web design Figma[6] pour satisfaire
les exigences de notre cliente concernant les interfaces
graphiques .

v Wondershare Edrawmax
Edraw Max[7] est un logiciel de diagramme tout-en-un
qui simplifie la création d’organigrammes, diagrammes
organisationnels, diagrammes réseau, présentations
commerciales, plans de construction, cartes mentales,
illustrations scientifiques, conceptions de mode,
diagrammes UML, flux de travail, structures de
programmes, ...

3.2.2.2 Langages de programmation

Dans cette partie, nous expliquons nos choix de langages de programmation.

v JavaScript
JavaScript[8] est le langage de script orienté objet le plus
populaire utilisé par les développeurs depuis les années
90. En effet, l’utilisation de ce langage pour les deux
cotés front-end et back-end nous permet un gain de temps
et de flexibilité en terme dapprentissage .

FACULTE DES SCIENCES SFAX Page 33

CHAPITRE 3. RÉALISATION

v TypeScript
TypeScript[9] est un langage de programmation
open-source, développé en 2012 par Microsoft dans
le but d’améliorer le code JavaScript . Ce langage
vient pour nous favoriser avec les nouveaux concepts de
programmation comme : Les interfaces, les énumérations
et les classes ce qui nous aide à manager la complexité
de notre code et à garantir une meilleure maintenance.

3.2.2.3 Frameworks

Cette section est dédiée pour décrire les frameworks utilisés.

v NestJs
Nest.js[10] est l’un des frameworks Node.js à la
croissance la plus rapide pour construire des applications
backend efficaces, évolutives et de niveau entreprise
en utilisant Node.js. Il est connu pour produire
des applications hautement testables, maintenables et
évolutives à l’aide de JavaScript et TypeScript modernes.

v NextJs
Next.js[11] étant qualifié de framework React pour la
production, il est devenu évident que vous pouvez
rapidement créer et déployer des applications à grande
échelle et prêtes pour l’entreprise en production avec
Next.js.

FACULTE DES SCIENCES SFAX Page 34

CHAPITRE 3. RÉALISATION

Formation d’initiation à Digital Oceans :

Pour se familiariser avec Digital Oceans Code Coopertation propose des formations à ses
nouveaux collaborateurs notamment les stagiaires, dans cette formation nous avons appris :
• Architecture global Digital Oceans.
• Les pratiques du Digital Oceans.

v 3.2.2.4 DigitalOcean

DigitalOcean[12] Inc. is a cloud computing provider

headquartered in New York, with data centers located
worldwide. They offer Infrastructure as a Service (IaaS)
platforms for software developers. DigitalOcean is
popular among open-source developers and competes
with Amazon Web Services (AWS).

v 3.2.2.5 Amazon S3

Amazon S3[13] est un site d’hébergement de fichiers

proposé par Amazon Web Services. Amazon S3 propose
des services de stockage à travers des services Web.
Amazon a lancé le service Amazon S3, son premier
service Web, aux États-Unis en mars 2006 et en Europe
en novembre 2007.

FACULTE DES SCIENCES SFAX Page 35

CHAPITRE 3. RÉALISATION

v 3.2.2.6 MYSQL

MySQL[1] est un système de gestion de bases de

données relationnelles (SGBDR). Il fait partie des
logiciels de gestion de base de données les plus
utilisés au monde,autant par le grand public (applications
web principalement) que par des professionnels,en
concurrence avec Oracle, PostgreSQL et Microsoft SQL
Server.

v 3.2.2.7 Github Actions

Les actions GitHub[14] facilitent l’automatisation de tous

vos workflows logiciels, maintenant avec un CI / CD
de classe mondiale. Créez, testez et déployez votre code
directement depuis GitHub. Faites en sorte que les revues
de code, la gestion des succursales et le tri des problèmes
fonctionnent comme vous le souhaitez.

v 3.2.2.8 Yaml

YAML[1], acronyme de Yet Another Markup Language

dans sa version 1.0, devient l’acronyme récursif de
YAML Ain’t Markup Language dans sa version 1.1, est
un format de représentation de données par sérialisation
Unicode.

FACULTE DES SCIENCES SFAX Page 36

CHAPITRE 3. RÉALISATION

3.3 Conclusion

Dans la première partie de ce chapitre, nous avons fixé les acteurs et nous avons décrit les
fonctionnalités de notre système à travers un diagramme de cas d’utilisation général. Ensuite,
nous avons présenté l’architecture globale de ce projet. Puis, nous avons expliqué notre choix
des environnements matériel et logiciel. Cette phase de préparation est fondamentale avant de
passer à la phase de la réalisation de la solution proposée dans les chapitres suivants.

FACULTE DES SCIENCES SFAX Page 37

CHAPITRE 3. RÉALISATION

3.4 Réalisation de l’application

L’objectif de la première étape de ce projet est de livrer une version de dashboard client de
CSMA qui satisfait les besoins fixés précédemment. Dans ce qui suit, nous nous intéressons à
détailler les étapes d’implémentation de cette partie en décrivant les résultats obtenus avec des
interfaces graphiques.

3.4.1 Développement

Tous les utilisateurs de plateforme peuvent accéder à ce dashboard pour créer un compte
pour leur entreprise après avoir rempli le formulaire d’inscription tel qu’indiqué dans la figure
3.3

F IGURE 3.3: figure de registration

FACULTE DES SCIENCES SFAX Page 38

CHAPITRE 3. RÉALISATION

Tu dois maintenant confirmer votre compte par compte email comme le montre la figure ci
dessous :

F IGURE 3.4: figure de confirmation par mail

Dans le cas d’un enregistrement réussi, un utilsateur d’une entreprise peut s’authentifier
comme illustré dans la figure 3.5 et bénéficier des différentes fonctionnalités proposées par son
espace

F IGURE 3.5: interface d’authentification

FACULTE DES SCIENCES SFAX Page 39

CHAPITRE 3. RÉALISATION

Un utilisateur peut maintenant acceder au plateform afin de réaliser leur propre évaluation.

F IGURE 3.6: interface pour permettre d’accéder pour créer un nouveau assessment

F IGURE 3.7: interface de confirmation pour un nouveau assessment

En appuyant sur le boutton "New Assessment" , puis sur le boutton "Confirm" l’utilisateur
du plateforme a la possibilté maintenant de faire l’assessment . Cette étape consiste à remplir
les informations necessaires comme l’indique la figure ci dessus :

FACULTE DES SCIENCES SFAX Page 40

CHAPITRE 3. RÉALISATION

F IGURE 3.8: Interface pour créer un nouveau assessment

Une deuxieme partie illustrée par la figure 3.9 suivante est consacrée à télécharger les
fichiers nécessaires pour le traitement .

F IGURE 3.9: interface pour télécharger et voir les documents téléchargés

Aprés avoir remplit les informations nécessaires Comme le montre les figures 3.10 et 3.11
, notre dashboard offre aux utilisateurs l’opportunité de voir les détails relatifs aux differents
groupes des questions en cliquant sur le button "Maturity Rating".

FACULTE DES SCIENCES SFAX Page 41

CHAPITRE 3. RÉALISATION

F IGURE 3.10: interface de Maturity Rating

En cliquant sur le bouton (+) situé à droite, des informations supplémentaires seront affichées
concernant chaque question de chaque groupe.

F IGURE 3.11: interface de Maturity Rating

FACULTE DES SCIENCES SFAX Page 42

CHAPITRE 3. RÉALISATION

Et finallement une dashboard sera affichée pour visualiser la performance d’assessment

comme le montre dans la figure 3.12 ci dessous :

F IGURE 3.12: interface de Maturity Rating

passons maintenant à la partie administrative pour la gestion des nouveaux membres .

Dans la figure suivante, nous allons présenter la liste des membres qui ont déjà été ajoutés
par l’administrateur.

FACULTE DES SCIENCES SFAX Page 43

CHAPITRE 3. RÉALISATION

F IGURE 3.13: interface de la liste des membres

Si l’administrateur souhaite ajouter un nouveau membre à sa liste, il doit cliquer sur le

bouton "+ Add new team member" et remplir les champs qui apparaissent de manière appropriée.

F IGURE 3.14: interface d’ajout d’un nouveau membre

FACULTE DES SCIENCES SFAX Page 44

CHAPITRE 3. RÉALISATION

3.5 Réalisation du site web et déploiement de la solution

3.5.1 Introduction

Après l’implémentation de dashbord de notre solution, nous dédions cette partie à la description,
en premier temps, de la création du site CSMA. Ensuite, nous détaillons les différentes phases
de déploiement du projet avec les services DIGITAL OCEANS .

3.5.2 Réalisation du site web de CSMA

3.5.3 Déploiement de notre solution

Après avoir élaboré la solution, il a fallu concevoir et choisir une méthode de déploiement.
Dans cette partie, nous commençons par la description de notre choix, puis nous détaillons la
mise en oeuvre de la procédure adoptée pour déployer notre projet.

3.5.4 Choix de la méthode de déploiement

Faire un bon choix de méthode de déploiement d’un projet, peut jouer un rôle fondamental
dans sa maintenance et son extensibilité. En effet, notre équipe a choisi les services DigitalOcean
après avoir beaucoup étudié les solutions possibles (AWS). Nous avons conçu un pipeline
d’intégration et de distribution continues (CI/CD) automatisées .

Dans la suite, nous exposons les différents termes intervenant dans cette méthode .

— Intégration continue (CI) : C’est une méthode de développement qui permet aux développeurs
d’intégrer leurs changements régulièrement. Elle permet, principalement, de réduire la durée et
l’effort provoqués par chaque intégration. De plus, elle facilite la détection et la correction des
incohérences au fur et à mesure ce qui réduit le risque de bug.

FACULTE DES SCIENCES SFAX Page 45

CHAPITRE 3. RÉALISATION

— Livraison continue (CD) : Il s’agit d’une méthode de développement logiciel où les

modifications de code sont générées, testées et préparées automatiquement en vue de leur mise
en production afin d’améliorer la qualité du produit. Ainsi, elle assure la livraison de chaque
version plus rapidement et d’une façon plus fiable.

— Pipeline CI/CD : C’est un concept, apparu en 2009, qui englobe un ensemble de pratiques
permettant d’automatiser le processus de distribution des logiciels. En effet, cette approche
permet de gagner le temps et les efforts consacrés à la configuration manuelle de cette étape et
réduit les erreurs. Ainsi, elle aide à accélérer considérablement les publications de produits et à
apporter des changements quotidiennement tout en améliorant l’agilité.

En adoptant cette méthode, nous avons bénéficié de :

— D’une livraison plus rapide des versions devenues plus robustes grâce à l’automatisation,
de sorte que l’équipe de développement peut se concentrer sur l’amélioration de la qualité du
code.

— D’une détection plus rapide des bugs. Ceci est du au suivi continu et des tests automatisés
pour identifier les problèmes présents et éviter les surprises de déploiement.

— De la satisfaction de la clientèle qui peut fournir des commentaires de façon régulière

grâce à la boucle de rétroaction accélérée.

3.5.5 Architecture du pipeline de déploiement

Notre architecte a proposé une architecture pour le déploiement de différents produits.

Nous avons donc choisi de l’adopter et de l’adapter aux besoins de notre solution. Dans cette
section, nous présentons les outils qui ont servi à la réalisation de la partie déploiement. Nous
commençons par Digital Oceans CodePipeline qui est un service pour automatiser les pipelines
de livraison pour un déploiement rapide et fiable des mises à jour des applications. En effet, nous
avons intégré ce service avec Github pour automatiser la diffusion rapide de nos mises à jour. De
plus, nous avons réussi à personnaliser les étapes nécessaires à la mise en place de ce pipeline

FACULTE DES SCIENCES SFAX Page 46

CHAPITRE 3. RÉALISATION

selon nos besoins. Dans cette solution, nous avons utilisé 5 types d’actions d’intégration dans le
Codepipeline, responsable chacun de la réalisation d’une étape en utilisant des services Digital
Oceans. Comme illustré dans la figure suivante 5.6, notre pipeline est composée de 5 phases
distinctes :

F IGURE 3.15: Architecture de pipeline de déploiment

— Push : Chaque fois que nous "Push" un nouveau commit sur GitHub, le workflow GitHub
Actions sera déclenché et commencera à s’exécuter.
— Build Docker Image and Push : GitHub Actions va construire une image Docker sur son
exécuteur (runner) et (Push) cette image vers le registre des conteneurs (Container Registry).
— Deploy Docker Image : Ensuite, GitHub Actions se connectera aux Droplets et déploiera
l’image à partir du registre des conteneurs (Container Registry) vers ces Droplets.
Voyons comment configurer ce flux de travail : Ajouter Actions Secrets : Il existe quelques
variables secrètes que vous devez utiliser dans le fichier workflow.yml de GitHub Actions, il
serait donc préférable de les chiffrer en les stockant dans les Secrets de GitHub. Vous pouvez
accéder à Paramètres du dépôt → Secrets → Actions, puis cliquer sur Nouveau secret de dépôt.

FACULTE DES SCIENCES SFAX Page 47

CHAPITRE 3. RÉALISATION

F IGURE 3.16: Interface des secrets de GitHub

Créer a workflow YAML File

Nous avons ici 2 tâches : exécuter "build and push", puis une fois qu’elle est terminée,
exécuter "deploy".

F IGURE 3.17: Interface de déploiement

3.5.6 Conclusion

Ce chapitre est réservé à la description de l’implémentation du site web de CSMA dans sa

première partie. Ensuite, nous avons expliqué notre choix de méthode de déploiement et nous
détaillons les différents étapes de cette phase

FACULTE DES SCIENCES SFAX Page 48

 Conclusion et Perpectives

Notre projet de fin d’études consiste à développer une solution pour faciliter l’audit pour les
opérateurs des entreprises . Dans le présent rapport, nous avons décrit les étapes que nous avons
franchies pour atteindre nos objectifs. Au début, nous avons présenté le contexte général de
notre projet par l’exposition du l’organisme d’accueil, la présentation de la problématique et de
nos objectifs et dans un deuxieme lieu, par la description des solutions existantes pour proposer,
au final, notre solution. Cette étape, nous a permis de cerner les besoins de notre système afin
de passer à l’étape de la conception générale et la description de l’environnement du travail
adéquat pour la réalisation de notre projet. Enfin, pendant les trois derniers chapitres, nous
détaillons les étapes de l’implémentation des différentes parties de ce projet en se basant sur la
conception détaillée de chacune. D’après ce projet, nous avons réussi à enrichir et exploiter nos
connaissances acquises au cours de la formation au sein de la Fss. Par ailleurs, nous avons eu la
chance de maîtriser les nouvelles tendances technologiques : Nextjs, NestJs et Digital Oceans.

Même si nous avons réussi à répondre aux besoins fonctionnels requis, il existe des points
de vue pouvant servir notre projet en vue de l’améliorer. Parmi ces améliorations, nous citons :
- Intégration de fonctionnalités d’intelligence artificielle : L’ajout de fonctionnalités basées
sur l’intelligence artificielle pourrait renforcer notre solution d’audit. Par exemple, l’utilisation
de l’apprentissage automatique pour l’analyse des données financières pourrait permettre une
détection plus rapide des anomalies et des risques potentiels, améliorant ainsi l’efficacité et
l’exactitude de l’audit.

FACULTE DES SCIENCES SFAX Page 49

CHAPITRE 3. RÉALISATION

- Intégration de fonctionnalités de collaboration : En ajoutant des fonctionnalités de collaboration,

telles que la possibilité de partager des informations et de travailler en équipe sur les audits,
notre solution pourrait favoriser une meilleure communication et coordination entre les opérateurs
d’entreprises. Cela faciliterait la collaboration et permettrait un suivi plus efficace des tâches
liées à l’audit.

- Personnalisation des paramètres d’audit : Offrir la possibilité de personnaliser les paramètres

d’audit en fonction des besoins spécifiques de chaque entreprise pourrait rendre notre solution
plus flexible et adaptable. Cela permettrait aux utilisateurs de configurer les critères d’audit en
fonction de leurs propres exigences et de leur domaine d’activité.

FACULTE DES SCIENCES SFAX Page 50

 Nétographie

[1] CodeCooperation , https ://www.linkedin.com/company/code-cooperation/mycompany/

[2] Visual Studio Code , https ://framalibre.org/content/visual-studio-code/

[3] GitHub , https ://datascientest.com/github-tout-savoir

[4] Overleaf , https ://paris-sorbonne.libguides.com/c.php ?g=497641p=4637541 : :text=Overleaf

[5] Jira Software , https ://www.cadremploi.fr/editorial/conseils/conseils-carriere/detail/article/

[6] Figma , https ://graphiste.com/blog/comment-mettre-figma-en-francais/ : :text=Figma

[7] Edraw Max , https ://www.getapp.fr/software/121747/edraw-max : :text=Edraw

[8] JavaScript , https ://developer.mozilla.org/fr/docs/Learn/JavaScript

[9] TypeScript , https ://fr.wikipedia.org/wiki/TypeScript : :text=TypeScript

[10] Nest.js, https ://kinsta.com/fr/base-de-connaissances/nestjs/

[11] Next.js , https ://www.kicklox.com/blog-talent/next-js-quest-ce-que-cest/ : :text=JS

[12] DigitalOcean , https ://appmaster.io/fr/blog/quest-ce-que-digitalocean

[13] Amazon S3 , https ://aws.amazon.com/fr/s3/ : :text=Amazon

[14] MySQL , https ://datascientest.com/mysql-tout-comprendre : :text=MySQL

[15] Les actions GitHub , https ://www.linkedin.com/company/code-cooperation/mycompany/

[16] YAML , https ://www.linkedin.com/company/code-cooperation/mycompany/

FACULTE DES SCIENCES SFAX Page i

 CSMA

- Résumé : Nous avons développé une application web dans le cadre d’un projet de fin d’études
visant à faciliter la gestion des audits pour les entreprises. Cette application, basée sur les
frameworks Next.js et Nest.js, utilise une base de données MySQL pour la gestion des données.
Nous avons déployé l’application en utilisant les services de DigitalOcean et avons suivi la
méthodologie SCRUM pour assurer une bonne gestion du projet.

Mots Clés : application web, Framework Nextjs, Framework Nestjs, DigitalOcean, SCRUM ,
MySQL

- Abstract : We have developed a web application as part of a final year project aimed at
facilitating audit management for businesses. This application is based on the Next.js and
Nest.js frameworks and uses a MySQL database for data management. We deployed the
application using DigitalOcean services and followed the SCRUM methodology to ensure
effective project management.

Key words : web application, Framework Nextjs, Framework Nestjs, DigitalOcean, SCRUM ,
MySQL

FACULTE DES SCIENCES SFAX Page ii