Rapport de stage

Thème

Conception et réalisation de design d'une application de suivi de patients dans un établissement hospitalier

INTRODUCTION

L'impact que prend l'informatique dans notre vie quotidienne est de plus en plus considérable et ne cesse de s'accroitre quant à son application dans divers domaines et cela jusqu'à avoir une emprise même dans le domaine de santé.

Le système des hôpitaux de la côte d'ivoire s’offre beaucoup dans la gestion des patients. Avant l'invention de l'ordinateur, on enregistrait toutes les informations manuellement sur des supports en papier ce qui engendrait beaucoup de problèmes tel que la perte de temps considérable dans la recherche de ces informations ou la dégradation de ces dernières etc...

Ainsi, jusqu'à présent, l'ordinateur reste le moyen le plus sûr pour le traitement et la sauvegarde de l'information. Cette invention a permis d'informatiser les systèmes de données des entreprises, ce qui est la partie essentielle dans leur développement aujourd'hui. Les hôpitaux font partie intégrante des établissements que l'informatique pourra beaucoup aidés.

De ce fait, l'université Virtuelle de côte d'ivoire (UVCI) décide de créer une application web qui permettra de gérer les patients dans un hôpital.

C'est dans ce cadre, viens s'inscrire notre thème du projet de fin d'étude de la licence en informatique spécialité Multimédia et Art Numérique :<< Conception et réalisation de design d'une application de suivi de patients dans un établissement hospitalier >> que trouve sa réelle justification.

Ainsi, notre rapport tournera autour de trois grandes parties essentielles

•          Etude préalable : qui localise le contexte général de notre projet.

•         Conception : dans lequel nous présenterons la notation de modélisation utilisée ainsi l'ensemble des diagrammes conçus.

•         Réalisation : qui sera consacré à l'étude technique où nous détaillons notre environnement de travail suivis d'une présentation des différentes fonctionnalités de   notre application à travers des captures.

CHAPITRE I : CONTEXTE

    I.         PRESENTATION DE LA STRUCTURE D’ACCUEIL

1.    Historique de l’UVCI

L’Université Virtuelle de Côte d’Ivoire (UVCI) est un établissement public administratif (EPA) créée par décret N°2015-775 du 09 décembre 2015 par l’Etat de Côte d’Ivoire.
Cette université qui forme aux métiers du numérique éducatif est issue de la deuxième phase de l’appui financier du deuxième Contrat de Désendettement et de Développement (C2D) Éducation/Formation conclu entre la République française et l’Etat de Côte d’Ivoire par la volonté politique du Ministère de l’Enseignement Supérieur et de la Recherche Scientifique, à vouloir résoudre le problème du sureffectif des institutions universitaires.

Le C2D éducation/formation vise ainsi à soutenir le ministère de l’enseignement supérieur et de la recherche scientifique dans ses efforts d’introduction du numérique éducatif dans le système d’enseignement supérieur. L’objectif étant de répondre au nombre de plus en plus croissant de bacheliers qui se présentent aux portes des universités chaque année, au déficit en infrastructures et d’améliorer la qualité de l’offre de formation en vue de relever le taux d’employabilité des diplômés.

2.    Missions

L’Université Virtuelle de Côte d’Ivoire a pour principale mission de développer et vulgariser l’enseignement à distance à travers les Technologies de l’Information et de la Communication qui font partie intégrante du Programme Thématique de Recherche du Conseil Africain et Malgache pour l’Enseignement Supérieur (CAMES). Par conséquent, elle se doit d’accompagner les Universités et Grandes Écoles Publiques qui dispensent de cours en présentiel, afin que celles-ci convergent vers la formation à distance à travers le numérique.
Il est à rappeler que l’Université Virtuelle compte en deux années de fonctionnement, près de 6500 étudiants qui sont formés au numérique éducatif dans la filière Informatique des Sciences du Numérique.

L'Université Virtuelle de Côte d'Ivoire est une Université publique d'enseignement à distance axée sur le numérique éducatif. Elle offre des formations qualifiantes, diplômantes et professionnalisantes. Pour la rentrée universitaire, la Licence Informatique et Sciences du Numérique (ISN) est ouverte avec 6 spécialités :

✔       Réseaux et Sécurité Informatique (RSI)

✔       Bases de Données (BD)

✔       Développement d’Applications et e-Services (DAS)

