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

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

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

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

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

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

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

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

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

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

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

Что вы построите

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

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

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

Внимание : Для выполнения этого практического задания необходимо использовать учетную запись Google Workspace. Использование учетной записи @gmail.com приведет к ошибке при попытке включить API.

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

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

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

3. В консоли Google Cloud перейдите в меню навигации ☰ > API и сервисы > Библиотека .
4. Найдите "Google Chat API", затем нажмите " Включить" , чтобы использовать API в своем проекте Google Cloud.
5. Теперь перейдем к настройке вашего приложения чата. Для этого перейдите на страницу конфигурации API. Обратите внимание, что в каждом проекте GCP может быть не более одного приложения чата.

6. Вы должны увидеть, как поля Dialogflow заполняются параметрами конфигурации.
7. Измените поле «URL аватара» на это изображение автомобиля: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. Чтобы включить возможность отправки личных сообщений и использования приложения для чата в пространствах, выберите пункты «Приложение позволяет отправлять сообщения напрямую» и «Приложение работает в пространствах с несколькими пользователями» .

Нажмите «Сохранить» и выйдите из облачной консоли.

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

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

4. Протестируйте в Google Чате.

Теперь, когда ваше приложение для чата настроено, давайте добавим его в пространство чата и протестируем. Откройте 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!"
}

Пример ответа в виде карточки с виджетами выглядит следующим образом:

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

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

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

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

Начнём с добавления простой карточки для приветственного намерения. В консоли Dialogflow перейдите к «По умолчанию — приветственное намерение» и прокрутите вниз до раздела «Ответы».

Нажмите на Google Chat и снимите флажок «Использовать ответы по умолчанию» в вкладке «По умолчанию» в качестве первых ответов , затем ДОБАВИТЬ ОТВЕТЫ > Пользовательская полезная нагрузка .

Вы увидите JSON-шаблон.

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

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

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

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

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.

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

1. Включите статический API карт в консоли Google Cloud, так же, как вы включили API календаря и Google Chat.
2. Создайте и сохраните ключ API для своего проекта на странице «API и сервисы» в консоли. Дополнительную информацию о получении ключей API и рекомендациях по их использованию в Maps см. здесь .
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';

4. Далее добавьте виджет изображения в функцию getGoogleChatCard.

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

5. Добавьте mapImageWidget в список виджетов в переменной infoSection , сохраните и разверните.
6. Протестируйте свое приложение для чата в своем рабочем пространстве, и вы должны получить развернутый ответ на основе кода, который вы добавили сегодня!

9. Уборка

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

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

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

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

10. Поздравляем!

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

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

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