Panoramica (Dialogflow)

Canvas interattivo è un framework basato sull'Assistente Google che consente agli sviluppatori di aggiungere esperienze visive e immersive alle azioni di conversazione. Questa esperienza visiva è un'app web interattiva che l'assistente invia come risposta all'utente nella conversazione. A differenza delle tradizionali risposte avanzate in linea con una conversazione con l'assistente, l'app web Canvas interattiva viene visualizzata come visualizzazione web a schermo intero.

Utilizza Interactive Canvas se vuoi eseguire una delle seguenti operazioni nella tua azione:

  • Creare immagini a schermo intero
  • Crea animazioni e transizioni personalizzate
  • Esegui la visualizzazione dei dati
  • Creare layout e GUI personalizzati
Figura 1. Un gioco interattivo creato utilizzando Canvas interattivo.

Dispositivi supportati

Al momento Interactive Canvas è disponibile sui seguenti dispositivi:

  • Smart display
  • Google Nest Hub

  • Dispositivi mobili Android

Come funziona

Un'azione che utilizza Canvas interattivo funziona in modo simile a una normale azione di conversazione. L'utente ha ancora una conversazione con l'assistente per completare l'obiettivo; tuttavia, invece di restituire le risposte in linea nella conversazione, un'azione Canvas interattiva invia una risposta all'utente che apre un'app web a schermo intero. L'utente continua a interagire con l'app web tramite comandi vocali o tocco fino al termine della conversazione.

Esistono diversi componenti di un'azione che utilizza Canvas interattivo:

  • Azione di conversazione: un'azione che utilizza un'interfaccia conversazionale per soddisfare le richieste degli utenti. Le Azioni interattive su tela utilizzano le visualizzazioni web per eseguire il rendering delle risposte anziché schede interattive o semplici risposte testuali e vocali. Le azioni di conversazione utilizzano i seguenti componenti:
    • Agente Dialogflow: un progetto in Dialogflow che personalizzi per conversare con gli utenti dell'azione.
    • Fulfillment: il codice implementato come webhook che implementa la logica di conversazione per l'agente Dialogflow e comunica con la tua app web.
  • App web: un'app web front-end con immagini personalizzate che l'azione invia come risposta agli utenti durante una conversazione. Crei l'app web con standard web come HTML, JavaScript e CSS.

L'azione colloquiale e l'app web comunicano tra loro tramite:

  • API Interactive Canvas: un'API JavaScript che includi nell'app web per consentire la comunicazione tra l'app web e l'azione di conversazione.
  • HtmlResponse: una risposta che contiene un URL dell'app web e i dati per trasmetterla. Puoi utilizzare le librerie client Node.js o Java per restituire un elemento HtmlResponse.

Per illustrare il funzionamento di Canvas interattivo, immagina un'azione ipotetica denominata Colori fantastici che modifica il colore dello schermo del dispositivo in un colore specificato dall'utente. Dopo che l'utente richiama l'azione, il flusso ha il seguente aspetto:

  1. L'utente dice Turn the screen blue al dispositivo con l'assistente.
  2. La piattaforma Actions on Google indirizza la richiesta dell'utente a Dialogflow per corrispondere a un intent.
  3. L'evasione dell'intent corrispondente viene eseguita e viene inviato un HtmlResponse al dispositivo. Il dispositivo utilizza l'URL per caricare l'app web se non è ancora stata caricata.
  4. Quando viene caricata l'app web, registra i callback con l'API interactiveCanvas. Il valore dell'oggetto data viene quindi trasmesso nel callback onUpdate registrato dell'app web. Nel nostro esempio, il fulfillment invia un HtmlResponse con un data che include una variabile con il valore di blue.
  5. La logica personalizzata per l'app web legge il valore data di HtmlResponse e apporta le modifiche definite. Nel nostro esempio, lo schermo diventa blu.
  6. interactiveCanvas invia l'aggiornamento di callback al dispositivo.

Passaggi successivi

Per informazioni su come creare un'azione Canvas interattiva, consulta la pagina Panoramica della build.

Per visualizzare il codice di un'azione Canvas interattiva completa, guarda l'esempio.