✔       Multimédia et Arts Numériques (MMX)

✔       Communication Digitales (COM)

✔       E-Commerce et Marketing Digital (CMD)

3.    Organigrammes

L’organisation administrative de l’Université Virtuelle de Côte-d’Ivoire (UVCI) est présentée à  

travers l’organigramme détaillé ci-dessous. L’UVCI est sous la responsabilité d’un conseil de 

Gestion (CG) dont les pouvoirs sont confiés à un Directeur Général (DG). Le Directeur général 

est aidé dans sa tâche par deux Directeurs centraux : le Directeur des affaires académiques et 

pédagogiques (DAAP) et la Directrice des Affaires Administratives et Financières (DAAF). Les 

directions sont organisées en sous-directions, auxquelles sont rattachés des services pour mener à bien les activités.

4.    Projets réalisés par uvci

Différents projets ont été réalisés au sein de l’UVCI parmi lesquels peuvent être cités :

Ø  Numérisation de thèses et mémoires à l’UFHB et UNA avec le partenaire Fondation MTN.

Résultat : 1 155.160 pages numérisées soient 6525 documents.

Ø  Déployer les ressources de CAIRN à l’UFHB.

Résultat :  des accès déjà créés à CAIRN pour plus de 5000 utilisateurs dont 353 ont effectivement fait des recherches.

Ø  Atelier national de formation à l’utilisation des ressources électroniques des programmes AGORA et AGRIS.

Résultat : 62 Bibliothécaires, enseignants-chercheurs, décideurs, étudiants.

                 I.        PRESENTATION DU CADRE CONCEPTUEL DU

PROJET

Introduction partielle

    Ce chapitre nous permet de présenter le projet soumis à notre étude, plus précisément le contexte, la problématique et le cahier de charge.

1.  Contexte du projet

Le bureau des entrées est un service très important dans la gestion quotidienne du dossier du malade, de l’état civil et constitue les ressources propres de l’établissement hospitalier.  Il a pour mission : le suivi des patients, des naissances, des décès, l’enregistrement du mouvement de la population hospitalière. Son rôle ne se limite pas seulement à ces taches citées ci-dessus mais vise également l'évaluation et l'exploitation d'un certain nombre d'informations et de statistiques, liées à la comptabilité des journées.

Cependant, malgré les immenses efforts fournis par ce service ne suffise pas. En réalité, nous constatons de nombreux problèmes du :

v  Au manque de sécurité (d’information, authentification)

v  Au manque de fiabilité 

v  Au Perte et erreurs de données et de documents à cause du volume important des informations traitées.

v  Recherche difficile sur les registres qui engendre une perte de temps.

v  Dégradation et régression des archives à force de leur utilisation trop fréquente.

v  Nombre important des archives accumulées qui engendre une difficulté de stockage.

En outre, nous pouvons dire que l’une dans raisons pour laquelle ce service est confronté à ce multitude problème est dû au manque de l’informatique dans le système des hôpitaux.

2.    Problématique

Au vu de tout ce qui précède, nous souhaiterions améliorer le fonctionnement du bureau d’entré de par l’informatisation de ce service, alors nous nous posons la question suivante :

Quelle solution applicative mettre en place pour faciliter le suivi des patients dans un établissement hospitalier ?

3.    Cahier de charges

L’objectif de notre projet est la mise en place du design d’une application qui facilitera le suivi de patients dans un établissement hospitalier. Ainsi nous allons établi à notre étude les objectifs suivants :

Ø  La fiabilité de notre application.

Ø  Rapidité dans l'établissement des différents documents.

Ø  Facilité de la recherche et l'accès aux informations.

Ø  Stockage des informations sur des supports informatiques et s’assurer de leur sécurité.

Ø  Gain de temps dans les calculs des statistiques.

            Conclusion partielle

Nous avons présenté le projet. Nous avons étudié les différents besoins de notre projet. Dans la partie suivante nous nous intéresserons à l’étude conceptuelle de notre travail.

CHAPITRE II : CONCEPTION

                    I.             INTRODUCTION

L’objectif de ce chapitre est d'aboutir à la conception de l’interface de notre application. Il est souvent difficile de se retrouver dans le vocabulaire de la conception web ou application, car plus souvent d'origine anglophone. Il convient toutefois de noter que pour doter notre projet d'une bonne ergonomie, certains termes tels wireframe, zoning, et prototype doivent être maîtrisés. En effet concevoir un système avant sa réalisation permet de mieux comprendre le fonctionnement du système.

                  II.            LA PHASE DE CONCEPTION DES INTERFACES

