Pulse Sense

Le projet Pulse Sense a pour but d'apporter une solution complète permettant aux utilisateurs de mesurer et de suivre leur santé à l'aide d'un dispositif externe, en accédant facilement aux données mesurées via une application mobile dédiée. Le projet est divisé en trois parties distinctes, chacune jouant un rôle clé dans l'ensemble du système:

• Partie Web: Cette composante met en avant nos services et notre application. Elle comprend également une interface d'administration sécurisée qui permet de consulter et de gérer les données des utilisateurs inscrits.
• Application mobile: Les utilisateurs pourront suivre leur santé, analyser les tendances et recevoir des conseils personnalisés via des articles de blog mis à jour régulièrement. L'application mobile a été développée en mettant l'accent sur la convivialité, la sécurité et la protection de la vie privée des utilisateurs.
• Partie IOT: Cette partie intègre des capteurs spécifiques qui permettent de collecter les données de santé des utilisateurs de manière précise et fiable. Les données mesurées sont transmises et stockées de manière sécurisée dans une base de données centrale.

Fonctionnalités:

Inscription des utilisateurs:

• Permettre aux utilisateurs de créer un compte en fournissant des informations telles que leur nom, leur adresse e-mail et un mot de passe sécurisé.
• Valider les informations fournies lors de l'inscription pour assurer l'exactitude des données.

Mesure des paramètres de santé :

• Intégrer des capteurs pour mesurer la fréquence cardiaque, la température corporelle et la saturation en oxygène.
• Permettre aux utilisateurs de lancer la mesure des paramètres de santé à l'aide du dispositif externe connecté à l'application mobile.
• Afficher les résultats de la mesure de manière claire et compréhensible pour les utilisateurs.

Suivi des données de santé :

• Stocker les données de santé mesurées dans une base de données sécurisée.
• Permettre aux utilisateurs d'accéder à l'historique de leurs mesures précédentes.
• Afficher les données de santé sous forme de graphiques ou de tableaux pour permettre une analyse visuelle.

Interface d'administration :

• Mettre en place une interface d'administration sécurisée pour gérer les utilisateurs inscrits.
• Permettre aux administrateurs d'accéder aux données de santé des utilisateurs et de les consulter ou de les exporter si nécessaire.

Confidentialité et sécurité des données :

• Appliquer des mesures de sécurité pour protéger les données des utilisateurs, y compris le chiffrement des données sensibles et l'utilisation de protocoles de communication sécurisés.
• Respecter les réglementations en matière de protection des données personnelles et offrir aux utilisateurs un contrôle sur leurs informations personnelles.

Technologies utilisées:

• Symfony: Utilisé pour développer l'API de l'application, fournissant des fonctionnalités de gestion des données et d'interactions avec la base de données.

• React Native & Expo: Pour le développement de l'application mobile, j'ai utilisé Expo, c'est un framework utilisé pour développer des applications mobiles avec React Native

• Yarn: Gestionnaire de paquets utilisé pour installer et gérer les dépendances de l'application.

• MySQL: Système de gestion de base de données relationnelle (SGBDR) utilisé pour stocker les données de l'application.

• Postman: Utilisé pour tester l'API de l'application et vérifier les réponses des requêtes.

• Visual Studio Code: Environnement de développement intégré (IDE), je l'utilise principalement lorsque je développe en JavaScript.

• PHPStorm: Environnement de développement intégré (IDE) avec support PHP.

• GitLab: Utilisé comme outil d'organisation pour gérer le suivi des tâches et suivre l'avancement du projet à l'aide d'un board avec des issues.

• Figma: Utilisé pour créer des maquettes et des prototypes interactifs, aidant à la conception de l'interface utilisateur de l'application.

Conception

La partie web :

Cette partie comporte concerne la partie Symfony, où j'ai développé la landing page, le système d'authentification, l'accès au dashboard d'administration et la création de l'API.

La partie "Hero Section" qui contient une présentation de l'appli avec un slogan et une image

Je l'ai conçu afin dans le but présenter de manière percutante les points clés du service, en utilisant des éléments visuels attrayants, un message accrocheur et des incitations claires à agir.

