Internationalisation (i18n) avec ExpressJS - Guide pour Débutants

Introduction : Qu’est-ce que l’Internationalisation (i18n) ?

L’internationalisation, ou "i18n" (parce qu’il y a 18 lettres entre "i" et "n"), c’est rendre votre application accessible dans différentes langues. Par exemple, un utilisateur français verra "Bonjour" tandis qu’un anglais verra "Hello". Avec ExpressJS et i18n, on peut traduire les textes facilement, comme un traducteur automatique pour votre site.

Étape 1 : Préparer Votre Environnement

Avant de coder, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js et ExpressJS. Voici les étapes :

• Vérifiez Node.js : Ouvrez un terminal et tapez node -v. Si une version apparaît (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur nodejs.org.
• Créez un dossier projet : Faites un dossier nommé "i18n-express" sur votre ordinateur. Ouvrez-le dans un éditeur comme Visual Studio Code.
• Initialisez le projet : Dans le terminal, allez dans ce dossier avec cd chemin/vers/i18n-express, puis tapez npm init -y. Cela crée un fichier package.json.
• Installez ExpressJS et i18n : Tapez npm install express i18n. i18n gère les traductions pour nous.

Étape 2 : Créer une Application Multilingue

Construisons une application simple qui change de langue selon un paramètre dans l’URL.

Exemple de Code : Application Principale

Créez un fichier nommé app.js dans votre dossier "i18n-express" et ajoutez ce code :

📋 Copier le code

var express = require('express');
var i18n = require('i18n');
var path = require('path');
var app = express();

// Configurer i18n
i18n.configure({
    locales: ['fr', 'en'], // Langues supportées
    directory: path.join(__dirname, 'locales'), // Dossier pour les fichiers de traduction
    defaultLocale: 'fr', // Langue par défaut
    queryParameter: 'lang' // Paramètre URL pour changer la langue
});

// Ajouter i18n comme middleware
app.use(i18n.init);

// Route principale
app.get('/', function(req, res) {
    res.send(
        '<h1>' + res.__('greeting') + '</h1>' +
        '<p>' + res.__('welcome') + '</p>' +
        '<a href="/?lang=fr">Français</a> | <a href="/?lang=en">English</a>'
    );
});

app.listen(3000, function() {
    console.log('Serveur démarré sur http://localhost:3000');
});
    

Créer les Fichiers de Traduction

Créez un dossier nommé locales dans "i18n-express". Ajoutez ces deux fichiers JSON :

Fichier : locales/fr.json

📋 Copier le code

{
    "greeting": "Bonjour",
    "welcome": "Bienvenue sur notre site !"
}
    

Fichier : locales/en.json

📋 Copier le code

{
    "greeting": "Hello",
    "welcome": "Welcome to our site!"
}
    

Explication Détaillée du Code

Voici chaque partie expliquée très simplement pour les débutants :

• var i18n = require('i18n'); : On importe le module i18n pour gérer les langues.
• i18n.configure({...}); : On configure i18n :
  • locales: ['fr', 'en'] : Les langues qu’on supporte.
  • directory: ... : Où trouver les fichiers de traduction.
  • defaultLocale: 'fr' : Français par défaut.
  • queryParameter: 'lang' : On change la langue avec ?lang= dans l’URL.
• app.use(i18n.init); : On ajoute i18n à Express pour qu’il sache quelle langue utiliser.
• app.get('/', ...); : Route principale.
  • res.__('greeting') : Récupère la traduction de "greeting" selon la langue.
  • res.__('welcome') : Idem pour "welcome".
  • Liens ?lang=fr et ?lang=en : Permettent de changer la langue.
• Fichiers JSON : Contiennent les traductions pour chaque langue.

Étape 3 : Tester l’Application

Démarrez le serveur avec node app.js dans le terminal, puis testez :

• http://localhost:3000 : Vous verrez "Bonjour" et "Bienvenue sur notre site !" (français par défaut).
• http://localhost:3000/?lang=en : Vous verrez "Hello" et "Welcome to our site!".
• http://localhost:3000/?lang=fr : Retour au français.

Cliquez sur les liens pour changer la langue et voir les traductions en action !

Conclusion

Félicitations ! Vous savez maintenant ajouter l’internationalisation (i18n) à une application ExpressJS avec le module i18n. Votre site peut parler plusieurs langues selon les utilisateurs. Pour aller plus loin, explorez notre prochain tutoriel sur Débit Limitation avec ExpressJS ou consultez la documentation i18n.