La phase de conception des interfaces est une étape cruciale qui intervient au début de chaque projet et évolue avec celui-ci. Chaque étape apporte donc son lot d'amélioration (organisation des contenus, etc.) qu'il convient de situer dans son contexte. Il convient par conséquent de bien comprendre chacun de ces termes, afin de savoir où va quoi !

Les Etapes préliminaires d’une conception visuelle

    1.    Le Zoning

C'est un terme qui permet de schématiser de façon "grossière" une page web à travers l'emploi de blocs. Son but est donc de présenter la position des différentes zones de contenus, ainsi que celles des grandes fonctionnalités.

Cette étape permet donc de définir l'organisation générale des pages d'un projet web. Elle intervient après la conception d'une arborescence, ou peut se réaliser de manière simultanée. Outre le fait de permettre la présentation d'une première approche du projet pour validation ou réajustement, cette étape permet également de s'assurer que les souhaits du client sont adaptés ou non au projet, avant de passer à l'étape suivante.

 

                                              

    2.    Le Wireframe

Le wireframe ou en français "maquette fil de fer", cette étape exploite ce qui a été réalisé à l'étape précédente, dans l'optique de préciser chaque bloc en insérant les contenus présents (textes, images, vidéos, etc.). Son objectif est donc de définir avec précision et sans notion graphique l'organisation, les formes (d'une manière générale), les contenus présents et la structure des éléments. Ici, les interfaces seront donc conçues en tenant compte des souhaits et standards ergonomiques.

                                          

    3.    Le prototype

Il s'agit à cette étape de transformer chacune des pages réalisées à l'étape précédente en pages interactives. Il sera donc possible d'insérer des liens pour présenter les principes de navigation de notre application web. Cette étape permet également de rendre un formulaire fonctionnel, pour réaliser des simulations, en associant les contraintes techniques, ainsi que l'affichage de messages de confirmation ou d'erreur en fonction des informations fournies

       III.            Conclusion

Dans ce deuxième chapitre, nous avons pu effectuer et détaillé la conception et la réalisation de l’interface de notre système d'information pour le suivi hospitalier en se basant sur la méthodologie de conception de l’interface d’une application web, en commencent par le zoning. Le plus important qui est de définir l'organisation générale des pages d'une application web et qui sera de plus en plus détaillé par la suite du wireframe. Enfin nous avons précédé à l’interaction les pages crées (le prototypage).

CHAPITRE III : REALISATION

                      I.            OUTILS ET MISE EN ŒUVRE DE LA SOLUTION

Dans le cadre de la réalisation d’un projet les choix technologiques sont guides par la nature du développement à effectuer, de même que par les besoins du client ainsi que par l’expertise du designer.

Dans Ce chapitre il sera question de faire la présentation des différentes technologies qui servirons à mettre en œuvre la réalisation de notre maquette et la présentation de notre produit.

                  II.            ENVIRONNEMENT DE DEVELOPPEMENT

Dans le cadre de notre projet, pour le développement de la maquette de notre application web, nous avons utilisé Adobe XD comme outils de création et prototypage de notre modèle, que nous avons associer à Adobe Photoshop comme outil de retouche, de traitement de nos images et de création de notre logo.

     1.    Adobe XD

1.1.                    Définition

Adobe XD est un vectoriel outil de conception de l' expérience utilisateur pour les applications Web et des applications mobiles , développé et édité par Adobe Inc.  Il est disponible pour macOS et Windows , bien qu'il existe des versions pour iOS et Android permettant de pré visualiser le résultat du travail directement sur les appareils mobiles. XD prend en charge les structures filaires de site Web et la création de prototypes de clics interactifs.

    1.2.               Historique

Adobe a annoncé pour la première fois qu'il développait un nouvel outil de conception et de prototypage d'interface sous le nom de "Project Comet" lors de la conférence Adobe MAX en octobre 2015. ^[2] La première version bêta publique a été publiée pour macOS sous le nom "Adobe Expérience Design CC". Un compte Adobe le 14 mars 2016. ^[1] Une version bêta d'Adobe XD a été publiée pour Windows 10 le 13 décembre 2016. ^[3] Le 18 octobre 2017, Adobe a annoncé qu'Adobe XD n'était plus en version bêta. 

   1.3.          Interface Adobe XD

