Traduire son app avec OneSky

Ça fait bien trop longtemps que je n'ai pas écrit ici. Je suis au chômage, du coup, je n'ai plus une minute à moi. Je travaille entre autre sur un projet de startup qui me prend beaucoup de temps en plus de me faire découvrir beaucoup de choses puisque je dois tout gérer coté technique. Aujourd'hui, je vais vous parler de ce que j'ai mis en place pour gérer les traductions de texte.

OneSkyApp

OneSkyApp est une application SaaS que j'ai utilisé précédemment chez Tigerlily et qui était l'un des meilleurs outils de gestion de langues que j'avais pu utiliser.

OneSky propose deux services. Le premier est un outil de gestion des clés de locales très performant et multi utilisateur. OneSky permet de facilement récupérer toutes les clés de locales de vos projets en les gardant groupées par nom de fichier d'origine, et de proposer de les modifier grâce à une interface pratique et des outils de travail collaboratif. Pour chaque clé de locale, vous retrouverez la traduction de base, dans la langue de départ, des éléments de contexte pour faciliter la traduction, une section de commentaires pour discuter entre collaborateurs…
Le second service met à votre disposition des traducteurs pour vous aider à traduire votre app. Vous pouvez choisir de compter sur la communauté ou de faire appel à des professionnels, selon vos besoins et votre budget.

Et le plus cool dans tout ça, c'est que l'outil de gestion des traductions est gratuit jusqu'à 5 collaborateurs. Ça devient donc un outil très intéressant rien pour cette partie là. Voyons voir comment on peut intégrer ça dans notre application.

API

OneSky propose une API et des librairies dans plusieurs langages permettant de faciliter son utilisation. Mon projet étant en nodejs, j'ai choisi la lib onesky-utils. Celle-ci est capable de récupérer la dernière version d'un fichier de locales et de poster une version à jour. Il ne suffit que d'un petit script pour orchestrer tout ça et d'une commande npm pour lancer la récupération ou la synchronisation :

const onesky = require('onesky-utils');  
const fs = require('fs');

const API_KEY = 'VOTRE_CLÉ',  
  SECRET_KEY = 'VOTRE_SECRET',
  PROJECT_ID = '1234';

const LOCALES_PATH = `${__dirname}/le/path/vers/votre/dosser/de/locales/`;

const LANGS = ['en', 'fr'/*, 'de', 'etc'*/],  
  FILES = ['translations.json'/*, 'autres.json'*/];

function loadAll() {  
  for (var lang of LANGS) {
    for (var file of FILES) {
      loadFile(file, lang);
    }
  }
}

function loadFile(file, lang) {  
  onesky.getFile({
    secret: SECRET_KEY,
    apiKey: API_KEY,
    projectId: PROJECT_ID,
    language: lang,
    fileName: file
  })
  .then(content => writeFile(file, lang, content))
  .catch(error => console.error(error));
}

function writeFile(file, lang, content) {  
  if (!fs.existsSync(`${LOCALES_PATH}${lang}`)) {
    fs.mkdirSync(`${LOCALES_PATH}${lang}`);
  }
  fs.writeFileSync(`${LOCALES_PATH}${lang}/${file}`, content, 'utf-8');
}

function sendAll() {  
  for (var lang of LANGS) {
    for (var file of FILES) {
      postFile(file, lang);
    }
  }
}

function postFile(file, lang) {  
  const translations = fs.readFileSync(`${LOCALES_PATH}/${lang}/${file}`).toString();

  onesky.postFile({
    secret: SECRET_KEY,
    apiKey: API_KEY,
    projectId: PROJECT_ID,
    language: lang,
    fileName: file,
    format: 'HIERARCHICAL_JSON',
    content: translations,
    keepStrings: false
  })
  .then(() => console.log(`${file} - ${lang} sent`))
  .catch(error => console.error(error));
}

module.exports = {  
  load: loadAll,
  send: sendAll
};

La méthode loadAll va chercher pour chaque langue et chaque fichier de langue la dernière version sur onesky et écraser le fichier en local.

La méthode sendAll va récupérer votre fichier de langue en local et l'envoyer à onesky. Ce process est très intéressant, car il permettra aux devs d'ajouter de nouvelles clés directement dans le fichier, et donc les utiliser dans leur environnement de dev sans avoir à se rendre au préalable sur OneSky.

Il faut bien évidemment exclure le contenu du dossier de langues de votre dépôt git : il n'est nullement nécessaire de versionner ces fichiers puisqu'ils seront générés lors du deploy (commande à ajouter au npm install pour les projets node).

Et au final, la mise à jour des traductions en production est facilitée puisqu'elle ne nécessitera plus de déploiement complet, mais uniquement de lancer la commande de récupération des fichiers et un restart de l'app (si nécessaire). Finie la grosse mise en prod pour corriger une typo !

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu