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 effectué la configuration des précédents ateliers de programmation, 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 suivre les ateliers de programmation suivants:

  1. Créer un programmeur de rendez-vous avec Dialogflow
  2. Intégrer Dialogflow à Actions on Google
  3. Comprendre les entités dans Dialogflow
  4. Comprendre le fulfillment en intégrant Dialogflow à Agenda

Vous devez également comprendre les concepts et les constructions de base de Dialogflow, que vous pouvez glaner 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 fiches display 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 obtenir des cartes enrichies

5b4ca104638f9e8d.png

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 avec l'agent Dialogflow que vous avez créé dans les précédents ateliers de programmation.

  1. Dans la console Dialogflow, cliquez sur d7d792687e597dd5.png.
  2. Dans l'onglet General (Général), faites défiler la page jusqu'à Project ID (ID du projet), puis cliquez sur Google Cloudf2bffd4fcdb84fa9.png.

34be16fcd4c5aeff.png

  1. Dans la console Google Cloud, cliquez sur le menu de navigation ▾ > API et Services > Bibliothèque :
  2. Recherchez "API Google Chat" Cliquez ensuite sur Activer pour utiliser l'API dans votre projet Google Cloud.
  3. Nous allons maintenant configurer votre application Chat. Accédez à la page Configuration de l'API. Veuillez noter que chaque projet GCP ne peut avoir qu'une seule application Chat.
  1. Vous devriez voir les champs Dialogflow qui renseignent les options de configuration.
  2. Remplacez le champ "URL de l'avatar" par cette image de voiture: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. Pour activer les messages privés et les espaces dans votre application Chat, sélectionnez L'application peut recevoir des messages directement et L'application fonctionne dans les espaces avec plusieurs utilisateurs.

Cliquez sur Enregistrer et quittez Cloud Console.

3. Intégrations Dialogflow supplémentaires

Google Chat est activé par défaut, mais si vous souhaitez qu'un bot exécute plusieurs plates-formes, vous pouvez accéder à la page Intégrations dans 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 testez-la. Ouvrez Google Chat et créez un espace test.

  1. En haut à droite de l'espace, cliquez sur la liste déroulante et sélectionnez Ajouter des personnes et applications.
  2. Recherchez AppointmentScheduler et ajoutez l'application à l'espace.
  3. Vous pouvez désormais interagir avec l'application que vous avez déjà intégrée à Google en saisissant simplement @AppointmentScheduler dans l'espace.

Testez-le sur cette plate-forme avec les mêmes données que celles des précédents ateliers de programmation:

  1. Utilisateur : "@AppointmentScheduler Fixez un rendez-vous pour l'immatriculation du véhicule demain à 14h."
  2. Application de chat : "OK, voyons si on peut vous intégrer. Le 24 avril à 14h, c'est parfait !"

Nous allons maintenant utiliser les personnalisations de Google Chat pour enrichir les réponses.

5. Fiches Google Chat personnalisées

Avec Google Chat, vous pouvez demander à votre application de renvoyer à l'utilisateur une réponse textuelle de base ou une réponse sous forme de carte, qui vous permet d'enrichir l'interface créée par différents widgets, y compris des images, des boutons, etc. Maintenant que nous avons connecté votre agent Dialogflow à une application Google Chat, il vous suffit de renvoyer le fichier JSON au format approprié pour l'afficher dans Google dans votre code de fulfillment. Examinons quelques exemples JSON.

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

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

7e1cd3efb4fe9d1f.png

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://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

72ac1b2903ed60b6.png

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

6. Charges utiles personnalisées et fiches de chat

Dans Dialogflow, les charges utiles personnalisées permettent d'envoyer des messages de réponses enrichies spécifiques à une plate-forme. C'est ici que nous ajouterons nos fiches JSON Hangouts Chat, dans lesquelles l'agent les renverra à l'utilisateur.

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

9624208f0d266afd.png

Cliquez sur Google Chat et désélectionnez Utiliser les réponses de l'onglet PAR DÉFAUT comme premières réponses, puis AJOUTER DES RÉPONSES > Charge utile personnalisée

Un squelette JSON s'affiche.

bb064f7ec1237fd3.png

Copiez et collez le code suivant 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 Chat de test pour voir cette fiche s'afficher. Dans l'espace Chat, saisissez "@AppointmentScheduler hello".

91af6321f3a26e19.png

Nous allons ensuite ajouter une charge utile personnalisée au code de fulfillment afin de 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, dans laquelle nous afficherons 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 une paire clé-valeur et un widget de bouton. Les widgets sont ensuite classés dans un section et 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.

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 carte créée ci-dessus. Testez-le avec une requête 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 de rendez-vous généré par l'API Maps Static. L'API vous permet de créer une image Maps en utilisant des paramètres d'URL. Nous pouvons ensuite utiliser l'image dans un widget d'image de notre fiche.

5b4ca104638f9e8d.png

  1. Activez l'API Maps Static dans la console Google Cloud de la même manière que vous avez activé les API Agenda et Google Chat.
  2. Créez et enregistrez une clé API pour votre projet dans la section API et Services de la console. Pour en savoir plus sur la récupération et sur les bonnes pratiques concernant les clés API avec Maps, cliquez ici. c0238236d3c709c5.png
  3. Copiez la clé API et les constantes suivantes en haut de votre fichier dans 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. Ajoutez ensuite un widget d'image dans votre fonction getGoogleChatCard.
  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };
  1. Ajoutez mapImageWidget à la liste des widgets de votre variable infoSection, puis enregistrez et déployez.
  2. 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 reprenez-y plus tard.

Supprimer l'agent Dialogflow

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

520c1c6bb9f46ea6.png

  1. Dans l'onglet General (Général), faites défiler la page jusqu'en bas, puis cliquez sur Delete This Agent (Supprimer cet agent).
  2. Saisissez Delete (Supprimer) dans la boîte de dialogue, puis cliquez sur Delete (Supprimer).

10. Félicitations

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

En savoir plus

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