Agregando la página de /signin

Clase 19 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Vamos a repasar lo aprendido hasta ahora creando una nueva funcionalidad a nuestra aplicación: Crear la pagina de login. Además, aprendemos cómo gracias a watchify, podemos mostrar un error en la consola de forma automática en cuanto esto suceda.

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

Jesus Africano

student•

No se si a otros les pasa que derrepente el vídeo da un salto adelante.

Ema -

student•

Si, son los servidores que usan.. Una lastima, tambien la conexion es pesima .

Rubén Rangel

student•

Es cierto acá en Venezuela también se ven esos saltos, a veces parece como que no explicara cosas, y no es así es que se salta

Enmanuel Jarquin

student•

a medida que iba avanzando miraba un desorden en las cosas, y que eran muchas librerias las que se estaban usando, pero creo que ahora si voy entendiendo como es que trabajan las librerias más grandes, como lo hacen ellas por debajo y por fin he aprendido a usar bien gulp y browserify y ahora logro comprendermejor como lo debe de hacer webpack 😄, me abrió más la mente!!

Yonathan Gutierrez

student•

por alguna razon los estilos quedaron algo raros en el caso del login-box, solo me encierra el nombre, en el codigo de app.js y app.css todo esta bien... alguna idea?

Carlos Garcia Castellanos

student•

No me funciona la opcion '.on' en el Gulpfile. He borrado intensionalmente la variable empty en los templates y no me muestra el error en la consola. De igual forma cuando escribo 'npm start' nada mas me muestra el mensaje de que se esta corriendo en el puerto 3000, pero cuando grabo cambios no me muestra nada de "bundling...". Sera que tiene algo que ver que estoy en windows ???

Carlos Garcia Castellanos

student•

Actualizacion: revisando los comentarios de videos anteriores he podido resolver mi problema agregando la libreria concurrently en el package.json.

Problema Resuelto.

Rubén Rangel

student•

Este problema lo probaste sin agregar la librería concurrently al .json, pregunto porque leí en la documentación de npm y al parecer es algo global com gulp, probe lo de currentrly y no me funciono no me corre los dos procesos al mismo tiempo yo lo hice funcionar en windows 10 de esta manera

"start": "start gulp watch && start node server.js"

Armando Alamilla Cuellar

student•

