Express 01.2 - 🚀 Lecture depuis la base de données

⚠️ Avant de commencer cette quête, nous te conseillons de terminer celles-ci :

Dans les quêtes précédentes, tu as vu comment configurer et créer un serveur avec Express et comment créer des routes de base. Lors du dernier challenge, les données que tu utilisais provenaient d'un tableau JavaScript et non d'une base de données.

Dans cette quête, il est temps d'apprendre à connecter ton serveur Express à ta base de données SQL.

🤓 Dans cette quête, tu vas apprendre à :

✅ Connecter Express à une base de données SQL ✅ Protéger des données sensibles avec dotenv ✅ Tester une route avec Postman

⚙️ Mise en place de l'application Express

Commence par forker ce dépôt sur ton compte GitHub. Clone ensuite ton fork sur ta machine. Jette un œil au code : c'est la même application que celle que tu as créée dans la quête précédente, sauf que les gestionnaires de films ont été déplacés dans un fichier séparé src/controllers/movieControllers.js. De cette manière, notre src/app.js se charge uniquement de déclarer les routes :

const express = require("express");

const app = express();

const movieControllers = require("./controllers/movieControllers");

app.get("/api/movies", movieControllers.getMovies);
app.get("/api/movies/:id", movieControllers.getMovieById);

module.exports = app;

Nous allons ajouter plus de routes dans notre application : il est important d'organiser le code avant qu'il ne devienne trop gros.

Comme tu t'en souviens, nous utilisons le port 5000 dans notre application comme port par défaut sur lequel le serveur écoutera. Mais s'il n'est pas disponible, tu peux le changer pour autre chose ! Cela peut être utile pour éviter les conflits de port avec une autre application en cours d'exécution sur ta machine qui utilise déjà le port 5000. Note que c'est une bonne pratique de gérer cela via un fichier d'environnement : un fichier .env contenant ta configuration spécifique. Ce fichier .env peut alors être chargé en utilisant le module dotenv.

Commence par installer dotenv dans ton projet :

npm install dotenv

Tu vas maintenant créer ton fichier .env. Tu ne devras pas le partager sur GitHub, car il contiendra bientôt des informations sensibles (mot de passe de la base de données par exemple). Mais si tu ne le partages pas, comment les "cloneurs" de ton projet sauront-ils ce qui doit être déclaré dans le fichier ? Une autre bonne pratique consiste à partager un exemple de fichier au lieu du véritable .env. Le fichier d'exemple permettra aux cloneurs de savoir quelles variables doivent être déclarées pour ton application. C'est pourquoi tu peux voir un fichier .env.sample à la racine du projet. Copie-le :

cp .env.sample .env

Et ajoute ce .env à ton .gitignore. Regarde maintenant ton fichier index.js. Pour utiliser le module dotenv, tu dois ajouter cette ligne en haut de ton fichier :

require("dotenv").config();

Cela chargera ton fichier .env et remplira process.env avec toutes tes variables. Maintenant, tu peux consommer la variable APP_PORT comme suit:

const port = process.env.APP_PORT;

Maintenant que ton environnement est configuré, tu peux exécuter npm run dev, aller sur localhost:5000 et vérifier que ton serveur est en cours d'exécution.

🗄️ Créer la base de données

Nous avons déjà préparé pour toi une petite base de données contenant des films et des utilisateurs. Tu peux prendre le temps de regarder le fichier express_quests.sql à la racine du projet.

Ouvre un terminal dans le répertoire où se trouve le fichier, ouvre un client MySQL dans ton terminal (avec la commande mysql). Crée une nouvelle base de données appelée express_quests avec CREATE DATABASE puis sélectionne cette base de données avec USE :

CREATE DATABASE express_quests;
USE express_quests;

Et source le fichier pour créer les tables:

source express_quests.sql

Exécute maintenant cette requête :

SELECT * FROM movies;

Tu devrais voir ceci dans ton terminal :

Maintenant, tu peux quitter mysql en utilisant exit.

📦 Installer le module MySQL 2

Pour communiquer avec ta base de données, tu dois installer un module appelé mysql2 :

npm install mysql2

Tu peux trouver la documentation de ce package ici :

⚙️ Configurer l'accès à la base de données

Pour configurer le package afin d'accéder à la base de données, tu dois ajouter des variables à ton fichier .env, avec toutes les informations nécessaires pour te connecter à la base de données :

DB_HOST=localhost
DB_PORT=3306
DB_USER=REPLACE_WITH_YOUR_USERNAME
DB_PASSWORD=REPLACE_WITH_YOUR_PASSWORD
DB_NAME=REPLACE_BY_DB_NAME

Maintenant, jouons avec le module mysql2. Crée un nouveau fichier nommé database.js à côté de ton index.js.

Tout en haut, nous devons importer le package dotenv et exécuter config(). Cela définira pour nous toutes les variables d'environnement que nous avons décrites dans le fichier .env.

