Internationalisation (i18n) avec Rails

Internationalisation (i18n) avec Rails : Un Tutoriel approfondi pour les Développeurs Senior

Pourquoi Internationalisation (i18n) avec Rails ?

L'internationalisation (i18n) est un processus crucial pour développer des applications web modernes qui servent à une variété de langues et de cultures. Au quotidien, un développeur peut se retrouver dans la situation où son application doit être utilisée par des personnes parlant différentes langues. Par exemple, si vous créez une application de vente en ligne, il serait logique que cette application soit disponible en français pour les clients français, en anglais pour les clients américains et en espagnol pour les clients espagnoles.

Prerequis

Pour suivre ce tutoriel, voici les connaissances et outils nécessaires :

• Connaissances :

  • Rails 7 ou une version plus récente
  • Compréhension de base des concepts de l'internationalisation (i18n)
  • Connaissance de la structure d'un projet Rails

• Outils à installer :

  • Ruby 3.0.x
  • Bundler
  • Node.js et npm pour le développement front-end (si nécessaire)

Concepts fondamentaux

Concept : Fichiers de traduction

Les fichiers de traduction sont des fichiers YAML qui contiennent les chaînes de caractères à traduire. Ils sont généralement situés dans le répertoire config/locales.

## config/locales/fr.yml
fr:
  hello: "Bonjour"

Concept : Utilisation des méthodes i18n

Rails fournit plusieurs méthodes pour accéder aux chaînes de caractères traduites. Les principales sont :

• t : Traduit une chaîne.
• l : Formate une date ou un temps.
• n : Formate un nombre.

## app/views/welcome/index.html.erb
<h1><%= t('hello') %></h1>

Concept : Contexte et scoping

Les fichiers de traduction peuvent être organisés en contextes et en scopes pour une meilleure structure et la facilité de gestion.

## config/locales/fr.yml
fr:
  welcome:
    hello: "Bonjour"

Dans l'application :

<h1><%= t('.hello') %></h1>

Concept : Surcharge des traductions

Il est possible de surcharger les traductions dans le code Ruby.

## app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :set_locale
  
  private
  
  def set_locale
    I18n.locale = params[:locale] || I18n.default_locale
  end
end

Concept : Gestion des paramètres

Les paramètres peuvent également être traduits en utilisant le scope params.

## config/locales/fr.yml
fr:
  params:
    search: "Recherche"

Dans l'application :

<%= form_with url: users_path, method: :get do |form| %>
  <%= form.text_field :query, placeholder: t('.search') %>
  <%= form.submit 'Chercher' %>
<% end %>

Mise en pratique : Projet fil rouge

Nous allons créer un simple gestionnaire de tâches avec une interface utilisateur multilingue.

Étape 1 : Initialisation du projet

rails new task_manager --api --database=postgresql
cd task_manager

Étape 2 : Ajout des dépendances

Ajoutez les dépendances nécessaires pour la gestion des tâches et l'i18n.

## Gemfile
gem 'devise'
gem 'pundit'
gem 'i18n-rails-tasks'

Étape 3 : Installation des gems

bundle install
rails db:create db:migrate

Étape 4 : Configuration de Devise

rails generate devise User
rails db:migrate

Étape 5 : Génération du modèle de tâche

rails generate model Task title:string description:text completed:boolean user:references
rails db:migrate

Étape 6 : Configuration de Pundit

rails generate pundit:policy task

Étape 7 : Création des vues

Créez les vues pour l'interface utilisateur.

## app/views/tasks/index.html.erb
<%= form_with url: tasks_path, method: :get do |form| %>
  <%= form.text_field :query, placeholder: t('.search') %>
  <%= form.submit 'Chercher' %>
<% end %>

<h1><%= t('tasks.index.title') %></h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th>Completed</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <% @tasks.each do |task| %>
      <tr>
        <td><%= task.title %></td>
        <td><%= task.description %></td>
        <td><%= t('.completed', scope: [:helpers, :tasks], completed: task.completed) %></td>
        <td>
          <%= link_to 'Edit', edit_task_path(task), class: 'btn btn-primary' %>
          <%= link_to 'Destroy', task_path(task), method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to t('tasks.index.new_task'), new_task_path, class: 'btn btn-success' %>

Étape 8 : Ajout des traductions

Ajoutez les traductions pour différentes langues.

## config/locales/fr.yml
fr:
  tasks:
    index:
      title: "Gestionnaire de tâches"
      search: "Recherche"
      completed: "%{completed, select, true {Terminée} false {Non terminée}}"

Étape 9 : Configuration du middleware

Ajoutez le middleware pour gérer les paramètres de langue.

## config/application.rb
config.middleware.use I18n::Middleware::LocaleDetector do |detector|
  detector.add(:params, :locale)
end

Étape 10 : Ajout des liens pour changer la langue

Ajoutez des liens pour permettre aux utilisateurs de changer la langue.

<!-- app/views/layouts/application.html.erb -->
<nav>
  <ul>
    <li><%= link_to 'English', locale: :en, hreflang: 'en' %></li>
    <li><%= link_to 'Français', locale: :fr, hreflang: 'fr' %></li>
  </ul>
</nav>

<div class="container">
  <%= yield %>
</div>

Erreurs fréquentes et debugging

Erreur : t method not found

## ❌ Mauvais
<%= t('tasks.index.title') %>

Correction :

## ✅ Correct
<%= t('.index.title', scope: [:tasks]) %>

Erreur : Missing translation data for key tasks.index.title

## config/locales/fr.yml
fr:
  tasks:
    index:
      title: "Gestionnaire de tâches"

Correction :

Assurez-vous que le fichier YAML est correctement placé et nommé.

Erreur : ActionController::RoutingError (No route matches [GET] "/es/tasks")

## config/routes.rb
resources :tasks

Correction :

Ajoutez la langue par défaut dans les routes :

## config/routes.rb
Rails.application.routes.draw do
  scope locale: /en|fr/, default: { locale: :en } do
    resources :tasks
  end
end

Pour aller plus loin

1. Intégration avec Vue.js : Découvrez comment intégrer Vue.js pour une interface utilisateur moderne.
2. Test des traductions : Apprenez à tester les traductions pour vous assurer qu'elles fonctionnent correctement dans différentes langues.
3. Utilisation de i18n-js : Explorez l'utilisation de i18n-js pour la traduction côté client.

Défi pratique

Créez une API RESTful pour un blog avec des articles et des commentaires, en utilisant les concepts d'i18n que vous avez appris. Assurez-vous que le contenu est traduit en plusieurs langues.