Integracja Dialogflow z Google Chat

1. Zanim zaczniesz

Z tego ćwiczenia z programowania dowiesz się, jak Dialogflow łączy się z interfejsami Google Workspace API, aby utworzyć w pełni funkcjonalny harmonogram spotkań w Kalendarzu Google z dynamicznymi odpowiedziami w Google Chat.

Jeśli nie masz jeszcze konfiguracji z poprzednich Codelabs lub nie czujesz się pewnie w zakresie Dialogflow i realizacji, możesz pobrać kod startowy i konfigurację agenta.

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

Wymagania wstępne

Zanim przejdziesz dalej, musisz ukończyć te ćwiczenia:

1. Tworzenie harmonogramu spotkań za pomocą Dialogflow
2. Integrowanie Dialogflow z Actions on Google
3. Informacje o encjach w Dialogflow
4. Realizacja zamówień dzięki integracji Dialogflow z Kalendarzem

Musisz też poznać podstawowe pojęcia i konstrukcje Dialogflow. Możesz to zrobić, oglądając te filmy z ścieżki szkoleniowej Tworzenie chatbota za pomocą Dialogflow.

Czego się nauczysz

• Jak wdrożyć i skonfigurować aplikację Google Chat
• Jak tworzyć karty wyświetlania w Google Chat
• Jak tworzyć niestandardowe ładunki w ramach realizacji w Dialogflow

Co utworzysz

• Integracja Dialogflow z Google Chat i Kalendarzem
• (Opcjonalnie) Integracja z Mapami Google w celu uzyskania bardziej rozbudowanych kart

Czego potrzebujesz

• przeglądarka internetowa i adres e-mail do logowania się w konsoli Dialogflow;
• Kalendarz i Google Chat włączone w domenie Google Workspace.

Ostrzeżenie: aby ukończyć ten kurs, musisz użyć konta Google Workspace. Użycie konta @gmail.com spowoduje błąd podczas próby włączenia interfejsu API.

2. Włączanie i konfigurowanie Google Chat

Zaczniemy od agenta Dialogflow utworzonego w poprzednich ćwiczeniach.

1. W konsoli Dialogflow kliknij .
2. Na karcie Ogólne przewiń do opcji Identyfikator projektu i kliknij Google Cloud.

3. W konsoli Google Cloud kliknij Menu nawigacyjne ☰ > Interfejsy API i usługi > Biblioteka.
4. Wyszukaj „Google Chat API”, a następnie kliknij Włącz, aby używać interfejsu API w projekcie Google Cloud.
5. Teraz skonfigurujemy aplikację do obsługi czatu. Otwórz stronę Konfiguracja interfejsu API. Pamiętaj, że każdy projekt GCP może mieć maksymalnie 1 aplikację Google Chat.

6. Pola Dialogflow powinny wypełniać opcje konfiguracji.
7. Zmień pole URL awatara na ten obraz samochodu: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. Aby włączyć aplikację Google Chat zarówno na czacie, jak i w pokojach, wybierz Do aplikacji można wysłać wiadomość bezpośrednio i Aplikacja działa w pokojach z wieloma użytkownikami.

Kliknij Zapisz i zamknij Cloud Console.

3. Dodatkowe integracje Dialogflow

Google Chat jest domyślnie włączony, ale jeśli chcesz, aby bot obsługiwał wiele platform, możesz włączyć je na stronie Integracje w konsoli Dialogflow.

4. Testowanie w Google Chat

Aplikacja do obsługi czatu jest już skonfigurowana. Dodajmy ją do pokoju czatu i przetestujmy. Otwórz Google Chat i utwórz testowy pokój.

1. W prawym górnym rogu pokoju kliknij menu i wybierz Dodaj osoby i aplikacje.
2. Wyszukaj AppointmentScheduler i dodaj aplikację do pokoju.
3. Możesz teraz korzystać z aplikacji, którą masz już w Google, wpisując w odpowiednim miejscu @HarmonogramSpotkań.

Przetestuj ją na tej platformie, używając tych samych danych wejściowych co w przypadku poprzednich ćwiczeń:

1. Użytkownik: „@AppointmentScheduler Umów mnie na spotkanie w sprawie rejestracji pojazdu na jutro na 14:00”.
2. Aplikacja do obsługi czatu: „OK, zobaczę, czy możemy Cię przyjąć. 24 kwietnia o 14:00 będzie w porządku”.

Następnie użyjemy dostosowań w Google Chat, aby dodać bardziej rozbudowane odpowiedzi.

5. Niestandardowe karty Google Chat

W Google Chat możesz skonfigurować aplikację do obsługi czatu tak, aby zwracała użytkownikowi podstawową odpowiedź tekstową lub odpowiedź w formie karty, która umożliwia korzystanie z bogatszego interfejsu zbudowanego z różnych widżetów, w tym obrazów, przycisków itp. Po połączeniu agenta Dialogflow z aplikacją do obsługi czatu Google Chat wystarczy, że w kodzie realizacji zwrócisz JSON w odpowiednim formacie, aby wyświetlić go w Google. Przyjrzyjmy się kilku przykładom JSON.

