École Nationale Supérieure d’informatique et

Analyses Des Systèmes

première année de Smart Supply Chain And Logistics

Rapport:Stage

Gestion des demandes de laboratoire

urinalysis

Réalisé par : Encadré par :

EL MOUTARAJI Hajar M. NOUNI Elbachir

Année Universitaire 2021/2022

 Avant de commencer la réalisation de mon rapport, je présente mes vifs re-
merciements, et mes profondes gratitudes à ceux qui ont contribué de près ou
de loin à la réussite de ce projet de stage de première année. Et je remercie tout
particulièrement : M. NOUNI ELBACHIR : Le Chef de section Système d’Infor-
mation Télémédecine qui m’a accompagnée tout au long de cette expérience
professionnelle, tant sur le plan pédagogique que technique. Enfin ,je remercie
mes parents pour qui m’ont logée et soutenu ,tant que sur le plan professionnel
que personnel, tout au long de ce stage .
 RESUME

Ce rapport est élaboré afin de décrire les étapes de la réalisation de pro-

jets de stage de première année au sein de l’hôpital Militaire d’Instruction
Mohammed V .
Ce document contient les différents éléments qui ont contribué à l’élabora-
tion de ce projet, afin qu’il aborde la présentation de l’organisme, résolve la
problématique étudiée et qu’il réponde aux objectifs précisés dans la pre-
mière partie du document. Dans le but de bien mettre en évidence la va-
leur apportée par ce projet, je passera dans une seconde partie à une étude
concernant la conception et modelisation du projet . Les dernières parties
du document concernent le côté technique de notre projet , notamment le
matériel et les logiciels utilisés ainsi que leurs spécificitions détaillées,et
finalement le prototype final auquel a abouti ce travail.
 ABSTRACT

This report is elaborated in order to describe the stages of the realization

of the project of internship of first year within the Military Hospital of
Instruction Mohammed V.
This document contains the different elements that contributed to the ela-
boration of this project, so that that it approaches the presentation of the
organization, solves the studied problem and that it answers the objectives
specified in the first part of the document. In order to highlight the value
brought by this project, I will pass in a second part to a study concerning the
design and modeling of the project. The last parts of the document concern
the technical side of our project, including the hardware and software used
and their detailed specifications, and finally the final prototype to which
this work led.
Table des figures
1 Systeme d’information et Laboratoire . . . . . . . . . . . . . . . . . . . . . 4
2 Diagramme de Gantt prévisionnel . . . . . . . . . . . . . . . . . . . . . . . 6
3 Modèle de cycle de vie en cascade . . . . . . . . . . . . . . . . . . . . . . . 8
4 Diagramme de cas d’utilisation général . . . . . . . . . . . . . . . . . . . . 9
5 Diagramme de cas d’utilisation d’administrateur . . . . . . . . . . . . . . . 11
6 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
7 Diagramme de séquence de cas d’utilisation "S’authentifier" . . . . . . . . . 13
8 Diagramme de séquence de cas d’utilisation "Gestion des demandes" . . . . 13
9 Diagramme de séquence de cas d’utilisation "Gestion des patients" . . . . . 14
10 Diagramme de séquence de cas d’utilisation "Gestion des utilisateurs" . . . 15
11 Communication Protocol en mode de téléchargement . . . . . . . . . . . . 16
12 Communication Protocol en mode Query . . . . . . . . . . . . . . . . . . . 16
13 Logo node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
14 Logo express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
15 Logo React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
16 Logo MangoDb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
17 L’authentification-Web- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
18 Liste des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
19 Ajouter utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
20 Modification des informations d’utilisateur . . . . . . . . . . . . . . . . . . 21
21 Voir les informations d’utilisateur . . . . . . . . . . . . . . . . . . . . . . . 22
22 Liste des patients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
23 Ajouter patient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
24 Modification informations patient . . . . . . . . . . . . . . . . . . . . . . . 23
25 Informations patient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
26 Ajouter demande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
27 liste des demandes d’analyses . . . . . . . . . . . . . . . . . . . . . . . . . . 25
28 Après qu’on envoie les demandes . . . . . . . . . . . . . . . . . . . . . . . . 25
29 Traitement des demandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Table des matières
1 INTRODUCTION 1

I CONTEXTE DE PROJET : 2

2 Présentation de l’organisme : 2
2.1 Historique de l’Hôpital : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

