Cambiando el idioma y almacenándolo en localStorage

Clase 27 de 46 • Curso Definitivo de JavaScript 2016

Contenido del curso

Bienvenidos

1
¿Qué necesito para tomar el curso?
00:10 min

Materiales

2
Descarga el código del proyecto
00:10 min

Conceptos Básicos

Construyendo nuestro proyecto

Conclusiones

Sesiones en Vivo

Complementos del curso

Tomar examen

Comentarios

Oliver Amezquita Morales

student•

es.js para que lo copien rapido;
module.exports = {
'likes': '{ likes, number } me gusta',
'logout': 'Salir',
'english': 'Inglés',
'spanish': 'Español',
'signup.subheading': 'Regístrate para ver fotos de tus amigos estudiando en Platzi',
'signup.facebook': 'Iniciar sesión con Facebook',
'signup.text': 'Iniciar sesión',
'email': 'Correo electrónico',
'username': 'Nombre de usuario',
'fullname': 'Nombre completo',
'password': 'Contraseña',
'signup.call-to-action': 'Regístrate',
'signup.have-account': '¿Tienes una cuenta?',
'signin': 'Entrar',
'signin.not-have-account': '¿No tienes una cuenta?',
'language': 'Idioma'
}

Marco Elizalde

student•

Gracias

Daniel Hernández

student•

Traducciones a ingles

module.exports = {  
    likes: '{ likes, plural, ' +   /*prural es el tipo de dato*/  
            '=0 {no likes}' +  
            '=1 {# like}' +  
            'other {# likes}}',  
    logout: 'Logout',  
    english: 'English',  
    Spanish: 'Spanish',  
    'signup.subheading': 'Signup to watch your friends\' students',  
    'signup.facebook': 'Signup with Facebook',  
    'signup.text': 'Signup',  
    'email': 'Email',  
    'username': 'User name',  
    'fullname': 'Full name',  
    'password': 'Password',  
    'signup.call-to-action': 'Singup',  
    'signup.have-account': 'Already have an account?',  
    'signin': 'Signin',  
    'signin.not-have-account': 'Don\'t have an account?',  
    'language': 'Language'  
}

Juan Carlos Rueda Diaz

student•

Spanish: 'Spanish',

Debe ser:
spanish: 'Spanish',

Rubén Rangel

student•

Esto va como aporte a la comunidad, a aquellos que se le presente este error A message must be provided as a String or AST. es debido a que la calve => valor de algun texto no esta bien declarada, por ejemplo y como vimos en el video sacha coloco signup.not-have-account en el template de signin y en realidad era signin.not-have-account con eso logre solucionar el error que botaba en el navegador firefox.

Rubén Rangel

student•

Sería un buen ejercicio que si escojo un lenguaje ese lenguaje ya aparezca desactivado, y solo se pueda seleccionar el otro, por ejemplo si seleccione español ya desactivo español y solo dejo para poder seleccionar ingles

Pablo García Egido

student•

Al comparar mi código con el de Sasha, lo único que faltaba eran los “/” al final de los inputs…

Álvaro René Sánchez Serrano

student•

¿Cuál es el sentido de usar pug si la mayor parte de nuestro html es nativo en los componentes de yo-yo?

Luis Felipe Evilla Rodríguez

student•

leí un poco la documentación de express y según lo que tengo entendido Pug al igual que los demás VIEW ENGINES se encarga de crear plantillas que son requeridas cada vez que nuestra página es solicitada por el cliente y de esta forma cada vez que haya un cambio o la plantilla sigue estática y solo cambian ciertos elementos.
por ejemplo en platzigram solamente cambiarían las fotos y el resto permanecería igual evitando que nuestros usuarios tengan que volver a cargar toda la página completa

Gabriel Alejandro Nuñez Natera

student•

Si el idioma de la pagina ya esta en espanol, al seleccionar de nuevo lenguaje espanol la pagina no deberia recargarse porque no es necesario, de igual forma si la pagina ya esta en ingles, al volver a seleccionar ingles no deberia de recargarse. Para ahorrarse esa recarga innecesaria podemos hacer lo siguiente:

function lang(locale) {

  // Recarga la pagina solamente si se elige un idioma distinto al establecido actualmente
  if(localStorage.locale != locale){
    localStorage.locale = locale
    // Recargamos la pagina para que tome este cambio
  location.reload()
  }
  
  // Se retorna false para que no continúe con la navegación hacia la ruta # definida en el anchor en donde se llama esta función
  return false
}

Espero que les sea de utilidad 😃

Ignacio Briones

student•

Excelente! lo implemente y me funciono perfecto! buen aporte, saludos!

Eugenio Contreras Sánchez

student•

Para los que presentan el error de: Cannot read property 'signup.subheading' of undefined
Lo pude solucionar de la siguiente manera.
En el index.js del Footer le pase la variable locale de la siguiente forma al localStorage:

localStorage.setItem("locale", locale);

Por lo cual, la función quedo de la siguiente manera:

function lang(locale){  
  localStorage.setItem("locale", locale);  
  location.reload();  
  return false;  
}

Todo lo demás sigue de la misma manera, como por ejemplo cuando se llama al localStorage desde el Translate para asignar el idioma en primera instancia.

Saludos.-

Victor Gutierrez Rivas

student•

Igual me da el mismo error pero revisando en sources me da error aqui

module.exports = {
	message: function (text, opts) {
		opts = opts || {};
		let msg = new IntlMessageFormat(MESSAGES[locale][text], locale, null);
		return msg.format(opts);
	},
	date: new IntlRelativeFormat(locale)
};

Hugo perez garcia

student•

yo ha sido poner esta clase, y me iba bien todo, la hora, la traducción, todo, y ha sido llegar al momento de quitar el footer del pug, y ya no se me ve el footer, todo lo demás si pero ya igual que traducción le ponga, siempre en español y sin el footer, alguien me puede ayudar, llevo desde el miercoles asi

Hugo perez garcia

student•

sigo teniendo el mismo, problema y resulta fustrante, porque llevo mas de una semana atascado en esta clase y no puedo avanzar, hice algunos cambios y ahora no solo no se ve el footer sino que no me carga nada y me muestra un error en una linea que no hemos escrito en clase.

throw new TypeError('A message must be provided as a String or AST.');

David Camacho

student•

Seguro tenias algun error en la funcion lang cierto?

zefe torres

student•

Tiene limite el almacenamiento en el localStorage ?
ó podemos guardar datos sin preocuparnos por el espacio ?

Sergio Daniel Xalambrí

student•

El límite depende del navegador, creo recordar que el límite más bajo era de 5mb, aunque no recuerdo que navegador era.

Juan Castro

teacher•

Perdón ya lo resolví! Habia puesto era localeStorage :D :D

Liz Villegas Villegas

student•

A mi el localstorage me devuelve null, esta bien? no entra al json de en ni es

Joaquin Garcia Real Joya

student•

Me dio este error, Uncaught TypeError: Cannot read property 'signup.subheading' of undefined, alguien sabe a que se debe?

Ignacio Céspedes Céspedes

student•

Sacha, el localstorage es lo que se utiliza también cuando se mantienen las sesiones abiertas en algunos sitios? Como por ej Platzi?

Liz Villegas Villegas

student•

app.js:12913 Uncaught TypeError: Cannot read property 'signup.subheading' of undefined

Joaquin Garcia Real Joya

student•

Viejo como lo resolviste?

Julian Lopez

student•

if(!localStorage.locale){

var locale = 'es';

}else{

var locale = localStorage.locale

}

Julian Lopez

student•

Lo estoy haciendo con jquery $.getJSON peor me sale un error

The date value provided to IntlRelativeFormat#format() is not in valid range.

alguien tiene alguna sugerencia.

Alberto Moncada

student•

Modificación al Script:

Conseguir el idioma automáticamente en base al idioma que el usuario posee en su Navegador, ademas respetara la decisión del usuario si elige por si mismo otro idioma…

var locale = localStorage.locale || navigator.language || navigator.userLanguage || "es";

Juan Castro

teacher•

A mi me sale

localStorage is not defined

Richard Lipa Cochachi Lopez Ay Lopez Ayala

student•

me sale este error…ayuda compañeros estoy estancado

app.js:2120 Uncaught TypeError: A message must be provided as a String or AST.
    at new MessageFormat (app.js:2120)
    at Object.message (app.js:14326)
    at Object.47.../landing (app.js:14251)
    at s (app.js:1)
    at app.js:1
    at Object.46../template (app.js:14212)
    at s (app.js:1)
    at app.js:1
    at Object.40../footer (app.js:14063)
    at s (app.js:1)

