Multidioma App

[omiras]

• En flexfrog se implementa algo similar a lo que queremos conseguir
• Queremos que la app se pueda traducir a varios idiomas
• Queremos tener un selector de idioma entre todos los idiomas posibles (inicialmente, solo inglés y español)
• Pensad que la idea final es que cualquiera pueda colaborar en nuestra app para poder traducirla . Fijaos en el proceso para añadir una traducción al español en este pull request de Github: https://github.com/thomaspark/flexboxfroggy/issues/8

Ejemplo:

[Andreu-G]

Mi idea inicial es crear un botón/texto en el footer, en el que puedas seleccionar el idioma, y después de seleccionarlo que se traduzca toda la página (Salvo el código. Es decir, que en japonés también sea myGrass.push('ladybug') y no myGrass.push('Tentōchū')). Se puede guardar esta configuración en localStorage para mantenerlo la próxima vez que visite la página.

He estado mirando qué opciones podríamos tener que sean razonables y que no se tarde mucho en implementar teniendo en cuenta el código del proyecto, el tiempo que tenemos, etc.

Tras darle muchas vueltas, he desechado la idea de usar algún paquete NPM porque la mayoría devuelven JSONs, hay que pasarlos a objeto para coger los valores, etc. En resúmen, muy lioso y tedioso.

i18next, que es un "framework de internacionalización", lo podemos usar en el propio html como script. A parte de ser bastante flexible, no necesitamos utilizar APIs ni esperar respuesta de ningún servidor para traducirlo, salvo por supuesto la petición para recibir el html.

Un ejemplo vale más que mil palabras, así que os dejo un jsfiddle como ejemplo de lo que podríamos hacer

Para los que no lo conozcáis, JSFiddle permite crear código HTML/CSS/JS y ejecutarlo en una pequeña ventana, así no tenéis que crear un proyecto en vscode ni nada por el estilo.

En el ejemplo, si observáis el código JS, abajo del todo del archivo javascript hay 2 opciones comentadas: lng: 'ja-JP' y lng: 'en-US'.

Descomentad la que queráis (siempre tiene que haber sólo una línea) y al ejecutarlo podréis ver en la ventana cómo se traduce automáticamente todo el texto.

A ver qué opináis los demás, pero lo veo bastante bien para nuestro proyecto.

[Andreu-G]

Buenas, he estado investigando un poco el tema de cambiar el lenguaje. Resulta que es un poco lío todo porque el autor cambió casi todo el código a partir de la versión 2.0. En la página oficial no queda rastro alguno de nada de la versión 1.x, aunque la API sigue activa porque al parecer muchísima gente no ha cambiado a la nueva versión.

En cualquier caso, buceando por stackoverflow he descubierto que en el proyecto de github de i18n tenemos la documentación de la versión 1.x, que explica cómo cambiar de lenguaje.

Os dejo tanto la documentación de la versión 1.x, como un jsfiddle de ejemplo de cómo cambiar el lenguaje.

[victoriageeks]

Buenas, comparto el código que se necesitará asociar al selector de idiomas del index.html:

var selectLanguage = document.querySelector('#languageSelector');

selectLanguage.addEventListener('change', (e)=>{

var language= e.target.value;
if(language=='es'){
  $(document).i18n({lng: 'es'});
} else if (language=='en'){
  $(document).i18n({lng: 'en'});
}

});

[omiras]

Opciones tema traducir levels.js:

1. Mirar si la biblioteca i18n puede usarse a través de un método global en ficheros .js (i18n('help-level-1') )
2. Quizás se puede englobar con un los textos de level.js y añadir el data-i18n.