Application Mobile React Native
Page de connexion mobile
La page de connexion mobile a été développée en React Native pour garantir une expérience utilisateur fluide et native sur iOS et Android. Elle intègre un formulaire sécurisé permettant la saisie de l’email et du mot de passe, avec une gestion avancée des états (loading, erreurs, validation des champs). L’authentification s’appuie sur une API REST sécurisée, qui utilise des tokens JWT pour la gestion des sessions utilisateur. Un système de « Se souvenir de moi » est implémenté via AsyncStorage, permettant de stocker le token localement et d’assurer une reconnexion automatique. L’interface utilise des composants personnalisés et une gestion centralisée du thème (couleurs, polices) pour respecter la charte graphique du projet. La navigation est assurée par React Navigation, garantissant une transition fluide vers le tableau de bord après connexion.
calendrier des cours
Le calendrier des cours est une vue interactive développée en React Native, utilisant des librairies comme react-native-calendars pour un affichage ergonomique des plannings. Chaque jour affiche dynamiquement les cours programmés, récupérés via des appels à l’API backend (Symfony) en JSON. Les données sont structurées pour afficher le nom du cours, l’horaire, et la salle, avec une différenciation visuelle entre les jours sélectionnés et les autres. Les événements sont mis à jour en temps réel grâce à un système de rafraîchissement (pull-to-refresh). L’architecture du code favorise la réutilisabilité des composants (carte de cours, liste des événements), et la gestion des états est centralisée via le Context API pour assurer la cohérence des données sur l’ensemble de l’application.
Vue du cours en cours et cours passés pour signer
Cette section permet à l’apprenant de visualiser, pour chaque journée, la liste des cours en cours et passés, avec la possibilité d’accéder directement à la fiche d’émargement pour la signature. Les données sont récupérées en temps réel depuis l’API, filtrées côté client pour distinguer les cours à venir, en cours et terminés. Chaque carte de cours affiche le nom, la salle, l’horaire et propose un bouton d’action pour signer ou justifier une absence. L’interface gère les états de signature (signé, non signé, absence justifiée) et affiche des badges de statut. L’intégration avec l’API permet également de mettre à jour le statut d’émargement instantanément, avec gestion des erreurs réseau et feedback utilisateur. La navigation entre les différentes vues (cours du jour, passés) est optimisée pour le mobile, avec un design épuré et accessible.
Vue signature
La vue signature est un composant clé de l’application mobile, développé en React Native avec la librairie react-native-signature-canvas. Elle permet à l’utilisateur de signer directement sur l’écran tactile dans un cadre dédié, avec gestion de la pression et de la fluidité du trait. La signature est convertie en image (base64) puis envoyée de façon sécurisée à l’API backend, où elle est stockée et associée à la session de cours via l’entité SignatureSession. Un bouton « Sauvegarder » permet de valider la signature, avec retour visuel sur la réussite de l’opération. La vue gère également les cas d’erreur (signature vide, problème réseau) et propose une expérience utilisateur intuitive, adaptée à tous types de smartphones. L’ensemble du flux est sécurisé et conforme aux exigences de traçabilité de la présence.
