Como fazer uma chamada telefônica com conversão de texto em fala no ASP.NET

Introdução

É fácil criar um aplicativo de voz de alta qualidade com a Voice API da Vonage. Ela permite que você faça e receba chamadas telefônicas com suas applications ASP.NET, entre outras coisas.

Neste tutorial, vamos configurar um projeto ASP.NET no Visual Studio que utilize a Voice API da Vonage para realizar uma chamada telefônica com a funcionalidade de conversão de texto em fala usando ASP.NET.

Pré-requisitos

Antes de começar, certifique-se de ter o seguinte:

• Visual Studio 2022 – Edição Comunitária ou superior instalado. Você também pode usar uma versão anterior do Visual Studio, a partir do Visual Studio 2017.

• CLI do Vonage - Opcional - Depois que o Node.js estiver instalado, você pode usar npm install -g @vonage/cli para instalá-lo. Essa ferramenta permite que você crie e gerencie suas Applications Vonage sem usar o Portal do Desenvolvedor.

Configurando um aplicativo da Vonage

Para poder utilizar a Voice API da Vonage, você precisará criar uma aplicativo Vonage no portal do desenvolvedor.

Um aplicativo da Vonage contém as informações de segurança e configuração necessárias para interagir com as Voice APIs da Vonage.

Todas as solicitações à Voice API da Vonage exigem autenticação. É necessário gerar uma chave privada por meio da API de Aplicativos, o que permite criar JSON Web Tokens (JWT) para realizar as solicitações.

As chaves públicas e privadas associadas às Applications podem ser criadas de duas maneiras:

• Por meio do Portal do Desenvolvedor da Vonage

• Por meio do CLI da Vonage

Para os fins deste tutorial, usaremos o Painel do Desenvolvedor da Vonage.

O Painel do Desenvolvedor da Vonage

Faça login no Painel do Desenvolvedor da Vonage e procure a seção “Aplicativos”e, a partir daí, você poderá criar um novo aplicativo. Certifique-se de que o Voice esteja ativada, conforme mostrado abaixo, e clique em “Gerar novo aplicativo”.

create-voice-application.png

Você pode associar um número, se quiser, mas isso não será necessário para este tutorial.

Volte ao aplicativo que você acabou de criar e pressione “Gerar chave pública e privada” . Isso solicitará que você baixe sua chave privada e preencherá a chave pública para você. Guarde essas informações em um local seguro, pois qualquer pessoa que tiver acesso a elas poderá usar sua Account!

create-voice-application-keys.png

Configuração de um projeto Web ASP.Net

Agora que geramos nosso par de chaves pública/privada e nosso aplicativo Vonage Voice por meio do painel do desenvolvedor, vamos ver como devemos configurar nosso projeto ASP.NET no Visual Studio.

Comece abrindo o Visual Studio (Edição Community ou superior), selecione “Criar um novo projeto” e escolha “Aplicativo Web ASP.NET Core (Model-View-Controller)” , conforme mostrado abaixo.

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

Dê um nome ao seu projeto e pressione “Avançar”. Para o “Framework”, certifique-se de que esteja definido como .NET 6.0 e deixe as outras opções com as configurações padrão; em seguida, pressione o botão Criar .

AdditionalInfo.png

Instalando o SDK .NET da Vonage

No Explorador de Soluções, clique com o botão direito do mouse em Dependências e selecione Gerenciar Pacotes NuGet. Agora selecione a aba “Procurar” e procure por Vonage. Você verá Vonage aparecer e pressione Instalar na versão estável mais recente (6.03 no momento da redação deste artigo).

InstallVonage.png

Configurações

Abra o arquivo arquivo appsettings.json que já está adicionado ao seu projeto. Nele, você precisará adicionar o seção appSettings conforme detalhado abaixo e preencher os respectivos campos com os dados específicos do seu aplicativo.

• VONAGE_APPLICATION_ID - pode ser encontrado no aplicativo de Voice que você criou anteriormente no Painel do Desenvolvedor da Vonage.

• VONAGE_PRIVATE_KEY_PATH - deve ser um link direto para o caminho da sua chave privada.

• VONAGE_FROM_NUMBER - é o número que você vinculou anteriormente.

{
  "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": "*"
}

Definindo a visualização (interface do usuário)

Vamos criar agora a página que será exibida ao usuário final.

Selecionar Exibições e, em seguida, adicione uma nova pasta chamada Voice. Dentro dessa pasta, crie uma nova visualização chamada MakeCall. Em seguida, adicione o código a seguir à página para permitir que o usuário insira um número de telefone para o nosso aplicativo ligar e um Enviar para enviar o formulário.

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

Agora vamos criar um link para a Visualização, acessando Visualizações e, em seguida, Página inicial e editando o arquivo arquivo Index.cshtml com o seguinte conteúdo.

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

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

Adicionando o controlador (lógica de negócios)

Crie um novo controlador chamado VoiceController.cs , no qual colaremos o código a seguir.

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");
        }
    }
}

No método MakeCallAsync , estamos recuperando o ID do aplicativo da Vonage e o caminho para a chave privada e passando esses dados para o VonageClient como Credentials. Assim que o cliente é instanciado, especificamos o número de telefone que está fazendo e recebendo a chamada. Em seguida, especificamos o texto que queremos que seja lido para quem está ligando com TalkAction e, por fim, criamos a chamada de forma assíncrona, passando os endpoints. Ao concluir, redirecionamos para nosso método GET chamado MakeCall no Voice Controller.

Execute o aplicativo

Agora, vamos executar o aplicativo e fazer uma ligação com a função de conversão de texto em fala.

create-call.png

Quando a operação é bem-sucedida, ela liga para o número especificado, lê o texto e, por fim, encerra a ligação.

Dependendo da sua operadora, pode haver um certo atraso antes que o telefone toque.

Conclusão

Agora que você aprendeu a fazer com que o ASP.NET envie uma chamada de conversão de texto em fala, pode ampliar esse projeto para que a Voice API responda ao texto enviado pelo usuário! Você também pode dar uma olhada em alguns dos nossos casos de uso, como este aqui , que cria um serviço de atendimento por bot para chamadas recebidas.

Se você tiver dúvidas ou sugestões, junte-se a nós no Slack dos desenvolvedores da Vonage ou me envie um tweet no Twitter, e eu entrarei em contato com você. Mais uma vez, obrigado pela leitura, e nos vemos no próximo artigo!