Como usar o Dialogflow com o Firebase e o ambiente de testes do Vonage Messages

Usando o Dialogflow para criar um chatbot que interaja com seus clientes é uma ótima maneira de lidar com solicitações recebidas, como reservas, consultas bancárias, perguntas frequentes e suporte inicial. Ao combinar o Dialogflow com o Firebase e Messages API da Vonage, as coisas começam a ficar interessantes.

Pré-requisitos

Neste tutorial, você conectará um agente do Dialogflow à Messages API do Vonage usando o Firebase. Ao concluir, você poderá enviar uma mensagem pelo Facebook Messenger para o agente do Dialogflow e receber uma resposta com base nas regras do agente.

É bom você verificar se tem:

• Account do Google Cloud

• CLI do Firebase

• Ambiente de testes da Messages API da Vonage

Criar um aplicativo do Firebase

Se esta for a primeira vez que você está configurando um projeto do Firebase, recomendo que você siga o tutorial de introdução ao Firebase para se familiarizar com o ambiente. Se você já está acostumado com o Firebase ou está se sentindo aventureiro, o primeiro passo é criar um novo projeto no Firebase. Fique à vontade para dar a ele qualquer nome que seja fácil de lembrar.

Create Firebase Project

Depois de concluir o processo inicial de criação (menos de 5 minutos), configure estes dois itens no painel do seu projeto:

1. Atualize para o Blaze Pay-As-You-Go Você pode encontrar essa opção em Configurações -> Uso e cobrança -> Detalhes e configurações -> Modificar plano. O Firebase exige o Blaze para que qualquer integração de terceiros funcione.

2. Escolha um local de recursos Encontre essa opção em Configurações -> Configurações do projeto -> Geral

Depois que tudo estiver pronto, você poderá configurar o agente do Dialogflow e associá-lo ao novo projeto do Firebase/GCP.

Configurar o agente do Dialogflow

Agora você está pronto para criar um novo agente do Dialogflow — o chatbot com o qual você irá interagir mais tarde. O Dialogflow utiliza o Processamento de Linguagem Natural para determinar as intenções do usuário com base no que ele digita ou fala e retorna uma ação de acordo com essa intenção.

Em seguida, importe um “Agente pré-configurado” fornecido pelo Google para ajudar você a começar. Se você ainda não conhece o DialogFlow, será necessário criar um agente em branco na página inicial.

Create Blank Dialogflow Agent

Depois de escolher um agente, você pode selecionar a opção “Agentes pré-criados” no menu à esquerda. Serão exibidos diversos tipos de agentes que podem ajudá-lo a começar a aprender como criar seu chatbot. Para este exemplo, escolhi “Easter Eggs”.

Prebuilt Agents

Importe um agente e aguarde até que ele conclua o processo de compilação. Quando terminar, obtenha as credenciais da conta de serviço.

Baixar chaves de conta de serviço

Acesse o serviço IAM & Admin do GCP para contas de serviço. Certifique-se de selecionar o projeto correto que você já vem utilizando.

Você deve ver uma conta de serviço semelhante a dialogflow@myexampleproject.iam.gserviceaccount.com. Clique nos pontos à direita e selecione Create Key e, em seguida, escolha JSON uma das opções. Esse processo gera e baixa um JSON arquivo. Salve esse arquivo para uso posterior.

Compilar funções localmente

Agora você já tem um projeto do Firebase e um agente do Dialogflow prontos para uso. Os dois sistemas precisam se comunicar entre si e com as APIs da Vonage. Para isso, é preciso escrever um pouco de código para que tudo funcione.

A CLI do Firebase oferece algumas ferramentas úteis para você começar. Certifique-se de ter a versão mais recente e execute o seguinte:

Este comando cria o projeto dentro da sua pasta raiz e solicita que você o conecte a um projeto já existente. Após algumas solicitações, o comando é executado npm install para instalar todos os pré-requisitos. Quando terminar, acesse a pasta `functions` e use este comando para instalar os outros pacotes necessários:

Neste momento, você também deve transferir o arquivo da conta de serviço JSON para o functions diretório. Depois de fazer isso, certifique-se de adicioná-lo ao seu .gitignore arquivo também.

O Código

Dentro do functions diretório está index.js. Eles fornecem alguns exemplos de código para você começar, mas você pode excluí-los e substituí-los pelo código a seguir para enviar uma mensagem para o Sandbox do Vonage Messages. Certifique-se de ter sua chave e seu segredo da API do Vonage à mão para isso.

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

A próxima função é a ponte entre o Firebase e o Dialogflow. A mensagem recebida da Vonage é enviada ao agente do Dialogflow para determinar a intenção da mensagem. Assim que a intenção é determinada, o Dialogflow retorna uma mensagem para ser encaminhada ao 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);
}

O Sandbox do Vonage Messages utiliza um webhook de entrada para receber as mensagens por meio do método POST no 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);
});

Essas três funções devem estar dentro do index.js arquivo e salvas. Agora só falta implantar essas funções.

Implantar funções

Usando a CLI do Firebase, implante as funções no Firebase com este comando:

Após a implantação bem-sucedida, você receberá o webhook necessário para o Sandbox do Vonage Messages Inbound webhook.

Depois de atualizar o webhook, você pode testá-lo no Facebook Messenger.

Facebook Messenger Example

Fique à vontade para alterar as intenções e ações no Dialogflow para começar a ver como ele pode se encaixar na sua estratégia de comunicação.

Se você quiser ver a versão completa deste e de outros exemplos do Google Cloud, acesse aqui: https://github.com/nexmo-community/google-cloud-sample-code. Se você tiver alguma dúvida ou quiser outros exemplos com o Google Cloud, o Dialogflow ou o Firebase, abra uma solicitação de pull ou me mande uma mensagem no Twitter.