Cómo realizar una llamada telefónica de texto a voz en ASP.NET

Introducción

Crear una aplicación de voz de alta calidad es fácil con la Voice API de Vonage. Te permite, entre otras cosas, realizar y recibir llamadas telefónicas con tus aplicaciones ASP.NET.

En este tutorial, vamos a configurar un proyecto ASP.NET en Visual Studio que utilice la Voice API de Vonage para realizar una llamada telefónica de texto a voz con ASP.NET.

Requisitos previos

Antes de empezar, asegúrate de tener lo siguiente:

• Visual Studio 2022 - Community Edition o superior instalado. También puede utilizar una versión anterior de Visual Studio a partir de Visual Studio 2017.

• Vonage CLI - Opcional - Una vez instalado Node.js, puedes usar npm install -g @vonage/cli para instalarlo. Esta herramienta te permite crear y administrar tus aplicaciones de Vonage sin usar el portal para desarrolladores.

Configuración de una aplicación de Vonage

Para poder utilizar la Voice API de Vonagetendrás que crear una aplicación de Vonage desde el portal para desarrolladores.

Una aplicación de Vonage contiene la información de seguridad y configuración que necesitas para interactuar con las Voice API de Vonage.

Todas las solicitudes a la Voice API de Vonage requieren autenticación. Debes generar una clave privada con la API de aplicaciones, que te permite crear tokens web JSON (JWT) para realizar las solicitudes.

Las claves públicas y privadas asociadas a la aplicación pueden crearse de dos maneras:

• A través del Portal para desarrolladores de Vonage

• A través de la CLI de Vonage

A los fines de este tutorial, utilizaremos el panel de control para desarrolladores de Vonage.

Panel de control para desarrolladores de Vonage

Inicie sesión en Vonage Developer Dashboard, busque la sección Sección de aplicacionesy desde aquí podrás crear una nueva aplicación. Asegúrate de que la opción Voice esté activada como se muestra a continuación y presiona Generar nueva aplicación.

create-voice-application.png

Puedes enlazar un número si lo deseas, pero no será necesario para este tutorial.

Vuelve a la aplicación que acabas de crear y pulsa Generar clave pública y privada esto le pedirá que descargue su clave privada, así como rellenar la clave pública para usted. Mantén esta información a salvo, ya que cualquiera que tenga acceso a ella puede utilizar tu Account.

create-voice-application-keys.png

Configuración del proyecto web ASP.Net

Ahora que hemos generado nuestro par de claves pública/privada y nuestra aplicación Vonage Voice a través del panel de desarrollador, veamos cómo debemos configurar nuestro proyecto ASP.NET en Visual Studio.

Comience por iniciar Visual Studio (Community Edition o superior) y seleccione Crear un nuevo proyecto, y seleccione ASP.NET Core Web App (Modelo-Vista-Controlador) como se muestra a continuación.

new-asp-net-core-web-app-project.png

Dé un nombre a su proyecto y pulse Siguiente. En Frameworkasegúrese de que está configurado como .NET 6.0 y deje las demás opciones como están por defecto y pulse el botón Crear .

AdditionalInfo.png

Instalación del SDK .NET de Vonage

En Explorador de solucioneshaga clic con el botón derecho en Dependencias y seleccione Gestionar paquetes NuGet. Ahora seleccione la opción Examinar y busque Vonage. Verás Vonage y pulsa Instala en la última versión estable (6.03 en el momento de escribir este artículo).

InstallVonage.png

Ajustes de configuración

Abra el archivo appsettings.json que ya está añadido a tu proyecto. Dentro necesitarás añadir el archivo appSettings como se detalla a continuación y rellenar el campo correspondiente con los datos específicos de tu aplicación.

• VONAGE_APPLICATION_ID - se encuentra dentro de la aplicación de voz que creaste anteriormente en el panel para desarrolladores de Vonage.

• VONAGE_PRIVATE_KEY_PATH - debe ser un enlace directo a la ruta de su clave privada.

• VONAGE_FROM_NUMBER - es el número que ha enlazado antes.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "appSettings": {
    "VONAGE_APPLICATION_ID": "VONAGE_APPLICATION_ID",
    "VONAGE_PRIVATE_KEY_PATH": "VONAGE_PRIVATE_KEY_PATH",
    "VONAGE_FROM_NUMBER": "VONAGE_FROM_NUMBER"
  },
  "AllowedHosts": "*"
}

Definición de la vista (UI)

Creemos ahora la página que se presenta al usuario final.

Seleccione Vistas y añada una nueva carpeta llamada Voice. Dentro de esta carpeta, cree una nueva vista llamada HacerLlamada. A continuación, añada el siguiente código a la página para permitir que el usuario introduzca un número de teléfono al que nuestra aplicación deba llamar y un campo Enviar para enviar el formulario.

@using (Html.BeginForm("MakeCall", "Voice", FormMethod.Post))
{
    <input type="text" name="to" id="to" placeholder="To" />
    <input type="submit" value="Call" />
}

Ahora crearemos un enlace a la Vista yendo a Vistas y luego a Inicio y editando el archivo Index.cshtml con el siguiente contenido.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h2>@Html.ActionLink("Create Call", "MakeCall", "Voice")</h2>
</div>

Añadir el controlador (lógica empresarial)

Crear un nuevo controlador llamado ControladorVoz.cs en el que pegaremos el siguiente código.

using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
using Vonage;
using Vonage.Request;
using Vonage.Voice.Nccos.Endpoints;
using Vonage.Voice;
using Vonage.Numbers;
using Vonage.Voice.Nccos;

namespace TextToSpeechVonage.Controllers
{
    public class VoiceController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult MakeCall()
        {
            return View();
        }

        [HttpPost]
        public async Task<ActionResult> MakeCallAsync(string to)
        {
            var VONAGE_FROM_NUMBER = Configuration.Instance.Settings["appsettings:VONAGE_FROM_NUMBER"];
            var VONAGE_TO_NUMBER = to;
            var vonageApplicationId = Configuration.Instance.Settings["appsettings:VONAGE_APPLICATION_ID"];
            var vonagePrivateKeyPath = Configuration.Instance.Settings["appsettings:VONAGE_PRIVATE_KEY_PATH"];
            
            var creds = Credentials.FromAppIdAndPrivateKeyPath(vonageApplicationId, vonagePrivateKeyPath);
            var client = new VonageClient(creds);

            var toEndpoint = new PhoneEndpoint() { Number = VONAGE_TO_NUMBER };
            var fromEndpoint = new PhoneEndpoint() { Number = VONAGE_FROM_NUMBER };

            var talkAction = new TalkAction() { Text = "This is a text to speech call from Vonage! " };
            var ncco = new Ncco(talkAction);

            var command = new CallCommand() { To = new Vonage.Voice.Nccos.Endpoints.Endpoint[] { toEndpoint }, From = fromEndpoint, Ncco = ncco };
            var response = await client.VoiceClient.CreateCallAsync(command);

            return RedirectToAction("MakeCall", "Voice");
        }
    }
}

En la función MakeCallAsync recuperamos el ID de la aplicación de Vonage y la ruta a la clave privada y los pasamos al método VonageClient como Credenciales. Una vez instanciado el cliente, especificamos el número de teléfono que envía y recibe la llamada. A continuación, especificamos el texto que queremos leer a la persona que llama con TalkAction y finalmente creamos la llamada asíncrona pasando los endpoints. Una vez completado, redirigimos a nuestro GET llamado HacerLlamada en la aplicación Voice Controller.

Ejecutar la aplicación

Ahora, ejecutemos la aplicación y hagamos una llamada de texto a voz.

create-call.png

Cuando tiene éxito, llama al número especificado, lee el texto y, por último, finaliza la llamada.

Dependiendo del operador telefónico, es posible que el teléfono tarde un poco en sonar.

Resumen

Ahora que ha aprendido a hacer que ASP.NET envíe una llamada de texto a voz, puede ampliar este proyecto para que Voice API responda al texto que envía la persona que llama. También puede que desee comprobar algunos de nuestros casos de uso, tales como éste que crea un servicio de respuesta bot para una llamada telefónica entrante.

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!