Dialogflow'u Google Chat ile entegre etme

1. Başlamadan önce

Bu codelab'de, Dialogflow'un Google Workspace API'leriyle bağlantı kurarak Google Chat'teki dinamik yanıtlarla Google Takvim ile tam işlevli bir Randevu Planlayıcı'yı nasıl oluşturduğunu öğreneceksiniz.

Önceki codelab'lerdeki ayarları hâlâ yapmadıysanız ya da Dialogflow ve istek karşılama konusunda kendinize güveniyorsanız başlangıç kodunu ve aracı yapılandırmasını buradan indirebilirsiniz

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

Ön koşullar

Devam etmeden önce aşağıdaki codelab'leri tamamlamanız gerekir:

  1. Dialogflow ile Randevu Planlayıcı Oluşturma
  2. Dialogflow'u Actions on Google ile entegre etme
  3. Dialogflow'daki varlıkları anlama
  4. Dialogflow'u Takvim'e entegre ederek istek karşılamayı anlama

Ayrıca, Dialogflow'un temel kavramlarını ve yapılarını da anlamanız gerekir. Bu temel kavramları ve yapıları Dialogflow ile chatbot derleme yolunda bulunan aşağıdaki videolardan öğrenebilirsiniz.

Neler öğreneceksiniz?

  • Bir Google Chat uygulamasını dağıtma ve yapılandırma
  • Google Chat'te görüntülü reklam kartları oluşturma
  • Dialogflow karşılamada özel yük derleme

Neler oluşturacaksınız?

  • Dialogflow, Google Chat ve Takvim arasında entegrasyon
  • (İsteğe bağlı) Daha zengin kartlar için Google Haritalar'ı entegre edin

5b4ca104638f9e8d.png

Gerekenler

  • Dialogflow konsoluna giriş yapmak için bir web tarayıcısı ve e-posta adresi
  • Takvim ve Google Chat'in Google Workspace alanınızda etkin olması

2. Google Chat'i Etkinleştirme ve Yapılandırma

Önceki codelab'lerde oluşturduğunuz Dialogflow Aracısıyla başlayacağız.

  1. Dialogflow konsolunda d7d792687e597dd5.png simgesini tıklayın.
  2. Genel sekmesinde Proje Kimliği'ne gidin ve ardından Google Cloud'u f2bffd4fcdb84fa9.png tıklayın.

34be16fcd4c5aeff.png

  1. Google Cloud Console'da gezinme menüsü ® simgesini tıklayın > API'ler ve Hizmetler > Kitaplık.
  2. "Google Chat API" araması yapın ve ardından API'yi Google Cloud projenizde kullanmak için Etkinleştir'i tıklayın.
  3. Şimdi Chat uygulamanızı yapılandıracağız. API'nin Yapılandırma sayfasına gidin. Her GCP projesinde en fazla bir Chat uygulaması olabileceğini lütfen unutmayın.
  1. Yapılandırma seçeneklerinin doldurulduğu Dialogflow alanları gösterilir.
  2. Avatar URL'si alanını şu araba resmiyle değiştirin: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. Chat uygulamanızı hem doğrudan mesajlar hem de alanlarda etkinleştirmek için Uygulama doğrudan mesaj gönderilebilir'i ve Uygulama, birden fazla kullanıcının bulunduğu alanlarda çalışır'ı seçin.

Kaydet'i tıklayın ve Cloud Console'dan çıkın.

3. Ek Dialogflow Entegrasyonları

Google Chat varsayılan olarak etkindir. Ancak bir bot'un birden fazla platform sunmasını isterseniz bunları etkinleştirmek için Dialogflow Console'daki Entegrasyonlar sayfasına gidebilirsiniz.

4. Google Chat'te test et

Chat uygulamanız yapılandırıldığına göre şimdi bir Chat alanına ekleyip test edelim. Google Chat'i açın ve bir test alanı oluşturun.

  1. Alanın sağ üst köşesindeki açılır menüyü tıklayın ve Kişi ekle ve uygulamalar.
  2. AppointmentScheduler için arama yapın ve uygulamayı alana ekleyin.
  3. Artık, Google'da yerleşik olarak bulunan uygulamayla @AppointmentScheduler yazarak etkileşimde bulunabilirsiniz.

Önceki codelab'lerdeki girişlerle bu platformda test edin:

  1. Kullanıcı: "@AppointmentScheduler Yarın saat 14:00'te araç kaydı için randevu ayarla."
  2. Chat uygulaması: "Peki, sizi uydurabilecek miyiz lütfen. 24 Nisan, saat 14:00'te tamam!"

Ardından, daha zengin yanıtlar eklemek için Google Chat'teki özelleştirmeleri kullanacağız.

5. Özel Google Sohbet Kartları

Google Chat ile uygulamanızın kullanıcıya temel bir Metin Yanıtı veya Kart Yanıtı döndürmesini sağlayabilirsiniz. Bu da size resimler, düğmeler vb. dahil olmak üzere farklı widget'lar tarafından oluşturulmuş daha zengin bir arayüze olanak tanır. Dialogflow Agent'ınızı bir Google Chat uygulamasına bağladığımıza göre, sizin tek yapmanız gereken JSON'u, sipariş karşılama kodunuzda Google'da görüntülenecek doğru biçimde döndürmenizdir. Bazı JSON örneklerine bakalım.