3 Analyse et specification de besoins : 2

3.1 Introduction : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3.2 Présentation du projet de stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3.2.1 Système d’Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.2.2 Choix de sujet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.3 Spécifications des besoins : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.3.1 Besoins fonctionnels : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.3.2 Besoins non fonctionnnels : . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.4 Plan des étapes de réalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.5 Conclusion : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

II ANALYSE ET CONCEPTION 7

4 Conception 7
4.1 Introduction : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.2 Méthodologie et approche adoptée : . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.3 Le processus de developpement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.3.1 Le cycle de développement en cascade . . . . . . . . . . . . . . . . . . . . . 8
4.4 La démarche d’analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.4.1 Les acteurs : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.4.2 Phase d’expression des besoins . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.4.3 Phase d’analyse : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.4.4 Phase de conception : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.5 Conclusion : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1
III REALISATION 17

5 Réalisation 17
5.1 Introduction : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.2 Environnement de travail : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.2.1 Environnement materiel : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.2.2 Environnement logiciel : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.3 Implémentation : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3.1 Node.js : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3.2 Expressjs : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3.3 React.js : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.3.4 MongoDb : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.3.5 L’application web : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.4 Conclusion : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

6 Conclusion 27

7 Webographie 28
1 INTRODUCTION

L’ordinateur est actuellement la plus grande révolution de la vie humaine contemporaine, et il

connaît un extraordinaire progrès technologique dans tous les domaines. Sans aucun doute, le dé-
veloppement de l’ordinateur a permis aux entreprises d’informatiser leurs systèmes de données par
la protection et le traitement de l’information.

Par conséquent, cette science joue un rôle important dans le développement de l’entreprise en géné-
ral, des établissements de santé et des laboratoires d’analyses médicales en particulier, bien qu’elle
soit confrontée à de nombreux problèmes résultant de la gestion traditionnelle des entreprises.

La croissance rapide de la population hospitalière au Maroc nécessite une gestion rationnelle et ra-
pide. L’informatisation des établissements de santé en est encore à ses débuts. La gestion manuelle
des laboratoires d’analyses médicales reste dominante, ce qui nécessite l’intégration de l’informa-
tique dans la gestion de ces services hospitaliers via des solutions logicielles.

Ce projet vise à faciliter la gestion des patients par le personnel et l’automatisation des systèmes
d’information.
Pour mieux organiser notre projet, nous l’avons structuré de la manière suivante :

□ La première partie porte sur le contexte de projet : comporte la présentation de l’organisme

d’accueil et choix de sujet.

□ La deuxième partie intitulé «Analyse et conception », est consacré à l’analyse et à la conception

de l’application proprement dite.

□ En fin La troisième partie qui comporte la présentation de l’environnement dont lequel notre
application a été réalisé, les outils utilisés et quelques interfaces de notre application.

1
Première partie

CONTEXTE DE PROJET :

2 Présentation de l’organisme :

2.1 Historique de l’Hôpital :

Ancien Hôpital Marie Feuillet de Rabat de 1912 à 1961, devenu Hôpital Central des Forces Armées
Royales de 1961 pour être renommé en 1963 Hôpital Militaire d’Instruction Mohammed V qui est un
établissement public à caractère admi-nistratif doté de la personnalité morale et juridique et d’une
autonomie financière sous contrôle de l’État. L’HMIMV se situe a Rabat hay riyad. Armée par un
personnel de haut niveau et dotée d’un plateau technique parmi les plus modernes. Pour garder
la confidentialité de l’organisme, on nous a pas donner les informations sur la hiérarchie et sur le
personnel travaillant dedans.

3 Analyse et specification de besoins :

3.1 Introduction :

Dans le cadre de ce chapitre, nous allons introduire la spécification des besoins, qui inclut les
qualifications pour les besoins fonctionnelles et non fonctionnelles attendues du système, afin de
mieux comprendre le projet.

3.2 Présentation du projet de stage

La gestion de l’information hospitalière consiste à améliorer de la qualité des soins des patients.
Alors que le monde devient de plus en plus automatisé en raison des progrès technologiques, nous
remarquons l’émergence de systèmes de traitement automatisé de l’information plus efficaces.

2
3.2.1 Système d’Information

