Crear un menú interactivo de respuesta de voz con Node.js y Express

Introducción

La Voice API de Vonage es la forma más sencilla de crear aplicaciones de voz de alta calidad en la nube.

En este tutorial, crearemos un menú de respuesta de voz interactivo utilizando la Voice API de Vonage y Node.js para recibir llamadas entrantes y capturar la entrada del usuario a través del teclado.

Como referencia, el archivo fuente debería ser algo parecido a éste una vez completado este ejercicio.

Requisitos previos

Antes de empezar, asegúrate de que tienes instalado lo siguiente:

• Node.js instalado. Node.js es un entorno de ejecución JavaScript multiplataforma de código abierto.

• ngrok - Se requiere una Account gratuita. Esta herramienta permite a los desarrolladores exponer a Internet un servidor de desarrollo local.

• OPCIONAL - CLI de Vonage Una vez instalado Node.js, instala la CLI escribiendo npm install -g @vonage/cli. Esta herramienta te permite crear y administrar aplicaciones de Vonage desde una interfaz de línea de comandos frente al portal para desarrolladores de Vonage.

Crear una aplicación de Vonage habilitada para voz

Para utilizar la Voice API de Vonagedebes crear una aplicación de Vonage desde el portal para desarrolladores.

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.

Necesitaremos configurar los webhooks de la aplicación y más. Ten en cuenta que esto se puede lograr a través del Portal para desarrolladores de Vonage o la CLI de Vonage. Para este tutorial, usaremos Vonage Developer Dashboard.

Después de crear una Account, inicie sesión en Vonage Developer Dashboard, busque la Sección de aplicacionesy crea una nueva aplicación. Dale un nombre a tu aplicación, por ejemplo IVRMenu.

IVRMenuCall.png

Desplácese hacia abajo por la página y asegúrese de que la opción Voice esté activada.

Anote Respuestay Evento ya que las completaremos en breve. Dejaremos la URL de reserva en blanco mientras dure este tutorial.

VoiceCapability.png

Pulse Generar nueva solicitud en la parte inferior de la página para continuar.

Este tutorial también requiere un número de teléfono virtual. Para adquirir uno, vaya a Numbers > Comprar Numbers y busca uno que se ajuste a tus necesidades. Una vez que tengas un Numbers, enlázalo al Vonage Developer Dashboard, como se muestra a continuación.

LinkedNumber.png

A continuación, vamos a utilizar ngrok para exponer nuestros puntos finales webhook en nuestra máquina local como una URL pública.

Ejecutar ngrok

ngrok es una aplicación multiplataforma que permite a los desarrolladores exponer un servidor de desarrollo local a Internet con un esfuerzo mínimo. Lo usaremos para exponer nuestro servicio a Internet. Una vez que tengas ngrok configurado y hayas iniciado sesión (de nuevo, la cuenta gratuita es aceptable), ejecuta el siguiente comando:

ngrok http 3000

Después de que ngrok se ejecute, te dará un Reenvío que usaremos como base para nuestros Webhooks más adelante en el artículo. La mía tiene el siguiente aspecto:

ngrok.png

Recuerde Respuesta y evento en el portal para desarrolladores de Vonage, como mencionamos anteriormente? Tendremos que usar la URL de ngrok y completar cada campo, agregando /answer y /eventpara la URL de la respuesta y la URL del evento.

Así, por ejemplo, mi Respuesta apunta a https://9ebc-2601-600-9580-d650-fd8d-62dc-f5e4-b88e.ngrok.io/answer y Evento towards https://9ebc-2601-600-9580-d650-fd8d-62dc-f5e4-b88e.ngrok.io/event.

webhooksection.png

Cuando se llama al número asociado a la aplicación y ésta contesta, el webhook definido en la URL URL de respuesta se activa. Del mismo modo, los eventos se registran con una solicitud POST y se activan al llamar al número o si el número está ocupado, etc.

Configuración del proyecto Node.js

Ahora que hemos creado nuestra aplicación Voice de Vonage dentro del panel de desarrollador, veamos cómo debemos configurar nuestra aplicación Node.js.

Comience por ir a un símbolo del sistema / terminal, la creación de un directorio de trabajo, y la inicialización de un proyecto Node.js.

Gestionaremos las solicitudes con Express y utilizaremos analizador de cuerpos para analizar los cuerpos de las peticiones entrantes. Instala ambos con lo siguiente:

npm install express body-parser --save

Crear un index.js archivo, instanciar Express así como body-parser.

const app = require('express')()
const bodyParser = require('body-parser')

app.use(bodyParser.json())

Definamos el punto final de la URL de respuesta como /answer y la URL del evento como /event.

Cuando un usuario pulsa un número en su teclado, puede recopilar qué botón ha pulsado mediante DTMF (multifrecuencia de doble tono). Cada vez que se recoge una entrada DTMF del usuario, ésta se envía a nuestro /dtmf que definiremos en el siguiente paso.

Cree una ruta HTTP GET para gestionar las solicitudes de /answer para recuperar su OCN:

app.get('/answer', (req, res) => {
  const ncco = [{
      action: 'talk',
      bargeIn: true,
      text: 'Hello! Please enter a digit to continue.'
    },
    {
      action: 'input',
      maxDigits: 1,
      eventUrl: [`https://${req.get('host')}/dtmf`]
    }
  ]

  res.json(ncco)
})

Utilizaremos la acción talk acción para saludar a la persona que llama y pedirle que pulse un dígito, estableciendo la bargeIn opción a true para que el usuario pueda introducir un dígito sin esperar a que termine el mensaje verbal.

A continuación, añadiremos un input a la NCCO para capturar el dígito vía DTMF. Establece la propiedad maxDigits a 1 y la propiedad eventURL a un manejador para recibir y manejar la entrada. Ten en cuenta que puedes ampliar el número de pulsaciones de tecla que puede hacer un usuario mediante la propiedad maxDigits propiedad.

Manejar la entrada del usuario

Vamos a añadir el código para manejar DTMF entrante en index.js. Vonage realiza una POST a nuestro webhook, que expondremos como un endpoint en /dtmf. Cuando recibamos la solicitud, crearemos otra acción talk que inspeccione el objeto de solicitud y lea los dígitos que presionó la persona que llama:

app.post('/dtmf', (req, res) => {
  const ncco = [{
    action: 'talk',
    text: `You pressed ${req.body.dtmf}`
  }]

  res.json(ncco)
})

El endpoint para el event_url debe ser POST, así que definamos /events:

app.post('/events', (req, res) => {
  console.log(req.body)
  res.send(200);

Esto registrará todos los eventos activados en nuestro terminal/comando.

Ejecutar la aplicación

Escriba lo siguiente en el símbolo del sistema/terminal para ejecutar la aplicación:

node index.js

¡Vamos a hacer una llamada para ver si tu aplicación funciona! Llama a tu número virtual desde tu teléfono móvil y pulsa un dígito en el teclado. Si todo funciona, deberías oír el mensaje que has definido en tu OCN: "Has pulsado X".

Resumen

Ahora que has creado un menú de respuesta de voz interactiva con la Voice API de Vonage y Node.js, ¿por qué no aprendes a enviar mensajes de texto a voz en más de 40 idiomas? También podrías obtener más información sobre nuestra Voice API y sumergirte en varios fragmentos de código.

Si tienes preguntas o comentarios, únete a nosotros en el Slack para desarrolladores de Vonage o envíame un Tweet a Twittery te responderé. Gracias de nuevo por leer, ¡y te espero en el próximo!