Creando un endpoint en la API para servir preguntas al cliente

Clase 34 de 75 • Curso de MEAN 2017

Clase anteriorSiguiente clase

Quimey Lucas Marquez

student•

En el minuto 4 repite video

Jehiel Martinez

student•

Para los que tienen error: throw new TypeError('Router.use() requires a middleware function but got a ’ + gettype(fn)).

Lo solucione colocando las llaves en el archivo app.js en:
import { question } from ´./routes´

Olga Lucia Rodriguez Meneses

student•

Gracias, tuve ese mismo error y tu solución me sirvió.
Podrías explicar un poco de que se trata el error?

Jesus Sandrea

student•

Hola tengo este error:

 npm start

> glassoverflow@0.0.0 start C:\Users\Jesus\Documents\Proyectos\glassoverflow
> concurrently -r "npm run start:server" "npm run start:client"

Error occured when executing command: npm run start:clientError: spawn          cmd.exe ENOENT
    at _errnoException (util.js:1024:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:         190:19)
    at onErrorNT (internal/child_process.js:372:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! glassoverflow@0.0.0 start: `concurrently -r "npm run start:se         rver" "npm run start:client" `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the glassoverflow@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely addi         tional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jesus\AppData\Roaming\npm-cache\_logs\2017-12-17         T17_47_04_775Z-debug.log

Diego Forero

Team Platzi•

Prueba a correr cada comando por aparte osea
npm run start:server
y
npm run start:client

El traceback no dice realmente que se esta rompiendo, al parecer tiene que ver algo con el start:client

Jesus Sandrea

student•

Solucionado! Tenia un problema en la variable de entorno PATH, agregando esto C:\Windows\System32.

Roberto Bock

student•

Primero un poco de teoría. Un Router de express es la manera que nos provee express de crear rutas modulares, es decir declarar rutas en otros archivos. Lo que se busca con esto es desde una especie de “nodo” express principal el cual define una ruta base (que en este caso es “questions”) se le puedan agregar rutas hijas o “mini apps” las cuales se concatenarán en dicha ruta, pudiendo quedar como ruta final algo como

/question/ruta-hija1
/question/ruta-hija2
/question/ruta-hija3

Otro punto importante es que en Javascript podemos importar módulos desde carpetas, y para poder hacer eso necesitamos crear un archivo index.js en esa carpeta el cual exportará el o los módulos que se requieran. Por eso, en esta parte del curso se crea una carpeta llamada “routes” en la cual creamos dos archivos, uno index.js y otro question.js

En question.js declaramos las rutas hijas y las exportamos

En index.js las exportamos
export { default as question } from './question'

y finalmente desde app.js que está a la misma altura de la carpeta routes importamos lo que se de dicha carpeta a través del archivo routes/index.js, y le decimos a express (el principal o base) que ya no haga “get” como al principio sino que use todo lo que se creó en _question.js _

Entonces la cosa va así

creamos question.js, ahí creamos una constante llamada question que será un objeto con la misma estructura que definimos para la clase question en el proyecto de angular, y luego creamos una constante de tipo array con 10 veces el objeto question

luego creamos una constante app que contendrá el mini app de express

const app = express.Router()

con esta app declaramos las rutas que se le van a concatenar al “app master” (el que está en app.js), en este caso
“/” y “:id”, con lo cual, al concatenarlas nos quedará algo como api/question**/** y api/question**/1**, luego exportamos esta app y desde el routes/index.js exportamos esta app pero con un alias nuevo y más mnemotécnico que será “question”

Finalmente desde el app.js (el que está en la ruta del server) importamos question desde el folder /routes (ya que como se dijo antes, el folder routes tiene un index.js que node va a buscar por defecto al intentar importar desde un folder) y le decimos a nuestra constante app que lo use, por lo que va a concatenar las rutas hijas a su ruta base. Esto se hace al escribir las siguientes líneas de código

app.use(‘api/question’, question)

y listo, el app a partir de ahora reconocerá las nuevas rutas que se definieron en el proyecto del server

Yadiel Vélez

student•

Gracias por facilitar la explicación. El profesor debió haber explicado esto y otras cosas más muy importantes para no escribir código a “ciegas”.

Carlos Enrique Ramírez Flores

student•

buen trabajo

Diego Artiles

student•

Para los que usan Windows, y tienen errores al ejecutar el comando npm start… Lo que le recomiendo es anteponer la palabra SET a DEBUG y despues colocar un “&”. De esta manera:

"start:server": "SET NODE_ENV=development DEBUG=platzi-overflow* & nodemon server/index.js --exec babel-node"

José Ignacio Miranda

student•

Gracias!

Carlos José Moh Lugo

student•

gracias compañero

Kevyn Andress Villarraga Quitian

student•

para que funcione babel y nodemon se debe poner dentro del start lo en la seccion de "start:server" "start:server": "DEBUG=platzi-overflow* nodemon --exec babel-node server/index.js",

Maided Guadalupe Hernández Ponce

student•

Gracias!

Joshua Michael Rodriguez

student•

En mi caso tuve que volver a ejecutar el comando npm start para que se aplicaran los cambios. Por si a alguien le sucede.

Yadiel Vélez

student•

Deberían volver a subir este vídeo. Hay muchas cosas que se obvian y por lo que veo en los comentarios, no soy el único al que le salen errores.

Andrs

student•

Hola al parecer se han producido algunos cambios de middleware en la nueva versión de Express y me sale este error:

C:\Users\User\Desktop\Desarrollo\Javascript\MEAN\platzi-overflow\node_modules\express\lib\router\index.js:458
throw new TypeError('Router.use() requires a middleware function but got a ’ + gettype(fn))

¿a alguien mas le sucede?, ¿lo han solucionado?

Andrs

student•

reescribí el codigo con una lógica un poco mas simple y me funciono, aquí dejo el repositorio por si a alguien mas le sirve 😄

Mauricio Hernan Cabrera

student•

Seguramente te habras confundido en el index.js de routes con un import y no como un export, te lo digo porque me paso jajaja

Walter Lensinas

student•

Buenos días, les paso el código del proyecto:

Steps:

git clone https://github.com/wlensinas/platzi-overflow-wl.git
git checkout 34-api
npm install
npm start

24/01/2019

David Daniel Castillo Nava

student•

Yo lo hice asi:

Controller/question.js archivo que manejara todo lo relacionado a las acciones sobre la url question

const question = {
	_id: 1,
	title: '¿Cómo reutilizo un componente en Android?',
	description: 'Miren esta es mi pregunta',
	createdAt: new Date(),
	icon: 'devicon-android-plain',
	answers: [],
	user: {
		firstName: 'David',
		lastName: 'Castillo',
		email: 'davecas26@gmail.com',
		password: '123456'
	}
}

const questions = new Array(10).fill(question)

function getQuestions (req, res) {
	res.status(200).json(questions)
}

function getQuestion (req, res) {
	res.status(200).json(question)
}

export default {
	getQuestions,
	getQuestion
}

archivo de routes/index.js este archivo manejara todas las rutas de cada controllador

import express from 'express'
import questionCtrl from '../controller/question'

const api = express.Router()

api.get('/question', questionCtrl.getQuestions)
api.get('/question/:questionId', questionCtrl.getQuestion)

export default api

archivo app.js en este archivo le agrego a /api todas las rutas agregadas en routes/index.js, Y pensare para agregar en al ruta principal un sistema de links para todas las rutas que existen.

import express from 'express'
import api from './routes'

const app = express()

app.get('/', (req, res) => {
	res.send('Hola desde express!')
})
app.use('/api', api)

export default app

David Daniel Castillo Nava

student•

Pueden ver mejor aqui MEAN-POF-DAVECAST

Herdic Asmeth Diaz Munevar

student•

cuando agregues el nodemon quita el & que estaba antes babel-node

Maided Guadalupe Hernández Ponce

student•

Aparte de poner la ruta en el package: DEBUG=platzi-overflow* nodemon --exec babel-node server/index.js

Recuerden tener bien instalado todo. Saludos.

Daniel Alejandro Molina Yepes

student•

Excelente!!

Alvaro Gonzalez

student•

Hola, profesor, me puedes esplicar a que se debe el error, puedes explicarme ?

Jesus Henao

student•

Al ejecutar el npm start me lanza el siguiente error. No se cual es el problema

[nodemon] app crashed - waiting for file changes before starting...

Diego Forero

Team Platzi•

No sale ningún otro error? puedes compartir el traceback completo por favor

Jorge Zamudio

student•

que devuelve en especifico la variable app que se exporta por defecto?
que es lo que se importa al importar {question} en app.js?

Diego Forero

Team Platzi•

Te recomiendo que hagas el curso de fundamentos de JavaScript donde se explican estos conceptos. Te voy a tratar de explicar, cuando exportas, por lo general exportas la función principal de ese archivo y por lo tanto lo que vas a importar en un archivo va a ser la función exportada, y la recibes con el nombre que pones entre {} en este caso question.

Javier Molinas

student•

Tengo windows y me retorna un error. No me anda el server cuando uso nodemon. Sin nodemon si me corre bien. E puesto la forma que muestra sacha y la de poner el ‘&’ en el start:server pero ninguna de las dos funciona.
El error es el siguiente:

[nodemon] app crashed - waiting for file changes before starting...```

Javier Molinas

student•

Solucionado.

Diego Forero

Team Platzi•

Puedes compartir la solución por si a un compañero le sucede lo mismo puede intentar con tu solución y muy probablemente le funcione. Gracias.

Alvaro Ruben Hurtado Maldonado

student•

hola cual es el codigo que me permita buscar un objeto (por el firstName por ejemplo) adquirir este atributo y modificarlo?
ayuda por favor

Creando un endpoint en la API para servir preguntas al cliente

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más