Rapport de Projet d’intégration

Sujet :
DEVELOPPEMENT D’UNE
APPLICATION WEB DE SIMULATION
DE MARCHE

Encadré par : Réalisé par :

-Mr Mustapha Trabelsi SASSI YASSER
-Mme Sheema Saadi
 TABLE DES MATIÈRES

TABLE DES FIGURES .......................................................................................................................................................................... iii

CHAPITRE 1. CONTEXTE DU PROJET ................................................................................................................................... 7

1.1 CADRE GÉNÉRAL DU PROJET .................................................................................................................................... 7

1.1.1 Présentation du sujet..............................................................................................................7

1.1.2 Description du sujet ...............................................................................................................7

1.2 ETUDE DE L’EXISTANT .......................................................................................................... 8

1.2.1 Applications disponibles sur le marché .......................................................................................8

1.2.2 Comparaisons des principales fonctionnalités .................................................................. 9

1.3 Problématique ..................................................................................................................................9

1.4 Solution proposée............................................................................................................................. 10
CHAPITRE 2. ANALYSE ET SPÉCIFICATION DES BESOINS ET CONCEPTION..........................................................11

2.1 ANALYSE ET SPÉCIFICATION DES BESOINS .......................................................................................................... 11

2.1.1 Acteurs .................................................................................................................................. 11
2.1.2 Diagramme de cas d’utilisation global .................................................................................. 12
2.1.3 Diagramme de classe............................................................................................................. 13
2.1.4 Diagramme séquence objet.................................................................................................... 13
2.1.5 Spécification des besoins....................................................................................................... 14
2.1.5.1 Besoin fonctionnels...................................................................................................... 14

2.1.5.2 Besoins non fonctionnels .............................................................................................. 15

2.2 CONCEPTION ................................................................................................................................................................... 17

2.2.1 Conception générale............................................................................................................. 17
2.2.1.1 Architecture logique ................................................................................................... 17

2.2.1.2 Architecture physique ................................................................................................. 18

CHAPITRE 3. RÉALISATION ...................................................................................................................................................20

3.1 ENVIRONNEMENT DE TRAVAIL.............................................................................................................................. 20

3.1.1 Environnement logiciel........................................................................................................ 20
3.2 OUTILS ET TECHNOLOGIES ...................................................................................................................................... 22
 3.2.1 Langage de programmation................................................................................................. 22
3.2.2 Choix technique .................................................................................................................. 23
3.3 DESCRIPTION DE L'APPLICATION........................................................................................................................... 24
3.3.1 Interface d’authentification.................................................................................................. 25
3.3.2 Interface d’inscription ...........................................................................................................25
3.3.3 Interface Dashboard ............................................................................................................ 26

ii

Conclusion et perspectives ............................................................................................................................... 27

BIBLIOGRAPHIE ................................................................................................................................................................................. 28
 iii

LISTE DES FIGURES

FIGURE 1 : DIAGRAMME DE CAS D’UTILISATION GLOBAL ............................................... 12

FIGURE 2 : DIAGRAMME DE CLASSE ....................................................................................... 13

FIGURE 3 : DIAGRAMME DE SÉQUENCE OBJET .................................................................... 13

FIGURE 4 : ARCHITECTURE LOGIQUE ..................................................................................... 18

FIGURE 5 : DIAGRAMME DE DÉPLOIEMENT ......................................................................... 18

FIGURE 7- INTERFACE D’AUTHENTIFICATION....................................................................... 24

FIGURE 10- INTERFACE D’INSCRIPTION ..................................................................................25

FIGURE 11- INTERFACE DE L’ESPACE ADMINISTRATEUR ................................................... 25

 CHAPITRE I CONTEXTE DU PROJET

1- Contexte du projet

1.1 CADRE GÉNÉRAL DU PROJET

Dans cette première partie, nous introduirons l'idée fondamentale de
notre projet. La deuxième section sera dédiée à la description du sujet
en détail.

1.1.1 Présentation du sujet

