Cómo configurar Webhooks para SMS y Voice entrantes en Glitch

En este tutorial, aprenderás cómo configurar webhooks para manejar llamadas de voz entrantes y mensajes SMS usando Glitch y un servidor Node.js, con Vonage como tu plataforma de comunicación. Un webhook es una forma de que una aplicación envíe datos en tiempo real a otra cuando ocurre un evento específico. Actúa como un oyente, a la espera de un evento -como una llamada entrante o SMS- y desencadena una acción predefinida cuando se produce ese evento. Esto permite a su servidor reaccionar instantáneamente a los desencadenantes externos, asegurando respuestas oportunas a las interacciones del usuario.

La implementación de webhooks proporciona beneficios significativos para su aplicación. Al permitir la gestión en tiempo real de llamadas de voz y mensajes SMS, puede crear experiencias de comunicación más interactivas y receptivas para sus usuarios. Por ejemplo, puede automatizar las respuestas de atención al cliente, integrarse con sistemas CRM para registrar interacciones o activar flujos de trabajo basados en mensajes entrantes. Esto puede mejorar la participación de los usuarios y la eficiencia al reducir las tareas manuales.

Al finalizar esta guía, tendrás un servidor web completamente funcional que escucha y procesa llamadas entrantes y mensajes SMS a través de Vonage. ¡Comencemos!

Requisitos previos

• A Cuenta de desarrollador de Vonage

• A Glitch Account

  Vonage API Account

  To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

  

  Ready to start building?

  Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Establezca y configure su proyecto

Seguiremos los siguientes pasos:

1. Crea un nuevo proyecto.

2. Configure su servidor.

3. Instalar dependencias.

4. Comparte y configura tu proyecto.

5. Integra webhooks en tu aplicación de Vonage.

6. Pruebe sus nuevas funciones.

Paso 1: Crear un nuevo proyecto

Accede a tu Account de Glitch.

Haga clic en "Nuevo proyecto" en la parte superior derecha y, a continuación, haga clic en "glitch-hello-node".

Una vez hecho esto, verá el nuevo proyecto creado.

Glitch Hello Node

Paso 2: Configure su servidor

Para configurar tu servidor para gestionar llamadas entrantes y salientes y SMS, sigue estos pasos:

1. En el panel izquierdolocalice y haga clic en server.js.

   serverjs file

2. En el panel derechoseleccione todo el contenido de server.js y elimínelo.

3. Copie y pegue el fragmento de código proporcionado en server.js. Este código configurará un servidor web capaz de procesar peticiones web para gestionar llamadas entrantes y salientes y SMS.

const path = require("path");
const app = require('express')();
const bodyParser = require('body-parser');
const fastify = require("fastify")({ logger: true });

fastify.register(require("@fastify/static"), {
  root: path.join(__dirname, "public"),
  prefix: "/",
});

fastify.register(require("@fastify/formbody"));

fastify.register(require('@fastify/express')).after(() => {
  fastify.use(bodyParser.urlencoded({ extended: false })); // for Postman x-www-form-urlencoded
  fastify.use(bodyParser.json());
  fastify.use(app);
});

app.get("/webhooks/answer", function (request, reply) {
  const from = request.query.from;
  const fromSplitIntoCharacters = from.split('').join(' ');
  const ncco = [{
    action: 'talk',
    text: `Thank you for calling from ${fromSplitIntoCharacters}`,
    loop: 10
  }];
  console.log(`logging call from ${fromSplitIntoCharacters}`);
  reply.json(ncco);
});

app.get("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  const params = Object.assign(request.query, request.body);
  console.log(params);
  reply.status(200).end();
});

app.post("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  console.log(request.body);
  reply.status(200).end();
});

fastify.listen(
  { port: process.env.PORT, host: "0.0.0.0" },
  function (err, address) {
    if (err) {
      console.error(err);
      process.exit(1);
    }
    console.log(`Your app is listening on ${address}`);
  }
);

Si desea aumentar la duración de la llamada, busque el parámetro loop en el fragmento de código y ajuste su valor.

const ncco = [{
  action: 'talk',
  text: `Thank you for calling from ${fromSplitIntoCharacters}`,
  loop: 10
}];
console.log(`logging call from ${fromSplitIntoCharacters}`);
reply.json(ncco);

Verify that you are using the correct Node.js version in your package.json archivo:

1. Haga clic en package.json en el panel izquierdo.

