Node.js - Framework Express

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons nous lancer dans un voyage passionnant à la découverte du monde de Node.js et du framework Express. En tant que votre enseignant de science informatique du coin, je suis ravi de vous guider dans cette aventure. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer dès le début et progresser ensemble.

Qu'est-ce que Express ?

Avant de plonger dedans, parlons de ce qu'est réellement Express. Imaginez que vous construisez une maison. Vous pourriez commencer de zéro, faire vos propres briques et couper votre propre bois. Ou bien, vous pourriez utiliser des matériaux préfabriqués qui rendent le travail plus simple et plus rapide. Express est comme ces matériaux préfabriqués, mais pour les applications web. C'est un framework qui offre un ensemble robuste de fonctionnalités pour les applications web et mobiles, rendant plus simple et plus rapide la création d'applications web avec Node.js.

Installation d'Express

Commençons par installer Express.Tout d'abord, assurez-vous d'avoir Node.js installé sur votre ordinateur. Si ce n'est pas le cas, rendez-vous sur le site officiel de Node.js et téléchargez-le.

Une fois Node.js installé, ouvrez votre terminal (ou invite de commande si vous êtes sous Windows) et tapez la commande suivante :

npm install express

Cette commande utilise npm (Node Package Manager) pour installer Express. Pensez à npm comme une caisse à outils magique qui contient tous sorts d'outils utiles (appelés paquets) que nous pouvons utiliser dans nos projets Node.js.

Exemple Hello World

Maintenant que nous avons Express installé, créons notre toute première application Express. Nous allons commencer avec l'exemple classique "Hello, World !".

Créez un nouveau fichier appelé app.js et tapez le code suivant :

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Décomposons cela :

1. Nous importons le module Express et créons une application Express.
2. Nous définissons un numéro de port (3000 dans ce cas).
3. Nous configurons une route pour l'URL racine ('/') qui envoie "Hello, World!" comme réponse.
4. Nous disons à notre application d'écouter sur le port spécifié.

Pour exécuter cette application, allez dans votre terminal, naviguez dans le répertoire contenant app.js, et exécutez :

node app.js

Maintenant, ouvrez votre navigateur web et allez à http://localhost:3000. Vous devriez voir "Hello, World!" affiché sur la page. Félicitations ! Vous venez de créer votre première application Express !

Objet Application

Dans notre exemple précédent, nous avons créé un objet application Express :

const app = express();

Cet objet app est central à la manière dont nous utilisons Express. Il拥有用于路由 les requêtes HTTP, configurer des middleware, rendre des vues HTML, enregistrer un moteur de template, et plus encore.

Voici quelques-unes des méthodes les plus couramment utilisées de l'objet app :

Méthode	Description
app.get()	Route les requêtes HTTP GET vers le chemin spécifié avec les fonctions de rappel spécifiées
app.post()	Route les requêtes HTTP POST vers le chemin spécifié avec les fonctions de rappel spécifiées
app.use()	Monte la fonction de middleware spécifiée ou les fonctions de middleware à l'chemin spécifié
app.listen()	Lie et écoute les connexions sur l'hôte et le port spécifiés

Routage de Base

Le routage fait référence à la détermination de la réponse de l'application à une requête client vers un endpoint particulier, qui est une URI (ou chemin) et une méthode de requête HTTP spécifique (GET, POST, etc.).

Étendre notre application pour inclure plus de routes :

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/about', (req, res) => {
res.send('This is the about page');
});

app.post('/submit', (req, res) => {
res.send('Got a POST request');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Dans cet exemple, nous avons ajouté deux nouvelles routes :

• Une route GET pour '/about' qui renvoie "This is the about page"
• Une route POST pour '/submit' qui renvoie "Got a POST request"

Pour tester la route POST, vous aurez besoin d'un outil comme Postman, ou vous pouvez créer un formulaire HTML qui soumet à cette route.

Serveur de Fichiers Statiques

Souvent, vous souhaiterez servir des fichiers statiques tels que des images, des fichiers CSS et des fichiers JavaScript. Express fournit une fonction middleware intégrée express.static pour cela.

Créons un répertoire appelé public dans notre dossier de projet, et mettons un fichier image (disons cat.jpg) dedans. Ensuite, modifiez votre app.js comme suit :

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Dans cet exemple, nous avons fait deux choses :

1. Nous avons utilisé app.use(express.static('public')) pour servir les fichiers statiques du répertoire 'public'.
2. Nous avons ajouté une nouvelle route '/cat' qui envoie le fichier cat.jpg comme réponse.

Maintenant, vous pouvez accéder à votre image chat directement à http://localhost:3000/cat.jpg, ou via la route '/cat' que nous avons définie.

Et voilà ! Nous avons couvert les bases d'Express, de l'installation au service de fichiers statiques. Souvenez-vous, apprendre à coder est comme apprendre une nouvelle langue - cela nécessite de la pratique et de la patience. Ne soyez pas découragé si vous ne comprenez pas tout de suite. Continuez à expérimenter, continuez à construire, et surtout, continuez à vous amuser !

Dans notre prochaîne leçon, nous plongerons plus profondément dans le middleware Express et les techniques de routage avancées. Jusque-là, bon codage !

Credits: Image by storyset