Réalisation d’un site web pour afficher les temps d’attente dans les services d’urgences en France

Période : Du 27 / 05 / 2024 au 28 / 06 / 2024
Entreprise / Organisation : CYRIAQUE MAZERES

Contexte du projet
Lors de ce stage, j’ai participé au développement d’un site web visant à afficher en temps réel les temps d’attente dans les services d’urgence en France. Ce projet répondait à un besoin de rendre l’accès à ces informations plus transparent et accessible pour les citoyens.

Technologies utilisées

• Frontend : HTML, CSS, JavaScript, React.JS, JSON
• Autres outils : IDE: Visual studio avec les commandes Next.js

Mon rôle

• Conception et réalisation de l’interface utilisateur (UI) pour une navigation intuitive.
• Développement des fonctionnalités permettant d’afficher dynamiquement les temps d’attente en fonction des données collectées.

Résultats obtenus

• Mise en place d’un site opérationnel capable de gérer et d’afficher les temps d’attente en quelques clics.
• Réduction du temps de recherche des patients pour trouver l’hôpital ou service le moins saturé.

Compétences développées

• Programmation web : approfondissement en HTML, CSS, JavaScript et PHP.
• Gestion de base de données : création et manipulation de tables SQL.
• Travail en équipe et communication avec mon maitre de stage en distanciel pour répondre aux besoins fonctionnels du projet.

Vision globale

Pages portail  “patient” :

Commandes d’initialisation de projet Next.JS:

• “npx create-next-app@latest nextjs-dashboard” pour créer une application next.js
• “npm config list” pour configurer le répertoire
• “npm cache clean –force npm” permet de nettoyer le cache et donc de résoudre des conflits avec des packages
• “npm install -g npm” pour installer les packages
• “npm audit fix” pour réparer les vulnérabilités
• “npm run dev” pour lancer le serveur développement

Exemple d’utilisation de la fonction recherche :

Saisie dans la barre de recherche
L’utilisateur commence par saisir un mot-clé dans la barre de recherche, par exemple « mon ». Le système renvoie alors toutes les villes contenant « mon » (recherche insensible à la casse).

Fonction recherche

La fonctionnalité de recherche va permettre d’afficher toutes les villes contenant les mêmes caractères dans leur nom (De manière générale, il faut prendre le premier caractère et afficher toutes les villes qui possèdent cette chaîne de caractères).

Durant le développement de cette fonction recherche, j’ai utilisé des fichiers JSON pour les données affichées sur le site tel que le fichier “ville.json”. Les fichiers JSON sont temporaires et utilisés pour des tests. Ils vont laisser leur place à une base de données.

Dans le fichier Recherche.tsx, j’ai tout d’abord indiqué “use client“ pour indiquer qu’il y a aura des interactions entre le client et le serveur.

Ensuite, l’élément interface définit l’id et le nom de la ville que j’ai définis dans le fichier ville.json.

La déclaration de la fonction Home va être définie avec la constante “searchTerm” et la fonction “setSearchTerm” qui va mettre à jour le terme recherché. “useState(‘’)” est un hook React qui adapte l’état selon la valeur saisie par l’utilisateur.

De plus, la constante “filteredCities” devrait permettre de filtrer les villes selon l’ordre d’apparition dans le fichier ville.json (ordre alphabétique en général) et d’être insensible à la casse.

La méthode preventDefault() va indiquer que l’élément par défaut (l’action par défaut est la soumission du formulaire) ne sera pas prise en compte.

Le formulaire va utiliser:

• onChange : Pour mettre à jour ”setSearchTerm” avec la valeur courante (e.target.value) du champ de saisie chaque fois que l’utilisateur tape dans le champ.
• value={searchTerm}: La valeur du champ de saisie est liée à l’état searchTerm

Enfin, l’affichage des résultats de la recherche est possible si la variable searchTerm n’est pas vide.Ces résultats vont s’afficher sous forme de liste non ordonnée avec la balise <ul></ul> “filteredCities.length > 0 ?” va permettre d’afficher les villes qui correspondent au caractère entré par l’utilisateur ou alors le message « Aucune ville trouvée”.
Le composant Link relie le nom et l’identifiant d’une ville et l’affiche dans l’URL.

Sélection de la ville
En cliquant sur « Montpellier », l’utilisateur accède à la liste de tous les services d’urgence disponibles dans cette ville. Les résultats incluent des informations telles que le nom des établissements, leur temps d’attente estimé et une note basée sur les avis des utilisateurs.

Consultation des détails d’un établissement
En cliquant sur un établissement, comme le « CHU de Montpellier », l’utilisateur peut consulter une fiche détaillée. Cette fiche affiche des informations supplémentaires, comme le temps d’attente estimé, les commentaires d’autres utilisateurs et d’éventuelles notes ou évaluations.

Ce processus intuitif permet de trouver rapidement un établissement d’urgence adapté.