Créer une action de conversation (Dialogflow)

Pour définir la conversation de votre action, utilisez le fulfillment, qui consiste en du code déployé en tant que webhook contenant la logique de conversation de votre agent Dialogflow. Le traitement indique à votre action ce qu'elle doit faire lorsque les utilisateurs effectuent des requêtes.

Pour Interactive Canvas, votre traitement communique également des informations sur votre application Web à l'Assistant. Vous pouvez utiliser un élément HtmlResponse pour demander à l'Assistant d'afficher votre application Web. Un élément HtmlResponse peut également fournir des mises à jour à data, que la logique personnalisée de votre application Web utilise pour apporter des modifications à cette application.

Cette page explique comment utiliser HtmlResponse dans votre traitement et présente les consignes générales d'utilisation de ce type de réponse.

Réponses HTML

Pour transmettre des informations sur votre application Web à l'Assistant, vous devez inclure un HtmlResponse dans le traitement spécifique à l'intent. Un élément HtmlResponse peut contenir l'URL de l'application Web et les données qui la mettent à jour. Lorsque vous envoyez une HtmlResponse, voici ce qui se produit:

  1. Le traitement de l'intent correspondant envoie un HtmlResponse à l'appareil.
  2. L'appareil utilise l'URL de HtmlResponse pour charger l'application Web.
  3. La charge utile JSON data est transmise à l'application Web dans un rappel.

  4. Votre action de conversation envoie un nouveau HtmlResponse pour envoyer des mises à jour ou charger de nouveaux états.

Exemple de traitement

L'extrait suivant de l'exemple de code de traitement montre comment implémenter 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

Dans l'extrait ci-dessus, le traitement de l'intent welcome envoie un HtmlResponse avec l'URL de l'application Web. L'Assistant reçoit cette information, et charge le code HTML et JavaScript à cette adresse.

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

Autres intents

Le HtmlResponse du traitement pour d'autres intents transmet des valeurs de variable (tint ou spin dans l'exemple) à l'application Web. La logique personnalisée pour l'application Web utilise ces valeurs pour mettre à jour les éléments (animations, couleur, etc.):

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

Consignes et restrictions

Lorsque vous créez votre traitement, tenez compte des consignes et restrictions suivantes pour HtmlResponse:

  • Chaque intent de votre traitement doit inclure un HtmlResponse. Si un intent n'inclut pas de HtmlResponse, votre application Web se ferme.
  • Il vous suffit d'inclure l'URL de votre application Web dans le premier intent que vous envoyez à l'utilisateur (il s'agit généralement de l'intent Welcome).
  • La taille de HtmlResponse ne doit pas dépasser 50 Ko.