Stream 3: Resolviendo el tercer reto

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

YSRAEL ROJAS ROJAS

student•

Para los que no les abre el modal les comparto mi solución.

agregar esto en el index.js del user-page:

page('/:username/:id', loadUser, function(ctx, next){
	var main = document.getElementById('main-container');
	title(`Platzigram - ${ctx.params.username}`);
	empty(main).appendChild(template(ctx.user));	 
	 $('.modal').modal();
	 $(`#modal${ctx.params.id}`).modal('open');
});

Este seria mi código en el template.js del user-page:
=> NOTA:quite la clase “likes” y agregue la clase “modal-likes”, ya que no me aparecía el footer de la ventana modal.

<div id="modal${picture.id}" class="modal modal-fixed-footer">
	<div class="modal-content">
		<img src="${picture.src}"/>
	</div>
	<div class="modal-footer">	
		<div class="modal-likes modal-action modal-close waves-effect btn btn-flat"><i class="fa fa-heart"></i>${translate.message('likes', {likes: picture.likes})}</div>					      
		</div>
</div>

Agregando la clase “modal-likes” al index.scss

.modal{
   		img{
   			max-width: 100%;
   			max-height: 90%;
   		}
   		.fa-heart{
   			display: inline-block;
   		} 
   		.modal-likes i{       
         color: $platzigram-red;
       	 font-size: 20px;
     }

espero les ayude a resolver el problema.

Esteban Ponce de León

student•

Gran solución con esta línea: $('.modal').modal(); Gracias.

Juan Guillermo Rivera Orozco

student•

Muchas gracias por tu aporte, me ayudaste a resolver el inconveniente del modal.

Oliver Amezquita Morales

student•

suban los archivos finales pues.

Wilfredo Bardales

student•

ahí esta esta todo el codigo nuevo

Juan Diego Silva Garcia

student•

Mi solución para no cambiar la versión del materialize CSS

page('/:username/:id', header, loadUser, function (ctx, next)
{
	var main = document.getElementById('main-container');
	title(`Platzigram - ${ctx.params.username}`);
	empty(main).appendChild(template(ctx.user));
	$('.modal').modal();
  $('.modal').modal({
    complete: function()
    {
      page(`/${ctx.params.username}`)
    }
  });
	$(`#modal${ctx.params.id}`).modal('open');
});

Enzo Aliatis

student•

me gustó mucho esta solucion, aunque ya fue hace unos meses, ya que defines el modal 2 veces, esta linea la puedes omitir ---->

$('.modal').modal();

Juan Sebastian Criollo Forero

student•

Muchas gracias, muy útil

Evert Escalante

student•

usen esta linea

$(`#modal${ctx.params.id}`).openModal();

Sergui Morejón

student•

Como seria si hago el modal con JS, sin usar JQuery ?

Carlos Sampol

Team Platzi•

Tienes varias opciones, puedes hacer el modal solo con JS o buscar una dependencia que te cargue el modal. Si usas foundation por ejemplo te viene con modals.

Sergui Morejón

student•

Para los que prefieran usar JS, sin tener que utilizar JQuery al resolver este desafío, les dejo mi código. Esta forma me parece más comprensible 😃

También la forma que Sacha usa MaterializeCss ya es obsoleta, aquí pueden ver como usarla actualmente.

page('/:username/:id', header, loadUser, function (ctx, next) {
	document.title = `Platzigram - ${ctx.params.username}`;
	var main = document.getElementById('main-container');
	empty(main).appendChild(template(ctx.user));

	var modal = document.getElementById(`#modal${ctx.params.id}`);
   	var instanceM = M.Modal.init(modal, {
    	onCloseEnd: function () {
    		page(`/${ctx.params.username}`)
    	}
    });
    var modalOpen = M.Modal.getInstance(modal);
    modalOpen.open()
})

Alejandro Moreno

student•

Hay forma de establecer la url luego de cerrar el modal, sin necesidad de hacer el recargue de la página?

Jeisson A. Valderrama

student•

Tengo el código listo y todo, aunque, hoy tuve que cambiar la parte del user-page en index.js así:

$(`#modal${ctx.params.id}`).openModal(); // Antes
$(`#modal${ctx.params.id}`).modal('open'); // Ahora

Pero, no funciona, no sale el modal, ni me aparece ningún mensaje de error en consola. Ayuda por favor.

José Luis Ruiz Moreno

student•

Si bien la documentación de materializecss cambio por lo que indicas sigue funcionando con lo de antes… aunque en mi caso no cierra al hacer click fuera de la foto y tampoco la opacidad. Le agregue un botón cerrar en el footer.

  $(`#modal${ctx.params.id}`).openModal(
    {
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      complete: function() {
        page(`/user/${ctx.params.username}`);
      } // Callback for Modal close
    }
  );

<div class="modal-footer">
                  <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">${translate.message('close')}</a>
                  <div class="btn btn-flat likes">
                    <i class="fa fa-heart"></i> ${translate.message('likes', { likes: picture.likes })}
                  </div>
                </div>

José Luis Ruiz Moreno

student•

Se junto el código del index y el código del template en lo que te envié. Te comento también que yo sigo usando la url /user/:username/:id… Pero puedes eliminar la parte de /user/ para que funcione como viene indicando el profesor.
Saludos

Esteban Ponce de León

student•

Me gustó la pregunta sobre crear un buscador y saber que el input pueda hacer match con datos específicos. Hay algún paquete que nos recomiendes para ese propósito, o cómo podría orientarme para hacer ese request al servidor.js?

Sacha Lifszyc

teacher•

No conozco ninguna librería en particular. Si los datos con los que quieres hacer match no son muchos podrías llevarlos del servidor al cliente y buscarlos ahí mismo en el navegador, sin tener que hacer consultas al servidor. Si son muchos, debes hacer un request al server.js luego de que el usuario haya ingresado un texto en el input (y hayan pasado unos ~250ms, es decir que haya terminado de escribir) y obtener lo que busca.

Yojan Antonio Pardo Zabala

student•

Sasha amigo, no me funciona la ruta para abrir una imagen directamente por ejemplo la ruta:

http://localhost:8080/platzi/4 :(

¿que crees que pueda ser?

Failed to load resource: the server responded with a status of 404 (Not Found)

app.js:18781 SyntaxError: Unexpected token C in JSON at position 0

index.js:12Uncaught Error: only one instance of babel-polyfill is allowed

Sergio Daniel Xalambrí

student•

Eso es porque las rutas están definidas solo en el navegador y no en el servidor, entonces cuando entras directamente el servidor no sabe que es esa ruta y devuelve 404.

Yojan Antonio Pardo Zabala

student•

Asi que se soluciona poniendolo en un server? sucede que intenta acceder a esta ruta (cuando veo el network):

Cannot GET /platzi/api/user/platzi es como si superpusiera las rutas, o no se :(

Geovanni Obin

student•

nesesito ayuda porfavor no entiendo porque ahora me tira este error al querer iniciar npm si no e cambiado nada en el package.json

C:\Users\MrGeObin\Desktop\PlatziGram>npm start
npm ERR! file C:\Users\MrGeObin\Desktop\PlatziGram\package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected end of input at 46:2
npm ERR!
npm ERR! ^
npm ERR! File: C:\Users\MrGeObin\Desktop\PlatziGram\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MrGeObin\AppData\Roaming\npm-cache_logs\2017-07-15T04_31_53_088Z-debug.log

Diego Forero

Team Platzi•

Tienes un error en la linea 46 de tu archivo package.json si puedes compartir el archivo podemos ver que puede ser, a lo mejor es una , que falta.

Geovanni Obin

student•

eso es todo lo que tengo en mi archivo package.json pero solo tiene 45 lineas

{
  "name": "platzigram",
  "version": "0.1.0",
  "description": "Comparte tus fotos estudiando en Platzi con el resto de la comunidad",
  "main": "server.js",
  "keywords": [
    "platzi",
    "javascript",
    "curso-definitivo",
    "platzigram"
  ],
  "author": "platzi",
  "dependencies": {
    "axios": "^0.11.0",
    "empty-element": "^1.0.0",
    "express": "^4.13.4",
    "file-extension": "^2.0.1",
    "intl": "^1.1.0",
    "intl-messageformat": "^1.3.0",
    "intl-relativeformat": "^1.3.0",
    "materialize-css": "^0.97.6",
    "multer": "^1.1.0",
    "page": "^1.7.1",
    "pug": "^2.0.0-alpha6",
    "superagent": "^1.8.3",
    "title": "^1.0.0",
    "yo-yo": "^1.2.0"
  },
  "devDependencies": {
    "babel-plugin-syntax-async-functions": "^6.5.0",
    "babel-plugin-transform-regenerator": "^6.6.5",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "scripts": {
    "build": "gulp",
 "start": "gulp watch && node server.js"
}

Victor Hugo Cortés Posada

student•

Aquí mi solución con JQuery para los que no están utilizando title

page('/:username/:id', header, loadUser, (ctx, next) => {
  //JQuery
  $('title').html(`Platzigram - ${ctx.params.username}`);
  const main = $('#main-container');
  main.empty().append(template(ctx.user));
  $('.modal').modal({
    complete: () => {
      page(`/${ctx.params.username}`);
    }
  });
  $(`#modal${ctx.params.id}`).modal('open');
});

Armando Alamilla Cuellar

student•

tengo un error me aparece en la consola:

TypeError: $(…).modal is not a function
at
at
at nextEnter ()
at loadUser$ ()
at tryCatch ()
at Generator.invoke [as _invoke] ()
at Generator.prototype.(anonymous function) [as next] ()
at tryCatch ()
at invoke ()
at

Anthony Gonzalez

student•

Tengo un problema con la función de translate, al agregarla me da un error y no carga la imagenes de la página.

si lo agrego de esta manera:

${translate('likes', { likes: picture.likes })}```


por consola me sale este error

TypeError: (0 , _translate2.default) is not a function
at
at Array.map (<anonymous>)
at userPageTemplate ()
at
at
at nextEnter ()
at loadUser$ ()
at tryCatch ()
at Generator.invoke [as _invoke] ()
at Generator.prototype.(anonymous function) [as next] ()```

al remover el translate y dejar solo el ${picture.likes} funciona normalmente.

Carlos Sampol

Team Platzi•

Como estas importando translate ?

Anthony Gonzalez

student•

import translate from '../translate'```

page('/:username/:id', loadUser, function(ctx, next){
	var main = document.getElementById('main-container');
	title(`Platzigram - ${ctx.params.username}`);
	empty(main).appendChild(template(ctx.user));	 
	 $('.modal').modal();
	 $(`#modal${ctx.params.id}`).modal('open');
});

<div id="modal${picture.id}" class="modal modal-fixed-footer">
	<div class="modal-content">
		<img src="${picture.src}"/>
	</div>
	<div class="modal-footer">	
		<div class="modal-likes modal-action modal-close waves-effect btn btn-flat"><i class="fa fa-heart"></i>${translate.message('likes', {likes: picture.likes})}</div>					      
		</div>
</div>

.modal{
   		img{
   			max-width: 100%;
   			max-height: 90%;
   		}
   		.fa-heart{
   			display: inline-block;
   		} 
   		.modal-likes i{       
         color: $platzigram-red;
       	 font-size: 20px;
     }

page('/:username/:id', header, loadUser, function (ctx, next)
{
	var main = document.getElementById('main-container');
	title(`Platzigram - ${ctx.params.username}`);
	empty(main).appendChild(template(ctx.user));
	$('.modal').modal();
  $('.modal').modal({
    complete: function()
    {
      page(`/${ctx.params.username}`)
    }
  });
	$(`#modal${ctx.params.id}`).modal('open');
});

page('/:username/:id', header, loadUser, function (ctx, next) {
	document.title = `Platzigram - ${ctx.params.username}`;
	var main = document.getElementById('main-container');
	empty(main).appendChild(template(ctx.user));

	var modal = document.getElementById(`#modal${ctx.params.id}`);
   	var instanceM = M.Modal.init(modal, {
    	onCloseEnd: function () {
    		page(`/${ctx.params.username}`)
    	}
    });
    var modalOpen = M.Modal.getInstance(modal);
    modalOpen.open()
})

  $(`#modal${ctx.params.id}`).openModal(
    {
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      complete: function() {
        page(`/user/${ctx.params.username}`);
      } // Callback for Modal close
    }
  );

<div class="modal-footer">
                  <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">${translate.message('close')}</a>
                  <div class="btn btn-flat likes">
                    <i class="fa fa-heart"></i> ${translate.message('likes', { likes: picture.likes })}
                  </div>
                </div>

{
  "name": "platzigram",
  "version": "0.1.0",
  "description": "Comparte tus fotos estudiando en Platzi con el resto de la comunidad",
  "main": "server.js",
  "keywords": [
    "platzi",
    "javascript",
    "curso-definitivo",
    "platzigram"
  ],
  "author": "platzi",
  "dependencies": {
    "axios": "^0.11.0",
    "empty-element": "^1.0.0",
    "express": "^4.13.4",
    "file-extension": "^2.0.1",
    "intl": "^1.1.0",
    "intl-messageformat": "^1.3.0",
    "intl-relativeformat": "^1.3.0",
    "materialize-css": "^0.97.6",
    "multer": "^1.1.0",
    "page": "^1.7.1",
    "pug": "^2.0.0-alpha6",
    "superagent": "^1.8.3",
    "title": "^1.0.0",
    "yo-yo": "^1.2.0"
  },
  "devDependencies": {
    "babel-plugin-syntax-async-functions": "^6.5.0",
    "babel-plugin-transform-regenerator": "^6.6.5",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "scripts": {
    "build": "gulp",
 "start": "gulp watch && node server.js"
}

page('/:username/:id', header, loadUser, (ctx, next) => {
  //JQuery
  $('title').html(`Platzigram - ${ctx.params.username}`);
  const main = $('#main-container');
  main.empty().append(template(ctx.user));
  $('.modal').modal({
    complete: () => {
      page(`/${ctx.params.username}`);
    }
  });
  $(`#modal${ctx.params.id}`).modal('open');
});

Stream 3: Resolviendo el tercer reto

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)