|
| 1 | +[](../README.md) |
| 2 | +[](/README/README_fr_FR.md) |
| 3 | + |
| 4 | +> **Attention❗️ :** Ce projet utilise uniquement yarn, veuillez donc utiliser yarn pour installer les dépendances et exécuter le projet. |
| 5 | +>> yarn install |
| 6 | +> |
| 7 | +>> yarn dev |
| 8 | +> |
| 9 | +>> yarn build |
| 10 | +
|
| 11 | +# Intégration de l'application |
| 12 | +**Membres : Ao XIE, Reynalde SEGERIE, Antoine Viton** |
| 13 | + |
| 14 | +# Contexte d'utilisation |
| 15 | +Nous sommes l'équipe de développement d'une jeune entreprise de multimédia nommée KASA qui souhaite automatiser la gestion de son catalogue de produits. L'entreprise KASA a besoin d'une application web pour afficher les produits, les trier par catégorie et permettre aux utilisateurs de rechercher des produits. |
| 16 | +De plus, l'entreprise souhaite se démarquer de ses concurrents en offrant une expérience utilisateur de qualité. |
| 17 | + |
| 18 | +Afin de fidéliser sa clientèle, l'entreprise souhaite également mettre en place un système d'espace personnel (authentification, compte utilisateur, etc.) permettant aux utilisateurs de sauvegarder leurs produits favoris et de retrouver leurs recherches précédentes. |
| 19 | + |
| 20 | +# Flux de présentation des produits |
| 21 | +<font color='red'>**TODO :** Le code de la section "Récupération des données depuis l'API" a été refactorisé et doit être réécrit à l'exception du diagramme de flux.</font> |
| 22 | + |
| 23 | +## Vue d'ensemble |
| 24 | +Le composant `ListCard` récupère les données des produits depuis l'API `/data` et les affiche en fonction de la catégorie sélectionnée (`type`). Ce document décrit la structure des données et la manière dont le frontend gère la catégorisation et la présentation des produits. |
| 25 | + |
| 26 | +## Format des données |
| 27 | +Chaque produit de l'API contient les champs suivants : |
| 28 | + |
| 29 | +- **serialNumber** : Un identifiant unique pour le produit. |
| 30 | +- **productName** : Le nom du produit, y compris les détails spécifiques du modèle. |
| 31 | +- **brand** : La marque du produit. |
| 32 | +- **model** : L'identifiant spécifique du modèle. |
| 33 | +- **description** : Une brève description des caractéristiques et spécifications principales du produit. |
| 34 | +- **price** : Le prix en USD. |
| 35 | +- **image** : URL de l'image du produit. |
| 36 | +- **clicks** : Le nombre de clics ou de vues, indiquant la popularité. |
| 37 | +- **type** : <font color='red'>**_TODO : À corriger_**</font> La catégorie du produit, comme "téléphone" ou "PC". |
| 38 | + |
| 39 | +## Vue d'ensemble du flux |
| 40 | + |
| 41 | +1. **Récupération des données** : |
| 42 | + Le composant `ListCard` effectue une requête vers `/data` pour récupérer toutes les données des produits. |
| 43 | + |
| 44 | +2. **Filtrage par catégorie** : |
| 45 | + En fonction de la page sélectionnée par l'utilisateur, le champ `type` est utilisé pour filtrer les produits à afficher. Par exemple : |
| 46 | + - Si l'utilisateur sélectionne la catégorie "smartphone", seuls les produits avec `type: phone` sont affichés. |
| 47 | + |
| 48 | +3. **Rendu** : |
| 49 | + Les produits correspondant au `type` sélectionné sont affichés sous forme de cartes, contenant les informations suivantes : nom, marque, modèle, description, prix, clics, et image. |
| 50 | + |
| 51 | +### Diagramme pour les pages d'affichage |
| 52 | + |
| 53 | +```mermaid |
| 54 | +flowchart TD |
| 55 | + A(Page d'accueil) --> B[Récupérer les informations de base sur les produits depuis l'API] |
| 56 | + C -->|Utilisation de la fonction de recherche| G[Afficher la page de recherche] |
| 57 | + G --> H[Filtrer les produits par mot-clé] |
| 58 | + H --> I[Afficher les produits correspondant au mot-clé] |
| 59 | + I -->|L'utilisateur ajoute un produit au panier| D |
| 60 | + B --> C[Afficher tous les produits] |
| 61 | + C -->|L'utilisateur ajoute un produit au panier| D |
| 62 | + C -->|L'utilisateur sélectionne des sous-pages| E[Filtrer les produits par sous-page] |
| 63 | + E --> K[Afficher les produits par sous-page] |
| 64 | + K -->|L'utilisateur ajoute un produit au panier| D(Produit ajouté au panier) |
| 65 | +``` |
| 66 | + |
| 67 | +# Flux de travail du chatbot |
| 68 | + |
| 69 | +## Vue d'ensemble |
| 70 | +Le chatbot est une interface conversationnelle qui aide les utilisateurs à trouver des produits en fonction de leurs préférences. Ce document décrit la structure du chatbot et son interaction avec les données des produits. |
| 71 | + |
| 72 | +## API ChatGPT |
| 73 | +Le composant du __ChatBot__ a été implémenté en utilisant l'API OpenAI ChatGPT. <font color='red'>**_Cette API nécessite une clé stockée dans le fichier `.env.local`._**</font> Ce fichier n'est pas inclus dans le dépôt. Utilisez le format suivant pour créer le fichier : |
| 74 | +```json |
| 75 | +OPENAI_API_KEY=votre_clé_ici |
| 76 | +``` |
| 77 | + |
| 78 | +## Vue d'ensemble du flux |
| 79 | +```mermaid |
| 80 | +graph TD; |
| 81 | + A[L'utilisateur ouvre le chatbot] --> B[Initialisation du chatbot avec useState et useEffect]; |
| 82 | + |
| 83 | + B --> C1[Récupérer les données des produits depuis /api/backend]; |
| 84 | + C1 --> D1[Le backend répond avec les données des produits]; |
| 85 | + D1 --> E1[Les données des produits sont traitées et affichées dans le chat]; |
| 86 | +
|
| 87 | + E[L'utilisateur envoie un message] --> F1[Envoyer le message à handleResponse]; |
| 88 | + F1 --> G1[Appel à l'API OpenAI /api/openai]; |
| 89 | + G1 --> H1[L'API OpenAI traite la demande et retourne une réponse]; |
| 90 | + H1 --> I1[Réponse ajoutée au chat]; |
| 91 | +
|
| 92 | + C1 --> J[Gestion des erreurs pour l'API backend]; |
| 93 | + G1 --> K[Gestion des erreurs pour l'API OpenAI]; |
| 94 | +``` |
| 95 | + |
| 96 | +# Fonction de recherche |
| 97 | + |
| 98 | +## Vue d'ensemble |
| 99 | +En utilisant Fuse.js, la fonction de recherche permet aux utilisateurs de rechercher des produits par mots-clés. Ce document décrit la fonctionnalité de recherche et son interaction avec les données des produits. |
| 100 | + |
| 101 | +# Intégration OAuth2 de Google |
| 102 | +```mermaid |
| 103 | +sequenceDiagram |
| 104 | + participant Utilisateur |
| 105 | + participant Application |
| 106 | + participant ServeurAutorisation as Serveur d'autorisation Google |
| 107 | + participant ServeurRessources as API Google (Serveur de ressources) |
| 108 | +
|
| 109 | + Utilisateur->>Application: Demande de connexion |
| 110 | + Application->>ServeurAutorisation: Redirection de l'utilisateur pour l'autorisation |
| 111 | + ServeurAutorisation->>Utilisateur: Demande de permission |
| 112 | + Utilisateur->>ServeurAutorisation: Permission accordée |
| 113 | + ServeurAutorisation->>Application: Retour du code d'autorisation |
| 114 | + Application->>ServeurAutorisation: Échange du code contre un jeton d'accès |
| 115 | + ServeurAutorisation->>Application: Retour des jetons d'accès et de rafraîchissement |
| 116 | + Application->>ServeurRessources: Utilisation du jeton d'accès pour accéder aux ressources |
| 117 | + ServeurRessources->>Application: Retour des données utilisateur |
| 118 | + Application->>ServeurAutorisation: Rafraîchir le jeton d'accès expiré |
| 119 | + ServeurAutorisation->>Application: Retour du nouveau jeton d'accès |
| 120 | +``` |
| 121 | + |
| 122 | +# Flux de connexion utilisateur |
| 123 | +```mermaid |
| 124 | +sequenceDiagram |
| 125 | + participant Utilisateur |
| 126 | + participant Frontend |
| 127 | + participant Backend |
| 128 | + participant BaseDeDonnées |
| 129 | +
|
| 130 | + Utilisateur ->> Frontend: Soumettre les identifiants |
| 131 | + Frontend ->> Backend: Envoyer les identifiants |
| 132 | + Backend ->> BaseDeDonnées: Vérifier les identifiants |
| 133 | + BaseDeDonnées ->> Backend: Résultat de la vérification |
| 134 | + alt Identifiants valides |
| 135 | + Backend ->> Frontend: Retourner le jeton d'accès (JWT) |
| 136 | + Frontend ->> Utilisateur: Authentification réussie |
| 137 | + else Identifiants invalides |
| 138 | + Backend ->> Frontend: Erreur d'authentification |
| 139 | + Frontend ->> Utilisateur: Message d'erreur |
| 140 | + end |
| 141 | +
|
| 142 | + Utilisateur ->> Frontend: Demander une ressource protégée |
| 143 | + Frontend ->> Backend: Envoyer la demande avec le jeton |
| 144 | + Backend ->> Backend: Vérifier le jeton (JWT) |
| 145 | + alt Jeton valide |
| 146 | + Backend ->> Frontend: Retourner la ressource |
| 147 | + Frontend ->> Utilisateur: Afficher la ressource |
| 148 | + else Jeton invalide ou expiré |
| 149 | + Backend ->> Frontend: Erreur d'authentification |
| 150 | + Frontend ->> Utilisateur: Demande de reconnexion |
| 151 | + end |
| 152 | +``` |
0 commit comments