Notre mission dans ce projet consiste à concevoir et à développer une
application web pour gérer un simulateur de salle de marché.

1.1.2 Description du sujet

Cette application vise à familiariser les traders, qu'ils soient débutants

ou expérimentés, avec le trading et l'investissement, tout en offrant des

ressources pédagogiques de qualité.

Les objectifs principaux du projet sont les suivants :

Créer une expérience interactive et éducative pour l'apprentissage du

trading et de l'investissement.

Fournir des outils permettant la pratique du trading avec divers actifs

financiers et l'accès à des informations de marché en temps réel.

De plus, l'application propose un volet éducatif comprenant :

Modules de formation interactifs sur le trading et l'investissement.

Simulateurs de trading avancés, cours en ligne, tests de niveau et

concours pour favoriser un apprentissage actif.

En combinant des informations financières approfondies avec une

gestion sécurisée et efficace des comptes et des contenus, la plateforme

offre une expérience utilisateur optimale

7
1.2 ETUDE DE L’EXISTANT
Il est crucial d'analyser de manière approfondie le contexte actuel lié à notre
sujet. Cette étape implique l'examen des applications existantes sur le
marché et des données disponibles. En comprenant l'état actuel, nous
sommes en mesure d'identifier les forces en présence, les éventuelles
lacunes et les opportunités d'amélioration.

1.2.1 Applications disponibles sur le marché

ThinkOrSwim :

Thinkorswim est une plateforme d’investissement entièrement fonctionnelle avec des

versions de bureau, Web et mobile. Des logiciels de bureau peuvent être téléchargés,
des applications mobiles sont disponibles pour iPhone, Android, tablettes et montres
intelligentes. Les versions offrent des options légèrement différentes, mais en général,
toutes les principales classes d’actifs peuvent être négociées sur Thinkorswim –
actions, fonds communs de placement,
ETF (fonds négociés en bourse), options, contrats à terme, obligations, CD (certificats
de dépôt) et forex (foreign échanger).

ProRealTime :

Depuis sa création en 2001, ProRealTime est l’une des meilleures applications Bourse en
ligne qui offre aux investisseurs et aux Traders une gamme d’outils d’analyse complets pour
évaluer les tendances du marché et prendre des décisions de Trading plus éclairées. De
plus, l’application pour investir en Bourse ProRealTime propose des fonctionnalités pour
faire du Trading automatisé.

8
 Fun-Trades:

Fun-Trades est un jeu de simulation boursière qui fonctionne avec une monnaie
virtuelle nommée pixos. Les utilisateurs peuvent accumuler des pixos en visitant des
sites web, puis les utiliser pour participer à une bourse virtuelle. Les participants ont la
liberté d'acheter et de vendre des actions, de réaliser des bénéfices, tout en étant
conscients des risques de pertes liés aux variations du marché financier.

1.2.2 Comparaisons des principaux fonctionnalités

TradPro ThinkOrSwim Fun-Trades ProRealT

Table 1: Tableau comparatif des concurrents

1.3 PROBLÉMATIQUE
La problématique à résoudre est la création d'une application capable
d'adresser le défi consistant à aligner la théorie du trading avec la réalité

9
Opérationnelle, le tout au sein d'un environnement sécurisé. L'objectif est
de proposer une formation personnalisée et approfondie qui convienne à
tous les niveaux de traders. Cette démarche revêt une importance cruciale
dans un contexte où l'accès à des ressources éducatives en matière
financière est limité, et où la sécurité des données constitue une
préoccupation grandissante.

1.4 SOLUTION PROPOSÉE

Notre application envisage de résoudre ce défi en développant une
plateforme de simulation de trading. Notre plateforme combine une
interface conviviale avec des simulations de marché extrêmement réalistes,
des cours en temps réel et une gamme d'outils d'analyse. De plus, elle
intégrera un programme éducatif structuré comprenant des modules
interactifs, des évaluations de compétences personnalisées et un système
de suivi de la progression des utilisateurs. En ce qui concerne la sécurité,
on mettra en place des protocoles de cryptage avancés des données et
d'authentification des utilisateurs pour garantir la protection des
informations personnelles et financières. Pour améliorer l'accessibilité, la
plateforme offrira un support multilingue, permettant une portée mondiale
et une adaptation aux marchés locaux tels que celui de la Tunisie.

