Agregando las imágenes de los usuarios al timeline

Clase 22 de 46 • Curso Definitivo de JavaScript 2016

Ignacio Céspedes Céspedes

student•

Esta increíble el curso! He aprendido muchísimo! Gracias Sacha!

Fredy Bustos

student•

excelente este clase....

Saul Navarro V

student•

module.exports = function template(pictures){  
    var el = yo`<div class="container landing">  
          <div class="row">  
            <div class="col s12 m10 offset-m1 l6 offset-l3">  
              ${pictures.map(function(pict){  
                return picture(pict); // falto por agregar ese (pict)  
              })}  
            </div>  
          </div>  
      </div>`;  
    return layout(el);  
};

Gracias Sacha, he aprendido mucho. dejo la solución al problema deque no aparecen varios picture

Victor Eduardo Aguilera Gomez

student•

Atentos! Buena solucion

David Camacho

student•

Buenas noches, tengo una duda con respecto a nuestro archivo: picture-card/index.js.

No entiendo como el parametro (pic) que exporta la funcion (del archivo antes mencionado), puede recibir el objeto que se declaro en: homepage/index.js
-> { user, url, liked, likes, entre otros } <-

Estuve interpretando y entiendo que hay 3 archivos involucrados:

homepage/index.js
homepage/template.js
picture-card/index.js

Pero me gustaria saber el recorrido que hace el objeto, para poder usarlo en:
picture-card/index.js.

Luis Montero

student•

Hola amigo,
dentro de nuestro picture-card/index.js : Declaramos una función que recibirá por parametro pic. (el cual sabemos que será un objeto porque luego podemos acceder a sus propiedades por ejemplo pic.likes). Ahora esto lo exportamos como un modulo.
Luego en homepage/template.js:
requerimos de nuestro módulo **var picture = require('../picture-card');**Y nuestro template.js también es un Module.exports que tiene una función (la cual recibe un parametro Pictures, (acá está tu respuesta), ese pictures, lo mandamos por homepage/index.jsósea [ { user, url, liked, likes, entre otros }], en la parte de empty(main).appendChild(template(pictures));), ahora volviendo a **template.js,**acá acuérdate que usamos un map para recorrer el pictures y le hacemos un return de picture(pic) y ese pic se refiere a cada uno de los objetos dentro del array que fue recibido en picturesy ese es el flujo que sigue, espero que mi respuesta te sea útil. Saludos

Sacha Lifszyc

teacher•

☝️

Nestor Beltran

student•

tengo una duda, ya que estamos usando Node.js, ¿Es bueno tener tanta lógica en el cliente? ¿Que ventajas tiene? , saludos 😃

Antonio Daniel García Guerrero

student•

Tengo una duda, Sacha utiliza mucho el seleccionar parte del html y luego le da un tab a todo el código. ¿Como puedo hacerlo?

Por cierto buen curso Sacha!

Izael Ruelas Garcia

student•

Seleccionas tu código y presionas la tecla tab

Reinaldo Mendoza

student•

Muy lindo diseño, me llevo un par de comandos que uso

Victor Gutierrez Rivas

student•

Tengo un error dice picture is not a function 😦

Diego Forero

Team Platzi•

Puedes compartir el código que tienes escrito, así es imposible ayudarte, puede que tengas un error de digitación y por eso la función se llama diferente.

Mateo Gomez

student•

mismo error, aca el codigo de template en la carpeta homepage

var yo = require('yo-yo')
var layout = require('../layout')
var picture = require('../picture-card');

module.exports = function (pictures) {
  var el = yo`<div class="container timeline">
      <div class="row">
        <div class="col s12 m10 offset-m1 l6 offset-13">
        ${pictures.map(function (pic) {
          return picture(pic)
        })}
        </div>
      </div>
    </div>`

    return layout(el)
}

y este es el pictur-card

var yo = require('yo-yo')

module.exports =  yo`<div class="card">
   <div class="card-image">
     <img class="activator" src="office.jpg">
   </div>
   <div class="card-content">
     <span class="card-title">Card Title</span>
   </div>
 </div>`

