Construire un menu de réponse vocale interactive en utilisant Node.js et Express

Introduction

L'API Voice API de Vonage est le moyen le plus simple de créer des applications vocales de haute qualité dans le nuage.

Dans ce tutoriel, nous allons construire un menu de réponse vocale interactive en utilisant l'API Voice de Vonage et Node.js pour recevoir des appels entrants et capturer les entrées de l'utilisateur via le clavier.

Pour référence, le fichier source devrait ressembler à quelque chose comme celui-ci une fois l'exercice terminé.

Conditions préalables

Avant de commencer, assurez-vous que les éléments suivants sont installés :

• Node.js installé. Node.js est un environnement d'exécution JavaScript open-source et multiplateforme.

• ngrok - Un Account gratuit est nécessaire. Cet outil permet aux développeurs d'exposer un serveur de développement local à l'Internet.

• OPTIONNEL - CLI de Vonage Une fois que Node.js est installé, installez le CLI en tapant npm install -g @vonage/cli. Cet outil vous permet de créer et de gérer des applications Vonage à partir d'une interface de ligne de commande vs le portail des développeurs Vonage.

Créer une application Voice-Enabled de Vonage

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

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.

Nous devrons configurer les webhooks de l'application et plus encore. Veuillez noter que ceci peut être accompli par le biais du Portail des développeurs de Vonage ou le CLI de Vonage. Pour ce tutoriel, nous utiliserons le tableau de bord du développeur de Vonage.

Après avoir créé un Account, ouvrez une session dans le tableau de bord du développeur de Vonage. section Applicationset créez une nouvelle application. Donnez un nom à votre application, par exemple IVRMenu.

IVRMenuCall.png

Faites défiler la page et assurez-vous que l'option Voice est activée.

Notez les Réponseet événement car nous les compléterons sous peu. Nous laisserons l URL de repli de repli pour la durée de ce tutoriel.

VoiceCapability.png

Appuyer sur Générer une nouvelle application en bas de la page pour continuer.

Ce tutoriel nécessite également un numéro de téléphone virtuel. Pour en acheter un, rendez-vous sur Numbers > Acheter des Numbers et recherchez celui qui répond à vos besoins. Une fois que vous avez un numéro, reliez-le au tableau de bord du développeur Vonage, comme indiqué ci-dessous.

LinkedNumber.png

Ensuite, nous utiliserons ngrok pour exposer nos points de terminaison webhook sur notre machine locale en tant qu'URL publique.

Exécuter ngrok

ngrok est une application multiplateforme qui permet aux développeurs d'exposer un serveur de développement local à l'Internet avec un minimum d'effort. Nous l'utiliserons pour exposer notre service à l'Internet. Une fois que vous avez configuré ngrok et que vous êtes connecté (encore une fois, le compte gratuit est acceptable), exécutez la commande suivante :

ngrok http 3000

Une fois que ngrok s'est exécuté, il vous donnera un message de Forwarding que nous utiliserons comme base pour nos Webhooks plus tard dans l'article. La mienne ressemble à ce qui suit :

ngrok.png

Se souvenir de la Réponse et événement dans le portail des développeurs de Vonage, comme mentionné précédemment ? Nous devrons utiliser l'URL ngrok et remplir chaque champ, en ajoutant les lettres /answer et /eventpour l'URL de la réponse et l'URL de l'événement.

Ainsi, par exemple, mon Réponse pointe vers https://9ebc-2601-600-9580-d650-fd8d-62dc-f5e4-b88e.ngrok.io/answer et Événement towards https://9ebc-2601-600-9580-d650-fd8d-62dc-f5e4-b88e.ngrok.io/event.

webhooksection.png

Lorsque vous appelez le numéro associé à l'application et que celle-ci répond, le webhook défini dans l URL de réponse se déclenche. De même, les événements sont enregistrés avec une requête POST et se déclenchent lors de l'appel du numéro ou si le numéro est occupé, etc.

Configuration du projet Node.js

Maintenant que nous avons créé notre application Vonage Voice dans le tableau de bord du développeur, voyons comment configurer notre application Node.js.

Commencez par accéder à une invite de commande/terminal, créez un répertoire de travail et initialisez un projet Node.js.

Nous traiterons les demandes avec Express et utiliserons body-parser pour analyser les corps des requêtes entrantes. Installez ces deux éléments comme suit :

npm install express body-parser --save

Créer un fichier index.js et instancie Express ainsi que le body-parser.

const app = require('express')()
const bodyParser = require('body-parser')

app.use(bodyParser.json())

Définissons le point de terminaison de l'URL de la réponse comme suit /answer et l'URL de l'événement comme /event.

Lorsqu'un utilisateur appuie sur un numéro de son clavier, vous pouvez savoir sur quelle touche il a appuyé grâce à la fonction DTMF (Dual Tone Multifrequency). Chaque fois qu'une entrée DTMF est collectée auprès de l'utilisateur, elle est envoyée à notre /dtmf que nous définirons à l'étape suivante.

Créez une route HTTP GET pour traiter les demandes de /answer pour récupérer votre NCCO :

app.get('/answer', (req, res) => {
  const ncco = [{
      action: 'talk',
      bargeIn: true,
      text: 'Hello! Please enter a digit to continue.'
    },
    {
      action: 'input',
      maxDigits: 1,
      eventUrl: [`https://${req.get('host')}/dtmf`]
    }
  ]

  res.json(ncco)
})

Nous utiliserons l'action talk pour accueillir l'appelant et lui demander d'appuyer sur un chiffre, en mettant l'option bargeIn à true afin que l'utilisateur puisse saisir un chiffre sans attendre la fin du message verbal.

Ensuite, nous ajouterons un input au NCCO pour capturer le chiffre par DTMF. Définissez la propriété maxDigits à 1 et la propriété eventURL à un gestionnaire pour recevoir et traiter l'entrée. Veuillez noter que vous pouvez étendre le nombre de pressions de touches qu'un utilisateur peut effectuer via la propriété maxDigits propriété.

Traiter les données de l'utilisateur

Ajoutons le code pour gérer les DTMF entrants dans index.js. Vonage fait une POST à notre webhook, que nous exposerons en tant que point de terminaison à l'adresse /dtmf. Lorsque nous recevrons la requête, nous créerons une autre action talk qui inspecte l'objet de la demande et lit les chiffres sur lesquels l'appelant a appuyé :

app.post('/dtmf', (req, res) => {
  const ncco = [{
    action: 'talk',
    text: `You pressed ${req.body.dtmf}`
  }]

  res.json(ncco)
})

Le point d'arrivée de l'élément event_url doit être POST, donc définissons /events:

app.post('/events', (req, res) => {
  console.log(req.body)
  res.send(200);

Cette opération permet d'enregistrer tous les événements déclenchés dans le terminal ou l'invite de commande.

Exécuter l'application

Saisissez les informations suivantes à l'invite de votre commande/terminal pour lancer l'application :

node index.js

Passons un coup de fil pour voir si votre application fonctionne ! Appelez votre numéro virtuel depuis votre téléphone portable et appuyez sur un chiffre de votre clavier. Si tout fonctionne, vous devriez entendre le message que vous avez défini dans votre NCCO : "Vous avez appuyé sur X."

Synthèse

Maintenant que vous avez construit un menu de réponse vocale interactive à l'aide de l'API Voice de Vonage et de Node.js, pourquoi ne pas apprendre comment envoyer des messages de synthèse vocale dans plus de 40 langues ? Vous pouvez également en apprendre davantage sur notre Voice API et vous plonger dans plusieurs extraits de code.

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 !