require("dotenv").config();

Ensuite, importe le package mysql2 :

const mysql = require("mysql2/promise");

Enfin, utilise mysql.createPool pour préparer un pool de connexion à l'aide des variables d'environnement que tu viens de créer :

require("dotenv").config();

const mysql = require("mysql2/promise");

const database = mysql.createPool({
  host: process.env.DB_HOST, // address of the server
  port: process.env.DB_PORT, // port of the DB server (mysql), not to be confused with the APP_PORT !
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
});

Tu peux essayer d'obtenir une première connexion depuis le pool pour vérifier que tout va bien :

database
  .getConnection()
  .then(() => {
    console.log("Can reach database");
  })
  .catch((err) => {
    console.error(err);
  });

Et lancez la commande suivante :

npx nodemon database.js

💬 Écrire une requête

En utilisant notre objet database, nous pouvons envoyer des requêtes à notre serveur MySQL en utilisant la méthode query(). La méthode a besoin d'une chaîne de caractères comme premier paramètre : le code SQL de notre requête. Puisque nous utilisons la version avec des promesses, nous devrons chaîner l'appel à query() avec un .then() (et un .catch() pour intercepter les erreurs).

Dans database.js essaye les lignes suivantes :

database
  .query("select * from movies")
  .then((result) => {
    console.log(result);
  })
  .catch((err) => {
    console.error(err);
  });

👉🏻 Il n'est pas obligatoire d'utiliser la méthode getConnection() : faire une requête créera aussi automatiquement une connexion. Cependant, il est recommandé de l'utiliser pour déboguer ton serveur en cas d'échec de la connexion.

Lors du rechargement du script, tu devrais voir beaucoup de choses dans ton terminal. En prêtant attention, tu verras que result est un tableau contenant les lignes sélectionnées comme premier élément. Le reste du tableau contient des informations supplémentaires concernant la requête. Nous allons nous concentrer sur les lignes sélectionnées et les extraire du tableau result :

database
  .query("select * from movies")
  .then((result) => {
    const movies = result[0];

    console.log(movies);
  })
  .catch((err) => {
    console.error(err);
  });

Ou, en utilisant la déstructuration de tableau :

database
  .query("select * from movies")
  .then((result) => {
    const [movies] = result;

    console.log(movies);
  })
  .catch((err) => {
    console.error(err);
  });

Ou directement en destructurant le paramètre :

database
  .query("select * from movies")
  .then(([movies]) => {
    console.log(movies);
  })
  .catch((err) => {
    console.error(err);
  });

Si tout s'est bien passé, tu devrais voir les films s'afficher dans ta console.

Maintenant, déplaçons ce morceau de code dans la fonction getMovies que nous avons défini dans movieControllers.js (n'oublie pas d'ajouter module.exports = database; à la fin de database.js ) :

const movies = [/* ... */];

const database = require("../../database");

