‫ا لجمهور ية التونسية‬

‫وزارة التعليم العالي و‬

‫البحث العلمي‬
‫جامعة تونس‬
‫المدرسة الوطنية العليا‬
‫للمهندسين بتونس‬

Rapport de Stage d’été

de

Première année en Génie Informatique

Présenté et soutenu publiquement le --/10/2023

Par

Banaoues Ashraf

Application Web pour la Recueil des Besoins

des Clients et l’Initiation des Projets

Année universitaire : 2023-2024

5, Avenue Taha Hussein – Tunis Tel. : 71 496 066 :‫الهاتف‬ ‫ شارع طه حسين ـ تونس‬،5
B. P. 56, Bab Menara 1008 Fax : 71 391 166:‫فاكس‬ 1008 ‫ باب منارة‬56 :.‫ ب‬.‫ص‬
 Dédicace

Je dédie ce projet à mes chers parents, mes professeurs et à tous mes collègues.

I
 Remerciements

Je souhaite exprimer ma profonde gratitude envers toute l'équipe pédagogique de l'École

Nationale Supérieure d'Ingénieurs de Tunis. Chacun des membres de cette équipe a joué un rôle
déterminant dans la réussite de mon travail, et je tiens à les remercier sincèrement.

Avant d'entamer la rédaction de ce rapport, je saisis cette opportunité pour adresser mes
premiers remerciements à Monsieur Ahmed Aounallah , mon encadrant. Son encouragement
tout au long de ce projet ainsi que sa généreuse contribution en termes de formation et de
supervision ont grandement contribué à sa réalisation.

Mes sincères remerciements s'adressent également aux membres du jury, dont je suis honorée
qu'ils aient accepté d'évaluer notre travail. Votre participation donne une dimension
significative à mes efforts, et je vous en suis reconnaissante.

II
 Table des matières

Introduction générale.................................................................................................................. 6
Chapitre 1. Présentation du cadre du projet ........................................................................ 7
1. Présentation de l’entreprise ........................................................................................ 7
Devagnos .............................................................................................................. 7
2. Contexte du projet ...................................................................................................... 8
.3 Description du travail demandé.................................................................................. 8
Chapitre 2. Etude détaillée ................................................................................................ 10
1. Spécification des besoins ......................................................................................... 10
1.1 Identification des acteurs .................................................................................... 10
1.2 Identification besoins fonctionnels..................................................................... 11
1.3 Identification des besoins non fonctionnels ....................................................... 12
2. Présentation du dictionnaire des données épuré ....................................................... 13
3. Règles de gestion ...................................................................................................... 14
4. Modèle conceptuel de données ................................................................................ 15
5. Modèle logique de données ...................................................................................... 16
Chapitre 3. Etude technique .............................................................................................. 19
1. Environnement matériel ........................................................................................... 19
2. Environnement logiciel ............................................................................................ 19
3. Méthode de travail .................................................................................................... 22
4. Modèle physique de données ................................................................................... 24
Chapitre 4. Réalisation et mise en œuvre .......................................................................... 26
1. Architecture globale de la solution........................................................................... 26
2. Réalisation du site web ............................................................................................. 26
2.1 Page d’accueil ................................................................................................. 27
2.2 Authentification .............................................................................................. 27
2.3 Inscription ....................................................................................................... 28
2.4 Profil de l’utilisateur ....................................................................................... 30
2.5 Dashboard du Développeur ............................................................................ 31
2.6 Lancement d’un nouveau projet ..................................................................... 33
Conclusion générale ................................................................................................................. 34
Bibliographie ............................................................................................................................ 35

III
 Table des figures

Figure 1: Logo DEVAGNOS 7

Figure 2: Modèle conceptuel de données 16
Figure 3: Modèle logique de données 17
Figure 4: Méthode Scrum 23
Figure 5: Trello 23
Figure 6: Git 24
Figure 7: GitHub 24
Figure 8: Modèle physique de données 25
Figure 9:Architecture des trois tiers 26
Figure 10: La page d'accueil 27
Figure 11: Page d'authentification 28
Figure 12: interface d'inscription Client 28
Figure 13:exemple de création d'un compte 29
Figure 14 : création de Compte utilisateur 29
Figure 15: Vérification du Formulaire 30
Figure 16: Profil de l'utilisateur 31
Figure 17: Dashboard utilisateur 32
Figure 18: Page de Lancement Projet Web 33

IV
 Table des tableaux
Tableau 1: Dictionnaire des données épuré.............................................................................. 14
Tableau 2: Règles de gestion .................................................................................................... 15
Tableau 3: Environnement matériel ......................................................................................... 19
Tableau 4: Environnement logiciel .......................................................................................... 22

V
Introduction générale

Mon stage au sein de l'entreprise DEVAGNOS a représenté une étape cruciale

dans mon apprentissage en informatique. J'ai eu la chance de contribuer à un
projet passionnant : la conception et le développement d'une application Web de
Recueil des Besoins des Clients et l’Initiation des Projets pour satisfaire les
besoins de nos clients.

Ce rapport retrace mon expérience, de mes premiers jours au sein de l'entreprise

