Adding i18n to a Cordova App

i18n (Internationalization) in applications roughly means adding support for translations and other languages.  In this blog post I will talk you through a general approach to implementing i18n in Cordova Apps.  If your app isn’t open-source, move along, the 90s is on another website.

As Cordova apps are written in HTML/CSS/JS we can easily leverage existing web platforms and services to provide i18n at break-neck speeds.

TLDR Services/frameworks used:
* Translatewiki to provide translations
* Marcel’s html10n i18n implementation
* Handlebars for templating
* Etherpad implementation of detecting locale/language also written by Marcel

Implementation steps

* Ensure your app fulfills Translatewiki’s requirements (Open source etc)
* Talk to Translate / Internationalization team at Wikimedia foundation before creating Gerrit commit
* Gerrit commit to TranslateWiki adding support for your App.
* Include handlebars and html10n libraries in your app
* Modify your HTML putting markup in handlebar script tags
* Move your text strings into locales files.
* Include a handlebars html10n render helper
* Use the Etherpad implementation of detecting locale/language* Give someone at WMF access to commit to your Repo

Sit back and enjoy..

Once you have completed your implementation and it’s approved by the WMF the WMF translation team will translate all of your strings and commit them back to your repo. You might want to provide the WMF team with the ability to see each of your strings in situ in a browser, this means providing a mechanism to fake Cordova events..

Summary

This implementation is basically a straight copy of how we handle i18n in Etherpad, it’s pretty robust and clean to implement. All in all a complete refactor of the NFC Ring Control App while implementing i18n took about a week of full time commitment, well worth doing as now the larger community can provide translations which if I was to do hans solo would take months :)

Leave a Reply

Your email address will not be published. Required fields are marked *