Université de Sfax

Institut supérieur d'informatique

et du multimédia de Sfax

Rapport du Stage d’Eté

Présenté à
L’Institut supérieur d’informatique et de multimédia de Sfax

Effectuer à
Grow Up Agency
Par
Ahmed Benyahia
Spécialité :
Licence en Big Data et Analyse de Données

Développement d’un site de gestion cabinet medical

Fait du 23/07/2023 au 25/08/2023

Encadré par :
Hedi Nsibi

Année universitaire :2024/2025

 Remerciement
Tout d'abord, je tiens à remercier M. Hedi Nsibi
buissness manager de l'entreprise Grow up
agency, de m'avoir donné l'honneur de travailler.
Je remercie tous ceux qui m'ont aidé et qui m'ont
prodigué des conseils, qui ont contribué de
manière importante à l'amélioration de ce travail.
Merci à tous ceux qui ont contribué au succès de
ma formation
Table des matières
INTRODUCTION GENERALE .................................................................................................... 1
CHAPITRE 1 : Contexte générale du projet ................................................................................. 2
I. Introduction .............................................................................................................................. 2
II. Présentation de l’organisme d’accueil ................................................................................... 2
III. Problématique ........................................................................................................................ 2
IV. Solution proposé ..................................................................................................................... 2
V. Conclusion ................................................................................................................................ 3
Chapitre 2 : Etude Conceptuelle ..................................................................................................... 3
I. Introduction .......................................................................................................................... 3
II. Spécifications des besoins ................................................................................................ 3
II.1 Besoins fonctionnels .......................................................................................................... 3
II.2 Besoins non fonctionnels ................................................................................................... 3
III. Diagramme de Cas d’utilisation : ................................................................................... 4
III.1 Définition .......................................................................................................................... 4
III.2 Présentation d’acteurs ..................................................................................................... 4
III.3 Diagramme de cas d’utilisation ...................................................................................... 5
IV. Diagramme de séquence ....................................................................................................... 10
IV.1 Définition .......................................................................................................................... 10
V. Conclusion .............................................................................................................................. 12
Chapitre 3 : Réalisation ................................................................................................................. 12
I. Introduction : .......................................................................................................................... 12
II. Environnement matérielle .................................................................................................... 12
III. Outils de développement : ................................................................................................... 12
IV. Les principales interfaces graphiques :.............................................................................. 13
V. Conclusion ........................................................................................................................... 20
Conclusion générale ....................................................................................................................... 21
Liste des Figures
Figure 1 : Logo deGrow up agency.......................................................................................... 2
Figure 2 Diagramme de cas d’utilisation globale ....................................................................5
Figure 3 : Diagramme de séquence du cas d’utilisation mettre a jour informations
personelles.............................................................................................................................. 10
Figure 4 : Diagramme de séquence du cas d'utilisation gestion dossier medical.....................11
Figure 5 : Diagramme de séquence du cas d'utilisation notifier patient sur date rendez
vous.......................................................................................................................................... 11
Figure 6 : logo Next js ……………………………………………………………………………………………………….....12
Figure 7 : logo Vscode………………………………………………………………………………………………….………..12
Figure 8 : logo Mongodb………………………………………………………………………………………………..……..13
Figure 9 : authentification…………………………………………………………………………………………..…….…..13
Figure 10 : gestion rendez vous et notifier les patients ……………………………………………………....14
Figure 11: planifier horaire………………………………………. ………………………………………………………..15
Figure 12: gestion fiches ………………………………………………………………………………………………......15
Figure 13 : settings……………………………………………………. …………………………………………………….....16
Figure 14 : gestion dossier medical……………….……………. ……………………………………………………....16
Figure 15 : generation rapport ……………….……………. ………………………………………………..…………...17
Figure 16 : gestion utilisateurs……………….……………. ……………………………………………………….……...17
Figure 17 : gestion dossier medical……………….……………. …………………………………………………….....18
Figure 18 : consulter informations medical……………….……………. ………………………………….………..18
Figure 19 : Reserver rendez vous……………….……………. …………………………………………………………….19
Figure 20: Dashboard……………….……………. ………………………………………………………………………………19