jusqu'à la réalisation du projet. Il mettra en lumière les compétences acquises, les
défis relevés, et les enseignements tirés. Mon objectif est de partager mon
parcours tout en exprimant ma gratitude envers toute l'équipe de Devagnos pour
son soutien et ses opportunités.

Ce stage d'été revêt une importance particulière dans mon parcours, car il m'a
permis de développer et de mettre en application les compétences et les
connaissances que j'ai acquises au cours de ma première année au cycle ingénieur
à l'École Nationale Supérieure d'Ingénieurs de Tunis. J'espère que ce rapport sera
une source d'inspiration pour les étudiants et les professionnels du domaine de
l'informatique, tout en reflétant mon engagement envers l'apprentissage continu,
l'innovation, et l'excellence.

6
 Chapitre 1. Présentation du cadre du projet

Introduction
Dans cette section introductive, nous allons éclairer l'entreprise qui sert de toile de fond à
notre projet et offrir une vue d'ensemble des circonstances qui entourent notre mission. Cette
introduction vise à établir le contexte du travail qui nous a été confié.

1. Présentation de l’entreprise
Devagnos
Fondée en 2015 , Devagnos est spécialisée dans les solutions basées sur le web et les
applications mobiles. Nous offrons des solutions de pointe avec les dernières
technologies mondialement reconnues.

Figure 1: Logo DEVAGNOS

Implantée dans l'une des principales villes de Tunisie, Monastir, Devagnos a pour
mission de fournir des services sans faille à nos clients. Cela leur permet de construire
des projets et des campagnes durables et réussis plus facilement.
Son équipe expérimentée de développeurs et d'experts collabore de manière
transparente pour faciliter la mise en œuvre et la pérennité de leurs projets de
communication, de création de sites Internet, d’applicatifs web et de créativité
graphique..

7
 Dans un paysage numérique en constante évolution, où la sécurité et l'innovation sont
primordiales, Devagnos reste à l'avant-garde des avancées technologiques. Elle intègre
systématiquement chaque projet de mesures de sécurité robustes et de solutions
ingénieuses, préparant ainsi l'avenir des entreprises de ses clients.

2. Contexte du projet
L'entreprise "Devagnos" a évolué au fil des ans pour devenir un acteur majeur de l'industrie du
développement de jeux vidéo et de sites web. Cette évolution s'accompagne d'une croissance
constante du nombre de clients, de projets, et de besoins variés. Les clients de Maher Dev sont
divers, allant des petites start-ups aux grandes entreprises, chacun ayant des exigences
spécifiques en matière de développement. Cependant, la gestion efficace des besoins et leur
conversion en spécifications techniques claires et compréhensibles sont devenus un défi majeur
dans ce contexte dynamique. Le besoin d'une solution permettant de rationaliser ce processus
est devenu évident. C'est dans ce contexte que le projet "Application Web pour la Recueil des
Besoins des Clients et leur Conversion en Spécifications Techniques" prend tout son sens, en
visant à améliorer la manière dont l'entreprise gère les besoins des clients et à renforcer sa
compétitivité sur le marché en garantissant une communication transparente et efficace.

3. Description du travail demandé

Ce projet permet de faciliter et accélérer la réalisation des différents projets de l’entreprise .

Le travail demandé dans le cadre de ce stage consiste en la conception, le développement et la
mise en œuvre de l'application web susmentionnée. Plus précisément, nous serons chargés des
tâches suivantes :

• Analyse approfondie des besoins des clients pour la définition des fonctionnalités de
l'application.
• Conception de l'architecture de l'application, y compris l'interface utilisateur, les bases
de données, les fonctionnalités de collecte des besoins et de conversion en
spécifications techniques.
• Développement de l'application en utilisant des technologies web modernes,
garantissant la convivialité, la sécurité et la performance.
• Intégration de fonctionnalités de communication en temps réel pour la collaboration
entre les clients et l'équipe de développement.

8
 • Mise en œuvre de mesures de sécurité et de confidentialité pour protéger les données
sensibles des clients.
• Tests rigoureux pour garantir la qualité de l'application.
• Formation et soutien des utilisateurs, y compris les clients et le personnel de
l'entreprise.
• Documentation complète du projet, y compris des manuels d'utilisation, des guides de
maintenance, et des rapports de suivi.

Le travail demandé exigera des compétences en développement web, en conception

d'interface utilisateur, en gestion de projet, en sécurité des données, et en communication. Il
sera effectué en étroite collaboration avec l'équipe de développement et les clients de
l'entreprise pour s'assurer que l'application répond pleinement aux besoins et aux exigences
spécifiques du projet.

Conclusion

Ce premier chapitre joue un rôle fondamental pour établir les bases de notre travail à venir.
Dans ces pages initiales, nous avons présenté en détail l'entreprise qui nous a accueillis et avons
clarifié les contours du projet, ainsi que les responsabilités qui nous incombent. Alors que nous
aborderons le chapitre suivant, notre attention se portera sur une analyse approfondie du projet,
jetant ainsi les fondations nécessaires pour la suite de notre rapport de stage.

9
 Chapitre 2. Etude détaillée

Introduction

Ce chapitre présente une spécification détaillée des besoins essentiels adressés par notre
application web "Recueil des Besoins des Clients et Initiation des Projets". Il inclut également
une version simplifiée du dictionnaire des données, les règles de gestion, ainsi que les modèles
conceptuel et logique de données (MCD et MLD).

