⚠️ Avant de commencer cette quête, nous te conseillons de regarder celle-ci :

Introduction

Précédemment, nous avons vu comment créer un serveur en utilisant Node.js et le module http.

Cependant, créer un serveur en utilisant le module "http" peut devenir compliqué. Dans cette quête, nous allons découvrir comment créer un serveur en utilisant Express.

Express est un framework pour Node.js qui nous donne accès à des outils puissants et simples que nous pouvons utiliser pour créer et configurer notre serveur rapidement.

En suivant les quêtes de ce module, tu vas construire pas à pas le prototype d'une application serveur. Au final, ton application pourra gérer des requêtes liées à une base de données de films et d'utilisateurs. Commençons ! 🚀

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

✅ Installer et configurer Express ✅ Intégrer Express dans une application NodeJS ✅ Créer ta première série de routes en utilisant Express

⚙️ Installation

Étape 1 : Commence par ouvrir ton terminal et par créer un répertoire :

mkdir express-app

Étape 2 : Navigue dans ce répertoire :

cd express-app

Étape 3 : Initialise ton projet :

npm init -y

👌🏻 On peut utiliser le flag -y pour utiliser les valeurs par défaut pour notre package.json

Étape 4 : Maintenant que le projet est initialisé, installe Express :

npm install express

💯 Bien joué ! Tu peux maintenant utiliser Express!

👌🏻N'hésite pas à regarder la documentation d'express et à la sauvegarder dans tes favoris au cas où tu oublierais comment installer express.

🏗️ Créer ton application express

Étape 1 : Crée un fichier javascript pour contenir tout le code de ton application. Appelons-le index.js. Dans ce fichier, importe express :

const express = require('express');

Étape 2 : Crée une application en appelant le module express. La convention est de l'appeler app :

const app = express();

➡️ Maintenant, nous avons accès à de nombreuses méthodes express en utilisant app.METHOD (ex : app.get(), app.post(), etc...)

👌🏻 Tu peux trouver la liste des méthodes disponibles sur la documentation d'express.

Étape 3 : Crée une constante pour stocker le numéro du port sur lequel ton serveur sera disponible. Pour cet exemple, utilisons le port 5000.

const port = 5000;

Étape 4 : Maintenant, tu dois écouter les connexions entrantes. Pour cela, utilise app.listen.

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

Étape 5 : Utilise ton terminal (assure-toi que tu es dans le bon répertoire) et exécute node index.js

➡️ Tu devrais voir Server is listening on port 5000.

Étape 6 : Maintenant, va dans ton navigateur et accède à localhost:5000 ; Tu devrais voir "Cannot GET /".

➡️ Cette erreur est normale, nous avons créé le serveur, mais nous n'avons pas encore de routes. Tu vas devoir ajouter plus de code dans ton application et recharger le serveur (ce qui signifie l'arrêter en utilisant Ctrl+C et exécuter à nouveau la commande node).

️⚙️ Installer Nodemon

Recharger ton serveur tout le temps peut être assez ennuyeux, pour éviter cela, tu peux utiliser un paquet Node appelé Nodemon.

Nodemon écoutera les changements dans tes fichiers et redémarrera automatiquement le serveur.

Étape 1 : Installer nodemon en utilisant npm.

npm install nodemon --save-dev

☝🏻 Nous devons installer nodemon dans les dépendances de développement, car nous n'utiliserons nodemon que lorsque nous développerons notre projet. Nous ne voulons pas que ce paquet soit installé et utilisé en production.

Étape 2: Adapte ton package.json, en modifiant "main" et "scripts" :

"main": "index.js",
"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

C'est une pratique courante de réserver le script start pour la prodution, et d'avoir un script dev pour le développement : ici, le script dev exécutera nodemon au lieu de node.

Étape 3: Utilise npm run dev pour démarrer le serveur.

🛣️ Créer une route

Le routage consiste à déterminer comment une application répond à une requête du client vers une route de l'application. On parle également de "point d'entrée", ou endpoint en anglais. Un point d'entrée est un chemin d'URL (/, /about, contact, etc.) associé une méthode de requête HTTP spécifique (GET, POST, etc.).

