Consulta y alta de imagenes

Clase 45 de 61 • Curso Profesional de Node.js y JavaScript 2016

Contenido del curso

Crea el backend de tu aplicación

Módulo de base de datos con RethinkDB

Módulo del API de nuestra aplicación

Módulo de Client de nuestra aplicación

Integración con nuestro Frontend

RealTime con Socket.io

Lleva tu proyecto a producción

Tomar examen

Comentarios

erick blanco

student•

si se cae la pagina de gravatar el avatar no se muestra o ya el avatar en la aplicacion se encuentra guardada?

FRANCISCO JAVIER Salinas

student•

Este video está incompleto. Espero solo sea un error en mi caso.

Ricardo Azpeitia P.

student•

Tambien puedes intentar con el server B

Hector Jose Flores Colmenarez

student•

El video del Servidor A no está completo, aconsejo ver el del Servidor B, que efectivamente lo esta 😃

Juanca

student•

a mi me cuesta mucho solucionar esos errores podrias recomendar una pagina que explique mejor a que hace referencia cada codigo de error y como resolverlo porque pierdo muchisimo tiempo con eso

Sebastian Diaz

student•

jejeje creo que no hay una biblioteca mas grande

Miguel Angel Espeso Alvarez

student•

Esta es la misma, pero en español

Jeisson A. Valderrama

student•

Me imprime este error
Error: Internal Server Error at Request.<anonymous>

Ricardo Azpeitia P.

student•

Puedes poner el error completo?

Jeisson A. Valderrama

student•

Solo sale en la consola del navegador chrome:
[Error: Internal Server Error
at Request.<anonymous> (, Response]

Y tambien me sale esto,

Arguments[2]
0
:
Error: Internal Server Error at Request.<anonymous> () at Request.Emitter.emit () at XMLHttpRequest.xhr.onreadystatechange ()
message
:
"Internal Server Error"
original
:
null
response
:
Response
stack
:
"Error: Internal Server Error↵ at Request.<anonymous> ()↵ at Request.Emitter.emit ()↵ at XMLHttpRequest.xhr.onreadystatechange ()"
status
:
500
proto
:
Object

Miguel Angel Espeso Alvarez

student•

Buena. A vewr si pueden ayudarme con el error que me muestra la consola del navegador al intententar subir las imagenes.
He revisado el codigo de API y no tengo nada cambiado,.
Quiza este buscando en el lugar equivocado, aun no he aprendido a interpretar los errores de consola.
Sera porque nadie me a enseñado.
Gracias si pueden ayudarme

Arguments

0: Error

columnNumber: 19

fileName: "http://michaelgram.test:5050/app.js"

lineNumber: 14888

message: "Internal Server Error"

original: null

response: Object { text: "401 - {\"error\":\"invalid token\"}", statusText: "Internal Server Error", statusCode: 500, … }

stack: "Request/<@http://michaelgram.test:5050/app.js:14888:19\n[30]</Emitter.prototype.emit@http://michaelgram.test:5050/app.js:2488:7\n[384]</Request.prototype._end/xhr.onreadystatechange@http://michaelgram.test:5050/app.js:15168:5\n"

status: 500

<prototype>: Object { … }

1: {…}

accepted: false

badRequest: false

body: null

charset: "utf-8"

clientError: false

created: false

error: Error: "cannot POST /api/pictures (500)"
toErrorhttp://michaelgram.test:5050/app.js:14829:13_setStatusPropertieshttp://michaelgram.test:5050/app.js:16221:11Responsehttp://michaelgram.test:5050/app.js:14773:3Requesthttp://michaelgram.test:5050/app.js:14863:13emithttp://michaelgram.test:5050/app.js:2488:7onreadystatechangehttp://michaelgram.test:5050/app.js:15168:5

forbidden: false

header: Object { connection: "keep-alive", "content-length": "31", "content-type": "text/html; charset=utf-8", … }

headers: Object { connection: "keep-alive", "content-length": "31", "content-type": "text/html; charset=utf-8", … }

info: false

links: Object {  }

noContent: false

notAcceptable: false

notFound: false

ok: false

redirect: false

req: {…}

_callback: function onsubmit()

_callbacks: Object { "$end": (1) […] }

_data: FormData {  }

_endCalled: true

_header: Object {  }

_query: Array []

header: Object {  }

method: "POST"

url: "/api/pictures"

xhr: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

<prototype>: Object { addEventListener: addEventListener()
, on: addEventListener(), once: once()
, … }

serverError: true

status: 500

statusCode: 500

statusText: "Internal Server Error"

statusType: 5

text: "401 - {\"error\":\"invalid token\"}"

type: "text/html"

unauthorized: false

unprocessableEntity: false

xhr: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

<prototype>: Object { get: get()
, _setHeaderProperties: _setHeaderProperties(), _setStatusProperties: _setStatusProperties()
, … }

callee: Getter & Setter

length: 2

Symbol(Symbol.iterator): function values()

<prototype>: Object { … }
template.js:151:8

Diego Forero

Team Platzi•

Revisa el log del servidor de express, para ver donde esta el errro.

Miguel Angel Espeso Alvarez

student•

Me podrias especificar un poco mas…??
Como debo proceder.
Gracias

Miguel Angel Espeso Alvarez

student•

Bueno, pense que habia solucionado,.
Ahora no suben ni a la base de datos, a S3 si que suben.

¿ Y ahora que sera, antes por lo menos subian…?

0: Error

columnNumber: 19

fileName: "http://localhost:5050/app.js"

lineNumber: 14888

message: "Internal Server Error"

original: null

response: Object { text: "401 - {\"error\":\"invalid token\"}", statusText: "Internal Server Error", statusCode: 500, … }

stack: "Request/<@http://localhost:5050/app.js:14888:19\n[30]</Emitter.prototype.emit@http://localhost:5050/app.js:2488:7\n[384]</Request.prototype._end/xhr.onreadystatechange@http://localhost:5050/app.js:15168:5\n"

status: 500

<prototype>: Object { … }

1: {…}

accepted: false

badRequest: false

body: null

charset: "utf-8"

clientError: false

created: false

error: Error

columnNumber: 13

fileName: "http://localhost:5050/app.js"

lineNumber: 14829

message: "cannot POST /api/pictures (500)"

method: "POST"

stack: "[384]</Response.prototype.toError@http://localhost:5050/app.js:14829:13\n[387]</ResponseBase.prototype._setStatusProperties@http://localhost:5050/app.js:16221:11\nResponse@http://localhost:5050/app.js:14773:3\nRequest/<@http://localhost:5050/app.js:14863:13\n[30]</Emitter.prototype.emit@http://localhost:5050/app.js:2488:7\n[384]</Request.prototype._end/xhr.onreadystatechange@http://localhost:5050/app.js:15168:5\n"

status: 500

url: "/api/pictures"```

Diego Forero

Team Platzi•

Este es el log de la respuesta?, puedes revisar el log del servidor de node para ver si da más información del error.

Miguel Angel Espeso Alvarez

student•

Solo me debuelve un 500 api/pictures y me lleva al siguiente codigo de client.js de app.js:

xhr.send(typeof data !== 'undefined' ? data : null);
y a la ultima linea de superagent, esta otra linea:
`Request.prototype.end = function(fn){
if (this._endCalled) {
console.warn(“Warning: .end() was called twice. This is not supported in superagent”);
}
this._endCalled = true;

// store callback
this._callback = fn || noop;

// querystring
this._finalizeQueryString();

return this._end();
};`

Es lo que mas o menos como lo que tenia en su dia @jeissonvalde, pero yo no soy capaz de encontrar el error como hizo el.

Miguel Angel Espeso Alvarez

student•

Hola, estoy estancado e esta parte del proyecto, como ya abran visto en otras consultas.
Bien, creo que segui el proyecto igualmente que el profesor.
Dando vueltas al código intentando solucionar el tema de subir imagenes, que aun no conseguí, me di cuenta que ami no se se me marca el el usuario en la barra de navegación.
Ar hacer login, solo marca `localhost:5050 sin la extensión del usuario como a Julián.
Si alguien me da alguna idea de a que clase me debo retrasar para corregir eso.
Quizá de ahì vengan mis problemas para subir las imagenes.
Y lo estoy intentado resolver, no quiero que nadie me lo solucione, solo pido ayuda para algo que no se hacer …
…estoy estudiando…
Gracias.

Diego Forero

Team Platzi•

Revisa las clases de autenticación de usuarios.

Susana Vázquez

student•

Muy buen curso

Juan Francisco Esperanza Contreras

student•

Cual es la diferencia entre exports.X y models.export

William Andrés Serna Laverde

student•

Me sale este error en la Terminal ( Unhandled rejection StatusCodeError: 500 - {“error”:“Non-base62 character”} ) cuando intento traer los datos de la BD. Qué puede ser?

Ricardo Azpeitia P.

student•

Tienes algún caracter especial en los datos de conexion? parece que que ese puede ser el problema.

Puedes compartir el código?

William Andrés Serna Laverde

student•

Sí claro, mira el enlace al repositorio . Gracias!

Arguments
​
0: Error
​​
columnNumber: 19
​​
fileName: "http://michaelgram.test:5050/app.js"
​​
lineNumber: 14888
​​
message: "Internal Server Error"
​​
original: null
​​
response: Object { text: "401 - {\"error\":\"invalid token\"}", statusText: "Internal Server Error", statusCode: 500, … }
​​
stack: "Request/<@http://michaelgram.test:5050/app.js:14888:19\n[30]</Emitter.prototype.emit@http://michaelgram.test:5050/app.js:2488:7\n[384]</Request.prototype._end/xhr.onreadystatechange@http://michaelgram.test:5050/app.js:15168:5\n"
​​
status: 500
​​
<prototype>: Object { … }
​
1: {…}
​​
accepted: false
​​
badRequest: false
​​
body: null
​​
charset: "utf-8"
​​
clientError: false
​​
created: false
​​
error: Error: "cannot POST /api/pictures (500)"
toErrorhttp://michaelgram.test:5050/app.js:14829:13_setStatusPropertieshttp://michaelgram.test:5050/app.js:16221:11Responsehttp://michaelgram.test:5050/app.js:14773:3Requesthttp://michaelgram.test:5050/app.js:14863:13emithttp://michaelgram.test:5050/app.js:2488:7onreadystatechangehttp://michaelgram.test:5050/app.js:15168:5
​​
forbidden: false
​​
header: Object { connection: "keep-alive", "content-length": "31", "content-type": "text/html; charset=utf-8", … }
​​
headers: Object { connection: "keep-alive", "content-length": "31", "content-type": "text/html; charset=utf-8", … }
​​
info: false
​​
links: Object {  }
​​
noContent: false
​​
notAcceptable: false
​​
notFound: false
​​
ok: false
​​
redirect: false
​​
req: {…}
​​​
_callback: function onsubmit()
​​​
_callbacks: Object { "$end": (1) […] }
​​​
_data: FormData {  }
​​​
_endCalled: true
​​​
_header: Object {  }
​​​
_query: Array []
​​​
header: Object {  }
​​​
method: "POST"
​​​
url: "/api/pictures"
​​​
xhr: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
​​​
<prototype>: Object { addEventListener: addEventListener()
, on: addEventListener(), once: once()
, … }
​​
serverError: true
​​
status: 500
​​
statusCode: 500
​​
statusText: "Internal Server Error"
​​
statusType: 5
​​
text: "401 - {\"error\":\"invalid token\"}"
​​
type: "text/html"
​​
unauthorized: false
​​
unprocessableEntity: false
​​
xhr: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
​​
<prototype>: Object { get: get()
, _setHeaderProperties: _setHeaderProperties(), _setStatusProperties: _setStatusProperties()
, … }
​
callee: Getter & Setter
​
length: 2
​
Symbol(Symbol.iterator): function values()
​
<prototype>: Object { … }
template.js:151:8

0: Error
​​
columnNumber: 19
​​
fileName: "http://localhost:5050/app.js"
​​
lineNumber: 14888
​​
message: "Internal Server Error"
​​
original: null
​​
response: Object { text: "401 - {\"error\":\"invalid token\"}", statusText: "Internal Server Error", statusCode: 500, … }
​​
stack: "Request/<@http://localhost:5050/app.js:14888:19\n[30]</Emitter.prototype.emit@http://localhost:5050/app.js:2488:7\n[384]</Request.prototype._end/xhr.onreadystatechange@http://localhost:5050/app.js:15168:5\n"
​​
status: 500
​​
<prototype>: Object { … }
​
1: {…}
​​
accepted: false
​​
badRequest: false
​​
body: null
​​
charset: "utf-8"
​​
clientError: false
​​
created: false
​​
error: Error
​​​
columnNumber: 13
​​​
fileName: "http://localhost:5050/app.js"
​​​
lineNumber: 14829
​​​
message: "cannot POST /api/pictures (500)"
​​​
method: "POST"
​​​
stack: "[384]</Response.prototype.toError@http://localhost:5050/app.js:14829:13\n[387]</ResponseBase.prototype._setStatusProperties@http://localhost:5050/app.js:16221:11\nResponse@http://localhost:5050/app.js:14773:3\nRequest/<@http://localhost:5050/app.js:14863:13\n[30]</Emitter.prototype.emit@http://localhost:5050/app.js:2488:7\n[384]</Request.prototype._end/xhr.onreadystatechange@http://localhost:5050/app.js:15168:5\n"
​​​
status: 500
​​​
url: "/api/pictures"```

Consulta y alta de imagenes

Crea el backend de tu aplicación

Introducción y arquitectura de nuestro proyecto

Cómo crear una cuenta de Amazon Web Services y configurar S3 ( Almacenamiento de Archivos )

Usando el SDK de Amazon Web Services

Cómo agregar Standard ( Linter ) a nuestro código en JavaScript

Testing en JavaScript usando AVA

Prueba unitaria para validar un array

Uso de expresiones regulares para nuestras pruebas unitarias

Módulo de base de datos con RethinkDB

Introduccion a RethinkDB

Accediendo a nuestra base de datos Rethinkdb desde Node.js

Creación de test para RethinkDB y almacenamiento de ruta de imágenes

Almacenamiento de rutas de imágenes en RethinkDB

Completando el test para nuestro objeto imagen

Creación de un fixture para test de petición de imágenes

Petición de de imagen desde base de datos

Consulta de todas las imágenes de nuestra base de datos

Buenas prácticas de creación de usuarios en Backend (Encriptación con Hash)

Petición de un usuario desde base de datos

Autenticación de usuario mediante password

Control de errores mediante excepciones (Try, Catch, Throws )

Consulta de imágenes en relación a nombre de usuario

Consulta de imágenes en relación a tag

Preparando nuestro módulo para microservicios

Módulo del API de nuestra aplicación

Introducción a los Microservicios

Creación de rutas para microservicios

Creación de nuestro endpoint GET /picture

Creción de nuestro endpoint POST /picture

Creción de nuestro endpoint POST /picture/:id/like

Creción de nuestro endpoint GET /picture/list

Creción de nuestro endpoint GET /picture/tag

Creación de nuestro endpoint POST /user

Creación de nuestro endpoint GET /user-name

Creación de Tokens para nuestro API usando JSON Web Tokens

Limitando nuestros request esperando recibir un Token

Test de autenticación de usuario

Módulo de Client de nuestra aplicación

Creación de nuestro cliente

Implementando el perfil de usuario

Carga de imágenes desde nuestro cliente

Cómo implementar autenticación de usuarios con Passport

Configurando un middleware en express

Estrategia de autenticación local (password / contraseña )

Consulta, altas de usuarios y manejos de errores en autenticación

Autenticación con Facebook

Creación de un token del API a partir de autenticación por Facebook

Manejo de sesiones de usuarios

Integración con nuestro Frontend