Compila tus acciones conversacionales (Dialogflow)

Define la conversación para tu acción con entrega, que es el código implementado como un webhook que contiene la lógica conversacional de tu agente de Dialogflow. La entrega le indica a tu acción qué hacer cuando los usuarios realizan 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 al Asistente que renderice tu app web. Un HtmlResponse también puede proporcionar actualizaciones de data, que la lógica personalizada de tu app web usa para realizar cambios en ella.

En esta página, se explica cómo usar HtmlResponse en tu entrega y se explican los lineamientos generales para usar este tipo de respuesta.

Nota: Para garantizar que el dispositivo del usuario sea compatible con HtmlResponse, asegúrate de que el actions.capability.INTERACTIVE_CANVAS de la capacidad esté disponible. De lo contrario, usa una respuesta enriquecida.

Respuestas HTML

Para retransmitir información sobre tu app web al Asistente, debes incluir un HtmlResponse en la entrega específica del intent. Una HtmlResponse puede contener la URL de la aplicación web y los datos que la actualizan. Cuando envías una 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 HtmlResponse nuevo para enviar actualizaciones o cargar estados nuevos.

   Nota: Si el valor del campo url cambia en las respuestas de entrega posteriores, se volverá a cargar la app web. Si se proporciona el mismo valor para url o si se excluye url como parte de una respuesta posterior, la app web existente se conserva en el dispositivo.

Entrega de muestra

En el siguiente extracto del código de entrega de muestra, 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);

Intent welcome

En el fragmento anterior, la entrega para el intent welcome envía un HtmlResponse con la URL de la app web. El Asistente recibe este mensaje 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 variables (tint o spin en la muestra) a la app web. La lógica personalizada para la app web 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 de tu entrega debe incluir un HtmlResponse. Si un intent no incluye un HtmlResponse, se cierra la app web.
• Solo debes incluir la URL de la aplicación web en el primer intent que envías al usuario (normalmente es el intent Welcome).
• HtmlResponse debe tener un tamaño de 50 KB o menos.