Juan Diego Silva Garcia

student•

Al principio perdido, pero ahora si! me está quedando muy claro todo.

Tatiana Andrea Aramburo Morales

student•

Super buena la clase =D. Tengo algunos inconvenientes con el tamaño del card, me aparece muy grande.

Sacha Lifszyc

teacher•

Puedes achicarlo utilizando otro tamaño de la columna

Richard Lipa Cochachi Lopez Ay Lopez Ayala

student•

 var yo = require('yo-yo');

  module.exports = function (pic) {
  	return yo`<div class="card">
      <div class="card-image ">
        <img class="activator" src="${pic.url}">
      </div>
      <div class="card-content">
        <a href="/user/${pic.user.username}"  class="card-title ">
           <img  src="${pic.user.avatar}"  class="avatar" />
           <span  class="username">${pic.user.username}</span>
        </a>
        <small class="right time">Hace un dia </small>
        
        <p>
           <a  class="left herf="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>// tengo problemas aqui
           <span class="left  likes"> ${pic.likes} me gusta</span>// tengo problemas aqui
        </p>
      </div>
    </div>`;
  }
  
             ```

Diego Forero

Team Platzi•

Puedes revisar si la consola te lanza algún error, para poderte ayudar, el código aparentemente esta bien, pero no es claro cual error es el que te da.

Richard Lipa Cochachi Lopez Ay Lopez Ayala

student•

app.js:111 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '#"' is not a valid attribute name.
    at belCreateElement (http://localhost:3000/app.js:111:14)
    at http://localhost:3000/app.js:222:12
    at http://localhost:3000/app.js:273:45
    at module.exports (http://localhost:3000/app.js:2696:12)
    at http://localhost:3000/app.js:2625:12
    at Array.map (native)
    at module.exports (http://localhost:3000/app.js:2624:19)
    at http://localhost:3000/app.js:2611:27
    at http://localhost:3000/app.js:1753:52
    at nextEnter (http://localhost:3000/app.js:1585:7)```

// este es el error que me marca  en el index


       if (p === 'xlink:href') {
            el.setAttributeNS(XLINKNS, p, val)
          } else if (/^xmlns($|:)/i.test(p)) {
            // skip xmlns definitions
          } else {
            el.setAttributeNS(null, p, val)
          }
        } else {
          el.setAttribute(p, val)
        }
      }
    }
  }

Gilberto Francisco Naranjo Valles

student•

Una pregunta… y si en este caso, yo quisiera usar el template de la card… pero completa… con la descripcion y todo el contenido de la misma… como le hago para incluirla?, ya que el profesor a lo que veo lo hace de una manera un poco diferente por que no quiere el contenido … Gracias de antemano

Juan Sebastian Criollo Forero

student•

Una pregunta, el homepage ahora sale con un scroll horizontal, como surgió y como lo elimino.

Gracias

Diego Forero

Team Platzi•

Debes tener algún contenedor más ancho que el ancho que tiene el navegador, si puedes compartir el código que estas haciendo te podemos ayudar, así es muy complicado ayudarte.

Juan Sebastian Criollo Forero

student•

Gracias efectivamente, el contenedor del user esta mas ancho que el navegador.

var yo = require(“yo-yo”);
module.exports = function (content) {
return yo <div> <nav class="header"> <div class="nav-wrapper"> <div class="container"> <div class="row"> <div class="col s12 m6 offset-m1"> <a href="/" class="brand-logo platzigram">Platzigram</a> </div> <div class="col s2 m6 push-s10 push-m8"> <a href="#" class="btn btn-large btn-flat dropdown-button" data-activates="drop-user"> <i class="fa fa-user" aria-hidden="true"></i> </a> <ul id="drop-user" class="dropdown-content"> <li><a href="#">Salir</a></li> </ul> </div> </div> </div> </div> </nav> <div class="content"> ${content} </div> </div>;
}

