Rapport de Projet de Programmation Web

Pocket Wallet

2022 / 2023

Encadré par : M. Hassine LAZREG

Realisé par : Seifeddine MESSAOUDI, Rayen MANAA
1 Info D
Table des matières

Introduction Générale 1

Objectifs 2
Description du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Specification fonctionnelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1 Analyse des acteurs 4

2 Conception 5
2.1 Diagramme de cas d’utilisation global . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Diagramme de séquence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.1 Diagramme de séquence de l’ajout d’une transaction . . . . . . . . . . . . . . 6
2.2.2 Diagramme de séquence de l’affichage du liste des transactions . . . . . . . . 6

3 Implémentation de la solution 7
3.1 Methodologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2 Outils Utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3 Realisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3.1 Interface du portefeuille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3.2 Interface d’ajout d’une transaction de débit . . . . . . . . . . . . . . . . . . . 10
3.3.3 Interface d’ajout d’une transaction de crédit . . . . . . . . . . . . . . . . . . . 10
3.3.4 Interface de visualisation de toutes les transactions . . . . . . . . . . . . . . . 11

Perspective 12

i
Table des figures

2.1 Diagramme de cas d’utilisation global . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2 Diagramme de séquence de l’ajout d’une transaction . . . . . . . . . . . . . . . . . . 6
2.3 Diagramme de séquence de l’affichage du liste des transactions . . . . . . . . . . . . . 6

3.1 logo Visual Studio code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3.2 logo [Link] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3 logo Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.4 logo GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.5 logo Discord . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.6 Interface du portefeuille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.7 Interface d’ajout d’une transaction de débit . . . . . . . . . . . . . . . . . . . . . . . 10
3.8 Interface d’ajout d’une transaction de crédit . . . . . . . . . . . . . . . . . . . . . . . 11
3.9 Interface de visualisation de toutes les transactions . . . . . . . . . . . . . . . . . . . 11

ii
Liste des tableaux

3.1 Planification des sprints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

iii
Introduction Générale

Le suivi des dépenses est une tâche importante pour les particuliers et les entreprises. Cependant,
il peut être fastidieux et difficile à gérer sans l’aide d’un outil approprié. C’est pourquoi nous avons
développé une application de suivi des dépenses pour aider les utilisateurs à gérer efficacement leurs
finances.

Notre application de suivi des dépenses est conçue pour être facile à utiliser et à comprendre,
même pour les utilisateurs novices en matière de finances. Elle offre une interface utilisateur intuitive
et conviviale qui permet aux utilisateurs de suivre leurs dépenses quotidiennes, hebdomadaires et
mensuelles en temps réel.

1
Objectifs

Description du projet

L’application sera conçue pour être facile à utiliser et à comprendre, même pour les utilisateurs
novices en matière de finances. Elle offrira une interface utilisateur intuitive et conviviale qui
permettra aux utilisateurs de saisir rapidement et facilement leurs transactions, de configurer des
catégories de dépenses personnalisées et de générer des rapports détaillés sur leurs dépenses.

Specification fonctionnelle

Notre application de suivi des dépenses aura les fonctionnalités suivantes :

— — Saisie de transactions : Les utilisateurs pourront saisir rapidement et facilement leurs

transactions, y compris le montant, la date, la catégorie de dépenses et toute note ou photo
pertinente.

— — Suivi des dépenses : L’application permettra aux utilisateurs de suivre leurs dépenses
quotidiennes, hebdomadaires et mensuelles en temps réel, de manière à mieux comprendre
leurs habitudes de dépenses et à prendre des décisions financières plus éclairées.

— — Configuration de catégories de dépenses personnalisées : Les utilisateurs pourront

configurer des catégories de dépenses personnalisées en fonction de leurs besoins spécifiques,
ce qui leur permettra de mieux organiser leurs transactions et de générer des rapports détaillés
sur leurs dépenses.

— — Génération de rapports détaillés : L’application permettra aux utilisateurs de générer

des rapports détaillés sur leurs dépenses, y compris des graphiques et des tableaux pour mieux
visualiser leurs habitudes de dépenses.

— — Synchronisation avec les comptes bancaires : Les utilisateurs pourront synchroniser

leur compte bancaire avec l’application pour importer automatiquement leurs transactions et

