Cómo realizar llamadas salientes de Voice y SMS con Vonage en Glitch

En este tutorial, te mostraremos cómo integrar y realizar llamadas de voz salientes y enviar SMS salientes utilizando las API de Vonage con Glitch y Node.js. Añadir funciones de voz y SMS salientes permite a tu aplicación gestionar interacciones proactivas, como enviar notificaciones o realizar llamadas. Esta integración mejora el compromiso del usuario al permitir la comunicación automatizada y en tiempo real desde tu aplicación.

¿Listo para crear una aplicación aún más interactiva? Adelante.

Requisitos previos

• Una cuenta de desarrollador de Vonage

• Una Account Glitch

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

Suponiendo que ya has integrado un webhook para llamadas de voz entrantes y SMS entrantes en tu aplicación de Vonage, pasaremos a implementar las funciones salientes. Si necesitas ayuda para configurar tu webhook y la aplicación de Vonage, puedes seguir nuestro tutorial sobre Cómo configurar webhooks para SMS entrantes y Voice en Glitch.

Para implementar la aplicación, puedes aplicar los conocimientos adquiridos en el tutorial para configurar lo siguiente:

• private.key archivo

• Número de teléfono de Vonage

• Clave y secreto de la API de Vonage

• ID de aplicación de Vonage

• Respuesta URL

Te guiaremos por los siguientes pasos:

1. Añadir código de cliente para llamadas salientes de voz y SMS

2. Instalar dependencias

3. Establecer variables de entorno

4. Pruebe sus nuevas funciones

Paso 1: Añadir código de cliente para llamadas salientes de Voice y SMS

Accede a tu Account de Glitch.

En su proyecto Glitch, haga clic en el signo "+" situado junto a Archivos.

Asigne un nombre al archivo private.key y haga clic en Añadir este archivo.

add fileEn su editor de texto favorito, abra el archivo private.key que descargó anteriormente. Copia el contenido de tu editor de texto y pégalo en el archivo recién creado en Glitch. private.key en Glitch.

Del mismo modo, cree un nuevo archivo llamado makecall.js.

Añada el siguiente código al archivo recién creado makecall.js recién creado:

require('dotenv').config({ path: __dirname + '/../.env' });

const { Vonage } = require('@vonage/server-sdk');
const { NCCOBuilder, Talk, OutboundCallWithNCCO } = require('@vonage/voice')

const TO_NUMBER = process.env.TO_NUMBER;
const VONAGE_NUMBER = process.env.VONAGE_NUMBER;

const VONAGE_API_KEY = process.env.VONAGE_API_KEY;
const VONAGE_API_SECRET = process.env.VONAGE_API_SECRET;
const VONAGE_APPLICATION_ID = process.env.VONAGE_APPLICATION_ID;
const VONAGE_APPLICATION_PRIVATE_KEY_PATH = __dirname + "/" + process.env.VONAGE_APPLICATION_PRIVATE_KEY_PATH;

const vonage = new Vonage({
  apiKey: VONAGE_API_KEY,
  apiSecret: VONAGE_API_SECRET,
  applicationId: VONAGE_APPLICATION_ID,
  privateKey: VONAGE_APPLICATION_PRIVATE_KEY_PATH
});


async function makeCall() {
  const builder = new NCCOBuilder();
  builder.addAction(new Talk('This is a text to speech call from Vonage'));
  const resp = await vonage.voice.createOutboundCall(
    new OutboundCallWithNCCO(
      builder.build(),
      { type: 'phone', number: TO_NUMBER },
      { type: 'phone', number: VONAGE_NUMBER}
    )
  );
  console.log(resp);
}
makeCall();

A continuación, cree un nuevo archivo llamado sendsms.js.

Añada el siguiente código al archivo recién creado sendsms.js recién creado:

require('dotenv').config({ path: __dirname + '/../.env' });

const VONAGE_API_KEY = process.env.VONAGE_API_KEY;

const VONAGE_API_SECRET = process.env.VONAGE_API_SECRET;

const TO_NUMBER = process.env.TO_NUMBER;

const VONAGE_NUMBER = process.env.VONAGE_NUMBER;

const { Vonage } = require('@vonage/server-sdk');

const vonage = new Vonage({

  apiKey: VONAGE_API_KEY,

  apiSecret: VONAGE_API_SECRET

});

const from = VONAGE_NUMBER;

const to = TO_NUMBER;

const text = 'Test message using the Vonage SMS API';

vonage.sms.send({ to, from, text })

  .then(resp => { console.log('Message sent successfully'); console.log(resp); })

  .catch(err => { console.log('Error sending message'); console.error(err); });

Segundo paso:Instalar dependencias

Abre un terminal en tu proyecto Glitch.

Ejecute 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 el comando refresh para aplicar los cambios:

refresh

Paso 3: Establecer variables de entorno

Ahora, abra el archivo .env que se encuentra en el panel izquierdo de Glitch.

Añade los siguientes nombres de variables:

TO_NUMBER
VONAGE_NUMBER
VONAGE_API_KEY
VONAGE_APPLICATION_ID
VONAGE_API_SECRET
VONAGE_APPLICATION_PRIVATE_KEY_PATH

A continuación, introduce los siguientes valores para estas variables:

• TO_NUMBER: Numbers para recibir llamadas y SMS (por ejemplo, 14567891234).

• VONAGE_NUMBER: El número asignado a tu aplicación de Vonage (por ejemplo, 14567891234).

• VONAGE_API_KEY y VONAGE_API_SECRET: Desde el panel de control de Vonage.

• VONAGE_APPLICATION_ID: Desde la configuración de la aplicación de Vonage.

• VONAGE_APPLICATION_PRIVATE_KEY_PATH: Establecer como private.key.

Environment variables

Paso 4: Pruebe sus nuevas funciones

Pruebe las llamadas de voz salientes

Abre un terminal en tu proyecto Glitch.

Ejecuta este comando:

node makecall.js

Compruebe los Registros del panel de Vonage para confirmar que la llamada se realizó correctamente y también sus detalles.

Outbound Call LogPrueba de SMS salientes

Ahora que ya has añadido el código de cliente para los SMS salientes, vamos a probarlo.

Ejecuta este comando:

node makecall.js

Revisa los registros del panel de Vonage para confirmar que el SMS se envió correctamente y también sus detalles.

Text Log DeliveredVerás la misma información en tu terminal.

Conclusión

Y ya está. Acabas de integrar llamadas de voz salientes y SMS mediante las API de Vonage con Glitch. Al añadir estas funciones de comunicación, has ampliado la capacidad de tu aplicación para atraer a los usuarios a través de la voz y la mensajería. 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 X.