Stream 1: Resolviendo el primer desafío

Clase 39 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

José David García Rodríguez

student•

Dos palabras: excelente curso.

Uriel Ramírez

student•

gracias por ser parte de el

Alejandro Moreno

student•

No está tan mal que Sacha escriba el css durante la clase. Personalmente he aprendido más de css durante las clases de javascript que en las clases de HTML5 y CSS3 ya que veo los ejemplos prácticos y en poco tiempo digiero el concepto, como me paso en este curso con materializecss y los ajustes customizados que hacía el profesor. Excelente curso!

Oliver Amezquita Morales

student•

llegue tarde, me recargo en la pared!!!!. Me carga la que me trajoo

Usuario anónimo

user•

Aún puedes intentarlo :)

Michel González Morales

student•

Nunca es demasiado tarde.

Esteban Ponce de León

student•

La sintaxis ${ctx.params.username} no me quedó del todo claro. El atributo params de ctx viene dado por default?

Sacha Lifszyc

teacher•

El atributo params de ctx lo setea Page.js con un objeto en el que carga todo lo que matchee con la ruta.

En este caso la ruta tenía el parámetro :username así que ese es el nombre que va a tener dentro de ctx.params.

Puedes leer la documentación de Page.js si tienes más dudas

Esteban Ponce de León

student•

Súper. Gracias, Sacha. Estoy muy contento con el curso, por cierto. Este ejemplo de Platzigram me ha servido mucho para los objetivos que tengo.

Rafael Villarreal

student•

algo que me gustaría saber y que no mencionaron a lo largo del curso es el hecho que se usa mucho la sgte sintaxis: ${ } para llamar algún elemento. la verdad no se de donde sale y por que lo hacen así?
les agradecería si me ayudaran y que me recomiendan para aprender mucho más javascript

Miguel Sosa

student•

Esa sintaxis proviene de ECMA Script 6 (o 2015) y es usado para literal string templates, con la sintaxis ${} puedes acceder a variables javascript dentro del string, sin necesidad de concatenar, como lo veníamos haciendo con la versión anterior.

// antes
var nombre = "Miguel";
var template = "<div>" + nombre + "</div>" +
"<span> para poder bajar una línea debo incertar el + al final de la anterior</span>";

// ahora
var template2 = `<div>${nombre}</div>
<span>Ahora puedo incertar múltiples líneas</span>`;

Para profundizar más sobre esto:

Miguel Sosa

student•

Fe de erratas: Insertar**

Miguel Cobas

student•

Me aparece el siguiente error

TypeError: Cannot read property 'map' of undefined(…)

a la hora de estar mapeando las fotos del usuario y no encuentro el porque me aparece

Eduardo Uribe González Gonzàlez

student•

¿Dónde se encuentra el archivo scss del desafío?

Sacha Lifszyc

teacher•

En este repositorio puedes encontrar todas las ramas del proyecto con los desafíos resueltos y la segunda parte del curso: https://github.com/platzi/platzigram

Saludos!

Iván Gabriel Guerra

student•

Excelente resolucion! excelente curso y profesor!

Edgardo T

student•

@sacha hay manera de trabajar la vista en un "template.pug [o .jade]" y luego importar esa vista a al JS que estamos usando? en lugar de incluir directamente el template dentro del JS ?

Gracias.

Carlos Raez

student•

Hola buenas tardes o dias, tengo una consulta porque ha veces utilizas comillas ‘’ simples "comillas dobles o `comillas invertidas?
Muchas Gracias por tu contestación.

Victor Eduardo Aguilera Gomez

student•

Las comillas dobles o simple son iguales, se pueden usar unas dentro de otras. las comillas invertidas son para escribir template strings (pedazos de codigo HTML dentro de javascript, como cuando usamos yoyo)

Andrs

student•

las comillas simples no se recomiendan escribirlas en los atributos de las etiquetas Html para que lo tengas en cuenta

Camilo Maury

student•

Hola! Me sale este error:
"ReferenceError: Can’t find variable: regeneratorRuntime"
He investigado y al parecer con un problema en la función async. Pero no se como solucionarlo. ¿Alguna idea porfavor?

Camilo Maury

student•

Me faltaba requerir el comando:
require(’'babel-polyfill) dentro de /src/index.js
Buen día

Enrique Alexis Lopez Araujo

student•

Me aparece el siguiente error:

TypeError: Cannot read property 'map' of undefined(…)```

Enrique Alexis Lopez Araujo

student•

Mi problema fue que en el archivo server.js defini en el api del user la palabra “picture” en lugar de “pictures” y al ocuparlo en el template.js cuando hago uso de map estaba con “pictures”

Juan Diego Silva Garcia

student•

Impresionante SASS

Juan Jose Vega

student•

Amigos alguien tiene el codigo index.scss para mejorar los estilos

Erick Neftalí Sarmiento Cortes

student•

Este es el repositorio que subió el profesor Sasha:
, aquí encuentras todo incluso el index.scss.

Juan Jose Vega

student•

Sí ya lo había encontrado, gracias

JESUS ALBERTO LOPEZ VILLATORO

student•

excelente el curso sacha es un gran profesor 😄

Roberto Miguel Spota

student•

le doy un clic al usuario y no hace nada, pero el console.log me manda esto:

SyntaxError: Unexpected token F in JSON at position 0

y no carga las imagenes

Diego Forero

Team Platzi•

Tienes un error de digitación, en el archivo JSON, revisalo, si puedes comparte tanto el JSON como el código JavaScript para poder ayudarte a revisar, es bueno que subas eso a github y con eso es más sencillo ayudarte, si no sabes manejar git y github existe un buen curso que te enseña a manejarlo https://platzi.com/cursos/git-github/.

Andrés Felipe Chaparro Grimaldo

student•

Excelente!!

Hugo Montoya Vázquez

student•

Hola a todos,

Llevo arrastrando un problema desde hace unos días y no sé como solucionarlo. Si alguien pudiera ayudarme se lo agradecería.

El problema es el siguiente, cuando clico sobre el enlace del usuario para que me lleve a su perfil. Ma sale el siguiente error:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Diego Forero

Team Platzi•

Hay un carácter no valido en el JSON que esta llegando, revisa eso y si continua el problema comparte tu proyecto en github y entre todos podemos ayudar a solucionar el problema.

Hugo Montoya Vázquez

student•

Ya miré pero no veo ningún error. Probé borrando codigo pero no ha cambiado nada del error.

Aquí os dejo el enlace al repositorio:

Luis Felipe Cardona Florez

student•

Entonces los web tokens son como las llaves de cifrado que se generan entre el cliente y el servidor ?

Diego Forero

Team Platzi•

Si, es un token que permite validar una información como es un usuario.

Luis Felipe Cardona Florez

student•

porque utiliza params ? de donde sale esta variable ?

Diego Forero

Team Platzi•

params hace parte del contexto que tiene la aplicación.

// antes
var nombre = "Miguel";
var template = "<div>" + nombre + "</div>" +
"<span> para poder bajar una línea debo incertar el + al final de la anterior</span>";

// ahora
var template2 = `<div>${nombre}</div>
<span>Ahora puedo incertar múltiples líneas</span>`;

Stream 1: Resolviendo el primer desafío

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)