10
 CHAPITRE II ANALYSE ET SPÉCIFICATION DES BESOINS ET CONCEPTION

2- Analyse et spécification des besoins et

conception

2.1 ANALYSE ET SPÉCIFICATION DES BESOINS

Cette section sera consacrée à l’identification de toutes les fonctionnalités
de notre futur système et ceci en recensant les besoins fonctionnels et
appréhendant la liste des exigences traduites par les besoins non
fonctionnels.

2.1.1 Acteurs
Tout système interactif doit assurer et faciliter l’interaction entre les
utilisateurs « acteurs » et le « système ». Un acteur représente le rôle d’une
entité externe exploitant le système à travers ses différentes interfaces.
Pour notre système, nous avons identifié les acteurs suivants :

➢ L’utilisateur (simple) : C'est un utilisateur enregistré sur la

plateforme, capable de visualiser son profil, de le modifier ou bien de
le supprimer. celui ci n’a pas encore lier son compte bancaire à notre
plateforme
➢ Le client : C'est un utilisateur enregistré ayant un compte bancaire
lié à notre plateforme
➢ Le consultant : C'est la personne chargée de gérer les informations
liées au trading et à la gestion financière
➢ L'administrateur : Il s'agit de l'individu responsable de la gestion de
l'application.

2.1.2 Diagramme de cas d’utilisation global

Un diagramme de cas d'utilisation est une manière de résumer les détails

d'un système ainsi que les utilisateurs au sein de ce système. Il spécifie

11
les événements dans un système et la manière dont ces événements se
déroulent.

La figure ci-dessous représente le diagramme global de cas d'utilisation de

notre solution :

FIGURE 1 – Diagramme de cas d’utilisation global

2.1.3 Diagramme de cas d’utilisation détaillé dumodule utilisateur :

2.2 Diagramme de classe

12
FIGURE 2 – Diagramme de classe

13
FIGURE 2 – Diagramme de classe

2.2.1 Diagramme de séquence objet

FIGURE 3 – Diagramme de séquence objet

2.2.2 Spécification des besoins

2.2.2.1Besoins fonctionnels

Nous répartissons les principales fonctionnalités de notre application selon

l’acteur.

Besoins fonctionnels de l’utilisateur (simple) :

 Gestion du profil : L’utilisateur devrait pouvoir créer, modifier, et

supprimer son compte après authentification.
Besoins fonctionnels du client:

 Gestion du profil : La possibilité de visualiser les détails de son

profil, y compris les informations relatives à son compte bancaire
après authentification
 Gestion des transactions : Possibilité de consulter l’historique de
ses transactions, effectuer des transferts d’argent, acheter ou
vendre des actifs après avoir utiliser un simulateur d'acquisition
 Gestion du crédit : La possibilité de solliciter un crédit, le modifier
, l’annuler ou consulter les crédits en cours aprèsavoir utilisé un
simulateur de crédit.
14
  Gestion du forum : La possibilité de parcourir le fil d'actualités,
d'apprécier ou de commenter un post, ainsi que de publier,
modifier ou supprimer un post existant
 Gestion des réclamations : La possibilité d’effectuer une
réclamation et de visualiser l’historique des réclamations
effectuées
 Gestion des workshops : La possibilité de s'inscrire à un atelier,
de modifier ou d'annuler l'inscription, et enfin, de visualiser les
ateliers auxquels on a participé, en ayant la possibilité de donner
une note.

Besoins fonctionnels du consultant :

 Gestion des actualités financières : Générer des graphiques, des

statistiques et des indicateurs relatifs aux actualités financières
après la collecte et la visualisation des donné

