Implementando un CRUD en Express.js

Clase 22 de 48 • Curso de Backend con Node.js 2019

Clase anteriorSiguiente clase

Resumen

Las siglas CRUD vienen de las palabras en inglés:

Create - crear
Read - leer
Update - actualizar
Delete - eliminar

Vicente Daniel Zurita Salas

student•

movies.js

const moviesMock = [
  {
    id: 'd2a4a062-d256-41bb-b1b2-9d915af6b75e',
    title: 'Notti bianche, Le (White Nights)',
    year: 2019,
    cover: 'http://dummyimage.com/800x600.png/ff4444/ffffff',
    description:
      'In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.',
    duration: 66,
    contentRating: 'G',
    source: 'https://ovh.net/semper/rutrum/nulla/nunc.jsp',
    tags: [
      'Action|Adventure',
      'Action|Adventure|Thriller',
      'Horror|Western',
      'Horror|Thriller',
      'Comedy|Romance|Sci-Fi',
      'Adventure|Animation|Children|Comedy|Fantasy',
      'Drama'
    ]
  },
  {
    id: '3f951b6d-03fa-4fb0-a7a1-188c0abe9e06',
    title: "King Solomon's Mines",
    year: 2019,
    cover: 'http://dummyimage.com/800x600.png/dddddd/000000',
    description:
      'Integer tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.',
    duration: 77,
    contentRating: 'NC-17',
    source:
      'https://multiply.com/dui/proin/leo/odio/porttitor/id/consequat.jsp',
    tags: [
      'Comedy',
      'War',
      'Drama|Horror',
      'Comedy|Drama|Romance',
      'Drama|Thriller',
      'Comedy',
      'Action|Drama|War',
      'Drama'
    ]
  },
  {
    id: 'c030eed2-dad1-47f4-b660-9cfb7170eadb',
    title: 'Inhuman Resources (Redd Inc.)',
    year: 2018,
    cover: 'http://dummyimage.com/800x600.png/ff4444/ffffff',
    description:
      'Curabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est.\n\nPhasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.',
    duration: 142,
    contentRating: 'PG',
    source: 'http://odnoklassniki.ru/porta/volutpat/erat.jsp',
    tags: ['Crime|Drama|Thriller']
  },
  {
    id: 'c672ff92-c373-49f4-9c5b-f0151d304361',
    title: 'Fortress',
    year: 2019,
    cover: 'http://dummyimage.com/800x600.png/cc0000/ffffff',
    description:
      'In sagittis dui vel nisl. Duis ac nibh. Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus.\n\nSuspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst.',
    duration: 172,
    contentRating: 'PG',
    source: 'https://un.org/tortor/id/nulla/ultrices/aliquet/maecenas.png',
    tags: ['Drama', 'Drama|Mystery|Thriller', 'Drama|Thriller']
  },
  {
    id: '5ec75811-1001-4612-9743-67296d90071a',
    title: 'Transylmania',
    year: 2018,
    cover: 'http://dummyimage.com/800x600.png/ff4444/ffffff',
    description:
      'In quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.',
    duration: 155,
    contentRating: 'G',
    source: 'http://pagesperso-orange.fr/varius/ut/blandit/non/interdum/in.js',
    tags: [
      'Crime|Drama|Mystery|Thriller',
      'Crime|Drama|Mystery|Thriller',
      'Comedy|Sci-Fi',
      'Adventure|Comedy|Sci-Fi',
      'Drama'
    ]
  },
  {
    id: '63d718f2-4e37-4090-ad57-dd2cf22393e6',
    title: "Big Girls Don't Cry... They Get Even (Stepkids)",
    year: 2018,
    cover: 'http://dummyimage.com/800x600.png/ff4444/ffffff',
    description:
      'Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.\n\nQuisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.',
    duration: 173,
    contentRating: 'R',
    source: 'https://nih.gov/erat/quisque/erat/eros.jpg',
    tags: ['Action|Drama', 'Comedy']
  },
  {
    id: 'e9093aaa-daf2-4e32-aa6b-c3d79d0d9120',
    title: 'Amreeka',
    year: 2018,
    cover: 'http://dummyimage.com/800x600.png/ff4444/ffffff',
    description:
      'Vestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis.',
    duration: 115,
    contentRating: 'R',
    source: 'https://umich.edu/cursus/id/turpis/integer/aliquet.aspx',
    tags: ['Comedy|Romance', 'Drama|Thriller', 'Animation|Children']
  },
  {
    id: '94f4fa76-fcf9-4aa3-a18f-f54bb7d462bc',
    title: 'Hollow Man',
    year: 2018,
    cover: 'http://dummyimage.com/800x600.png/ff4444/ffffff',
    description:
      'Aenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.\n\nCurabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est.\n\nPhasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.',
    duration: 158,
    contentRating: 'NC-17',
    source: 'https://psu.edu/duis/bibendum/morbi/non/quam.aspx',
    tags: ['Drama', 'Thriller']
  },
  {
    id: '9a2e5834-4eb5-4083-8c21-87fdfc0b3b52',
    title: 'Hard Target',
    year: 2018,
    cover: 'http://dummyimage.com/800x600.png/dddddd/000000',
    description:
      'Praesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.',
    duration: 173,
    contentRating: 'PG',
    source: 'https://flavors.me/lorem/ipsum/dolor/sit.json',
    tags: [
      'Animation|Comedy',
      'Documentary',
      'Action|Fantasy|Horror',
      'Thriller',
      'Comedy|Crime',
      'Drama'
    ]
  },
  {
    id: '11fff70c-c312-4791-b8b4-1a0665edd79e',
    title: 'Siete minutos (Seven Minutes)',
    year: 2019,
    cover: 'http://dummyimage.com/800x600.png/5fa2dd/ffffff',
    description:
      'Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.\n\nIn congue. Etiam justo. Etiam pretium iaculis justo.',
    duration: 62,
    contentRating: 'PG',
    source:
      'http://columbia.edu/eget/orci/vehicula/condimentum/curabitur/in/libero.html',
    tags: ['Action|Adventure|Comedy|Drama|War', 'Animation', 'Drama']
  }
];

