Comment passer un appel téléphonique par synthèse vocale en ASP.NET

Introduction

La création d'une application vocale de haute qualité est facile avec l Voice API de Vonage. Elle vous permet, entre autres, de passer et de recevoir des appels téléphoniques avec vos applications ASP.NET.

Dans ce tutoriel, nous allons mettre en place un projet ASP.NET dans Visual Studio qui utilise l'API Voice de Vonage pour passer un appel téléphonique en synthèse vocale avec ASP.NET.

Conditions préalables

Avant de commencer, assurez-vous que vous disposez des éléments suivants :

• Visual Studio 2022 - Community Edition ou supérieur installé. Vous pouvez également utiliser une version antérieure de Visual Studio à partir de Visual Studio 2017.

• CLI de Vonage - Facultatif - Une fois que Node.js est installé, vous pouvez utiliser npm install -g @vonage/cli pour l'installer. Cet outil vous permet de créer et de gérer vos applications Vonage sans passer par le portail des développeurs.

Configuration d'une application Vonage

Pour pouvoir utiliser l Voice API de Vonagede Vonage, vous devrez créer une Application Vonage à partir du portail des développeurs.

Une application Vonage contient les informations de sécurité et de configuration dont vous avez besoin pour interagir avec les API Voice de Vonage.

Toutes les demandes adressées à l'API Voice de Vonage nécessitent une authentification. Vous devez générer une clé privée avec l'API d'application, ce qui vous permet de créer des jetons Web JSON (JWT) pour effectuer les demandes.

Les clés publiques et privées associées à l'application peuvent être créées de deux manières :

• Par l'intermédiaire du Portail des développeurs de Vonage

• Par l'intermédiaire de la CLI de Vonage

Pour les besoins de ce tutoriel, nous utiliserons le tableau de bord du développeur de Vonage.

Le tableau de bord du développeur de Vonage

Ouvrez une session dans le tableau de bord du développeur de Vonage. section Applicationset à partir de là, vous pouvez créer une nouvelle application. Assurez-vous que l'option Voice est activée, comme indiqué ci-dessous, et appuyez sur Créer une nouvelle application.

create-voice-application.png

Vous pouvez associer un numéro si vous le souhaitez, mais cela ne sera pas nécessaire pour ce tutoriel.

Retournez dans l'application que vous venez de créer et appuyez sur Générer les clés publique et privée vous serez invité à télécharger votre clé privée et à saisir la clé publique. Conservez ces informations en lieu sûr, car toute personne y ayant accès peut utiliser votre Account !

create-voice-application-keys.png

Configuration d'un projet Web ASP.Net

Maintenant que nous avons généré notre paire de clés publiques/privées et notre application Vonage Voice via le tableau de bord du développeur, voyons comment configurer notre projet ASP.NET dans Visual Studio.

Commencez par lancer Visual Studio (Community Edition ou version supérieure) et sélectionnez Créer un nouveau projet, puis sélectionnez ASP.NET Core Web App (Modèle-Vue-Contrôleur) comme indiqué ci-dessous.

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

Donnez un nom à votre projet et appuyez sur Suivant. Pour Cadreassurez-vous qu'il est défini sur NET 6.0 laissez les autres options telles qu'elles sont définies par défaut et appuyez sur le bouton Créer et appuyez sur le bouton Créer.

AdditionalInfo.png

Installation du SDK .NET de Vonage

Dans Explorateur de solutionscliquez avec le bouton droit de la souris sur Dépendances et sélectionnez Gérer les paquets NuGet. Sélectionnez maintenant l'option Parcourir et recherchez Vonage. Vous verrez Vonage apparaît et appuyez sur Installer sur la dernière version stable (6.03 au moment de la rédaction de cet article).

InstallVonage.png

Paramètres de configuration

Ouvrez le fichier appsettings.json qui a déjà été ajouté à votre projet. A l'intérieur, vous devrez ajouter le fichier appSettings comme détaillé ci-dessous et remplir les champs respectifs avec les données spécifiques à votre application.

• VONAGE_APPLICATION_ID - se trouve dans l'Application Voice que vous avez créée plus tôt dans le tableau de bord du développeur Vonage.

• CHEMIN_DE_LA_CLÉ_PRIVÉE_DE_VONAGE - doit être un lien direct vers le chemin de votre clé privée.

• VONAGE_FROM_NUMBER - est le numéro que vous avez indiqué plus haut.

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

Définition de la vue (UI)

Créons la page qui sera présentée à l'utilisateur final.

Sélectionner Vues puis ajoutez un nouveau dossier appelé Voice. Dans ce dossier, créez une nouvelle vue appelée Appeler. Ajoutez ensuite le code suivant à la page pour permettre à l'utilisateur d'entrer un numéro de téléphone à appeler par notre application et une ligne de commande Soumettre pour soumettre le formulaire.

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

Nous allons maintenant créer un lien vers la vue en allant sur Vues puis Accueil et en modifiant le fichier Index.cshtml avec le contenu suivant.

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

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

Ajout du contrôleur (logique d'entreprise)

Créer un nouveau contrôleur appelé VoiceController.cs dans lequel nous collerons le code suivant.

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

Dans l'outil MakeCallAsync nous récupérons l'identifiant de l'application Vonage et le chemin d'accès à la clé privée et les transmettons à la méthode VonageClient en tant que Références. Une fois le client instancié, nous spécifions le numéro de téléphone qui envoie et reçoit l'appel. Nous spécifions ensuite le texte que nous voulons lire à l'appelant à l'aide de la fonction TalkAction et enfin, nous créons l'appel de manière asynchrone en passant par les points d'extrémité. Une fois l'appel terminé, nous redirigeons vers notre GET appelée MakeCall dans l'interface Voice Voice.

Exécuter l'application

Maintenant, lançons l'application et passons un appel téléphonique avec la synthèse vocale.

create-call.png

S'il y parvient, il appelle le numéro spécifié, lit le texte et met finalement fin à l'appel.

Vous pouvez observer un certain délai avant que votre téléphone ne sonne, en fonction de votre opérateur téléphonique.

Synthèse

Maintenant que vous avez appris à faire en sorte qu'ASP.NET envoie un appel de synthèse vocale, vous pouvez étendre ce projet pour que l'API Voice réponde au texte envoyé par l'appelant ! Vous pouvez également essayer de vérifier certains de nos cas d'utilisation, tels que celui-ci qui crée un service de réponse bot pour un appel téléphonique entrant.

Si vous avez des questions ou des commentaires, rejoignez-nous sur le Slack des développeurs de Vonage ou envoyez-moi un Tweet sur Twitteret je vous répondrai. Merci encore d'avoir lu, et je vous donne rendez-vous au prochain numéro !