15
  Gestion des événements: La possibilité d’ajouter, de modifier ou d’annuler
un événement et de consulter la liste de tous les événements ainsi que les
participants
 Gestion des campagnes publicitaires : création et gestion d'une
liste de diffusion pour cibler spécifiquement les destinataires des
campagnes publicitaires , mise en place de mécanismes pour
collecter des informations sur les utilisateurs, leurs préférences,
comportements et réactions aux campagnes publicitaires
précédentes, création et distribution régulière de newsletters
pour informer les utilisateurs des nouveautés, des promotions
ou des événements pertinents.
 Suivi des workshops : Organiser des ateliers éducatifs en ligne
ou en présentiel et gérer les participants.
Besoins fonctionnels de l’administrateur :

 Gestion des utilisateurs : Afficher la liste des utilisateurs et des

utilisateurs potentiels pour activer leurs comptes. Ensuite, avoir
la possibilité de suspendre ou réactiver un utilisateur en cas
d'infraction aux règles d'utilisation de l'application. Enfin,
pouvoir ajouter un utilisateur en lui attribuant le rôle de
consultant, avec la possibilité de modifier les informations du
compte du consultant
 Suivi des réclamations : Consulter les réclamations, les traiter,
puis mettre à jour leur état en "Réclamation traitée" ou "En
cours". Notifier ensuite l'utilisateur de l'état actuel de sa
réclamation.

2.2.2.1 Besoins non fonctionnels

Les besoins non fonctionnels sont des indicateurs de qualité de l’exécution

des besoins fonctionnels.

Besoins non fonctionnels Description

Confidentialité L’authentification est obligatoire afin d’accéder

aux services disponibles.

16
 Les standards d'ergonomie sont respectés, en
mettant particulièrement l'accent sur la
convivialité et la compréhensibilité des interfaces
graphiques. Cela englobe le choix méticuleux des
Ergonomie couleurs, la densité optimale, et l'organisation
judicieuse des éléments affichés à l'écran. De
plus,des messages informatifs et des messages
d'erreurs bien formulés et facilement lisibles sont
adoptés.
Performance L’application doit être accessible à tout moment
et devra être extensible, c’est-à-dire facilement
maintenable et s’adapte aux nouvelles exigences
en cas de modification ou d’ajout d’une
fonctionnalité. Sera assuré par l’architecture n-
tier.
Il est impératif de considérer les contraintes de
sécurité lors de la conception de notre application,
notamment en attribuant des rôles à chaque
Sécurité groupe d'utilisateurs afin de garantir la protection
des accès aux différents espaces. La mise en place
de Spring Security constitue une mesure
essentielle dans cette démarche.
Assurée grâce à une gestion centralisée des
données. Cette approche permet une
coordination efficace des informations au sein de
l'ensemble du système, offrant ainsi une
Autonomy autonomie accrue dans la manipulation, la mise à
jour et la gestion des données. La centralisation
des données facilite également la cohérence et la
synchronisation, renforçant ainsi la fiabilité du
système dans son ensemble.

2.3 CONCEPTION
Dans cette partie, nous présentons dans la première partie, la conception
générale ainsi que les architectures utilisées. Nous détaillerons, dans la
deuxième partie, la conception détaillée.

2.3.1 CONCEPTION GÉNÉRALE

Dans cette section nous présentons l’architecture logique et
physique de notre projet.

2.3.1.1 Architecture logique

Lors de la conception de notre application, le préalable incontournable

réside dans le choix d'un modèle de conception.

17
Le modèle de conception lié à notre projet est appelé le modèle
d'architecture à trois niveaux, ou architecture tripartite. Cela implique
la séparation des préoccupations et des responsabilités dans troiscouches
distinctes : la couche de présentation, la couche d'application et la couche
de données. Cette approche favorise la modularité, la réutilisabilité et la
maintenabilité du système en divisant les fonctionnalités en différentes
couches logiques. Ces couches sont les suivantes:

➢ La couche de présentation: qui est le serveur web avec le

