Partager:
){kind=small}
Ancien développeur .NET Advocate @Vonage, ingénieur logiciel polyglotte full-stack, AI/ML
Comment gérer la saisie du combiné (DTMF) lors d'un appel téléphonique en ASP.NET Core
Temps de lecture : 12 minutes
L'élément fondamental de tout système de réponse vocale interactive (IVR) est le traitement des entrées. Il y a généralement deux types d'entrée que vous pouvez prendre de façon programmatique à partir d'un réseau téléphonique public commuté (RTPC), les deux étant pris en charge par Vonage :
Multi-fréquence à deux tons (DTMF)-Il s'agit d'événements d'entrée collectés à partir du combiné de l'utilisateur. Par exemple, "appuyez sur 1 pour les ventes, 2 pour le service clientèle".
Reconnaissance automatique de la parole (ASR)-Il s'agit d'événements de reconnaissance vocale où l'entrée est la voix de l'utilisateur.
Dans ce tutoriel, nous allons utiliser l'API vocale de Voice API de Vonage de Vonage pour apprendre à saisir rapidement les premières (DTMF) dans nos applications ASP.NET core. La collecte de DTMF auprès d'un utilisateur lors d'un appel RTPC implique les opérations suivantes :
Mise en place d'un Account API de Vonage si vous n'en avez pas.
Création d'une application Vonage à l'aide du CLI.
Écrire du code C#.
Connecter notre application au web.
Si vous souhaitez sauter ce tutoriel et utiliser un exemple fonctionnel, vous pouvez trouver cet exemple dans GitHub.
Le CLI de Vonage. Si vous ne l'avez pas, vous pouvez l'installer avec
npm install @vonage/cli -gLa dernière version de NET Core SDK
Visual Studio ou Visual Studio Code. Je vais utiliser Visual Studio 2019
ngrok pour les tests. Vous n'avez besoin que de la version gratuite.
Pour compléter ce tutoriel, vous aurez besoin d'un Account API de Vonage. Si vous n'en avez pas encore, vous pouvez vous inscrire dès aujourd'hui et commencer à construire avec du crédit gratuit. Une fois que vous avez un Account, vous pouvez trouver votre clé API et votre secret API en haut du tableau de bord de l'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.
Nous allons utiliser ngrok pour exposer notre application ASP.NET Core exécutée localement à internet. Après avoir installé ngrok, il vous suffira d'exécuter la commande ngrok http 5000 dans votre console. Cela produira quelque chose qui ressemble à ceci :
ngrok
NOTE : Ce tutoriel utilise Kestral pour le débogage local. Si vous souhaitez utiliser IIS Express à la place, veuillez consulter notre explicatif sur l'utilisation de ngrok avec IIS Express.
La chose essentielle à noter ici est l'URL de transfert - dans mon cas, cette URL est la suivante http://34332d9dca30.ngrok.io. Lorsque vous recevez un appel sur votre numéro Vonage, Vonage envoie à votre application ce que l'on appelle un WebHook, qui est simplement une requête HTTP GET, demandant ce que l'on appelle un objet de contrôle d'appel (NCCO). Notre application écoutera sur /webhooks/answer donc l'URL complète dont j'aurai besoin sera http://34332d9dca30.ngrok.io/webhooks/answer.
Si vous n'avez pas encore configuré le CLI de Vonage, faites-le en exécutant la commande suivante vonage config:set <api_key> <api_secret> où la clé API et le secret sont la clé API et le secret qui se trouvent sur la page des paramètres de votre compte. Account.
Maintenant que votre CLI est configuré, nous allons acheter un numéro, créer une Application Vonage et lier le numéro à cette application, ce qui indiquera à Vonage de transférer vers votre application.
Pour acheter un numéro, utilisez la commande suivante (en remplaçant l'ID de votre pays par US)
Tapez confirm pour terminer l'opération ; il sortira un numéro que vous avez acheté.
Ensuite, nous allons créer une application. La commande de création d'application prendra deux URL, l'URL de réponse - qui sera le numéro auquel Vonage enverra les appels entrants, et l'URL d'événement, qui sera l'URL à laquelle Vonage enverra les événements qui surviennent à partir de l'un de vos numéros. N'oubliez pas de remplacer 34332d9dca30 par le hash aléatoire de votre URL ngrok :
Cette opération répondra par un identifiant d'application et une clé privée. Enregistrez ces deux valeurs. Nous n'utiliserons que l'identifiant de l'application dans ce tutoriel, mais vous utiliserez la clé privée pour autoriser les demandes de votre application.
Ensuite, nous devons relier le numéro que nous venons d'acheter à notre application. En liant notre numéro, Vonage enverra tous les appels reçus sur ce numéro à l'URL webhook de notre application. Pour ce faire, nous aurons besoin de l'identifiant de l'application que nous venons de recevoir de la demande de création d'application (qui ressemblera à e7a25242-77a1-42cd-a32e-09febcb375f4) et du numéro de téléphone que nous venons d'acheter, et nous lancerons une commande qui ressemblera à ceci :
Il ne reste plus qu'à créer notre application !
Dans votre console, naviguez jusqu'au répertoire dans lequel vous placez habituellement votre code. Nous allons créer une application Web API ASP.NET Core. Nous ne configurerons pas httpsce qui facilitera les tests. Vous pouvez facilement échafauder ceci avec la commande CLI dotnet suivante :
Exécutez la commande cd pour vous placer dans le dossier du projet VonageDtmf et exécutez la commande suivante pour ajouter le SDK de SDK du serveur Vonage à votre projet.
Naviguez dans le répertoire créé et ouvrez le fichier csproj dans l'IDE de votre choix. Dans le dossier Controllers ajoutez un nouveau contrôleur API vide appelé VoiceController. Dans le fichier VoiceControllernous ajouterons, en plus de l'ApiController boilerplate, des déclarations d'utilisation pour System.Threading.Tasks, Vonage.Utility, Vonage.Voice.EventWebhooks, et Vonage.Voice.Nccos. Par la suite, le contrôleur devrait ressembler à ceci.
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
{
}
}
Nous allons maintenant ajouter notre route pour /webhooks/answer. Cette route sera une requête GET, car Vonage obtiendra un NCCO de notre serveur. Cette méthode construira un NCCO avec deux actions (qui sont des instructions pour l'appel). La première action sera une action de conversation, qui demandera à l'utilisateur d'entrer un chiffre. La deuxième action sera une action MultiInput. Cette action recueillera les données de l'utilisateur. Vous pouvez spécifier si cette action doit recueillir des données DTMF et/ou vocales. Nous sélectionnerons DTMF en ajoutant un objet DtmfSettings à l'action et en fixant le nombre maximum de chiffres à 1. Nous lui transmettrons l'URL de l'événement, qui sera l'URL de base de notre serveur, à l'adresse /webhooks/dtmf (Enfin, nous transformons ces actions en NCCO et renvoyons le JSON de cette action à 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());
}
Lorsque l'utilisateur saisit un chiffre sur son combiné, notre application reçoit un autre webhook de Vonage contenant les chiffres saisis par l'utilisateur. Nous allons extraire la structure MultiInput de la demande. Nous utiliserons ensuite les chiffres intégrés dans l'objet Dtmf dans cette structure pour créer une nouvelle action Talk afin d'indiquer à l'utilisateur ce qu'il a saisi.
[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());
}
Il ne reste plus qu'à tester l'application. Pour exécuter l'application, utilisez la commande suivante :
NOTE : Si vous choisissez d'utiliser IIS Express, assurez-vous de lire notre article sur l'utilisation de IIS Express avec ngrok. l'utilisation de IIS Express avec ngrok. Assurez-vous dans votre méthode de réponse que vous utilisez le x-original-host pour former le nom d'hôte plutôt que le Request Host.
Maintenant que notre application fonctionne, vous pouvez composer votre numéro Vonage, et voilà ! Vous pouvez recevoir des données DTMF de votre utilisateur.
Le fait de pouvoir gérer les entrées DTMF de vos utilisateurs et de leur répondre via la ligne RTC vous permet de créer toutes sortes d'intégrations puissantes avec la voix. Consultez notre Guide du serveur vocal interactif (SVI).
Vous pouvez également consulter d'autres intégrations vocales intéressantes dont j'ai parlé à propos de la voix et de .NET, notamment :
Une copie du projet produit par cet article de blog peut être trouvée sur GitHub.