Présentation (Dialogflow)

Interactive Canvas est un framework basé sur l'Assistant Google qui permet aux développeurs d'ajouter des expériences visuelles et immersives aux actions de conversation. Cette expérience visuelle est une application Web interactive que l'Assistant envoie en réponse à l'utilisateur dans une conversation. Contrairement aux réponses enrichies traditionnelles intégrées à une conversation de l'Assistant, l'application Web Interactive Canvas s'affiche en plein écran.

Utilisez le canevas interactif si vous souhaitez effectuer l'une des actions suivantes dans votre action:

  • Créer des visuels en plein écran
  • Créer des animations et des transitions personnalisées
  • Effectuer une visualisation des données
  • Créer des mises en page personnalisées et des IUG
Figure 1. Jeu interactif basé sur le canevas interactif.

Appareils compatibles

Interactive Canvas est actuellement disponible sur les appareils suivants:

  • Écrans connectés
  • Google Nest Hub

  • Appareils mobiles Android

Fonctionnement

Une action qui utilise Interactive Canvas fonctionne de la même manière qu'une action de conversation standard. L'utilisateur a toujours une conversation avec l'Assistant pour atteindre son objectif. Toutefois, au lieu de renvoyer les réponses dans la conversation, une action de canevas interactive envoie une réponse à l'utilisateur qui ouvre une application Web plein écran. Il continue d'interagir avec l'application Web par commande vocale ou tactile jusqu'à la fin de la conversation.

Une action qui utilise Interactive Dessin comporte plusieurs composants:

  • Action conversationnelle:action qui utilise une interface de conversation pour répondre aux requêtes des utilisateurs. Les actions de canevas interactives utilisent des WebViews pour afficher des réponses au lieu de cartes enrichies ou de simples réponses textuelles et vocales. Les actions de conversation utilisent les composants suivants :
    • Agent Dialogflow : projet dans Dialogflow que vous personnalisez pour discuter avec vos utilisateurs d'actions.
    • Fulfillment : code déployé en tant que webhook qui implémente la logique de conversation pour votre agent Dialogflow et communique avec votre application Web.
  • Application Web:application Web d'interface avec des éléments visuels personnalisés que votre action envoie aux utilisateurs en réponse à une conversation. Vous créez l'application Web avec des normes Web telles que HTML, JavaScript et CSS.

L'action conversationnelle et l'application Web communiquent entre elles à l'aide des éléments suivants:

  • API Interactive Canvas:API JavaScript que vous incluez dans l'application Web afin de permettre la communication entre l'application Web et votre action conversationnelle.
  • HtmlResponse : réponse contenant l'URL de l'application Web et les données qu'elle doit transmettre. Vous pouvez utiliser une bibliothèque cliente Node.js ou Java pour renvoyer un HtmlResponse.

Pour illustrer le fonctionnement d'Interactive Canvas, imaginez une action hypothétique appelée Cool Colors (Couleurs froides), qui remplace la couleur de l'écran de l'appareil par une couleur spécifiée par l'utilisateur. Une fois que l'utilisateur a appelé l'action, le flux se présente comme suit:

  1. L'utilisateur dit Turn the screen blue à l'appareil doté de l'Assistant.
  2. La plate-forme Actions on Google achemine la requête de l'utilisateur vers Dialogflow pour la faire correspondre à un intent.
  3. Le traitement pour l'intent correspondant est exécuté et une HtmlResponse est envoyée à l'appareil. L'appareil utilise l'URL pour charger l'application Web si elle n'a pas encore été chargée.
  4. Lors du chargement de l'application Web, elle enregistre des rappels avec l'API interactiveCanvas. La valeur de l'objet data est ensuite transmise au rappel onUpdate enregistré de l'application Web. Dans notre exemple, le traitement envoie une HtmlResponse avec une data qui inclut une variable ayant la valeur blue.
  5. La logique personnalisée de votre application Web lit la valeur data de HtmlResponse et apporte les modifications définies. Dans notre exemple, l'écran devient bleu.
  6. interactiveCanvas envoie la mise à jour du rappel à l'appareil.

Étapes suivantes

Pour savoir comment créer une action de canevas interactive, consultez la page Présentation de la compilation.

Pour voir le code d'une action Interactive Canvas complète, consultez l'exemple.