Como integrar o Dialogflow ao Google Chat

1. Antes de começar

Neste codelab, você vai aprender como o Dialogflow se conecta às APIs do Google Workspace para criar um agendador de consultas totalmente funcional com o Google Agenda e respostas dinâmicas no Google Chat.

Se você ainda não tiver a configuração dos codelabs anteriores ou se sentir confiante com o Dialogflow e o fulfillment, faça o download do código inicial e da configuração do agente aqui.

https://github.com/googleworkspace/appointment-scheduler-codelab

Pré-requisitos

Antes de continuar, conclua os seguintes codelabs:

  1. Criar um agendador de consultas com o Dialogflow
  2. Integrar o Dialogflow ao Actions on Google
  3. Entenda as entidades no Dialogflow
  4. Entenda o fulfillment integrando o Dialogflow com o Agenda

Você também precisa entender os conceitos e construções básicos do Dialogflow, que podem ser aprendidos nos vídeos a seguir, encontrados no programa de treinamentos Criar um chatbot com o Dialogflow.

O que você vai aprender

  • Como implantar e configurar um app de chat do Google Chat
  • Como criar cards de exibição no Google Chat
  • Como criar payloads personalizados no fulfillment do Dialogflow

O que você vai criar

  • Uma integração entre o Dialogflow, o Google Chat e o Google Agenda
  • (Opcional) Integre o Google Maps para ter cards mais completos

5b4ca104638f9e8d.png

O que é necessário

  • Um navegador da Web e um endereço de e-mail para fazer login no console do Dialogflow
  • O Google Agenda e o Google Chat estão ativados no seu domínio do Google Workspace

2. Ativar e configurar o Google Chat

Vamos começar com o agente do Dialogflow que você criou nos codelabs anteriores.

  1. No console do Dialogflow, clique em d7d792687e597dd5.png.
  2. Na guia Geral, role até ID do projeto e clique em Google Cloud f2bffd4fcdb84fa9.png.

34be16fcd4c5aeff.png

  1. No console do Google Cloud, clique em Menu de navegação ☰ > APIs e serviços > Biblioteca.
  2. Pesquise "API Google Chat" e clique em Ativar para usar a API no projeto na nuvem do Google.
  3. Agora vamos configurar seu app de chat. Acesse a página Configuração da API. Cada projeto do GCP pode ter no máximo um app de chat.
  1. Os campos do Dialogflow vão preencher as opções de configuração.
  2. Mude o campo "URL do avatar" para esta imagem de carro: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. Para ativar o app de chat em mensagens diretas e espaços, selecione É possível enviar mensagens diretamente para o app e O app funciona em espaços com vários usuários.

Clique em Salvar e saia do console do Cloud.

3. Outras integrações do Dialogflow

O Google Chat é ativado por padrão, mas, se você quiser que um bot atenda a várias plataformas, acesse a página Integrações no console do Dialogflow para ativá-las.

4. Teste no Google Chat

Agora que o app de chat está configurado, vamos adicioná-lo a um espaço do Chat e testá-lo. Abra o Google Chat e crie um espaço de teste.

  1. No canto superior direito do espaço, clique no menu suspenso e selecione Adicionar pessoas e apps.
  2. Pesquise AppointmentScheduler e adicione o app ao espaço.
  3. Agora você pode interagir com o app que já criou no Google digitando @AppointmentScheduler no espaço.

Teste na plataforma com a mesma entrada dos codelabs anteriores:

  1. Usuário: "@AppointmentScheduler Agende um horário para o registro do veículo às 14h de amanhã."
  2. App de chat: "Ok, vamos ver se conseguimos encaixar você. 24 de abril, às 14h, está ótimo!"

Em seguida, vamos usar as personalizações no Google Chat para adicionar respostas mais completas.

5. Cards personalizados do Google Chat

Com o Google Chat, é possível fazer com que o app de chat retorne ao usuário uma resposta de texto básica ou uma resposta em ficha de informações, que permite uma interface mais rica criada por diferentes widgets, incluindo imagens, botões etc. Agora que conectamos seu agente do Dialogflow a um app do Google Chat, basta retornar o JSON no formato correto para exibir no Google no seu código de atendimento. Vamos analisar alguns exemplos de JSON.