2
Objectifs

éviter les erreurs de saisie manuelle.

— — Gestion des budgets : L’application permettra aux utilisateurs de définir des budgets
pour chaque catégorie de dépenses, de manière à mieux contrôler leurs dépenses et à éviter les
dépenses excessives.

— — Définition d’alertes : Les utilisateurs pourront définir des alertes pour les aider à rester
dans leur budget et à éviter les dépenses excessives.

En résumé, notre application de suivi des dépenses aura des fonctionnalités avancées pour
aider les utilisateurs à gérer efficacement leurs finances. Nous sommes convaincus que cette application
sera un atout précieux pour les particuliers et les entreprises qui cherchent à améliorer leur gestion
financière.

3
Chapitre 1

Analyse des acteurs

Notre application de suivi des dépenses sera utilisée par différents types d’utilisateurs, chacun
ayant des besoins et des exigences spécifiques. Voici les acteurs clés de notre application :

— — Utilisateurs individuels : Les utilisateurs individuels seront la principale cible de notre

application. Ils utiliseront l’application pour suivre leurs dépenses personnelles, organiser leurs
finances et prendre des décisions financières plus éclairées.

— — Entreprises : Les entreprises pourront utiliser notre application pour suivre les dépenses
de leurs employés, gérer les budgets et générer des rapports détaillés sur les dépenses de
l’entreprise.

— — Comptables : Les comptables pourront utiliser notre application pour suivre les dépenses
de leurs clients, générer des rapports détaillés sur les dépenses et faciliter la gestion de la
comptabilité.

— — Administrateurs : Les administrateurs pourront utiliser notre application pour gérer les
utilisateurs, les autorisations et les paramètres de l’application.

4
Chapitre 2

Conception

2.1 Diagramme de cas d’utilisation global

La figure 2.1 illustre le diagramme de cas d’utilisation globale.

Figure 2.1 : Diagramme de cas d’utilisation global

5
Conception

2.2 Diagramme de séquence

2.2.1 Diagramme de séquence de l’ajout d’une transaction

La figure 2.2 illustre le diagramme de séquence de l’ajout d’une transaction.

Figure 2.2 : Diagramme de séquence de l’ajout d’une transaction

2.2.2 Diagramme de séquence de l’affichage du liste des transactions

La figure 2.3 illustre le diagramme de séquence de l’affichage du liste des transactions.

Figure 2.3 : Diagramme de séquence de l’affichage du liste des transactions

6
Chapitre 3

Implémentation de la solution

3.1 Methodologie

Nous avons choisi d’utiliser la méthodologie SCRUM pour le développement de notre application
de suivi des dépenses. SCRUM est une méthodologie agile qui permet une gestion de projet flexible
et adaptative, en se concentrant sur la collaboration, la communication et la livraison continue de
fonctionnalités.

Le processus SCRUM se compose de plusieurs itérations appelées "sprints", qui durent généralement
de deux à quatre semaines. Chaque sprint commence par une réunion de planification, au cours de
laquelle l’équipe de développement définit les objectifs du sprint et les fonctionnalités à développer.
Pendant le sprint, l’équipe travaille en étroite collaboration pour développer les fonctionnalités,
effectuer des tests et résoudre les problèmes.

À la fin de chaque sprint, l’équipe de développement organise une réunion de revue de sprint pour
présenter les fonctionnalités développées et recueillir les commentaires des parties prenantes. Une
réunion de rétrospective de sprint est également organisée pour évaluer le processus de développement
et identifier les améliorations à apporter.

Nous avons choisi SCRUM pour sa flexibilité et sa capacité à s’adapter aux changements de besoins
et de priorités. Nous sommes convaincus que cette méthodologie nous permettra de développer une
application de suivi des dépenses de haute qualité, qui répondra aux besoins de nos utilisateurs et
qui sera livrée dans les délais impartis.

7
Implémentation de la solution

Voici le tableau de planitication des sprints :

Sprint Fonctionnalités Durée

1 Saisie de transactions, Suivi des dépenses 2 semaines
2 Configuration de catégories de dépenses personnalisées 3 semaines
3 Génération de rapports détaillés 3 semaines
4 Synchronisation avec les comptes bancaires 4 semaines
5 Gestion des budgets 4 semaines
6 Définition d’alertes 2 semaines

