1. Introdução
Agora que você criou um bot de bate-papo do Dialogflow para um guia de TV no codelab anterior, vamos mostrar como estendê-lo para o Google Chat. Você aprenderá a criar cards dinâmicos e interativos para essa plataforma e a ter várias integrações.
O que você criará
Vamos criar um chatbot do Dialogflow capaz de responder no seu domínio do Google Workspace com respostas personalizáveis.
O que você vai aprender
- Como implantar e configurar um app do Google Chat
- Como criar cards de exibição no Google Chat
- Como criar payloads personalizados no fulfillment do Dialogflow
O que é necessário
- Conclua o primeiro codelab desta série de duas partes.
- Um navegador da Web e um endereço de e-mail para fazer login no console do Dialogflow
- Chat ativado 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.
- No Console do Dialogflow, clique em
. - Na guia Geral, role até ID do projeto e clique em Google Cloud
.
- No console do Google Cloud, clique em Menu de navegação ☰ > APIs e Serviços > Biblioteca.
- Pesquise "API Google Chat" Depois clique em Ativar para usar a API no projeto do Google Cloud.
- Para configurar o app Google Chat, acesse a página Configuração da API. Cada projeto do GCP pode ter no máximo um app do Google Chat.
- Você verá os campos do Dialogflow preenchendo as opções de configuração.
- Mude o campo de URL do avatar para esta imagem de TV:
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - Ative o app Google Chat nas mensagens diretas e nos espaços
Clique em Salvar e saia do Console do Cloud.
Além das integrações com o Dialogflow. O Google Chat é ativado por padrão, mas se você quiser atender a várias plataformas, acesse a página Integrações no Console do Dialogflow para ativá-las.
3. Testar no Google Chat
Agora que o app do Google Chat está configurado, adicione-o a um espaço do Chat e faça um teste. Abra o Google Chat e crie um espaço de teste. No canto superior direito do espaço, clique no menu suspenso e selecione Adicionar pessoas e apps.
Pesquise tvguide e adicione o app Google Chat ao espaço.
Agora você pode interagir com o app Google Chat que já foi integrado ao Google Chat. Basta digitar @tvguide no espaço. Digite @tvguide hello para testar.
Em seguida, vamos usar as personalizações do Google Chat para adicionar respostas mais completas.
4. Cards personalizados do Google Chat
Com o Google Chat, seu app pode retornar ao usuário uma resposta de texto básica ou uma resposta em cartão, o 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 exibição no Google Chat em seu código de fulfillment. Vamos conferir alguns exemplos de JSON.
A resposta de texto básica é semelhante a esta:
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
Um exemplo de resposta em card com widgets é semelhante a este:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Payloads e cards de chat personalizados
Os payloads personalizados do Dialogflow permitem mensagens de resposta avançada específicas da plataforma. É aqui que adicionaremos os cards JSON do Chat onde eles serão exibidos para o usuário pelo agente.
Para começar, vamos adicionar um card básico para a intent de boas-vindas. No console do Dialogflow, navegue até a intent de boas-vindas padrão e role para baixo até a seção de respostas.
Clique em Google Chat e desmarque Use answers from the DEFAULT tab as the first answers (Usar respostas da guia PADRÃO como as primeiras respostas) e depois ADICIONAR RESPOSTAS > Payload personalizado.
Você vai encontrar um esqueleto de JSON.
Copie e cole o seguinte código abaixo. Configuramos um card com um widget TextParagraph.
{
"hangouts": {
"header": {
"title": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
Clique em Save e vamos acessar o espaço de teste do chat para conferir a renderização do card. No espaço do Chat, digite "@tvguide hello".
Em seguida, adicionaremos um payload personalizado no código de fulfillment para que possamos gerar dinamicamente o conteúdo com nosso código.
Para saber mais sobre os cards, consulte a documentação sobre o formato de mensagens. Na próxima seção, vamos adicionar cards.
6. Como adicionar um cartão ao fulfillment
Agora, criaremos um card com widgets para mostrar listagens de TV. Adicione uma função chamada getGoogleCard para renderizar as informações da ficha da empresa resultantes. Vamos usar os widgets KeyValue e de botão para construir a resposta do card.
Adicione a função abaixo ao código em index.js na parte de baixo.
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
Agora precisamos chamar esse método para que o agente receba a resposta e envie de volta ao usuário. Na função channelHandler, substitua o conteúdo da função pelo código abaixo.
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
Anote o código na parte de baixo onde a resposta é adicionada. Se a origem da solicitação do agente for identificada como esta, vamos construir o payload JSON com a tag "hangouts". Isso é importante para retornar corretamente o payload no fulfillment.
Volte ao espaço do Chat e faça o teste. Digite @tvguide What is on MTV?. Você verá uma resposta semelhante.
7. Parabéns
Você criou seu primeiro bot do Google Chat com o Dialogflow!
Qual é a próxima etapa?
Gostou do codelab? Confira esses laboratórios incríveis!