Création d'un système de connexion sécurisé et d'une interface d'administration : La page de connexion est accessible à tous, mais il est important de noter qu'elle n'est pas directement accessible depuis l'interface principale. J'ai pris la décision de ne pas inclure de lien direct vers la page de connexion afin de la réserver exclusivement aux administrateurs.

Création d'une API : Pour la réalisation de l'API, j'ai commencé par définir les endpoints (routes API) nécessaires pour mettre en place les fonctionnalités souhaitées. J'ai utilisé Postman tout au long du développement de l'API pour tester les endpoints et m'assurer de leur bon fonctionnement. En parallèle, j'ai également utilisé Postman pour documenter l'API en fournissant des informations détaillées sur chaque route, y compris les méthodes HTTP acceptées et les paramètres requis.

• Voici les différentes routes de mon API :

L'API a été sécurisée en utilisant un système de JWT (JSON Web Token) pour les routes commençant par "/api/v1". Le JWT est un mécanisme d'authentification basé sur des tokens qui permet de sécuriser les échanges entre le client et le serveur. Lorsqu'un utilisateur s'authentifie avec succès, le serveur génère un JWT qui est renvoyé au client.

• Voici un exemple de génération d'un token JWT via Postman :

L'application mobile :

Pour le développement de l'application mobile, j'ai utilisé Expo, c'est un framework utilisé pour développer des applications mobiles avec React Native. Il offre des outils intégrés, une compatibilité multiplateforme, une bibliothèque de composants préconstruits et une facilité de déploiement.

La navigation au sein de l'application : J'ai utilisé un AuthProvider qui englobe toute l'application. Grâce à celui-ci, j'ai pu gérer l'état de connexion de l'utilisateur. À chaque fois que l'application se charge, je vérifie si l'utilisateur est connecté ou non à l'aide d'un state.

Si l'utilisateur est connecté, je le redirige vers une navigation appelée "TabNavigation". Cette navigation lui permet d'accéder à différentes pages de l'application, telles que la page d'accueil ("/home"), la page de son profil ("/profile") et la page des paramètres ("/settings"). Cette navigation est adaptée aux utilisateurs connectés, leur permettant de bénéficier de fonctionnalités avancées.

En revanche, si l'utilisateur n'est pas connecté, il reste dans la navigation par défaut, appelée "StackNavigation". Cette navigation lui offre un ensemble restreint de pages accessibles, telles que la page de connexion ("/login"), la page de bienvenue ("/welcome") et la page d'inscription ("/register").

Les différents types de navigation pour une appli mobile :

J'ai développé différentes pages pour mon application mobile :

La page Welcome

• Cette page est dédiée à l'onboarding, fournissant aux nouveaux utilisateurs des informations de base sur l'application et ses fonctionnalités.

La page d'inscription

• Cette page permet aux utilisateurs de créer un compte en fournissant les informations requises. Les champs entrés par l'utilisateur sont validés avant d'être envoyés à l'API à l'aide d'un service approprié.

La page de connexion (Login)

• Cette page permet aux utilisateurs déjà inscrits de se connecter à l'application en utilisant leurs identifiants. Une fois la connexion réussie, un token JWT est généré et utilisé pour les requêtes ultérieures à l'API.

La page d'accueil (Home)

• Elle permet d'afficher toutes les données mesurées par l'utilisateur, telles que la fréquence cardiaque, la saturation en oxygène et la température corporelle. J'ai conçu l'interface de manière à offrir la meilleure expérience utilisateur possible, en mettant en place un système de filtrage pour trier les données par type ainsi qu'un système de pagination afin de facilité la consultation des données.

La page de profil (Profile)

• Elle permet à l'utilisateur de consulter ses informations personnelles et de générer un récapitulatif PDF de toutes ses données enregistrées.

La page des paramètres (Paramètres)

• Cette page offre plusieurs fonctionnalités à l'utilisateur. Il peut se déconnecter de l'application, demander une réinitialisation de son mot de passe et personnaliser le thème de l'application en choisissant parmi différentes couleurs disponibles.

Ce projet a été une expérience exceptionnelle qui m'a permis de me plonger dans le développement d'applications mobiles de manière approfondie. Étant novice dans le domaine du développement mobile et n'ayant jamais utilisé React Native auparavant, j'ai relevé avec enthousiasme le défi de créer une application complète et fonctionnelle.