Интеграция Dialogflow с Google Chat

1. Прежде чем начать

В этой лаборатории кода вы узнаете, как Dialogflow соединяется с API Google Workspace для создания полнофункционального планировщика встреч с Календарем Google с динамическими ответами в Google Chat.

Если у вас еще нет настроек из предыдущих лабораторий кода или вы уверены в Dialogflow и его выполнении, вы можете скачать стартовый код и конфигурацию агента отсюда.

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

Предварительные условия

Прежде чем продолжить, вам необходимо выполнить следующие лабораторные работы:

  1. Создайте планировщик встреч с помощью Dialogflow
  2. Интегрируйте Dialogflow с Actions on Google
  3. Понимание сущностей в Dialogflow
  4. Понимайте выполнение заказов, интегрируя Dialogflow с Календарем.

Вам также необходимо понять основные концепции и конструкции Dialogflow, которые вы можете почерпнуть из следующих видеороликов, найденных в разделе «Создание чат-бота с помощью Dialogflow» .

Что вы узнаете

  • Как развернуть и настроить приложение Google Chat
  • Как создавать карточки в Google Chat
  • Как создавать собственные полезные нагрузки в выполнении Dialogflow

Что ты построишь

  • Интеграция между Dialogflow, Google Chat и Calendar
  • (Необязательно) Интегрируйте Карты Google для более подробных карточек.

5b4ca104638f9e8d.png

Что вам понадобится

  • Веб-браузер и адрес электронной почты для входа в консоль Dialogflow.
  • Календарь и Google Chat включены в вашем домене Google Workspace.

2. Включите и настройте Google Chat

Мы начнем с агента Dialogflow, который вы создали на предыдущих уроках кода.

  1. В консоли Dialogflow нажмите d7d792687e597dd5.png .
  2. На вкладке «Общие» прокрутите до «Идентификатор проекта» и нажмите «Google Cloud». f2bffd4fcdb84fa9.png .

34be16fcd4c5aeff.png

  1. В Google Cloud Console нажмите меню навигации ☰ > API и сервисы > Библиотека .
  2. Найдите «API Google Chat», затем нажмите « Включить» , чтобы использовать API в своем проекте Google Cloud.
  3. Теперь мы настроим ваше приложение чата. Перейдите на страницу конфигурации API. Обратите внимание, что в каждом проекте GCP может быть не более одного приложения Chat.
  1. Вы должны увидеть поля Dialogflow, заполняющие параметры конфигурации.
  2. Измените поле URL-адреса аватара на это изображение автомобиля: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. Чтобы разрешить вашему приложению чата использовать как прямые сообщения, так и группы, выберите «Приложение можно отправлять сообщения напрямую» и «Приложение работает в группах с несколькими пользователями» .

Нажмите «Сохранить» и выйдите из Cloud Console.

3. Дополнительные интеграции диалогового потока

Чат Google включен по умолчанию, но если вы хотите, чтобы бот обслуживал несколько платформ, вы можете перейти на страницу «Интеграции» в консоли Dialogflow, чтобы включить их.

4. Тестируйте в Google Chat

Теперь, когда ваше приложение чата настроено, давайте добавим его в пространство чата и протестируем. Откройте Google Chat и создайте тестовое пространство.

  1. В правом верхнем углу пространства щелкните раскрывающийся список и выберите «Добавить людей и приложения» .
  2. Найдите AppointmentScheduler и добавьте приложение в пространство.
  3. Теперь вы можете взаимодействовать с приложением, которое вы уже создали в Google, просто набрав в поле @AppointmentScheduler .

Проверьте это на этой платформе, используя те же данные, что и в предыдущих лабораториях кода:

  1. Пользователь: «@AppointmentScheduler Назначьте встречу для регистрации автомобиля завтра в 14:00».
  2. Приложение чата: «Хорошо, посмотрим, сможем ли мы вас принять. 24 апреля, 14:00 — это нормально!»

Далее мы воспользуемся настройками Google Chat, чтобы добавить более подробные ответы.

5. Пользовательские карточки чата Google

С помощью Google Chat вы можете заставить свое приложение возвращать пользователю базовый текстовый ответ или карточный ответ, что позволяет вам использовать более богатый интерфейс, созданный с помощью различных виджетов, включая изображения, кнопки и т. д. Теперь, когда мы подключили ваш агент Dialogflow к приложению Google Chat , вам просто нужно вернуть JSON в правильном формате для отображения в Google в вашем коде выполнения. Давайте посмотрим на некоторые примеры JSON.

