Bu sayfa, Cloud Translation API ile çevrilmiştir.

Google Chat uygulamasıyla tatile gitme

1. Giriş

Google Chat uygulamaları, hizmetleri ve kaynakları doğrudan Chat'e getirir. Böylece kullanıcılar, görüşmeden ayrılmadan bilgi alabilir ve işlem yapabilir.

Bu codelab'de, Gmail'de tatil yanıtlayıcıları ayarlayan ve Google Takvim'de toplantı planlayan bir Chat uygulaması ("Attendance Chat app") oluşturmayı öğreneceksiniz. Google Apps Script'te Attendance Chat uygulamasını oluşturarak Drive, Gmail, Takvim, Dokümanlar ve E-Tablolar gibi diğer Google hizmetlerine kolayca erişebilirsiniz.

Neler öğreneceksiniz?

Chat'te oluşturulan etkinliklere işleyici ekleme
Chat'ten gönderilen etkinlik nesnelerini ayrıştırma
Chat'e kart biçimli yanıtlarla geri yanıt verme
Kartlardaki düğme tıklamaları için özel işlemleri tanımlama ve bunlara tepki verme

İhtiyacınız olanlar

İnternet erişimi ve web tarayıcısı
Google Chat'e erişimi olan bir Google Workspace hesabı
Temel JavaScript becerileri: Google Apps Komut Dosyası yalnızca JavaScript'i destekler.

2. Örnek kodu alın

Bu örnekteki her adımın kodunu görmek için ZIP dosyası indirebilir veya GitHub deposunu klonlayabilirsiniz.

solutions/attendance-chat-app altındaki step-NN klasörleri, bu kod laboratuvarının her adımının istenen son durumunu içerir. Bunlar referans amaçlıdır.

Kodu indirme

Bu codelab'in kodunu indirmek için aşağıdaki düğmeyi tıklayın:

İndirilen ZIP dosyasını açın. Bu işlem, solutions/attendance-chat-app altında bu codelab'in her adımı için bir klasör içeren bir kök klasörü (apps-script-samples) açar.

GitHub deposunu kopyalama

Bu codelab'in GitHub deposunu klonlamak için aşağıdaki komutu çalıştırın:

git clone https://github.com/googleworkspace/apps-script-samples

3. Google Chat etkinlikleri için işleyiciler oluşturma

Apps Komut Dosyası projesi oluşturma

Apps Komut Dosyası projesi oluşturmak için aşağıdaki adımları uygulayın:

script.new adresine gidin.
Untitled project'i (Başlıksız proje) tıklayın.
Komut dosyasını Attendance Chat app olarak yeniden adlandırın ve Yeniden adlandır'ı tıklayın.

Google Chat'teki etkinlikler

Apps Komut Dosyası'nın Chat ile etkileşimlerinin çoğu etkinliğe dayalıdır. Kullanıcı, Chat uygulaması ve Chat arasındaki etkileşim genellikle şu sırayla gerçekleşir:

Bir kullanıcı, Chat uygulaması ekleme, Chat uygulamasıyla doğrudan mesaj (DM) başlatma veya Chat uygulamasını alandan kaldırma gibi bir işlem başlatır.
Bu işlem, Chat'teki Chat uygulamasına yönelik bir etkinlik oluşturur.
Chat, Chat uygulamasının komut dosyasında tanımlanan ilgili etkinlik işleyiciyi çağırır.

Chat, uygulamanızın dinleyebileceği 4 etkinlik oluşturur:

ADDED_TO_SPACE: Bu etkinlik, gerçek bir kullanıcı bir alana veya doğrudan mesaja (DM) Chat uygulaması eklediğinde gerçekleşir. Apps Komut Dosyası'nda bu etkinliği işlemek için bir onAddToSpace() işlevi tanımlarsınız.
REMOVED_FROM_SPACE: Bu etkinlik, bir kullanıcı Chat uygulamasını bir alandan veya doğrudan mesajdan kaldırdığında gerçekleşir. Bu etkinlik, Chat'e yanıt göndermez. Apps Komut Dosyası'nda bu etkinliği işlemek için bir onRemoveFromSpace() işlevi tanımlarsınız.
MESSAGE: Bu etkinlik, bir kullanıcı Chat uygulamasına doğrudan DM olarak veya bir alanda @bahsetme şeklinde mesaj gönderdiğinde gerçekleşir. Apps Komut Dosyası'nda bu etkinliğe yanıt vermek için bir onMessage() işlevi tanımlarsınız.
CARD_CLICKED: Bu etkinlik, kullanıcı kendisine özel bir işlem atanmış bir düğmeyi tıkladığında gerçekleşir. Apps Komut Dosyası'nda bu etkinliğe yanıt vermek için bir onCardClick() işlevi tanımlarsınız.

Code.gs dosyasının içeriğini, ADDED_TO_SPACE ve REMOVE_FROM_SPACE etkinlikleri için işleyicileri tanımlayan aşağıdaki kodla değiştirin. (MESSAGE ve CARD_CLICKED etkinlikleri için işleyicileri bu codelab'in ilerleyen bölümlerinde ekleyeceksiniz.)

Code.gs

/**
 * Responds to an ADDED_TO_SPACE event in Google Chat.
 * @param {object} event the event object from Google Chat
 * @return {object} JSON-formatted response
 * @see https://developers.google.com/workspace/chat/receive-respond-interactions
 */
function onAddToSpace(event) {
  console.info(event);
  var message = 'Thank you for adding me to ';
  if (event.space.type === 'DM') {
    message += 'a DM, ' + event.user.displayName + '!';
  } else {
    message += event.space.displayName;
  }
  return { text: message };
}

/**
 * Responds to a REMOVED_FROM_SPACE event in Google Chat.
 * @param {object} event the event object from Google Chat
 * @see https://developers.google.com/workspace/chat/receive-respond-interactions
 */
function onRemoveFromSpace(event) {
  console.info(event);
  console.log('Chat app removed from ', event.space.name);
}

4. Chat uygulamasını yayınlama ve test etme

Komut dosyası manifest dosyanızı güncelleme

Uygulamanızı Chat'te yayınlayabilmek için komut dosyası manifestini güncellemeniz gerekir.

Proje Ayarları 'nı tıklayın.
"appsscript.json" manifest dosyasını düzenleyicide göster onay kutusunu işaretleyin.
Düzenleyici 'yi tıklayın.
appsscript.json dosyasını tıklayın.
Manifest dosyanıza "chat": {} satırını ekleyin.

Manifest dosyanız aşağıdaki örneğe benzer olmalıdır.

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {
  },
  "chat": {}
}

Google Cloud projesi oluşturma

Chat uygulamasını çalıştırıp test edebilmek için önce bir Google Cloud projesi oluşturmanız, Chat API'yi etkinleştirip yapılandırmanız ve Chat uygulamanızı Google Workspace kuruluşunuzda yayınlamanız gerekir.

Google Cloud Console'da Menü > IAM ve Yönetici > Proje Oluştur'a gidin.
Proje Adı alanına açıklayıcı bir ad girin.
İstenirse Kuruluş ve Faturalandırma Hesabı'nı seçin.
Oluştur'u tıklayın.
Proje oluşturma işlemi tamamlandığında sayfanın sağ üst kısmında bir bildirim gösterilir. Projeyi açmak için Proje Oluştur: <Proje adı> girişini tıklayın.
Menü > API'ler ve Hizmetler > Kimlik Bilgileri'ni tıklayın.
OAuth izin ekranı'nı tıklayın.
Uygulama adı alanına Attendance Chat app yazın.
İstenirse kullanıcı desteği e-posta adresini ve geliştirici iletişim bilgilerini girin.
Kaydet ve Devam Et'i tıklayın.
Ayarlar ve yardımcı programlar > Proje ayarları'nı tıklayın.
Proje numarasını kopyalayın.
Apps Komut Dosyası Düzenleyicisi'ne geri dönüp Proje Ayarları 'nı tıklayın.
Google Cloud Platform (GCP) Projesi bölümünde Projeyi değiştir'i tıklayın.
GCP proje numarası'nı tıklayın ve proje numarasını girin.
Projeyi ayarla'yı tıklayın.