Lorsque vous lancez Adobe XD, une “fenêtre de démarrage” apparaît.

Ici, vous pouvez choisir la taille de votre planche graphique, qui représente l'écran de l'application ou la page du site Web que vous allez créer. 

Voici l’interface de travail:

   Barre d’outil gauche

Nous avons ici tous les principaux outils disponibles dans Adobe XD.

Du haut :

• outil de sélection (également accessible à l’aide du raccourci clavier V du clavier)

• outil rectangle (R)

• outil ellipse (E)

• outil linéaire (L)

• outil stylo (P)

• outil de texte (T)

• outil graphique (A)

• outil de zoom (Z)

Et puis en bas :

• panneau Actifs

• panneau Calques

 Panneau de droite (inspecteur des propriétés)

Dans ce panneau, vous pouvez trouver plusieurs paramètres vous permettant d'afficher ou de modifier les propriétés de vos objets :

• options d'alignement

• répéter la grille

• combinaison d'options (opérateurs booléens) 

• taille et positionnement des objets

• style de texte

• opacité

• remplit

• les frontières

• ombres

• flou

                    III.            PRESENTATION DE  APPLICATION

L’application suit les tâches suivantes :

-l’ajout : de patient, de naissance et décès.

-la sortie du patient.

-L’affichage : La liste des patients traités.

-Les statistiques : Pourcentage des naissances par mois.

                               Pourcentage des décès par mois.

- Les imprimés : Demande d’hospitalisation.

    L’INTERFACE DE NOTRE APPLICATION

Le formulaire d’authentification : Il s’affiche au lancement de notre application, il nous demandera d'introduire notre mail et le mot de passe d'authentification pour accéder au menu principal.

une  fois notre mail et le mot de passe d'authentification est correct, nous avons accès a notre fenêtre principal.

La fenêtre Principale 

Juste à gauche nous avons une icône qui nous conduit directement à la fenêtre du menu principal.

La fenêtre du Menu Principal : la fenêtre du menu principal contient 7 boutons :

Accueil, Nouveau, Modifier, Supprimer, Statistique, Imprimer et déconnexion

             

   LES FORMULAIRES DE L'APPLICATION

Voici quelques exemples de formulaires :

-          L’ajout d’un patient à hospitaliser

Après avoir saisi toutes les informations du patient, il suffit de cliquer sur le bouton "Enregistrer" pour les sauvegarder dans la base de données.   

-          Si un patient est orienté d’un autre établissement il remplit le formulaire suivant :

-          Et pour la suppression d’un garde malade, une fenêtre s’affichera en demandant soit d’introduire les informations par son « Nom » ou par son « Numéro » :

Après la saisie, il peut afficher ses informations avant la suppression par « Afficher Le Garde Malade Avant Suppression » ou le supprimer directement du système mais la sauvegarde reste dans les archives.

 - Les imprimés : Notre application permet d'imprimer des documents propres à l'établissement hospitalier, pour le contrôle des entrées/sorties du patient.Voici-ici l’exemple de demande d’hospitalisation :
Pour imprimer une demande d’hospitalisation d’un patient donné, il suffit d'aller dans le menu "Imprimer" et de cliquer là-dessus, une nouvelle page apparaîtra demandant d'introduire le numéro du patient comme illustré ci-dessous

         IV.            CONCLUSION

Au cours de cette dernière étape de notre travail, nous avons présenté les outils utilisés pour développés notre design, ainsi que quelques différentes interfaces de notre Produit.

CONCLUSION GENERALE

Notre stage a UVCI nous a été bénéfique. En effet nous y avons acquis une expérience qui nous a permis de nous familiariser dans le monde du multimédia et surtout le Design.

En effet, notre stage nous a permis de consolider les connaissances acquises durant notre période de formation en MMX à L’Université virtuel de côte d’ivoire.

De plus, la mise en place de notre Design a exigé un minimum de connaissance en UX/UI Design.

Jusqu'à ce jour, nous avons pu réaliser les fonctionnalités principales de notre solution. Cependant, la perfection ne pouvait pas être atteinte à 100%, cette application peut être améliorée notamment la mise à jour des utilisateurs, les statistiques des naissances par mois, des décès par mois.