Introduction:
notre application dédiée à la gestion de magasin. Ce projet se distingue par l'intégration
judicieuse de technologies modernes, mettant en avant React pour le frontend, ASP.NET
pour le backend, et Swagger UI pour la gestion structurée des données au format JSON.
Dans cette initiative, nous avons axé notre approche sur la création d'une solution hautement
performante et professionnelle. La présence de React garantit une interface utilisateur
réactive et esthétiquement plaisante, tandis qu'ASP.NET offre une gestion sécurisée et
efficace des opérations côté serveur.
La décision d'incorporer Swagger UI souligne notre engagement envers la transparence et la
documentation précise des API, facilitant ainsi le développement continu et l'intégration de
nouvelles fonctionnalités.
Dans ce rapport, nous explorerons en détail l'architecture, les fonctionnalités clés, et les
avantages de "Gestion Magazin".
Technologies utilisée :
Les technologies utilisées dans le cadre du projet "Gestion Magazin" sont sélectionnées pour
assurer une base solide et moderne. Voici un aperçu des principales technologies intégrées :
1. React (Frontend) :
Description : React est une bibliothèque JavaScript développée par Facebook,
utilisée pour la construction d'interfaces utilisateur interactives et réactives.
Rôle dans le projet : Gestion de l'interface utilisateur côté client, permettant
une expérience utilisateur fluide et moderne.
2. ASP.NET (Backend) :
Description : ASP.NET est un framework de développement web côté
serveur développé par Microsoft, offrant une plateforme robuste pour la
création d'applications web modernes.
Rôle dans le projet : Gestion de la logique côté serveur, gestion des
utilisateurs, et interaction avec la base de données.
3. Swagger UI :
Description : Swagger UI est un outil qui permet de visualiser et d'interagir
avec la documentation d'API. Il facilite la compréhension et l'utilisation des
API exposées par le backend.
Rôle dans le projet : Documentation claire et interactive des API, simplifiant
le développement et l'intégration de nouvelles fonctionnalités.
Cette combinaison de technologies crée une architecture robuste et cohérente, permettant une
gestion efficace des données.
Composants Frontend (React.js)
Composant App
Emplacement : magazin_front\src\App.js
Description : Composant central de l'application React, responsable de l'orchestration
de la structure générale et du comportement de l'interface utilisateur.
Composants Arrière (ASP.NET Core)
Contrôleurs
Product : GestionDeMagazin\GestionDeMagazin\Controllers\ProductController.cs
Purchase : GestionDeMagazin\GestionDeMagazin\Controllers\PurchaseController.cs
Sale : GestionDeMagazin\GestionDeMagazin\Controllers\SaleController.cs
Description : Ces contrôleurs gèrent les requêtes HTTP liées aux produits,
aux achats, et aux ventes, agissant comme des intermédiaires entre le front-end
et les services associés.
Services
Interfaces
IProductService : GestionDeMagazin\GestionDeMagazin\Services\IServices\
IProductService.cs
IPurchaseService : GestionDeMagazin\GestionDeMagazin\Services\IServices\
IPurchaseService.cs
ISaleService : GestionDeMagazin\GestionDeMagazin\Services\IServices\
ISaleService.cs
Description : Ces interfaces définissent les opérations liées aux produits, aux
achats, et aux ventes, établissant des contrats pour leurs implémentations
respectives.
Modèles
Modèles
Produit : (Probablement défini dans un fichier non spécifié)
Achat : (Probablement défini dans un fichier non spécifié)
Vente : (Probablement défini dans un fichier non spécifié)
Description : Ces modèles représentent respectivement un produit, un
événement d'achat, et un événement de vente dans l'application, encapsulant
les informations et les actions pertinentes.
Fichiers CSS
1. index.css : magazin_front\src\index.css
2. ProductList.css : magazin_front\src\Components\ProductList\ProductList.css
3. App.css : magazin_front\src\App.css
Description : Ces fichiers CSS contribuent à la mise en forme et à la
présentation visuelle de l'application, assurant une interface utilisateur
cohérente et esthétiquement plaisante.
Affichage :
Dans cette section, nous présenterons des captures d'écran illustrant les fonctionnalités clés de
l'application "Gestion Magazin".
La page Swagger UI offre une interface interactive et documentée pour explorer les
API associées aux produits, aux achats, et aux ventes de l'application. Voici un aperçu
de la manière dont ces fonctionnalités sont présentées sur cette page :
En élargissant la section "Product", nous découvrons des détails sur les différentes
opérations disponibles pour la gestion des produits dans l'application.
En détaillant davantage la section "Product" sur la page Swagger UI,nous explorerons
le processus d'ajout d'un nouveau produit en utilisant l'opération POST.
La page des produits est conçue en utilisant React , Voici une description de la page,
mettant en avant ses fonctionnalités clés.
Tableau des Produits
La page présente un tableau dynamique affichant tous les produits disponibles dans
le magasin. Chaque ligne du tableau représente un produit et affiche les informations
telles que l'identifiant, le nom, la description, et le prix.
Fonctionnalités du Tableau :
1. Tri des Produits : Les utilisateurs peuvent trier les produits en fonction de
différentes colonnes telles que le nom, le prix, etc. Cela permet une
visualisation personnalisée des produits.
2. Ajout de Produits : Un bouton "+ New" est présent en haut de la page. En
cliquant sur ce bouton, les utilisateurs peuvent saisir les détails d'un nouveau
produit, qui sera ensuite ajouté à la liste après soumission.
3. Suppression de Produits : Chaque ligne du tableau est accompagnée d'un
bouton de suppression. En cliquant sur ce bouton, l'utilisateur peut supprimer
le produit correspondant de la liste.
4. Exporter le Produit : : Les utilisateurs peuvent exporter les produits en fichier
json pour les visualiser ou pour les tester.