Базовый текстовый ответ выглядит так:

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

7e1cd3efb4fe9d1f.png

Пример ответа карточки с виджетами выглядит так:

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

72ac1b2903ed60b6.png

Дополнительную информацию о картах см. в документации по формату сообщений . В следующем разделе мы добавим карточки в наше приложение чата.

6. Пользовательские полезные данные и карточки чата

Пользовательские полезные данные в Dialogflow позволяют отправлять расширенные ответные сообщения для конкретной платформы. Здесь мы добавим наши JSON-карточки Hangout Chat, где агент будет возвращать их пользователю.

Начнем с добавления базовой карточки для приветственного намерения. В консоли Dialogflow перейдите к приветственному намерению по умолчанию и прокрутите вниз до раздела ответов.

9624208f0d266afd.png

Нажмите «Чат Google» и снимите флажок «Использовать ответы на вкладке ПО УМОЛЧАНИЮ в качестве первых ответов» , затем ДОБАВИТЬ ОТВЕТЫ > Пользовательские полезные данные .

Вы увидите скелет JSON.

bb064f7ec1237fd3.png

Скопируйте и вставьте следующий код ниже. Мы настроили карточку с виджетом TextParagraph .

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

Нажмите « Сохранить» , затем перейдем в тестовый чат и увидим, как эта карточка отображается. В области чата введите «@AppointmentScheduler привет».

91af6321f3a26e19.png

Далее мы добавим пользовательскую полезную нагрузку в код выполнения, чтобы мы могли динамически генерировать контент с помощью нашего кода.

7. Добавление карты в Выполнение

Теперь мы создадим карточку с несколькими виджетами для отображения запланированной встречи. Давайте добавим функцию getGoogleChatCard , в которой мы будем отображать входные данные: appointmentType , date и time .

Добавьте функцию ниже в свой код в index.js внизу.

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

Эта карточка содержит пару ключевых значений и виджет кнопки. Затем виджеты упорядочиваются по section , и card содержит список разделов для отображения.

Теперь давайте вызовем эту функцию при создании события календаря. В функции createCalendarEvent замените содержимое приведенным ниже кодом и разверните функцию.

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

Когда агент отвечает в Google Chat, он будет знать, что нужно вернуть карточку, созданную выше. Проверьте это с помощью запроса на планирование.

8. (Необязательно) Добавьте виджет изображения Google Maps.

Если вы хотите сделать свою карточку ответа более наглядной, вы можете добавить статическую карту места встречи, созданную Maps Static API . API позволяет создавать изображения Карт по параметрам URL. Затем мы можем использовать изображение в виджете изображения на нашей карточке.

5b4ca104638f9e8d.png

  1. Включите Maps Static API в Google Cloud Console так же, как вы включили API календаря и Google Chat.
  2. Создайте и сохраните ключ API для своего проекта на странице API и сервисы в консоли. Дополнительную информацию о поиске и передовых методах использования ключей API с помощью Карт можно найти здесь . c0238236d3c709c5.png
  3. Скопируйте ключ API и следующие константы в начало вашего файла в 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. Затем добавьте виджет изображения в функцию getGoogleChatCard . 
  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };
  1. Добавьте MapImageWidget в список виджетов в вашей переменной infoSection , сохраните и разверните.
  2. Протестируйте свое приложение Chat в своем пространстве Chat, и вы получите развернутый ответ на основе кода, который вы добавили сегодня!

9. Очистка

Если вы планируете выполнить другие лабораторные работы по коду Dialogflow, пропустите этот раздел и вернитесь к нему позже.

Удалить агент Dialogflow

  1. Нажмите dc4ac6f9c0ae94e9.png рядом с вашим существующим агентом.

520c1c6bb9f46ea6.png

  1. На вкладке «Общие» прокрутите страницу вниз и нажмите «Удалить этого агента» .
  2. Введите «Удалить» в диалоговом окне и нажмите «Удалить» .

10. Поздравления

Вы создали чат-бота в Dialogflow и интегрировали его с Календарем, а теперь и с Google Chat. Вы являетесь Google Workspace Pro!

Узнать больше

Чтобы узнать больше, ознакомьтесь с примерами кода на странице Dialogflow Github .