Dialogflow'u Google Chat ile entegre etme

1. Başlamadan önce

Bu codelab'de, Google Chat'te dinamik yanıtlar içeren Google Takvim ile tam işlevli bir randevu planlayıcı oluşturmak için Dialogflow'un Google Workspace API'leriyle nasıl bağlantı kurduğunu öğreneceksiniz.

Önceki codelab'lerdeki kurulumu henüz yapmadıysanız veya Dialogflow ve 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 ile entegre ederek karşılama işlemini anlama

Ayrıca, Dialogflow ile chatbot oluşturma rotasındaki aşağıdaki videolardan edinebileceğiniz Dialogflow'un temel kavramlarını ve yapılarını da anlamanız gerekir.

Neler öğreneceksiniz?

• Google Chat sohbet uygulamasını dağıtma ve yapılandırma
• Google Chat'te bilgi kartları oluşturma
• Dialogflow fulfillment'da özel yükler oluşturma

Ne 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

İhtiyacınız olanlar

• Dialogflow konsolunda oturum açmak için web tarayıcısı ve e-posta adresi
• Google Workspace alanınızda Takvim ve Google Chat'in etkin olması

Uyarı: Bu codelab'i tamamlamak için Google Workspace hesabı kullanmanız gerekir. API'yi etkinleştirmeye çalıştığınızda @gmail.com hesabı kullanırsanız hata oluşur.

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 Console'da simgesini tıklayın.
2. Genel sekmesinde Proje kimliği'ne gidin ve Google Cloud'u tıklayın.

3. Google Cloud Console'da Gezinme menüsü ☰ > API'ler ve Hizmetler > Kitaplık'ı tıklayın.
4. "Google Chat API"yi arayın, ardından Google Cloud projenizde API'yi kullanmak için Etkinleştir'i tıklayın.
5. Şimdi sohbet uygulamanızı yapılandıracağız. API'nin Yapılandırma sayfasına gidin. Her GCP projesinin en fazla bir sohbet uygulaması olabileceğini lütfen unutmayın.

6. Yapılandırma seçeneklerinin Dialogflow alanlarıyla doldurulduğunu görmeniz gerekir.
7. 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**
8. Sohbet uygulamanızı hem doğrudan mesajlar hem de alanlar için etkinleştirmek istiyorsanız Uygulamaya doğrudan mesaj gönderilebilir 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 botun birden fazla platformda hizmet vermesini istiyorsanız bunları etkinleştirmek için Dialogflow Konsolu'ndaki Entegrasyonlar sayfasına gidebilirsiniz.

4. Google Chat'te test etme

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

1. Alanının sağ üst köşesinde açılır listeyi tıklayın ve Kullanıcı ve uygulama ekle'yi seçin.
2. AppointmentScheduler simgesini arayın ve uygulamayı alana ekleyin.
3. Artık alana @AppointmentScheduler yazarak Google'da oluşturduğunuz uygulamayla etkileşime geçebilirsiniz.

Önceki codelab'lerdeki aynı girişle bu platformda test edin:

1. Kullanıcı: "@AppointmentScheduler Yarın saat 14:00'te araç tescili için randevu ayarla."
2. Sohbet uygulaması: "Tamam, sizi programa dahil edip edemeyeceğimize bakalım. 24 Nisan saat 14:00 uygun!"

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

5. Özel Google Chat kartları

Google Chat ile uygulamanızın kullanıcıya temel bir Metin Yanıtı veya Resim, düğme gibi farklı widget'larla oluşturulmuş daha zengin bir arayüz sunan Kart Yanıtı döndürmesini sağlayabilirsiniz. Dialogflow aracınızı bir Google Chat sohbet uygulamasına bağladığınıza göre, artık yalnızca Google'da gösterilecek JSON'u karşılama kodunuzda doğru biçimde döndürmeniz yeterlidir. Bazı JSON örneklerine göz atalım.

Temel metin yanıtı şu şekilde görünür:

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

Widget'lı örnek bir kart yanıtı şu şekilde görünür:

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

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

6. Özel Yükler ve Sohbet Kartları

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

Başlamak için karşılama amacına yönelik temel bir kart ekleyelim. Dialogflow Console'da Varsayılan Karşılama Niyeti'ne gidin ve yanıtlar bölümüne ilerleyin.

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

Bir JSON iskeleti görürsünüz.

Aşağıdaki kodu kopyalayıp 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'i tıklayın. Ardından, bu kartın oluşturulup oluşturulmadığını görmek için test Chat alanınıza gidin. Chat alanında "@AppointmentScheduler merhaba" yazın.

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

7. Adding a card in Fulfillment

Şimdi, planlanmış bir randevuyu göstermek için birkaç widget içeren bir kart oluşturacağız. Girişleri (appointmentType, date ve time) oluşturacağımız getGoogleChatCard adlı bir işlev ekleyelim.

Aşağıdaki işlevi index.js bölümündeki kodunuzun en altına 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 kartta bir anahtar/değer çifti ve düğme widget'ı bulunur. Widget'lar daha sonra section şeklinde sıralanır ve card, oluşturulacak bölümlerin listesini içerir.

Şimdi de bir takvim etkinliği oluşturulduğunda bu işlevi çağıralım. createCalendarEvent işlevinizde 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}.`);
 });
}

Temsilci, Google Chat'te yanıt verirken yukarıda oluşturulan kartı döndürmesi gerektiğini bilir. Planlama isteği göndererek özelliği deneyin.

8. (İsteğe bağlı) Google Haritalar görsel widget'ı ekleme

Yanıt kartınızı daha görsel hale getirmek istiyorsanız Maps Static API tarafından oluşturulan randevu yerinin statik haritasını ekleyebilirsiniz. API, URL parametreleriyle bir Haritalar resmi oluşturmanıza olanak tanır. Daha sonra bu resmi kartımızdaki bir resim widget'ında kullanabiliriz.

1. Google Cloud Console'da Maps Static API'yi, Takvim ve Google Chat API'lerini etkinleştirdiğiniz şekilde etkinleştirin.
2. Konsoldaki API'ler ve Hizmetler sayfasında projeniz için bir API anahtarı oluşturup kaydedin. Haritalar ile API anahtarlarının alınması ve en iyi uygulamaları hakkında daha fazla bilgi için lütfen burayı inceleyin.
3. API anahtarını ve aşağıdaki sabitleri index.js 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';

4. Ardından, getGoogleChatCard işlevinize bir resim widget'ı ekleyin.

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

5. mapImageWidget'ı infoSection değişkeninizdeki widget listesine ekleyin, kaydedin ve dağıtın.
6. Chat alanınızda sohbet uygulamanızı test edin. Bugün eklediğiniz koda göre zengin bir yanıt alırsınız.

9. Temizleme

Diğer Dialogflow codelab'lerini tamamlamayı planlıyorsanız bu bölümü şimdilik atlayıp daha sonra geri dönebilirsiniz.

Dialogflow aracısını silme

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

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

10. Tebrikler

Dialogflow'da bir chatbot oluşturup Takvim ve Google Chat ile entegre ettiniz. Artık Google Workspace Pro'sunuz.

Daha fazla bilgi

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