Implementing globalization in a mobile application

1. Introduction
In this tutorial, we will describe the implementation of globalization in a hybrid mobile application, developed with Angularjs for Android. We will use the Cordova API to do this.

The main goal is to adapt the content of the screens of our mobile application according to the language (English or French for example) of use of the phone.

2. Prerequisite
We will not talk about creating an application with Phonegap, which is the prerequisite for understanding this tutorial.

We need an application developed under Angularjs and previously created with the Framework Phone gap and a text editor such as Notepad ++.

The method we intend to use is to integrate a Phonegap globalization plugin.

3. Let’s talk about Cordova
The Cordova Globalization API provides globalization capabilities that reflect existing JavaScript globalization features, if possible, without duplicating functions already present in JavaScript. The focus of the Cordova Globalization API is on the analysis and formatting of culturally sensitive data. The Cordova API uses the native features of the underlying operating system, if possible, rather than recreating these functions in JavaScript.

The Cordova Globalization API uses the client locale and all default values ​​are ignored. This design greatly simplifies the use of the globalization API while providing robust support. It is important to note that although all interfaces remain constant across devices that support Cordova, results may vary by device.

4. How to do?

4.1. Integration of the Cordova globalization plugin
The plugin sources are available on git ( https://github.com/apache/cordova-plugin-globalization ). Download and install them in your project as shown in the figure below.

Figure 01: Installing Cordova

Once this is done, you must now reference the plugin in the application. Insert the code below into AndroidManifest.xml.

   
And in the   res / xml / config.xml   file insert this one:
   
If you have executed the previous directives well, you have successfully integrated the globalization plugin into your application. It remains now to use the functions of this plugin to recover the language currently used in the phone and whether it is French, English or other, we will adapt the content of our application.
 4.2. Recovering the language used by the phone 
It is important to note that the phone must be  ready  (close to use) before using the plugin.

The script below allows us to recover the language in a Controller or Service (See Angularjs Application Architecture).
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    navigator.globalization.getPreferredLanguage(
        function (language) {
            data.language =  language.value;
        },
        function () {
            data.language = 'Error getting language';
        }
    );
}

The  navigator.globalization.getPreferredLanguage  function allows us to retrieve the language of the phone. It takes in parameter two functions of which one with a parameter (language) and another without parameter. In line 5, we store the phone language in the  data.language variable.  The language is in ISO format ( en-US  for French in France and  en.US  for US English).

In the rest of our application, we will just have to recover the current language used by the phone thanks to the variable  data.language .

Now that we have the language, how do we proceed to adapt the content of our application?

 4.3. Using Angularjs to organize and display the contents of our application. 

Angularjs -translate is a module of angularjs that will allow us to manage the language of the application. It can be downloaded from  http://angular-translate.github.io/ .

To insert it in our application, it will be enough to load JavaScript files in our application thanks to the instructions below. The involved files are available in previously downloaded sources.
<script scr="js/angular-translate.js"></script>
<script scr="js/filters/translate.js"></script>

We must then integrate the Angularjs-translate module via the initialization of the module of our application as follows:
var app = angular.module('ngMap', ['onsen.directives', pascalprecht.translate','angularify.semantic.accordion']

In the Controller or service where we get the language, we can insert the following code:
app.config(function ($translateProvider) {
	$translateProvider.translations('en', {
		TITLE: 'Hello',
		FOO: 'This is a paragraph.',
		BUTTON_LANG_EN: 'english',
		BUTTON_LANG_DE: 'german'
	});
	$translateProvider.translations('de', {
		TITLE: 'Hallo',
		FOO: 'Dies ist ein Paragraph.',
		BUTTON_LANG_EN: 'english',
		BUTTON_LANG_DE: 'deutsch'
	});

	// La langue qu’on passe en paramètre est celle de notre variable //data.language
	$translateProvider.preferredLanguage('en');
});

At this level, the integration of globalization is over.
To use it, it will be done in binding (angularjs) with as content the key of the language (the expression to translate).
  {{TITLE | translate}}  

 5. Conclusion 

To summarize, it was question of setting up globalization in a phonegap application, through the integration of the plugin globalization phonegap and module angularjs-translate. In a future tutorial, we will see how to give the user the opportunity to change languages at any time.