Utilizando FormatJS para internacionalizar los textos

Clase 26 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Completando el ejercicio anterior, ahora usaremos FormarJS para cambiar los textos de la aplicación. Dependiendo de los diferentes valores de configuración que pasemos por parámetro, será el resultado mostrado.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-22.rar?raw=true

Daniel Hernández

student•

MESSAGES.en-US === MESSAGES['en-US']

Sacha Lifszyc

teacher•

es lo mismo pero simplemente no me gusta escribir las variables con - en el medio :P

Sergio Daniel Xalambrí

student•

De hecho MESSAGES.en-US da error, si usas guiones como nombre de propiedades de un objeto es obligatorio usar MESSAGES['en-US']. Fijate que incluso al definir la propiedad con ese nombre es obligatorio usar comillas.

const MESSAGES = {  
  'en-US': {},  
  esAR: {},  
}  
console.log(MESSAGES['en-US']);  
console.log(MESSAGES.esAR]);

Raúl Montes

student•

Muy buenas tardes, me podrían ayudar?
Me manda este error:
A message must be provided as a String or AST.

cuando ya he colocado :
${translate.message( 'likes', {likes: picture.likes} ) }

¿Que puede ser?

Pía Gómez

student•

tengo el mismo problema :/

Leandro Casco

student•

Tengo el mismo problema

Stefany Zapata Naranjo

student•

Hola me aparece este error en consola para la vista de index.js(picture-card):

parser.js:1349Uncaught SyntaxError: Expected "," or "}" but "s" found.

Stefany Zapata Naranjo

student•

genera inconveniente con a la hora de tener esto en el index.js(picture-card):
<span class="left likes">${translate.message('likes', { likes: picture.likes })}</span>

Paul Santaria

student•

revisa bien el codigo en esa parte que te indica ahi esta el error

jhon Penagos

student•

Intlrelativeformats= Es para internacionalizar fechas
Intlmessageformats= Es para internacionalizar textos

jhon Penagos

student•

Intlrelativeformats= Es para internacionalizar fechas
Intlmessageformats= Es para internacionalizar textos

Francisco Cerdas

student•

Hola, veo que en Safari le dio un error porque en los argumentos de la function message el argumento opts tiene un objeto vacío como default; (text, opts = {}).
Esta opción es de ES15?
Eso no lo transpila Babel?

Sacha Lifszyc

teacher•

cuál es el error exactamente? el mismo efecto se puede lograr haciendo

opts = opts || {}

dentro de la función

Ignacio Esteban Aredez Diaz

student•

Recibo este error alguna idea
{ Error: Cannot find module ‘intl/locale-data/jsonp/es.js’ from ‘C:\Users\Ignacio\Documents\platzi\platzigram\src\translate’

Alguna idea del motivo?

Diego Forero

Team Platzi•

No encuentra el archivo es.js dentro de la ruta intl/locale-data/jsonp/ revisa que todas las rutas estén bien y tengas todos los módulos instalados.

Evert Escalante

student•

Gran forma de aprender Programacion orientada a objetos, tema complicado

Erika Luna

teacher•

¿Ya viste que saldrá uno nuevo y actualizado? 😄

Evert Escalante

student•

@erikaluna el de Jquery con js es bueno te ayuda a entender mejor

Stefany Zapata Naranjo

student•

Hola, se me presenta un error en consola en el parser.js a la hora de digitar esto en la vista index.js de picture-card:

parser.js:1349Uncaught SyntaxError: Expected "," or "}" but "s" found.

Jesús Márquez Racero

student•

Repasa la sintaxis de tu fichero en-US.js segúramente te falte un } al final

Jesús Márquez Racero

student•

debe quedar así

module.exports = {

likes : '{likes, plural, ' +

'=0 { no likes }' +

'=1 {# like}' +

'other {# likes}}'

}

a mi me dio ese error en el parser.js porque me faltaba el último }

Jorge Resendiz

student•

Que tal, alguien ha obtenido este error? index.js:24 Uncaught TypeError: IntlMessageFormat is not a constructor at Object.message (index.js:24)

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

JESUS DARIO MARENCO PORTO

student•

