Uso de Dialogflow con Firebase y Vonage Messages Sandbox

Utilización de Dialogflow para crear un chatbot que interactúe con sus clientes es una forma estupenda de gestionar solicitudes entrantes como reservas, consultas bancarias, preguntas frecuentes y asistencia inicial. Al combinar Dialogflow con Firebase y Mensajes API de Vonagelas cosas empiezan a calentarse.

Requisitos previos

En este tutorial, conectarás un agente de Dialogflow con la API de Messages API de Vonage mediante Firebase. Una vez completado, puedes enviar un mensaje en Facebook Messenger al agente Dialogflow y obtener una respuesta basada en las reglas del agente.

Usted querrá asegurarse de que tiene:

• Cuenta de Google Cloud

• Firebase CLI

• Sandbox de la API de Messages API 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.

Crear una aplicación Firebase

Si es la primera vez que configuras un proyecto Firebase, te recomiendo que sigas el tutorial de Google Firebase de Google de Google para aclimatarte al entorno. Si estás acostumbrado a Firebase o te sientes aventurero, el primer paso es crear un nuevo proyecto Firebase. Siéntete libre de ponerle un nombre memorable.

Create Firebase Project

Una vez finalizado el proceso de creación inicial (menos de 5 minutos), configure estos dos elementos en el panel de control de su proyecto:

1. Actualizar a Blaze Pay-As-You-Go Puedes encontrarlo en Configuración -> Uso y facturación -> Detalles y configuración -> Modificar plan. Firebase requiere Blaze para que las integraciones de terceros funcionen.

2. Elija una ubicación de recursos Encuéntrelo en Configuración -> Configuración del proyecto -> General

Una vez que todo esté listo, puede configurar el agente Dialogflow y asociarlo con el nuevo proyecto Firebase/GCP.

Configurar el agente Dialogflow

Ahora está listo para crear un nuevo agente Dialogflow, el chatbot con el que interactuará más adelante. Dialogflow utiliza el Procesamiento del Lenguaje Natural para determinar las intenciones del usuario basándose en lo que escribe o habla y devolver una acción basada en esa intención.

A continuación, importe un "Agente Preconstruido" proporcionado por Google para ayudarle a empezar. Si es la primera vez que utiliza DialogFlow, deberá crear un agente en blanco en la página de inicio.

Create Blank Dialogflow Agent

Una vez que tengas un agente, puedes seleccionar los "Agentes Preconstruidos" del menú de la izquierda. Se te presentan muchos tipos diferentes de agentes que pueden ayudarte a empezar a aprender cómo construir tu chatbot. Para este ejemplo, elegí "Easter Eggs".

Prebuilt Agents

Importe un agente y espere a que finalice el proceso de compilación. Una vez finalizado, obtenga las credenciales de la cuenta de servicio.

Descargar claves de cuentas de servicio

Navegue hasta el servicio GCP IAM & Admin para cuentas de servicio. Asegúrese de seleccionar el proyecto correcto que ya ha estado utilizando.

Debería ver una cuenta de servicio con un aspecto similar a dialogflow@myexampleproject.iam.gserviceaccount.com. Haga clic en los puntos de la derecha y seleccione Create Key y seleccione JSON de las opciones. Este proceso genera y descarga un JSON archivo. Guarda este archivo para más tarde.

Crear funciones localmente

Ahora tienes un proyecto Firebase y un agente Dialogflow listos para usar. Los dos sistemas necesitan comunicarse entre sí y con las API de Vonage. Para ello, necesitas un poco de código para que las cosas funcionen.

La CLI de Firebase tiene algunas herramientas útiles para empezar. Asegúrate de que tienes la última versión y ejecuta lo siguiente:

Este comando crea el proyecto dentro de su carpeta raíz y le pide que lo conecte a un proyecto ya existente. Después de unos pocos avisos, el comando se ejecuta npm install para instalar todos los requisitos. Una vez completado, navega a la carpeta functions y usa este comando para instalar los otros paquetes que necesites:

En este momento, también debe mover el archivo de la cuenta de servicio JSON al directorio functions directorio. Una vez hecho esto, asegúrese de añadirlo también a su archivo .gitignore también.

El Código

Dentro del directorio functions directorio está index.js. Proporcionan un código de muestra para que comiences, pero puedes eliminarlo y reemplazarlo por el siguiente código para enviar un mensaje al Sandbox de mensajes de Vonage. Asegúrate de tener a mano tu clave y secreto de API de Vonage para esto.

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 siguiente función es la pasarela entre Firebase y Dialogflow. El mensaje entrante de Vonage se envía al agente de Dialogflow para determinar la intención del mensaje. Una vez determinada la intención, Dialogflow devuelve un mensaje para reenviarlo al cliente.

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);
}

Vonage Messages Sandbox utiliza un webhook entrante para recibir los mensajes mediante un método POST a 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);
});

Estas tres funciones deben estar dentro del archivo index.js y guardadas. Todo lo que queda es desplegar estas funciones.

Despliegue Funciones

Usando la CLI de Firebase, despliegue las funciones en Firebase usando este comando:

Si la implementación se realiza correctamente, obtendrá el webhook necesario para el Vonage Mensajes Sandbox Inbound webhook.

Una vez que tengas el webhook actualizado, puedes probarlo en Facebook Messenger.

Facebook Messenger Example

Siéntase libre de cambiar intenciones y acciones en Dialogflow para empezar a ver cómo puede funcionar en su estrategia de comunicación.

Si quieres ver una versión completa de este y otros ejemplos de Google Cloud, puedes encontrarla aquí - https://github.com/nexmo-community/google-cloud-sample-code. Si tienes alguna pregunta o solicitud de otros ejemplos con Google Cloud, Dialogflow o Firebase, abre un pull request o envíame un mensaje en Twitter.