{"id":221,"date":"2023-04-16T11:56:09","date_gmt":"2023-04-16T14:56:09","guid":{"rendered":"https:\/\/danielsegovia.com\/plataforma\/?p=221"},"modified":"2023-08-11T09:54:05","modified_gmt":"2023-08-11T12:54:05","slug":"22-express","status":"publish","type":"post","link":"https:\/\/danielsegovia.com\/plataforma\/22-express\/","title":{"rendered":"22 &#8211; Express"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u00a1Hola a todos, queridos desarrolladores\/as! Hoy vamos a embarcarnos en un emocionante viaje por el maravilloso mundo de Express, un poderoso framework web para Node.js que nos permitir\u00e1 construir nuestra propia API de manera r\u00e1pida y sencilla.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>API REST: Explorando opciones para construir APIs<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En el mundo del desarrollo web, existen varias opciones para construir APIs que permiten la comunicaci\u00f3n entre aplicaciones. Dos de las opciones m\u00e1s populares son GraphQL y API REST. En esta exploraci\u00f3n, nos enfocaremos en API REST, una arquitectura ampliamente utilizada y muy poderosa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Definiendo endpoints para comunicaci\u00f3n<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de profundizar en los detalles de API REST, es importante comprender qu\u00e9 es un \u00abendpoint\u00bb. En el contexto de las APIs, un \u00abendpoint\u00bb es una URL espec\u00edfica que nuestro servidor expone y que los clientes pueden utilizar para interactuar con la API. Cada endpoint representa una entidad o un recurso en el servidor, y puede realizar una operaci\u00f3n espec\u00edfica, como recuperar datos, crear nuevos recursos, actualizar informaci\u00f3n o eliminar recursos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En una API REST, la comunicaci\u00f3n con el servidor se basa en los m\u00e9todos HTTP, como <code>GET<\/code>, <code>POST<\/code>, <code>PUT<\/code> y <code>DELETE<\/code>. Cada uno de estos m\u00e9todos se utiliza para interactuar con un endpoint espec\u00edfico y realizar una acci\u00f3n determinada en el servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, consideremos una API REST que maneja una lista de tareas. Podr\u00edamos tener los siguientes endpoints:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>GET \/tareas<\/code>: Utilizado para recuperar todas las tareas.<\/li>\n\n\n\n<li><code>GET \/tareas\/1<\/code>: Utilizado para recuperar la tarea con el ID 1.<\/li>\n\n\n\n<li><code>POST \/tareas<\/code>: Utilizado para crear una nueva tarea.<\/li>\n\n\n\n<li><code>PUT \/tareas\/1<\/code>: Utilizado para actualizar la tarea con el ID 1.<\/li>\n\n\n\n<li><code>DELETE \/tareas\/1<\/code>: Utilizado para eliminar la tarea con el ID 1.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Cada uno de estos endpoints representa una acci\u00f3n espec\u00edfica que podemos realizar en la API REST. Al realizar una solicitud HTTP a un endpoint, el servidor ejecutar\u00e1 la acci\u00f3n correspondiente y responder\u00e1 con los datos solicitados o una confirmaci\u00f3n del cambio realizado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Diferencia entre API y API REST<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es importante destacar la diferencia entre API y API REST. Mientras que API (Interfaces de Programaci\u00f3n de Aplicaciones) es un t\u00e9rmino general que describe cualquier conjunto de definiciones y protocolos que permiten la comunicaci\u00f3n entre distintas aplicaciones, API REST es una arquitectura espec\u00edfica que utiliza el protocolo HTTP y sigue ciertas convenciones para manejar recursos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Express<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/expressjs.com\/es\/\" target=\"_blank\" rel=\"noreferrer noopener\">Express<\/a> es un framework web minimalista y flexible para Node.js que permite construir aplicaciones web y APIs de manera r\u00e1pida y sencilla. Es una de las herramientas m\u00e1s populares y ampliamente utilizadas en el ecosistema de Node.js debido a su simplicidad y su enfoque en facilitar el desarrollo de aplicaciones backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Express proporciona una capa de abstracci\u00f3n sobre el manejo de solicitudes y respuestas HTTP, lo que facilita la creaci\u00f3n de rutas, manejo de par\u00e1metros, implementaci\u00f3n de middleware y configuraci\u00f3n de servidores. Adem\u00e1s, ofrece una amplia variedad de funcionalidades y m\u00f3dulos adicionales mediante su sistema de middleware, lo que permite extender las capacidades de la aplicaci\u00f3n seg\u00fan las necesidades espec\u00edficas del proyecto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hoy vamos a embarcarnos en un viaje por el maravilloso mundo de Express, un poderoso framework web para Node.js que nos permitir\u00e1 construir aplicaciones nuestras APIs de manera r\u00e1pida y sencilla.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurando velas con Express<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Imagina a Express como un capit\u00e1n experimentado que nos ayuda a preparar nuestras velas (instalar y configurar Express) antes de zarpar en nuestro barco de desarrollo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de poder aprovechar todas las ventajas de Express, primero debemos instalarlo en nuestro proyecto. Esto se hace a trav\u00e9s de npm, el administrador de paquetes de Node.js. Ejecutamos el siguiente comando en la terminal para descargar Express y sus dependencias<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install express<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que tenemos Express en nuestro proyecto, podemos configurar nuestra aplicaci\u00f3n. Crearemos una nueva aplicaci\u00f3n utilizando la funci\u00f3n express() y la asignaremos a la variable app. \u00a1Izamos las velas y estamos listos para zarpar!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const express = require('express');\nconst app = express();\n\n\/\/ Configuraci\u00f3n de rutas, middleware y otras funcionalidades aqu\u00ed\n\nconst puerto = 5050;\napp.listen(puerto, () =&gt; {\n  console.log(`\u00a1Zarpamos desde el puerto ${puerto}!`);\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Definiendo rutas: Nuestro mapa en el viaje<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las rutas en Express son como un mapa que nos gu\u00eda en nuestro viaje. Cuando alguien nos pida un destino espec\u00edfico, sabremos qu\u00e9 camino tomar para llegar all\u00ed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En Express, definimos rutas utilizando los m\u00e9todos HTTP como GET, POST, PUT, DELETE, entre otros como hemos visto en la definici\u00f3n de API Rerst. Cada m\u00e9todo corresponde a una acci\u00f3n que queremos realizar en nuestro servidor. Por ejemplo, cuando alguien solicita la p\u00e1gina de inicio (\u00ab\/\u00bb) de nuestro sitio web, responderemos utilizando el m\u00e9todo GET.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">app.get('\/', (req, res) =&gt; {\n  res.send('Hola Mundo, funcion\u00f3 correctamente');\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Solicitudes y Respuestas: Comunic\u00e1ndonos con otros navegantes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En nuestro viaje, nos encontramos con otros navegantes que nos hacen solicitudes y esperan nuestras respuestas. Express nos ayuda a comunicarnos con ellos de manera efectiva.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En Express, cuando alguien realiza una solicitud a nuestro servidor, la solicitud se captura como un objeto req (request) y la respuesta que enviaremos se prepara como un objeto res (response). Utilizamos estos objetos para interactuar con los navegantes y enviar contenido de vuelta al cliente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo res.send() es una forma com\u00fan de enviar una respuesta al cliente. Puede enviar una cadena de texto, un objeto JSON, un archivo, entre otros. Por otro lado, el m\u00e9todo res.json() es espec\u00edficamente para enviar una respuesta en formato JSON.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">app.get('\/usuario', (req, res) =&gt; {\n  const usuario = {\n    nombre: 'Juan',\n    edad: 30,\n    ocupacion: 'Desarrollador'\n  };\n\n  \/\/ Enviamos la respuesta en formato JSON\n  console.log(\"respondo con el objeto usuario\"); \/\/ esto no ser\u00e1 parte de la respuesta\n  res.json(usuario);\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A probar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Es hora de encender nuestro programa y empezar a escuchar las solicitudes que recibimos para darles una respuesta<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para ello voy a utilizar un programa llamado <a rel=\"noreferrer noopener\" href=\"https:\/\/www.postman.com\/\" target=\"_blank\">Postman<\/a> que me permitir\u00e1 realizar request http al servidor que acabo de crear, en este caso har\u00e9 una llamada tipo <strong>GET<\/strong> a <strong>http:\/\/localhost:5050\/usuario<\/strong> <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-27-14.png\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"728\" src=\"https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-27-14.png\" alt=\"\" class=\"wp-image-664\" srcset=\"https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-27-14.png 805w, https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-27-14-300x271.png 300w, https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-27-14-768x695.png 768w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-26-56.png\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"728\" src=\"https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-26-56.png\" alt=\"\" class=\"wp-image-665\" srcset=\"https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-26-56.png 805w, https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-26-56-300x271.png 300w, https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/07\/Captura-desde-2023-07-30-15-26-56-768x695.png 768w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A trav\u00e9s del Postman simulo un la funcionalidad de Frontend solicitando datos a mi API<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 respuesta damos?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Responder los requests con un status code adecuado es una pr\u00e1ctica fundamental en el desarrollo de aplicaciones web y APIs. Los status codes son c\u00f3digos num\u00e9ricos enviados por el servidor como parte de la respuesta HTTP, y comunican el resultado del procesamiento de una solicitud realizada por el cliente. Estos c\u00f3digos proporcionan informaci\u00f3n esencial sobre el estado de la solicitud y permiten que el cliente y otros componentes comprendan c\u00f3mo se ha manejado su petici\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed hay una introducci\u00f3n sobre por qu\u00e9 es importante responder los requests con un status code adecuado:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Comunicaci\u00f3n clara y consistente:<\/strong> Los status codes proporcionan una forma estandarizada de comunicaci\u00f3n entre el servidor y el cliente. Al utilizar c\u00f3digos bien definidos, se logra una comunicaci\u00f3n clara y consistente, lo que permite que los desarrolladores y las aplicaciones comprendan r\u00e1pidamente la naturaleza de la respuesta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Indicar el resultado de la solicitud:<\/strong> Los status codes describen el resultado de la solicitud de manera concisa. Pueden informar si la solicitud fue exitosa, si se redireccion\u00f3, si hubo un error del cliente o un error interno del servidor, entre otros escenarios posibles. Esto ayuda a los clientes a determinar si su petici\u00f3n tuvo \u00e9xito y c\u00f3mo deben interpretar la respuesta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Facilitar la depuraci\u00f3n y el manejo de errores:<\/strong> Cuando una solicitud no se procesa correctamente, los status codes permiten que el cliente y el servidor comprendan la causa del problema. Esto es fundamental para facilitar la depuraci\u00f3n y el manejo de errores. Los c\u00f3digos de estado espec\u00edficos ayudan a los desarrolladores a identificar r\u00e1pidamente qu\u00e9 sali\u00f3 mal y tomar las medidas necesarias para corregir el problema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Guiar el flujo de la aplicaci\u00f3n:<\/strong> Los status codes tambi\u00e9n se utilizan para guiar el flujo de la aplicaci\u00f3n o la API. Por ejemplo, un status code de redirecci\u00f3n (3xx) indica que la ubicaci\u00f3n del recurso solicitado ha cambiado temporal o permanentemente, lo que permite al cliente tomar la acci\u00f3n adecuada para acceder al recurso actualizado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Mejorar la experiencia del usuario:<\/strong> Al responder con c\u00f3digos de estado adecuados, se mejora la experiencia del usuario. Los mensajes de error claros y precisos permiten a los clientes comprender lo que sucedi\u00f3 y c\u00f3mo pueden resolver el problema, lo que evita confusiones y frustraciones innecesarias.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed te dejo una lista de los status code m\u00e1s comunes<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Respuestas exitosas (2xx):<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>200 OK<\/strong>: La solicitud ha tenido \u00e9xito, y el servidor ha devuelto los datos solicitados.<\/li>\n\n\n\n<li><strong>201 Created<\/strong>: La solicitud ha tenido \u00e9xito y se ha creado un nuevo recurso como resultado.<\/li>\n\n\n\n<li><strong>204 No Content<\/strong>: La solicitud ha tenido \u00e9xito, pero no hay contenido para enviar en la respuesta.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Redirecciones (3xx):<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong>301 Moved Permanently<\/strong>: El recurso solicitado ha sido permanentemente trasladado a una nueva ubicaci\u00f3n.<\/li>\n\n\n\n<li><strong>302 Found<\/strong>: El recurso solicitado ha sido temporalmente trasladado a una nueva ubicaci\u00f3n.<\/li>\n\n\n\n<li><strong>304 Not Modified<\/strong>: Indica que el recurso solicitado no ha sido modificado desde la \u00faltima vez que fue solicitado.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Errores del cliente (4xx):<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li><strong>400 Bad Request<\/strong>: La solicitud no se pudo comprender debido a una sintaxis incorrecta o par\u00e1metros inv\u00e1lidos.<\/li>\n\n\n\n<li><strong>401 Unauthorized<\/strong>: El cliente no ha sido autorizado para acceder al recurso solicitado.<\/li>\n\n\n\n<li><strong>403 Forbidden<\/strong>: El servidor entiende la solicitud, pero se niega a autorizarla.<\/li>\n\n\n\n<li><strong>404 Not Found<\/strong>: El servidor no pudo encontrar el recurso solicitado.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Errores del servidor (5xx):<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"11\">\n<li><strong>500 Internal Server Error<\/strong>: Se ha producido un error inesperado en el servidor que ha impedido que pueda procesar la solicitud.<\/li>\n\n\n\n<li><strong>503 Service Unavailable<\/strong>: El servidor no est\u00e1 listo para manejar la solicitud debido a mantenimiento, sobrecarga o problemas temporales.<\/li>\n\n\n\n<li><strong>504 Gateway Timeout<\/strong>: El servidor no ha recibido una respuesta oportuna del servidor ascendente o el servidor que accede no responde a tiempo.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed te dejo un ejemplo de como responder el status code desde Node.JS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"java\" class=\"language-java\">const express = require('express');\nconst app = express();\nconst port = 3000;\n\napp.get('\/ruta', (req, res) =&gt; {\n  try {\n    \/\/ Simulamos un true o false en el if para responder 200 o 500\n    if(true){\n        res.status(200).json({ mensaje: 'Todo ha salido correctamente' });\n    } else {\n        throw new Error('Error interno del servidor');\n    }\n  } catch (error) {\n    \/\/ Respondemos con el c\u00f3digo de estado 500 y un mensaje de error\n    res.status(500).json({ error: 'Error interno del servidor' });\n  }\n});\n\napp.listen(port, () =&gt; {\n  console.log(`Servidor Express escuchando en http:\/\/localhost:${port}`);\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prep\u00e1rate para el siguiente encuentro<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hasta aqu\u00ed hemos tenido una introducci\u00f3n liviana sobre el uso de Express, en la pr\u00f3xima clase veremos m\u00e1s sobre este tema y tambi\u00e9n como distribuir nuestras archivos dentro de la arquitectura de nuestra aplicaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1Hola a todos, queridos desarrolladores\/as! Hoy vamos a embarcarnos en un emocionante viaje por el maravilloso mundo de Express, un poderoso framework web para Node.js que nos permitir\u00e1 construir nuestra propia API de manera r\u00e1pida y sencilla. API REST: Explorando opciones para construir APIs En el mundo del desarrollo web, existen varias opciones para construir &#8230; <a title=\"22 &#8211; Express\" class=\"read-more\" href=\"https:\/\/danielsegovia.com\/plataforma\/22-express\/\" aria-label=\"Leer m\u00e1s sobre 22 &#8211; Express\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3],"tags":[],"class_list":["post-221","post","type-post","status-publish","format-standard","hentry","category-backend-con-node-js","category-curso-de-node-js"],"_links":{"self":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":4,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":687,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts\/221\/revisions\/687"}],"wp:attachment":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}