Utiliser Dialogflow avec Firebase et Vonage Messages Sandbox

Utilisation de Dialogflow pour créer un chatbot qui interagit avec vos clients est un excellent moyen de gérer les demandes entrantes telles que les réservations, les demandes de renseignements bancaires, les FAQ et l'assistance initiale. Lorsque vous combinez Dialogflow avec Firebase et Vonage Messages APIles choses commencent à s'accélérer.

Conditions préalables

Pour ce tutoriel, vous connectez un agent Dialogflow avec l'API Messages de Vonage en utilisant Firebase. Une fois terminé, vous pouvez envoyer un message dans Facebook Messenger à l'agent Dialogflow et obtenir une réponse basée sur les règles de l'agent.

Vous devrez vous assurer que vous avez.. :

• Compte Google Cloud

• CLI Firebase

• Bac à sable de l'API Messages de Vonage

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 Firebase

Si c'est la première fois que vous mettez en place un projet Firebase, je vous recommande de suivre le tutoriel de Google intitulé tutoriel de démarrage de Firebase de Google de Google pour vous acclimater à l'environnement. Si vous êtes habitué à Firebase ou si vous vous sentez aventureux, la première étape consiste à créer un nouveau projet Firebase. N'hésitez pas à lui donner un nom mémorable.

Create Firebase Project

Une fois le processus de création initial terminé (moins de 5 minutes), configurez ces deux éléments dans le tableau de bord de votre projet :

1. Passer à Blaze Pay-As-You-Go Vous pouvez localiser ceci sous Paramètres -> Utilisation et facturation -> Détails et paramètres -> Modifier le plan. Firebase a besoin de Blaze pour que les intégrations tierces fonctionnent.

2. Choisir l'emplacement des ressources Vous trouverez cela dans Paramètres -> Paramètres du projet -> Général

Une fois que tout est prêt, vous pouvez configurer l'agent Dialogflow et l'associer au nouveau projet Firebase/GCP.

Configuration de l'agent Dialogflow

Vous êtes maintenant prêt à créer un nouvel agent Dialogflow - le chatbot avec lequel vous interagirez plus tard. Dialogflow utilise le Traitement du Langage Naturel pour déterminer les intentions de l'utilisateur en fonction de ce qu'il tape ou de ce qu'il dit, et retourner une action basée sur cette intention.

Ensuite, importez un "agent préconstruit" fourni par Google pour vous aider à démarrer. Si vous ne connaissez pas DialogFlow, vous devez créer un agent vierge sur la page d'accueil.

Create Blank Dialogflow Agent

Une fois que vous avez un agent, vous pouvez sélectionner les "Agents préconstruits" dans le menu de gauche. Vous avez le choix entre différents types d'agents qui peuvent vous aider à apprendre à construire votre chatbot. Pour cet exemple, j'ai choisi "Easter Eggs".

Prebuilt Agents

Importez un agent et attendez qu'il termine le processus de construction. Une fois terminé, obtenez les informations d'identification du compte de service.

Télécharger les clés de compte de service

Naviguez jusqu'au service GCP IAM & Admin pour les comptes de service. Assurez-vous de sélectionner le projet correct que vous avez déjà utilisé.

Vous devriez voir un compte de service qui ressemble à dialogflow@myexampleproject.iam.gserviceaccount.com. Cliquez sur les points à droite et sélectionnez Create Key puis choisissez JSON dans les options. Ce processus génère et télécharge un fichier JSON fichier. Enregistrez ce fichier pour plus tard.

Créer des fonctions au niveau local

Vous avez maintenant un projet Firebase et un agent Dialogflow prêts à fonctionner. Les deux systèmes doivent communiquer entre eux et avec les API de Vonage. Pour ce faire, vous avez besoin d'un peu de code pour faire fonctionner les choses.

Le CLI de Firebase dispose de quelques outils utiles pour vous aider à démarrer. Assurez-vous d'avoir la dernière version et exécutez ce qui suit :

