Lokapp - An open-source translation management platform

Ghislain Fresnais

Publié le 4 mars 2022 - 6 min de lecture

🇺🇸 English Version - 🇫🇷 Version Française

🇺🇸 English

Lokapp, an open-source translation management platform for developers.

Project genesis

At Playmoweb, more and more projects need to be internationalized. Meaning the mobile or web applications we’re developing are supposed to be adapted according to the user’s language or culture. This adaptation obviously involves the translation of the interface, but also displaying dates, currencies, sometimes even images, in specific formats.

For projects targeting several platforms, for instance when developing both iOS and Android applications, many elements to be adapted are actually very similar. It’s especially true for translations. Indeed, interfaces or components may differ from one platform to another, but most of the time translations or wordings are the same on both applications.

From this observation, came to us the idea to try mutualizing this part. The main purpose being to have only one list of translations to deal with, and from this list, being able to generate the different files the developers need: .xml files for Android, .strings and .stringdict for iOS, .json for the web, …

Existing tools

At first, we tried various existing tools that could possibly do what we were looking for.

However, we ended up facing several issues, and never found the tool that perfectly suited us: limitations on the storable quantity of translations, high pricing, tools with too many unused features, no management of plurals, …

First step: spreadsheet

Not convinced with any existing tool, we started using a classic spreadsheet, in our case Google Sheet, letting us manage our lists of translations list in a collaborative way. Thus, each developer could add, edit or delete translations or languages.

Spreadsheet example
Spreadsheet example

We also wrote a script, linked to the spreadsheet, giving the developers the ability to easily export the translation files they needed.

Spreadsheet export menu
Spreadsheet export menu

Spreadsheet exported content iOS
Spreadsheet exported content iOS

Spreadsheet exported content Android
Spreadsheet exported content Android

Second step: Lokapp

Using Google Sheet has many advantages, such as the ability to work at the same time and with several people on the same document. It’s also very easy to use, especially for some of our customers that want to translate themselves all the content of the applications we develop for them.

However, guessing other developers may have the same needs we have, we wanted to do more than just share a script to use with Google Sheet. We also wanted to have more control over the ability to edit translations, to prevent translators from changing or deleting the translation’s keys, for instance. Moreover, the more projects we had, the more complicated the management of the scripts and spreadsheets was becoming.

That’s why we started developing the Lokapp application, a platform to help developers maintain their applications’ translations, export the required files, and also share the content to be translated.

An open-source project

Convinced that Lokapp can help other developers, and aware it’s still perfectible, we published it on Github as an open-source project.

Thus, anyone can help in its development and improvement, by suggesting modifications or directly adding new features or bugfixes.

Currently, the platform is divided into a back-end and a front-end.

The front-end is a Vue.js web application, consuming the API of the back-end. This API has been built with Nest, and interacts with the PostgreSQL database in order to manage the users, projects, languages and translations.

We also created a Dockerfile to easily build all the required images to deploy an instance of the application.

Github Lokapp.io Repositories
Github Lokapp.io Repositories

Lokapp - List of projects
Lokapp - List of projects

Lokapp - List of translations
Lokapp - List of translations

How to use Lokapp

As Lokapp is currently only available as open-source and not as a SaaS application, it mainly aims at developers. You can still give it a try on the demo application we published: https://demo.lokapp.io.

To locally start the API:

  • Clone the repository: git clone https://github.com/lokappio/lokapp-api.git
  • Install all required packages: npm install
  • Edit your environment variables (see here for more information)
  • Start your PostgreSQL database
  • Start the API: npm run start:dev

To locally start the web app:

  • Clone the repository: git clone https://github.com/lokappio/lokapp-client.git
  • Install all required packages: npm install
  • Edit your environment variables
  • Start the app: npm run serve

To deploy your own application, you can also use our Docker Compose, which will help build all required images 🚀

What’s next?

Here at Playmoweb, we already use Lokapp for our projects. So we will keep improving it, fixing any reported bugs, and adding new features.

If you want to help us in the project, it’s totally possible: that’s what open-source is for! Don’t hesitate to create an issue on Github to report a bug, or even to open a new pull-request to suggest new features.

Feel free to add a star ⭐️ on our repositories (here and here) if you like the project.

🇫🇷 Français

Lokapp, un outil open-source de gestion de traductions pour les développeurs.

Genèse du projet

Chez Playmoweb, bon nombre de nos projets ont besoin de s’internationaliser. Entendez par là que les applications web ou mobiles que nous développons sont supposées s’adapter à la langue et la culture de l’utilisateur. Cette adaptation passe bien évidemment par la traduction de l’interface de l’application, mais aussi par un affichage spécifique des dates, des devises, parfois des images, etc.

Dans le cas de projets visant plusieurs plateformes, par exemple lors du développement d’une application iOS et d’une application Android, beaucoup d’éléments à adapter se retrouvent finalement similaires. C’est notamment le cas des différentes traductions. En effet, les interfaces ou composants peuvent différer d’une plateforme à l’autre, mais la plupart du temps les traductions ou les formulations sont quant à elles identiques sur les deux applications.