1. Spécification des besoins

La spécification des besoins représente le point de départ crucial pour tout projet de
développement d'application. Pendant cette phase, nous allons définir les exigences de notre
application et les regrouper en deux catégories : les besoins fonctionnels et les besoins non
fonctionnels.

1.1 Identification des acteurs

L'identification des acteurs est une étape essentielle dans la spécification des besoins de
l’application. Il est primordial de comprendre qui interagira avec l'application et quel sera leur
rôle.
Un acteur peut être défini comme étant une abstraction d’un rôle joué par une entité externe au
système.
Dans le cadre de notre solution, nous avons identifié les acteurs suivants :

• Les Clients : Les clients de l'entreprise "Devagnos" seront les principaux utilisateurs de
cette application. Ils seront chargés de soumettre leurs besoins et de collaborer avec
l'équipe de développement pour les projets en cours.

10
 • L'Équipe de Développement : Les développeurs, les chefs de projet et d'autres membres
de l'équipe interne de "Devagnos" joueront un rôle crucial dans la gestion des besoins
clients, la transformation de ces besoins en spécifications techniques et leur réalisation.
• Les Administrateurs : Les administrateurs de l'application auront pour tâche de gérer les
comptes d'utilisateurs, de garantir la sécurité des données, de superviser les projets et
d'assurer le bon fonctionnement de la plateforme.
• Les Responsables de Projet : Ils assureront la coordination des projets et veilleront à ce
que les spécifications techniques soient respectées.

1.2 Identification besoins fonctionnels

Les besoins fonctionnels de l'application sont les fonctionnalités spécifiques que les acteurs
utilisent pour accomplir leurs tâches. Ils définissent comment l'application doit répondre aux
exigences des utilisateurs.

Notre application se compose de deux modules distincts :

o Le module de gestion en coulisses (back-office)

o Le module accessible aux utilisateurs (front-office)

➢ La partie back-office :

La section back-office englobe les diverses fonctionnalités dédiées aux utilisateurs de

l'application qui sont nos Clients. Ces fonctionnalités incluent :

• Authentification : Chaque utilisateur doit s’authentifier avant d’avoir l’accès à la

plateforme d’administration (back-office).
• Choix du type du Projet.
• Lancement du Projet.
• La soumission structurée des besoins des clients, y compris la possibilité d'ajouter des
descriptions détaillées et des pièces jointes.

11
 • La transformation des besoins des clients en spécifications techniques claires et
compréhensibles.

➢ La partie front-office :

Pour les développeurs et les administrateurs l’application:

• Authentification : Chaque utilisateur doit s’authentifier avant d’avoir l’accès à

l’application.
• Gestion du compte : - inscription

- Consultation de son profil.

-Mise à jour du profil.

• Gestion de projets, y compris le suivi de l'avancement, l'affectation de tâches, et la

collaboration en temps réel.
• Génération de rapports sur les besoins soumis, les spécifications techniques, et
l'avancement des projets.
• Consultation de la Home Page : L'utilisateur peut consulter la page d'accueil pour
accéder à son compte et apporter les modifications requises. En outre, dans notre
contexte, il peut consulter les projets dont il est concerné, modifuer, supprimer ou
marquer une tâche comme achevée.

1.3 Identification des besoins non fonctionnels

Il y a plusieurs contraintes techniques et logicielles importantes à considérer. Le développement

de notre application web doit impérativement suivre un ensemble de règles et de meilleures
pratiques. L'objectif final est que l'application respecte ces normes.

• Sécurité :

La protection des données sensibles des clients, le cryptage des informations, et la

conformité aux normes de sécurité. Ceci inclut :

12
 - Authentification : Mise en place d'un système d'authentification robuste avec gestion
des rôles et permissions.

- Protection des Données : Assurer la sécurité des données traitées.

• Performances :

- Traitement de Données Volumineuses : L'application doit être rapide et réactive,

même avec un grand nombre d'utilisateurs et de projets en cours.

- Optimisations des Performances : Mises à jour périodiques pour améliorer les

performances globales de l'application.

• Convivialité : Une interface utilisateur intuitive et conviviale pour tous les acteurs de
l'application.
• Compatibilité et Conception Adaptative : Garantir que l'application est accessible et
fonctionnelle sur les appareils de bureau, les tablettes et les mobiles grâce à une
conception adaptative.

2. Présentation du dictionnaire des données épuré

Le tableau suivant présente le dictionnaire de données simplifié de notre projet, il inclut les
principaux attributs des entités ainsi que leurs types , longueurs et descriptions :

Nom Type de données Longueur Description

Id utilisateur Numérique (30) 30 Identifiant unique de
l'utilisateur
Nom du Client Texte (50) 50 Nom du client
Adresse Email Caractère variable (20) 20 Adresse email de
l'utilisateur
Mot de Passe Caractère variable (20) 20 Mot de passe de
l'utilisateur
Rôle Caractère variable (20) 20 Rôle de l'utilisateur
(client ou développeur)

13
 Id Projet Numérique (30) 30 Identifiant unique du
projet
Type Projet Caractère variable (20) 20 Type du projet
(web/jeu vidéo)
Description du Projet Texte (500) 500 Description du projet
soumis par le client
Date de Soumission du Date/Heure - Date de soumission du
Projet projet par le client
État du Projet Texte (20) 20 État actuel (en cours,
terminé, etc.)
Id Tâche Numérique (30) 30 Identifiant unique de la
tâche
Description de la Tâche Texte (500) 500 Description de la tâche
soumise par le client
État de la Tâche Texte (20) 20 État actuel de la tâche
(à faire, en cours,
terminé, etc.)
IdSpécifications Numérique (30) 30 Identifiant unique des
Techniques spécifications
techniques
Détails Techniques Texte (1000) 1000 Détails techniques
décrivant comment la
tâche doit être mise en
œuvre

Tableau 1: Dictionnaire des données épuré

3. Règles de gestion
Les règles de gestion sont importantes, car elles définissent les normes et les directives
essentielles pour la gestion des données. Elles garantissent la cohérence, l'intégrité et la sécurité
des informations stockées dans la base de données, contribuant ainsi à la fiabilité et à l'efficacité
du système.

14
 Nom Description Type de règle
Chaque utilisateur du site est
identifié par son identifiant
Utilisateur unique, un nom, un prénom, Description
par son adresse mail unique,
un mot de passe et son poste.
Le Client est un utilisateur
inscrit dans le site identifié
Clients par son identifiant unique, un Description
nom, un prénom, par son
adresse mail unique, un mot
de passe.
Un Projet est décrit par son
identifiant unique, son Type,
Projet une description, un état et des Description
règles.

Une Tache est décrite par son

Tâche identifiant unique, une Description
description, un état et des
règles.
Un client peut lancer un ou
plusieurs Projets alors que
Client-Projet qu’un projet aura un et un Fait
seul Client auquel il
appartient.

Un Utilisateur peut gérer une

ou plusieurs Taches alors
Utilisateur-Tache qu’une Tache aura un et un Fait
seul utilisateur dont il est
chargé.

Tableau 2: Règles de gestion

4. Modèle conceptuel de données

Un Modèle Conceptuel des Données (MCD) est une représentation simplifiée de la structure
du système d'information, mettant en évidence les données essentielles et leurs relations au sein
du système. Les données sont symbolisées par des entités, tandis que les règles de gestion sont
représentées par des associations. En utilisant le dictionnaire des données que nous avons
élaboré, ainsi que les règles de gestion correspondantes, nous avons pu construire aisément

15
notre MCD, où les données sont représentées par les entités et les règles par les associations.
Cette représentation est visualisée dans la figure suivante.

uti l i sateur cl i ent

i d-uti l <pi > Numéri que (30) <O> Nom_entrepri se Caractère vari abl e (50) <O>
Nom Caractère vari abl e (50) <O>
Prenom Caractère vari abl e (50) <O>
Heri tage_1
AdMai l Caractère vari abl e (20) <O>
Mdpasse Caractère vari abl e (20) <O> 0,n
Rôl e Caractère vari abl e (20) <O>
i d-uti l <pi >
...
Heri tage_2 Lancer

dével oppeur 1,1

département Caractère vari abl e (50) <O>
Proj et
i d_proj et <pi > Numéri que (30) <O>
type_proj et Caractère vari abl e (50) <O>
0,n
descri pti on_proj T exte (500) <O>
Date_soumi ssi on Date & Heure <O>
état_proj T exte (20) <O>
chargée par avancement_proj Numéri que (100) <O>
0,n
i d_proj et <pi >
...
1,n

tâches
se
i d_tâche <pi > Numéri que (30) <O> Heri tage_5 Heri tage_4
composer
descri pti on T exte (500) <O>
état_tâche T exte (20) <O> 1,n
avancement_tâche Numéri que (100) <O>
i d_tâche <pi >
... Heri tage_7

Heri tage_6
spec_techni que
détai l _techn i que T exte (50) <O>

web app mobi l e j eu vi déo

i d_templ ate <pi > Numéri que (30) <O> sys_expl oi tati on Caractère vari abl e (50) <O>
domai ne T exte (20) <O>
i d_templ ate <pi >
...

Figure 2: Modèle conceptuel de données

5. Modèle logique de données

16
 Le modèle logique de données est la transformation concrète du modèle conceptuel de données.
Il est essentiel pour le développement de l'application, car il établit la structure précise dans
laquelle les données seront stockées dans la base de données.
Le MLD de notre étude de cas est présenté dans la figure ci-dessous.
Figure 3: Modèle logique de données
client
utilisateur
Heritage_1 id-util <pi> Numérique (30) <O>
id-util <pi> Numérique (30) <O>
Nom Caractère variable (50) <O>
Nom Caractère variable (50) <O>
Prenom Caractère variable (50) <O>
Prenom Caractère variable (50) <O>
AdMail Caractère variable (20) <O>
AdMail Caractère variable (20) <O>
Mdpasse Caractère variable (20) <O>
Mdpasse Caractère variable (20) <O>
Rôle Caractère variable (20) <O>
Rôle Caractère variable (20) <O>
Nom_entreprise Caractère variable (50) <O>
id-util <pi>
id-util <pi>
...
...
Heritage_2

Lancer
développeur
id-util <pi> Numérique (30) <O>
Nom Caractère variable (50) <O>
Prenom Caractère variable (50) <O>
AdMail Caractère variable (20) <O>
Projet
Mdpasse Caractère variable (20) <O>
Rôle Caractère variable (20) <O> id_projet <pi> Numérique (30) <O>
département Caractère variable (50) <O> id-util <fi> Numérique (30) <O>
type_projet Caractère variable (50) <O>
id-util <pi>
description_proj Texte (500) <O>
...
Date_soumission Date & Heure <O>
chargée par état_proj Texte (20) <O>
se composer
avancement_proj Numérique (100) <O>
id_projet <pi>
chargée par
...
id-util <pi,fi2> Numérique (30) <O> se composer
id_tâche <pi,fi1> Numérique (30) <O>
id_projet <pi,fi1> Numérique (30) <O>
Identifiant_1 <pi> id_tâche <pi,fi2> Numérique (30) <O> Heritage_5 Heritage_4
...
Identifiant_1 <pi>
...
se composer
chargée par

Heritage_7

tâches
id_tâche <pi> Numérique (30) <O>
description Texte (500) <O>
état_tâche Texte (20) <O>
avancement_tâche Numérique (100) <O>
id_tâche <pi>
...

Heritage_6

spec_technique web jeu vidéo

id_projet <pi> Numérique (30) <O> id_projet <pi> Numérique (30) <O>
id_tâche <pi> Numérique (30) <O>
id_template <pi> Numérique (30) <O> id-util Numérique (30)
description Texte (500) <O>
id-util Numérique (30) type_projet Caractère variable (50) <O>
état_tâche Texte (20) <O>
type_projet Caractère variable (50) <O> description_proj Texte (500) <O>
avancement_tâche Numérique (100) <O>
détail_techn ique Texte (50) <O> description_proj Texte (500) <O> Date_soumission Date & Heure <O>
Date_soumission Date & Heure <O> état_proj Texte (20) <O>
id_tâche <pi> état_proj Texte (20) <O> avancement_proj Numérique (100) <O>
...
avancement_proj Numérique (100) <O>
id_projet <pi>
domaine Texte (20) <O>
...
id_template <pi>
...

app mobile
id_projet <pi> Numérique (30) <O>
id-util Numérique (30)
type_projet Caractère variable (50) <O>
description_proj Texte (500) <O>
Date_soumission Date & Heure <O>
état_proj Texte (20) <O>
avancement_proj Numérique (100) <O>
sys_exploitation Caractère variable (50) <O>
id_projet <pi>
...

17
Conclusion

Dans ce chapitre, nous avons défini avec précision les besoins fonctionnels et non fonctionnels
du projet, identifié les acteurs clés, et créé un diagramme de cas d'utilisation ainsi qu'un
dictionnaire de données. Le Modèle Conceptuel de Données (MCD) a été élaboré pour
représenter les entités et leurs relations. Ces étapes nous ont dotés d'une base solide pour la
conception et la mise en œuvre de notre projet, et le prochain chapitre se concentrera sur les
aspects techniques et la création du Modèle Logique de Données (MLD).

18
 Chapitre 3. Etude technique
Introduction
Dans ce chapitre, nous allons tout d’abord décrire l’environnement matériel et logiciel, ensuite
créer la base de données à partir du modèle conceptuel des données (MCD) et enfin procéder à
son alimentation.

1. Environnement matériel
Ce projet a été réalisé en utilisant un ordinateur ayant les caractéristiques suivantes :

Caractéristique PC

Processeur Intel CORE I7

Ram 24 GO

Système d’exploitation Windows 11

Tableau 3: Environnement matériel

2. Environnement logiciel
Le tableau 4 résume les logiciels que nous avons utilisés dans notre travail.

Logiciel Logo Description

PowerAMC est un logiciel de

modélisation. Il permet de modéliser
les traitements informatiques et leurs
PowerAMC bases de données associées. Il travaille
avec la méthode Merise. Cela permet
d’améliorer la modélisation, les
processus, le coût et la production
d'applications.
 Visual studio code ou VS Code est un
éditeur de code développé
par Microsoft en 2015. Quel que soit le
Visual Studio Code langage : Javascript, PHP, JAVA, C#,
C++ ou autres, il permet de développer
soit via les fonctionnalités par défaut
(pour le HTML, CSS, Javascript,
Typescript,…) ou en ajoutant des
extensions disponibles selon les
besoins de chacun. [2]

HTML (HyperText Markup Language)

est le bloc de construction le plus
basique du Web. Il définit le sens et la
structure du contenu Web. Il est utilisé
pour décrire l'apparence et la
présentation du site [3].
HTML

Les feuilles de style en cascade,

généralement appelées CSS de l'anglais
Cascading Style Sheets, forment un
langage informatique qui décrit la
présentation des documents HTML et
XML [4].
CSS

Postman est une plate-forme API pour

la création et l'utilisation d'API.
Postman simplifie chaque étape du
cycle de vie des API et rationalise la
Postman collaboration afin de créer et de tester
de meilleures API plus rapidement. [6]

20
 MySQL est un système de gestion de
base de données relationnelle
développé
par Oracle qui est basé sur un langage
de requête structuré (SQL). Avec
MySQL
MySQL, on peut créer des systèmes de
stockage de données rapides, puissants
et sécurisés. [7]