Temel metin yanıtı aşağıdaki gibi görünür:

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

7e1cd3efb4fe9d1f.png

Widget'lar içeren örnek bir kart yanıtı aşağıdaki gibi görünür:

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

72ac1b2903ed60b6.png

Kartlar hakkında daha fazla bilgi edinmek için lütfen Mesaj Biçimi dokümanlarına bakın. Sonraki bölümde Chat uygulamamıza kartlar ekleyeceğiz.

6. Özel Yükler ve Sohbet Kartları

Dialogflow'daki özel yük , platforma özel zengin yanıt mesajlarına olanak tanır. Temsilci tarafından kullanıcıya geri sunulacak olan Hangouts Chat JSON kartlarımızı buraya ekleyeceğiz.

Karşılama amacı için temel bir kart ekleyerek başlayalım. Dialogflow Console'da Varsayılan Karşılama Niyeti'ne ve sayfayı kaydırarak yanıtlar bölümüne gidin.

9624208f0d266afd.png

Google Chat'i tıklayın ve VARSAYILAN sekmesindeki yanıtları ilk yanıt olarak kullan'ın seçimini kaldırın, ardından YANIT EKLE > Özel Yük.

Bir JSON iskeleti göreceksiniz.

bb064f7ec1237fd3.png

Aşağıdaki kodu kopyalayıp aşağıya yapıştırın. TextParagraph widget'ı içeren bir kart oluşturduk.

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

Kaydet'e basın. Ardından bu kartın oluşturulduğunu görmek için test amaçlı Chat alanınıza gidelim. Chat alanında "@AppointmentScheduler hello" yazın.

91af6321f3a26e19.png

Ardından, içeriği kodumuzla dinamik olarak oluşturabilmemiz için sipariş karşılama koduna özel bir yük ekleyeceğiz.

7. Sipariş karşılama'ya kart ekleme

Şimdi planlanmış bir randevuyu göstermek için çeşitli widget'lar içeren bir kart oluşturacağız. Şimdi, girişleri oluşturacağımız getGoogleChatCard adlı bir işlev ekleyelim: appointmentType, date ve time.

Aşağıdaki işlevi, en alttaki index.js bölgesindeki kodunuza ekleyin.

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

Bu kart, bir anahtar/değer çifti ve düğme widget'ı içerir. Daha sonra widget'lar bir section içinde sıralanır ve card, oluşturulacak bölümlerin listesini içerir.

Şimdi bir takvim etkinliği oluşturulduğunda bu işlevi çağıralım. createCalendarEvent fonksiyonunuzda, içeriği aşağıdaki kodla değiştirin ve işlevi dağıtın.

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'te yanıt veren temsilci, yukarıda oluşturulan kartı iade edeceğini bilir. Planlama isteğiyle test edin.

8. (İsteğe bağlı) Google Haritalar resim widget'ı ekleyin

Yanıt kartınızı daha görsel hale getirmek isterseniz randevu yerinin Haritalar Statik API tarafından oluşturulan statik bir haritasını ekleyebilirsiniz. API, URL parametrelerine göre Haritalar resmi oluşturmanıza olanak tanır. Ardından bu resmi, kartımızdaki bir resim widget'ında kullanabiliriz.

5b4ca104638f9e8d.png

  1. Takvim ve Google Chat API'lerini etkinleştirdiğiniz şekilde Google Cloud Console'da Haritalar Statik API'yi etkinleştirin.
  2. Projeniz için API'lerde ve Hizmetler sayfasını kontrol edin. Haritalar ile API anahtarlarını alma ve en iyi uygulamalar hakkında daha fazla bilgi için lütfen burayı inceleyin. c0238236d3c709c5.png
  3. API anahtarını ve aşağıdaki sabit değerleri index.js dosyasındaki dosyanızın en üstüne kopyalayın.
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. Ardından getGoogleChatCard işlevinize bir resim widget'ı ekleyin
  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };
  1. infoSection değişkeninizdeki widget'lar listesine mapImageWidget ekleyin, kaydedin ve dağıtın.
  2. Chat uygulamanızı Chat alanınızda test edin. Bugün eklediğiniz koda göre zengin bir yanıt alırsınız.

9. Temizleme

Diğer Dialogflow kod laboratuvarlarını tamamlamayı planlıyorsanız bu bölümü şimdilik atlayıp daha sonra geri dönün.

Dialogflow aracısını silme

  1. Mevcut temsilcinizin yanındaki dc4ac6f9c0ae94e9.png simgesini tıklayın.

520c1c6bb9f46ea6.png

  1. Genel sekmesinde, en alta gidin ve Bu Aracıyı Sil'i tıklayın.
  2. İletişim kutusuna Delete yazın ve Sil'i tıklayın.

10. Tebrikler

Dialogflow'da bir chatbot oluşturup bunu Takvim'le entegre ettiniz. Artık Google Chat de sizi Google Workspace Pro'ya tanıtıyor.

Daha fazla bilgi

Daha fazla bilgi için Dialogflow GitHub sayfasındaki kod örneklerine göz atın.