Using Google Translator to Internationalize your code

While developing a software, it is often desired that it would be available in multiple languages so that more people can use it. Some standard coding practices include storing messages visible to the user in a JSON or an XML file in English, and have it translated to multiple languages and save it as JSON or XML files with the corresponding language name. In this blog post, I am going to mock a bunch of messages in JSON format and use Google Translator to generate a JSON string with all messages translated. We shall be using Google Translator page and the developer tools,  and not the APIs.

As stated above, the first step is to create the mock JSON string having messages in English. I think the following would be good enough to represent the same loaded into a variable.

var en_json = {

"edit": "edit",

"open": "open",

"message_continue": "Do you wish to continue",

"message_error": "Error performing the action"

}

Next thing to do is open up Google Translator page and open up the JavaScript console in the Developer Tools. Upon inspecting the elements, I found that there is only one textarea tag in the page and that belongs to the input. We can get that loaded into a variable using the following JavaScript command.

var txtarea = document.getElementsByTagName('textarea')[0];

Similarly, the place where translated results are shown has a class name 'results-container'. Therefore, we can load that into a variable using the following JavaScript command.

var result = document.getElementsByClassName('results-container')[0];

We can test typing into the textarea and vieweing the result as shown below. By the way, I have German chosen as the results language.

txtarea.value = "Does it work?"

console.log(result.innerText) 

"Funktioniert es?

 "

It's working, Great!  Now all we need to do is iterate over all the messages in en_json and create a new variable named de_json. The following code snippet demonstrates the same.

var timeRequiredToTranslate = 5000;

var de_json = {};

var i = 0, j = 0;

var keys = [];

for (var key in en_json) {

    keys.push(key);

    setTimeout(function(){

        txtarea.value = en_json[keys[j]];

    }, (2*i - 1) * timeRequiredToTranslate); // Odd intervals

    

    setTimeout(function(){

        de_json[keys[j]] = result.innerText;

        j++;

    }, (2*i) * timeRequiredToTranslate); // Even intervals

    i++;

}

 

Although we named the output variable as 'de_json', its not stringified into JSON yet. To do that, run the following command.

console.log(JSON.stringify(de_json)) 

"{"edit":"bearbeiten\n ","open":"öffnen\n ","message_continue":"Möchten Sie fortfahren\n ","message_error":"Fehler beim Ausführen der Aktion\n "}"

It is not very difficult to write an automated process around this if you are actually thinking about building a Makefile out of this method. There may be certain optimizations that can be done to reduce the amount of time it takes to run the script. I have not tried it, but, perhaps event listeners on 'result' DIV could be used to know when the output would come up, store it and immediately edit the 'txtarea'. That way you can eliminate the setTimeout with definite time interval.