1. Introdução
Agora que você criou um chatbot do Dialogflow para um guia de TV no codelab anterior, vamos mostrar como estender esse recurso para o Google Chat. Você vai aprender a criar cards dinâmicos e interativos para essa plataforma e ter várias integrações.
O que você criará
Vamos criar um chatbot do Dialogflow que pode responder no seu domínio do Google Workspace com respostas personalizáveis.
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 é 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
- O Chat está 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" e clique em Ativar para usar a API no projeto na nuvem do Google.
- Agora vamos configurar seu app de chat Google Chat. Acesse a página Configuração da API. Cada projeto do GCP pode ter no máximo um app do Google Chat.
- Os campos do Dialogflow vão preencher as opções de configuração.
- Mude o campo "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) - Ativar seu app de chat do Google Chat para mensagens diretas e espaços
Clique em Salvar e saia do console do Cloud.
Além disso, as integrações do 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. Teste no Google Chat
Agora que o app de chat do Google Chat está configurado, vamos adicioná-lo a um espaço de conversa e testá-lo. Abra o Google Chat e crie um espaço de chat 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 de chat do Google que já criou no Google Chat digitando @tvguide no espaço. Digite @tvguide hello para testar.
Em seguida, vamos usar as personalizações no Google Chat para adicionar respostas mais completas.
4. 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 o agente do Dialogflow a um app do Google Chat, basta retornar o JSON no formato correto para exibir no Google Chat no código de atendimento. Vamos analisar alguns exemplos de JSON.
A resposta de texto básica tem esta aparência:
{
"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?"
}
Exemplo de resposta em card com widgets:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. 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.
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.
Copie e cole o 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 Salvar e acesse seu espaço de teste para ver o card renderizado. No espaço do chat, digite "@tvguide hello".
Em seguida, vamos adicionar uma carga útil personalizada ao código de atendimento para gerar o conteúdo dinamicamente com nosso código.
Para saber mais sobre cards, consulte a documentação sobre formato de mensagem. Na próxima seção, vamos adicionar cards.
6. Adicionar um card no atendimento
Agora vamos criar um card com widgets para mostrar as listagens de TV. Vamos adicionar uma função chamada getGoogleCard, em que vamos renderizar as informações da listagem resultante. Vamos usar widgets keyValue e button 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 possa receber a resposta e enviar ao usuário. Na função channelHandler, substitua o conteúdo 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);
}
}
Observe o código na parte de baixo, onde a resposta é adicionada. Se a origem da solicitação do agente for identificada como essa plataforma, vamos criar o payload JSON com a tag "hangouts". Isso é importante para transmitir corretamente o payload no fulfillment.
Agora volte ao espaço de chat e teste. Digite @tvguide What is on MTV?. Você vai receber uma resposta semelhante.
7. Parabéns
Você criou seu primeiro bot do Google Chat com o Dialogflow.
Qual é a próxima etapa?
Gostou deste codelab? Confira estes laboratórios incríveis!