Un Système d’Information Hospitalier (SIH) est un ensemble de Systèmes d’Information (SI) d’un
groupe hospitalier auquel SIL appartient. Le SIL est un serveur indispensable au fonctionnement du
laboratoire de biologie médicale qui permet de gérer l’administratif du patient et supervise la réali-
sation de l’ensemble des examens d’un patient. Il permet la validation biologique et la libération des
résultats sur un serveur de résultats .Le technicien de laboratoire gère tout ou partie du paramétrage
du SIL sous la responsabilité du biologiste responsable de l’informatique.

Le SIL est l’outil de production des résultats du laboratoire. C’est un système avec plusieurs qualités :
• une haute disponibilité grâce au réseau, à l’interopérabilité, aux dossiers patients
• une traçabilité et une sécurisation des données
• une interconnexion importante : SIL interconnecté aux données patients, au middleware, aux au-
tomates, au logiciel CQ(contrôle qualité), à aide à la validation biologique.

Les laboratoires de HMIMV sont soumis à des pressions évolutives qui concernent l’ensemble du
système de laboratoire, où coexistent le système d’information de laboratoire (SIL) et le système
d’automatisation de laboratoire (LAS).

HALIA est la solution middleware instrumentale de Dedalus qui permet de connecter ces deux
mondes complémentaires pour améliorer l’informatisation des laboratoires cliniques.

Conçu pour gérer de manière centralisée l’instrumentation pré-analytique, analytique et post-analytique,

HALIA offre un contrôle complet du suivi des échantillons et de la gestion des processus. En outre,
HALIA garantit une connectivité maximale, car il répond aux besoins des laboratoires.

3
 Figure 1 – Systeme d’information et Laboratoire

L’organisme m’a fourni un document qui m’a donné une image complète du fonctionnement du
système hospitalier et de la communication entre le système d’information du laboratoire et les
automates.Vous trouverez ce document en annexe pour plus de détails.

3.2.2 Choix de sujet

Afin de gérer la communication avec l’automate de laboratoire urinalysis, nous intéressons à la

conception d’un logiciel basé sur le web pour la gestion des informations de laboratoire afin d’amé-
liorer l’efficacité de la livraison des résultats et la gestion des tâches de laboratoire qui est une inter-
médiaire entre le middleware et l’automate.

3.3 Spécifications des besoins :

3.3.1 Besoins fonctionnels :

L’application web doit satisfaire les besoins fonctionnels suivants :

— Gestion efficace des activités du laboratoire

— L’aperçu de toutes les différentes demandes d’analyses de chaque patient

4
 — Gestion des ressources d’analyse du laboratoire

— La traçabilité des analyses des patients effectués

3.3.2 Besoins non fonctionnnels :

Il s’agit des besoins qui permettraient d’améliorer la qualité des services de l’application web, tels
que la convivialité et l’ergonomie des interfaces et l’amélioration du temps de réponse.
Parmi les besoins on cite :

— La sécurité : besoins d’établissement de la connexion, il faut avoir une interface d’authentifi-

cation qui permet à chaque utilisateur de se connecter pour consulter son profil.

— La convivialité : Le site doit être facile à utiliser .Il doit présenter en enchainement logique
entre les interfaces et un ensemble de liens suffisants pour assurer une navigation rapide et
un texte compréhensible, visible et lisible.

— La disponibilité : Lorsque l’utilisateur désire consulté le site il doit être disponible.

— Temps de réponse : Le temps de réponse doit être le plus court possible.

3.4 Plan des étapes de réalisation

Le projet a été réparti en plusieurs tâches afin de mieux organiser son élaboration comme le
montre la figure suivante :

3.5 Conclusion :

Dans ce chapitre, nous avions pu insérer notre projet dans son contexte en présentant la solution
adoptée pour résoudre les problèmes et qui répond à nos besoins .Dans le chapitre suivant, nous
allons présenter la conception qui a été mise en œuvre tout au long de la réalisation de ce projet.

5
Figure 2 – Diagramme de Gantt prévisionnel

6
Deuxième partie

ANALYSE ET CONCEPTION

4 Conception

4.1 Introduction :

Après avoir mentionné les différentes fonctionnalités de notre projet dans la première partie, on va
commencer maintenant une phase importante et indispensable dans le cycle de vie d’une application
. Cette phase est la conception qui a pour but d’expliquer le déroulement de notre application ainsi
qu’assurer une bonne compréhension de besoins des utilisateurs.

Pour ce projet, il y a deux parties, une partie dédiée à l’application web qui permet d’envoyer les
demandes d’analyses, et une partie spécification qui nous montre l’état d’avancement de la commu-
nication du driver avec l’automate du laboratoire.