es el layout, este linea en específico: <div class=“col s2 m6 push-s10 push-m8”>, los push son muy grandes y quedan mas anchos que el navegador y que las versiones responsive. no se cual disminuir sin afectar la posición del username.

Te agradezco Gollum23 si tienes alguna observación de como podria hacerlo.

Jonathan Ludeña

student•

Me está saliendo un error al momento que agregamos el codigo de la Card de Materialize.

ReferenceError: err is not defined
at Readable.<anonymous> (D:\PERSONAL\platzi\CDJS\clase1\platzigram\gulpfile.js:30:44)
at emitOne (events.js:101:20)
at Readable.emit (events.js:188:7)
at Labeled.<anonymous> (D:\PERSONAL\platzi\CDJS\clase1\platzigram\node_modules\read-only-stream\index.js:28:44)
at emitOne (events.js:96:13)
at Labeled.emit (events.js:188:7)
at Labeled.<anonymous> (D:\PERSONAL\platzi\CDJS\clase1\platzigram\node_modules\stream-splicer\index.js:130:18)
at emitOne (events.js:101:20)
at Labeled.emit (events.js:188:7)
at Deps.<anonymous> (D:\PERSONAL\platzi\CDJS\clase1\platzigram\node_modules\stream-splicer\index.js:130:18)

Sacha Lifszyc

teacher•

Hola! Dónde puedo ver tu código así te doy una mano? Saludos!

Carlos Raez

student•

Hola buenos días, hay algo que no consigo comprender si miramos el codigo de yo-yo en la documentación !!

Pone

var yo = require('yo-yo')
 
var el = list([
  'grizzly',
  'polar',
  'brown'
])
 
function list (items) {
  return yo`<ul>
    ${items.map(function (item) {
      return yo`<li>${item}</li>`
    })}
  </ul>`
}
 
document.body.appendChild(el)

Esta es la documentación de yo-yo en cambio nosotros en el ejercicio estamos poniendo una cosa bastante diferente a lo que especifica la documentación.

var yo = require('yo-yo');
var layout = require('../layout');
var picture = require('../picture-card');

module.exports = function (pictures) {
  var el = yo`<div class="container timeline">
   <div class="row">
     <div class="col s12 m10 offset-m1 l6 offset-l3">
         ${pictures.map(function(pic){
           return picture(pic)
         })}
     </div>
   </div>
 </div>`;
 return layout(el)
}

nostros ponemos return picture(pic) y segun la docuentación deberiamos retornar item pasado por yo``

Gracias!!! por la ayuda

Sacha Lifszyc

teacher•

Hola! Es que si te fijás, esto es lo que retorna picture(pic):

var yo = require('yo-yo');
var translate = require('../translate');

module.exports = function pictureCard(pic) {
  var el;

  function render(picture) {

    return yo`<div class="card ${picture.liked ? 'liked' : ''}">
      <div class="card-image">
        <img class="activator" src="${picture.url}" ondblclick=${like.bind(null, undefined)} />
        <i class="fa fa-heart like-heart ${ picture.likedHeart ? 'liked' : '' }"></i>
      </div>
      <div class="card-content">
        <a href="/${picture.user.username}" class="card-title">
          <img src="${picture.user.avatar}" class="avatar" />
          <span class="username">${picture.user.username}</span>
        </a>
        <small class="right time">${translate.date.format(picture.createdAt)}</small>
        <p>
          <a class="left" href="#" onclick=${like.bind(null, true)}><i class="fa fa-heart-o heart-o" aria-hidden="true"></i></a>
          <a class="left" href="#" onclick=${like.bind(null, false)}><i class="fa fa-heart heart" aria-hidden="true"></i></a>
          <span class="left likes">${translate.message('likes', { likes: picture.likes })}</span>
        </p>
      </div>
    </div>`
  }

  function like(liked) {
    if (liked === undefined) {
      pic.likedHeart = pic.liked = !pic.liked;
      liked = pic.liked;
    } else {
      pic.liked = liked;
    }
    pic.likes += liked ? 1 : -1;  
    var newEl = render(pic);
    yo.update(el, newEl);

    setTimeout(function () {
      pic.likedHeart = false;
      var newEl = render(pic);
      yo.update(el, newEl);
    }, 1500)

    return false;
  }

  el = render(pic);
  return el;
}