Liste des tableaux

Tableau 1 : Description textuelle du diagramme de cas d'utilisation " mettre a jour informations
personelles"......
Tableau 2 : Description textuelle du diagramme de cas d'utilisation ‘gestion dossier medical" ............

Tableau 3 : Description textuelle du diagramme de cas d'utilisation "gestion rendez vous" ..............
INTODUCTION GENERALE
Dans un contexte où la numérisation des services devient essentielle pour l'amélioration de la
gestion et de l'efficacité, la mise en place d'une application web pour la gestion d'un cabinet
médical se présente comme une solution innovante et indispensable. Ce rapport de stage
s'inscrit dans cette dynamique et détaille le processus de conception, de développement, et de
mise en œuvre d'une application web dédiée à la gestion intégrée des activités d'un cabinet
médical.

L'objectif principal de cette application est de centraliser et d'automatiser plusieurs aspects de

la gestion, notamment la gestion des patients, la planification des rendez-vous, la gestion des
dossiers médicaux, et la communication entre le personnel médical et les patients. Cette
centralisation permet non seulement de réduire les erreurs humaines et les pertes de temps,
mais aussi d'assurer une meilleure qualité de service, tant pour les praticiens que pour les
patients.

Ce projet a été réalisé dans le cadre de mon stage au sein de grow up agency où j'ai eu
l'opportunité de mettre en pratique mes connaissances en développement web et en gestion de
projets informatiques. Le développement de cette application a nécessité l'utilisation de
technologies modernes telles que [technologies utilisées, ex. React.js, Next.js, Tailwind CSS,
Node.js, etc.], permettant ainsi de répondre aux exigences de performance, de sécurité et de
convivialité.

Ce rapport de stage se propose de détailler les différentes phases de développement de

l'application, depuis l'analyse des besoins jusqu'à la mise en production, en passant par la
conception de l'architecture, le développement des différentes fonctionnalités, et les tests
d'intégration. Il se termine par une réflexion sur les perspectives d'évolution du projet et les
enseignements tirés de cette expérience professionnelle.

À travers cette expérience, j'ai non seulement consolidé mes compétences techniques, mais
j'ai également acquis une compréhension plus approfondie des enjeux de la gestion numérique
dans le domaine médical, un secteur où l'efficacité et la précision sont cruciales. Ce rapport
constitue donc une synthèse de ce projet ambitieux, visant à offrir une solution complète et
efficace pour la gestion d'un cabinet médical.

1
CHAPITRE 1 : Contexte générale du projet
I. Introduction
Dans ce chapitre, nous décrirons le contexte du projet. Tout d'abord, nous présenterons
l'organisme d'accueil. Ensuite, nous détaillerons le projet, en exposant la problématique à traiter
ainsi que la proposition de solution

II. Présentation de l’organisme d’accueil

Grow up agency une société de développement spécialisée dans la création de solutions logicielles
innovantes pour répondre aux besoins de clients en, combinant expertise technique et créativité
Les principaux services de Swiftcode :
- Création de site web
- Design graphique
- Digital marketing
- Application web & mobile

Figure 1 : Logo de Grow up agency

III. Problématique
Dans un cabinet médical, la gestion des tâches administratives, telles que la prise de rendez-vous, la
gestion des dossiers patients, et la communication entre les différents acteurs, est souvent complexe
et chronophage. Traditionnellement, ces tâches sont réalisées de manière manuelle ou avec des
systèmes informatiques peu intégrés, ce qui peut entraîner des erreurs, des pertes de temps, et une
inefficacité globale dans le fonctionnement du cabinet.

IV. Solution proposé

Pour minimiser les problèmes mentionnés ci-dessus, nous avons choisi de développer une
application web pour Gestion du cabinet medical.

