Us personelles - rayleiighh/Dev-Web-2024 GitHub Wiki
1. Liste des US personnelles par étudiant avec les liens pour y accéder
Mohamed Mokhtar El Mazani
US-001 – Affichage en temps réel des consommations électriques
Formulation de l'US
En tant qu'utilisateur, je veux voir en temps réel la consommation électrique de mes appareils depuis le tableau de bord, afin d’identifier les pics d'utilisation et optimiser ma consommation.
Scénario utilisateur (début → fin)
- L'utilisateur se connecte (ou crée un compte, puis se connecte).
- Il arrive sur le Dashboard de l’application.
- Une section “Utilisation de l’énergie” s’affiche automatiquement.
- Cette section affiche :
- L’heure actuelle de la mesure
- L’énergie consommée en kWh
- Le courant mesuré en Ampères
- Ces valeurs sont mises à jour automatiquement toutes les 10 secondes (sans recharger la page).
- L'utilisateur peut cliquer sur le bouton “Historique” pour passer à l'affichage historique complet.
Maquette associée
La capture d'écran ci-dessous illustre la version implémentée de cette US dans le tableau de bord :
Critères d’acceptation (checklist)
- La section “Utilisation de l’énergie” est visible sur le dashboard dès la connexion.
- L’heure de la dernière mesure est affichée dynamiquement (ex :
17:29:48
). - La consommation en énergie (kWh) et le courant (A) sont affichés avec 3 à 4 décimales.
- Les valeurs sont rafraîchies toutes les 10 secondes automatiquement.
- Un bouton “Historique” permet d’accéder à la page dédiée aux données anciennes.
- L’interface comprend aussi :
- Une section utilisateur avec photo de profil, bouton paramètres ⚙️ et notifications 🔔.
- Une section “Appareils favoris” (liste avec icônes circulaires).
- Une section “Contact” pour accéder au support technique.
Lien avec autres User Stories
- Cette US ne dépend d’aucune autre US pour fonctionner.
- Elle peut être suivie par :
- US-002 (affichage historique des consommations)
- US-007 (alerte en cas de dépassement de seuil)
- US-005 (Activation/Désactivation des appareils)
Ben Lhaj Rayane
US-007 – Notification quotidienne de consommation moyenne
Formulation de l'US
En tant qu’utilisateur, je veux recevoir une notification informative chaque jour résumant la consommation moyenne de mes appareils, afin de mieux comprendre mes habitudes et ajuster ma consommation sur le long terme.
Scénario utilisateur (début → fin)
- L’utilisateur se connecte à l’application.
- Il configure dans ses préférences s’il souhaite recevoir des notifications informatives quotidiennes.
- Chaque jour à une heure définie (ex. 13h), une tâche planifiée calcule la consommation moyenne des dernières 24h.
- Une notification est générée et envoyée par email (ou autre moyen sélectionné).
- L’utilisateur peut retrouver un historique de ces notifications dans une page dédiée.
Maquette associée
Critères d’acceptation
- Le backend calcule automatiquement la moyenne quotidienne de consommation par multiprise.
- La tâche planifiée s'exécute chaque jour à heure fixe via cron (node-cron).
- Une notification informative est générée avec les données pertinentes.
- L'utilisateur peut choisir d'activer/désactiver cette fonctionnalité.
- L’historique des notifications est consultable dans l’application.
- Les notifications sont envoyées de manière fiable (ex : via Nodemailer).
Lien avec autres User Stories
- Dépend de :
- US-001 – Affichage en temps réel des consommations
- Peut être suivie par :
- US-010 – Gestion des préférences utilisateur
- US-011 – Export hebdomadaire ou mensuel
US-010 – Gestion des préférences utilisateur
Formulation de l'US
En tant qu’utilisateur, je souhaite pouvoir personnaliser les paramètres de mon compte (unités, alertes, apparence) afin d’adapter l’application à mes besoins et à mes préférences.
Scénario utilisateur (début → fin)
- L’utilisateur se connecte à l’application.
- Depuis le menu utilisateur, il accède à la page “Préférences”.
- Il peut configurer les éléments suivants :
- Les unités de mesure (kWh, Wh, A…)
- Le thème visuel (mode clair ou sombre)
- L’activation ou non des notifications informatives
- La fréquence d’actualisation des données en temps réel
- Les préférences sont sauvegardées dans MongoDB.
- Elles sont appliquées automatiquement dans le dashboard à chaque connexion.
Maquette associée
Critères d’acceptation
- Une page dédiée permet à l’utilisateur de modifier ses préférences.
- Les données sont sauvegardées dans la base MongoDB.
- Les préférences sont appliquées automatiquement dans toute l’interface.
- L’utilisateur peut activer/désactiver les notifications informatives.
- Les paramètres sont persistants même après déconnexion ou redémarrage.
- L’expérience utilisateur est personnalisée de bout en bout.
Lien avec autres User Stories
- Dépend de :
- US-001 – Implémentation du dashboard
- US-007 – Notification quotidienne de consommation
- Peut être suivie par :
- US-011 – Personnalisation avancée (profils, planification horaire, etc.)
Zebiri Saad
US- Gestion du profil utilisateur
Formulation de l'US
En tant qu’utilisateur connecté, je souhaite accéder à une page dédiée pour modifier mes informations personnelles (nom, email, mot de passe, photo de profil), afin de maintenir mon compte à jour et sécurisé.
Scénario utilisateur (début → fin)
- L’utilisateur se connecte à son compte et accède à la page /profil.
- Il peut consulter ses données actuelles (nom, email, photo).
- Il modifie l’un des champs suivants :
- Nom
- Email (avec envoi d’un email de confirmation)
- Photo de profil (via un input
file
)
- Il peut également changer son mot de passe :
- Il saisit l’ancien mot de passe pour vérification.
- Il saisit le nouveau mot de passe et le confirme.
- Il peut activer un toggle pour afficher/masquer les mots de passe.
- Il clique sur le bouton Enregistrer :
- Les données sont mises à jour.
- Un email de confirmation est envoyé si l’email ou le mot de passe a changé.
- En cas d’erreur, un message s’affiche à l’écran.
Maquette de la page Profil
Fonctionnalités couvertes
- Affichage des données utilisateur récupérées via JWT (
req.userId
) - Mise à jour du nom, email et mot de passe
- Upload sécurisé de la photo de profil
- Toggle pour afficher/masquer les champs de mot de passe
- Vérification de l’ancien mot de passe
- Envoi d’un email de confirmation via
nodemailer
- Indicateur de chargement (
loading
) lors de la soumission - Redirection et protection de la route
/profil
via l’étatuser
Technologies utilisées
Frontend (React) | Backend (Node.js + Express) |
---|---|
Profil.js – page principale |
utilisateurController.js – méthode mettreAJourProfil() |
useState , axios , toggle |
bcrypt – pour vérifier le mot de passe |
Upload input[type="file"] |
nodemailer – envoi d'e-mails confirmant les changements |
Spinner de chargement sur le bouton | JWT (req.userId ) pour sécuriser les actions |
Zebiri Saad
US – Authentification, réinitialisation et assistance utilisateur
Formulation de l'US
En tant qu’utilisateur, je souhaite pouvoir me connecter, réinitialiser mon mot de passe en cas d’oubli, et contacter le support, afin d’accéder à mon compte et de résoudre mes problèmes rapidement.
Scénario utilisateur (début → fin)
-
L’utilisateur arrive sur la page Connexion.
-
Il saisit son email et son mot de passe.
-
Il clique sur Se connecter :
- Si les identifiants sont corrects, il est redirigé vers le dashboard.
- Sinon, un message d’erreur s’affiche.
-
En cas d’oubli, il clique sur Mot de passe oublié ?
-
Il est redirigé vers une page pour saisir son adresse email.
-
Un email de réinitialisation avec lien sécurisé est envoyé.
-
En cliquant sur ce lien, il accède à la page Réinitialiser le mot de passe.
-
Il entre et confirme son nouveau mot de passe, et est redirigé vers la page de connexion.
-
L’utilisateur peut aussi cliquer sur Besoin d’aide ?
-
Il accède à une page Contact, saisit son message, et le soumet.
-
Une confirmation d’envoi s’affiche à l’écran.
Maquettes associées
Page de connexion
Page de réinitialisation
Page d'envoie du mail de réinitialisation grâce au mail
Page de réinitialisation
Page contact
Critères d’acceptation (checklist)
- L’utilisateur peut saisir ses identifiants et se connecter.
- Un message d’erreur apparaît si les identifiants sont incorrects.
- Le lien "Mot de passe oublié ?" fonctionne et envoie un email.
- Le lien reçu par email mène vers une page de réinitialisation.
- Le nouveau mot de passe doit être confirmé.
- Un bouton permet d’afficher/masquer les mots de passe.
- L’utilisateur peut accéder à une page de contact en cas de besoin.
- Une confirmation d’envoi de message est affichée après soumission.
- Les boutons incluent un état de chargement (spinner).
- Les pages sont sécurisées (accessible uniquement aux non-connectés sauf contact).
🔗 Liens avec d’autres US
- US – Gestion de profil (changement email, mot de passe depuis profil)
- Cette US peut être implémentée indépendamment et en parallèle.