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)

  1. L'utilisateur se connecte (ou crée un compte, puis se connecte).
  2. Il arrive sur le Dashboard de l’application.
  3. Une section “Utilisation de l’énergie” s’affiche automatiquement.
  4. Cette section affiche :
    • L’heure actuelle de la mesure
    • L’énergie consommée en kWh
    • Le courant mesuré en Ampères
  5. Ces valeurs sont mises à jour automatiquement toutes les 10 secondes (sans recharger la page).
  6. 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 :

dashbaord

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

image


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

image


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)

  1. L’utilisateur se connecte à son compte et accède à la page /profil.
  2. Il peut consulter ses données actuelles (nom, email, photo).
  3. Il modifie l’un des champs suivants :
    • Nom
    • Email (avec envoi d’un email de confirmation)
    • Photo de profil (via un input file)
  4. 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.
  5. 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

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’état user

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)

  1. L’utilisateur arrive sur la page Connexion.

  2. Il saisit son email et son mot de passe.

  3. Il clique sur Se connecter :

    • Si les identifiants sont corrects, il est redirigé vers le dashboard.
    • Sinon, un message d’erreur s’affiche.
  4. En cas d’oubli, il clique sur Mot de passe oublié ?

  5. Il est redirigé vers une page pour saisir son adresse email.

  6. Un email de réinitialisation avec lien sécurisé est envoyé.

  7. En cliquant sur ce lien, il accède à la page Réinitialiser le mot de passe.

  8. Il entre et confirme son nouveau mot de passe, et est redirigé vers la page de connexion.

  9. L’utilisateur peut aussi cliquer sur Besoin d’aide ?

  10. Il accède à une page Contact, saisit son message, et le soumet.

  11. Une confirmation d’envoi s’affiche à l’écran.


Maquettes associées

Page de connexion

image

Page de réinitialisation

Page d'envoie du mail de réinitialisation grâce au mail

Capture d'écran 2025-05-30 233409

Page de réinitialisation

image

Page contact

Capture d'écran 2025-05-30 233355


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.