4.2 Méthodologie et approche adoptée :

Pour la conception de notre système nous avons adopté une méthode objet, en effet l’approche
est une approche incontournable dans le cadre du développement des applications. Pour mieux pré-
senter l’architecture de notre application, on va choisir le langage de modélisation le plus adoptent
UML(Unified modeling Langage)* car il présente plusieurs avantages :

— Il améliore la qualité du travail

— Il permet de résoudre les problèmes architecturaux récurrents

— Il assure une bonne communication

— Il simplifie la complexité

— Il automatise la production de logiciels et les processus.

7
4.3 Le processus de developpement

4.3.1 Le cycle de développement en cascade

Le modèle en cascade, appelé Waterfall en anglais ,appliqué aux projets, est une approche linéaire
et séquentielle des différentes phases et activités du projet nécessaires à la livraison du ou des li-
vrables.

La méthode en cascade est plus particulièrement utilisée aujourd’hui pour les projets dont la réali-
sation de chaque étape dépend de l’étape précédente. Et particulièrement dans la construction.

Figure 3 – Modèle de cycle de vie en cascade

4.4 La démarche d’analyse

4.4.1 Les acteurs :

Un acteur représente le rôle d’une entité externe (utilisateur humain ou non) interagissant avec
le système. Dans notre application web on distingue deux utilisateurs :

— L’administrateur :C’est l’acteur qui joue le rôle de la gestion des utilisateurs dont l’ajout, mo-
dification et suppression des utilisateurs.

— L’utilisateur : C’est l’acteur qui permet de s’authentifier à l’application web pour qu’il puisse
faire la gestion des demandes et patients.

8
4.4.2 Phase d’expression des besoins

la phase d’expression des besoins est utilisée pour décrire l’ensemble des cas d’utilisation et les
cas d’utilisation de l’application.
Les diagrammes de cas d’utilisation décrivent la fonctionnalité générale et la portée d’un système.
Les diagrammes identifient également les interactions entre le système et ses acteurs. Les cas d’uti-
lisation et les acteurs dans un diagramme de cas d’utilisation décrivent ce que fait le système et
comment les acteurs l’utilisent, mais ne montrent pas comment le système fonctionne en interne.

*Partie WEB :
Le schéma suivant illustre le diagramme général de cas d’utilisation d’utilisateur :

Figure 4 – Diagramme de cas d’utilisation général

Cette figure illustre le diagramme de cas d’utilisation d’utilisateur qui est composé d’un seul acteur

9
"Utilisateur" et de deux cas d’utilisation "Gestion des patients" et "Gestion des demandes".

— "Gestion des patients"

1. Nom du cas :"Gestion des patients"

2. Acteur : Utilisateur

3. Scénario Principal :

— L’utilisateur choisit d’ajouter (modifier,supprimer)des patients

— le système affichera la formule de gestion des patients (ajouter ,modifier,supprimer)

— L’utilisateur peut ajouter des demandes après que la gestion de patient a était ter-
mine.

— "Gestion des demandes"

1. Nom du cas :"Gestion des demandes"

2. Acteur : Utilisateur

3. Scénario Principal :

— L’utilisateur peut voir la liste des demandes ajoutée.

— L’utilisateur peut modifier ou supprimer la demande d’analyse de patient.

— Après que l’utilisateur ajout les demandes et les analyser il passe pour les envoyer
au analyseur des demandes, ce dernier poura les envoyer au laboratoire.

10
 Figure 5 – Diagramme de cas d’utilisation d’administrateur

Cette figure illustre le diagramme de cas d’utilisation d’administrateur qui est composé d’un seul
acteur "Administrateur" et d’un cas d’utilisation "Gestion des utilisateurs".

— "Gestion des utilisateurs"

1. Nom du cas :"Gestion des utilisateurs"

2. Acteur : Administrateur

3. Scénario Principal :

— La gestion des utilisateurs tels que l’ajout ,modification et suppression.

4.4.3 Phase d’analyse :

Un diagramme de classe est l’un des types de diagrammes UML les plus utiles, car ils décrivent
clairement la structure d’un système particulier en modélisant ses classes, ses attributs, ses opéra-
tions et les relations entre ses objets.

Le schéma suivant illustre le diagramme de classe :

11
 Figure 6 – Diagramme de classe

