Exercice Final : Réalisation d'un Marquoir Connecté

Pour cet exercice, nous allons créer un marquoir connecté (ou tableau de score) avec un système embarqué et une interface web. Ce projet permettra aux participants de manipuler à la fois le matériel et le logiciel pour une intégration complète. Le marquoir se contrôlera avec quatre boutons connectés à un microcontrôleur (NodeMCU ou ESP8266), et le score sera mis à jour en temps réel sur une interface web.

---

Objectifs de l'Exercice

1. Matériel : Utiliser quatre boutons pour contrôler le score de deux équipes (deux boutons pour chaque équipe : un pour incrémenter, l’autre pour décrémenter).
2. Microcontrôleur : Programmer le NodeMCU pour envoyer les scores au serveur lorsqu’un bouton est pressé.
3. Serveur Web : Recevoir les données depuis le microcontrôleur et les stocker dans une base de données.
4. Interface Web : Afficher le score de chaque équipe en temps réel.

---

Étape 1 : Matériel Nécessaire et Connexions

• Matériel :
  • NodeMCU (ESP8266/ESP32)
  • 4 boutons-poussoirs
  • Fils de connexion
  • Résistances de 10kΩ (pour les boutons)
  • Breadboard
• Schéma de Connexion :
  • Connecter les boutons comme suit :
    • Boutons d’Équipe A :
      • Un bouton pour incrémenter (GPIO D1)
      • Un bouton pour décrémenter (GPIO D2)
    • Boutons d’Équipe B :
      • Un bouton pour incrémenter (GPIO D3)
      • Un bouton pour décrémenter (GPIO D4)
  • Utiliser des résistances de pull-down de 10kΩ pour stabiliser le signal des boutons.

---

Étape 2 : Code Microcontrôleur (ESP8266) - Détection et Envoi des Scores

Le NodeMCU détectera les appuis sur les boutons et enverra les mises à jour de score au serveur via des requêtes HTTP.

Code ESP8266 (Arduino) :

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
const char* ssid = "Votre_SSID";
const char* password = "Votre_MotDePasse";
const String serverUrl = "http://votre_serveur/api_update_score.php";

// GPIO Pins
const int incrementTeamA = D1;
const int decrementTeamA = D2;
const int incrementTeamB = D3;
const int decrementTeamB = D4;

int scoreTeamA = 0;
int scoreTeamB = 0;

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);

  // Configure les broches des boutons
  pinMode(incrementTeamA, INPUT);
  pinMode(decrementTeamA, INPUT);
  pinMode(incrementTeamB, INPUT);
  pinMode(decrementTeamB, INPUT);

  // Attendre la connexion Wi-Fi
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connexion Wi-Fi...");
  }
  Serial.println("Connecté au Wi-Fi !");
}

void loop() {
  if (digitalRead(incrementTeamA) == HIGH) {
    scoreTeamA++;
    envoyerScore("A", scoreTeamA);
    delay(200);  // Anti-rebond
  }
  if (digitalRead(decrementTeamA) == HIGH && scoreTeamA > 0) {
    scoreTeamA--;
    envoyerScore("A", scoreTeamA);
    delay(200);
  }
  if (digitalRead(incrementTeamB) == HIGH) {
    scoreTeamB++;
    envoyerScore("B", scoreTeamB);
    delay(200);
  }
  if (digitalRead(decrementTeamB) == HIGH && scoreTeamB > 0) {
    scoreTeamB--;
    envoyerScore("B", scoreTeamB);
    delay(200);
  }
}

void envoyerScore(String equipe, int score) {
  if (WiFi.status() == WL_CONNECTED) {
    HTTPClient http;
    String url = serverUrl + "?equipe=" + equipe + "&score=" + String(score);
    http.begin(url);
    int httpCode = http.GET();
    http.end();

    if (httpCode == 200) {
      Serial.println("Score mis à jour sur le serveur");
    } else {
      Serial.println("Échec de la mise à jour du score");
    }
  }
}

---

Étape 3 : API PHP pour Mettre à Jour le Score (api_update_score.php)

Le fichier PHP api_update_score.php recevra les scores depuis le microcontrôleur et les enregistrera dans une base de données MySQL.

Création de la Table MySQL :

CREATE TABLE scores (
    id INT AUTO_INCREMENT PRIMARY KEY,
    equipe VARCHAR(10) NOT NULL,
    score INT NOT NULL,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

API PHP (api_update_score.php) :

<?php
header("Content-Type: application/json");

$servername = "localhost";
$username = "votre_username";
$password = "votre_password";
$dbname = "votre_nom_de_base";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die(json_encode(["status" => "error", "message" => "Erreur de connexion à la base de données"]));
}

if (isset($_GET['equipe']) && isset($_GET['score'])) {
    $equipe = $_GET['equipe'];
    $score = (int)$_GET['score'];

    $stmt = $conn->prepare("INSERT INTO scores (equipe, score) VALUES (?, ?) ON DUPLICATE KEY UPDATE score=?");
    $stmt->bind_param("sii", $equipe, $score, $score);
    $stmt->execute();
    $stmt->close();

    echo json_encode(["status" => "success", "message" => "Score mis à jour"]);
} else {
    echo json_encode(["status" => "error", "message" => "Données invalides"]);
}

$conn->close();
?>

---

Étape 4 : Interface Web pour Afficher le Score

Crée une page web simple qui interroge l’API pour afficher le score de chaque équipe.

HTML / CSS / JavaScript pour le Marquoir (scoreboard.html) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Marquoir Connecté</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        h1 { font-size: 2.5em; }
        .team { font-size: 2em; }
        .score { font-size: 5em; color: #333; }
    </style>
</head>
<body>
    <h1>Marquoir Connecté</h1>
    <div class="team" id="teamA">Équipe A : <span class="score" id="scoreA">0</span></div>
    <div class="team" id="teamB">Équipe B : <span class="score" id="scoreB">0</span></div>

    <script>
        async function chargerScore() {
            try {
                const response = await fetch('api_get_score.php');
                const scores = await response.json();

                document.getElementById('scoreA').innerText = scores.equipeA || 0;
                document.getElementById('scoreB').innerText = scores.equipeB || 0;
            } catch (error) {
                console.error("Erreur de chargement des scores:", error);
            }
        }

        setInterval(chargerScore, 1000);
        chargerScore();
    </script>
</body>
</html>

---

Étape 5 : API PHP pour Récupérer le Score (api_get_score.php)

Cette API renvoie les scores actuels des équipes.

<?php
header("Content-Type: application/json");

$servername = "localhost";
$username = "votre_username";
$password = "votre_password";
$dbname = "votre_nom_de_base";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die(json_encode(["status" => "error", "message" => "Erreur de connexion à la base de données"]));
}

$scores = ["equipeA" => 0, "equipeB" => 0];
$sql = "SELECT equipe, score FROM scores";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $scores["equipe" . $row["equipe"]] = $row["score"];
    }
}

echo json_encode($scores);
$conn->close();
?>

---

Résultats Attendus

• Les boutons permettent de contrôler les scores des deux équipes en temps réel.
• L’interface web affiche le score actuel des deux équipes, mis à jour toutes les secondes.

Améliorations Possibles

1. Affichage mobile-friendly pour une meilleure accessibilité.
2. Notifications sonores ou visuelles pour chaque changement de score.