République Tunisienne Faculté des Sciences Mathématiques

Ministère de l’Enseignement Supérieur Physiques et Naturelles

et de la Recherche Scientifique de Tunis

DEPARTEMENT DES SCIENCES DE L’INFORMATIQUE

LICENCE EN SCIENCE INFORMATIQUE

Projet de Fin d’Etudes

Réalisé par :

Mootasem Belleh TLILI

Développement d’une solution

web qui permet d’afficher les
cartes de contrôle

Réalisé au sein de :

Sagemcom Software and Technologies

Encadrant académique : M. Faouzi Ben Charrada Professeur, FST

Encadrant professionnel : Mme. Manel Ben Ismail Chef Projet

Soutenu : Le 10 juin 2021

Devant le jury : Mme . Narjes Doggaz

Année Universitaire : 2021-2022

 Dédicace

À ma chère maman , tout l’encre du monde ne pourrait suffire pour exprimer mes sentiments envers vous. Je
vous remercie pour tout le soutien, l’amour ainsi tous les sacrifices. Ta prière et ta bénédiction m’ont été d’un
grand secours pour mener a bien mes études et ma vie. J’espère que j’étais a l hauteur de vos espérances, je

vous aime énormément.

Je te dédie ce travail en gage de ma gratitude éternelle et de mon profond respect.

À mon cher père Aucun mot ne peut exprimer le sentiment que j’éprouve à ton égard. C’est grâce à ton amour,
ta patience, tes sacrifices et tes encouragements tout au long de mon parcours que j’ai pu être là où je suis
maintenant. J’espère avoir été digne de ton affection et ta confiance.

À mon cher frère Aucune dédicace ne pourra exprimer la profondeur de mon amour et de mon attachement. Que
Dieu nous garde toujours unis.

À mes chers Amis en souvenirs des moments heureux passés ensemble , avec mes voeux sincères de réussite ,

bonheur, santé et prospérité

À tous ce que j’aime, ceux qui m’ont soutenu jusqu’au bout et à moi même

Mootasem

1
 REMERCIEMENTS :

C’est avec un immense plaisir que j’exprime ma reconnaissance auprés de toutes les personnes, dont l’inter-
vention au cours de ce projet, a favorisé son achévement.

Je tiens à présenter ma profonde gratitude à Sagemcom qui a accepté de m’acceuillir au sein de son organisme.
Ainsi, j’exprime mes sincéres remerciements à Mme.Manel Ben Ismail pour sa parrainage tout au long de ce pro-
jet.

Je présente ma profonde gratitude à mon encadrant de la faculté des sciences de Tunis M.Faouzi Ben Charrada,
pour ses conseils précieux, ses directives pertinentes , pour l’interet qu’il a porté à mon sujet.
Je me dois de remercier tout le corps professoral de la faculté des sciences de Tunis, pour la formation prodigieuse

et prestigieuse qu’il ma prodigué durant mes années universitaires.

Je remercie également tous les membres du jury qui m’ont fait l’honneur d’accepter de juger notre travail.
Enfin,mes reconnaissances vont à toutes les personnes qui ont contribué, de prés ou de loin, à l’accomplissement

de ce projet.

Tlili Mootasem Belleh

2
 Table des matières

Introduction générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1 CONTEXTE GENERAL DU PROJET 12

1.1 Présentation de l’organisme d’accueil «SAGEMCOM» . . . . . . . . . . . . . . . . . . . . . . . 13
1.2 Présentation du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.1 Contexte du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.2 Présentation du sujet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.3 Solution proposée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.4 Travail demandé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.3 Méthodologie adoptée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.3.1 Présentation de la méthodologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.3.2 Backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2 ANALYSE DES BESOINS 19

2.1 Étude des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.1.1 Besoin fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.1.2 Besoin non fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.2 Modélisation des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2.1 Langage de Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2.2 Identifications des acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.2.3 Diagramme des cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3 ETUDE CONCEPTUELLE 26

3
 3.1 Concept et architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2 Vue comportementale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.3 Répartition des sprints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.4 Les diagrammes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.4.1 Diagramme de cas d’utilisation «Sprint 1» . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.4.2 Diagramme de classes «Sprint 1» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.4.3 Diagramme de séquence «Sprint 1» Ajouter, supprimer et modifier utilisateur . . . . . . . 33