4.4.4 Phase de conception :

Dans cette section, nous allons présenter les diagrammes de séquence pour la partie web et la
partie de communication de driver avec l’automate de laboratoire.
Un diagramme de séquence représente la séquence de messages entre les objets au cours d’une in-
teraction. Un diagramme de séquence comprend un groupe d’objets, représentés par des lignes de
vie, et les messages que ces objets échangent lors de l’interaction.

*Pour la partie web :

La figure ci-dessus représente le digramme de séquence de cas d’utilisation "S’authentifier" :

12
 Figure 7 – Diagramme de séquence de cas d’utilisation "S’authentifier"

La figure ci-dessus représente le diagramme de séquence de cas d’utilisation "Gestion des demandes" :

Figure 8 – Diagramme de séquence de cas d’utilisation "Gestion des demandes"

13
La figure ci-dessus représente le diagramme de séquence de cas d’utilisation "Gestion des patients" :

Figure 9 – Diagramme de séquence de cas d’utilisation "Gestion des patients"

La figure ci-dessus représente le diagramme de séquence de cas d’utilisation "Gestion des utilisa-
teurs" :

14
 Figure 10 – Diagramme de séquence de cas d’utilisation "Gestion des utilisateurs"

*Pour la partie spécification :

Pour comprendre comment s’effectue la communication entre le driver et l’automate de laboratoire,
nous nous basons sur le document de spécification, qui est illustré dans le diagramme de séquence
suivant :

15
 Figure 11 – Communication Protocol en mode de téléchargement

Figure 12 – Communication Protocol en mode Query

4.5 Conclusion :

Au cours de ce chapitre, nous avons présenté les diagrammes qui décrivent les fonctionnalités de
notre application comme le diagramme de cas d’utilisation et les diagrammes de séquence.

16
Troisième partie

REALISATION

5 Réalisation

5.1 Introduction :

Après avoir influencé la recherche et la conception de l’application, nous passons à la phase de

mise en œuvre. Ce chapitre présente les résultats du travail effectué pendant ce programme de stage.
Nous décrirons également les matériaux et les outils de développement utilisés. Nous concluons ce
chapitre avec des captures d’écran montrant la fonctionnalité de notre application.

5.2 Environnement de travail :

5.2.1 Environnement materiel :

L’équipement mis à notre disposition pour la réalisation du projet se compose d’un ordinateur
portable dont la configuration est la suivante :

□ Processeur :Intel(R) Core(TM) i5-4300U cpu @ 1.90GHz 2.50 GHz

□ 8 GO de memoire vive

□ 70 GO d’espace disque

5.2.2 Environnement logiciel :

Après avoir présenté les moyens matériels mis a notre disposition dans le cadre de réalisation de
ce projet ,nous abordons dans cette partie les moyens logiciels utilisés. Les logiciels utilisés pour la
réalisation de ce projet ainsi que pour la rédaction du rapport sont :

□ Visual Studio code :Suite de logiciels pour Windows conçue par Microsoft. Cette suite m’a
servi d’environnement de développement (IDE) pour déboguer mon code.

□ LATEX : Pour la rédaction de rapport

□ Draw.io :Pour la réalisation des différents diagrammes de modélisation.

17
5.3 Implémentation :

De nos jours, les applications web modernes sont accessibles à partir de plusieurs endroits, comme
le web, les applications mobiles ou même les applications web progressives. Pour pouvoir prendre
en charge toutes ces plateformes, les applications web doivent être développées d’une manière spé-
cifique. Pour ce projet j’ai choisi comme langages de dévelopement les langages suivant :

5.3.1 Node.js :

Node.js est une plate-forme de développement open source permettant d’exécuter du code Ja-
vaScript côté serveur. Node est utile pour développer des applications nécessitant une connexion
permanente entre le navigateur et le serveur. Il est souvent utilisé pour des applications en temps
réel telles que le chat, les flux d’actualités et les notifications push Web. Node.js est destiné à fonc-
tionner sur un serveur HTTP dédié et à utiliser un seul thread avec un processus à la fois.

Figure 13 – Logo node

5.3.2 Expressjs :

Après l’installation de Node.js, un répertoire racine est créé et, à l’intérieur du répertoire, express
est installé en émettant une commande à partir du terminal « npm install –g express ». Tous les
modules et dépendances de nœud ont été installés à l’aide de la commande npm install. Express est
un module de Node qui fournit un cadre minimal et flexible pour les applications Web Node.js. En
outre, il fournit des fonctions robustes et propres à ajouter aux modules Node dont le but de faciliter
considérablement le développement de l’application Node.js.

