Compila tus acciones conversacionales (Dialogflow)

Defines la conversación para tu acción con entrega, que es código implementado como un webhook que contiene el nombre de tu agente lógica de conversación. La entrega le indica a tu acción qué hacer cuando los usuarios solicitudes.

En el caso de Interactive Canvas, tu entrega también comunica información sobre tu app web al Asistente. Puedes usar un HtmlResponse para indicarle a Asistente que haga lo siguiente: renderizar tu aplicación web. Un HtmlResponse también puede proporcionar actualizaciones a data, que que usa la lógica personalizada de tu app web para realizar cambios en ella.

En esta página, se explica cómo usar HtmlResponse en tus entregas y tu lineamientos para usar este tipo de respuesta.

Nota: Para garantizar que el dispositivo del usuario pueda admitir un HtmlResponse, asegúrate de que el elemento capacidad actions.capability.INTERACTIVE_CANVAS está disponible. De lo contrario, utiliza un respuesta enriquecida en su lugar.

Respuestas HTML

Para transmitir información sobre tu app web al Asistente, debes incluir una HtmlResponse en la entrega específica de un intent. Un elemento HtmlResponse puede contener la URL de la aplicación web y los datos que la actualizan. Cuando envías HtmlResponse, se producen los siguientes pasos:

1. La entrega del intent coincidente envía un HtmlResponse al dispositivo.
2. El dispositivo usa la URL de HtmlResponse para cargar la app web.
3. La carga útil de JSON data se pasa a la app web en una devolución de llamada.

4. Tu acción de conversación envía un nuevo HtmlResponse para enviar actualizaciones o cargar estados nuevos.

   Nota: Si el valor del campo url cambia en la entrega posterior. respuestas, la aplicación web se vuelve a cargar. Si se proporciona el mismo valor para url o si url se excluye como parte de una respuesta posterior, la app web existente se en el dispositivo.

Entrega de muestra

El siguiente extracto de la muestra: En el código de entrega, se muestra cómo 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

En el fragmento anterior, la entrega del intent welcome envía un HtmlResponse por la URL de la app web El Asistente recibe esto y carga el código HTML y JavaScript en esa dirección.

...
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',
  }));
});
...

Otros intents

El HtmlResponse de la entrega para otros intents pasa valores de variables. (tint o spin en la muestra) a la app web. La lógica personalizada para la Web La app usa estos valores para actualizar elementos (animaciones, color, etc.):

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

Lineamientos y restricciones

Ten en cuenta los siguientes lineamientos y restricciones para HtmlResponse Cuando compiles tu entrega:

• Cada intent en tu entrega debe incluir un HtmlResponse. Si un intent no incluye un HtmlResponse, se cerrará tu app web.
• Solo debes incluir la URL de tu app web en el primer intent que envíes a el usuario (por lo general, este es el intent Welcome)
• HtmlResponse debe tener un tamaño de 50 KB o menos.