Comment traduire son application ? I18N + React

Parlez la langue de vos clients ou mourez

20 %.

C’est le nombre de conversions que vous ratez lorsque votre app d’e-commerce n’est pas disponible dans la langue maternelle d’un segment d’utilisateurs 🥲 (source).

Et même si votre app est génialissime, il y a très peu de chances qu’un internaute aille apprendre une langue nouvelle juste pour l’utiliser.

Si vous souhaitez augmenter votre CA, une application bilingue, multilingue ou disponible dans toutes les langues est un atout de taille.

Et heureusement, traduire une application mobile est assez simple grâce à l’internationalisation.

L’internationalisation, ou i18N, consiste à concevoir des logiciels facilement adaptables aux différentes langues. Cerise sur le gâteau : l’i18N ne nécessite pas de modifier le code source de votre app.

Alors pourquoi s’en priver ?

On vous a concocté un guide complet sur comment traduire votre application à l’aide du framework i18N.

Let’s go.

Pourquoi i18N et pas une autre librairie d’internationalisation ?

Soyons d’accord : vous pouvez traduire automatiquement vos contenus avec un logiciel de traduction automatique comme Google Traduction.

C’est rapide et pas cher.

Par contre, les résultats sont parfois assez douteux.

Raison pour laquelle les développeurs optent pour une autre solution : les frameworks React.

Il y en a deux :

• React-intl
• React-i18next.

Notre choix s’est porté sur l’outil de traduction React-i18next à cause de sa kyrielle d’avantages :

• c’est une bibliothèque est intégralement écrite en JavaScript ;
• React-i18N abrite un système de traduction automatique complet pour plusieurs langues différentes ;
• c’est une bibliothèque aisément scalable grâce à sa capacité de séparer chaque traduction en plusieurs fichiers et de les charger à la demande.

Sans transition, voyons ensemble comment traduire votre application en plusieurs langues étrangères de A à Z.

5 étapes pour traduire intégralement les textes d’une application en plusieurs langues

1 – Installez les packages

Afin de traduire votre application mobile, vous aurez besoin d’installer tous les packages qui suivent :

• I18N, la star du jour ;
• React-i18n, qui vous permet d’utiliser toutes les fonctionnalités d’i18N dans votre application mobile react ;
• I18next-browser-languagedetector, qui permet de détecter la langue de l’utilisateur depuis son navigateur ;
• I18next-http-backend, que l’on utilisera pour charger les fichiers de traductions.

Pour les installer, rien de plus simple : copiez-collez la commande suivante dans votre invite de commande.

npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

Ps : n’oubliez pas de démarrer votre serveur node.js avant de saisir cette instruction, sinon ça ne fonctionnera pas. Si vous ne savez pas ce qu’est node.js, on vous en parle en détail ici.

2 – Créez les fichiers de traduction

Vos textes à traduire ne seront pas rédigés directement dans le code source.

Vous pouvez le faire, mais c’est une très mauvaise idée.

À la place, voici ce qu’on vous propose : créer des fichiers pour chaque langue de traduction.

Suivez les instructions suivantes à la lettre pour que ça fonctionne :

• Allez dans le répertoire « public » de votre app » ;
• Créez-y un dossier « locales » ;
• Pour chaque langue-cible que vous voulez intégrer, créer un nouveau fichier dans le dossier « locales ». Nommez chaque fichier selon les codes correspondants desdites langues (EN, FR, SP, etc.) ;
• Enfin, dans chacun des dossiers de langues, créez un fichier « translation.json ».

Voici l’architecture que vous devriez normalement avoir :

3 – Initialiser i18next

Maintenant que les packages et les fichiers de traduction sont prêts, initialisons i18N.

Pour cela, créez un nouveau fichier i18n.js dans le répertoire src et ajoutez-y le code suivant :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        debug: true,
        fallbackLng: 'en',
        });
export default i18n;

Parmi toutes ces lignes, une est assez intéressante :

fallbackLng :’en’;

Concrètement, elle dit à l’application : « si tu ne trouves pas de fichier de traduction pour la langue de recherchée par l’internaute, affiche les contenus en anglais. ».

Sachant qu’un quart des internautes au monde comprennent l’anglais, c’est un choix judicieux d’en faire la langue par défaut.

Une fois que vous avez créé ce fichier, allez dans le fichier index.js, lui aussi situé dans le répertoire “src”. Rajoutez les lignes suivantes :

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './i18n'; // <--- add this

// ... other code ...

Grâce au composant « Suspense », nous allons pouvoir charger les traductions de manière asynchrone. Sans lui, si une ressource n’est pas disponible, votre app va afficher un vilain message d’erreur à l’utilisateur.

Ouvrez le fichier App.js et rajoutez les importations suivantes :

import { Suspense } from 'react';
import { useTranslation} from 'react-i18next';
// ...

Maintenant, modifions la fonction App() :

import { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <h1></h1>
    </div>
  );
}
export default function WrappedApp() {
  return (
    <Suspense fallback="...loading">
      <App />
    </Suspense>
  )
}

Prêtez attention à la ligne :

const { t, i18n } = useTranslation() ;

‘T’ est la fonction que nous allons utiliser pour traduire nos textes.

‘I18n’ est l’objet que nous allons utiliser pour charger la liste des langues et les interchanger.

4 – Traduisons nos textes pleins avec i18N

Enfin, le moment tant attendu est arrivé : traduisons nos textes.

