Go to Hackademy website

Gérer les traductions avec Localeapp

Alexandre Salaun

Posté par Alexandre Salaun dans les catégories outils

Localeapp est un site offrant une interface permettant de saisir les traductions de votre site ou application web. Grâce à ce service vous n’aurez plus à rédiger vous-même les traductions dans les fichiers de locales (fichiers .yml). Votre client pourra lui-même modifier les textes.

Il existe une gem afin de pouvoir utiliser ce service dans une application Rails, c’est cette dernière que nous allons utiliser dans notre exemple.

Pré-requis

Avant toute chose, il est nécessaire de créer un compte sur localeapp.com. Une fois connecté, vous allez pouvoir créer un projet (public : tous les utilisateurs peuvent visualiser le projet, ou privé : seuls les utilisateurs invités pourront voir le projet).

Après avoir créé un projet (en sélectionnant une langue par défaut), une clé vous est fournie afin de lier votre projet localeapp et votre application, vous devez la conserver.

Utiliser localeapp dans une nouvelle application Rails

Après avoir créé votre application Rails, il est nécessaire de renseigner la locale à utiliser dans le fichier application.rb (le français dans notre cas) :

config.i18n.default_locale = :fr

Cette locale correspond, dans la plupart des cas, à la langue que vous avez choisi sur localeapp.com pour votre projet.

Ensuite, créons une page d’accueil afin de vérifier le fonctionnement de localeapp. Il faut donc créer un controller :

# /app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

Dans le fichier routes.rb, vous devez ajouter la ligne suivante afin de définir la route vers la page d’accueil :

root to: "home#index"

Dans la vue (/app/views/home/index.html.erb), nous allons utiliser la méthode de traduction de Rails :

<%= t("homepage.title") %>

Vous obtenez donc une page d’accueil ne contenant que “Title” puisque la traduction n’existe pas encore.

Maintenant que vous avez une application qui utilise les traductions nous allons ajouter la gem localeapp au Gemfile :

gem 'localeapp'

Il vous suffit ensuite de lancer la commander bundle install afin de finaliser l’ajout de la gem à l’application. Enfin, une commande est nécessaire pour initialiser localeapp :

bundle exec localeapp install my_localeapp_api_key

La clé à renseigner ici est celle qui vous a été donnée sur localeapp.com lors de la création du projet. Un initializer est créé afin de pouvoir configurer localeapp.

Il est maintenant possible d’ajouter la clé de traduction que vous avez utilisé sur la page d’accueil :

localeapp add homepage.title fr:"Ma page d'accueil"

Vous pouvez constater que la traduction a été ajoutée dans le projet créé sur localeapp.com. Vous pouvez modifier la traduction en ligne.

Dorénavant, si vous rafraîchissez votre page d’accueil la traduction va apparaître sur votre page d’accueil. Vous pouvez la modifier autant de fois que vous le souhaitez, vous constaterez qu’à chaque rafraîchissement elle est mise à jour.

En effet, par défaut, les traductions sont récupérées depuis le site localeapp.com à chaque rafraîchissement de page. Ceci est valable uniquement pour l’environnement de développement puisque plus gourmand en terme de ressources (un appel est fait à l’API de localeapp à chaque chargement de page).

Pour ajouter de nouvelles traductions, vous pouvez donc utiliser la commande vue précédemment ou directement ajouter une clé sur le site localeapp.com via l’interface.

Ajout de clé avec Localeapp

Si vous affichez donc la traduction sur votre page d’accueil et que vous rafraîchissez votre navigateur, vous constaterez que la traduction est bien présente.

Attention, ne rajoutez plus les traductions directement dans les fichiers YAML car ce fichier est regénéré à chaque fois qu’une traduction est modifiée sur localeapp. Vos nouvelles traductions seront donc effacées si elles ne sont pas exportées sur le site.

Libre à vous maintenant de créer votre application avec les traductions nécessaires.

Ajouter localeapp à une application existante

Nous avons donc vu comment ajouter localeapp à nouvelle application Rails mais vous pouvez également vouloir ajouter cet outil à une application existante et comprenant donc déjà des traductions.

Le processus d’installation et la création du projet sur localeapp.com restent exactement les mêmes que pour une nouvelle application Rails. Une fois localeapp installé, vous allez pouvoir exporter toutes les traductions existantes, soit pour tous les fichiers présents, soit pour un en particulier. Pour cela, il vous faudra utilisez la commande suivante :

localeapp push config/locales/

pour exporter tous les fichiers présents dans le répertoire config/locales, et la suivante pour exporter uniquement un fichier :

localeapp push config/locales/fr.yml

Suite à celà, vous allez pouvoir retrouver toutes les traductions exportées dans votre projet sur localeapp.com et donc les modifier comme bon vous semble.

Le fonctionnement n’est donc en rien différent, qu’il s’agisse d’une nouvelle application ou d’une application existante. La seule différence est donc l’export de traductions.

Utilisation en environnement de staging ou de production

Nous avons vu précédemment comment installer localeapp, ajouter des traductions et l’utiliser en environnement de développement. Cependant, les traductions sont rechargées à chaque chargement de page uniquement en environnement de développement. Pour les environnements de staging et de production, par défaut il faut récupérer les traductions via la commande suivante :

localeapp pull

Ensuite, il vous faut redémarrer le serveur afin qu’il prenne en compte les nouvelles traductions.

Ce processus fonctionne sans problème mais il est contraignant car à chaque modification vous devez aller sur le serveur, récupérer les traductions et relancer le serveur.

L’idéal serait donc de récupérer automatiquement les traductions pour les environnements de staging et production comme cela est fait pour l’environnement de développement.

Cependant, faire un appel à l’API de localeapp à chaque chargement de page n’est pas envisageable, surtout en production. Les performances serait réduites, les temps de chargement plus long…

La gem propose donc de lancer un démon afin de récupérer les traductions toutes les 5 secondes (c’est l’intervalle par défaut, il est possible de le modifier).

Pour que les traductions soient récupérées à intervalle régulier via le démon, il faut ajouter une ligne à l’initializer :

require 'localeapp/rails'

Localeapp.configure do |config|
  config.api_key = 'my_localeapp_api_key'
  config.polling_environments = [:development]
  # indique que le polling doit être fait à chaque chargement de page uniquement
  # en environnement de développement (valuer par défaut)
  config.reloading_environments = [:development, :staging]
  # indique que les traductions doivent être rechargées par l'application à
  # chaque mise à jour des fichiers de traduction en développement et en staging
end

Avec cette configuration, nous allons voir qu’en environnement de staging les traductions sont mises à jour grâce au démon lancé.

Après avoir mis-à-jour le code sur votre serveur, vous allez devoir supprimer les logs existants de localeapp si il y en a (fichier localeapp.yml et localeapp_daemon.log à supprimer) puis récupérer une première fois les traductions via la commande suivante :

localeapp pull

Une fois que cela est fait, vous allez pouvoir lancer le démon :

localeapp daemon -b

Il existe deux options pour cette commande, -b permet de lancer le démon en tâche de fond et -i permet de spécifier l’intervalle en secondes entre deux appels à l’API de localeapp :

localeapp daemon -i 10

Pour cet exemple, l’appel à l’API se fera toutes les 10 secondes.

Une fois le démon lancé, il vous faut redémarrer une dernière fois votre application. Après cela, vous allez pouvoir modifier les traductions depuis l’interface de localeapp.com et constater qu’elles sont mises à jour sur l’environnement de staging.

Attention cependant à la durée précisée pour l’intervalle entre deux appels à l’API, ici les mises-à-jour ne se font pas au chargement de la page mais bien toutes les X secondes donc il peut être nécessaire d’attendre quelques secondes pour voir les modifications sur votre site.

Voilà donc comment utiliser localeapp en environnement de staging ou de production. En environnement de production, les traductions ne sont pas censées changer très souvent, l’intervalle entre deux appels API peut donc être considérablement augmenté.

Conclusion

La mise en place de localeapp doit se faire en suivant bien les étapes dans l’ordre, j’ai moi-même eu des difficultés à le mettre en place la première fois.

Cependant, cet outil s’avère très utile lorsque votre application comporte un grand nombre de textes ou de mutiples langues car le client peut lui-même les gérer. Il est vrai que vous pouvez toujours utiliser I18n plutôt qu’une gem afin de traduire les textes en demandant au client de remplir les fichiers YAML mais c’est quand même bien moins pratique.

Il faut savoir que localeapp est un service payant si vous avez plus de 500 clés de traduction ou plus de 2 langues. Vous pouvez consulter les différents prix sur la page dédiée du site.

L’équipe Synbioz.

Libres d’être ensemble.

Articles connexes

Un plugin Vim à la mimine

03/01/2019

Dans l’article précédent, intitulé une assez bonne intimité, je vous présentais GPG et le chiffrement de courriels. Nous avons alors remarqué que le contenu d’un courriel était encodé de sorte que le...

Une assez bonne intimité

20/12/2018

Si vous êtes utilisateur de MacOS, il y a de fortes chances que vous utilisiez Apple Mail pour échanger des courriels. Et comme vous êtes sensible à la confidentialité des informations que vous...

Tests end to end avec Jest et Puppeteer

05/07/2018

Dans cet article, on va partir sur des tests end to end. Pour planter le décor, un test end to end (e2e) est un test logiciel qui a pour but de valider que le système testé répond correctement à un...

Chasser les requêtes N+1 avec Bullet

05/04/2018

Aujourd’hui nous allons parler des requêtes N+1 dans une application Rails : vous savez ces lignes quasiment identiques, qui s’ajoutent de manière exponentielle aux logs, dès lors que l’on appelle...