Architecture - ZosiscoIV/Dev-Web-2024 GitHub Wiki

Résumé coaching 3

+ Le groupe montre en démo que backend et frontend choisis sont installés et fonctionnent (au moins les bases).
+ Idéalement le groupe peut également faire le lien pour accéder à la base de données choisie.

+ Le groupe explique dans le wiki quelle est l'architecture et comment le projet est mis en place.
+ Le groupe doit maintenir à jour cette partie au fur et à mesure de l'avancement du projet et des choix effectués, en prévenant le coach.
+ Le schéma DB, ainsi que les autres schémas utiles, seront placés ici (datés!) Et mis à jour au fur et à mesure des changements.

1. Backend

1.1 Organisation du code

/
├── DockerMysql/             # Configuration et scripts Docker + MySQL
└── backend/                 # Code serveur (Node.js, Express, etc.)
    ├── src/                 # Contrôleurs, routes, services
    ├── middlewares/         # Middleware d'authentification, logging …
    └── server.js            # Point d’entrée de l’application

1.2 Diagramme de classes UML

image

2. Schémas, diagrammes et infos

2.1 Diagrammes liés à la base de données

image

1. Tables Principales et Relations

tblProduits

Cette table centralise les informations sur les produits (nom, prix, unité, catégorie et taxe).

  • Champs :

    • id (PK) : Identifiant unique du produit
    • nom (char(255)) : Nom du produit
    • idUnite (FK) : Unité de mesure du produit (ex : kg, litre)
    • prix (float) : Prix du produit
    • idTaxe (FK) : Taxe appliquée au produit
    • idCategorie (FK) : Catégorie du produit

  • Relations :

    • idUnite (FK) → tblUnite
    • idTaxe (FK) → tblTaxe
    • idCategorie (FK) → tblCategorie

tblStock

Permet de gérer la disponibilité des produits en stock.

  • Champs :

    • idProduit (PK, FK) : Référence au produit
    • quantite (int) : Quantité en stock
    • stock (boolean) : Indique si le produit est en stock
    • dateLivraison (Date) : Date de réapprovisionnement

  • Relation :

    • idProduit (FK) → tblProduits (1,1)

tblClients

Stocke les informations des clients.

  • Champs :
    • id (PK) : Identifiant du client
    • nom (char(255)) : Nom du client
    • prenom (char(255)) : Prénom du client
    • adresseMail (char(255)) : Adresse email (peut être NULL)
    • tel (char(255)) : Téléphone (peut être NULL)

2. Gestion des Transactions

tblCommandes

Gère les commandes passées par les clients.

  • Champs :

    • idProduit (PK, FK) : Produit commandé
    • idClient (PK, FK) : Client ayant passé commande
    • quantite (int) : Quantité commandée
    • dateCommande (Date) : Date de la commande

  • Relations :

    • idProduit (FK) → tblProduits
    • idClient (FK) → tblClients

tblFavoris

Permet aux clients de sauvegarder leurs produits préférés.

  • Champs :

    • idProduit (PK, FK) : Produit favori
    • idClient (PK, FK) : Client ayant ajouté le produit

  • Relations :

    • idProduit (FK) → tblProduits
    • idClient (FK) → tblClients

3. Structuration et Optimisation

  • Normalisation :

    • Éviter la redondance des informations grâce aux clés étrangères (tblUnite, tblTaxe, tblCategorie).
    • Relations bien définies pour assurer l'intégrité des données.

  • Flexibilité et évolutivité :

    • Possibilité d'ajouter de nouvelles unités (tblUnite), taxes (tblTaxe) ou catégories (tblCategorie) sans impacter tblProduits.
    • tblStock permet une gestion fine des disponibilités en magasin.

Conclusion

Cette conception assure une gestion efficace des produits, clients et commandes tout en permettant l’évolution future du site e-commerce.

2.2 Résumé du fonctionnement général de l'application (idéalement avec un schéma)

yg2rq1sa

Notre application fonctionne de manière relativement simple. Lorsqu’un client envoie une requête au serveur (notre VPS) sur le port 443 (HTTPS), celle-ci est d’abord reçue par le reverse proxy. Ce dernier analyse la requête et la redirige soit vers le frontend, soit vers le backend, en fonction de son type ou de l’URL. Une fois la réponse générée par le service concerné (frontend ou backend), celle-ci est renvoyée au reverse proxy, qui la transmet ensuite au client.

2.3 Autres diagrammes de fonctionnement et d'architecture (ou autres informations utiles)

3. Frontend

3.1 Organisation du code

/
└── frontend/               # Application cliente (React, Vue, ou autre)
    ├── public/             # Fichiers statiques (index.html, images)
    ├── src/
    │   ├── assets/         # Styles, images
    │   ├── components/     # Composants UI réutilisables
    │   ├── views/          # Pages ou vues (Home, Login, Dashboard…)
    │   ├── services/       # Appels API vers le backend
    │   └── App.js          # Point d’entrée React/Vue
    └── package.json        # Dépendances et scripts frontend

3.2 Apparence

image