disculpen esto me arroja error,
var msg = new IntlMessageFormat(MESSAGES[locale][text], locale, null)

me dice que espera un simbolo
SyntaxError {message: "Expected “#”, “\”, “\u”, “{”, “}”, “{”, …t\n\r], end of input or whitespace but “}”

lo que no entiendo es porque a sacha le funciona sin problema

Izael Ruelas Garcia

student•

Tal vez te falta la “,” entre el cierre de la llave “}” y antes del “date:”

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

Rubén Rangel

student•

Hola vengo arrastrando este error desde la clase pasada para el navegador de safari en windows, alguien a podido soucionarlo, en los comentarios anteriores, alguien dijo que era la version del safari, pero estuve buscando una versión mas reciente para Guindows y no encontré porque al parecer van a dejar de dar soporte para windows.

Gracias.

  SyntaxError: Invalid character: '`'

Sergio Daniel Xalambrí

student•

Safari para Windows no tiene soporte desde hace años, la versión que tienen es la 5.5 y la actual en Mac es la 9, no le des soporte a Mac para Windows, no te molestes, nadie lo uso y quien lo es el equivalente a que hace IE6.

JESUS DARIO MARENCO PORTO

student•

como recomendacion la clases deben llevar una secuencia mas ordenada, ejemplo, crea un objeto, luego una funcion, despuesmete ese objeto en la funcion ect asi en todas las clases lo he visto.

Rafael Villarreal

student•

EL curso está genial, pero creo que en realidad deberían solucionar eso de que el video da esos sañtos hacia adelante ocurre todo el tiempo y muchas veces no me doy cuenta y termino más perdido que la mamá del chavo.

Freddy Vega

Team Platzi•

Intenta cambiando de server entre el A y el B.

Jorge Díaz Hernández

student•

Esto ha sido hasta el momento, lo que más se me ha hecho confuso en el curso, pero ya lo entendí y me ha sido de gran utilidad. 😃

Enmanuel Jarquin

student•

Cual es la mejor opción, usar formatjs para multiple idiomas o hacer un dominio a parte para tener el otro idioma?, me pareció que escuche a fredy vega decir que es mejor tenerlo en otro dominio

Juan Sebastian Reyes Acosta

student•

Me pueden ayudar?, tengo este error Uncaught TypeError: Cannot read property ‘likes’ of undefined

Juan Sebastian Reyes Acosta

student•

Hola

No he podido resolver este error
Uncaught TypeError: Cannot read property ‘likes’ of undefined

Muchas gracias por la ayuda

David Santiago González Ramos

student•

Tengo una pregunta, no es de la clase
Hasta el momento todo lo que hemos hecho y escrito es en el javascript que se entrega en el cliente verdad?

Nestor Beltran

student•

si 😃

Daniel Morales

student•

Bueno, no se si soy el unico que viene otros lenguajes, como Ruby o Phyton pero Javascript realmente hace todo muy complicado. Sasha es un genio y sabe muchisimo, pero creo que el uso de todas estas librerias, saber el orden con que se pone el codigo y demas, deja mucho que desear de un leguaje y hecha uno de menos algo menos verboso. Un tema de pluralizacion es muy facil por medio de una gema en ruby, sin ser tan verboso. En fin, toca seguir dandole hasta que haya luz 😃

Utilizando FormatJS para internacionalizar los textos

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

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API

Obteniendo una respuesta del servidor con async/await

Agregando un botón para subir una nueva foto

Subiendo la foto a nuestro servidor web

Conclusiones

Cierre del curso

Es hora de construir el backend de Platzigram

Desafio 1: Hacer la página de un usuario

Desafio 2: Agregar un spinner mientras carga las imágenes del timeline

Desafio 3: Agregar un modal para mostrar una imagen en el perfil del usuario

Sesiones en Vivo

Stream 1: Resolviendo el primer desafío

Stream 2: Resolviendo el segundo desafío

Stream 3: Resolviendo el tercer reto

Stream 4: Resolviendo el cuarto reto

Stream Extra: Acceder a la webcam usando JavaScript

Complementos del curso

Unit testing en JavaScript con Mocha

Entendiendo los tiempos de ejecución en JavaScript

Usando babel en el lado del servidor (en Node.js)