Ayuda por favor : (
Cuando corro el comando npm start y voy a me aparece en la consola este error:
app.js:363 Uncaught Error: multiple root elements must be wrapped in an enclosing tag
at app.js:363
at Object.23…/landing (app.js:2717)
at s (app.js:1)
at app.js:1
at Object.22…/template (app.js:2706)
at s (app.js:1)
at app.js:1
at Object.18…/homepage (app.js:2630)
at s (app.js:1)
at e (app.js:1)

Diego Forero

Team Platzi•

Debes tener un elemento que contenga todos los elementos que retornas, puede ser un div.

Armando Alamilla Cuellar

student•

Gracias amigo!

Erick Neftalí Sarmiento Cortes

student•

Según yo he seguido todos los pasos tal y como me los van mostrando pero no tengo los mismos resultados, estoy algo frustrado pero buscaremos el error. Gracias excelente clase.

Jhon Salguero

student•

puedes comentar el error para que la comunidad te ayude

Jhon Salguero

student•

puedes comentar el error para que la comunidad te ayude

Luis Felipe Cardona Florez

student•

Excelente este curso !!

Reinaldo Mendoza

student•

Yo esperaba JS y me encontré con un montón de librerías de JS

Ema -

student•

Yo tengo un error, hice todo tal cual lo hizo el profesor pero no me da los resultados. Me deja en blanco signin.. y no cambia el formulario.

Ema -

student•

Ya lo resolvi, pero no me reconoce el UTF-8 aunque si esta puesto en el archivo pug.

José Soto

student•

También me pasó lo mismo. En caso que alguien tenga el mismo problema yo tenía en mi archivo index.js-src/signin :

page('/signup',function (ctx, next){

en vez de

page('/signin',function (ctx, next){

Tatiana Andrea Aramburo Morales

student•

Siento que ahora si empieza a tomar forma nuestro Platzigram =D

Nicolas Alejandro Herrera

student•

Las carpetas signin y signup no deberian estar dentro de la carpeta landing? Asi el codigo queda mas organizado...

Joel suarez

student•

me dice que landing no es una funcion, alguien me podria ayudar

app.js:2668 Uncaught TypeError: landing is not a function
    at Object.22.../landing (app.js:2668)
    at s (app.js:1)
    at app.js:1
    at Object.21../template (app.js:2647)
    at s (app.js:1)
    at app.js:1
    at Object.17../homepage (app.js:2592)
    at s (app.js:1)
    at e (app.js:1)
    at app.js:1```

Joel suarez

student•

var yo = require('yo-yo')


module.export = function landing(box) {

	return yo`<div class="container">
					<div class="row">
						<div class="col s10	push-s1">
							<div class="row">
								<div class="col m5 hide-on-small-only">
									<div class="img-res ">
									<img src="images/iphone.png" alt="" class="responsive-img" />
									</div>
								</div>
								${box}
							</div>
						</div>
					</div>
				</div>`
}

			```

Diego Forero

Team Platzi•

Tienes un typo es module.exports estas escribiendo module.export

Luis Felipe Cardona Florez

student•

Porque se tienen que utilizr tantas librerias ? en el concepto de las variables no es poco conveniente declarar una variable local con var ? no es mejor con let o const ?

Diego Forero

Team Platzi•

En el curso se enseño el uso de librerías que existen para no rehacer funcionalidades que ya se pueden implementar de forma fácil.

Como lo mencionas si uno quiere cuidar o limitar el scope de las variables se usa let y const. Al momento de grabar este curso let y const no estaba soportado por todos los navegadores.

Luis Felipe Cardona Florez

student•

Oh entiendo, entonces en el nuevo curso de javascript con sails ya viene el uso implementado de let ? me imagino que si.

Rubén Rangel

student•

tengo dudas con respecto a ./ en el manejo de los directorios, porque a veces solo usa ./ para referirse a alguna ruta y en optras ocasiones ../, ya vi que .. es para subir un directorios, pero que pasa con el ./ ese no lo tengo claro.

Gracias a la comunidad por la ayuda.

Sergio Daniel Xalambrí

student•

El ./ es para indicar que el archivo está en el mismo directorio, si no colocas el ./ se va a buscar el archivo a importar en la carpeta de node_modules

Rubén Rangel

student•

Perfecto Muchas gracias

Enmanuel Jarquin

student•

por fín entiendo como trabajan por debajo frameworks como angular 2, (y aún no veo el curso de angular 2 )💪😆

Jorge Díaz Hernández

student•

Qué pasaría si el ${box} lo ponemos en otro lugar?, es necesario que siempre esté en ese espacio en todos los proyectos que llevemos a cabo?

Nestor Beltran

student•

Que tal comunidad tengo una duda, hasta este punto quise experimentar haciendo otra vista con pug en la carpeta de views, simplemente la llame otro.pug y pegue el código de la vista index.pug, solo cambie los nombres de los idiomas que se despliegan en el dropdown, lo que declare en el server.js es que en la ruta de signin hago el render de la vista otro.pug de la siguiente forma

app.get('/signin', function (req, res) {
  console.log('voy a hacer render de otro.pug');
  res.render('otro');
});

de tal forma que cuando accedo a signin desde home luego dando click en el enlace de entrar, toda va bien solo que no hace el render de otro.pug, si no que persiste el render de index.pug, ahora si accedo directamente desde la barra de direcciones poniendo la ruta completa a signin “localhost:3000/signin” , si hace el render de otro.pug y pasa el mismo caso ya que si le doy click al enlace de registrate persiste el render de otro.pug, espero alguien tenga la respuesta a esto, saludos 😃

JESUS DARIO MARENCO PORTO

student•

una pregunta? no deberíamos exportar tambien los archivos de los modulos signup, homepage y signin?(es decir los index de cada uno para poder requerirlos en el index del src raiz) a que se debe que solo exporte el archivo template y no los otros?)

Kevin Bello

student•

Tengo un problema, todo funciona bien, pero cuando recargo la pagina queda solo con el footer, tengo que volver al home y de ahí con el link de signup funciona, si actualizo vuelve a quedar en blanco.

Luis Antonio Schmiel Paredes

student•

puede ser por alguna ruta en que escribiste mal. A mi me pasó con signan y era porque estaba así:

page('/signip', (ctx, next) => {})

cuando era así:

page('/signin', (ctx, next) => {})

Emmanuel González Ontiveros González Ontiveros

student•

Sería posible que me estuviese guardando la cache algo que ya no tengo en codigo, y por ello en el sign in me aparezca un menu de enlaces?

Ricardo Azpeitia P.

student•

Tal vez por eso siempre se recomiendo tener un versión de control de tus proyecto. Tenemos un curso de git y github para esto https://platzi.com/clases/git-github/

app.js:2668 Uncaught TypeError: landing is not a function
    at Object.22.../landing (app.js:2668)
    at s (app.js:1)
    at app.js:1
    at Object.21../template (app.js:2647)
    at s (app.js:1)
    at app.js:1
    at Object.17../homepage (app.js:2592)
    at s (app.js:1)
    at e (app.js:1)
    at app.js:1```

var yo = require('yo-yo')


module.export = function landing(box) {

	return yo`<div class="container">
					<div class="row">
						<div class="col s10	push-s1">
							<div class="row">
								<div class="col m5 hide-on-small-only">
									<div class="img-res ">
									<img src="images/iphone.png" alt="" class="responsive-img" />
									</div>
								</div>
								${box}
							</div>
						</div>
					</div>
				</div>`
}

			```

Agregando la página de /signin

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)