Tableau 3.1 : Planification des sprints

3.2 Outils Utilisés

Cette section exposera tous les outils et technologies utilisés lors du développement de notre
système.

— Visual Studio Code

Visual Studio Code est un éditeur de code source léger mais

puissant qui s’exécute sur votre bureau et est disponible pour
Windows, macOS et Linux. Il est livré avec un support intégré
pour JavaScript, TypeScript et [Link] et dispose d’un riche
écosystème d’extensions pour d’autres langages (tels que C++,
Rust, Java, Python, PHP, Go) et moteurs d’exécution (tels que
Figure 3.1 : logo
Visual Studio code .NET et Unity) [11].

— [Link]

[Link] est une solution d’organigramme conçue pour aider

les développeurs, les administrateurs de réseau, les analystes
informatiques et les concepteurs à utiliser la fonctionnalité de
glisser-déposer pour créer et publier des diagrammes. [15].
Figure 3.2 : logo
[Link]
— Javascript

8
Implémentation de la solution

JavaScript est un langage de programmation léger, interprété ou

compilé il est un langage dynamique basé sur des prototypes ,
multi-paradigmes, à thread unique, prenant en charge les styles
orientés objet, impératifs et déclaratifs [16].
Figure 3.3 : logo
Javascript
— GitHub

GitHub est une plateforme d’hébergement de code pour le contrôle

de version et la collaboration. Elle nous permet, de travailler
ensemble sur les projets de la société. On a utilisé GitHub pour
Figure 3.4 : les dépôts, les branches, les commits et les pull requests [30].
logo GitHub
— Discord

Discord est un logiciel propriétaire gratuit de VoIP et

de messagerie instantanée. Il fonctionne sur les systèmes
d’exploitation Windows, macOS, Linux, Android, iOS ainsi que
sur les navigateurs web [32].
Figure 3.5 : logo
Discord

3.3 Realisation

3.3.1 Interface du portefeuille

La figure 3.6 illustre l’interface du portefeuille où les utilisateurs peuvent voir un aperçu de leur
solde actuel et de leurs transactions récentes. Les utilisateurs peuvent également accéder à d’autres
fonctionnalités de l’application à partir de cette page.

9
Implémentation de la solution

Figure 3.6 : Interface du portefeuille

3.3.2 Interface d’ajout d’une transaction de débit

La figure 3.7 illustre l’interface du d’ajout d’une transaction de débit, en saisissant un montant
positif.

Figure 3.7 : Interface d’ajout d’une transaction de débit

3.3.3 Interface d’ajout d’une transaction de crédit

La figure 3.8 illustre l’interface du d’ajout d’une transaction de crédit, en saisissant un montant
negatif.

10
Implémentation de la solution

Figure 3.8 : Interface d’ajout d’une transaction de crédit

3.3.4 Interface de visualisation de toutes les transactions

La figure 3.9 illustre la page où les utilisateurs peuvent voir toutes leurs transactions.

Figure 3.9 : Interface de visualisation de toutes les transactions

11
Perspective

Nous sommes convaincus que notre application de suivi des dépenses sera un outil précieux pour
les particuliers et les entreprises souhaitant améliorer leur gestion financière. Grâce à son interface
conviviale et à ses fonctionnalités avancées telles que la synchronisation avec les comptes bancaires
et la gestion des budgets, notre application permettra aux utilisateurs de mieux comprendre leurs
habitudes de dépenses et de prendre des décisions financières plus éclairées.

Bien que le marché des applications de suivi des dépenses soit concurrentiel, nous sommes confiants
que la simplicité, la flexibilité et l’adaptabilité de notre application aux besoins spécifiques des
utilisateurs la démarqueront de la concurrence. Nous prévoyons de continuer à développer et à
améliorer notre application en fonction des commentaires des utilisateurs et des tendances du marché,
et sommes ouverts à des partenariats avec des entreprises et des organisations souhaitant intégrer
notre application dans leurs services financiers.

En résumé, nous sommes convaincus que notre application de suivi des dépenses sera un succès
sur le marché des applications financières, et nous sommes impatients de voir comment elle aidera
les utilisateurs à mieux gérer leurs finances et à atteindre leurs objectifs financiers à long terme.

12