Comment gérer les entrées utilisateur avec ASP.NET Core

Il s'agit du quatrième tutoriel sur l'utilisation des Voice API avec la série ASP.NET. Dans le tutoriel précédent, nous avons appris comment recevoir un appel téléphonique avec Voice API de Vonage, ASP.NET Core et NancyFX. C'est un bon début, mais dans un scénario réel, nous nous attendons à une sorte d'interaction avec l'appelant. Il sera peut-être invité à choisir une option ou à saisir un code PIN. Nous avons besoin d'un moyen de gérer les données de l'utilisateur.

C'est exactement l'objectif de ce tutoriel ; nous allons créer une application ASP.NET qui traite les appels vocaux entrants et répond aux entrées de l'utilisateur à l'aide de l'API Voice de Voice API de Vonage.

Objectifs d'apprentissage

Dans ce tutoriel, nous allons :

• Créer une application ASP.NET Core.

• Utilisez NancyFX avec ASP.NET Core.

• Créez une application vocale Vonage.

• Recevoir des appels entrants dans l'application.

• Créer et renvoyer les BCN.

• Traiter les données de l'utilisateur.

• Exécuter et tester le code à l'aide de Ngrok.

Conditions préalables

Vonage API Account

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.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

• Visual Studio 2017.

• Un projet mis en place pour cette série de tutoriels, que vous pouvez trouver sur Github.

• Optionnel : Le CLI de Vonage.

Configuration

Pour utiliser l'API Voice de Vonagede Vonage, nous devons créer une application Voice. Les étapes de configuration sont détaillées dans l'article "Nexmo Voice API avec ASP.NET : Avant de commencer".. Une fois la configuration effectuée avec succès, nous sommes prêts à recevoir un appel entrant et à gérer les entrées des utilisateurs avec l'API Voice de Vonage !

Réception d'un appel téléphonique et gestion des entrées avec ASP.NET

Lorsqu'un appel est reçu, l'API Voice de Vonage envoie une requête à votre application pour savoir comment y répondre. Dans cet article, nous utiliserons la synthèse vocale pour accueillir l'appelant et l'action input pour recueillir les données DTMF de l'appelant.

DTMF (Dual Tone Multi Frequency) est une forme de signalisation utilisée par les systèmes téléphoniques pour transmettre les chiffres 0-9 et les * et # sont transmis par les systèmes téléphoniques. En général, un appelant appuie sur ces touches du clavier de son téléphone et le téléphone génère alors une tonalité composée de deux fréquences jouées simultanément (d'où le terme Dual Tone).

Pour capturer les DTMF dans notre application, nous allons utiliser NancyFX dans notre projet ASP.NET Core. Tout d'abord, nous devons ajouter Nancy à notre projet :

PM> Install-Package Nancy
PM> Install-Package Microsoft.AspNetCore.Owin

Pour permettre à Nancy de traiter toutes les requêtes HTTP, nous devons indiquer à ASP.NET Core d'utiliser Nancy via Owin dans la méthode Configure de la méthode Startup.cs.

using Microsoft.AspNetCore.Builder;
using Nancy.Owin;

namespace NexmoVoiceASPNetCoreQuickStarts
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app)
        {
            app.UseOwin(x => x.UseNancy());
        }
    }
}

L'étape suivante consiste à créer un module Nancy dans lequel nous établissons une route vers /webhook/answer qui répondra avec le ncco renvoyée par GetDTMFNCCO()

using Nancy;
using Newtonsoft.Json.Linq;

namespace NexmoVoiceASPNetCoreQuickStarts
{
    public class VoiceModule : NancyModule
    {
        public VoiceModule()
        {
            Get["/webhook/answer"] = x => GetDTMFNCCO();
        }

        private string GetDTMFNCCO()
        {
            dynamic TalkNCCO = new JObject();
            TalkNCCO.action = "talk";
            TalkNCCO.text = "Hello. Please press any key to continue.";

            JArray jarrayObj = new JArray();
            jarrayObj.Add(TalkNCCO);

            dynamic InputNCCO = new JObject();
            InputNCCO.action = "input";
            InputNCCO.maxDigits = "1";
            InputNCCO.eventUrl = $"{Request.Url.SiteBase}/webhook/dtmf";

            jarrayObj.Add(InputNCCO);

            return jarrayObj.ToString();

        }
    }
}