3.4.4 Diagramme de cas d’utilisation «Sprint 2» . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.4.5 Diagramme de classes «Sprint 2» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.4.6 Diagramme de séquence «Sprint 2» Ajouter testeur . . . . . . . . . . . . . . . . . . . . . 37
3.4.7 Diagramme de cas d’utilisation «Sprint 3» . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.4.8 Diagramme de classes «Sprint 3» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.4.9 Diagramme de séquence «Sprint 3» Authentifier . . . . . . . . . . . . . . . . . . . . . . 40
3.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4 REALISATION 43
4.1 Environnement de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.1.1 Environnement matériel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.1.2 Environnement logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.1.3 Technologies utilisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.2 Présentation de l’application réalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Conclusion générale et perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

4
 Table des figures

1.1 Le logo «SAGEMCOM»[N01] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1.2 Processus de «SCRUM»[N02] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.1 Langage de conception «UML»[N03] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.2 Identification des acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.1 «Modèle MVC»[N04] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.2 «Diagramme de cas d’utilisation du «sprint1» . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3 Diagramme de classe du «sprint 1» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.4 Diagramme de sequence Ajouter utilisateur du «sprint 1» . . . . . . . . . . . . . . . . . . . . . . 33
3.5 Diagramme de sequence Modifier utilisateur du «sprint 1» . . . . . . . . . . . . . . . . . . . . . 34
3.6 Diagramme de sequence Supprimer utilisateur du «sprint 1» . . . . . . . . . . . . . . . . . . . . 35
3.7 Diagramme de cas d’utilisation du «sprint 2» . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.8 Diagramme de classe du «sprint 2» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.9 Diagramme de sequence Ajouter testeur du «sprint 2» . . . . . . . . . . . . . . . . . . . . . . . . 38
3.10 Diagramme de cas d’utilisation du «sprint 3» . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.11 Diagramme de classe du «sprint 3» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.12 Diagramme de sequence Authentifier «sprint 3» . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

4.1 VS code [N08] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

4.2 Angular [N09] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.3 Node JS [N10] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.4 Express JS [N11] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.5 SQL server [N12] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.6 POSTMAN [N13] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

5
4.7 Lucidchart [N14] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.8 Interface Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.9 Interface Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.10 Interface Ajouter un fichier excel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.11 Interface Ajout d’un testeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.12 Interface affichage liste des testeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.13 Interface Ajout des mesures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.14 Interface Affichage du liste des mesures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

6
 Liste des tableaux

1 Table des acronymes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.1 Niveau de complexité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

1.2 tableau Backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.1 «La répartition des sprints» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4.1 Environnement matériel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

7
 Liste des acronymes

Acronymes Définition
UML Unified Modeling Language
KPI Key Performance Indicator
JS JavaScript
VS Code Visual Studio Code
SQL Structured Query Langage
ID Identifiant
MVC Modéle-Vue-Controleur
SSD Solid State Drive
HDD Hard Drive
CPU Central Processing Unit
GO Géga Octet
PDF Portable Document Format
Table 1 – Table des acronymes

8
INTRODUCTION GENERALE

9
Introduction générale

À l’ère numérique, l’informatique continue d’imprégner tous les domaines d’activité.

activité humaine. Cela s’explique par sa contribution indéniable à l’automatisation des

traitements , Centralisation des données et exécution rapide des tâches. tout Les secteurs

peuvent bénéficier de ces avantages indéniables de ce processus informatisé Pour être plus

compétitives, cela signifie que la plupart des entreprises visent à Améliorer ses processus

de gestion des données.

Consciente de ses enjeux économiques qui en découlent , Sagemcom accorde une atten-

tion particulière à l’amélioration de son processus de travail des agents de la société ses

principaux objectifs visent à contrôler et éliminer les défauts qui peuvent apparaître dans

le processus de fabrication des produits afin d’optimiser la qualité des produits.

Le rapport Comporte quatre chapitres :

Le premier chapitre est consacré à la présentation de l’organisme d’accueil, à la description

du contexte général du projet et à la démarche adoptée pour la conduite du projet.

Dans le deuxième chapitre, nous allons faire un étude sur l’existant et spécifier les besoins

fonctionnels et non fonctionnels.

la phase d’analyse et conception du projet en utilisant le standard UML font l’objet du

chapitre trois.

le quatrième chapitre décrit la phase de réalisation du projet. Il présente les différents outils

et Framework utilisés ainsi que quelques interfaces de l’application réalisée.

10
Nous allons terminer par une conclusion générale synthétisant les taches effectuées et nous

proposons par la suite une piste pour des futurs interfaces.

11
Chapitre 1

CONTEXTE GENERAL DU PROJET

12
Introduction

Dans ce chapitre nous allons mettre le projet dans son cadre général , nous allons présen-