Uygulamayı Chat'te yayınlama

Chat uygulamanızı Google Chat'te yayınlamak için aşağıdakileri yapın:

Apps Komut Dosyası düzenleyicisinde Dağıt > Yeni dağıtım'ı tıklayın.
Tür seçin'in yanındaki Dağıtım türlerini etkinleştir'i tıklayın.
Eklenti'yi seçin ve Dağıt'ı tıklayın.
Dağıtım kimliğini kopyalayın ve Bitti'yi tıklayın.
Google Cloud Console'da Menü > API'ler ve hizmetler > Kitaplık'a gidin.
Google Chat API'yi arayın. Sonuç listesinden API'yi seçin.
Google Chat API sayfasında Etkinleştir'i tıklayın.
API'yi etkinleştirdikten sonra Yapılandırma'yı tıklayın. Kimlik bilgisi oluşturmanızı isteyen mesajları yoksayın.
Yapılandırma sayfasında aşağıdakileri yapın:

Bu Chat uygulamasını Workspace eklentisi olarak oluştur seçeneğinin işaretini kaldırın ve onaylamak için DEVRE DIŞI BIRAK'ı tıklayın.
Uygulama adı alanına Attendance Chat app yazın.
Avatar URL'si için https://goo.gl/kv2ENA adresini girin.
Açıklama alanına Apps Komut Dosyası codelab Chat uygulaması yazın.
İşlevsellik bölümünde Bire bir mesaj alma'yı seçin.
Bağlantı ayarları bölümünde Apps Komut Dosyası projesi'ni seçin ve komut dosyanızın dağıtım kimliğini metin kutusuna yapıştırın.
İzinler bölümünde Alanınızdaki belirli kişiler ve gruplar'ı seçin. Açılır menünün altındaki metin kutusuna, Google Workspace kuruluşunuzla ilişkili e-posta adresinizi girin.
Kaydet'i tıklayın.

Değişikliklerinizi kaydettikten sonra Google Chat API sayfasındaki durumun Uygulama Durumu olarak YAYINDA – kullanıcılar tarafından kullanılabilir gösterdiğini doğrulayın.

Chat uygulamasını test etme

Uygulamanızı Google Chat'te test etmek için aşağıdakileri yapın:

Google Chat'i açın.
Sohbet başlat > Uygulama bul'u tıklayarak Chat uygulamasına yeni bir doğrudan mesaj gönderin.
Uygulama bul sayfasında Attendance Chat uygulamasını arayın.
Attendance Chat app'in yanındaki Ekle > Chat'i tıklayın.

Doğrudan mesaj dizisi açıldığında, aşağıdaki resimde gösterildiği gibi Chat uygulamasından, uygulamayı doğrudan mesaja eklediğiniz için teşekkür eden bir mesaj görürsünüz.

5. Kart biçimli yanıt tanımlama

Önceki adımda uygulamanız, Google Chat etkinliklerine basit bir metin yanıtıyla karşılık veriyordu. Bu adımda, uygulamanızı kartlarla yanıt verecek şekilde güncellersiniz.

Kart yanıtları

Google Chat, yanıtlarda kart kullanımını destekler. Kartlar, kullanıcı arayüzü widget'larını gruplandırmanıza olanak tanıyan görsel kapsayıcılardır. Kartlarda başlıklar, metin paragrafları, düğme grupları, resimler ve anahtar/değer metni gösterilebilir. Uygulamanız, Google Chat'e verdiği JSON yanıtında bir veya daha fazla kart tanımlayabilir. Bu kartlar, yanıtınızı ilgili kullanıcı arayüzü öğelerine dönüştürür.