module.exports = {
  moviesMock
};

Milton Castañeda

student•

pana sos grande, gracias.

José María Cuevas Ramírez

student•

Gracias buen hombre, estaba buscando este comentario 😎

Pablo Verduzco

student•

Dejare esto por aqui: HTTP Cats 😂.

Juan Carlos García Esquivel

student•

:,)

Juan Jose Vega

student•

crack xd

Ginnio Sarabia

student•

"En la sección de enlaces te voy a dejar información sobre cuales son los códigos Http que se pueden usar"

La sección de enlaces: 🦗🦗 (Cri)

Pablo Domínguez Durán

student•

Lool, hasta aquí son como 3 veces que lo ha dicho :P

Erik Ricardo Sánchez Pérez

student•

Si quieren saber acerca de cuando se debe aplicar cada código http hay un diagrama enorme. Siempre es útil tenerlo a la mano si no sabes que código mandar dependiendo la situación 🕵️‍♂️

https://github.com/for-GET/http-decision-diagram

Beatriz Pérez Santana

student•

Códigos de estado de respuesta HTTP: https://developer.mozilla.org/es/docs/Web/HTTP/Status

Andres Roberto Coello Goyes

student•

const express = require('express');
const { moviesMock } = require('../utils/mocks/movies');

function moviesApi(app) {
    const router = express.Router();
    app.use("/api/movies", router);

    router.get("/", async function(req , res, nex) {
        try {
            const movies = await Promise.resolve(moviesMock);
            res.status(200).json({
                data: movies,
                message: 'movies listos'
            });
        } catch (error) {
            nex(error);
        }
    });
}

module.exports = moviesApi;

funcionando

Jimmy Buriticá Londoño

student•

Gracias

oswaldo Rodríguez

student•

porque no se usa PUT y si patch? cual es la diferencia ?

Steven Gonzalez

student•

Hola! Ambos se utilizan para realizar UPDATE en la data, la diferencia es que con el PUT debes enviar todo el set de datos que conforman la entidad que quieres actualizar, aunque solo quieras modificar un valor de este, y con el PATCH puedes enviar únicamente la el elemento que deseas modifcar. Saludos!

Arturo Mauricio Terceros Beltrán

student•

Put es sobre-escribir, por eso se debe enviar todo. Patch es actualizar. podrias enviar solo el dato a cambiar

Rigo Antonio Galicia Barrera

student•

¿Es recomendable utilizar arrow functions en node?

Juan Castro

teacher•

Es igual de recomendable que en JS del navegador. Es completamente de gustos. Resuelven el mismo problema. :wink:

Alexander Nova Arevalo

student•

Para quienes usen windows sin el WSL, en package.json es:

  "dev": "SET DEBUG=app:* & nodemon index",
    "start": "SET NODE_ENV=production & node index"

Henry Carmenate

student•

Por alguna razon que no lo logro ver la promesa no esta funcionando!?

const express = require('express');

const { moviesMock } = require('../utils/mocks/movies');

function moviesApi(app){
    const router = express.Router();
    app.use("/api/movies",router);
    
    router.get("/",async function(req, res,next){
        try{
            const movies = await Promise.resolve(moviesMock);
            
            res.status(200).json({
                data: movies,
                message: "Movies listed"
            });
           
        } catch(err){
            next(err);
        }
    });
}

module.exports = moviesApi;

Bryam Angel Soto Ñahui

student•

