Compartir:
){kind=small}
Antiguo desarrollador .NET Advocate @Vonage, ingeniero de software poliglota full-stack, AI/ML
Cómo manejar la entrada del auricular (DTMF) desde una llamada telefónica en ASP.NET Core
Tiempo de lectura: 12 minutos
El componente fundamental de cualquier sistema de respuesta de voz interactiva (IVR) es el manejo de la entrada. Por lo general, existen dos tipos de entrada que puedes tomar programáticamente desde una red telefónica pública conmutada (PSTN), ambas admitidas por Vonage:
Multifrecuencia de doble tono (DTMF)-Son eventos de entrada recogidos del auricular del usuario. Por ejemplo, "pulse 1 para ventas, 2 para atención al cliente".
Reconocimiento automático del habla (ASR)-se trata de eventos de reconocimiento del habla en los que la entrada es la voz del usuario.
En este tutorial, vamos a utilizar la Voice API de Vonage para aprender a encajar rápidamente la primera (DTMF) en nuestras aplicaciones ASP.NET core. La recopilación de DTMF de un usuario a través de una llamada PSTN implicará lo siguiente:
Configuración de una Cuenta API de Vonage si no tienes una.
Creación de una aplicación de Vonage mediante la CLI.
Escribe algo de código C#.
Conecta nuestra aplicación a la web.
Si desea omitir este tutorial y obtener una muestra de trabajo, puede encontrar esta muestra en GitHub.
La CLI de Vonage. Si no lo tienes, puedes instalarlo con
npm install @vonage/cli -gEl último SDK de .NET Core
Visual Studio o Visual Studio Code. Voy a utilizar Visual Studio 2019
ngrok para hacer pruebas. Sólo necesitas la versión gratuita.
Para completar este tutorial, necesitarás una cuenta API de Vonage. Si aún no tienes una, puedes inscribirte hoy y comenzar a acumular crédito gratis. Una vez que tengas una Account, puedes encontrar tu clave y secreto de API en la parte superior del Panel de API de Vonage
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.
Vamos a utilizar ngrok para exponer a Internet nuestra aplicación ASP.NET Core que se ejecuta localmente. Después de haber instalado ngrok, hacerlo será tan fácil como ejecutar el comando ngrok http 5000 en tu consola. Eso producirá algo que se parece a esto:
ngrok
NOTA: Este tutorial utiliza Kestral para depuración local. Si desea utilizar IIS Express en su lugar, por favor vea nuestra explicador sobre el uso de ngrok con IIS Express.
Lo más importante a tener en cuenta aquí es la URL de reenvío; en mi caso, esa URL es http://34332d9dca30.ngrok.io. Cuando recibes una llamada en tu número de Vonage, Vonage enviará a tu aplicación lo que se denomina un WebHook, que es sólo una solicitud HTTP GET, solicitando algo llamado objeto de control de llamadas (NCCO). Nuestra aplicación estará escuchando en /webhooks/answer por lo que la URL completa que necesitaré será http://34332d9dca30.ngrok.io/webhooks/answer.
Si aún no has configurado la CLI de Vonage, hazlo ejecutando el comando vonage config:set <api_key> <api_secret> donde la clave API y el secreto son la clave API y el secreto que se encuentran en tu página de configuración de tu Account
Ahora que tu CLI está configurada, compraremos un número, crearemos una aplicación de Vonage y vincularemos el número a esa aplicación, lo que le indicará a Vonage que lo reenvíe a tu aplicación.
Para comprar un número, utilice el siguiente comando (sustituyendo el ID de su país por US)
Escriba confirm para completar la operación; saldrá el número que haya comprado.
A continuación, crearemos una aplicación. El comando crear aplicación tomará dos URL, la URL de respuesta, que será el número al que Vonage enviará las llamadas entrantes, y la URL de eventos, que será la URL a la que Vonage enviará los eventos que surjan de uno de tus números. Recuerda sustituir 34332d9dca30 por cualquiera que sea el hash aleatorio para tu URL ngrok:
Esta operación responderá con un ID de aplicación y una clave privada. Guarde ambos valores. En este tutorial sólo utilizaremos el ID de la aplicación, pero la clave privada se utiliza para autorizar las solicitudes de la aplicación.
Luego, debemos vincular nuestro número recién comprado a nuestra aplicación. Vincular nuestro número le indicará a Vonage que envíe cualquier llamada recibida en ese número a la URL de webhook de nuestra aplicación. Para ello, necesitaremos el Id. de la aplicación que acabamos de recibir de la solicitud de creación de aplicación (que se verá como e7a25242-77a1-42cd-a32e-09febcb375f4) y el número de teléfono que acabamos de comprar, y ejecutaremos un comando parecido a este
Ahora sólo nos queda crear nuestra aplicación.
En tu consola, navega hasta el directorio donde sueles poner el código. Vamos a crear una aplicación Web API aplicación ASP.NET Core. No configuraremos httpslo que facilitará las pruebas. Usted puede scaffold esto fácilmente con él con el siguiente comando dotnet CLI:
Ejecute el comando cd para entrar en la carpeta VonageDtmf carpeta del proyecto y ejecuta el siguiente comando para agregar el SDK del servidor de Vonage a tu proyecto.
Navegue hasta el directorio creado y abra el archivo csproj en el IDE de su elección. En la carpeta Controllers añada un nuevo controlador de API vacío llamado VoiceController. En la carpeta VoiceControllerañadiremos, además de la plantilla de ApiController, declaraciones de uso para System.Threading.Tasks, Vonage.Utility, Vonage.Voice.EventWebhooksy Vonage.Voice.Nccos. Después, el controlador debería tener este aspecto.
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using Vonage.Utility;
using Vonage.Voice.EventWebhooks;
using Vonage.Voice.Nccos;
namespace VonageDtmf.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class VoiceController : ControllerBase
{
}
}
Ahora vamos a añadir nuestra ruta para /webhooks/answer. Esta ruta será una solicitud GET, ya que Vonage obtendrá una NCCO de nuestro servidor. Este método construirá una NCCO con dos acciones (que son instrucciones para la llamada). La primera acción será una acción de conversación, que le indicará al usuario que ingrese un dígito. La segunda acción será una acción MultiInput. Esta acción recogerá las entradas del usuario. Puede especificar si desea recoger entradas DTMF y/o de voz con esta acción. Seleccionaremos DTMF añadiendo un objeto DtmfSettings a la acción y estableciendo su número máximo de dígitos en 1. Le pasaremos la URL del evento - que será la URL base de nuestro servidor en /webhooks/dtmf (definiremos esta ruta en breve.) Finalmente, convertiremos estas acciones en una NCCO y devolveremos el JSON de esa acción a Vonage.
[Route("/webhooks/answer")]
[HttpGet]
public ActionResult Answer()
{
var responseUrl = $"{Request.Scheme}://{Request.Host}/webhooks/dtmf";
var talkAction = new TalkAction
{
Text = "Hello please enter a digit.",
BargeIn = "true"
};
var inputAction = new MultiInputAction
{
Dtmf = new DtmfSettings { MaxDigits = 1 },
EventUrl = new[] { responseUrl },
EventMethod = "POST"
};
var ncco = new Ncco(talkAction, inputAction);
return Ok(ncco.ToString());
}
Cuando el usuario ingrese un dígito en su teléfono, nuestra aplicación recibirá otro webhook de Vonage con los dígitos ingresados por el usuario. Extraeremos la MultiInput estructura de la solicitud. Luego usaremos los dígitos incrustados en el objeto Dtmf dentro de esa estructura para crear una nueva acción de conversación que le diga al usuario cuál fue la entrada.
[Route("/webhooks/dtmf")]
[HttpPost]
public async Task<ActionResult> Dtmf()
{
var input = await WebhookParser.ParseWebhookAsync<MultiInput>
(Request.Body, Request.ContentType);
var talkAction = new TalkAction
{
Text = $"Thank you for inputting: {input.Dtmf.Digits}"
};
var ncco = new Ncco(talkAction);
return Ok(ncco.ToString());
}
Ahora sólo queda probar la aplicación. Para ejecutar la aplicación, utilice el siguiente comando:
NOTA: Si decide ejecutar con IIS Express, asegúrese de leer nuestro artículo sobre uso de IIS Express con ngrok. Asegúrese de que en su método de respuesta que utiliza el x-original-host para formar el nombre de host en lugar del Host de solicitud.
Ahora que nuestra aplicación se está ejecutando, puedes marcar tu número de Vonage y ¡listo! Puedes recibir entradas DTMF de tu usuario.
Ser capaz de gestionar la entrada DTMF de su usuario y responderle a través de la línea PSTN le permite construir todo tipo de potentes integraciones con Voice. Consulte nuestra Guía de respuesta de voz interactiva (IVR).
También puedes echar un vistazo a otras geniales integraciones de voz de las que he hablado con Voice y .NET, entre ellas:
Una copia del proyecto que produce esta entrada de blog puede encontrarse en GitHub.