ter en premier lieu l’organisme d’accueil, à posteriori le cadre de notre projet, ainsi que les
objectifs à atteindre et finalement nous allons exposer la solution proposée accompagnée
de la méthodologie adoptée.

1.1 Présentation de l’organisme d’accueil «SAGEMCOM»

Sagemcom est un groupe industriel français, leader mondial des produits et solutions
communicantes à destination des marchés du Broadband, des solutions Audio et Vidéos,

et de l’énergie (électricité, gaz, et eau). Sagemcom conçoit, fabrique et expédie plus de 40

millions de terminaux dans le monde chaque année, grâce à des usines en propre et à des
partenaires industriels, sur tous les continents. Le chiffre d’affaires total du groupe s’élève

à 2,26 milliards d’euros pour effectif de 6 500 personnes réparti dans plus de 50 pays.
Sagemcom est rentable depuis sa création en 2008 et 30% de son capital est détenu par ses
collaborateurs. Depuis janvier 2022, Sagemcom est ”entreprise à mission”.

Figure 1.1 – Le logo «SAGEMCOM»[N01]

13
1.2 Présentation du projet
1.2.1 Contexte du projet

afin d’obtenir la licence en science informatique , nous sommes appelées à effectuer un

stage au sein d’une entreprise dans le but de réaliser un projet de fin d’étude pour valider
nos compétences acquises au fil de trois ans à la faculté des sciences de Tunis.

1.2.2 Présentation du sujet

Sagemcom souhaite mettre en place une solution pour prévenir les dérives du processus

de fabrication sur les différents outils de mesure de production.

1.2.3 Solution proposée

La réponse est la création d’une application web qui permet d’afficher les cartes de
contrôle par mesure avec un calcule des KPI par opération ressource & produits.

1.2.4 Travail demandé

Notre travail consiste à réaliser une application dédiée aux personnels de l’entreprise.
Notre projet se présente comme suit :

1. identification du besoin métier , formalisation du Cahier de charges fonctionnel qui

va nous aider dans la réalisation du projet

2. Conception du plate forme

3. Maîtrise de l’architecture et du mode de fonctionnement des outils et les «Frame-

work» de développement : Angular , Node JS , Express JS , SQL server , VS Code ,
POSTMAN.

4. Réalisation du projet.

Cette application permet de :

✓ alerter en temps réel par mail dès lors que la dérive statistique apparaît

14
 ✓ Gestion des données du société

✓ visualiser le bilan qualité

✓ Gestion des utilisateurs

1.3 Méthodologie adoptée

1.3.1 Présentation de la méthodologie

Le processus de développement constitue un facteur majeur de réussite d’un projet, car

il définit les grandes phases du projet et décrit les caractéristiques fondamentales de son

comportement. À cette fin, une méthode de développement adaptée aux caractéristiques et

aux exigences du projet est sélectionnée, qui doit être développée au préalable afin d’obte-
nir un produit de haute qualité qui répond aux besoins et aux attentes des utilisateurs. C’est

pourquoi nous avons choisi la méthode de gestion SCRUM.

SCRUM :
Scrum est une méthode de développement agile orientée projet informatique dont les res-

sources sont régulièrement actualisées. La méthode Scrum tire son nom du monde du
rugby, scrum = mêlée.Le principe de base est d’être toujours prêt à rediriger le projet au
fur et à mesure de son avancement. [N02]

Un projet réalisé selon «SCRUM» suit la démarche suivante :

• Les fonctionnalités souhaitées (stories) sont collectées dans «Backlog» qui se présente
sous forme d’un tableau ou un carnet qui décrit le produit , à l’initiative du product
Owner, le représentant des clients dans l’équipe.

• Le développement du produit est rythmé par une suite d’itérations, d’un mois ou

moins, qui sont appelées des sprints.

• Le contenu d’un sprint est défini par l’équipe projet, en tenant compte des priorités et

sa capacité de travail. A partir de ce contenu, l’équipe identifie les taches nécessaires

et s’engage sur l’objectif du sprint.

15
• Pendant un sprint, des points de synchronisation sont effectués quotidiennement, lors
de la mêlée(ou Scrum). Cette inspection régulière permet d’appliquer , en équipe, des
ajustements pour assurer le succès de «sprint»

• A la fin de chaque «sprint», lors de la revue, l’équipe projet présente ce qu’elle a

ajouté au produit pendant le «sprint». Cet incrément du produit est potentiellement

livrable ; son évaluation permet d’ajuster le «backlog» pour le sprint qui le suivre.

Figure 1.2 – Processus de «SCRUM»[N02]

16
1.3.2 Backlog