Ricardo Azpeitia P.

student•

Puedes poner tambien las lineas antes de ese error?

Estas pasando otro tipo de dato cuando espera un String o un AST.

Yefri Oscar Laura Chavez Laura Chavez

student•

No logro entender lo que hace

Sacha Lifszyc

teacher•

El es un método que tienen todas las funciones el cual recibe como primer parámetro al objeto que queremos que haga "this" dentro de la función y nos devuelve una referencia a esa función con el "this" cambiado. Los siguientes parámetros son los parámetros que se le envían a la función cuando se la llame.

De esta manera, no estamos llamando a la función inmediatamente, sino que estamos guardando una referencia y luego yo-yo la llamará por nosotros.

Esto lo hicimos para poder enviarle el parámetro adecuado, porque sino tendríamos que invocarla en ese mismo instante y no queremos eso, queremos que se la invoque en el evento "onclick" de los anchors.

Se entiende?

Evert Escalante

student•

si, se entiende

Edgar Muñoz

student•

Buenas tardes.

Pregunta: me toca traducir a un idioma que se escribe de derecha a izquierda, hebreo, cuál serìa la estrategia para cambiar la alineación a la derecha de forma automática???

Gracias

Jesús Márquez Racero

student•

Se me ocurre que tendrías que cambiar el CSS cuando cambias el idioma. Puedes hacer algo similar a lo que se hace cuando se cambia el color de los corazones de los likes. Es decir, cuando cambies de idioma, ademas debes llamar a una función que renderice de nuevo la vista con la alineación del texto a la derecha.

Es lo que se me ocurre a mi... espero que te sirva la orientación.

Edgar Muñoz

student•

gracias, lo tendré muy en cuenta, porque debo hacerlo dentro de poco

Álvaro René Sánchez Serrano

student•

¿que incovenientes hay de no poner el atributo href = "#" para asi ya no poner el return false?

Sergio Daniel Xalambrí

student•

Cuando un <a> no tiene el atributo href al hacer hover por defecto no aparece la manito indicando que es un enlace y te toca hacerlo a mano por CSS.

Más allá de eso no hay problema, igual para eso no uses un <a>, bien podés usar un <span>.

module.exports = {  
    likes: '{ likes, plural, ' +   /*prural es el tipo de dato*/  
            '=0 {no likes}' +  
            '=1 {# like}' +  
            'other {# likes}}',  
    logout: 'Logout',  
    english: 'English',  
    Spanish: 'Spanish',  
    'signup.subheading': 'Signup to watch your friends\' students',  
    'signup.facebook': 'Signup with Facebook',  
    'signup.text': 'Signup',  
    'email': 'Email',  
    'username': 'User name',  
    'fullname': 'Full name',  
    'password': 'Password',  
    'signup.call-to-action': 'Singup',  
    'signup.have-account': 'Already have an account?',  
    'signin': 'Signin',  
    'signin.not-have-account': 'Don\'t have an account?',  
    'language': 'Language'  
}

function lang(locale) {

  // Recarga la pagina solamente si se elige un idioma distinto al establecido actualmente
  if(localStorage.locale != locale){
    localStorage.locale = locale
    // Recargamos la pagina para que tome este cambio
  location.reload()
  }
  
  // Se retorna false para que no continúe con la navegación hacia la ruta # definida en el anchor en donde se llama esta función
  return false
}

module.exports = {
	message: function (text, opts) {
		opts = opts || {};
		let msg = new IntlMessageFormat(MESSAGES[locale][text], locale, null);
		return msg.format(opts);
	},
	date: new IntlRelativeFormat(locale)
};

app.js:2120 Uncaught TypeError: A message must be provided as a String or AST.
    at new MessageFormat (app.js:2120)
    at Object.message (app.js:14326)
    at Object.47.../landing (app.js:14251)
    at s (app.js:1)
    at app.js:1
    at Object.46../template (app.js:14212)
    at s (app.js:1)
    at app.js:1
    at Object.40../footer (app.js:14063)
    at s (app.js:1)

Cambiando el idioma y almacenándolo en localStorage

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos