Données

Dans un premier temps, nous allons stocker les données dans des fichiers JSON pour simuler une base de données. Nous remplaçerons ces fichiers par une base de données MongoDB par la suite.

Fichiers JSON

Créez un dossier data à la racine du projet, et ajoutez-y les fichiers suivants :

1. scores.json qui contient un tableau de scores

data/scores.json

[
  { "id": 1, "joueur": "Aude", "score": 100 },
  { "id": 2, "joueur": "Bob", "score": 200 }
]

2. joueurs.json qui contient un tableau de joueurs

data/joueurs.json

[
  { "id": 1, "name": "Aude", "username": "admin", "password": "admin", "meilleurScore": 1000 },
  { "id": 2, "name": "Bob", "username": "bob", "password": "bob", "meilleurScore": 100 },
  { "id": 3, "name": "Charlie", "username": "charlie", "password": "charlie", "meilleurScore": 500 },
  { "id": 4, "name": "David", "username": "david", "password": "david", "meilleurScore": 300 },
  { "id": 5, "name": "Eve", "username": "eve", "password": "eve", "meilleurScore": 200 }
]

Modification de l’application serveur

On souhaite maintenant afficher le tableau des scores dans le client.

Pour cela :

1. Créez un fichier scores.js dans le dossier routes.
2. Ajoutez une route de type get pour l’url /scores qui renvoie le fichier scores.json au format JSON.
3. Déployez l’application sur Vercel et testez la route /scores avec Postman ou un navigateur.

Tip

Pour que le fichier scores.json puissent être envoyé au client, il faut utiliser la méthode sendFile de l’objet res de la route /scores. Pour que cela fonctionne sur Vercel, il faut construire le chemin du fichier avec path.join, __dirname, le nom du dossier contenant les fichiers JSON ainsi que le nom du fichier JSON :

res.sendFile(path.join(__dirname, '../data', 'scores.json'));

Modification de l’application client

On souhaite modifier le client pour qu’il récupère les scores et les affiche sous forme de tableau HTML.

index.html

1. Ajoutez une div qui sera utilisé comme popup pour afficher les scores :

<div id="popup-overlay">
  <div id="popup-container">
    <div id="popup"></div>
    <div id="popup-close">X</div>
  </div>
</div>

2. Ainsi qu’un bouton pour afficher les scores :

<button id="scores">Scores</button>

styles.css

Ajoutez du CSS pour styliser la popup :

#popup-overlay {
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100vw;
  height: 100vh;
  display: none;
}

#popup-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#popup {
  background: rgba(0, 123, 255, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  height: 80vh;
  width: 600px;
}

#popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: white;
}

main.mjs

1. Effectuez des modifications pour afficher/masquer la popup sur le clic du bouton Scores.
2. Lorsque la popup est affichée, récupérez les scores avec fetch et affichez-les dans la popup. Voici un exemple de code :

// Fetch API to get the /scores route
fetch("/scores")
  .then((response) => response.json())
  .then((data) => {
    popup.innerHTML = "<h2>Scores</h2>";
    let ul = document.createElement("ul");
    data.forEach((score) => {
      const li = document.createElement("li");
      li.textContent = `${score.joueur}: ${score.score}`;
      ul.appendChild(li);
    });
    popup.appendChild(ul);
  })
  .catch((error) => console.error(error));

Modifiez le client pour qu’il récupère les scores avec l’API Fetch et les affiche sous forme de tableau HTML avec les noms des joueurs et leurs scores.

Voici un exemple du résultat attendu : https://express-007.vercel.app/

Conclusion

Pour le moment, nous stockons les données dans des fichiers JSON pour simuler une base de données.

Mais il faut noter que la partie client de notre application utilise maintenant l’API Fetch pour récupérer les scores depuis une API REST, la partie serveur de notre application !

Dans la prochaine partie, nous allons mettre en place une authentification simple pour identifier les joueurs et récupérer leur meilleur score.