Pour ça, commencez (logiquement) par ajouter des traductions dans chacun de vos fichiers translation.json.

Voici comment faire avec la version anglaise.

{
  "main": {
    "header": "Welcome to the app!"
  }
}

« header » ici est la clé de traduction que l’on va utiliser.

Si vous souhaitez traduire d’autres contenus, changez juste la clé et reprenez le même processus.

Refaite la même chose avec les autres langues et c’est bon.

Maintenant, il est temps de les utiliser.

Rien de plus simple : nous allons passer les noms des clés des textes à traduire à la fonction « t ». Au moment où le mobinaute voudra charger les contenus, ce sera la valeur de la clé qui sera affichée automatiquement.

Maintenant, allez dans le fichier src/App.js et ajoutez une traduction pour la balise h1 :

// ... imports ...
function App() {
    const { t, i18n } = useTranslation();
    return (
    <div>
        <h1>{t('main.header')}</h1>
    </div>
    );
}
// ... other code ...

Ensuite, rebootez l’application en entrant la commande npm start dans votre invite de commande. Puis rendez-vous sur votre serveur local (http://localhost:3000) et vérifiez : tada, vos textes sont traduits.

Pour afficher la traduction de votre choix, allez dans le fichier i18n.js et ajoutez la commande :

i18n.changeLanguage('ES');

ES ici signifie espagnol. Mais si vous avez une autre langue en tête, remplacez ES par ladite langue.

Ça y est ! Vous venez de créer votre premier contenu traduit. Vous n’aurez plus qu’à insérer les traductions de chaque contenu dans les fichiers translation.js correspondants.

5 – Faire appel à une agence de développement web ou à des traducteurs freelances

Ok.

Vous savez maintenant comment traduire votre app.

Sauf que vous vous en doutez, si votre app comporte plusieurs interfaces remplies de textes… créer votre dictionnaire multilingue va vous prendre des mois.

Sans compter la gestion des balises 🤯

Vous avez 2 options :

• soit vous mobilisez votre équipe pendant plusieurs semaines sur ça ;
• soit vous faites appel à des traducteurs professionnels en freelance ou à une agence de développement web et économisez du temps.

À vous de voir.

Mais si vous voulez en discuter, n’hésitez pas à faire un message à notre chef de projet informatique. En fonction de votre situation, il vous aiguillera vers la meilleure solution (et c’est sans engagement 😁).

C’est par ici.

3+1 Fails récurrents de traduction d’app à éviter à tout prix

Avant de nous séparer, parlons des menaces qui planent sur vos tentatives de traduction.

Et ils sont plus nombreux et plus vicieux que vous ne pouvez le croire.

On vous en a sélectionné les 4 plus dangereux.

1 – Oublier le formatage et la culture des pays visés

Aux USA, ils n’affichent pas le temps comme nous.

Tandis que nous sommes habitué·e·s au format jour/mois/années, les américains préfèrent le format jour/année/mois.

Pareil pour le calendrier. Pour nous, la semaine commence le lundi, contre dimanche chez l’Oncle Sam.

Pourquoi je vous parle de tout ça ? Pour vous mettre la puce à l’oreille sur les erreurs de formatage et de métriques.

Et elles ne concernent pas que l’heure. La monnaie, les fuseaux horaires, les unités de mesure… tout peut varier.

Ps : méfiez vous des règles de grammaire (You 🇬🇧 = Tu et Vous en français).

2 – Les symboles bizarres face aux caractères non latins

Vous les avez sûrement déjà vus.

Ces symboles qui ne veulent humainement rien dire, mais qui sont parfaitement logiques pour les logiciels.

C’est ce qu’il se passe quand vous essayez d’afficher des caractères non latins – chinois,  hindi, arabe, etc. – avec un formatage purement latin (ex : ASCII).

Heureusement, la solution ici est assez simple : utilisez le format unicode autant que possible.

3 – Des boutons calibrés au millimètre

Dans notre article sur les 32 lois de l’UX design, on vous avait parlé des dangers de ne pas laisser de marge autour de vos contenus.

Et ça revient encore. Car si votre équipe de développement est anglophone et qu’elle prévoit des espaces adaptés uniquement à l’anglais, vous courrez à la catastrophe.

Pourquoi ? Parce que toutes les langues n’ont pas besoin du même nombre de mots/caractères pour exprimer la même idée.

“Bonjour”🇫🇷 (7 caractères) = “Hello”🇬🇧 (5 caractères) = “Guten Morgen”🇩🇪 (12 caractères).

Certaines, comme l’anglais, sont très concises. D’autres, à l’instar du français et de l’allemand, nécessitent beaucoup plus de caractères.

Fatalement, si ça n’a pas été pris en compte, vos textes vont déborder de vos éléments graphiques. Idem lorsque vos utilisateurs utilisent des extensions sur leurs moteurs de recherche pour vous comprendre.

Pour éviter ça, prévoyez toujours 30 % de marge autour des textes lorsque vous concevez la mise en page de vos interfaces.

4 – Des designs pensés pour une seule langue.

Vous lisez ce texte de gauche à droite.

Si je le traduis en japonais, vous ne le ferez plus de droite à gauche, mais de haut en bas. Et si j’opte pour l’arable, vous lirez de droite à gauche.

En conclusion : vérifiez toujours que vos textes traduits puissent être lus par toutes les audiences et dans tous les sens.