navigateur web
➢ La couche d'application: qui est le code appelé par le serveur web
et qui génère des réponses, écrit en Spring et Angular
➢ La couche de données: qui est une base de données qui persiste
les données d'application entre les requêtes.

FIGURE 4 – Architecture logique

2.3.1.2 Architecture physique

Pour conceptualiser de façon statique la mise en place de notre système

et détailler la configuration matérielle, nous avons pris la décision de
concrétiser cette représentation à travers le diagramme de déploiement

18
 FIGURE 5 – Diagramme de déploiement

CONCLUSION

Durant ce chapitre, nous avons présenté à la fois la conception

détaillée et la base de données de notre application. A ce stade,nous
avons terminé une phase très importante qui est la conception. C’est
ainsi qu’on peut maintenant aborder la partie réalisation de
l’application.
Dans le chapitre suivant, nous allons parler en détails de cette phase.

19
 CHAPITRE III RÉALISATION

3- Réalisation

Introduction

La phase qui suit une conception est éventuellement l’implémentation.

Après les trois chapitres précédents, nous arrivons à rassembler nos
informations et réaliser notre système, nous commençons ce chapitre par
décrire l’environnement de développement logiciel que nous avons
adopté. Nous présentons ensuite quelques captures d’écrans de
l’application.

3.1 ENVIRONNEMENT DE TRAVAIL

Dans cette partie, nous présentons les différents outils logiciels
nécessaires pour le développement de notre application.

3.1.1 ENVIRONNEMENT LOGICIEL

Cette section décrit l’environnement logiciel avec lequel nous avons
réalisé ce projet.

➢ Pour la conception:

○ StarUML : StarUML est un logiciel de modélisation UML

(Unified Modeling Language) largement utilisé dans le
domaine de la conception logicielle. Il permet de créer des
diagrammes UML pour représenter graphiquement la
structure et le comportement des systèmes logiciels. StarUML
offre une interface conviviale et des fonctionnalités
puissantes, facilitant la visualisation et la communication des
concepts complexes liés au développement logiciel.

20
➢ Pour le développement de l’application :

○ Visual Studio Code : c’est un logiciel incontournable dans le

domaine de la conception d'applications. Il sert à créer et à
manipuler des éléments graphiques essentiels à l'interface
utilisateur des applications. Grâce à ses fonctionnalités
avancées, telles que la retouche d'image, la gestion des
calques, et la création d'effets visuels, Photoshop facilite le
processus de conception en permettant aux développeurs et
designers de réaliser des visuels attrayants et fonctionnels
pour les applications

○ IntelliJ IDEA : Jouant un rôle essentiel dans le domaine de

développement logiciel, IntelliJ IDEA est un environnement
de développement intégré (IDE) robuste et polyvalent. Il offre
une suite complète d'outils pour la création, le débogage, et
la gestion de projets logiciels. Grâce à ses fonctionnalités
avancées telles que l'analyse statique du code, la navigation
intelligente, et la prise en charge de multiples langages de
programmation, IntelliJ IDEA optimisele flux de travail des
développeurs en leur fournissant un environnement de
développement performant et intuitif.

○ Postman : c’est un outil de développement d'API qui

simplifie le test, la conception, et le débogage des API. Il offre
une interface conviviale pour créer, gérer et partager des
requêtes HTTP, automatiser des tests, et collaborer
efficacement au sein des équipes de développement. Un outil
essentiel pour améliorer l'efficacité du développement d'API.
➢ Pour la gestion du projet :

○ Linear : Linear est une plateforme de gestion de projet visuel

en ligne qui exploite des tableaux, des listes et des cartes
pour structurer les tâches et améliorer la collaboration au
sein des équipes.

○ Git : Git est un système de contrôle de version distribué,

largement utilisé pour le suivi des modifications apportées
au code source d'un projet logiciel. Il permet aux
développeurs de collaborer efficacement, de suivre l'évolution
du code, et de fusionner les modifications en toute cohérence.

21
 ❖ CSS : c’est un langage de style pour formater les pages