De ce constat, nous avons eu l’idée au sein de l’agence d’essayer de mutualiser cette partie. Le but étant de n’avoir qu’une seule liste de traductions à gérer, et, à partir de celle-ci, de pouvoir générer les différents fichiers nécessaires : fichiers .xml pour Android, .strings et .stringdict pour iOS, .json pour le web, etc.

Outils existants

Dans un premier temps, nous avons testé plusieurs outils existants permettant de réaliser ce genre de choses.

Nous nous sommes cependant heurtés à plusieurs problématiques, et n’avons jamais réussi à trouver l’outil qui nous convenait parfaitement : limitations sur le nombre de traductions stockées, tarifications élevées, services proposant trop de fonctionnalités inexploitées, absence de gestion des pluriels, …

Première étape : le tableur

N’ayant été pleinement convaincus par aucun outil existant, nous nous sommes penchés sur l’utilisation d’un tableur, en l’occurrence Google Sheet, nous permettant ainsi de gérer la liste de nos traductions de manière collaborative. Chaque développeur était donc en mesure d’ajouter, d’éditer ou de supprimer des traductions ou de nouvelles langues.

Exemple tableur
Exemple tableur

Nous avons également créé un script lié au tableur, permettant aux développeurs d’exporter facilement les fichiers de traductions dont ils ont besoin.

Tableur - Menu exportation
Tableur - Menu exportation

Tableur - Contenu iOS exporté
Tableur - Contenu iOS exporté

Tableur - Contenu Android exporté
Tableur - Contenu Android exporté

Seconde étape : l’application Lokapp

L’utilisation de Google Sheet possède de nombreux avantages. Notamment la possibilité de travailler en même temps et à plusieurs sur le même document, mais aussi la simplicité de prise en main pour certains de nos clients qui souhaitent traduire eux-mêmes les différents textes contenus dans les applications que nous développons pour eux.

Cependant, supposant que d’autres développeurs ont, eux aussi, les mêmes besoins que nous, nous voulions faire plus que de partager un simple script à utiliser avec Google Sheet. Nous souhaitions également avoir plus de contrôle quant aux droits de modifications des traductions, pour par exemple empêcher un traducteur de modifier les clés de traductions. De plus, avec la multiplication des projets, la gestion des différents scripts et feuilles Google Sheet devenait de plus en plus compliquée.

C’est à partir de ce moment qu’a commencé le développement de l’application Lokapp, une plateforme ayant vocation à aider les développeurs à maintenir les traductions présentes dans leurs applications, à exporter les fichiers nécessaires, et aussi à partager les contenus à faire traduire.

Un projet open-source

Persuadés que Lokapp peut aider d’autres développeurs et étant conscients que l’outil est encore largement perfectible, nous l’avons rendu disponible en open-source sur Github.

Ainsi, n’importe qui peut aider à son développement et à son amélioration, que ce soit en suggérant des modifications ou en ajoutant directement de nouvelles fonctionnalités ou correctifs.

Actuellement, la plateforme est divisée en 2 parties distinctes :

Le front-end est une application web développée avec le framework Vue.js et qui consomme l’API de la partie serveur. Cette dernière a été développée avec le framework Nest et permet d’interagir avec la base de données PostgreSQL afin de gérer les différents utilisateurs, projets, langages et traductions.

Nous avons également créé un Dockerfile permettant de construire facilement toutes les images nécessaires pour déployer une instance de l’application.

Dépôts Github de l'organisation Lokapp.io
Dépôts Github de l'organisation Lokapp.io

Lokapp - Liste des projets
Lokapp - Liste des projets

Lokapp - Liste des traductions
Lokapp - Liste des traductions

Comment utiliser Lokapp

Lokapp étant pour l’instant disponible seulement en open-source et non en tant qu’application en mode SaaS, elle s’adresse plus particulièrement aux développeurs. Vous pouvez tout de même la tester sur l’application de démonstration que nous avons publiée : https://demo.lokapp.io.

Pour lancer la partie serveur en local, et notamment l’API :

  • Récupérer le contenu du dépôt : git clone https://github.com/lokappio/lokapp-api.git
  • Installer les différents paquets : npm install
  • Modifier les différentes variables d’environnement (voir ici pour plus d’informations)
  • Lancer la base de données PostgreSQL locale
  • Démarrer l’API : npm run start:dev

Pour lancer l’application web :

  • Récupérer le contenu du dépôt : git clone https://github.com/lokappio/lokapp-client.git
  • Installer les différents paquets : npm install
  • Modifier les différentes variables d’environnement
  • Lancer l’application en local : npm run serve

Pour déployer votre propre application, vous pouvez aussi vous aider du Docker Compose disponible ici, qui fera en sorte de construire toutes les images nécessaires 🚀

La suite ?

Chez Playmoweb, nous utilisons déjà Lokapp pour nos différents projets. Nous continuerons donc à l’améliorer, à corriger les éventuels bugs remontés, et à ajouter de nouvelles fonctionnalités.

Si vous aussi vous souhaitez participer au projet, c’est tout à fait possible : l’open-source est là pour ça. N’hésitez pas à créer une issue sur Github pour remonter un bug ou même à ouvrir une nouvelle pull-request pour proposer une nouvelle fonctionnalité.

Le projet vous plait ? Rendez-vous ici et pour mettre une étoile ⭐️ sur nos dépôts.