Comment traduire son application ? I18N + React

Par Maxime Pfrimmer, le 21 février 2024

Application mobile

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 :

Architecture fichier i-18next
Architecture fichier i-18next

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.


Partager l'article

Notre blog

En savoir plus