La définition des routes devrait ressembler à ceci :

app.METHOD(PATH, HANDLER)

• app est une instance d'Express.

• METHOD est une méthode de requête HTTP. (GET, POST, PUT, DELETE)

• PATH est un chemin sur le serveur.

• HANDLER est la fonction exécutée lorsque le chemin est reconnu

Créons une route GET !

Quand quelqu'un fait une requête GET vers la racine de notre serveur, nous voulons envoyer comme réponse "Welcome to Express". Donc en partant de app.METHOD(PATH, HANDLER) :

• La METHOD est get :

app.get(PATH, HANDLER);

• Le PATH est / :

app.get("/", HANDLER)

• Le HANDLER doit envoyer "Welcome to Express" :

app.get("/", (req, res) => {
  res.send("Welcome to Express");
});

Voici le code que tu devrais avoir :

const express = require("express");
const app = express();

const port = 5000;

app.get("/", (req, res) => {
  res.send("Welcome to Express");
});

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

Maintenant, va sur localhost:5000 : tu dois voir "Welcome to Express" s'afficher.

🤓 Allons plus loin:

⚙️ HANDLER

Le HANDLER est une fonction exécutée lorsque la route est déclenchée par une requête. Tu verras souvent dans la documentation ou les forums cette fonction "fusionnée" avec la déclaration de la route :

app.get('/search', (req, res) => {});

Jusqu'à ce que tu sois vraiment à l'aise avec Express, il est important de séparer dans ton esprit la déclaration de la route et le HANDLER. C'est pourquoi nous préférerons dans ce module écrire :

const handler = (req, res) => {};

app.get("/search", handler);

Le HANDLER prend 2 paramètres, correspondant à 2 objets HTTP définis dans Express :

• un objet de type Request (par convention, le paramètre est appelé request ou plus souvent req)

• un objet de type Response (par convention, le paramètre est appelé response ou plus souvent res)

Chacun de ces objets a de nombreuses méthodes et propriétés.

ex: response.send("Welcome to Express");

❓Request

L'objet de requête représente la requête HTTP. Il contient des informations telles que :

• l'en-tête HTTP,

• Le corps de la requête (ce qui est envoyé avec la requête),

• Données de formulaire,

• Paramètres de l'URL et query string, ...

Tu peux vérifier toutes les méthodes et propriétés disponibles pour l'objet de requête sur la documentation d'Express :

req.params

Tu peux capturer certaines valeurs de l'URL en utilisant req.params. Imaginons que tu veuilles accéder à un profil d'utilisateur spécifique, en utilisant son nom comme référence.

Tu peux marquer la présence d'un paramètre dans le path de la route : on accédera à la valeur de ce paramètre en utilisant req.params.

Faisons cela ! Créons une nouvelle route :

const welcomeName = (req, res) => {
  res.send(`Welcome ${req.params.name}`);
};

app.get("/users/:name", welcomeName);

La partie :name est le marqueur d'un paramètre : : est le préfixe qui marque un paramètre, name est ici le nom du paramètre (le nom d'un utilisateur dans notre exemple). Maintenant, navigue vers localhost:5000/users/Bob. Tu devrais voir "Welcome Bob".

Change le nom à la fin de l'url et tu devrais voir un nouveau nom quand la page se rafraîchit.

Voir le code complet|||javascript||||||0|||Cacher le code complet
const express = require("express");
const app = express();

const port = 5000;

const welcome = (req, res) => {
  res.send("Welcome to Express");
};

app.get("/", welcome);

const welcomeName = (req, res) => {
  res.send(`Welcome ${req.params.name}`);
};

app.get("/users/:name", welcomeName);

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

❗Response

L'objet response représente la réponse HTTP que le serveur envoie au client. Il peut contenir des données, des messages (validation, erreur), ou simplement un état correspondant à l'état de la requête traitée par le serveur. 

Tu peux vérifier toutes les méthodes et propriétés disponibles pour l'objet de requête sur la documentation d'Express :

http://expressjs.com/fr/4x/api.html#res

Voici quelques méthodes utiles de l'objet Response :

