Intégrer Dialogflow à Google Chat

1. Avant de commencer

Dans cet atelier de programmation, vous allez découvrir comment Dialogflow se connecte aux API Google Workspace pour créer un planificateur de rendez-vous entièrement fonctionnel avec Google Agenda et des réponses dynamiques dans Google Chat.

Si vous n'avez pas encore configuré l'atelier de programmation précédent ou si vous êtes à l'aise avec Dialogflow et le fulfillment, vous pouvez télécharger le code de démarrage et la configuration de l'agent ici.

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

Prérequis

Avant de continuer, vous devez effectuer les ateliers de programmation suivants :

Vous devez également comprendre les concepts et les constructions de base de Dialogflow, que vous pouvez découvrir dans les vidéos suivantes du parcours Créer un chatbot avec Dialogflow.

Points abordés

Déployer et configurer une application Google Chat
Créer des cartes d'affichage dans Google Chat
Créer des charges utiles personnalisées dans le fulfillment Dialogflow

Ce que vous allez faire

Intégration entre Dialogflow, Google Chat et Agenda
(Facultatif) Intégrer Google Maps pour des cartes plus riches

Prérequis

Un navigateur Web et une adresse e-mail pour se connecter à la console Dialogflow
Agenda et Google Chat activés dans votre domaine Google Workspace

2. Activer et configurer Google Chat

Nous allons commencer par l'agent Dialogflow que vous avez créé dans les ateliers de programmation précédents.

Dans la console Dialogflow, cliquez sur .
Dans l'onglet Général, faites défiler la page jusqu'à ID du projet, puis cliquez sur Google Cloud.

Dans la console Google Cloud, cliquez sur Menu de navigation ☰ > API et services > Bibliothèque.
Recherchez "API Google Chat", puis cliquez sur Activer pour utiliser l'API dans votre projet Google Cloud.
Nous allons maintenant configurer votre application Chat. Accédez à la page Configuration de l'API. Veuillez noter que chaque projet GCP ne peut comporter qu'une seule application Chat.

Les champs Dialogflow devraient s'afficher dans les options de configuration.
Remplacez le champ "URL de l'avatar" par l'URL de cette image de voiture : **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
Pour activer votre application Chat pour les messages privés et les espaces, sélectionnez Vous pouvez envoyer un message directement à l'application et L'application fonctionne dans les espaces comprenant plusieurs utilisateurs.

Cliquez sur Enregistrer, puis quittez la console Cloud.

3. Intégrations Dialogflow supplémentaires

Google Chat est activé par défaut. Toutefois, si vous souhaitez qu'un bot serve plusieurs plates-formes, vous pouvez accéder à la page Integrations (Intégrations) de la console Dialogflow pour les activer.

4. Tester dans Google Chat

Maintenant que votre application Chat est configurée, ajoutons-la à un espace Chat et testons-la. Ouvrez Google Chat et créez un espace de test.

En haut à droite de l'espace, cliquez sur le menu déroulant, puis sélectionnez Ajouter des personnes et des applications.
Recherchez AppointmentScheduler et ajoutez l'application à l'espace.
Vous pouvez désormais interagir avec l'application que vous avez déjà créée dans Google en saisissant simplement @AppointmentScheduler dans l'espace.

Testez-le sur cette plate-forme avec la même entrée que dans les ateliers de programmation précédents :

Utilisateur : "@AppointmentScheduler Prends un rendez-vous pour l'immatriculation du véhicule à 14h demain."
Application de chat : "Ok, voyons si nous pouvons vous trouver un créneau. Le 24 avril à 14h me convient."

Nous allons ensuite utiliser les personnalisations dans Google Chat pour ajouter des réponses plus riches.

5. Fiches Google Chat personnalisées

Avec Google Chat, vous pouvez faire en sorte que votre application renvoie à l'utilisateur une réponse textuelle de base ou une réponse sous forme de fiche, qui vous permet de créer une interface plus riche à l'aide de différents widgets, y compris des images, des boutons, etc. Maintenant que vous avez associé votre agent Dialogflow à une application Google Chat, il vous suffit de renvoyer le code JSON au format approprié pour l'afficher dans Google dans votre code de traitement. Examinons quelques exemples JSON.

La réponse textuelle de base se présente comme suit :

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