A resposta de texto básica tem esta aparência:

 {
  "text": "Your pizza delivery is here!"
}

7e1cd3efb4fe9d1f.png

Exemplo de resposta em card com widgets:

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

72ac1b2903ed60b6.png

Para saber mais sobre cards, consulte a documentação sobre formato de mensagem. Na próxima seção, vamos adicionar cards ao app de chat.

6. Payloads personalizados e cards de chat

Os payloads personalizados no Dialogflow permitem mensagens de resposta avançada específicas da plataforma. É aqui que vamos adicionar nossos cards JSON do Hangouts Chat, que serão enviados de volta ao usuário pelo agente.

Vamos começar adicionando um card básico para a intent de boas-vindas. No console do Dialogflow, navegue até a intenção de boas-vindas padrão e role para baixo até a seção de respostas.

9624208f0d266afd.png

Clique em Google Chat, desmarque Usar respostas da guia PADRÃO como as primeiras respostas e clique em ADICIONAR RESPOSTAS > Carga útil personalizada.

Um esqueleto JSON vai aparecer.

bb064f7ec1237fd3.png

Copie e cole o código abaixo. Configuramos um card com um widget TextParagraph.

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

Clique em Salvar e acesse o espaço de teste do Chat para ver o card renderizado. No espaço do Chat, digite "@AppointmentScheduler hello".

91af6321f3a26e19.png

Em seguida, vamos adicionar uma carga útil personalizada ao código de atendimento para gerar o conteúdo dinamicamente com nosso código.

7. Adicionar um card no Fulfillment

Agora vamos criar um card com vários widgets para mostrar um horário agendado. Vamos adicionar uma função chamada getGoogleChatCard em que vamos renderizar as entradas: appointmentType, date e time.

Adicione a função abaixo ao código em index.js na parte de baixo.

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

Esse card contém um par de chave-valor e um widget de botão. Os widgets são ordenados em um section, e o card contém uma lista de seções a serem renderizadas.

Agora vamos chamar essa função quando um evento da agenda for criado. Na função createCalendarEvent, substitua o conteúdo pelo código abaixo e implante a função.

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

Quando o agente estiver respondendo no Google Chat, ele vai saber que precisa retornar o card criado acima. Teste com uma solicitação de programação.

8. (Opcional) Adicionar um widget de imagem do Google Maps

Se quiser deixar o card de resposta mais visual, adicione um mapa estático do local do horário gerado pela API Maps Static. A API permite construir uma imagem do Maps usando parâmetros de URL. Em seguida, podemos usar a imagem em um widget de imagem no card.

5b4ca104638f9e8d.png

  1. Ative a API Maps Static no console do Google Cloud da mesma forma que ativou as APIs Calendar e Google Chat.
  2. Crie e salve uma chave de API para seu projeto na página APIs e serviços do console. Para mais informações sobre recuperação e práticas recomendadas de chaves de API com o Maps, consulte este link. c0238236d3c709c5.png
  3. Copie a chave de API e as constantes a seguir para a parte de cima do arquivo em index.js:
const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';
  1. Em seguida, adicione um widget de imagem à função getGoogleChatCard.
  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };
  1. Adicione mapImageWidget à lista de widgets na variável infoSection, salve e implante.
  2. Teste o app de chat no espaço do Chat. Você vai receber uma resposta avançada com base no código que adicionou hoje.

9. Limpar

Se você planeja concluir outros codelabs do Dialogflow, pule esta seção por enquanto e volte a ela mais tarde.

Excluir o agente do Dialogflow

  1. Clique em dc4ac6f9c0ae94e9.png ao lado do agente.

520c1c6bb9f46ea6.png

  1. Na guia Geral, role até a parte de baixo e clique em Excluir este agente.
  2. Digite Excluir na caixa de diálogo e clique em Excluir.

10. Parabéns

Você criou um chatbot no Dialogflow e o integrou ao Google Agenda e agora ao Google Chat. Você é um profissional do Google Workspace!

Saiba mais

Para saber mais, confira os exemplos de código na página do Dialogflow no Github.