2
V. Conclusion
Dans ce chapitre nous avons présenté l’entreprise, nous avons introduire la problématique et
mettre l’accent sur la solution proposée.
Dans le chapitre suivant nous allons illustrer l’étude conceptuelle.

Chapitre 2 : Etude Conceptuelle

I. Introduction
Dans ce chapitre nous allons aborder les spécifications des besoins de notre
application web. Ce chapitre présente un ensemble des besoins fonctionnels et
autres non fonctionnels. Par la suite nous avons présenté le diagramme de cas
d’utilisations et le diagramme de séquence.

II. Spécifications des besoins

II.1 Besoins fonctionnels
Les besoins fonctionnels sont toutes les fonctionnalités dont les
utilisateurs ont besoin pour son
activité. On site ces besoins fonctionnelle :
 Gestion des rendez-vous
 Consultation des informations médicales
 Authentification des utilisateurs
 Gestion des fiches patients
 Notification des patients
 Enregistrement des détails de consultation
 Planification et gestion des horaires des médecins
 Gestion des fiches médecins et personnel
 Gestion des comptes utilisateurs
 Génération de rapports et statistiques
 Mise à jour des informations personnelles
 Gestion des rendez-vous (modification/suppression)
 Gestion du dossier médical

II.2 Besoins non fonctionnels

Les besoins non fonctionnels sont importants car ils agissent de façon indirecte
sur le résultat et sur le rendement de l’utilisateur, ce qui fait qu’ils ne doivent
pas être négligés, pour cela il faut répondre aux exigences suivantes :

3
 Sécurité : Assurer la protection des données médicales et personnelles, conformes aux
réglementations.

 Performance : Garantir des temps de réponse rapides et une performance optimale, même
en cas de forte charge utilisateur.

 Disponibilité : Maintenir une haute disponibilité du système avec des mécanismes de

tolérance aux pannes.

Scalabilité : Concevoir l'application pour qu'elle puisse évoluer avec l'augmentation du

nombre d'utilisateurs et de fonctionnalités.

Facilité d'Utilisation : Offrir une interface intuitive et conviviale, facile à utiliser pour tous
les utilisateurs.

III. Diagramme de Cas d’utilisation :

III.1 Définition
En langage UML, les diagrammes de cas d'utilisation modélisent le comportement d'un système et
permettent de capturer les exigences du système.

Les diagrammes de cas d'utilisation décrivent les fonctions générales et la portée d'un système.
Ces diagrammes identifient également les interactions entre le système et ses acteurs.

III.2 Présentation d’acteurs

En ce qui concerne utilisateurs:

1-Médecin: il Fournit des soins médicaux aux patients, gére les consultations et les
dossiers médicaux.
2-Secrétaire Médicale: Assurer la gestion administrative et le support au personnel
médical..
3. Administrateur (Admin) : Gestion des utilisateurs, configurations globales,
gestion des permissions, reporting et analyse des données.
4-Patient :Recevoir des soins médicaux et gérer ses propres rendez-vous et
informations médicales..

4
III.3 Diagramme de cas d’utilisation

Figure 2 : diagramme cas d utilisation globale

5
Description du cas d’utilisation « gestion fiches patient»

1- Mettre à jour les informations personnelles

titre Mettre à jour les informations personnelles

Acteurs principaux Patient
Acteurs secondaires Admin/medecin/personel
Objectifs Cette fonctionnalité permet aux
utilisateurs mise à jour des informations
personnelles.
Préconditions Le patient doit être authentifié.

Postconditions Les informations personnelles sont mises à

jour dans le système.

Scénario nominal 1- Le patient se connecte à son compte.

2- Le patient accède à la section "Mon profil".
3- Le patient modifie les informations
personnelles.
4- Le patient enregistre les modifications. .
Scénario d anomalie Erreur de validation des données

1-patient saisit des informations