Que es lo mismo que pasarlo por yo

YSRAEL ROJAS ROJAS

student•

muy ben curso!!! sigo adelante 😃

Richard Lipa Cochachi Lopez Ay Lopez Ayala

student•

no me cargan las imagenes

Emilio Rafael Hernandez Perez

student•

A ver si alguien me puede ayudar, no se debido a que puede ser el error. Si es a mi editor de codigo o algo estoy haciendo mal.cuando lo veo en el navegador no coge el <div class=‘card-content’> y lo hace como si fuese texto. No detecta la etiqueta div

Este es mi codigo completo

var yo = require('yo-yo');

module.exports = function (pic){ 
  return yo `<div class='card'>
    <div class='card-image'>
      <img class="activator" src='${pic.url}'>
    </div>
    <div class='card-content'>
      <a href="/user/${pic.user.username}" class="card-title">
        <img src="${pic.user.avatar}" class="avatar">
        <span class="username">${pic.user.username}</span>
      </a>
      <small class="right time">Hace 1 dia<small>
      <p>
        <a class="left" href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
        <span class="left likes">${pic.likes} me gusta</span>
      </p>
    </div>
  </div>`;
}

Diego Forero

Team Platzi•

no utilices comillas sencillas en la definición de clases o atributos dentro de etiquetas html, usa siempre comillas dobles.

Emilio Rafael Hernandez Perez

student•

perfecto, Gracias. EL error de todas manera era que se me habia pasado poner </small>

Martín Varela

student•

Muy buena clase !

Yeison Manuel Gerardo Martinez Ospina

student•

Realmente es necesario escribir todo el código HTML en Javascript? Existen otras formas de generar este resultado sin escribir todo HTML en Javascript?

Yonathan Gutierrez

student•

creo que el html incrustado en el Js, da una sensación de mas claridad del desarrollo del código en la aplicación...

Oscar Barajas Tavares

Team Platzi•

Me hubiera gustado mas trabajar con Mustache.js 😦

module.exports = function template(pictures){  
    var el = yo`<div class="container landing">  
          <div class="row">  
            <div class="col s12 m10 offset-m1 l6 offset-l3">  
              ${pictures.map(function(pict){  
                return picture(pict); // falto por agregar ese (pict)  
              })}  
            </div>  
          </div>  
      </div>`;  
    return layout(el);  
};

var yo = require('yo-yo')
var layout = require('../layout')
var picture = require('../picture-card');

module.exports = function (pictures) {
  var el = yo`<div class="container timeline">
      <div class="row">
        <div class="col s12 m10 offset-m1 l6 offset-13">
        ${pictures.map(function (pic) {
          return picture(pic)
        })}
        </div>
      </div>
    </div>`

    return layout(el)
}

var yo = require('yo-yo')

module.exports =  yo`<div class="card">
   <div class="card-image">
     <img class="activator" src="office.jpg">
   </div>
   <div class="card-content">
     <span class="card-title">Card Title</span>
   </div>
 </div>`

 var yo = require('yo-yo');

  module.exports = function (pic) {
  	return yo`<div class="card">
      <div class="card-image ">
        <img class="activator" src="${pic.url}">
      </div>
      <div class="card-content">
        <a href="/user/${pic.user.username}"  class="card-title ">
           <img  src="${pic.user.avatar}"  class="avatar" />
           <span  class="username">${pic.user.username}</span>
        </a>
        <small class="right time">Hace un dia </small>
        
        <p>
           <a  class="left herf="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>// tengo problemas aqui
           <span class="left  likes"> ${pic.likes} me gusta</span>// tengo problemas aqui
        </p>
      </div>
    </div>`;
  }
  
             ```

app.js:111 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '#"' is not a valid attribute name.
    at belCreateElement (http://localhost:3000/app.js:111:14)
    at http://localhost:3000/app.js:222:12
    at http://localhost:3000/app.js:273:45
    at module.exports (http://localhost:3000/app.js:2696:12)
    at http://localhost:3000/app.js:2625:12
    at Array.map (native)
    at module.exports (http://localhost:3000/app.js:2624:19)
    at http://localhost:3000/app.js:2611:27
    at http://localhost:3000/app.js:1753:52
    at nextEnter (http://localhost:3000/app.js:1585:7)```

