Implémentation de la globalisation dans une application mobile

Pour une application mobile hybride développé sous Angularjs, avec le plugin Cordova il est possible d'adapter le contenu de l'application avec fonction de la langue utiliser par le smartphone ou la tablette.
Accueil > Blog > Development > Mobile development > Implémentation de la globalisation dans une application mobile

1.    Introduction

Dans ce tutorial, nous allons décrire l’implémentation de la globalisation dans une application mobile hybride, développée avec Angularjs pour Androïd. Nous allons utliser l’API Cordova pour le faire.

L’objectif principal est d’adapter le contenu des écrans de notre application mobile  suivant la langue (anglais ou français par exemple) d’utilisation du téléphone.

2.    Prérequis

Nous n’allons pas parler de la création d’une application avec Phonegap, qui constitue les prérequis utiles pour la compréhension de ce tutorial.

Nous avons besoin d’une application développée sous Angularjs et préalablement crée avec le Framework Phone gap et d’un éditeur de texte tel que Notepad++.

La méthode que nous comptons utilisées consiste en l’intégration d’un plugin de globalisation de Phonegap.

3.    Parlons un peu de Cordova

L’API de globalisation Cordova fournit des capacités de globalisation qui reflètent les fonctions de globalisation JavaScript existantes, si possible, sans dupliquer les fonctions déjà présentes dans le JavaScript. L’accent de l’API de globalisation Cordova est fait sur ​​l’analyse et le formatage des données sensibles sur le plan culturel. L’API Cordova utilise les fonctions natives du système d’exploitation sous-jacent, si possible, plutôt que de recréer ces fonctions en JavaScript.

L’API de globalisation Cordova utilise les paramètres régionaux du client et toutes les valeurs par défaut sont ignorées. Cette conception simplifie grandement l’utilisation de l’API de globalisation tout en fournissant un support robuste. Il est important de noter que, bien que l’ensemble des interfaces reste constante à travers les dispositifs qui soutiennent Cordova, les résultats peuvent varier selon les appareils.

4.    Comment faire ?

4.1.       Intégration du plugin de globalisation Cordova

Les sources du plugin sont disponibles sur git (https://github.com/apache/cordova-plugin-globalization ). Télécharger et installer les dans votre projet selon les indications de la figure ci-dessous.

Figure 01: Installation de Cordova

Une fois que cela est fait, il faut maintenant référencer le  plugin dans l’application. Insérer le code ci-dessous dans le fichier AndroidManifest.xml.

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

Et dans le fichier res/xml/config.xml insérer celui ci :

<feature name="Globalization" >
	<param name="android-package"
	value="org.apache.cordova.globalization.Globalization" />
</feature>

Si vous avez bien exécuté les précédentes directives alors, vous venez d’intégrer avec succès le plugin de globalisation dans votre application. Il reste maintenant à utiliser les fonctions de ce plugin pour récupérer la langue actuellement utilisé dans le téléphone et selon qu’elle soit française, anglaise ou autres, on adaptera le contenu de notre application.

4.2.       Récupération de la langue utilisée par le téléphone

Il est important de noter que le téléphone doit être ready  (près à l’utilisation) avant d’utiliser le plugin.

Le script ci-dessous nous permet de récupérer la langue dans un Controller ou Service (Voir l’architecture d’application Angularjs).

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    navigator.globalization.getPreferredLanguage(
        function (language) {
            data.language =  language.value;
        },
        function () {
            data.language = 'Error getting language';
        }
    );
}

La fonction navigator.globalization.getPreferredLanguage nous permet de récupérer la langue du téléphone. Elle prend en paramètre deux fonctions dont une avec un  paramètre (language) et une autre sans paramètre. A la ligne 5, nous stockons la langue du téléphone dans la variable data.language. La langue est au format ISO (fr-FR pour le français de France et en.USpour l’anglais des US).

Dans la suite de notre de application, nous aurons juste à récupérer la langue courante utilisée par le téléphone grâce à la variable data.language.

Maintenant que nous avons la langue, comment on procède pour adapter le contenu de notre application ?

4.3.       Utilisation d’Angularjs  pour organiser et afficher les contenus de notre application.

Angularjs –translate  est un module d’angularjs  qui nous permettra de gérer la langue de l’application. Il est téléchargeable à l’adresse http://angular-translate.github.io/ .

Pour l’insérer dans notre application, il suffira de  charger des fichiers JavaScript dans notre application grâce aux instructions ci-dessous. Les fichiers impliqués sont disponibles dans les sources précédemment téléchargées.

<script scr="js/angular-translate.js"></script>
<script scr="js/filters/translate.js"></script>

Il faut ensuite intégrer le module Angularjs-translate via l’initialisation du module de notre application comme suit :

var app = angular.module('ngMap', ['onsen.directives', pascalprecht.translate','angularify.semantic.accordion']

Dans le Controller ou service où nous récupérons la langue, nous pouvons insérer le code suivant :

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');
});

Dans les insertions JavaScripts précédentes ajouté le fichier

<script scr="js/filters/translate.js"></script>

qui est en fait un filtre qui aura le contenu ci-dessous :

angular.module('app.filters.translate', ['ngTranslate'])
	.filter('translate', ['$translate', function ($translate) {
	return function (key) {
		return $translate[key] || key;
	};
}]);

A ce niveau, l’intégration de la globalisation est terminé.

Pour l’utiliser, il faudra le faire in binding (angularjs) avec comme contenu la clé de la langue (l’expression à traduire).

{{ TITLE  | translate}}

5.    Conclusion

Pour résumer, il était question de mettre  en place la globalisation dans une application phonegap, en passant par  l’intégration du plugin globalization phonegap  et le module angularjs-translate. Dans un tutoriel avenir, nous allons voir comment donner la possibilité à l’usager de changer de langue à tout moment.

Implémentation de la globalisation dans une application mobile par Cet article a 414 Commentaire(s) 1.    Introduction Dans ce tutorial, nous allons décrire l’implémentation de la globalisation dans une application mobile hybride, développée avec Angularjs pour Androïd. Nous allons utliser l’API Cordova pour le faire. L’objectif principal est d’adapter le contenu des écrans de no

Donnez votre avis !

Combien font plus ?