Cómo traducir aplicaciones hechas con Phonegap

Jquery I18n

En diversas ocasiones nos puede pasar que necesitemos traducir contenido que no nos venga de una llamada a una API que hayamos hecho. Textos que representen títulos o menús dinámicos que dependan del resultado de la dicha llamada. Para solucionar este inconveniente tenemos un Plugin de Jquery muy interesante y ligero llamado Jquery i18n, el cuál nos permite definir traducciones de cadenas dentro de ficheros que creemos previamente.
Explicaremos un ejemplo de cómo utilizarlo, sin olvidar que este tipo de plugins deben utilizarse en casos muy específicos, ya que un abuso de esto puede ocasionar que los ficheros sean muy pesados, y cada llamada al plugin resulte ineficiente, consiguiendo una mala experiencia de usuario, punto débil de Phonegap. También vale aclarar que este plugin también sirve para Webs móviles, que no dependen de Phonegap

Podrán ver una pequeña documentación en este enlace. Estos son los pasos a seguir:

  • Descarguen el fichero desde este enlace: Jquery i18n
  • Cargar el script de esta manera (recordar respetar las rutas):
  <script type="text/javascript" language="JavaScript" src="js/jquery.i18n.properties-min.js"></script>
  • Crear una carpeta llamada bundle, esto es opcional, pero lo recomiendo. En él irán los ficheros de traducción.
  • Cada fichero de traducción tendrá un nombre que lo identifique. Por ejemplo pongamos por defecto Messages.properties, Messages_es.properties y Messages_en.properties
  • Pondremos las cadenas del siguiente modo

Messages.properties

  msg_hello = Hello
  msg_world = World

Messages_es.properties

  msg_hello = Hola
  msg_world = Mundo

Messages_en.properties

  msg_hello = Hello
  msg_world = World
  • Inicializamos el plugin de la siguiente manera:
jQuery.i18n.properties({
    name:'Messages', //Nombre del fichero
    path:'bundle/', //Carpeta donde la incluimos
    mode:'both', 
    language:'es',  //Lenguaje, hablaremos del el abajo
    callback: function() {
        //Callback, podemos ejecutar código luego de inicializar el plugin.
    }
});
  • Si inicializamos de esta manera el plugin, nos cargarán siempre las traducciones en Español. Lo que nos interesa es que sea algo dinámico. Suponiendo que estamos trabajando con Phonegap, tenemos que detectar el idioma del teléfono. Lo haremos de la siguiente manera:
if ( navigator && navigator.userAgent && (lang = navigator.userAgent.match(/android.*\W(\w\w)-(\w\w)\W/i))) {
    lang = lang[1];
}

if (!lang && navigator) {
    if (navigator.language) {
            lang = navigator.language;
    } else if (navigator.browserLanguage) {
            lang = navigator.browserLanguage;
    } else if (navigator.systemLanguage) {
            lang = navigator.systemLanguage;
    } else if (navigator.userLanguage) {
            lang = navigator.userLanguage;
    }
    lang = lang.substr(0, 2);
}
//En la variable lang tendremos el idioma

  • Para finalizar, escribimos de manera final la inicialización del Plugin
jQuery.i18n.properties({
    name:'Messages',
    path:'bundle/',
    mode:'both', 
    language: lang, 
    callback: function() {
        console.log(msg_hello);
    }
});

Si miramos la consola, debería mostrarse el valor de msg_hello dependiendo del idioma que tenga puesto el teléfono por defecto.