Podstawowa odpowiedź tekstowa wygląda tak:

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

Przykładowa odpowiedź karty z widgetami wygląda tak:

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

Więcej informacji o kartach znajdziesz w dokumentacji formatu wiadomości. W następnej sekcji dodamy karty do aplikacji do obsługi czatu.

6. Niestandardowe ładunki i karty czatu

Niestandardowe ładunki w Dialogflow umożliwiają wysyłanie bogatych wiadomości z odpowiedzią na konkretnej platformie. W tym miejscu dodamy karty JSON Hangouts Chat, które będą zwracane użytkownikowi przez agenta.

Zacznijmy od dodania podstawowej karty dla intencji powitalnej. W konsoli Dialogflow otwórz domyślny zamiar powitania i przewiń w dół do sekcji odpowiedzi.

Kliknij Google Chat i odznacz Use responses from the DEFAULT tab as the first responses (Używaj odpowiedzi z karty DOMYŚLNE jako pierwszych odpowiedzi), a potem kliknij ADD RESPONSES > Custom Payload (DODAJ ODPOWIEDZI > Niestandardowy ładunek).

Zobaczysz szkielet JSON.

Skopiuj i wklej poniższy kod. Skonfigurowaliśmy kartę z widżetem TextParagraph.

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

Kliknij Zapisz, a potem przejdź do testowego pokoju czatu, aby sprawdzić, czy karta jest renderowana. W pokoju czatu wpisz „@AppointmentScheduler hello”.

Następnie dodamy do kodu realizacji niestandardowy ładunek, aby móc dynamicznie generować treść za pomocą naszego kodu.

7. Dodawanie karty w Fulfillment

Teraz utworzymy kartę z kilkoma widżetami, aby wyświetlić zaplanowane spotkanie. Dodajmy funkcję o nazwie getGoogleChatCard, w której będziemy renderować dane wejściowe: appointmentType, date i time.

Dodaj poniższą funkcję do kodu w index.js na dole.

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

Ta karta zawiera parę klucz-wartość i widżet przycisku. Widżety są następnie uporządkowane w section, a card zawiera listę sekcji do wyrenderowania.

Teraz wywołajmy tę funkcję, gdy zostanie utworzone wydarzenie w kalendarzu. W funkcji createCalendarEvent zastąp zawartość kodem poniżej i wdróż funkcję.

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

Gdy agent odpowiada w Google Chat, wie, że ma zwrócić kartę utworzoną powyżej. Wypróbuj tę funkcję, wysyłając prośbę o zaplanowanie spotkania.

8. (Opcjonalnie) Dodaj widżet obrazu z Map Google

Jeśli chcesz, aby karta odpowiedzi była bardziej atrakcyjna wizualnie, możesz dodać statyczną mapę miejsca spotkania wygenerowaną przez interfejs Maps Static API. Interfejs API umożliwia tworzenie obrazu z Map Google za pomocą parametrów adresu URL. Możemy wtedy użyć tego obrazu w widżecie obrazu na karcie.

1. Włącz interfejs Maps Static API w konsoli Google Cloud w taki sam sposób, jak interfejsy Calendar API i Google Chat API.
2. Utwórz i zapisz klucz interfejsu API dla projektu na stronie Interfejsy API i usługi w konsoli. Więcej informacji o pobieraniu kluczy interfejsu API i sprawdzonych metodach dotyczących kluczy interfejsu API w Mapach znajdziesz tutaj.
3. Skopiuj klucz interfejsu API i te stałe na początek pliku 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. Następnie dodaj widżet obrazu do funkcji getGoogleChatCard.

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

5. Dodaj mapImageWidget do listy widżetów w zmiennej infoSection, zapisz i wdroż.
6. Przetestuj aplikację do obsługi czatu w pokoju czatu. Powinna ona wyświetlać odpowiedź z elementami rozszerzonymi na podstawie dodanego dziś kodu.

9. Czyszczenie danych

Jeśli planujesz ukończyć inne ćwiczenia z Dialogflow, na razie pomiń tę sekcję i wróć do niej później.

Usuwanie agenta Dialogflow

1. Kliknij  obok istniejącego agenta.

2. Na karcie Ogólne przewiń do dołu i kliknij Usuń tego agenta.
3. Wpisz w oknie Usuń i kliknij Usuń.

10. Gratulacje

Masz już utworzonego czatbota w Dialogflow i zintegrowanego z Kalendarzem, a teraz także z Google Chat. Jesteś profesjonalistą w Google Workspace!

Więcej informacji

Więcej informacji znajdziesz w przykładowych kodach na stronie Dialogflow na GitHubie.