Integrazione di Dialogflow con Google Chat

1. Prima di iniziare

In questo codelab imparerai come Dialogflow si connette alle API Google Workspace per creare un pianificatore di appuntamenti completamente funzionante con Google Calendar con risposte dinamiche in Google Chat.

Se non hai ancora la configurazione delle codelab precedenti o non hai familiarità con Dialogflow e l'evasione, puoi scaricare il codice iniziale e la configurazione dell'agente da qui

https://github.com/googleworkspace/appointment-scheduler-codelab

Prerequisiti

Prima di procedere, devi completare i seguenti codelab:

  1. Crea un pianificatore di appuntamenti con Dialogflow
  2. Integrare Dialogflow con Actions on Google
  3. Informazioni sulle entità in Dialogflow
  4. Comprendere l'evasione integrando Dialogflow con Calendar

Devi anche comprendere i concetti e le strutture di base di Dialogflow, che puoi apprendere dai seguenti video disponibili nel percorso Crea un chatbot con Dialogflow.

Obiettivi didattici

  • Come eseguire il deployment e configurare un'app Google Chat
  • Come creare schede di visualizzazione in Google Chat
  • Come creare payload personalizzati nell'evasione di Dialogflow

Cosa creerai

  • Integrazione tra Dialogflow, Google Chat e Calendar
  • (Facoltativo) Integra Google Maps per schede più ricche

5b4ca104638f9e8d.png

Che cosa ti serve

  • Un browser web e un indirizzo email per accedere alla console Dialogflow
  • Calendar e Google Chat attivati nel tuo dominio Google Workspace

2. Attivare e configurare Google Chat

Inizieremo con l'agente Dialogflow che hai creato nei codelab precedenti.

  1. Nella console di Dialogflow, fai clic su d7d792687e597dd5.png.
  2. Nella scheda Generali, scorri fino a ID progetto, quindi fai clic su Google Cloud f2bffd4fcdb84fa9.png.

34be16fcd4c5aeff.png

  1. Nella console Google Cloud, fai clic sul menu di navigazione ☰ > API e servizi > Libreria.
  2. Cerca "API Google Chat", quindi fai clic su Abilita per utilizzare l'API nel tuo progetto Google Cloud.
  3. Ora configureremo la tua app di chat. Vai alla pagina Configurazione dell'API. Tieni presente che ogni progetto GCP può avere al massimo un'app di chat.
  1. Dovresti vedere i campi di Dialogflow che compilano le opzioni di configurazione.
  2. Modifica il campo URL avatar con questa immagine dell'auto: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. Per attivare l'app di Chat sia per i messaggi diretti che per gli spazi, seleziona È possibile inviare messaggi direttamente all'app e L'app funziona in spazi con più utenti.

Fai clic su Salva ed esci da Cloud Console.

3. Integrazioni di Dialogflow aggiuntive

Google Chat è abilitato per impostazione predefinita, ma se vuoi che un bot funzioni su più piattaforme, puoi andare alla pagina Integrazioni nella console Dialogflow per abilitarle.

4. Test in Google Chat

Ora che l'app di Chat è configurata, aggiungiamola a uno spazio di Chat e testiamola. Apri Google Chat e crea uno spazio di test.

  1. Nell'angolo in alto a destra dello spazio, fai clic sul menu a discesa e seleziona Aggiungi persone e app.
  2. Cerca AppointmentScheduler e aggiungi l'app allo spazio.
  3. Ora puoi interagire con l'app che hai già integrato in Google semplicemente digitando @AppointmentScheduler nello spazio.

