Canvas interactif

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 conversationnelles. 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 qui sont intégrées à une conversation avec l'Assistant, l'application Web Interactive Canvas s'affiche en plein écran.

Utilisez Interactive Canvas pour effectuer les actions suivantes:

• Créer des visuels en plein écran
• Créer des animations et des transitions personnalisées
• Visualiser les données
• Créer des mises en page et des IUG personnalisées

Appareils compatibles

Interactive Canvas est actuellement disponible sur les appareils suivants:

• Écrans connectés
• Appareils mobiles Android

Comment ça marche ?

Une action qui utilise Interactive Canvas comprend deux composants principaux:

• Action conversationnelle : action qui utilise une interface de conversation pour répondre aux requêtes des utilisateurs. Vous pouvez utiliser Actions Builder ou le SDK Actions pour créer votre conversation.
• Application Web:application Web d'interface avec des éléments visuels personnalisés que votre action envoie en réponse aux utilisateurs au cours d'une conversation. Vous créez l'application Web à l'aide de technologies Web telles que HTML, JavaScript et CSS.

Les utilisateurs qui interagissent avec une action Interactive Canvas échangent avec l'Assistant Google pour atteindre leur objectif. Toutefois, pour Interactive Canvas, la majeure partie de cette conversation se produit dans le cadre de votre application Web. Lorsque vous connectez votre action conversationnelle à votre application Web, vous devez inclure l'API Interactive Canvas dans le code de votre application Web.

• Bibliothèque de canevas interactive : bibliothèque JavaScript que vous incluez dans l'application Web pour permettre la communication entre l'application Web et votre action conversationnelle à l'aide d'une API. Pour en savoir plus, consultez la documentation de l'API Interactive Canvas.

En plus d'inclure la bibliothèque Interactive Canvas, vous devez renvoyer le type de réponse Canvas dans votre conversation pour ouvrir votre application Web sur l'appareil de l'utilisateur. Vous pouvez également utiliser une réponse Canvas pour mettre à jour votre application Web en fonction de l'entrée utilisateur.

• Canvas:réponse contenant une URL de l'application Web et des données à lui transmettre. Actions Builder peut renseigner automatiquement la réponse Canvas avec l'intent correspondant et les données de la scène actuelle pour mettre à jour l'application Web. Vous pouvez également envoyer une réponse Canvas à partir d'un webhook à l'aide de la bibliothèque de fulfillment Node.js. Pour en savoir plus, consultez la section Invites Canvas.

Pour illustrer le fonctionnement d'Interactive Canvas, imaginez une action hypothétique appelée Cool Colors, qui change la couleur de l'écran de l'appareil en une couleur spécifiée par l'utilisateur. Une fois que l'utilisateur a appelé l'action, le flux suivant se produit:

1. L'utilisateur dit "Mets l'écran en bleu" sur l'appareil doté de l'Assistant.
2. La plate-forme Actions on Google achemine la requête de l'utilisateur vers votre logique de conversation pour la faire correspondre à un intent.
3. La plate-forme fait correspondre l'intent à la scène de l'action, ce qui déclenche un événement et envoie une réponse Canvas à l'appareil. L'appareil charge une application Web à l'aide d'une URL fournie dans la réponse (si elle n'a pas encore été chargée).
4. Lors du chargement de l'application Web, elle enregistre les rappels avec l'API Interactive Canvas. Si la réponse de Canvas contient un champ data, la valeur de l'objet du champ data est transmise au rappel onUpdate enregistré de l'application Web. Dans cet exemple, la logique de conversation envoie une réponse Canvas avec un champ de données incluant une variable ayant la valeur blue.
5. Lorsque vous recevez la valeur data de la réponse Canvas, le rappel onUpdate peut exécuter une logique personnalisée pour votre application Web et effectuer les modifications définies. Dans cet exemple, le rappel onUpdate lit la couleur de data et affiche l'écran en bleu.

Traitement côté client et côté serveur

Lorsque vous créez une action Interactive Canvas, vous avez le choix entre deux modes de mise en œuvre de traitement : "fulfillment du serveur" ou "traitement client". Avec le fulfillment du serveur, vous utilisez principalement des API qui nécessitent un webhook. Avec le fulfillment client, vous pouvez utiliser des API côté client et, si nécessaire, des API qui nécessitent un webhook pour les fonctionnalités autres que Canvas (telles que l'association de comptes).

Si vous choisissez d'utiliser le fulfillment de webhook de serveur lors de la création du projet, vous devez déployer un webhook pour gérer la logique de conversation et le code JavaScript côté client afin de mettre à jour l'application Web et de gérer la communication entre les deux.

Si vous choisissez d'utiliser le fulfillment client (actuellement disponible dans l'aperçu pour les développeurs), vous pouvez utiliser de nouvelles API côté client pour créer votre logique d'action exclusivement dans l'application Web. Cela simplifie l'expérience de développement, réduit la latence entre les tours de conversation et vous permet d'utiliser des fonctionnalités sur l'appareil. Si nécessaire, vous pouvez également basculer vers la logique côté serveur à partir du client.

Pour en savoir plus sur les fonctionnalités côté client, consultez la section Compiler avec le fulfillment côté client.

Étapes suivantes

Pour savoir comment créer une application Web pour Interactive Canvas, consultez Applications Web.

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