incorrectes ou incomplètes (par
exemple, une adresse email au format
incorrect).

2-Le système détecte l'erreur et affiche

un message d'erreur indiquant les
champs incorrects ou manquants.

Tableau 1 : Description textuelle du diagramme de cas d'utilisation "mettre a jour informations

personelles"

2-Gestion Dossier Medical

6
titre gestion dossier medical
Acteurs principaux medecin
Acteurs secondaires admin
Objectifs Permettre aux médecins de créer,
consulter, modifier et supprimer des
dossiers médicaux pour leurs patients.
Préconditions  Le médecin, la secrétaire médicale ou
l'administrateur doit être authentifié et avoir
les autorisations nécessaires pour accéder
aux dossiers médicaux.

 Les informations médicales doivent être

déjà enregistrées pour être consultées ou
modifiées.
Postconditions  Les dossiers médicaux sont mis à jour
dans le système.

 Les modifications apportées aux dossiers

médicaux sont enregistrées et accessibles
Scénario nominal 1-Le médecin accède à la section "Gestion
des dossiers médicaux".

2- Le médecin recherche un patient et

consulte le dossier médical associé, y
compris les consultations passées,
diagnostics, prescriptions et notes.

3-Le médecin peut ajouter de nouvelles

consultations, diagnostics, prescriptions et
notes.

4-Le médecin peut également modifier ou

supprimer des informations existantes si.

5-Le système enregistre toutes les

modifications apportées au dossier médical.

6-Le système peut envoyer des notifications

aux patients concernés si des informations
importantes sont ajoutées ou modifiées.

Scénario d anomalie Erreur de validation des données

1- medecin saisit des informations

incorrectes ou incomplètes (par exemple,
des champs obligatoires non remplis).

2-Le système détecte l'erreur et affiche un

7
 message d'erreur indiquant les champs
incorrects ou manquants.

Dossier médical non trouvé

1- medecin tente de consulter ou de modifier

un dossier médical, mais le dossier n'existe
pas ou a été supprimé.

2- Le système affiche un message d'erreur

indiquant que le dossier médical n'a pas été
trouvé

Tableau 2 : Description textuelle du diagramme de cas d'utilisation "gestion dossier medical"

3-Notifier sur un rendez vous

titre Notifier sur un rendez vous

Acteurs principaux secrétaire
Acteurs secondaires admin
Objectifs Notifier un patinet par son date de rendez
vous avec medecin
Préconditions  Le rendez-vous doit être planifié et
enregistré dans le système.

 patient doit être enregistré dans le

système avec des informations de contact
valides (email, numéro de téléphone).
Postconditions  Le patient (et le médecin si nécessaire)
est notifié du rendez-vous à venir.

 Les envois de notification sont

enregistrés pour suivi et audit.
Scénario nominal 1- Le système détecte qu'un rendez-vous a
été planifié pour le lendemain.
2- Le système récupère les informations de
contact du patient (et du médecin si
nécessaire).
3- Le système génère une notification
contenant les détails du rendez-vous (date,
heure, lieu, médecin).
4- Le système envoie la notification par le
canal approprié (email, SMS, notification

8
 push).

5- Le système enregistre l'envoi de la

notification dans les logs pour suivi et audit.
Scénario d anomalie Adresse email ou numéro de téléphone
invalide

1-L'adresse email ou le numéro de téléphone

du patient est invalide ou mal formaté.

2-Le système affiche un message d'erreur

indiquant que les informations de contact
sont invalides.

Problème de configuration du service de

notification

1-Le service de notification rencontre une

erreur technique empêchant l'envoi des
notifications.

2-Le système affiche un message d'erreur

indiquant un problème avec le service de
notification.

Tableau 3: Description textuelle du diagramme de cas d'utilisation "notifier sur un rendez vous"

9
IV. Diagramme de séquence
IV.1 Définition
Un diagramme de séquence est un diagramme d’interaction qui décrit en détail
la manière dont les opérations sont effectuées et organisés en fonction du temps
qui s’écoule au fur et à mesure que nous parcourons la page.