Au départ, nous avons besoin d’une liste hiérarchisée des fonctionnalités destinées aux
clients (c’est-à-dire le backlog). Le «backlog» existe tout au long de la vie du produit.
Le tableau suivant indique les niveaux de complexités :

Complexité Niveau de complexité

De 0 à 2 Facile
De 2 à 4 Simple
De 5 à 8 Normal
De 8 à 13 Difficile
De 13 à 20 Trés difficile
Table 1.1 – Niveau de complexité

Notre «Backlog» est composé de 10 lignes et de 5 colonnes avec :

• «ID» : représente l’identifiant du user story

• «Feature» : pour mieux ordonner les user stories

• «User story» : comporte la description de la fonctionnalité

• La Complexité : c’est le degré de difficulté technique de «User Story»

• La priorité : de «user story» selon la valeur métier et l’ordre de réalisation

ID Feature USER STORY Priorité Complexité

En tant qu’admin, je veux ajouter
1 1 8
un utilisateur.
en tant qu’admin, je veux supprimer
2 2 5
un utilisateur
Gestion en tant qu’admin, je veux attribuer un role
3 3 3
Des a l’utilisateur
Utilisateurs en tant qu’admin, je veux modifier les
4 4 5
coordonnées des utilisateurs
en tant qu’utilisateur, je veux consulter les
5 5 8
Données

17
 en tant qu’utilisateur, je veux consolider les
6 6 13
Données pour avoir des courbes superposées
en tant qu’utilisateur, je veux modifier une partie
7 7 13
des Données
Gestion
en tant qu’utilisateur, je veux consulter le bilan
8 Des 8 20
qualité
Données
en tant qu’utilisateur, je veux enregistrer les logs des
9 9 13
testeurs
automatisation en tant que systéme, je veux envoyer des Emails aux
10 Des utilisateurs lors de l’apparition de non conformité 10 20
Alertes (erreurs).
Complexité
Totale :108
Table 1.2 : tableau Backlog

1.4 Conclusion

Dans ce chapitre , nous avons présenté l’organisme d’accueil , la problématique et la

solution proposée , nous avons terminé ce chapitre avec la choix de la méthodologie Scrum
avec le backlog Dans le chapitre suivant , nous allons passer vers l’étude de l’existant ,
analyse de besoins et la réalisation des maquettes qui vont nous aider dans la réalisation du

projet.

18
Chapitre 2

ANALYSE DES BESOINS

19
Introduction

il est important de spécifier et analyser les besoins , donc dans cette partie nous allons

terminer l’étude théorique du projet, nous détaillons les besoins fonctionnels et non fonc-
tionnels afin de déterminer les qualités du projet et les acteurs.

2.1 Étude des besoins

Dans cette section, nous nous intéressons aux besoins des utilisateurs concernés par
le projet, et nous nous concentrerons sur la caractérisation de l’ensemble des propriétés à
travers des spécifications fonctionnelles et non fonctionnelles.

2.1.1 Besoin fonctionnels

Les Besoins fonctionnels se présentes en 3 grandes parties :

• La gestion des utilisateurs :

Elle consiste à ajouter , supprimer les comptes utilisateurs , modifier les coordonnées
et attribuer les rôles.

• La gestion des Données :

Elle consiste à Consolider les Données pour les visualiser dans des courbes superpo-

sées , Enregistrer les logs testeurs , modifier les données et afficher le bilan qualité.

• L’automatisation d’envoi des Emails :

Elle consiste à envoyer des emails aux utilisateurs lors de l’apparition de non confor-
mité.

2.1.2 Besoin non fonctionnels

maintenant nous présentons ci-dessous l’ensemble des contraintes à respecter pour ga-
rantir la performance du système en considérant les exigences de l’utilisateur.

20
 • Gestion des erreurs :
Levez l’ambiguïté avec des messages d’erreurs bien organisés pour guider correcte-
ment les utilisateurs à travers la plate-forme.

• Ergonomie :

Notre application devait être ergonomique, claire et simple pour que les utilisateurs
s’y adaptent facilement.

• Sécurité :
Nos solutions doivent respecter la confidentialité des données personnelles des utilisa-

teurs, c’est pourquoi l’accès aux différentes pages ou autorisations doit être protégés.

• Fiabilité :
La plate-forme doit être cohérente, sans bug et conviviale.

• Aptitude à la maintenance :
Les applications doivent suivre une architecture standard et claire pour garantir la

maintenance en cas de panne.

2.2 Modélisation des besoins

Nous traduisons les exigences référencées sous forme de diagrammes en langage UML.
Nous allons introduire ce formulaire, puis conclure avec une représentation globale du