Le PHP, pour Hypertext Preprocessor,

désigne un langage informatique, ou un
langage de script, utilisé pour la
PHP conception de sites web dynamiques. Il
s'agit d'un langage de programmation
sous licence libre.[8]

Oracle Database est un système de

gestion
de base de données relationnelle
(SGBDR)
qui depuis l'introduction du support du
modèle objet dans sa version 8 peut
être
aussi qualifié de système de gestion de
base
Oracle Database
de données relationnel-objet
(SGBDRO).
Fourni par Oracle Corporation, il a été
développé par Larry Ellison,
accompagné
entre autres, de Bob Miner et Ed Oates
[9].

Une interface utilisateur graphique

gratuite,
Oracle SQL Developer, permet aux
utilisateurs et aux administrateurs de
base
de données d’effectuer leurs tâches de
Oracle SQL Developer basede données en moins de clics et de
frappes.
L’objectif principal de l’outil de
productivité SQL Developer est
d’aider
l’utilisateur final à gagner du temps et
à

21
 optimiser le retour sur investissement
dans
la pile technologique d’Oracle
Database [10].

Angular est une plate-forme et un

Framework permettant de créer des
applicationsclientes d'une seule page à
l'aide de HTML et de TypeScript.
Angular est écrit en TypeScript. Il
Angular
implémente les fonctionnalités de base
et facultatives sous la forme d'un
ensemble de bibliothèques TypeScript
que vous importez dans vos
applications[11].
Bootstrap Bootstrap est un framework
open-source de développement web
largement utilisé pour la création de
sites web et d'applications web
réactives et esthétiquement attrayantes.
Il a été développé par Twitter et est
maintenant maintenu par la
Bootstrap
communauté open source. Bootstrap
offre un ensemble de ressources
prédéfinies, y compris des styles, des
composants et des scripts JavaScript,
pour simplifier le processus de
conception et de développement
web.[12].

Tableau 4: Environnement logiciel

3. Méthode de travail

❖ Scrum Agile

Pour structurer notre travail, nous avons adopté la méthodologie Scrum agile dans notre
approche de gestion de projet. Scrum favorise la collaboration, la flexibilité et la
communication au sein de l'équipe de développement. Il repose sur des cycles de travail appelés
"sprints", généralement d'une durée de deux à quatre semaines, au cours desquels l'équipe se
concentre sur des objectifs spécifiques.

22
 Figure 4: Méthode Scrum

Nous avons utilisé la plateforme Trello pour subdiviser les tâches et estimer leur durée. Cette
approche nous a permis de mieux organiser notre travail et d'optimiser la gestion de projet.

Figure 5: Trello

23
 ❖ Git et GitHub

Nous avons également utilisé Git et GitHub pour le contrôle de version et la gestion de notre
code source.
Git est un système de gestion de versions décentralisé qui nous a permis de suivre les
modifications apportées au code et de collaborer efficacement au sein de l'équipe de
développement.

Figure 6: Git

GitHub, quant à lui, est une plateforme de développement collaborative basée sur Git, où nous
avons hébergé notre projet, suivi les problèmes, effectué des révisions de code et facilité la
collaboration avec d'autres contributeurs. Ces outils ont grandement contribué à la gestion
fluide de notre projet.

Figure 7: GitHub

4. Modèle physique de données

Un modèle physique de données (MPD) facilite l'analyse des tables, des vues et d'autres
éléments d'une base de données, en préparant leur mise en œuvre concrète dans un Système de
Gestion de Base de Données Relationnelle (SGBDR), notamment en utilisant le langage SQL.
La figure suivante présente notre MPD de manière illustrative.

24
 cl i ent
uti l i sateur
i d-uti l NUMBER(30) <pk,fk>
i d-uti l NUMBER(30) <pk>
Nom VARCHAR2(50)
Nom VARCHAR2(50)
Prenom VARCHAR2(50)
Prenom VARCHAR2(50)
AdMai l VARCHAR2(20)
AdMai l VARCHAR2(20)
Mdpasse VARCHAR2(20)
Mdpasse VARCHAR2(20)
Rôl e VARCHAR2(20)
Rôl e VARCHAR2(20)
Nom_entrepri se VARCHAR2(50)
...
...

dével oppeur
i d-uti l NUMBER(30) <pk,fk>
Nom VARCHAR2(50)
Prenom VARCHAR2(50)
AdMai l VARCHAR2(20)
Proj et
Mdpasse VARCHAR2(20)
Rôl e VARCHAR2(20) i d_proj et NUMBER(30) <pk>
département VARCHAR2(50) i d-uti l NUMBER(30) <fk>
... type_proj et VARCHAR2(50)
descri pti on_proj CLOB
Date_soumi ssi on DAT E
état_proj CLOB
avancement_proj NUMBER(100)
se composer
...
chargée par i d_proj et NUMBER(30) <pk,fk1>
i d-uti l NUMBER(30) <pk,fk2> i d_tâche NUMBER(30) <pk,fk2>
i d_tâche NUMBER(30) <pk,fk1>

tâches
i d_tâche NUMBER(30) <pk>
descri pti on CLOB
état_tâche CLOB
avancement_tâche NUMBER(100)
...

