Crie sua ação de conversa (Dialogflow)

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

Na tela interativa, o atendimento de pedidos também transmite informações sobre o app da Web ao Assistente. Você pode usar HtmlResponse para dizer ao Google Assistente para para renderizar seu app da Web. Um HtmlResponse também pode fornecer atualizações para data, que que a lógica personalizada do seu app da Web usa para fazer alterações nele.

Nesta página, explicamos como usar HtmlResponse no processamento de pedidos e diretrizes para usar esse tipo de resposta.

Respostas HTML

Para transmitir informações sobre seu app da Web para o Google Assistente, você precisa incluir um HtmlResponse no fulfillment específico da intent. Um HtmlResponse pode conter o URL. do app da Web e os dados que o atualizam. Quando você enviar uma HtmlResponse, ocorrem as seguintes etapas:

  1. O fulfillment da intent correspondente envia um HtmlResponse ao dispositivo.
  2. O dispositivo usa o URL no 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 carregam novos estados.

Amostra de fulfillment

O trecho a seguir do exemplo o 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 pelo 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 na amostra) ao app da Web. A lógica personalizada para a Web usa esses valores para atualizar os 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

Lembre-se das seguintes diretrizes e restrições da HtmlResponse ao criar o fulfillment:

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