// este es el error que me marca  en el index


       if (p === 'xlink:href') {
            el.setAttributeNS(XLINKNS, p, val)
          } else if (/^xmlns($|:)/i.test(p)) {
            // skip xmlns definitions
          } else {
            el.setAttributeNS(null, p, val)
          }
        } else {
          el.setAttribute(p, val)
        }
      }
    }
  }

var yo = require('yo-yo')
 
var el = list([
  'grizzly',
  'polar',
  'brown'
])
 
function list (items) {
  return yo`<ul>
    ${items.map(function (item) {
      return yo`<li>${item}</li>`
    })}
  </ul>`
}
 
document.body.appendChild(el)

var yo = require('yo-yo');
var layout = require('../layout');
var picture = require('../picture-card');

module.exports = function (pictures) {
  var el = yo`<div class="container timeline">
   <div class="row">
     <div class="col s12 m10 offset-m1 l6 offset-l3">
         ${pictures.map(function(pic){
           return picture(pic)
         })}
     </div>
   </div>
 </div>`;
 return layout(el)
}

var yo = require('yo-yo');
var translate = require('../translate');

module.exports = function pictureCard(pic) {
  var el;

  function render(picture) {

    return yo`<div class="card ${picture.liked ? 'liked' : ''}">
      <div class="card-image">
        <img class="activator" src="${picture.url}" ondblclick=${like.bind(null, undefined)} />
        <i class="fa fa-heart like-heart ${ picture.likedHeart ? 'liked' : '' }"></i>
      </div>
      <div class="card-content">
        <a href="/${picture.user.username}" class="card-title">
          <img src="${picture.user.avatar}" class="avatar" />
          <span class="username">${picture.user.username}</span>
        </a>
        <small class="right time">${translate.date.format(picture.createdAt)}</small>
        <p>
          <a class="left" href="#" onclick=${like.bind(null, true)}><i class="fa fa-heart-o heart-o" aria-hidden="true"></i></a>
          <a class="left" href="#" onclick=${like.bind(null, false)}><i class="fa fa-heart heart" aria-hidden="true"></i></a>
          <span class="left likes">${translate.message('likes', { likes: picture.likes })}</span>
        </p>
      </div>
    </div>`
  }

  function like(liked) {
    if (liked === undefined) {
      pic.likedHeart = pic.liked = !pic.liked;
      liked = pic.liked;
    } else {
      pic.liked = liked;
    }
    pic.likes += liked ? 1 : -1;  
    var newEl = render(pic);
    yo.update(el, newEl);

    setTimeout(function () {
      pic.likedHeart = false;
      var newEl = render(pic);
      yo.update(el, newEl);
    }, 1500)

    return false;
  }

  el = render(pic);
  return el;
}

var yo = require('yo-yo');

module.exports = function (pic){ 
  return yo `<div class='card'>
    <div class='card-image'>
      <img class="activator" src='${pic.url}'>
    </div>
    <div class='card-content'>
      <a href="/user/${pic.user.username}" class="card-title">
        <img src="${pic.user.avatar}" class="avatar">
        <span class="username">${pic.user.username}</span>
      </a>
      <small class="right time">Hace 1 dia<small>
      <p>
        <a class="left" href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
        <span class="left likes">${pic.likes} me gusta</span>
      </p>
    </div>
  </div>`;
}

Agregando las imágenes de los usuarios al timeline

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)