Figure 14 – Logo express

18
.

5.3.3 React.js :

Pour realiser ce projet j’ai choisi comme langage dans la Frontend le ReactJs.
React ou ReactJS ou encore React.js est un outil gratuit et open source. Plus précisément, il s’agit
d’une bibliothèque JavaScript front-end utilisée surtout pour créer des interfaces utilisateurs. Elle a
été créée par Facebook et elle est toujours entretenue par cette dernière avec la collaboration d’une
communauté composée d’entreprises et de développeurs individuels.

Figure 15 – Logo React

5.3.4 MongoDb :

MongoDB est une base de données NoSQL orientée document. Elle est utilisée pour le stockage de
volumes massifs de données. Contrairement à une base de données relationnelle SQL traditionnelle,
MongoDB ne repose pas sur des tableaux et des colonnes. Les données sont stockées sous forme de
collections et de documents.

Figure 16 – Logo MangoDb

5.3.5 L’application web :

Pour s’authentifier, on saisie le nom d’utilisateur et le mot de passe, puis connecter.

19
 Figure 17 – L’authentification-Web-

Dans cette figure, on affiche la liste des utilisateurs.

Figure 18 – Liste des utilisateurs

On ajoute un utilisateur comme suit :

20
 Figure 19 – Ajouter utilisateur

On peut modifier les informations d’un utilisateur comme la figure ci-dessous.

Figure 20 – Modification des informations d’utilisateur

Dans cette figure ou les informations des utilisateurs figure

21
 Figure 21 – Voir les informations d’utilisateur

Dans cette figure la liste des patients figure

Figure 22 – Liste des patients

On ajoute un patient comme suit :

22
 Figure 23 – Ajouter patient

On peut modifier les informations d’un patient comme la figure ci-dessous.

Figure 24 – Modification informations patient

On représente les informations des patients

23
 Figure 25 – Informations patient

On ajout une demande apres l’ajout du patient

Figure 26 – Ajouter demande

Dans cette figure, on affiche la liste des demandes.

24
 Figure 27 – liste des demandes d’analyses

Cette figure ,on affiche après l’envoie de demande au analyseur pour les traiter

Figure 28 – Après qu’on envoie les demandes

Cette figure , ou l’analyseur traite les demandes et les envoie.

25
 Figure 29 – Traitement des demandes

5.4 Conclusion :

Cette partie a présenté les différents outils et technologies utilisés pour réaliser ainsi cette partie
avait pour but la présentation des différentes fonctionnalités de l’application web.

26
6 Conclusion

Ce rapport a présenté le travail effectué au sein du service informatique de l’HMIMV, j’ai été sen-
sée de réaliser une application qui permet d’offrir aux employées un outil qui va leur permettre la
gestion des demandes d’analyses de patients. l’application nous permet l’ajout, la modification et la
suppression des patients et demandes d’analyses. Ainsi que la modification des rôles pour les utili-
sateurs par l’administrateur.

Grâce à ce projet, on a développé beaucoup de nouvelles connaissances et de savoir-faire dans le

domaine de développement web. En plus de cela, on a développé de nombreuses compétences pour
résoudre les problèmes auxquels on est confronté, quels qu’ils soient, en n’abandonnant jamais et
en cherchant des solutions partout.

L’objectif initial était de programmer un middleware qui permettrait la communication entre le

système d’information de laboratoire (SIL) et l’automate de laboratoire d’analyse d’urine, malheu-
reusement pour des raisons de confidentialité organisationnelle,le projet a été exécuté pour créer
une application web et un driver qu’il lit les données d’une base de données partagée entre les deux
afin que le driver puisse envoyer les requêtes reçues de l’application à l’automate.
J’ai gardé un excellent souvenir de ce projet. C’était une très bonne expérience valorisante et encou-
rageante pour moi dans l’avenir.

27
7 Webographie

— https ://reactjs.org/

— https ://nodejs.org/en/

— https ://jwt.io/

— https ://www.mongodb.com

— https ://github.com/Mhaajar/Stage1A

— https ://drive.google.com/file/d/16ZY10KbJK l3c3c9F gXf jjhasF P nCT ll/view?usp = sharing

28