Intégrer FBT + Crowdin + GitHub

(Jorge Dalmendray) (22 décembre , 2020)

Dans un (article précédent) jai décrit comment intégrer le framework FBT (Facebook Translation) à votre application React Native. Jai conclu cet article en expliquant comment nous avions une lacune dans le processus de traduction: la traduction elle-même.

Regardons le processus de traduction dun peu plus près:

  1. Écrire du code tout en enveloppant vos chaînes dans les balises fbt
  2. Extrayez toutes les chaînes du code source et préparez-les pour les traductions. Ceci est géré par un simple script dans la bibliothèque fbt
  3. GAP: Soumettez les chaînes pour traduction
  4. GAP: Une fois les traductions terminées, nous avons besoin dun moyen de les remettre dans lapplication aussi rapidement que nous pouvons
  5. Profiter!

Entrez Crowdin . Crowdin est une solution cloud qui rationalise la gestion de la localisation pour votre équipe. Cest un outil pour gérer vos chaînes, embaucher des traducteurs et vous assurer que les traductions sont exactes et dans le contexte de votre application.

Dans cet article, je vais vous expliquer comment intégrer votre dépôt GitHub avec Crowdin pour télécharger automatiquement de nouvelles chaînes pour les traductions et comment créer automatiquement une Pull Request (PR) lorsque vos traductions sont prêtes.

Lorsque vous utilisez FBT, vous pouvez extraire toutes les chaînes de votre code source en exécutant deux scripts simples:

  1. fbt-manifest: Ce script trouvera tous les fichiers source contenant des appels fbt() ou

  2. fbt-collect: Ce script reçoit lentrée du script fbt-manifest, parcourez tous les fichiers quil contient et extrayez les chaînes et la description dans un fichier séparé, appelons-le .source\_strings.json

À ce stade, vous devez indiquer à Crowdin où se trouve votre fichier .source\_strings.json, il sera alors lu à partir de celui-ci selon un calendrier que vous avez défini, ajoutez ces chaînes à la plate-forme et alertez les traducteurs sur les nouvelles chaînes prêtes à être traduites.

Étapes pour intégrer Crowdin à votre Repo GitHub

  1. Intégrez votre référentiel GitHub avec Crowdin : cela permettra Crowdin à r lisez votre repo, puis soumettez les PR pour examen. Remarque: Si vous nutilisez pas GitHub, veuillez consulter autres intégrations Crowdin
  2. Créez un fichier de configuration crowdin.yml à la racine de votre projet. Voici où vous indiquerez à Crowdin où récupérer les chaînes source et où placer les traductions une fois quelles sont entrées. Un exemple du contenu du fichier ci-dessous:

files:
- source: /i18n/fbt/.source\_strings.json
translation: /i18n/fbt/translations/\%two\_letters\_code\%/translation.json

Pour plus dinformations sur ce fichier de configuration, consultez la documentation de Crowdin .

À ce stade, lorsque votre est mis à jour en exécutant les scripts de fbt, de nouvelles chaînes seront importées dans la plate-forme Crowdin en fonction du calendrier de synchronisation défini lors de son intégration avec GitHub.

Vous pouvez alors commander des services de traduction professionnels via la plate-forme ou choisissez dutiliser les traductions automatiques , dans les deux cas, lorsque de nouvelles traductions sont ajoutées, Crowdin créera un retour PR dans votre repo. À ce stade, vous pouvez accepter et fusionner manuellement les modifications ou créer une action GitHub pour accepter et fusionner automatiquement les modifications!

Conversion de la sortie Crowdin dans un format FBT lisible

La dernière étape avant vous pouvez utiliser les traductions pour exécuter le script fbt-translate. Ce script générera un fichier que la plate-forme FBT comprend et est le fichier que vous définissez éventuellement dans le code.

fbt-translate :

"translate-fbts": "fbt-translate --translations translations/*.json --jenkins > src/translatedFbts.json"

Utilisation dans React :

init({
translations: require("../translatedFbts.json"),
hooks: {
getViewerContext: () => viewerContext,
},
});

Utilisation dans React Native:

  • Pour React Native / Android nous devons convertir la sortie du script fbt-translate en un fichier de ressources de chaîne Android. Un script vous aidera dans cette étape:

"generate-android-fbt": "babel-node i18n/scripts/generate-android-localizables-executor.js"

Après avoir exécuté cela, vous êtes prêt à exécuter votre application Android.

  • Pour React Native / iOS, nous devons convertir la sortie de fbt-translate script dans un fichier de ressources de chaîne iOS .Il ny a pas de script pour y parvenir mais nous sommes toujours ouverts aux contributions 🙂

Réflexions finales

À ce stade, vous devriez être en mesure dextraire des chaînes de votre application, automatiquement les télécharger sur Crowdin et obtenir un PR lorsque les traductions sont prêtes. Comme vous lavez peut-être remarqué, quelques étapes de ce processus sont manuelles. Quelques suggestions:

Créez des actions GitHub, des étapes CircleCI (ou tout ce que vous utilisez pour CI / CD) à exécuter:

  • fbt-manifest et fbt-collect chaque fois que vous fusionnez un PR
  • Fusion automatique des PR créés par Crowdin
  • Exécution fbt-translate après la fusion des RP Crowdin
  • Pour Android, exécution du generate-android-localizables-executor.js après le fbt-translate script

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *