Create a tailor-made translation tool for a web app or mobile

We are a web agency. By necessity, our customers' projects — just like ours — should generally include translation management.

As simple as that sounds, it means that we have 2 options for managing translations: doing it in-house or using a third-party service.

Of course, having personalized tools, tested and mastered by our team is indeed the best solution and can allow us to save a lot in the long term!

That's exactly what we've been looking at recently at Coteries. It is also in this spirit that we decided to regain control of our translation management, which was then hosted for some projects on a rather expensive third-party solution.

‍

Define the goals of an ideal tool for managing translations

The brief was pretty simple:

1. We needed a solid common base for translations in order to avoid wasting time with such trivial tasks in the future.
2. We needed all of our developers are in a position to maintain this tool and improve it if necessary.
3. We wanted the translations to be easily modified by our designers and our marketing specialists.
4. We wanted the translations in the projects to always be up to date.
5. We wanted integration into projects to be easy.
6. We wanted the tool to not cost an arm and a leg.

With the establishment of clear specifications, we were then able to choose the right direction to take for a tailor-made solution.

‍

Choosing a simple option to manage translations

We use the Google suite as a collaborative work platform. So we are used to using Google Sheets on a daily basis. It seemed logical and pragmatic to use Google Sheets as the basis for a common translation management tool.

‍

Manage translations effectively thanks to an appropriate format

Next, we needed an optimal format for regular use.

Easy: we decide to show the translation keys in column 1 and all the languages of the web or mobile application in a header row.

This matrix can then be easily analyzed in a JSON tree that can be used in translation files.

Since translations are mostly used in the backend, it made sense to create a standalone node tool that could be easily imported as a devDependency.

‍

Building a simple “self-hosted” translation command

To build the ideal tool, we've broken down the task as follows:

1. Retrieve an Excel grid from the Google Sheet file using a Google service account
2. Parse the grid in a JSON tree (language -> key -> value)
3. Serialize the grid in the desired format (JSON for web, .xml and .strings for mobile applications)
4. BONUS : report missing translation keys

Since we wanted the tool to be easily available for all projects, it needed to be accessible with a simple command. So we called her a “translator.”

The tool still needed to be guided in one way or another: what is the Google Sheet? In which sheet? What is the output format and directory?

Then a translator.json should be added to the target project, containing this information. It would be read by the “translator” command and guide its execution.

Now we can run it at the same time as any npm task, and it will always pull the translations at the same time as this task:

‍

package.json
{
...
“scripts”: {
...
“start”: “npx concurrently\” react-scripts start\”\” npm translate\”,
“translate”: “translator”
}
...
}

‍

Building custom development solutions

And that's it! Except for development time, this tool is free. You will have a personalized collaboration tool to easily work on your translations, and the translations will always be up to date.

It is available for free and open access here: https://github.com/coteries/translator

This tool is yours and can be easily improved or extended to use additional tools in addition, such as Google Translate or Deepl, directly in your spreadsheet.

You can also change any output type or format without limitations to have what you prefer right away.

Contact us if you need a specific custom tool to develop!