Le code ci-dessus permet d'obtenir les résultats suivants :

Lorsqu'un appel est reçu, Vonage invite l'utilisateur à appuyer sur n'importe quelle touche en lisant le texte "Bonjour. Veuillez appuyer sur n'importe quelle touche pour continuer". Lorsque l'utilisateur appuie sur une touche, nous transmettons cette entrée à webhook/dtmf où elle sera traitée correctement. Pour traiter les DTMF, nous devons indiquer au module Nancy comment répondre une fois la demande reçue. Dans ce cas, nous lirons simplement à l'appelant la touche sur laquelle il a appuyé.

public class VoiceModule : NancyModule
{
    public VoiceModule()
    {
        Get["/webhook/answer"] = x => GetDTMFNCCO();
        Post["/webhook/dtmf"] = x => GetDTMFInput();
    }
    private string GetDTMFNCCO()
    {
        dynamic TalkNCCO = new JObject();
        TalkNCCO.action = "talk";
        TalkNCCO.text = "Hello. Please press any key to continue.";

        JArray jarrayObj = new JArray();
        jarrayObj.Add(TalkNCCO);

        dynamic InputNCCO = new JObject();
        InputNCCO.action = "input";
        InputNCCO.maxDigits = "1";
        InputNCCO.eventUrl = $"{Request.Url.SiteBase}/webhook/dtmf";

        jarrayObj.Add(InputNCCO);

        return jarrayObj.ToString();

    }

    private string GetDTMFInput()
    {
        dynamic TalkNCCO = new JObject();
        TalkNCCO.action = "talk";
        TalkNCCO.text = $"You pressed {Request.Query["dtmf"]} ";

        JArray jarrayObj = new JArray();
        jarrayObj.Add(TalkNCCO);

        return jarrayObj.ToString();

    }
}

Nous avons terminé ! Pour tester cet exemple d'application, quelques étapes de configuration supplémentaires sont nécessaires.

Si vous avez suivi jusqu'ici, vous avez déjà configuré votre Account Voice et créé une application vocale comme indiqué dans cet article. Nous devons relier cette appli au numéro de téléphone Vonage que nous allons appeler. Si vous n'avez pas de numéro, vous pouvez en acheter un en utilisant le tableau de bord ou le CLI :

vonage numbers:search US
vonage numbers:buy <PHONE_NUMBER> US

De même, pour lier le numéro, vous pouvez utiliser le tableau de bord ou le CLI :

vonage link:app --number=PHONE_NUMBER APP_ID

Nous devons indiquer à Vonage l'URL à laquelle adresser une requête lorsqu'un appel est reçu - c'est ce qu'on appelle l'URL answer_url. Pour moi, cette URL est http://localhost:63286/webhook/answer et elle n'est exécutée que localement. Pour exposer notre URL de réponse au webhook, nous utiliserons Ngrok.

ngrok http 63286

Nous avons maintenant une nouvelle url (la mienne est http://5e18af56.ngrok.io) qui peut être utilisée comme l'url de l'application vocale. answer_url pour l'application vocale. Mettez à jour votre application avec votre nouvelle adresse answer_url. Elle devrait ressembler à http://[id].ngrok.io/webhook/answerEt voilà ! Exécutez l'application et faites un essai en appelant le numéro Vonage que vous avez acheté.

En savoir plus

Références et outils API

• Application API.

• Voice API.

• Client REST Nexmo pour .NET.

Guides de démarrage de Vonage pour ASP.NET

• Comment envoyer des SMS avec ASP.NET.

• Comment recevoir des SMS avec ASP.NET.

• Comment obtenir un accusé de réception de SMS en ASP.NET.

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

• Comment diffuser de l'audio à un appelant en ASP.NET.

• Comment recevoir un appel téléphonique avec Nexmo Voice API, ASP.NET Core et NancyFX.

• Premiers pas avec les API de Nexmo Number Insight et ASP.NET.