diagramme de cas d’utilisation.

2.2.1 Langage de Conception

UML : Le langage de Modélisation Unifié, de l’anglais Unified Modeling Language

(UML), est un langage de modélisation graphique à base de pictogramme connu pour four-
nir une méthode normalisée pour visualiser la conception d’un système. Il est couramment

utilisé en développement logiciel et en conception orientée objet. [N03]

21
 Figure 2.1 – Langage de conception «UML»[N03]

2.2.2 Identifications des acteurs

Les acteurs sont des personnes ou des systèmes externes qui interagissent avec le sys-
tème à développer pour obtenir une fonctionnalité ou une valeur ajoutée.

Figure 2.2 – Identification des acteurs

e. Les acteurs sont des entités externes qui interagissent avec le système pour obtenir une

22
valeur ajoutée, citant :

• Admin : il s’occupe de la gestion des utilisateurs , attribution, des rôles.

• Super Utilisateur : une personne qui peut modifier les données , les visualiser , chan-
ger les log testeurs etc.

• Utilisateur normal : une personne qui s’occupe seulement de visualiser les données
d’après les logs testeurs , et aussi visualiser le bilan qualité.

2.2.3 Diagramme des cas d’utilisation

Nous allons présenter les besoins de manière formelle, c’est à dire en utilisant le dia-

gramme des cas d’utilisation du UML.

23
Figure 2.3 – Diagramme de cas d’utilisation

24
2.3 Conclusion

Nous avons fourni dans ce chapitre une analyse détaille de ces besoins indispensables

pour mieux faciliter le travail à réaliser.

Nous allons voir dans le chapitre suivant l’architecture de notre système tout en mention-
nant toutes les actions possibles, les acteurs et les diagrammes.

25
Chapitre 3

ETUDE CONCEPTUELLE

26
Introduction

Nous aborderons les tâches les plus importantes dans la formulation de ses projets En

regardant les tâches de conception, nous présenterons le schéma général d’extraction Les
différents modules qui composent notre application, nous les détaillerons plus tard Ces
modules sont décrits par différents schémas selon la notation UML Celle-ci sera répartie

sur ”3 sprints”.

3.1 Concept et architecture

notre projet consiste à réaliser une application web en se basant sur le modèle MVC

constitué de 3 parties.
Les 3 parties sont :

• Les vues ”V” :

se sont les interfaces homme-machine ou IHM.

• Le modèle ”M” :

représente le serveur de données.

• Contrôleur ”C” :
Contrôleur de trafic ou le serveur d’application.

Cette architecture reste toujours la plus utilisée dans le monde de développement web , elle
se caractérise par :

• elle diminue la complexité lors de la conception

• elle nous facilite le maintenance de l’application

• une meilleure répartition de la charge entre les différents entités clients et serveurs

27
 Figure 3.1 – «Modèle MVC»[N04]

3.2 Vue comportementale

• Définition de diagramme de cas d’utilisation

Le rôle du diagramme de cas d’utilisation est de collecter, d’analyser et d’organiser
les exigences, et d’identifier les principales fonctions du système. Il s’agit donc de la

première étape UML dans la conception d’un système.

Un diagramme de cas d’utilisation capture le comportement d’un système, d’un sous-
système, d’une classe ou d’un composant afin que les utilisateurs externes puissent le

voir. Il décompose la fonctionnalité du système en unités cohérentes, des cas d’utili-

sations, significatifs pour les acteurs. En tant que tels, ces cas d’utilisations peuvent
exprimer les besoins des utilisateurs du système, ce sont donc des visions de ces be-

soins face à l’utilisateur, par opposition à la vision par ordinateur. La première étape
ne doit jamais être négligée pour créer un site web qui répond aux attentes de vos uti-
lisateurs cibles. Le développement de cas d’utilisation doit être basé sur des entretiens

28
 avec les utilisateurs. [N05]

• Définition de diagramme de séquence

Il s’agit d’un diagramme d’interaction qui détaille comment l’action est effectuée :
quel message est envoyé et quand. Le diagramme de séquence est organisé en fonc-

tion du temps qu’il nous faut pour descendre dans la page. Les objets impliqués dans
l’opération sont rangés dans l’ordre de gauche à droite selon le temps de participation.
[N06]

• Définition de diagramme de classes

Les diagrammes de classes sont considérés comme les plus importants dans la modé-
lisation orientée objet, et c’est le seul qui doit être utilisé dans ce type de processus
de modélisation. Le diagramme de classes montre la structure interne du système. Il