Cas d ulilisation ‘mettre a jour les informations personelles ‘

Figure 3 : diagramme sequence cas d utilisation ‘mette a jour les informations personelles’

Cas d utilisation ‘notifier patient date rendez vous’

10
Figure 4 : diagramme sequence cas d utilisation ‘notifier patient date rendez vous’

Cas d utilisation ‘gestion dossier medical ‘

Figure 5 : diagramme sequence cas d utilisation ‘gestion dossier medical

V. Conclusion

11
Nous venons de terminer cette partie de conception, qui consiste à déterminer et savoir les
différents types de diagrammes réalisés avec leurs descriptions pour notre site. Dans le chapitre
suivant nous allons aborder le chapitre quatre qui représente la partie réalisation de notre site web.

Chapitre 3 : Réalisation
I. Introduction :
Ce chapitre se porte principalement sur l’énumération des outils systèmes et
matériels que je l’ai utilisés pour réaliser le site

II. Outils de développement :

Visual Studio Code : il s’agit d’un éditeur de code open source développé par
Microsoft qui prend en charge plusieurs langages de programmation via des
extensions. Il supporte également la coloration syntaxique, la saisie semi-
automatique de code et la détection des erreurs de code.

Figure 6: Logo du vscode

Next.js est un framework JavaScript basé sur React, conçu pour faciliter le
développement d'applications web modernes. Il permet de créer des applications
web rapides, performantes et optimisées pour le SEO

Figure 7: Logo du next js

12
MongoDB est une base de données NoSQL orientée documents, qui stocke les
données sous forme de documents JSON (ou BSON en interne)

Figure 8: Logo du mongodb

IV. Les principales interfaces graphiques :

1-S AUTHENTIFIER

13
 Figure 9: authentification

2-Gestion Rendez vous et notifier patients

Figure 10: gestion rendez vous et notifier les patients

14
3-planifier Rendez vous

Figure 11: planifier horaire

4-Gestion fiches

Figure 12: gestion fiches

15
 5-Settings

Figure 13: settings

6-enregistrer detailles consultation

Figure 14: enrigister detailles consultation

16
7-gestion dossier medical

Figure 15: gestion dossier medical

8-generation rapport

Figure 16: generation rapport

17
9-gestion utilisateurs

Figure 17: gestion utilisateurs

10-consulter informations medical

Figure 18: consulter informations medical

18
11-Reserver rendez vous

Figure 19: Reserver rendez vous

12-dashboard

19
 Figure 20: dashboard

V. Conclusion
Dans ce dernier chapitre, nous avons mis l’accent sur la description des caractéristiques de
l’environnement de travail et les différents outils de développement et nous avons clôturé notre
chapitre par la représentation des principales interfaces de notre application web pour améliorer et
clarifier les démarches utilisées pour effectuer ce site.

20
Conclusion générale
En conclusion, ce projet de création d'une application web de gestion de cabinet médical vise
à simplifier la gestion quotidienne des activités médicales et administratives. Nous avons
parcouru toutes les étapes, de l'analyse des besoins spécifiques des professionnels de santé à
la conception et à la réalisation de l'application.

Notre solution se distingue par sa convivialité, son efficacité, et sa sécurité, permettant une
gestion fluide des rendez-vous, des dossiers patients, et des consultations.

Les perspectives futures incluent l'écoute des retours des utilisateurs, l'ajout de nouvelles
fonctionnalités pour répondre à des besoins évolutifs, l'optimisation continue de la
performance, le renforcement de la sécurité des données sensibles, et l'adaptation aux
avancées technologiques du secteur médical.

Au-delà d'une simple application web, ce projet reflète notre engagement à évoluer avec les
besoins du secteur de la santé, à améliorer la qualité des soins, et à rester compétitif dans un
environnement de plus en plus digitalisé.

21