Lograste resolverlo?, bueno te comento el "asyncfunction" lo estas escribiendo junto y es separado "async function"

Andrea Méndez Díaz

student•

En tu código, tienes también junto el function y el que en este caso es -> nombre de la función moviesApi

functionmoviesApi(app){

Eso está provocando que no sirva cuando lo exportas.

Percy Tejada

student•

Otra alternativa a Postman es Insomnia, muy similar a Postman. Aquí les dejo el link: https://insomnia.rest/download/

Danny Orgas

student•

porque se usa promesa y no un emitter?, solo es duda dado que en las primeras clases se menciono que tiene más ventajas

Guillermo Rodas

teacher•

En el caso de Express la arquitectura esta orientada a callbacks y promesas, además que desde el modelo cliente servidor, la respuesta va en una sola dirección y no requiere que siempre se este escuchando.

Si tuvieramos una arquitectura de suscripción como los Web Sotckets, tiene más sentido usar Emitters.

Milton Castañeda

student•

Compañeros, alguien sabe, cual es la ventaja de utilizar, clases, analizando el código, creo que todo se puede hacer en funciones, pero quisiera saber las ventajas o desventajas de ambos y en que caso debe usarse cada uno.

Bruno Amadori

student•

En lineas generales, si el proyecto es chico y no pretendés una escalibilidad a largo plazo, podés usar funciones tranquilo y no vas a tener problemas.

Pero si el proyecto es grande y pretende una estructura que sea escalable y comprensible, conviene usar clases y una estructura orientada a objetos.

Según entiendo, las clases te permiten crear objetos que hereden sus propiedades y métodos, lo cual es útil en el caso de que tengas que crear alguna aplicación que tenga estructuras de objetos que se relacionen en términos de padre/hijo.

Con clases podés ampliar proyectos sumando clases que extiendan otras anteriores, y etcétera... Es algo muy util para desarrollar plugins, por ejemplo.

En JavaScript hasta EcmaScript2015 no existían la posibilida de usar "class". Se utilizaba un workaround con los Object.prototype. Luego de ES2015 se habilitó esta sintaxis, que es muy común en otros lenguajes de programación que SI estaban diseñados para hacer programación orientada a objetos.

Esto lo explican en el curso de Fundamentos de JS, y en el de Javascript Profesional.

Jesús Miguel Quinto Teran

student•

Si no tienen Postman, igual pueden hacer la consulta GET en el navegador en: http://localhost:3000/api/movies

Kevin FG

student•

server.js

const express = require('express')
const morgan = require('morgan')
const app = express()

app.use(morgan('dev'))

// Routes
app.use(require('./routes/index.routes'))
app.use('/movies',require('./routes/movies.routes'))


module.exports = app;

index.js

const {config} = require('../src/config/index')
const app = require('./server')

const main = async () => {
    await app.listen(config.port)
    console.log(`servidor en el puerto ${config.port}`)
}

main()

Dilan Santiago Ariza Cañon

student•

Me encanto como lo organizaste!

Javier Alvarez Jiménez

student•

Hola a todos. No sé en qué curso o video se explica esto, pero agradeceré que me puedan orientar. Tengo mi frontend con react que funciona al hacer post a json-server, también tengo mi backend que funciona bien desde postman, pero cuando hago el post desde mi front a mi back me saca el siguiente error:

Access to XMLHttpRequest at 'localhost:3000/register' from origin 'localhost:1234' has been blocked by CORS policy:

Espero me puedan ayudar.

Héctor Eduardo López Carballo

student•

Hola!

Podrías echarle un ojo a esta clase y decirnos si te funciona, pls?

Javier Alvarez Jiménez

student•

Sí me funcionó, muchas gracias :D

De hecho no tuve que leer toda la clase, en el primer comentario y el ejemplo fueron suficientes para solucionarlo. De todas formas leeré todo para evitar problemas en el futuro.

Michael Vega

student•

Veo que se tiene:

funcion moviesApi(app) {
	const router = express.Router();
	app.use("/api/movies", router);
	.
	.
	.
}

¿Qué diferencia tiene o ventaja? En vez de usar:

// En routes/movies.js
const router = express.Router();
router.get(...)

// Y en index.js
app.use("/api/movies", require("./routes/movies.js"));

Daniel Mendoza

student•

Para quienes usen VSCode

En VsCode, hay una extensión que es una alternativa a Postman. llamada Thunder Client. En lo personal, la prefiero sobre Postman porque no tengo que cambiar de ventana para hacer los requests.

https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

Alejandro González Reyes

student•

Excelente, primero se trabaja con datos en crudo con proyección a como los serviría la base de datos.

Sofia Nupieri

student•

Buena clase, me gusta la organizacion de los archivos aunque es facil perderse al principio cuando no estas familiarizado con los terminos y las funcionalidades