Testalo su questa piattaforma con lo stesso input dei codelab precedenti:

  1. Utente: "@AppointmentScheduler Set an appointment for vehicle registration at 2 PM tomorrow." (Imposta un appuntamento per l'immatricolazione del veicolo per domani alle 14:00.)
  2. App di chat: "Ok, vediamo se possiamo trovarti un posto. Il 24 aprile alle 14:00 va benissimo."

Successivamente, utilizzeremo le personalizzazioni in Google Chat per aggiungere risposte più ricche.

5. Schede Google Chat personalizzate

Con Google Chat, puoi fare in modo che la tua app restituisca all'utente una risposta di testo di base o una risposta a scheda, che ti consente di avere un'interfaccia più ricca creata da diversi widget, tra cui immagini, pulsanti e così via. Ora che hai collegato il tuo agente Dialogflow a un'app Google Chat, devi semplicemente restituire il JSON nel formato corretto da visualizzare in Google nel codice di fulfillment. Vediamo alcuni esempi di JSON.

La risposta di testo di base è simile alla seguente:

 {
  "text": "Your pizza delivery is here!"
}

7e1cd3efb4fe9d1f.png

Una risposta di esempio della scheda con i widget è simile alla seguente:

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

72ac1b2903ed60b6.png

Per saperne di più sulle schede, consulta la documentazione sul formato dei messaggi. Nella sezione successiva aggiungeremo le schede alla nostra app di chat.

6. Payload personalizzati e schede di chat

I payload personalizzati in Dialogflow consentono messaggi di risposta avanzata specifici per la piattaforma. Qui aggiungeremo le schede JSON di Hangouts Chat che verranno restituite all'utente dall'agente.

Iniziamo aggiungendo una scheda di base per l'intent di benvenuto. Nella console Dialogflow, vai all'intent di benvenuto predefinito e scorri verso il basso fino alla sezione delle risposte.

9624208f0d266afd.png

Fai clic su Google Chat e deseleziona Usa le risposte della scheda PREDEFINITA come prime risposte, poi AGGIUNGI RISPOSTE > Payload personalizzato.

Verrà visualizzato uno scheletro JSON.

bb064f7ec1237fd3.png

Copia e incolla il seguente codice. Abbiamo configurato una scheda con un widget TextParagraph.

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

Fai clic su Salva, quindi vai allo spazio di Chat di test per vedere il rendering di questa scheda. Nello spazio di Chat, digita "@AppointmentScheduler hello".

91af6321f3a26e19.png

Successivamente, aggiungeremo un payload personalizzato nel codice di fulfillment in modo da poter generare dinamicamente i contenuti con il nostro codice.

7. Aggiunta di una carta in Fulfillment

Ora creeremo una scheda con diversi widget per mostrare un appuntamento programmato. Aggiungiamo una funzione chiamata getGoogleChatCard in cui eseguiremo il rendering degli input: appointmentType, date e time.

Aggiungi la funzione riportata di seguito al tuo codice in index.js in basso.

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

Questa scheda contiene una coppia chiave-valore e un widget pulsante. I widget vengono quindi ordinati in un section e il card contiene un elenco di sezioni da visualizzare.

Ora chiamiamo questa funzione quando viene creato un evento nel calendario. Nella funzione createCalendarEvent, sostituisci i contenuti con il codice riportato di seguito ed esegui il deployment della funzione.

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

Quando l'agente risponde in Google Chat, sa di dover restituire la scheda creata in precedenza. Prova con una richiesta di pianificazione.

8. (Facoltativo) Aggiungere un widget immagine di Google Maps

Se vuoi rendere più visiva la scheda di risposta, puoi aggiungere una mappa statica del luogo dell'appuntamento generata dall'API Maps Static. L'API ti consente di creare un'immagine di Maps tramite i parametri URL. Possiamo quindi utilizzare l'immagine in un widget immagine nella nostra scheda.

5b4ca104638f9e8d.png

  1. Abilita l'API Maps Static in Google Cloud Console, nello stesso modo in cui hai abilitato le API Calendar e Google Chat.
  2. Crea e salva una chiave API per il tuo progetto nella pagina API e servizi della console. Per ulteriori informazioni sul recupero e sulle best practice relative alle chiavi API con Maps, consulta questa pagina. c0238236d3c709c5.png
  3. Copia la chiave API e le seguenti costanti nella parte superiore del file in index.js
const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';
  1. Poi aggiungi un widget immagine nella funzione getGoogleChatCard.
  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };
  1. Aggiungi mapImageWidget all'elenco dei widget nella variabile infoSection, salva e implementa.
  2. Prova la tua app di Chat nel tuo spazio di Chat e dovresti visualizzare una risposta avanzata basata sul codice che hai aggiunto oggi.

9. Esegui la pulizia

Se prevedi di completare altri codelab di Dialogflow, salta questa sezione per ora e torna a completarla in un secondo momento.

Elimina l'agente Dialogflow

  1. Fai clic su dc4ac6f9c0ae94e9.png accanto all'agente esistente.

520c1c6bb9f46ea6.png

  1. Nella scheda Generali, scorri fino in fondo e fai clic su Elimina questo agente.
  2. Digita Elimina nella finestra di dialogo e fai clic su Elimina.

10. Complimenti

Hai creato un chatbot in Dialogflow e lo hai integrato con Calendar e ora con Google Chat. Sei un professionista di Google Workspace.

Scopri di più

Per saperne di più, consulta gli esempi di codice nella pagina GitHub di Dialogflow.