Aşağıdaki resimde, başlık, anahtar/değer widget'ı, resim widget'ı ve metin düğmesi içeren üç bölümlü bir kart yanıtı gösterilmektedir.

Kullanıcı mesajlarına kart yanıtıyla yanıt vermek için aşağıdaki kodu Chat uygulamanızın Code.gs dosyasına ekleyin.

Code.gs

const DEFAULT_IMAGE_URL = 'https://goo.gl/bMqzYS';
const HEADER = {
  header: {
    title : 'Attendance Chat app',
    subtitle : 'Log your vacation time',
    imageUrl : DEFAULT_IMAGE_URL
  }
};

/**
 * Creates a card-formatted response.
 * @param {object} widgets the UI components to send
 * @return {object} JSON-formatted response
 */
function createCardResponse(widgets) {
  return {
    cards: [HEADER, {
      sections: [{
        widgets: widgets
      }]
    }]
  };
}

/**
 * Responds to a MESSAGE event triggered
 * in Google Chat.
 *
 * @param event the event object from Google Chat
 * @return JSON-formatted response
 */
function onMessage(event) {
  const userMessage = event.message.text;

  const widgets = [{
    "textParagraph": {
      "text": "You said: " + userMessage
    }
  }];

  return createCardResponse(widgets);
}

Bu adımda eklenen onMessage() işlevi, kullanıcının orijinal mesajını okur ve yanıtı basit bir TextParagragh widget'ı olarak oluşturur. Ardından onMessage() işlevi, createCardResponse() işlevini çağırır. Bu işlev, TextParagraph widget'ını tek bir kartın bölümüne yerleştirir. Chat uygulaması, kart yanıtıyla oluşturulan JavaScript nesnesini Google Chat'e geri döndürür.

Chat uygulamasını test etme

Bu uygulamayı test etmek için Google Chat'te uygulamayla doğrudan mesajlaşmanıza geri dönün ve bir mesaj yazın (herhangi bir mesajı kullanabilirsiniz).

onMessage() etkinlik işleyicisinin, kullanıcının orijinal mesajını ayıklamak için Google Chat tarafından kendisine iletilen etkinlik nesnesini ayrıştırdığını unutmayın. Ayrıca, etkinliği başlatan kullanıcının adı, e-posta adresi, etkinliğin gerçekleştiği alanın adı gibi etkinlik hakkında başka türde bilgiler de edinebilirsiniz.

Google Chat tarafından gönderilen etkinlik nesnelerinin yapısı hakkında daha fazla bilgi için Etkinlik biçimleri referansı başlıklı makaleyi inceleyin.

6. Kartlardaki düğme tıklamalarına tepki verme

Önceki adımda, Chat uygulamanız bir kullanıcının mesajına (MESSAGE etkinliği) TextParagragh widget'ı içeren basit bir kartla yanıt verdi. Bu adımda, her birinde özel bir işlem tanımlanmış düğmeler içeren bir yanıt oluşturursunuz.

Etkileşimli kartlar

Kart yanıtları iki tür düğme içerebilir: yalnızca metin içeren düğmeler gösteren metin düğmesi widget'ları ve metin içermeyen basit bir simge veya resim içeren düğme gösteren ImageButton widget'ları. Hem TextButton hem de ImageButton widget'ları, iki onClick davranıştan birini destekler (Google Chat'e geri gönderilen JSON yanıtında tanımlandığı gibi): openLink veya action. Adından da anlaşılacağı gibi, openLink belirtilen bağlantıyı yeni bir tarayıcı sekmesinde açar.