web j eu vi déo
spec_techni que
i d_proj et NUMBER(30) <pk,fk> i d_proj et NUMBER(30) <pk,fk>
i d_tâche NUMBER(30) <pk,fk>
i d_templ ate NUMBER(30) <pk> i d-uti l NUMBER(30)
descri pti on CLOB
état_tâche CLOB i d-uti l NUMBER(30) type_proj et VARCHAR2(50)
type_proj et VARCHAR2(50) descri pti on_proj CLOB
avancement_tâche NUMBER(100)
descri pti on_proj CLOB Date_soumi ssi on DAT E
détai l _techn i que CLOB
... Date_soumi ssi on DAT E état_proj CLOB
état_proj CLOB avancement_proj NUMBER(100)
avancement_proj NUMBER(100) ...
domai ne CLOB
...

app mobi l e
i d_proj et NUMBER(30) <pk,fk>
i d-uti l NUMBER(30)
type_proj et VARCHAR2(50)
descri pti on_proj CLOB
Date_soumi ssi on DAT E
état_proj CLOB
avancement_proj NUMBER(100)
sys_expl oi tati on VARCHAR2(50)
...

Figure 8: Modèle physique de données

Conclusion

Dans ce chapitre, nous avons présenté les étapes de développement de notre application en
exposant d’abord l’environnement matériel et logiciel ainsi que les choix technologiques et les
outils adoptés.

25
 Chapitre 4. Réalisation et mise en œuvre
Introduction

La phase finale du processus de développement englobe l'intégration de l'application en utilisant

les technologies sélectionnées. Cette étape conclut le rapport en fournissant une vue d'ensemble
architecturale du projet ainsi qu'une présentation détaillée des réalisations accomplies.

1. Architecture globale de la solution

L'architecture trois tiers, aussi appelée architecture à trois niveaux ou architecture à trois
couches, est l'application du modèle plus général qu'est le multi-tiers. L'architecture logique du
système est divisée en trois niveaux ou couches :
• Couche de présentation: correspondant à l'affichage, la restitution sur le poste de
travail, le dialogue avec l'utilisateur. Elle peut aussi être représentée en HTML pour être
exploitée par un navigateur web
• Couche de traitement: correspondant à la mise en œuvre de l'ensemble des règles de
gestion et de la logique applicative
• Couche d'accès aux données: correspondant aux données qui sont destinées à être
conservées sur la durée, voire de manière définitive
C'est une architecture basée sur l'environnement client–serveur [14].

Figure 9:Architecture des trois tiers

2. Réalisation du site web

26
 2.1 Page d’accueil

La première page que les visiteurs découvriront en arrivant sur notre site est la page d'accueil.
Cette page est ouverte à tous les utilisateurs.

Figure 10: La page d'accueil

2.2 Authentification

L'interface de connexion sécurisée permet aux utilisateurs de s'authentifier de manière fiable et

protégée.
L’administrateur, qu’il soit un client ou un développeur, doit saisir son email et son mot de
passe qui sont transmis de manière chiffrée au serveur. S’ils sont corrects, il a la possibilité
d’accéder aux fonctionnalités du site. Sinon, un message d’erreur est affiché. Des mesures de
sécurité, comme le hachage des mots de passe et l'authentification à deux facteurs, renforcent
la protection des données. Enfin, une option de backup est fournie pour permettre aux
utilisateurs de réinitialiser leur mot de passe, au cas où il l’ont oublié, suivant des mesures bien
sécurisées.

27
 Figure 11: Page d'authentification

2.3 Inscription
Cette figure représente l'interface par laquelle Nos Clients peuvent s'inscrire et enregistrer leurs
informations dans la base de données.

Figure 12: interface d'inscription Client

28
Après la création du compte, avec des informations valides, la page de connexion s’affiche
directement avec un message de validation. Le client peut désormais se connecter à notre
plateform à travers som mail et le mot de passe qu’il a créé.

Figure 13:exemple de création d'un compte

La page d’inscription pour les administrateurs/développeurs n’est pas accessible à travers la

plateforme en ligne, un mail contenant un lien confidentiel est envoyé par l’administration à
la personne concerné. Voilà une figure illustrant le contenu de cette page :

Figure 14 : création de Compte utilisateur

29
En créant un nouveau compte, des messages d’erreurs peuvent être affichés dans des
différents cas :

• L’existence dans la base des données du Mail/Mot de Passe …

• L’inexistance du département donné au sein de l’entreprise
• La Discordance du mot de passe

Figure 15: Vérification du Formulaire

2.4 Profil de l’utilisateur

Cette interface affiche le profil de l'utilisateur tout en mettant en évidence la fonctionnalité de

mise à jour de ses informations via le bouton "Save changes".

30
 Figure 16: Profil de l'utilisateur

2.5 Dashboard du Développeur

Une fois Connecté, l’administrateur/Le développeur se trouve face à un Dashboard qui
contient certaines fonctionnalités :

• Statistiques des revenues Mensuelles et Annuelles

• Statistique de l’avancement des tâches dont il est chargé
• Nombre de messages reçu par des clients
• Un SideBar contenant :

▪ Une liste déroulante des Projets en cours et Projets réalisés

