Analyse et Documentation d'une Application Web Glotelho.
cm
Objectif : Permettre aux utilisateurs de commander et faire des achats des produits
electroniques et electro-menagers en ligne.
Public cible : Clients occasionnels et réguliers.
1. Fonctionnalités principales :
Recherche et paiement des produits en ligne.
Réservations des Produits en ligne.
Gestion des comptes utilisateurs.
Annulation et modification de réservations.
Technologies utilisées :
Frontend : [Link].
Backend : [Link] avec Express.
Base de données : MongoDB.
Hébergement : AWS (Amazon Web Services).
2. Analyse de l'application
Test utilisateur (UX) :
Les utilisateurs trouvent difficile de parcourir l'application web car il est
touffu.
Le processus de paiement est trop long (5 étapes).
Performance :
Le temps de chargement de la page d'accueil ainsi que les pages de promotion des
produits est de 5 secondes (trop lent).
L'application se comporte mal sur mobile (afin les pages sont trop touffu et
surchargés ce qui rend le chargement des pages lent).
Sécurité :
Les mots de passe ne sont pas chiffrés correctement.
Aucune protection contre les attaques par force brute.
SEO :
Les pages ne sont pas optimisées pour les moteurs de recherche.
Absence de balises meta descriptives.
Accessibilité :
Les contrastes de couleurs ne respectent pas les normes WCAG.
3. Documentation de l'application
Architecture technique :
Frontend : [Link] pour l'interface utilisateur.
Backend : [Link] avec Express pour gérer les API.
Base de données : MongoDB pour stocker les données des utilisateurs et des
réservations.
API : RESTful API pour la communication entre le frontend et le backend.
Code source :
Documentation des composants React (props, états, fonctions).
Commentaires dans le code backend pour expliquer les routes et les contrôleurs.
Fonctionnalités :
Guide utilisateur détaillé avec des captures d'écran pour chaque étape de
réservation.
Procédures d'installation :
Instructions pour installer [Link], MongoDB, et lancer l'application en local.
Dépendances :
Listes des packages npm utilisés (React, Express, Mongoose, etc.).
4. Propositions d'améliorations
Améliorations UX/UI :
Suppression du modal du panier qui vient vers la droite lorsqu'on ajoute un produit
dans le pannier et mettre l'option d'ajout de produit dans la page
"Panier".
La Nav bar ainsi que la page d'acceuil doivent être moins surchargé (doit utiliser
des sous-menus lorsqu'on clique au dessus).
Optimisation des performances :
Migrer vers une base de données plus performante comme PostgreSQL.
Nouvelles fonctionnalités :
Intégrer un système de fidélité pour les utilisateurs réguliers.
Sécurité renforcée :
Chiffrer les mots de passe avec bcrypt.
Ajouter une authentification à deux facteurs (2FA).
Améliorations SEO :
Ajouter des balises meta descriptives et des titres optimisés.
Accessibilité :
Améliorer les contrastes de couleurs pour respecter les normes WCAG.
Rendre l'application moins touffu sur tous les ecrans.
5. Planification des améliorations
Priorisation :
Sécurité (chiffrement des mots de passe, 2FA).
Performance (réduction du temps de chargement).
UX/UI (simplification du paiement).
Roadmap :
Semaine 1-2 : Audit de sécurité et corrections.
Semaine 3-4 : Optimisation des performances.
Semaine 5-6 : Refonte du processus de paiement.
Tests :
Utiliser Selenium pour tester les nouveaux parcours utilisateur.
Effectuer des tests de charge avec JMeter.
Résultat final
Une fois les améliorations mises en œuvre, l'application sera plus sécurisée, plus
rapide, et offrira une meilleure expérience utilisateur.
Les utilisateurs pourront commander des produits plus facilement, et l'application
sera mieux référencée sur les moteurs de recherche.