08. Architecture Schémas - Zwarmex/Projet-integration-2024-2025 GitHub Wiki

Expliquer comment votre projet est construit (ajouter des points si utile).

1.Quels sont vos schémas de fonctionnement, vos schémas réseaux, électronique, DB, UML, etc...

Schéma électronique (à mettre à jour)

aaa

2.Expliquer comment votre application est structurée

Fontionnement général de l'application

node js

  1. Interface utilisateur (Frontend) :

    • Les utilisateurs interagissent avec une interface web construite avec React.
    • Le frontend utilise un routeur pour naviguer entre les pages, des composants pour afficher les informations, et des services pour communiquer avec le backend.

  2. Backend (Server) :

    • Basé sur Node.js et Express, le backend gère les requêtes des utilisateurs.
    • Les controllers et routes implémentent la logique métier et communiquent avec la base de données.
    • Les données des distributeurs sont stockées dans une base MongoDB.

  3. Communication MQTT :

    • Un broker MQTT (HiveMQ) est utilisé pour la communication entre le backend et les distributeurs connectés (Raspberry Pi).
    • Les topics MQTT permettent de transmettre des données spécifiques à chaque distributeur (comme les niveaux d'eau ou les commandes).

  4. Distributeurs connectés :

    • Chaque distributeur, équipé d’un Raspberry Pi et de capteurs, communique avec le broker MQTT.
    • Les distributeurs envoient des données (niveaux d'eau, nourriture, événements) en temps réel ou reçoivent des commandes depuis l’application.

Arborescence/Organisation et utilité des fichiers du projet

  • 📁 back
    • 📁 controllers
      • ⚡ settingsController.py
    • 📁 db
      • ⚡ connection.js
    • 📁 models
      • ⚡ distributeur.js
      • ⚡ utilisateur.js
    • 📁 mqtt
      • ⚡ distributionMqttHandler.js
      • ⚡ friandiseMqttHandler.js
      • ⚡ niveauMqttHandler.js
    • 📁 node_modules
    • 📁 routes
      • 📁 historique
        • ⚡ eau.js
        • ⚡ nourriture.js
      • ⚡ record.js
    • 🔒 .env
    • { } package-lock.json
    • { } package.json
    • ⚡ server.js
  • 📁 front
    • 📁 node_modules
    • 📁 public
      • 🌐 index.html
      • { } manifest.json
      • 📄 robots.txt
    • 📁 src
      • 📁 Assets/Images
      • 📁 Components
        • ⚡ index.ts
        • ⚛️ NotificationItems.tsx
        • ⚛️ ProgressBar.tsx
      • 📁 constants
      • 📁 containers
        • ⚛️ ActionContainer.tsx
        • ⚛️ FoodHistory.tsx
        • ⚛️ Header.tsx
        • ⚡ index.ts
        • ⚛️ Level.tsx
        • ⚛️ LoginForm.tsx
        • ⚛️ NotificatioContainer.tsx
        • ⚛️ WaterHistory.tsx
      • 📁 Context
        • ⚡ UrlContext.ts
      • 📁 Data
        • { } food-data.json
        • { } food-data.json
      • 📁 Pages
        • ⚛️ HistoriquePage.tsx
        • ⚛️ HomePage.tsx
        • ⚡ index.ts
        • ⚛️ LoginPage.tsx
        • ⚛️ SettingsPage.tsx
      • ⚛️ App.tsx
      • 🎨 index.css
      • ⚛️ index.tsx
      • ⚛️ react-app-env.d.tsx
    • { } package-lock.json
    • { } package.json
    • 📄 README.md
    • 🌀 tailwind.config.js
    • { } tsconfig.json
  • 🛠️ .gitignore
  • 📄 `LICENSE
  • 📄 README.md

Explication

Backend (📁 back)

Gère la logique métier, la communication avec la base de données, les API et les événements MQTT.

📁 controllers

  • Centralise la logique métier associée à chaque fonctionnalité ou ressource.
  • ⚡ settingsController.js : Traite les requêtes pour manipuler les paramètres utilisateur et distributeur dans la base de données.

📁 db

  • Contient la configuration pour connecter l'application à MongoDB.
  • ⚡ connection.js : Gère la connexion à la base de données MongoDB avec les identifiants contenus dans le fichier .env.

📁 models

  • Définit les schémas Mongoose pour les collections MongoDB.
    • ⚡ distributeur.js : Schéma de la collection distributeurs (historique des niveaux d’eau/croquettes, paramètres utilisateur, etc.).
    • ⚡ utilisateur.js : Schéma de la collection utilisateurs (authentification, paramètres personnels, etc.).

📁 mqtt

  • Gère les événements reçus et envoyés via le protocole MQTT.
    • ⚡ distributionMqttHandler.js : Traite les commandes liées aux distributions (automatiques ou manuelles) de nourriture et d’eau.
    • ⚡ friandiseMqttHandler.js : Gère les événements relatifs aux friandises (ex : limite atteinte).
    • ⚡ niveauMqttHandler.js : Met à jour les niveaux des réservoirs (eau/croquettes) dans MongoDB.

📁 routes

  • Définit les points d'entrée pour les requêtes HTTP.
    • 📁 historique
      • ⚡ eau.js : Route pour récupérer l’historique des niveaux d’eau.
      • ⚡ nourriture.js : Route pour récupérer l’historique des niveaux de croquettes.
    • ⚡ record.js : Routes génériques pour manipuler les enregistrements.

🔒 .env

  • Contient les variables sensibles comme les identifiants pour MongoDB ou les clés d'API.

{ } package-lock.json / { } package.json

  • Gère les dépendances nécessaires au backend (express, mongoose, mqtt, etc.).

⚡ server.js

  • Point d'entrée du backend. Configure les routes, middlewares, serveur HTTP et intégration avec MQTT.

Frontend (📁 front)

Gère l'interface utilisateur et communique avec le backend via des API ou WebSocket.

📁 public

  • Contient des fichiers statiques accessibles par le navigateur.
    • 🌐 index.html : Point d'entrée pour l'application React.
    • { } manifest.json : Métadonnées pour les Progressive Web Apps (PWA).
    • 📄 robots.txt : Fichier utilisé pour le SEO (optimisation pour les moteurs de recherche).

📁 src

  • Contient l’intégralité du code React.
📁 Assets/Images
  • Ressources statiques comme des images ou icônes (ex : settings.svg).
📁 Components
  • Composants réutilisables dans plusieurs parties de l'application.
    • ⚡ index.ts : Point d'entrée pour importer/exporter les composants.
    • ⚛️ NotificationItems.tsx : Affiche des notifications.
    • ⚛️ ProgressBar.tsx : Barre de progression pour les niveaux d’eau/croquettes.
📁 containers
  • Contient des conteneurs qui combinent plusieurs composants ou gèrent des fonctionnalités spécifiques.
    • ⚛️ ActionContainer.tsx : Interface pour déclencher des actions comme distribuer de l'eau ou des croquettes.
    • ⚛️ Header.tsx : Barre de navigation commune à toutes les pages.
    • ⚛️ LoginForm.tsx : Formulaire de connexion utilisateur.
📁 Context
  • Définit des états globaux accessibles dans toute l'application.
    • ⚡ UrlContext.ts : Définit les URLs pour le backend ou les API.
📁 Data
  • Contient des données statiques ou des fichiers JSON utilisés dans l'application.
    • { } food-data.json : Exemple de fichier contenant des données de nourriture.
📁 Pages
  • Contient les pages principales de l’application.
    • ⚛️ HistoriquePage.tsx : Affiche l’historique des niveaux ou distributions.
    • ⚛️ HomePage.tsx : Montre les niveaux actuels d’eau et de croquettes en temps réel.
    • ⚛️ LoginPage.tsx : Page pour l’authentification utilisateur.
    • ⚛️ SettingsPage.tsx : Interface pour modifier les paramètres utilisateur.
⚛️ App.tsx
  • Point d'entrée de l'application React. Configure les routes et gère le routage entre les pages.
🎨 index.css
  • Contient les styles globaux de l'application.
⚛️ index.tsx
  • Monte l'application React dans le DOM.
⚛️ react-app-env.d.ts
  • Définit les types spécifiques pour l'environnement React en TypeScript.

Fichiers globaux

  • 🛠️ .gitignore : Liste des fichiers/dossiers à exclure du contrôle de version (ex : .env, node_modules).
  • 📄 LICENSE : Indique les droits d’utilisation du code.
  • 📄 README.md : Documentation générale du projet.

3.Expliquer comment votre DB est concue

Base de données :

MongoDB Atlas

L'application utilise MongoDB Atlas pour stocker les données. MongoDB Atlas est une solution cloud pour MongoDB qui offre des clusters faciles à configurer.

Un cluster cloud est configuré avec un utilisateur disposant d’un accès limité.

L’URI de connexion (mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) est ajoutée comme variable d’environnement.

Le backend est un serveur RESTful qui expose des endpoints pour communiquer avec les composants IoT via MQTT et avec le frontend via Socket.IO.

Les modèles des collections pour la base de données :

  • Collection utilisateurs :
import mongoose from "mongoose";

const SchemaUtilisateur = new mongoose.Schema(
  {
    nom: { type: String, required: true },
    email: { type: String, required: true, unique: true },
    motDePasse: { type: String, required: true },
    preferences: {
      distributionAutomatiqueEau: { type: Boolean, default: true },
      seuilNourriture: { type: Number, default: 20 },
      seuilEau: { type: Number, default: 20 },
      distributionAutomatiqueCroquettes: { type: Boolean, default: true },
      taillePortionEau: {
        type: String,
        enum: ["petite", "moyenne", "grande"],
        default: "petite",
      },
      taillePortionCroquettes: {
        type: String,
        enum: ["petite", "moyenne", "grande"],
        default: "petite",
      },
      limiteFriandises: { type: Number, default: 5 },
    },
    creeLe: { type: Date, default: Date.now },
    derniereConnexion: { type: Date },
  },
  { timestamps: true }
);

const Utilisateur = mongoose.model("utilisateurs", SchemaUtilisateur);

export default Utilisateur;
  • Collection distributeurs
import mongoose from "mongoose";


const NiveauHistoriqueSchema = new mongoose.Schema({
  eau: { type: Number, required: true },
  croquettes: { type: Number, required: true },
  horodatage: { type: Date, default: Date.now },
});

const DistributionHistoriqueSchema = new mongoose.Schema({
  type: { type: String, enum: ["croquettes", "eau"], required: true },
  quantite: {
    type: String,
    enum: ["petite", "moyenne", "grande"],
    required: true,
  },
  horodatage: { type: Date, default: Date.now },
  declencheur: {
    type: String,
    enum: ["automatique", "manuel"],
    required: true,
  },
});

const ComportementHistoriqueSchema = new mongoose.Schema({
  event: { type: String, required: true },
  compteur: { type: Number, required: true },
  limite: { type: Number, required: true },
  horodatage: { type: Date, default: Date.now },
});

const DistributeurSchema = new mongoose.Schema(
  {
    _id: { type: String, required: true },
    proprietaireId: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "User",
      required: true,
    },
    niveauxReservoirs: {
      niveauCroquettes: { type: Number, required: true },
      niveauEau: { type: Number, required: true },
      misAJourLe: { type: Date, default: Date.now },
    },
    historiqueNiveaux: [NiveauHistoriqueSchema],
    historiqueDistributions: [DistributionHistoriqueSchema],
    historiqueComportements: [ComportementHistoriqueSchema],
  },
  { timestamps: true }
);

const Distributeur = mongoose.model("distributeurs", DistributeurSchema);

export default Distributeur; // Export ES6

4.Présenter votre API (s'il y en a), avec lien vers la documentation

5.Expliquer tout fonctionnement intéressant au sein de votre projet …

MQTT broker

Topics :

  • smartpaws/commandes ( application Web => pi pico W ) : sert à donner des ordres au microcontrôleur via des commandes

    • commandes disponibles :
      • mesurer_stock : déclenche une mesure des niveaux des réservoirs afin de les afficher dans l'application web
      • distribuer_croquettes : déclenche le moteur responsable de la distribution de croquettes
      • distribuer_eau : déclenche le moteur responsable de la distribution d'eau
      • update_params : met à jour la variable globale config avec les préférences des paramètres utilisateur
    • format des messages :
      • mesurer_stock : plaintext =>"mesurer_stock"
      • distribuer_croquettes : plaintext => "distribuer_croquettes"
      • distribuer_eau : plaintext => "distribuer_eau"
      • update_params : plaintext => "update_params{"quantite_croquettes": 50, "quantite_eau": 200}"

  • smartpaws/niveau (pi pico W => application Web) : renvoie le niveau d'eau et de croquettes restant dans les réservoirs du distributeur en pourcentage

    • format des messages : JSON =>{"croquettes": 43, "eau": 80}

  • smartpaws/historique (pi pico W => application Web) : garde une trace des différentes actions du distributeur afin de garder une trace pour l'utilisateur

    • de quoi garde-t-on une trace :
      • déclenchement d'un moteur
      • mesure des niveaux : pas besoin d'envoyer un message dédié ici, on récupère l'info depuis le topic smartpaws/niveau
      • interaction avec le boutton
    • format des messages :

      • déclenchement d'un moteur :JSON => message = { "type": [eau,croquette], "quantite": quantiteDistribuée, "declencheur" : [manuel, automatique] }

      • interaction avec le bouton :

6.Quels sont vos configurations ? (Fichiers de config à mettre dans le git, attention aux données sensibles.)

  • Fichier .env pour l'application web
ATLAS_URI=(ATLAS_URI)
PORT=(PORT)
MQTT_HOST = (MQTT_HOST)
MQTT_PORT = (MQTT_PORT)
MQTT_USERNAME = (MQTT_USERNAME)
MQTT_PASSWORD = (MQTT_PASSWORD)
  • Fichier config.json et wifi_config.json pour le microcontrôleur du distributeur config.json
{
  "mqtt_host": (MQTT_HOST),
  "mqtt_user": (MQTT_USERNAME),
  "mqtt_password": (MQTT_PASSWORD)
}

wifi_config.json

{
  "wifi_ssid": (SSID),
  "wifi_password": (WIFI_PASSWORD)
}

7.Tout document utile pour

bien comprendre le projet.