Cette commande crée le projet dans votre dossier racine et vous demande de le connecter à un projet déjà existant. Après quelques invites, la commande exécute npm install pour installer toutes les exigences. Une fois l'installation terminée, accédez au dossier functions et utilisez cette commande pour installer les autres paquets dont vous avez besoin :

À ce stade, vous devez également déplacer le fichier du compte de service JSON dans le répertoire functions dans le répertoire Une fois que vous avez fait cela, assurez-vous de l'ajouter à votre fichier .gitignore également.

Le code

À l'intérieur du répertoire functions se trouve index.js. Ils fournissent un exemple de code pour vous aider à démarrer, mais vous pouvez le supprimer et le remplacer par le code suivant pour envoyer un message au Vonage Messages Sandbox. Assurez-vous d'avoir votre clé et votre secret API de Vonage à portée de main.

const functions = require('firebase-functions');
const axios = require('axios');
// the service account JSON file downloaded earlier - make sure this is named properly
const serviceAccount = require('./service_account.json');
const Dialogflow = require('@google-cloud/Dialogflow');
// This method takes the TO_ID, FROM_ID, MSG from the webhook defined later
// DialogFlow responses will be sent using this function
// You will need to get your API Key and Secret from the Vonage Dashboard.
function sendMessage(TO_ID, FROM_ID, MSG) {
  return axios.post('https://messages-sandbox.nexmo.com/v0.1/messages', {
    "from": { "type": 'messenger', "id": FROM_ID },
    "to": { "type": 'messenger', "id": TO_ID },
    "message": {
      'content': {
        'type': 'text',
        'text': MSG
      }
    }
  }, {
    auth: {
      username: 'API_KEY',
      password: 'API_SECRET'
    }
  })
}

La fonction suivante est la passerelle entre Firebase et Dialogflow. Le message entrant de Vonage est envoyé à l'agent Dialogflow pour déterminer l'intention du message. Une fois l'intention déterminée, Dialogflow renvoie un message à transmettre au client.

async function DialogflowGateway(text, sessionId) {
  const sessionClient = new Dialogflow.SessionsClient({ credentials: serviceAccount });
  const sessionPath = sessionClient.projectAgentSessionPath('YOUR-GOOGLE-PROJECT', sessionId);
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: text,
        languageCode: 'en-US',
      },
    },
  };
  console.log(request)
  return sessionClient.detectIntent(request);
}

Le Vonage Messages Sandbox utilise un webhook entrant pour recevoir les messages à l'aide d'une méthode POST vers Firebase.

exports.webhook = functions.https.onRequest(async (req, res) => {
  const { message, from, to } = req.body;
  try {
    // the message from the user is sent to Dialogflow, and a response is returned
    const response = await DialogflowGateway(message.content.text, from.id);
    // the response from Dialogflow is sent back to the user through Vonage
    await sendMessage(from.id, to.id, response[0].queryResult.fulfillmentText);
  } catch (error) {
    console.error(error);
  }
  res.sendStatus(200);
});

Ces trois fonctions doivent se trouver dans le fichier index.js et sauvegardées. Il ne reste plus qu'à déployer ces fonctions.

Déployer des fonctions

A l'aide de la CLI Firebase, déployez les fonctions sur Firebase en utilisant cette commande :

Lorsque le déploiement est réussi, vous obtenez le webhook requis pour le service Vonage Messages Sandbox Inbound webhook.

Une fois le webhook mis à jour, vous pouvez le tester sur Facebook Messenger.

Facebook Messenger Example

N'hésitez pas à modifier les intentions et les actions dans Dialogflow pour commencer à voir comment il peut fonctionner dans votre stratégie de communication.

Si vous souhaitez voir une version complète de cet exemple et d'autres exemples de Google Cloud, vous pouvez les trouver ici - https://github.com/nexmo-community/google-cloud-sample-code. Si vous avez des questions ou des demandes pour d'autres exemples avec Google Cloud, Dialogflow ou Firebase, ouvrez une demande de téléchargement ou envoyez-moi un message sur Twitter.