• res.send permet d'envoyer des données (String, Object, Array, Buffer)

(req, res) => {
  res.send(‘Validated’);
};

• res.status pour joindre un message de statut dans la réponse. Généralement combiné avec le "send"

(req, res) => {
  res.status(404).send(‘Cannot find /foo’);
};

• res.sendStatus pour n'envoyer que le statut de la requête

(req, res) => {
  res.sendStatus(200);
};

• res.json pour envoyer un objet au format JSON

(req, res) => {
  res.json({ result: ‘10 items found’ });
};

• res.end permet de terminer la requête sans envoyer de données particulières.

(req, res) => {
  res.end(); // or res.status(404).end();
};

Habituellement, quand nous créons un serveur, nous utilisons une réponse formatée en JSON. Imaginons que l'utilisateur veuille accéder à un catalogue de cocktails.

En accédant à /api/cocktails le serveur lui renverra un JSON avec tous les cocktails disponibles.

const cocktails = [
  {
    id: 1,
    name: "Margarita",
  },
  {
    id: 2,
    name: "Mojito",
  },
  {
    id: 3,
    name: "Cuba Libre",
  },
];

const getCocktails = (req, res) => {
  res.status(200).json(cocktails);
};

app.get("/api/cocktails", getCocktails);

Accède à localhost:5000/api/cocktails et tu devrais voir la liste des cocktails au format JSON ! 

📚 Voici une liste de ressources que tu devrais mettre en favoris :

💪 Challenge

Créer des routes express

Pour ce challenge, pars de cette app :

const express = require("express");

const app = express();

const port = 5000;

const movies = [
  {
    id: 1,
    title: "Citizen Kane",
    director: "Orson Wells",
    year: "1941",
    color: false,
    duration: 120,
  },
  {
    id: 2,
    title: "The Godfather",
    director: "Francis Ford Coppola",
    year: "1972",
    color: true,
    duration: 180,
  },
  {
    id: 3,
    title: "Pulp Fiction",
    director: "Quentin Tarantino",
    year: "1994",
    color: true,
    duration: 180,
  },
];

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

Ton défi est de :

• Créer une route GET /, qui doit renvoyer "Welcome to my favourite movie list"
• Créer une route GET /api/movies, cette route doit renvoyer un état 200 et une liste de films au format json (utilise le tableau movies déclaré dans l'app ;) )
• Créer une route GET /api/movies/:id qui ne retournera que le film correspondant à l'id défini dans l'url (tu peux parcourir le tableau movies avec une boucle for, ou utiliser la méthode .find())
  • S'il y a un film qui correspond aux paramètres, renvoie une réponse avec un statut 200 et le film correspondant comme objet json
  • Sinon, renvoie un statut 404 avec un message "Not Found".

Poste le code de ton fichier index.js en solution.

🧐 Critères de validation

• [ ] Le serveur fonctionne
• [ ] L'url / affiche "Welcome to my favourite movie list"
• [ ] L'url /api/movies affiche la liste des films au format json
• [ ] L'url /api/movies/2 affiche le film The Godfather au format json
• [ ] L'url /api/movies/5 affiche Not found

==$==

Ce que tu devrais avoir dans :

const express = require("express");

const app = express();

const port = 5000;

const welcome = (req, res) => {
  res.send("Welcome to my favourite movie list");
};

app.get("/", welcome);

const movies = [
  {
    id: 1,
    title: "Citizen Kane",
    director: "Orson Wells",
    year: "1941",
    color: false,
    duration: 120,
  },
  {
    id: 2,
    title: "The Godfather",
    director: "Francis Ford Coppola",
    year: "1972",
    color: true,
    duration: 180,
  },
  {
    id: 3,
    title: "Pulp Fiction",
    director: "Quentin Tarantino",
    year: "1994",
    color: true,
    duration: 180,
  },
];

const getMovies = (req, res) => {
  res.json(movies);
};

app.get("/api/movies", getMovies);

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

  const movie = movies.find((movie) => movie.id === id);

  if (movie != null) {
    res.json(movie);
  } else {
    res.status(404).send("Not Found");
  }
};

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

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