fournit une représentation abstraite des objets système qui interagiront pour réaliser
des cas d’utilisations. Il s’agit d’une vue statique car le facteur temps dans le com-
portement du système n’est pas pris en compte. Les principaux éléments de cette vue

statique sont les classes et leurs relations : associations, généralisations et plusieurs

types de dépendances, telles que l’implémentation et l’utilisation. Une classe d’asso-
ciation combine les caractéristiques d’une association et d’une classe : elle relie deux

ou plusieurs classes et possède à la fois des propriétés et des opérations. Les associa-
tions de classe sont caractérisées par la ligne pointillée entre la classe et l’association.
Une classe est une description d’un groupe d’objets qui partagent un ensemble com-

mun de propriétés (propriétés), de comportements (opérations ou méthodes) et de

relations (associations et agrégations) avec d’autres objets.[N07]

29
3.3 Répartition des sprints

Une fois qu’on a déterminé le «backlog» du produit, nous le découpons en parties qui

s’appellent des «sprints». Le tableau suivant décrit la répartition de ces itérations :

<<Sprint 1 >> de priorité 1 jusqu’à 5.

<<Sprint 2 >> de priorité 6 jusqu’à 10.
test , login et automatisation
<<Sprint 3 >>
d’envoi des Emails.
Table 3.1 : «La répartition des sprints»

3.4 Les diagrammes

3.4.1 Diagramme de cas d’utilisation «Sprint 1»

Le diagramme suivant présente les cas d’utilisation de système au niveau du premier

«sprint».

30
 Figure 3.2 – «Diagramme de cas d’utilisation du «sprint1»

3.4.2 Diagramme de classes «Sprint 1»

Le diagramme ci-dessous représente les classes nécessaires dans le « sprint 1 ».

31
Figure 3.3 – Diagramme de classe du «sprint 1»

32
3.4.3 Diagramme de séquence «Sprint 1» Ajouter, supprimer et modifier utilisateur

Figure 3.4 – Diagramme de sequence Ajouter utilisateur du «sprint 1»

33
Figure 3.5 – Diagramme de sequence Modifier utilisateur du «sprint 1»

34
Figure 3.6 – Diagramme de sequence Supprimer utilisateur du «sprint 1»

35
3.4.4 Diagramme de cas d’utilisation «Sprint 2»

Le diagramme ci-dessous présente les cas d’utilisations de système au niveau du « sprint

2 ».

Figure 3.7 – Diagramme de cas d’utilisation du «sprint 2»

36
3.4.5 Diagramme de classes «Sprint 2»

Le diagramme ci-dessous présente les classes de système au niveau du « sprint 2 ».

Figure 3.8 – Diagramme de classe du «sprint 2»

3.4.6 Diagramme de séquence «Sprint 2» Ajouter testeur

37
Figure 3.9 – Diagramme de sequence Ajouter testeur du «sprint 2»

38
3.4.7 Diagramme de cas d’utilisation «Sprint 3»

Le diagramme ci-dessous présente les cas d’utilisations de système au niveau du « sprint

3 ».

Figure 3.10 – Diagramme de cas d’utilisation du «sprint 3»

39
3.4.8 Diagramme de classes «Sprint 3»

Le diagramme ci-dessous présente les classes de système au niveau du « sprint 3 ».

Figure 3.11 – Diagramme de classe du «sprint 3»

3.4.9 Diagramme de séquence «Sprint 3» Authentifier

40
Figure 3.12 – Diagramme de sequence Authentifier «sprint 3»

41
3.5 Conclusion

Tout au long de ce chapitre, nous avons décrit les différents aspects conceptuels de

notre travail,nous avons aussi généré les différents diagrammes des 3 sprints nous passons
maintenant u dernier volet « Réalisation» ou on va décrire l’environnement matériel et
logiciel et nous allons finir par des captures sur l’application réalisé.

42
Chapitre 4

REALISATION

43
Introduction

Le choix des outils de développement est l’un des sujets les plus exigeant, c’est trés

important de faire le bon choix pour le simple raison de faciliter le développement , main-
tenance et quarantir une performance.
à cet égard, nous allons commencer par le choix de la technologie adéquate , ensuite nous

allons faire une présentation sur les frameworks utilisés , l’architercture logicielle adapté
pour présenter finalement les differents interfaces homme machine.

4.1 Environnement de travail

Nous allons présenter dans cette partie les choix relatif à l’environnement matériel ainsi

que l’environnement logiciel

4.1.1 Environnement matériel

La réalisation de cette application a été effectuée en utilisant un ordinateur portable avec

