**Read this article in English here
El pasado jueves tuve la ocasión de asistir a una mesa redonda organizada por el grupo MSCoders relacionada con la localización de aplicaciones en entornos web.
Tras el evento, uno de los temas que más llamó mi atención fue la localización en la parte Javascript, y como tenía una aplicación ya en la Windows Store que usaba ese lenguaje, me pareció interesante intentar localizarla para poder ofrecerla en otros mercados.
Detectando el idioma del sistema
Para una aplicación Windows 8 el primer paso es detectar el idioma del sistema, y eso lo podemos hacer de la siguiente manera:
var culture = Windows.System.UserProfile.GlobalizationPreferences.languages[0]; var language = culture.substr(0, 2);
En este caso tomaremos la lista de lenguajes preferentes, y de esa lista obtendremos el primer elemento. Para poder cambiar el orden de los elementos y probar los diferentes lenguajes, podemos cambiarlo en el panel de control:
El resultado se muestra en formato cultura, es decir, español de España se mostraría como es-ES, e inglés de EEUU se mostraría como en-US. Para nuestro ejemplo inicial, solamente necesitamos el idioma, con lo cual hacemos un substring y obtenemos en o es respectivamente.
Agregando angular-translate
Angular-translate es un módulo de angular que nos permite definir de manera las claves y los valores para cada lenguaje, y realizar la traducción en función de la configuración. Para instalarlo, si no contamos con gestores de paquetes como bower, es tan sencillo como descargar el último paquete de github y agregarlo a nuestro proyecto.
Una vez instalado, tendremos que agregarlo a la configuración de nuestra app, en el apartado en el que definimos módulos externos en este caso pascalprecht.translate:
var karmacracyApp = angular.module('karmacracyApp', [
'ngRoute',
'karmacracyControllers',
'pascalprecht.translate'
]);
Finalmente, configuramos los diferentes idiomas usando el código que hemos visto anteriormente para seleccionar un idioma acorde con el sistema operativo:
karmacracyApp.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
'LOGIN': 'Log in',
'LOGIN_USERNAME': 'User name',
'LOGIN_PASSWORD': 'Password'
});
$translateProvider.translations('es', {
'LOGIN': 'Inicia sesión',
'LOGIN_USERNAME': 'Nombre de usuario',
'LOGIN_PASSWORD': 'Contraseña'
});
var culture = Windows.System.UserProfile.GlobalizationPreferences.languages[0];
var language = culture.substr(0, 2);
$translateProvider.preferredLanguage(language).fallbackLanguage('en');
}]);
Además, en caso de que el sistema tenga un idioma no controlado, estableceremos el inglés por defecto.
Uso
Para acceder a nuestras claves no necesitamos realizar ninguna configuración adicional en nuestros controladores, solamente necesitamos modificar nuestras vistas para que accedan a la información localizada:
<span class="loginMessage">{{ 'LOGIN' | translate }}</span>
En caso de que tengamos el idioma establecido a inglés (o a cualquier idioma no controlado), se mostrará el siguiente resultado:
En caso de que el idioma esté establecido a español, el resultado será diferente:
Como se ve, es una manera sencilla de poder localizar nuestras aplicaciones en javsacript para Windows Store
Conclusiones y pasos adicionales
Angular-translate proporciona una manera sencilla de localizar textos en nuestras vistas, por otra parte, Windows proporciona, a través de su API, la información que necesitamos para saber en qué idioma mostrar una aplicación.
Un paso adicional sería localizar controles winjs como los botones, que funcionan de manera diferente. Por otra parte se podría sacar un fichero de traducciones fuera de la configuración en formato json, útil si queremos distribuir esos ficheros para su procesamiento.
Enlaces adicionales
- Angular translate
- Get Language of WinRT app ejemplos en C# pero sirvieron de guía
rlbisbe @ dev 