action nesnesi, düğmenin gerçekleştireceği özel bir işlemi belirtir. Benzersiz bir actionMethodName ve bir dizi anahtar / değer parametre çifti dahil olmak üzere işlem nesnesinde birkaç rastgele değer belirtebilirsiniz.

Düğme için action nesnesi belirtmek etkileşimli kart oluşturur. Kullanıcı iletideki düğmeyi tıkladığında Google Chat, CARD_CLICKED etkinliğini tetikler ve orijinal iletiyi gönderen uygulamaya bir istek geri gönderir. Uygulama daha sonra Google Chat'ten gelen etkinliği işlemeli ve alana yanıt göndermelidir.

Code.gs içindeki onMessage() işlevini aşağıdaki kodla değiştirin. Bu kod, Google Chat'e gönderilen kartta 2 düğme oluşturur: Gmail'de tatil ayarla ve Takvim'de günü engelle.

Code.gs

const REASON = {
  SICK: 'Out sick',
  OTHER: 'Out of office'
};
/**
 * Responds to a MESSAGE event triggered in Google Chat.
 * @param {object} event the event object from Google Chat
 * @return {object} JSON-formatted response
 */
function onMessage(event) {
  console.info(event);
  const reason = REASON.OTHER;
  const name = event.user.displayName;
  const userMessage = event.message.text;

  // If the user said that they were 'sick', adjust the image in the
  // header sent in response.
  if (userMessage.indexOf('sick') > -1) {
    // Hospital material icon
    HEADER.header.imageUrl = 'https://goo.gl/mnZ37b';
    reason = REASON.SICK;
  } else if (userMessage.indexOf('vacation') > -1) {
    // Spa material icon
    HEADER.header.imageUrl = 'https://goo.gl/EbgHuc';
  }

  const widgets = [{
    textParagraph: {
      text: 'Hello, ' + name + '.<br/>Are you taking time off today?'
    }
  }, {
    buttons: [{
      textButton: {
        text: 'Set vacation in Gmail',
        onClick: {
          action: {
            actionMethodName: 'turnOnAutoResponder',
            parameters: [{
              key: 'reason',
              value: reason
            }]
          }
        }
      }
    }, {
      textButton: {
        text: 'Block out day in Calendar',
        onClick: {
          action: {
            actionMethodName: 'blockOutCalendar',
            parameters: [{
              key: 'reason',
              value: reason
            }]
          }
        }
      }
    }]
  }];
  return createCardResponse(widgets);
}

CARD_CLICKED etkinliğini işlemek için Chat uygulamanızın komut dosyasına onCardClick() işlevini eklemeniz gerekir. onCardClick() işlevini tanımlayan aşağıdaki kodu ekleyin Code.gs.

Code.gs

/**
 * Responds to a CARD_CLICKED event triggered in Google Chat.
 * @param {object} event the event object from Google Chat
 * @return {object} JSON-formatted response
 * @see https://developers.google.com/workspace/chat/receive-respond-interactions
 */
function onCardClick(event) {
  console.info(event);
  let message = '';
  const reason = event.action.parameters[0].value;
  if (event.action.actionMethodName == 'turnOnAutoResponder') {
    turnOnAutoResponder(reason);
    message = 'Turned on vacation settings.';
  } else if (event.action.actionMethodName == 'blockOutCalendar') {
    blockOutCalendar(reason);
    message = 'Blocked out your calendar for the day.';
  } else {
    message = "I'm sorry; I'm not sure which button you clicked.";
  }
  return { text: message };
}

Kullanıcı tıklamalarına yanıt verirken Chat uygulaması artık iki işlemden birini yapıyor: Kullanıcının Gmail'deki otomatik yanıtlayıcısını "ofis dışında" mesajı olarak ayarlıyor veya kullanıcının Takvim'inde tüm gün sürecek bir toplantı planlıyor. Uygulama, bu görevleri gerçekleştirmek için Gmail gelişmiş hizmetini ve Takvim hizmetini çağırır.

