{"id":573,"date":"2024-10-02T06:43:27","date_gmt":"2024-10-02T04:43:27","guid":{"rendered":"https:\/\/daloji.com\/es\/?p=573"},"modified":"2024-10-02T06:43:56","modified_gmt":"2024-10-02T04:43:56","slug":"guia-completa-y-paso-a-paso-para-crear-webhooks-con-node-js-y-postman","status":"publish","type":"post","link":"https:\/\/daloji.com\/es\/guia-completa-y-paso-a-paso-para-crear-webhooks-con-node-js-y-postman\/","title":{"rendered":"Gu\u00eda Completa y Paso a Paso para Crear Webhooks con Node.js y Postman"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull wp-duotone-36345d-abaaaa-1\" style=\"border-style:none;border-width:0px;border-radius:0px;margin-top:0;padding-top:0vw;padding-right:0vw;padding-bottom:0vw;padding-left:0vw;min-height:100px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#c2b7a4\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"1280\" class=\"wp-block-cover__image-background wp-image-576\" alt=\"\" src=\"https:\/\/daloji.com\/es\/wp-content\/uploads\/sites\/2\/2024\/10\/servidores-conectados-webhook-1.png\" style=\"object-position:53% 48%\" data-object-fit=\"cover\" data-object-position=\"53% 48%\" srcset=\"https:\/\/daloji.com\/es\/wp-content\/uploads\/sites\/2\/2024\/10\/servidores-conectados-webhook-1.png 896w, https:\/\/daloji.com\/es\/wp-content\/uploads\/sites\/2\/2024\/10\/servidores-conectados-webhook-1-210x300.png 210w, https:\/\/daloji.com\/es\/wp-content\/uploads\/sites\/2\/2024\/10\/servidores-conectados-webhook-1-717x1024.png 717w, https:\/\/daloji.com\/es\/wp-content\/uploads\/sites\/2\/2024\/10\/servidores-conectados-webhook-1-768x1097.png 768w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-b77dfac5 wp-block-group-is-layout-flex\">\n<p class=\"has-text-align-right has-text-color\" style=\"color:#c8c4d3;font-size:clamp(67.975px, 4.248rem + ((1vw - 3.2px) * 5.884), 148px);font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase\">Webhooks<\/p>\n\n\n\n<p class=\"has-text-align-right has-text-color\" style=\"color:#ac94b2;font-size:clamp(67.975px, 4.248rem + ((1vw - 3.2px) * 5.884), 148px);font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase\">Webhooks<\/p>\n\n\n\n<p class=\"has-text-align-right has-text-color\" style=\"color:#71689c;font-size:clamp(67.975px, 4.248rem + ((1vw - 3.2px) * 5.884), 148px);font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase\">Webhooks<\/p>\n\n\n\n<p class=\"has-text-align-right has-text-color\" style=\"color:#444178;font-size:clamp(67.975px, 4.248rem + ((1vw - 3.2px) * 5.884), 148px);font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase\">Webhooks<\/p>\n<\/div>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-heading-2-font-size\">Gu\u00eda Pr\u00e1ctica Paso a Paso para Webhooks<\/p>\n\n\n\n<p class=\"has-heading-3-font-size\">1. \u00bfQu\u00e9 es un Webhook?<\/p>\n\n\n\n<p>Un webhook es una forma en que una aplicaci\u00f3n te notifica autom\u00e1ticamente cuando ocurre un evento, enviando datos a otro sistema.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tip: Los webhooks son \u00fatiles para automatizar procesos, eliminando la necesidad de verificar manualmente si algo ha cambiado o si ha ocurrido un evento.<\/p>\n<\/blockquote>\n\n\n\n<p>Imagina que tienes un formulario en tu sitio web. Cada vez que alguien env\u00eda el formulario, el webhook env\u00eda los datos de ese formulario a otra aplicaci\u00f3n, como un CRM.<\/p>\n\n\n\n<p class=\"has-heading-3-font-size\">2. Herramientas necesarias para empezar<\/p>\n\n\n\n<p>A continuaci\u00f3n, te indico las herramientas que necesitar\u00e1s para configurar y probar tus webhooks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Postman:<\/strong> Herramienta para simular y enviar solicitudes HTTP.<\/li>\n\n\n\n<li><strong>Ngrok:<\/strong> Exponer tu servidor local a internet y recibir solicitudes de webhook.<\/li>\n\n\n\n<li><strong>Editor de c\u00f3digo:<\/strong> Usa uno como Visual Studio Code.<\/li>\n\n\n\n<li><strong>Servidor local:<\/strong> Configura un servidor local con Node.js o Python para manejar los webhooks.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-heading-3-font-size\">3. Configuraci\u00f3n b\u00e1sica de un Webhook con Node.js<\/p>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 1: Instalar Node.js<\/p>\n\n\n\n<p>Si a\u00fan no tienes Node.js, <a href=\"https:\/\/nodejs.org\/\">desc\u00e1rgalo aqu\u00ed<\/a> e inst\u00e1lalo.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tip: Para verificar si la instalaci\u00f3n fue exitosa, abre tu terminal o consola y escribe: <code>node -v<\/code><\/p>\n<\/blockquote>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 2: Crear el proyecto<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:#d0d0d0\" class=\"has-inline-color has-foreground-color\">mkdir proyecto-webhook\ncd proyecto-webhook\nnpm init -y\nnpm install express body-parser<\/mark><\/code><\/pre>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 3: Crear el servidor de webhook<\/p>\n\n\n\n<p>Crea un archivo <code>app.js<\/code> dentro de tu carpeta del proyecto y pega el siguiente c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:#d0d0d0\" class=\"has-inline-color has-foreground-color\">const express = require('express');\nconst bodyParser = require('body-parser');\nconst app = express();\napp.use(bodyParser.json());\n\napp.post('\/webhook', (req, res) => {\n    console.log('Datos recibidos del webhook:', req.body);\n    res.status(200).send('Webhook recibido correctamente');\n});\n\nconst PORT = 3000;\napp.listen(PORT, () => {\n    console.log(`Servidor escuchando en http:\/\/localhost:${PORT}`);\n});<\/mark><\/code><\/pre>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 4: Ejecutar el servidor<\/p>\n\n\n\n<p>En tu terminal, ejecuta el servidor:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:#d0d0d0\" class=\"has-inline-color has-secondary-color\">node app.js<\/mark><\/code><\/pre>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 5: Exponer el servidor local con ngrok<\/p>\n\n\n\n<p>Instala <strong>ngrok<\/strong> si no lo tienes. Puedes <a href=\"https:\/\/ngrok.com\/\">descargarlo aqu\u00ed<\/a>. En tu terminal, inicia ngrok para exponer tu servidor local:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:#d0d0d0\" class=\"has-inline-color has-foreground-color\">ngrok http 3000<\/mark><\/code><\/pre>\n\n\n\n<p class=\"has-heading-3-font-size\">4. Probar el Webhook con Postman<\/p>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 1: Abrir Postman<\/p>\n\n\n\n<p>Si no tienes Postman, puedes <a href=\"https:\/\/www.postman.com\/downloads\/\">descargarlo aqu\u00ed<\/a>. Abre Postman y selecciona el m\u00e9todo <strong>POST<\/strong> en la esquina superior izquierda.<\/p>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 2: Configurar la solicitud<\/p>\n\n\n\n<p>Pega la URL de ngrok que copiaste anteriormente en el campo de URL, a\u00f1adiendo <code>\/webhook<\/code> al final, por ejemplo: <code>http:\/\/abcd1234.ngrok.io\/webhook<\/code>.<\/p>\n\n\n\n<p>Selecciona la pesta\u00f1a <strong>Body<\/strong> en Postman, luego selecciona <strong>raw<\/strong> y cambia el tipo de datos a <strong>JSON<\/strong>. Ingresa el siguiente JSON en el cuerpo de la solicitud:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:#d0d0d0\" class=\"has-inline-color has-foreground-color\">{\n    \"evento\": \"nuevo_lead\",\n    \"nombre\": \"Juan Perez\",\n    \"email\": \"juan.perez@example.com\"\n}<\/mark><\/code><\/pre>\n\n\n\n<p class=\"has-heading-4-font-size\">Paso 3: Enviar la solicitud<\/p>\n\n\n\n<p>Haz clic en el bot\u00f3n <strong>Send<\/strong> para enviar los datos. Si todo est\u00e1 correcto, ver\u00e1s el mensaje \u00abWebhook recibido correctamente\u00bb en la respuesta y los datos enviados deber\u00edan aparecer en la consola de tu servidor.<\/p>\n\n\n\n<p class=\"has-heading-3-font-size\">5. Crear un Webhook en una Plataforma (Marketo o Zapier)<\/p>\n\n\n\n<p class=\"has-heading-4-font-size\"><strong>Paso 1: Crear el Webhook en Marketo<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accede a tu cuenta de <strong>Marketo<\/strong>.<\/li>\n\n\n\n<li>Ve a <strong>Admin > Webhooks<\/strong>.<\/li>\n\n\n\n<li>Haz clic en <strong>Nuevo Webhook<\/strong> y proporciona un nombre descriptivo, por ejemplo: <em>Webhook para nuevos leads<\/em>.<\/li>\n\n\n\n<li>En la <strong>URL del webhook<\/strong>, pega la URL p\u00fablica de <strong>ngrok<\/strong> (la que expone tu servidor local).<\/li>\n\n\n\n<li>Configura el m\u00e9todo <strong>POST<\/strong> y selecciona el formato de datos como <strong>JSON<\/strong>.<\/li>\n\n\n\n<li>A\u00f1ade tokens o variables personalizadas si es necesario (por ejemplo, tokens para identificar al lead).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Paso 2: Probar el Webhook<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Crea una <strong>campa\u00f1a<\/strong> o flujo de trabajo que dispare el webhook. Puedes definir un evento como la creaci\u00f3n de un nuevo lead, la actualizaci\u00f3n de un contacto o una compra.<\/li>\n\n\n\n<li><strong>Guarda<\/strong> y activa el flujo.<\/li>\n\n\n\n<li>Cuando se cumpla la condici\u00f3n que dispara el webhook (por ejemplo, cuando un nuevo lead ingrese en tu base de datos), el webhook enviar\u00e1 los datos al servidor configurado (en este caso, tu servidor local expuesto con ngrok).<\/li>\n\n\n\n<li><strong>Verifica<\/strong> en la consola de tu servidor si los datos est\u00e1n llegando correctamente.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Paso 3: Configurar un Webhook en Zapier (alternativa a Marketo)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Si prefieres utilizar <strong>Zapier<\/strong>, sigue estos pasos:\n<ol class=\"wp-block-list\">\n<li>Accede a tu cuenta de <strong>Zapier<\/strong> y crea un nuevo <strong>Zap<\/strong>.<\/li>\n\n\n\n<li>Selecciona el evento que desencadenar\u00e1 el webhook, como \u00abNuevo lead en una aplicaci\u00f3n\u00bb o \u00abNuevo formulario enviado\u00bb.<\/li>\n\n\n\n<li>En la secci\u00f3n de acciones, elige la acci\u00f3n <strong>Webhook<\/strong>.<\/li>\n\n\n\n<li>Configura la <strong>URL<\/strong> del webhook (nuevamente, usa la URL de ngrok o la de tu servidor en producci\u00f3n).<\/li>\n\n\n\n<li>Define el formato de los datos, t\u00edpicamente <strong>JSON<\/strong>, y personaliza los campos que desees enviar.<\/li>\n\n\n\n<li>Prueba el flujo enviando datos reales a tu webhook y verifica en tu servidor si se reciben correctamente.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Paso 4: Monitorizaci\u00f3n y Ajustes<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Revisa logs<\/strong>: Aseg\u00farate de monitorear los registros de tu servidor para capturar cualquier error o comportamiento inesperado.<\/li>\n\n\n\n<li><strong>Validar respuesta<\/strong>: Los webhooks deben responder con un c\u00f3digo <strong>HTTP 200<\/strong> si todo sali\u00f3 correctamente, o un c\u00f3digo de error si algo fall\u00f3.<\/li>\n\n\n\n<li><strong>Optimizaci\u00f3n<\/strong>: Ajusta los par\u00e1metros y eventos de tu webhook seg\u00fan las necesidades de tu aplicaci\u00f3n para garantizar una integraci\u00f3n eficiente y sin fallos.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusi\u00f3n<\/h3>\n\n\n\n<p>Los webhooks son una herramienta poderosa para la integraci\u00f3n de datos en tiempo real y la automatizaci\u00f3n de flujos de trabajo. Con esta gu\u00eda, habr\u00e1s aprendido a configurar y probar webhooks tanto en tu servidor local como en plataformas de marketing como <strong>Marketo<\/strong> y herramientas de automatizaci\u00f3n como <strong>Zapier<\/strong>. Aseg\u00farate de seguir las buenas pr\u00e1cticas de seguridad y monitoreo para garantizar el funcionamiento estable y seguro de tus webhooks.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gu\u00eda Pr\u00e1ctica Paso a Paso para Webhooks 1. \u00bfQu\u00e9 es un Webhook? Un webhook es una forma en que una aplicaci\u00f3n te notifica autom\u00e1ticamente cuando ocurre un evento, enviando datos a otro sistema. Tip: Los webhooks son \u00fatiles para automatizar procesos, eliminando la necesidad de verificar manualmente si algo ha cambiado o si ha ocurrido [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-573","post","type-post","status-publish","format-standard","hentry","category-herramientas"],"_links":{"self":[{"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/posts\/573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/comments?post=573"}],"version-history":[{"count":2,"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/posts\/573\/revisions"}],"predecessor-version":[{"id":579,"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/posts\/573\/revisions\/579"}],"wp:attachment":[{"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/media?parent=573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/categories?post=573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daloji.com\/es\/wp-json\/wp\/v2\/tags?post=573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}