▪ Une liste déroulante des Taches en cours et Projets réalisés
▪ Paramètres
▪ Graphes
▪ Espace de l’équipe où il y’a une discussion du groupe entre les membres de
l’équipe

31
Figure 17: Dashboard utilisateur

32
 2.6Lancement d’un nouveau projet
En cliquant sur le Bouton « Get Started ! » dans la page d’accueil, et en sélectionnant le type
du Projet (un site web dans cet exemple), le système vous envoie à la page du lancement du
projet où on trouve un formulaire bien guidé pour définir les Principaux besoins du client
suivant des templates où une description fournie par le client.

Figure 18: Page de Lancement Projet Web

33
Conclusion
Le dernier segment de ce chapitre s'est concentré sur la présentation des résultats obtenus avec
notre plateforme, notamment en ce qui concerne l'architecture et les interfaces de la solution
achevée.

Après une première évaluation, il est clair que nous pouvons ressentir une certaine satisfaction
quant à la performance de notre solution. Toutefois, nous reconnaissons également qu'il existe
des opportunités d'amélioration significatives pour mieux répondre aux besoins à une échelle
plus large et pour continuer à évoluer en adéquation avec les attentes des utilisateurs et les
développements technologiques.

Conclusion générale

Au cours de ma première année d'études en génie informatique, j'ai eu l'opportunité de réaliser

un stage au sein de l'entreprise Devagnos.
Cette expérience s'est révélée extrêmement instructive, me permettant de plonger au cœur du
domaine de l'informatique.
La création de notre plateforme de recueil des besoins des clients et d'initiation des projets a été
une expérience riche en enseignements. Ce projet a été l'occasion d'appliquer les compétences
techniques acquises durant ma formation en ingénierie informatique à l'École Nationale
Supérieure d'Ingénieurs de Tunis.
En somme, cette plateforme simplifie le processus de recueil des besoins des clients, améliore
la conversion de ces besoins en spécifications techniques et favorise une communication fluide.
Mon engagement envers l'apprentissage continu persiste, et je suis enthousiaste à l'idée de
poursuivre des projets similaires. Cette expérience a consolidé ma conviction que l'innovation
et l'excellence sont essentielles dans le domaine de l'informatique
De plus, j'ai eu l'opportunité de développer un éventail de compétences essentielles pendant ce
stage, notamment la capacité à assimiler rapidement de nouveaux langages et logiciels. J'ai
également renforcé ma capacité à travailler en équipe et ma détermination à atteindre tous les
objectifs fixés, même lorsque leur réalisation semblait initialement ardue.
Mon travail sur cette plateforme constitue un jalon important dans mon parcours professionnel,
et je suis reconnaissant pour les opportunités offertes par l'entreprise Devagnos.

34
Bibliographie

https://angular.io/
https://flask.palletsproject
s.com/en/2.2.x/
https://github.com/
https://www.w3schools.co
m/
https://material.angular.io/
https://getbootstrap.com/
https://www.mysql.com/fr/

35
 Résumé

Ce projet réaliѕé au ѕein de Devagnos, ѕ’inѕcrit danѕ le cadre de notre Stage d’été au ѕein de
l’École Nationale Ѕupérieure d’Ingénieurѕ de Tuniѕ. Il conѕiѕte à concevoir et développer une
application web permettant aux clients de spécifier leurs besoins et initialiser leurs projets en
coordination avec les développeurs de l’entreprise afin de faciliter la communication . Pour le
conduire, nouѕ avonѕ utiliѕé la méthodologie Agile Ѕcrum et pour le réaliѕer nouѕ avonѕ utiliѕé
certains logiciels de développement web et de gestion de base de données comme HTML, CSS,
Angular, PHP, MySQL.
Motѕ cléѕ : Spécifier les besoins, initiation des projets, HTML, CSS, Angular, PHP , MySQL.

Abstract

This project, carried out at Devagnos, is part of our Summer Internship at the National School
of Engineers in Tunis. It involves designing and developing a web application that allows clients
to specify their needs and initiate their projects in coordination with the company's developers
to facilitate communication. To manage it, we used the Agile Scrum methodology and, for its
implementation, we used various web development and database management software such as
HTML, CSS, Angular, PHP, and MySQL.
Keywords: Specifying needs, project initiation, HTML, CSS, Angular, PHP, MySQL.

‫الملخص‬

.‫ هو جزء من فترة التدريب الصيفي لدينا في المدرسة الوطنية للمهندسين بتونس‬،‫ الذي تم تنفيذه في ديفاغنوس‬،‫هذا المشروع‬
.‫يشمل تصميم وتطوير تطبيق يتيح للعمالء تحديد احتياجاتهم وبدء مشاريعهم بالتنسيق مع مطوري الشركة لتسهيل التواصل‬
‫ استخدمنا العديد من برامج تطوير الويب وإدارة قواعد البيانات مثل‬،‫ ولتنفيذه‬Agile Scrum ‫ استخدمنا منهجية‬،‫إلدارته‬
.MySQL ‫ و‬PHP ‫ و‬Angular ‫ و‬CSS ‫ و‬HTML
MySQL ،PHP ،Angular ،CSS ،HTML ،‫ بدء المشروع‬،‫ تحديد االحتياجات‬:‫الكلمات الرئيسية‬

36