les caractéristiques suivants :

Marque DELL PC PORTABLE G3 3579
Processeur Intel Core i7 8750H CPU @ 2.20GHz
Mémoire 12,00 GO
Disque Dur 128GO SSD + 1TO HDD
Carte Graphique Nvidia geforce GTX 1050 , 4GO
Systéme d’exploitation Windows 11 Professionnel

Table 4.1 – Environnement matériel

4.1.2 Environnement logiciel

4.1.3 Technologies utilisées

Nous avons travaillé sur plusieurs framework et logiciel pour pouvoir réaliser cette ap-
plications qui sont :

• VS Code :

44
 Figure 4.1 – VS code [N08]

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et macOS. Les fonctionnalités incluent la prise en charge du dé-
bogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les

snippets, la refactorisation du code et Git intégré. Les utilisateurs peuvent modifier le

thème, les raccourcis clavier, les préférences et installer des extensions qui ajoutent
des fonctionnalités supplémentaires.[N08]

• Angular :

Figure 4.2 – Angular [N09]

Angular (communément appelé ”Angular 2+” ou ”Angular v2 et plus”) est un frame-

work côté client, open source, basé sur TypeScript, et co-dirigé par l’équipe du projet

« Angular » à Google et par une communauté de particuliers et de sociétés. Angular

est une réécriture complète d’AngularJS, cadriciel construit par la même équipe. Il
permet la création d’applications Web et plus particulièrement de ce qu’on appelle

des « Single Page Applications » : des applications web accessibles via une page web
unique qui permet de fluidifier l’expérience utilisateur et d’éviter les chargements de

45
 pages à chaque nouvelle action. Le Framework est basé sur une architecture du type
MVC et permet donc de séparer les données, le visuel et les actions pour une meilleure
gestion des responsabilités. Un type d’architecture qui a largement fait ses preuves et

qui permet une forte maintenance et une amélioration du travail collaboratif.[N09]

• Node JS :

Figure 4.3 – Node JS [N10]

Node.js est une plate forme logicielle libre en JavaScript, orientée vers les applica-

tions réseau événementielles hautement concurrentes qui doivent pouvoir monter en

charge.

Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle d’évènements, et
implémente sous licence MIT les spécifications CommonJS.

Parmi les modules natifs de Node.js, on retrouve http qui permet le développement de

serveur HTTP. Ce qui autorise, lors du déploiement de sites internet et d’applications

web développés avec Node.js, de ne pas installer et utiliser des serveurs webs tels que
Nginx ou Apache.

Concrètement, Node.js est un environnement bas niveau permettant l’exécution de

JavaScript côté serveur.

Node.js est utilisé notamment comme plate forme de serveur Web.[N10]

• Express JS :

46
 Figure 4.4 – Express JS [N11]

Express.js est un framework pour construire des applications web basées sur Node.js4.
C’est de fait le framework standard pour le développement de serveur en Node.js5.
L’auteur original, TJ Holowaychuck, le décrit comme un serveur inspiré de Sinatra

dans le sens qu’il est relativement minimaliste tout en permettant d’étendre ses fonc-
tionnalités via des plugins.[N11]

• SQL server :

Figure 4.5 – SQL server [N12]

Microsoft SQL Server est un système de gestion de base de données (SGBD) en lan-
gage SQL incorporant entre autres un SGBDR (SGBD relationnel ») développé et

commercialisé par la société Microsoft. Il fonctionne sous les OS Windows et Linux

(depuis mars 2016).[N12]

• POSTMAN :

47
 Figure 4.6 – POSTMAN [N13]

Postman est une application permettant de tester des API, créée en 2012 par Abhinav
Asthana, Ankit Sobti et Abhijit Kane à Bangalore pour répondre à une problématique

de test d’API partageable. D’abord module complémentaire de Google Chrome, puis

client lourd, et finalement client léger, elle est à présent utilisée par plus de 500 000
entreprises dans le monde et a son siège à San Francisco.[N13]

• Lucidchart :

Figure 4.7 – Lucidchart [N14]

Lucidchart est une plate forme de collaboration en ligne, basée sur le cloud, per-
mettant la création de diagrammes et la visualisation de données, et autres schémas

conceptuels.

La startup1 hébergeant Lucidchart a été lancée en décembre 2008, et est basée à Salt
Lake City. Cette solution constitue une alternative à Microsoft Visio, avec lequel Lu-

cidchart est compatible.[N14]

48
4.2 Présentation de l’application réalisée

Figure 4.8 – Interface Login

Figure 4.9 – Interface Dashboard

