Mise en place des traductions dans un module frontend

L’internationalisation est le processus de conception d’applications logicielles qui peuvent être facilement adaptées à différentes langues et régions sans nécessiter de changements techniques significatifs. L’objectif de l’internationalisation est de rendre l’application sensible à la localisation, ce qui signifie qu’elle peut être facilement adaptée à différentes localités ou régions sans nécessiter de modifications de la base de code.

Nous utilisons react-i18next  pour internationaliser le contenu des modules frontaux.

Afin d’internationaliser votre module frontend, ajoutez cette ligne dans le fichier src/index.ts pour indiquer au shell de l’application où trouver les fichiers de traduction. Cela doit être exporté pour que le shell de l’application puisse y accéder.

export const importTranslation = require.context("../translations", false, /.json$/, "lazy");

Conservez le mode "lazy". Le shell de l’application s’attend à ce que importTranslation retourne une promesse lorsqu’il demande un fichier de traduction à un module.

Toutes les traductions sont ajoutées dans le répertoire translations qui se trouve au premier niveau du paquet. Le fichier source des traductions est le en.json qui contient les traductions en anglais de tous les textes codés en dur. Pour ajouter des traductions d’une autre langue, par exemple l’espagnol, créez un nouveau fichier es.json dans le répertoire translations. Utilisez des underscores pour les noms de fichiers des locales régionales, par exemple es_MX.json ou pt_BR.json. Le shell de l’application convertit les balises de langue détectées comme pt-BR en pt_BR avant de charger le fichier JSON. Lorsque l’utilisateur change de langue, l’application charge le fichier de ressources approprié et affiche le texte dans la langue préférée de l’utilisateur.

Voici un exemple d’utilisation de la localisation react-i18next dans vos composants React.

import { useTranslation } from "react-i18next";
 
const ActiveVisitsTable = () => {
  const { t } = useTranslation();
 
  return <h4>{t("activeVisits", "Active Visits")}</h4>;
};

Le framework fournit un ensemble de core translations qui sont utilisées dans de nombreux modules frontaux. Elles peuvent être utilisées avec la fonction getCoreTranslation. Cette fonction prend une clé de traduction core, une valeur par défaut optionnelle et des options d’interpolation i18next optionnelles. Une erreur de type TypeScript s’affiche si la clé fournie n’est pas valide.

Les clés de core translations valides sont définies par le type CoreTranslationKey , généré à partir de la map coreTranslations. Il s’agit notamment de clés courantes utilisées dans de nombreuses applications, telles que cancel, confirm, female et other. Les fichiers JSON de traduction correspondants se trouvent eux-mêmes dans l’application esm-translations .

import { getCoreTranslation } from "@openmrs/esm-framework";
 
const ErrorHeader = () => {
  return <h4>{getCoreTranslation("error", "Error")}</h4>;
};