Chat uygulamasını Gmail ve Takvim ile entegre etmek için aşağıdaki kodu komut dosyanıza ekleyin.

Code.gs

const ONE_DAY_MILLIS = 24 * 60 * 60 * 1000;
/**
 * Turns on the user's vacation response for today in Gmail.
 * @param {string} reason the reason for vacation, either REASON.SICK or REASON.OTHER
 */
function turnOnAutoResponder(reason) {
  let currentTime = (new Date()).getTime();
  Gmail.Users.Settings.updateVacation({
    enableAutoReply: true,
    responseSubject: reason,
    responseBodyHtml: "I'm out of the office today; will be back on the next business day.<br><br><i>Created by Attendance Chat app!</i>",
    restrictToContacts: true,
    restrictToDomain: true,
    startTime: currentTime,
    endTime: currentTime + ONE_DAY_MILLIS
  }, 'me');
}

/**
 * Places an all-day meeting on the user's Calendar.
 * @param {string} reason the reason for vacation, either REASON.SICK or REASON.OTHER
 */
function blockOutCalendar(reason) {
  CalendarApp.createAllDayEvent(reason, new Date(), new Date(Date.now() + ONE_DAY_MILLIS));
}

Son olarak, projede Gmail gelişmiş hizmetini etkinleştirmeniz gerekir. Gmail API'yi etkinleştirmek için aşağıdakileri yapın:

Apps Komut Dosyası Düzenleyici'de, Hizmetler'in yanındaki Hizmet ekle'yi tıklayın.
Gmail API'yi seçin.
Google Cloud Console'u açan aşağıdaki Google Cloud Platform API Kontrol Paneli'ni tıklayın.
API'leri ve Hizmetleri Etkinleştir'i tıklayın.
Gmail API'yi arayın ve Gmail API'yi tıklayın.
Gmail API sayfasında Etkinleştir'i tıklayın.

Chat uygulamasını test etme

Chat uygulamanızın bu sürümünü test etmek için önceki adımlarda Google Chat'te başlattığınız DM'yi açın ve Tatile gidiyorum yazın. Uygulama, aşağıdaki resme benzer bir kartla yanıt vermelidir.

Not: Uygulamaya erişim izni vermeniz istenirse mesajınızı ikinci kez yazmanız gerekebilir.

7. Tebrikler!

Chat uygulamanız artık kullanıcı mesajlarına yanıt verebilir, Gmail'de otomatik yanıtlayıcıyı ayarlayabilir ve takvimlerine tüm gün süren etkinlikler ekleyebilir.

İşlediğimiz konular

Apps Komut Dosyası ile Google Chat uygulaması oluşturup yayınlamış olmanız gerekir.
Kullanıcı mesajlarına basit bir yanıtla karşılık verme
Chat uygulaması aracılığıyla kullanıcı adına diğer Google Workspace hizmetleriyle etkileşimde bulunma

Google Chat uygulamasıyla tatile gitme Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Giriş

Neler öğreneceksiniz?

İhtiyacınız olanlar

2. Örnek kodu alın

Kodu indirme

GitHub deposunu kopyalama

3. Google Chat etkinlikleri için işleyiciler oluşturma

Apps Komut Dosyası projesi oluşturma

Google Chat'teki etkinlikler

Code.gs

4. Chat uygulamasını yayınlama ve test etme

Komut dosyası manifest dosyanızı güncelleme

appsscript.json

Google Cloud projesi oluşturma

Uygulamayı Chat'te yayınlama

Chat uygulamasını test etme

5. Kart biçimli yanıt tanımlama

Kart yanıtları

Code.gs

Chat uygulamasını test etme

6. Kartlardaki düğme tıklamalarına tepki verme

Etkileşimli kartlar

Code.gs

Code.gs

Code.gs

Chat uygulamasını test etme

7. Tebrikler!

İşlediğimiz konular

Daha fazla bilgi

Google Chat uygulamasıyla tatile gitme