web, utilisant des feuilles de style en cascade (.css)

➢ Typescript : c’est un langage de programmation qui étend

JavaScript en lui ajoutant des fonctionnalités de typage statique,
permettant ainsi un développement plus structuré et
moins sujet aux erreurs.

➢ Java : c’est un langage de programmation polyvalent, utilisé

notamment pour le développement d'applications web. Il offre une
plateforme robuste et permet l'exécution de code sur diverses
plates-formes.

➢ SQL : c’est un langage de requête structuré utilisé pour

interagir avec les bases de données relationnelles. Il permet de
manipuler, récupérer et gérer les données stockées dans une
base de données. C'est un langage de requête structuré
utilisé pour interagir avec les bases de données relationnelles. Il
permet de manipuler, récupérer et gérer les données stockées dans
une base de données.

3.1.2 CHOIX TECHNIQUES

Nous allons créer notre application web en utilisant la combinaison

gratuite et open-source de technologies : SpringBoot, Angular, SQL.
Cette pile logicielle offre une approche moderne et efficace favorisant
une interaction harmonieuse entre ses différentes composantes.

22
 FIGURE 6 – Choix technologique de l’application

➢ Angular : Angular est un framework d'application web gratuit et

open-source basé sur TypeScript, dirigé par l'équipe Angular de
Google ainsi qu'une communauté d'individus et d'entreprises. Il
est utilisé pour développer des applications front-end

➢ Spring Boot: Spring Boot est un framework open-source basé sur

Java, utilisé pour créer des microservices. Il est développé par
l'équipe Pivotal et sert à construire des applications Spring
autonomes et prêtes à la production

➢ MySQL : C'est un outil graphique permettant de créer une base de

données à partir d'une vue relationnelle qui facilite la gestion du
code SQL.

=> L'association de Spring Boot avec MySQL pour le backend et d'Angular

pour le frontend constitue un tandem puissant, idéal pour le
développement d'applications web à empreinte minimale.

3.2 DESCRIPTION DE L’APPLICATION

3.2.1 INTERFACE D’AUTHENTIFICATION

Avant d’accéder m l’application, tout utilisateur doit s’authentifier
en saisissant son email et son mot de passe dans le formulaire de
connexion, Figure IV.4. Le formulaire génère une erreur dans le cas
où les champs obligatoires sont vides ou bien l’utilisateur introduit
des données erronées.

23
 FIGURE 7 – Interface de connexion

3.2.2 INTERFACE D’INSCRIPTION

Pour devenir abonné, vous devez créer un profil sur le site.
L'utilisateur est invité m remplir le formulaire d'inscription. Le
formulaire génère une erreur dans le cas où les champs sont vides ,
voir Figure 10

FIGURE 8 – Interface d’inscription

24
L'utilisateur peut filtrer la liste des crypto-monnaies en tapant un symbole partiel ou
complet dans le champ de texte en haut et en cliquant sur le bouton « Rechercher ».
Le bouton "Réinitialiser" restaure la liste complète des devises.

25
En cliquant sur le lien « Parcourir les devises » dans la barre de navigation,
l'utilisateur accédera à la page de navigation, qui affiche le même contenu que
l'écran d'accueil pour un utilisateur non authentifié, à savoir une liste filtrable des
20 crypto-monnaies les plus échangées.

26
 CONCLUSION ET PERSPECTIVES

Conclusion et perspectives

La création d'un simulateur de salle de marché représente une avancée

significative dans le domaine financier. Ce projet offre une plateforme
immersive permettant aux utilisateurs de développer leurs compétences
en trading dans un environnement virtuel réaliste. Grâce à une interface
conviviale et des fonctionnalités avancées, les participants peuvent
acquérir une expérience pratique sans risque financier réel. En
conclusion, ce simulateur de salle de marché constitue un outil précieux
pour la formation et le perfectionnement des compétences des acteurs
du marché financier, favorisant ainsi une meilleure compréhension des
mécanismes du trading.

27
28