2. En el panel derecho, localice las líneas que especifican la versión de Node.js.

3. Comprueba si la versión de Node.js es 16.x. Si no lo está, actualízala a 16.x.

"engines": {

  "node": "16.x"

}

Paso 3: Instalar dependencias

Haga clic en "Terminal en la parte inferior de la pantalla.

buttonEjecute el siguiente comando para actualizar los paquetes existentes:

npm update

Instale las dependencias necesarias con el siguiente comando:

npm i express @fastify/express body-parser dotenv @vonage/server-sdk @vonage/voice

Ejecute la función actualizar para aplicar los cambios:

refresh

Paso 4: Comparta y configure su proyecto

Haga clic en el botón azul "Compartir" de la parte superior derecha y copie el enlace al sitio.

Abre tu editor de texto favorito y pega el enlace que acabas de copiar. A continuación, pega las siguientes URL:

• URL de la respuesta: {su enlace}/webhooks/respuesta

• URL de entrada: {su enlace}/webhooks/inbound-sms

Share Project

Paso 5: Integrar Webhooks en tu aplicación de Vonage

Inicia sesión en tu cuenta de desarrollador de Vonage.

Para comprar un número de teléfono de Vonage, ve al menú del panel izquierdo y selecciona "Numbers" (Números)y luego "Comprar Numbers".. Selecciona el país desde el cual deseas comprar el número. En Características, seleccione SMS y Voice.

Haga clic en "Buscar" y "Comprar" el número que desea comprar.

En el menú del panel izquierdo, haga clic en "Applications" (Aplicaciones)y, a continuación "Crear una nueva aplicación" en el panel derecho.

Actualice su solicitud con la siguiente información:

• Dale a tu aplicación un nombre fácil de usar.

• Haz clic en el botón "Generar clave pública y privada". Esto descargará un archivo de clave privada llamado private.key a su escritorio. Guarde este archivo en una carpeta segura, ya que lo necesitará más adelante.

• En la sección "Capacidades", actívela:

  • Voice

  • Mensajes

• Configura las funciones de Voice:

  • URL de la respuesta: Pegue la URL de la respuesta que copió anteriormente.

  • URL del evento: Pega la misma URL de respuesta.

  • URL de reserva: Pegue la misma URL de respuesta.

• Configurar las capacidades de Mensajes:

  • URL de entrada: Pegue la URL de entrada que copió anteriormente.

  • URL de estado: Pegue la misma URL de entrada.

• Haga clic en "Generar nueva solicitud" en la parte inferior derecha.

capabilitiesUna vez creada la solicitud, vincule el número adquirido a la solicitud haciendo clic en el botón "enlace". . Copia el número de Vonage vinculado y guárdalo ya que necesitarás llamarlo más tarde.

link numberEn el panel izquierdo, haga clic en "Configuración de la API"seleccione "Messages API" (API de mensajes) y guarde los cambios.

Paso 6: Pruebe sus nuevas funciones.

Ahora que ha integrado un webhook para llamadas de voz entrantes¡vamos a probarlo!

1. Haz una llamada de voz desde tu teléfono al número de Vonage.

2. Al conectar, deberías escuchar un mensaje como "Gracias por llamar desde...".

3. Ve al panel de control de Vonage y, en el panel de la izquierda, haz clic en Registros. Aquí, puedes confirmar que la llamada se recibió correctamente.

Inbound Call LogSi desea aumentar la duración de la llamada, cambie el valor del parámetro "bucle".

Ahora que ha integrado un webhook para SMS entrantesvamos a probarlo.

1. Envía un SMS desde cualquier número al número de Vonage.

2. Ve al panel de control de Vonage y, en el panel de la izquierda, haz clic en Registros. Aquí, puedes confirmar que la prueba se recibió correctamente.

SMS log

Conclusión

Y, ¡ya está! Acabas de configurar webhooks para gestionar estas comunicaciones en tiempo real. Su aplicación puede ahora responder a los eventos entrantes a medida que ocurren. Puedes ampliar aún más esta aplicación siguiendo nuestro tutorial sobre cómo añadir código de cliente para llamadas de voz salientes y SMS salientes y cómo realizar una llamada de voz saliente y enviar un SMS saliente. Si has seguido este tutorial para tus propios proyectos, ¡nos encantaría que nos lo contaras! Únete a la conversación en nuestra Slack de la comunidad de Vonage o envíanos un mensaje en Xantes conocido como Twitter.