Crie sua ação de conversa (Dialogflow)

Você define a conversa para a ação com o fulfillment, que é o código implantado como um webhook que contém a lógica de conversa do agente do Dialogflow. O fulfillment informa à sua Ação o que fazer quando os usuários fazem solicitações.

Para a tela interativa, o fulfillment também comunica informações sobre o app da Web ao Google Assistente. Você pode usar uma HtmlResponse para pedir ao Google Assistente para renderizar seu app da Web. Uma HtmlResponse também pode fornecer atualizações para data, que a lógica personalizada do seu app da Web usa para fazer mudanças nele.

Esta página explica como usar o HtmlResponse no fulfillment e as diretrizes gerais para usar esse tipo de resposta.

Respostas HTML

Para redirecionar informações sobre seu app da Web ao Google Assistente, é necessário incluir um HtmlResponse no fulfillment específico da intent. Uma HtmlResponse pode conter o URL do app da Web e os dados que o atualizam. Quando você envia um HtmlResponse, as seguintes etapas ocorrem:

  1. O fulfillment da intent correspondente envia uma HtmlResponse ao dispositivo.
  2. O dispositivo usa o URL na HtmlResponse para carregar o app da Web.
  3. O payload JSON data é transmitido ao app da Web em um callback.

  4. Sua ação de conversa envia um novo HtmlResponse para enviar atualizações ou carregar novos estados.

Exemplo de fulfillment

Este trecho do exemplo de código de fulfillment mostra como implementar HtmlResponse:

const functions = require('firebase-functions');
const {dialogflow, HtmlResponse} = require('actions-on-google');

const app = dialogflow({debug: true});
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});

// map of human speakable colors to color values
const tints = {
  red: 0xFF0000,
  green: 0x00FF00,
  blue: 0x0000FF,
};
app.intent('color', (conv, {color}) => {
  if (color in tints) {
    conv.ask(`Ok, I changed my color to ${color}. What else?`);
    conv.ask(new HtmlResponse({
      data: {
        tint: tints[color],
      },
    }));
    return;
  }
  conv.ask(`Sorry, I don't know that color. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      query: conv.query,
    },
  }));
});
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});

app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});

app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
  }));
});

exports.conversation = functions.https.onRequest(app);

welcome intent

No snippet acima, o fulfillment da intent welcome envia uma HtmlResponse com o URL do app da Web. O Google Assistente recebe isso e carrega o HTML e o JavaScript nesse endereço.

...
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});
...

Outras intents

O HtmlResponse no fulfillment de outras intents transmite valores de variáveis (tint ou spin no exemplo) para o app da Web. A lógica personalizada do app da Web usa esses valores para atualizar elementos (animações, cores etc.):

...
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});
...

Diretrizes e restrições

Considere as seguintes diretrizes e restrições para HtmlResponse ao criar o fulfillment:

  • Cada intent no fulfillment precisa incluir um HtmlResponse. Se uma intent não incluir uma HtmlResponse, o app da Web será fechado.
  • Você só precisa incluir o URL do seu app da Web na primeira intent enviada ao usuário (essa normalmente é a intent Welcome).
  • O HtmlResponse precisa ter 50 KB ou menos.