Application Utilisateur¶
L'Application Utilisateur est la partie orientée client d'OvApp, conçue pour les utilisateurs qui utilisent les services d'échange de batteries OVES. Elle fournit un tableau de bord en libre-service pour gérer leur abonnement, trouver des stations d'échange et suivre leur activité.
Authentification et Connexion¶
Lorsqu'un utilisateur ouvre l'application, elle vérifie d'abord s'il a des identifiants enregistrés :
- Utilisateur revenant — l'application affiche un écran « Bienvenue à nouveau » avec son nom et son profil, proposant deux options :
- Continuer — le connecte et commence à pré-charger les données en arrière-plan pour une expérience plus rapide
- Changer de Compte — efface les identifiants et affiche le formulaire de connexion
- Nouvelle session — l'utilisateur voit un écran de connexion où il se connecte avec son numéro de téléphone et son mot de passe
Note
Les utilisateurs ne peuvent pas s'inscrire eux-mêmes directement sur cet écran. Ils peuvent uniquement se connecter avec les identifiants qui leur ont été fournis.
Écran d'Accueil¶
Une fois connecté, l'utilisateur atterrit sur l'écran d'Accueil, qui comporte quatre sections principales :
Carte Mon Véhicule¶
Affiche les informations sur le véhicule et l'abonnement de l'utilisateur :
| Champ | Description |
|---|---|
| ID du Véhicule | Le véhicule assigné à l'utilisateur |
| Statut de paiement | Actif, Renouvellement dû, En retard, etc. |
| Total des échanges | Nombre d'échanges de batteries effectués |
| Dernier échange | Quand le dernier échange a eu lieu |
Ces données sont récupérées en appelant la mutation GraphQL identifyCustomer en utilisant leur code d'abonnement, qui retourne les données du plan de service, y compris le véhicule assigné, le nombre d'échanges, la consommation d'énergie et l'état de paiement.
Carte Solde du Compte¶
Affiche le solde du compte de l'utilisateur dans sa devise de facturation (ex. XOF).
- Le solde est calculé à partir des données du service d'énergie : énergie restante (quota moins utilisé) multipliée par le prix unitaire
- Un bouton Recharger permet à l'utilisateur d'ajouter des fonds
Actions Rapides¶
| Bouton | Action |
|---|---|
| Trouver une Station | Navigue vers la vue cartographique des Stations |
| Mon QR Code | Ouvre un modal affichant un QR code généré à partir de leur code d'abonnement (les techniciens scannent ceci lors des échanges) |
Carte des Stations à Proximité¶
Une carte Leaflet/OpenStreetMap interactive affichant les stations d'échange à proximité sous forme de marqueurs.
Processus de découverte des stations :
- L'application publie une requête MQTT pour obtenir les IDs de flotte associés au plan d'abonnement de l'utilisateur.
- Elle interroge un endpoint GraphQL (
getFleetAvatarsSummary) avec ces IDs de flotte pour obtenir les emplacements des stations et la disponibilité des batteries.
Chaque station affiche :
- Nom de la station
- Distance par rapport à l'utilisateur (calculée en utilisant la formule de Haversine avec GPS)
- Nombre de batteries entièrement chargées disponibles
Interactions :
- Appuyer sur une station zoome la carte
- Appuyer sur la flèche de navigation trace une ligne d'itinéraire depuis la position de l'utilisateur jusqu'à la station
Écran des Stations¶
Une vue cartographique plein écran avec toutes les stations d'échange.
Fonctionnalités¶
- Barre de recherche pour filtrer les stations par nom
- Liste de stations sous la carte avec des fiches pour chaque station
- Chaque fiche de station affiche :
| Champ | Description |
|---|---|
| Nom | Nom de la station |
| Coordonnées | Emplacement de la station |
| Distance | Distance depuis la position actuelle de l'utilisateur |
| Batteries disponibles | Nombre de batteries à 100% de charge uniquement |
Interactions¶
- Appuyer sur une station la met en évidence sur la carte
- Le bouton Naviguer trace un itinéraire depuis la position actuelle de l'utilisateur jusqu'à la station sélectionnée
- Nécessite la permission de localisation — affiche un fallback ou une invite si GPS est désactivé
- Se met à jour dynamiquement avec les changements de localisation
Écran d'Activité¶
Un historique des transactions affichant tous les échanges et paiements, regroupés par date (Aujourd'hui, Hier, ou des dates spécifiques).
Source des Données¶
Les activités sont récupérées depuis l'endpoint GraphQL servicePlanActions, qui retourne les deux :
- Actions de paiement — recharges, paiements d'abonnement
- Actions de service — échanges de batteries, consommation d'électricité
Affichage¶
Chaque entrée affiche :
- Icône de type — flèches d'échange, symbole monétaire, etc.
- Titre — description de l'action
- Montant — valeur de la transaction
- Horodatage — quand cela s'est produit
Onglets de Filtrage¶
- Tous — affiche tout
- Échanges — historique des échanges de batteries uniquement
- Paiements — historique des paiements et des recharges uniquement
État Vide¶
Affiche « Aucune activité trouvée » lorsque aucun enregistrement n'existe.
Écran de Profil¶
Affiche les informations personnelles de l'utilisateur et les paramètres du compte.
Informations Affichées¶
- Avatar et nom complet de l'utilisateur
- Numéro de téléphone
- Solde du compte
- Total des échanges
- Nom du plan d'abonnement et date de validité
- Informations sur le véhicule
- Statut de paiement
Éléments du Menu¶
| Élément | Description |
|---|---|
| Détails du Compte | Voir les informations personnelles ; changer le mot de passe via l'API Odoo |
| Mon Véhicule | Identité et détails d'immatriculation du véhicule |
| Plan d'Abonnement | Voir et gérer le plan et la facturation |
| Méthodes de Paiement | Options de paiement liées |
| Aide et Support | FAQ et contact du support / page de tickets |
| Déconnexion | Se déconnecter de la session utilisateur |
Modal de Recharge¶
Un flux en plusieurs étapes pour ajouter des fonds au compte de l'utilisateur :
- Sélectionner le montant — choisir un montant prédéfini ou en saisir un personnalisé
- Choisir la méthode de paiement — choisir la méthode de paiement
- Saisir l'ID de transaction — fournir la référence de paiement
- Confirmer — soumettre la recharge
En cas de succès :
- Le solde se met à jour immédiatement
- Une nouvelle entrée d'activité apparaît dans l'historique
Modal Détails du Compte¶
Permet à l'utilisateur de changer son mot de passe :
- Saisir le mot de passe actuel
- Saisir le nouveau mot de passe
- Confirmer
Après un changement réussi, l'application déconnecte l'utilisateur pour qu'il puisse se reconnecter avec les nouveaux identifiants.
Navigation en Bas¶
Une barre de navigation en bas persistante avec quatre onglets pour basculer rapidement entre les écrans :
| Onglet | Écran |
|---|---|
| Accueil | Tableau de bord avec carte véhicule, solde, actions rapides et stations à proximité |
| Stations | Carte plein écran avec toutes les stations d'échange |
| Activité | Historique des transactions avec filtres |
| Profil | Informations personnelles, paramètres et gestion du compte |
Résumé du Flux de Données¶
Lors de la connexion, l'application lance plusieurs appels API en parallèle pour la rapidité :
| Appel API | Données Retournées |
|---|---|
| API tableau de bord Odoo | Résumé des paiements |
| API des abonnements | Détails de l'abonnement actif |
Mutation GraphQL identifyCustomer |
Véhicule, nombre d'échanges, solde énergétique |
Requête GraphQL servicePlanActions |
Historique des activités |
Requête MQTT + requête GraphQL getFleetAvatarsSummary |
Emplacements des stations et disponibilité des batteries |
Chaque appel met à jour sa propre partie de l'IU indépendamment, ainsi l'utilisateur voit les données apparaître progressivement plutôt que d'attendre que tout se charge.