Et m\u00eame si votre app est g\u00e9nialissime, il y a tr\u00e8s peu de chances qu\u2019un internaute aille apprendre une langue nouvelle <\/b>juste pour l\u2019utiliser.<\/p>\n
Si vous souhaitez augmenter votre CA, une application bilingue<\/b>, multilingue<\/b> ou disponible dans toutes les langues<\/b> est un atout de taille.<\/p>\n
Et heureusement, traduire une application mobile est assez simple gr\u00e2ce \u00e0 l\u2019internationalisation.<\/p>\n
L\u2019internationalisation, ou i18N, consiste \u00e0 concevoir des logiciels facilement adaptables aux diff\u00e9rentes langues. Cerise sur le g\u00e2teau\u00a0: l\u2019i18N ne n\u00e9cessite pas de modifier le code source de votre app.<\/p>\n
Alors pourquoi s\u2019en priver\u00a0?<\/p>\n
On vous a concoct\u00e9 un guide complet sur comment traduire votre application \u00e0 l\u2019aide du framework i18N.<\/p>\n
Let\u2019s go.<\/p>\n
Pourquoi i18N et pas une autre librairie d\u2019internationalisation\u00a0?<\/h2>\n
Soyons d\u2019accord\u00a0: vous pouvez traduire automatiquement vos contenus avec un logiciel de traduction<\/b> automatique<\/b> comme Google Traduction<\/b>.<\/p>\n
C\u2019est rapide et pas cher.<\/p>\n
Par contre, les r\u00e9sultats sont parfois assez douteux.<\/p>\n
Raison pour laquelle les d\u00e9veloppeurs optent pour une autre solution\u00a0: les frameworks React.<\/p>\n
Il y en a deux\u00a0:<\/p>\n
- \n
- React-intl<\/li>\n
- React-i18next.<\/li>\n<\/ul>\n
Notre choix s\u2019est port\u00e9 sur l\u2019outil de traduction<\/b> React-i18next \u00e0 cause de sa kyrielle d\u2019avantages\u00a0:<\/p>\n
- \n
- c\u2019est une biblioth\u00e8que est int\u00e9gralement \u00e9crite en JavaScript\u00a0;<\/li>\n
- React-i18N abrite un syst\u00e8me de traduction automatique<\/b> complet pour plusieurs langues diff\u00e9rentes<\/b>\u00a0;<\/li>\n
- c\u2019est une biblioth\u00e8que ais\u00e9ment scalable gr\u00e2ce \u00e0 sa capacit\u00e9 de s\u00e9parer chaque traduction en plusieurs fichiers et de les charger \u00e0 la demande.<\/li>\n<\/ul>\n
Sans transition, voyons ensemble comment traduire votre application en plusieurs langues \u00e9trang\u00e8res<\/b> de A \u00e0 Z.<\/p>\n
5 \u00e9tapes pour traduire int\u00e9gralement les textes d\u2019une application en plusieurs langues<\/h2>\n
![\"\"](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/02\/image4-1.png\")
<\/p>\n1 \u2013 Installez les packages<\/h3>\n
Afin de traduire votre application mobile, vous aurez besoin d\u2019installer tous les packages qui suivent :<\/p>\n
- \n
- I18N, la star du jour\u00a0;<\/li>\n
- React-i18n, qui vous permet d\u2019utiliser toutes les fonctionnalit\u00e9s d\u2019i18N dans votre application mobile react\u00a0;<\/li>\n
- I18next-browser-languagedetector, qui permet de d\u00e9tecter la langue de l\u2019utilisateur depuis son navigateur\u00a0;<\/li>\n
- I18next-http-backend, que l\u2019on utilisera pour charger les fichiers de traductions.<\/li>\n<\/ul>\n
Pour les installer, rien de plus simple\u00a0: copiez-collez la commande suivante dans votre invite de commande.<\/p>\n
npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend<\/pre>\n
Ps\u00a0: n\u2019oubliez pas de d\u00e9marrer votre serveur node.js avant de saisir cette instruction, sinon \u00e7a ne fonctionnera pas. Si vous ne savez pas ce qu\u2019est node.js, on vous en parle en d\u00e9tail ici<\/a>.<\/p>\n
2 \u2013 Cr\u00e9ez les fichiers de traduction<\/h3>\n
Vos textes \u00e0 traduire<\/b> ne seront pas r\u00e9dig\u00e9s directement dans le code source.<\/p>\n
Vous pouvez le faire, mais c\u2019est une tr\u00e8s mauvaise id\u00e9e.<\/p>\n
\u00c0 la place, voici ce qu\u2019on vous propose\u00a0: cr\u00e9er des fichiers pour chaque langue de traduction<\/b>.<\/p>\n
Suivez les instructions suivantes \u00e0 la lettre pour que \u00e7a fonctionne\u00a0:<\/p>\n
- \n
- Allez dans le r\u00e9pertoire \u00ab\u00a0public\u00a0\u00bb de votre app\u00a0\u00bb\u00a0;<\/li>\n
- Cr\u00e9ez-y un dossier \u00ab\u00a0locales\u00a0\u00bb\u00a0;<\/li>\n
- Pour chaque langue-cible<\/b> que vous voulez int\u00e9grer, cr\u00e9er un nouveau fichier dans le dossier \u00ab\u00a0locales\u00a0\u00bb. Nommez chaque fichier selon les codes correspondants desdites langues (EN, FR, SP, etc.)\u00a0;<\/li>\n
- Enfin, dans chacun des dossiers de langues, cr\u00e9ez un fichier \u00ab\u00a0translation.json\u00a0\u00bb.<\/li>\n<\/ul>\n
Voici l\u2019architecture que vous devriez normalement avoir\u00a0:<\/p>\n
![\"Architecture](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/02\/Architecture-fichiers-I18N-1.png\")
Architecture fichier i-18next<\/figcaption><\/figure>\n 3 \u2013 Initialiser i18next<\/h3>\n
Maintenant que les packages et les fichiers de traduction sont pr\u00eats, initialisons i18N.<\/p>\n
Pour cela, cr\u00e9ez un nouveau fichier i18n.js dans le r\u00e9pertoire src et ajoutez-y le code suivant\u00a0:<\/p>\n
<\/p>\n
import<\/b> i18n from 'i18next';\r\nimport<\/b> { initReactI18next } from 'react-i18next';\r\nimport<\/b> LanguageDetector from 'i18next-browser-languagedetector';\r\nimport<\/b> Backend from 'i18next-http-backend';\r\ni18n\r\n .use(Backend)\r\n .use(LanguageDetector)\r\n .use(initReactI18next)\r\n .init({\r\n debug: true<\/b>,\r\n fallbackLng: 'en',\r\n });\r\nexport<\/b> default<\/b> i18n;<\/pre>\n<\/p>\n
Parmi toutes ces lignes, une est assez int\u00e9ressante\u00a0:<\/p>\n
fallbackLng :\u2019en\u2019;<\/pre>\n
Concr\u00e8tement, elle dit \u00e0 l\u2019application\u00a0: \u00ab\u00a0si tu ne trouves pas de fichier de traduction pour la langue de recherch\u00e9e par l\u2019internaute, affiche les contenus en anglais.\u00a0\u00bb.<\/p>\n
Sachant qu\u2019un quart des internautes au monde comprennent l\u2019anglais, c\u2019est un choix judicieux d\u2019en faire la langue par d\u00e9faut<\/b>.<\/p>\n
Une fois que vous avez cr\u00e9\u00e9 ce fichier, allez dans le fichier index.js, lui aussi situ\u00e9 dans le r\u00e9pertoire \u201csrc\u201d. Rajoutez les lignes suivantes\u00a0:<\/p>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom\/client';\r\nimport '.\/index.css';\r\nimport App from '.\/App';\r\nimport reportWebVitals from '.\/reportWebVitals';\r\nimport '.\/i18n'; \/\/ <--- add this\r\n\r\n\/\/ ... other code ...<\/pre>\n
Gr\u00e2ce au composant \u00ab\u00a0Suspense\u00a0\u00bb, nous allons pouvoir charger les traductions de mani\u00e8re asynchrone. Sans lui, si une ressource n\u2019est pas disponible, votre app va afficher un vilain message d\u2019erreur \u00e0 l\u2019utilisateur.<\/p>\n
Ouvrez le fichier App.js et rajoutez les importations suivantes\u00a0:<\/p>\n
import { Suspense } from 'react';\r\nimport { useTranslation} from 'react-i18next';\r\n\/\/ ...<\/pre>\nMaintenant, modifions la fonction App()\u00a0:<\/p>\n
import { Suspense } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nfunction App() {\r\n\u00a0\u00a0const { t, i18n } = useTranslation();\r\n\u00a0\u00a0return (\r\n\u00a0\u00a0\u00a0\u00a0<div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1><\/h1>\r\n\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\u00a0\u00a0);\r\n}\r\nexport default function WrappedApp() {\r\n\u00a0\u00a0return (\r\n\u00a0\u00a0\u00a0\u00a0<Suspense fallback=\"...loading\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<App \/>\r\n\u00a0\u00a0\u00a0\u00a0<\/Suspense>\r\n\u00a0\u00a0)\r\n}<\/pre>\nPr\u00eatez attention \u00e0 la ligne :<\/p>\n
const { t, i18n } = useTranslation() ;<\/pre>\n‘T’ est la fonction que nous allons utiliser pour traduire nos textes.<\/p>\n
‘I18n’ est l\u2019objet que nous allons utiliser pour charger la liste des langues et les interchanger.<\/p>\n
4 \u2013 Traduisons nos textes pleins avec i18N<\/h3>\n
Enfin, le moment tant attendu est arriv\u00e9\u00a0: traduisons nos textes.<\/p>\n
Pour \u00e7a, commencez (logiquement) par ajouter des traductions dans chacun de vos fichiers translation.json.<\/p>\n
Voici comment faire avec la version anglaise.<\/p>\n
{\r\n\u00a0\u00a0\"main\": {\r\n\u00a0\u00a0\u00a0\u00a0\"header\": \"Welcome to the app!\"\r\n\u00a0\u00a0}\r\n}<\/pre>\n\u00ab\u00a0header\u00a0\u00bb ici est la cl\u00e9 de traduction que l\u2019on va utiliser.<\/p>\n
Si vous souhaitez traduire d\u2019autres contenus, changez juste la cl\u00e9 et reprenez le m\u00eame processus.<\/p>\n
Refaite la m\u00eame chose avec les autres langues et c\u2019est bon.<\/p>\n
Maintenant, il est temps de les utiliser.<\/p>\n
Rien de plus simple\u00a0: nous allons passer les noms des cl\u00e9s des textes \u00e0 traduire \u00e0 la fonction \u00ab\u00a0t\u00a0\u00bb. Au moment o\u00f9 le mobinaute voudra charger les contenus, ce sera la valeur de la cl\u00e9 qui sera affich\u00e9e automatiquement.<\/p>\n
Maintenant, allez dans le fichier src\/App.js et ajoutez une traduction pour la balise h1\u00a0:<\/p>\n
\/\/ ... imports ...\r\nfunction<\/b> App() {\r\n const { t, i18n } = useTranslation();\r\n return<\/b> (\r\n <div>\r\n <h1>{t('main.header')}<\/h1>\r\n <\/div>\r\n );\r\n}\r\n\/\/ ... other code ...<\/pre>\nEnsuite, rebootez l\u2019application en entrant la commande npm start dans votre invite de commande. Puis rendez-vous sur votre serveur local (http:\/\/localhost:3000) et v\u00e9rifiez\u00a0: tada, vos textes sont traduits.<\/p>\n
Pour afficher la traduction de votre choix, allez dans le fichier i18n.js et ajoutez la commande\u00a0:<\/p>\n
i18n.changeLanguage('ES');<\/pre>\nES ici signifie espagnol. Mais si vous avez une autre langue en t\u00eate, remplacez ES par ladite langue.<\/p>\n
\u00c7a y est\u00a0! Vous venez de cr\u00e9er votre premier contenu traduit<\/b>. Vous n\u2019aurez plus qu\u2019\u00e0 ins\u00e9rer les traductions de chaque contenu dans les fichiers translation.js correspondants.<\/p>\n
5 \u2013 Faire appel \u00e0 une agence de d\u00e9veloppement web ou \u00e0 des traducteurs freelances<\/h3>\n
Ok.<\/p>\n
Vous savez maintenant comment traduire votre app.<\/p>\n
Sauf que vous vous en doutez, si votre app comporte plusieurs interfaces remplies de textes\u2026 cr\u00e9er votre dictionnaire multilingue<\/b> va vous prendre des mois.<\/p>\n
Sans compter la gestion des balises \ud83e\udd2f<\/b><\/p>\n
Vous avez 2 options\u00a0:<\/p>\n
- \n
- soit vous mobilisez votre \u00e9quipe pendant plusieurs semaines sur \u00e7a\u00a0;<\/li>\n
- soit vous faites appel \u00e0 des traducteurs professionnels<\/b> en freelance ou \u00e0 une agence de d\u00e9veloppement web et \u00e9conomisez du temps.<\/li>\n<\/ul>\n
\u00c0 vous de voir.<\/p>\n
Mais si vous voulez en discuter, n\u2019h\u00e9sitez pas \u00e0 faire un message \u00e0 notre chef de projet informatique<\/a>. En fonction de votre situation, il vous aiguillera vers la meilleure solution (et c\u2019est sans engagement \ud83d\ude01).<\/p>\n
C\u2019est par ici<\/a>.<\/p>\n
3+1 Fails r\u00e9currents de traduction d\u2019app \u00e0 \u00e9viter \u00e0 tout prix<\/h2>\n
Avant de nous s\u00e9parer, parlons des menaces qui planent sur vos tentatives de traduction.<\/p>\n
Et ils sont plus nombreux et plus vicieux que vous ne pouvez le croire.<\/p>\n
On vous en a s\u00e9lectionn\u00e9 les 4 plus dangereux.<\/p>\n
1 \u2013 Oublier le formatage et la culture des pays vis\u00e9s<\/h3>\n
Aux USA, ils n\u2019affichent pas le temps comme nous.<\/p>\n
Tandis que nous sommes habitu\u00e9\u00b7e\u00b7s au format jour\/mois\/ann\u00e9es, les am\u00e9ricains pr\u00e9f\u00e8rent le format jour\/ann\u00e9e\/mois.<\/p>\n
Pareil pour le calendrier. Pour nous, la semaine commence le lundi, contre dimanche chez l\u2019Oncle Sam.<\/p>\n
Pourquoi je vous parle de tout \u00e7a\u00a0? Pour vous mettre la puce \u00e0 l\u2019oreille sur les erreurs de formatage et de m\u00e9triques.<\/p>\n
Et elles ne concernent pas que l\u2019heure. La monnaie, les fuseaux horaires, les unit\u00e9s de mesure\u2026 tout peut varier.<\/p>\n
Ps : m\u00e9fiez vous des r\u00e8gles de grammaire<\/b> (You \ud83c\uddec\ud83c\udde7 = Tu et Vous en fran\u00e7ais).<\/p>\n
2 \u2013 Les symboles bizarres face aux caract\u00e8res non latins<\/h3>\n
Vous les avez s\u00fbrement d\u00e9j\u00e0 vus.<\/p>\n
Ces symboles qui ne veulent humainement rien dire, mais qui sont parfaitement logiques pour les logiciels.<\/p>\n
C\u2019est ce qu\u2019il se passe quand vous essayez d\u2019afficher des caract\u00e8res non latins \u2013 chinois,\u00a0 hindi, arabe, etc. – avec un formatage purement latin (ex\u00a0: ASCII).<\/p>\n
Heureusement, la solution ici est assez simple\u00a0: utilisez le format unicode autant que possible.<\/p>\n
3 \u2013 Des boutons calibr\u00e9s au millim\u00e8tre<\/h3>\n
![\"\"](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/02\/image2-1.png\")
<\/p>\nDans notre article sur les 32 lois de l\u2019UX design<\/a>, on vous avait parl\u00e9 des dangers de ne pas laisser de marge autour de vos contenus.<\/p>\n
- Enfin, dans chacun des dossiers de langues, cr\u00e9ez un fichier \u00ab\u00a0translation.json\u00a0\u00bb.<\/li>\n<\/ul>\n
- c\u2019est une biblioth\u00e8que ais\u00e9ment scalable gr\u00e2ce \u00e0 sa capacit\u00e9 de s\u00e9parer chaque traduction en plusieurs fichiers et de les charger \u00e0 la demande.<\/li>\n<\/ul>\n