Voici un exemple de réponse sous forme de fiche avec des widgets :

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

Pour en savoir plus sur les cartes, consultez la documentation sur le format des messages. Dans la section suivante, nous allons ajouter des cartes à notre application Chat.

6. Charge utile personnalisée et cartes de chat

Les charges utiles personnalisées dans Dialogflow permettent d'envoyer des messages de réponses enrichies spécifiques à une plate-forme. C'est ici que nous ajouterons nos cartes JSON Hangouts Chat, qui seront renvoyées à l'utilisateur par l'agent.

Commençons par ajouter une fiche de base pour l'intention d'accueil. Dans la console Dialogflow, accédez à l'intent d'accueil par défaut et faites défiler la page jusqu'à la section des réponses.

Cliquez sur Google Chat, décochez Utiliser les réponses de l'onglet "PAR DÉFAUT" en tant que premières réponses, puis cliquez sur AJOUTER DES RÉPONSES > Charge utile personnalisée.

Un squelette JSON s'affiche.

Copiez et collez le code ci-dessous. Nous avons configuré une fiche avec 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."
           }
         }
       ]
     }
   ]
 }
}

Cliquez sur Enregistrer, puis accédez à votre espace de test Chat pour voir si la fiche s'affiche. Dans l'espace Chat, saisissez "@AppointmentScheduler bonjour".

Nous allons ensuite ajouter une charge utile personnalisée dans le code d'exécution pour pouvoir générer dynamiquement le contenu avec notre code.

7. Ajouter une carte dans Fulfillment

Nous allons maintenant créer une fiche avec plusieurs widgets pour afficher un rendez-vous planifié. Ajoutons une fonction appelée getGoogleChatCard où nous allons afficher les entrées : appointmentType, date et time.

Ajoutez la fonction ci-dessous à votre code dans index.js en bas.

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],
     },
   };
 }

Cette fiche contient un widget de paire clé/valeur et de bouton. Les widgets sont ensuite ordonnés dans un section et le card contient une liste de sections à afficher.

Appelons maintenant cette fonction lorsqu'un événement d'agenda est créé. Dans votre fonction createCalendarEvent, remplacez le contenu par le code ci-dessous et déployez la fonction.

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

Lorsque l'agent répond dans Google Chat, il sait qu'il doit renvoyer la fiche construite ci-dessus. Testez-la en envoyant une demande de planification.

8. (Facultatif) Ajouter un widget d'image Google Maps

Si vous souhaitez rendre votre fiche de réponse plus visuelle, vous pouvez ajouter une carte statique du lieu du rendez-vous générée par l'API Maps Static. L'API vous permet de créer une image Maps à l'aide de paramètres d'URL. Nous pouvons ensuite utiliser l'image dans un widget d'image de notre fiche.

Activez l'API Maps Static dans la console Google Cloud, de la même manière que vous avez activé les API Calendar et Google Chat.
Créez et enregistrez une clé API pour votre projet sur la page API et services de la console. Pour en savoir plus sur la récupération et les bonnes pratiques concernant les clés API avec Maps, cliquez ici.
Copiez la clé API et les constantes suivantes en haut de votre fichier 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';

Ajoutez ensuite un widget d'image dans votre fonction getGoogleChatCard.

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

Ajoutez mapImageWidget à la liste des widgets de votre variable infoSection, puis enregistrez et déployez.
Testez votre application Chat dans votre espace Chat. Vous devriez obtenir une réponse enrichie basée sur le code que vous avez ajouté aujourd'hui.

9. Effectuer un nettoyage

Si vous prévoyez de suivre d'autres ateliers de programmation Dialogflow, ignorez cette section pour le moment et revenez-y plus tard.

Supprimer l'agent Dialogflow

Cliquez sur à côté de votre agent existant.

Dans l'onglet Général, faites défiler la page jusqu'en bas, puis cliquez sur Supprimer cet agent.
Saisissez Supprimer dans la boîte de dialogue, puis cliquez sur Supprimer.

10. Félicitations

Vous avez créé un chatbot dans Dialogflow et l'avez intégré à Agenda, puis à Google Chat. Vous êtes un pro de Google Workspace !

En savoir plus

Pour en savoir plus, consultez les exemples de code sur la page Dialogflow GitHub.