const getMovies = (req, res) => {
  database
    .query("select * from movies")
    .then(([movies]) => {
      res.json(movies); // use res.json instead of console.log
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

Pour compléter le console.error lorsque des erreurs sont trouvées, nous envoyons un statut 500 au client. Sinon, nous pouvons renvoyer un statut 200 et les données.

Maintenant, arrête le script database (Ctrl+C) et exécute npm run dev. Si tu vas sur localhost:5000/api/movies, tu devrais voir la liste des films de ta base de données.

💬 Écrire une requête avec un paramètre

Maintenant, ta fonction getMovieById devrait également être mise à jour pour trouver un film dans la base de données. Tu voudras peut-être faire quelque chose comme ceci :

const getMovieById = (req, res) => {
  const id = parseInt(req.params.id);

  database
    .query(`select * from movies where id = ${id}`)
    .then(...)
    .catch(...);
}

Cette façon d'injecter l'id dans une requête SQL n'est pas sûre : tu devrais utiliser des requêtes préparées à la place. Cela signifie que tu devras remplacer chaque variable dans ta chaîne SQL par un ?. Ensuite, les valeurs à injecter seront passées dans un tableau en tant que second paramètre de query(). Quelque chose comme ca :

const getMovieById = (req, res) => {
  const id = parseInt(req.params.id);

  database
    .query("select * from movies where id = ?", [id])
    .then(...)
    .catch(...);
};

Essaye de compléter le then et le catch toi-même, sachant que tu dois renvoyer un seul objet film si le film recherché existe (pas de tableau). Sinon, tu dois renvoyer un statut 404 si le film recherché n'existe pas. Renvoie un statut 500 si tu as détecté une erreur.

Afficher la solution|||javascript|||Tu as des doutes sur comment faire ? |||0|||Masquer
const getMovieById = (req, res) => {
  const id = parseInt(req.params.id);

  database
    .query("select * from movies where id = ?", [id])
    .then(([movies]) => {
      if (movies[0] != null) {
        res.json(movies[0]);
      } else {
        res.sendStatus(404);
      }
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

📬 Postman

Jusqu'à présent, tu utilisais ton navigateur Web pour vérifier les réponses du serveur. Dans les prochaines quêtes, nous allons également faire des requêtes POST pour ajouter des objets dans notre base de données.

Parce que tu n'as pas encore de frontend, il va être difficile de faire ces requêtes POST depuis ton navigateur. Pour gérer cela, tu peux installer un logiciel appelé Postman.

Postman est un excellent outil que tu peux utiliser pour tester tes routes.

Voici le lien pour le télécharger :

Une fois téléchargé et installé, ouvre le logiciel et crée une nouvelle requête HTTP (bouton "+" après l'onglet "Overview").

Dans la section "url", tapez l'url de ton serveur, localhost:5000/api/movies et assure toi que GET est sélectionné puis clique sur envoyer.

Tu devrais voir la réponse de ton serveur :

💪 Challenge

Création de routes utilisateur

Ton défi consiste à :

• Créer une route GET /api/users, cette route doit renvoyer un statut 200 et une liste d'utilisateurs de la base de données au format json
• Créez une route GET /api/users/:id qui renverra uniquement l'utilisateur de la base de données correspondant à l'identifiant défini dans l'url
  • S'il y a un utilisateur qui correspond aux paramètres, renvoie une réponse avec un statut 200 et l'utilisateur correspondant en tant qu'objet json
  • Sinon, retourne un statut 404

Publie une URL d'un dépôt GitHub avec ton application complète comme solution.

Des tests sont fournis pour ces 2 routes dans tests/users.test.js. Tu peux utiliser la commande npm run test pour vérifier ton code.

Gestion du cycle de vie des tests

Jest met à notre disposition un grand nombre de fonctionnalités. Celle qui va nous intéresser ici va nous permettre d'exécuter une action après l'exécution de tous nos tests : cette fonction s'appelle afterAll (tu peux voir dans la documentation qu'il en existe d'autres pour exécuter une action avant ou après chaque test par exemple).

Dans notre cas ce qui empêche notre script de test de terminer son exécution, c'est la connexion à la base de données, il va donc falloir la couper après l'exécution de tous les tests.

Pour ce faire, dans chaque fichier de test importe la connexion à la base de données et utilise afterAll pour la couper "manuellement" :

const request = require("supertest");
const app = require("../app");
const database = require("../database")

afterAll(() => database.end());

// ...

En ajoutant ces deux lignes à ton fichier de test ceux-ci devraient terminer leur exécution normalement !

🧐 Critères de validation

• [ ] Le serveur fonctionne
• [ ] Les tests passent avec npm run test
• [ ] La commande npm run test se termine bien

==$==

Ce que tu devrais avoir dans :

require("dotenv").config();

const app = require("./src/app");

const port = process.env.APP_PORT ?? 5000;

app
  .listen(port, () => {
    console.log(`Server is listening on ${port}`);
  })
  .on("error", (err) => {
    console.error("Error:", err.message);
  });

require("dotenv").config();

const mysql = require("mysql2/promise");

const database = mysql.createPool({
  host: process.env.DB_HOST, // address of the server
  port: process.env.DB_PORT, // port of the DB server (mysql), not to be confused with the APP_PORT !
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
});

database
  .getConnection()
  .then(() => {
    console.log("Can reach database");
  })
  .catch((err) => {
    console.error(err);
  });

module.exports = database;

const express = require("express");

const app = express();

const movieControllers = require("./controllers/movieControllers");

app.get("/api/movies", movieControllers.getMovies);
app.get("/api/movies/:id", movieControllers.getMovieById);

const userControllers = require("./controllers/userControllers");

app.get("/api/users", userControllers.getUsers);
app.get("/api/users/:id", userControllers.getUserById);

module.exports = app;

const database = require("../../database");

const getUsers = (req, res) => {
  database
    .query("select * from users")
    .then(([users]) => {
      res.json(users);
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

const getUserById = (req, res) => {
  const id = parseInt(req.params.id);

  database
    .query("select * from users where id = ?", [id])
    .then(([users]) => {
      if (users[0] != null) {
        res.json(users[0]);
      } else {
        res.sendStatus(404);
      }
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

module.exports = {
  getUsers,
  getUserById,
};

const database = require("../../database");

const getMovies = (req, res) => {
  database
    .query("select * from movies")
    .then(([movies]) => {
      res.json(movies);
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

const getMovieById = (req, res) => {
  const id = parseInt(req.params.id);

  database
    .query("select * from movies where id = ?", [id])
    .then(([movies]) => {
      if (movies[0] != null) {
        res.json(movies[0]);
      } else {
        res.sendStatus(404);
      }
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

module.exports = {
  getMovies,
  getMovieById,
};