Ajouter Dialogflow et l'API SMS de Vonage à votre application Flask

Dialogflow est une plateforme de compréhension du langage naturel (NLU) fournie par Google. Elle est utilisée pour concevoir et intégrer des interfaces utilisateur conversationnelles dans des apps mobiles et web, des appareils, des bots et des systèmes vocaux interactifs. Dans ce tutoriel, nous allons montrer comment intégrer les API SMS de Dialogflow et de Vonage pour construire un bot de quiz qui interagit avec l'utilisateur final par SMS. Nous ne couvrirons pas tous les éléments de l'application, donc si vous partez de zéro, consultez le projet complet (ou lisez l'un de nos précédents tutoriels sur le développement de Flask à partir de la base !)

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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

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

Créer une application

Nous commencerons par utiliser le mode CLI de Vonage pour créer une application. Installez le CLI de Vonage sur votre machine comme suit :

npm install -g @vonage/cli

Créez localement un répertoire pour votre application :

mkdir your-application

Dans le répertoire, exécutez la commande suivante :

vonage apps:create

En mode CLI interactif :

Application Name: your-app-name
Select capabilities: press the space bar to select voice, messages and rtc
Create voice webhooks? No
Create messaging webhooks? No
Create RTC webhooks? No
Allow use of data for AI training? No

L'application devrait maintenant être créée. Visitez le tableau de bord et naviguez jusqu'à Applications. Votre nouvelle application devrait y figurer.

Configuration de l'agent Dialogflow

Pour configurer l'agent Dialogflow, visitez le site https://console.cloud.google.com et créez un nouveau projet :

New Dialogflow project

Prenez note de la mention PROJECT ID. Activez l'API Dialogflow dans la liste des API :

Enable Dialogflow

Visite https://dialogflow.cloud.google.com pour créer un nouvel agent :

Create Dialogflow agent

Pour faciliter la mise en place de votre application, j'ai inclus un fichier zip dans le répertoire GitHub repo pour ce projet. Naviguez jusqu'au répertoire dialogflow et sous resources téléchargez le fichier quizzie.zip (en anglais). Ce fichier zip est exporté depuis la page de configuration de Dialogflow et contient tous les intents, contextes et réponses nécessaires pour configurer un agent sur le tableau de bord de Dialogflow.

Dans le tableau de bord Dialogflow, cliquez sur Paramètres et naviguez vers Export/Import. Importez le fichier zip que nous venons de télécharger :

Import settings

Notre agent Dialogflow quiz est prêt à l'emploi !

Pour les étapes suivantes, nous devons créer la logique qui gérera les messages entre l'utilisateur final et notre agent Dialogflow.

Code d'application

Nous voulons écrire une interface pour envoyer un SMS à l'utilisateur final. Tout d'abord, assurez-vous que la bibliothèque Python de Vonage est installée :

pip install vonage

La fonction d'envoi d'un SMS se présente comme suit :

import vonage
import os
import json


def vonage_sms(message, recipient):
   VONAGE_API_KEY = os.getenv("VONAGE_API_KEY")
   VONAGE_API_SECRET = os.getenv("VONAGE_API_SECRET")
   VONAGE_NUMBER = os.getenv("VONAGE_NUMBER")

   client = vonage.Client(key=VONAGE_API_KEY, secret=VONAGE_API_SECRET)
   sms = vonage.Sms(client)

   response_data = sms.send_message(
       {
           "from": VONAGE_NUMBER,
           "to": recipient,
           "text": message,
       }
   )

   if response_data["messages"][0]["status"] == "0":
       return json.dumps("Message sent successfully.")
   else:
       return json.dumps(f"Message failed with error: {response_data['messages'][0]['error-text']}")

Ajoutez ensuite le code qui notifiera notre client :

#! /usr/bin/env python3
import argparse
import sys
import os

from dotenv import load_dotenv

sys.path.append('../')
import vonage

APP_ROOT = os.path.join(os.path.dirname(__file__), '..')  # refers to application_top
dotenv_path = os.path.join(APP_ROOT, '.env')
load_dotenv(dotenv_path)


def notify_customer(number):
   text = "Hello. You can start your quiz with quizzie-bot by sending the following keywords: hi," \
          " hello or vonage."
   print(vonage_sms(text, number))

Une fois que l'utilisateur final a reçu les messages, nous voulons qu'il y réponde. Nous devons créer un point de terminaison webhook entrant pour recevoir la réponse. Rappelez-vous que nous avons configuré l'URL de SMS entrant lors de la création de l'application. Il est maintenant temps d'ajouter de la logique à notre webhook :

@app.route("/update/", methods=['POST'])
def update_url():
   trigger = request.get_json().get('message')
   project_id = os.getenv("PROJECT_ID")
   session_id = os.getenv("SESSION_ID")
   language_code = os.getenv("LANG_CODE")

   response = detect_intent_texts(project_id, session_id, trigger, language_code)
   phone = phone_number()

   return send_sms(response, phone)

Nous avons besoin d'enchaîner les réponses que nous recevons de l'utilisateur final comme entrée de notre agent Dialogflow. Pour cela, nous devons utiliser l'agent Dialogflow REST.

Plus précisément, nous devons détecter l'intention de l'utilisateur et la transmettre à l'agent :

def detect_intent_texts(project_id, session_id, texts, language_code):
   """Returns the result of detect intent with texts as inputs.
   Using the same `session_id` between requests allows continuation
   of the conversation."""
   import dialogflow_v2 as dialogflow

   session_client = dialogflow.SessionsClient()

   session = session_client.session_path(project_id, session_id)
   print('Session path: {}\n'.format(session))

   for text in texts:
       text_input = dialogflow.types.TextInput(
           text=text, language_code=language_code)

       query_input = dialogflow.types.QueryInput(text=text_input)

       response = session_client.detect_intent(
           session=session, query_input=query_input)

       return response.query_result.fulfillment_text

Conclusion

La configuration de base est maintenant terminée. Nous avons montré la logique nécessaire pour que l'application envoie et reçoive des SMS, ainsi que la façon de se connecter à l'agent Dialogflow. Pour voir le code complet de l'application, consultez le repo du projet : https://github.com/nexmo-community/Vonage-QnA-app. Et pour toute autre question, n'hésitez pas à m'envoyer un email.