49
Figure 4.10 – Interface Ajouter un fichier excel

Figure 4.11 – Interface Ajout d’un testeur

50
Figure 4.12 – Interface affichage liste des testeurs

Figure 4.13 – Interface Ajout des mesures

51
 Figure 4.14 – Interface Affichage du liste des mesures

4.3 Conclusion

dans ce chapitre final , nous avons décrit l’environnement matériel et logiciel utilisé

dans la réalisation de ce projet , et nous avons terminé par des captures sur les différents
interfaces et fonctionnalité du l’application Réalisé.

52
Conclusion générale et perspective

Sagemcom, étant consciente de l’importance du principe de l’intégration continue dans

l’amélioration du rendement de ses produits, nous a chargé de proposer une solution per-
mettant de prévenir les dérives du processus de fabrication sur les différents outils de me-
sure de production.

Le travail réalisé dans ce cadre consiste à concevoir et à développer une application web
qui permet d’afficher les cartes de contrôles pour pouvoir générer des gaussiennes ou KPI

par opération ressource & produits dans le but de contrôler les dérives de fabrication.

Ce projet apporte de bénéfices pour la société tel que l’évolution de la qualité des pro-

duits.

Ce stage de fin d’études était une expérience enrichissante et fructueuse qui nous a per-

mis d’acquérir un ensemble de compétences, Sur le plan technique, Nous avons eu l’op-
portunité pour mieux maîtriser des framework comme Node JS, Express JS dans la partie
du «backend» et angular dans la partie du «Frontend» , Manipuler des environnements de

travail comme VS code , SQL server pour la base de données , Lucidchart , et POSTMAN
pour tester les APIs en suivant l’architecture MVC et nous avons acquis de nouveaux as-
pects théoriques et technologiques, à savoir SCRUM .Sur le plan professionnel , il nous a

permis d’avoir l’opportunité de nous intégrer dans l’environnement d’entreprise et d’amé-

liorer nos capacités de communication et d’adaptation à la vie professionnelle .

53
Bien que l’objectif final de l’application soit atteint, nous envisageons d’ajouter des amé-
liorations à l’application, Nous citons essentiellement :

- L’ajout d’un module SMTP qui permet d’envoyer des emails.

- L’ajout d’une fonction d’exportation du résultat en PDF.

54
NETOGRAPHIE :

[N01] Sagemcom : https://www.sagemcom.com/fr

[N02] SCRUM : https://www.piloter.org/projet/methode/scrum.htm
[N03] UML : https://incrementum.fr/tag/modelisation/

[N04] MVC : https://mouradev.wordpress.com/2015/10/29/le-pattern-mvc/

[N05] Diagramme de cas d’utilisation : https://laurent-audibert.developpez.
com/Cours-UML/

[N06] Diagramme de séquence : https://laurent-audibert.developpez.com/Cours-UML/

[N07] Diagramme de classe : https://laurent-audibert.developpez.com/Cours-UML/
[N08] VS code : https://fr.wikipedia.org/wiki/Visual_Studio_Code

[N09] Angular : https://fr.wikipedia.org/wiki/Angular

[N10] Node JS : https://fr.wikipedia.org/wiki/Node.js
[N11] Express JS : https://fr.wikipedia.org/wiki/Express.js

[N12] SQL server : https://fr.wikipedia.org/wiki/Microsoft_SQL_Server

[N13] POSTMAN : https://fr.wikipedia.org/wiki/Postman_(logiciel)
[N14] Lucidchart : https://fr.wikipedia.org/wiki/Lucidchart

55
 Résumé :
Dans le cadre de notre projet de fin d’études a la faculté des sciences mathématiques, phy-
siques et naturelles de Tunis pour l’obtention du diplôme national de licence en science

informatiques,nous avons effectué notre stage au sein de la société « Sagemcom ». Ce pro-

jet a été réalise pendant 4 mois.
L’objectif du projet fut le développement et la mise en place d’une application web dédiée

aux agents de sagemcom . Cette application a pour but de prévoir les dérives de processus
de fabrication a partir les cartes de contrôles.
Mots Clés : Application Web , Angular , Node JS , Express JS , MVC.

abstract :
As part of our end-of-study project at the Faculty of Mathematical, Physical and Natural

Sciences of Tunis to obtain the national degree in computer science, we carried out our
internship within the company ”Sagemcom”. This project was carried out for 4 months.
The objective of the project was to develop and implement a web application dedicated to

sagemcom agents. This application aims to predict the deviations of manufacturing pro-
cesses from control charts.
Keywords : Web application , Angular , Node JS , Express JS , MVC.

56