Google Cloud Functions ile Chat uygulaması oluşturma

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Bu sayfada, Google Cloud Functions kullanarak bir Chat uygulamasını nasıl oluşturacağınız ve bu uygulamayla nasıl etkileşim kuracağınız açıklanmaktadır.

Uygulamayı oluşturmak için, uygulamanın Google Chat'ten gelen bir mesaj etkinliğine yanıt işlemede kullandığı bir Cloud Functions işlevi yazar ve dağıtırsınız. Yanıt, aşağıdaki resimde gösterildiği gibi gönderenin adını ve avatar resmini gösteren bir karttır:

Chat uygulaması, gönderenin görünen adını ve avatar resmini içeren bir kartla yanıt verir.

Hedefler

  • Ortamınızı ayarlayın.
  • Cloud Functions işlevi oluşturup dağıtma.
  • Uygulamayı Google Chat'te yayınlayın.
  • Uygulamayı test edin.

Ön koşullar

Ortamı ayarlama

Google API'lerini kullanmadan önce bir Google Cloud projesinde etkinleştirmeniz gerekir. Tek bir Google Cloud projesinde bir veya daha fazla API etkinleştirebilirsiniz.

  • Google Cloud Console'da Google Chat API, Cloud Build API, Cloud Functions API ve Cloud Pub/Sub API'yi etkinleştirin.

    API'leri etkinleştirme

Cloud Functions işlevi oluşturma ve dağıtma

Gönderenin görünen adı ve avatar resmiyle bir Chat kartı oluşturan Cloud Functions işlevini oluşturup dağıtın. Chat uygulaması bir mesaj aldığında işlevi çalıştırır ve kartla yanıt verir.

Chat uygulamanızda işlevi oluşturup dağıtmak için aşağıdaki adımları tamamlayın:

Node.js

  1. Google Cloud Console'da Cloud Functions sayfasına gidin:

    Cloud Functions'a gidin

    Chat uygulamanız için seçili projenin seçili olduğundan emin olun.

  2. İşlev Oluştur'u tıklayın.

  3. İşlev oluşturma sayfasında işlevinizi ayarlayın:

    1. İşlev adı alanına "QuickStartChatApp" yazın.
    2. Tetikleyici türü bölümünde HTTP'yi seçin.

    3. Kimlik Doğrulama bölümünde Kimliği doğrulanmayan çağrılara izin ver'i seçin.

      Google Workspace'te kimlik doğrulama hakkında daha fazla bilgi edinmek için Chat uygulamaları ve API isteklerinin kimliğini doğrulama ve yetkilendirme başlıklı makaleyi inceleyin.

    4. Kaydet'i tıklayın.

    5. İleri'yi tıklayın.

  4. Çalışma zamanı'nda Node.js 10'u seçin.

  5. Kaynak kodu bölümünde Satır içi düzenleyici'yi seçin.

  6. Giriş noktası bölümünde varsayılan metni silin ve helloChat girin.

  7. index.js içeriğini aşağıdaki kodla değiştirin:

    düğüm/avatar-bot/index.js
    /**
 * Google Cloud Function that responds to messages sent from a
 * Hangouts Chat room.
 *
 * @param {Object} req Request sent from Hangouts Chat room
 * @param {Object} res Response to send back
 */
exports.helloChat = function helloChat(req, res) {
  if (req.method === 'GET' || !req.body.message) {
    res.send('Hello! This function is meant to be used in a Hangouts Chat ' +
      'Room.');
  }

  const sender = req.body.message.sender.displayName;
  const image = req.body.message.sender.avatarUrl;

  const data = createMessage(sender, image);

  res.send(data);
};

/**
 * Creates a card with two widgets.
 * @param {string} displayName the sender's display name
 * @param {string} imageUrl the URL for the sender's avatar
 * @return {Object} a card with the user's avatar.
 */
function createMessage(displayName, imageUrl) {
  const cardHeader = {
    title: `Hello ${displayName}!`,
  };

  const avatarWidget = {
    textParagraph: {text: 'Your avatar picture: '},
  };

  const avatarImageWidget = {
    image: {imageUrl},
  };

  const avatarSection = {
    widgets: [
      avatarWidget,
      avatarImageWidget,
    ],
  };

  return {
    cardsV2: [{
      cardId: 'avatarCard',
      card: {
        name: 'Avatar Card',
        header: cardHeader,
        sections: [avatarSection],
      }
    }],
  };
}

  8. Dağıt'ı tıklayın.

Python

  1. Google Cloud Console'da Cloud Functions sayfasına gidin:

    Cloud Functions'a gidin

    Chat uygulamanız için seçili projenin seçili olduğundan emin olun.

  2. İşlev Oluştur'u tıklayın.

  3. İşlev oluşturma sayfasında işlevinizi ayarlayın:

    1. İşlev adı alanına "QuickStartChatApp" yazın.
    2. Tetikleyici türü bölümünde HTTP'yi seçin.

    3. Kimlik Doğrulama bölümünde Kimliği doğrulanmayan çağrılara izin ver'i seçin.

      Google Workspace'te kimlik doğrulama hakkında daha fazla bilgi edinmek için Chat uygulamaları ve API isteklerinin kimliğini doğrulama ve yetkilendirme başlıklı makaleyi inceleyin.

    4. Kaydet'i tıklayın.

    5. İleri'yi tıklayın.

  4. Çalışma zamanı bölümünde Python 3.10'u seçin.

  5. Kaynak kodu bölümünde Satır içi düzenleyici'yi seçin.

  6. Giriş noktası bölümünde varsayılan metni silin ve hello_chat girin.

  7. main.py içeriğini aşağıdaki kodla değiştirin:

    python/avatar-bot/main.py
    from typing import Any, Mapping

import flask
import functions_framework

# Google Cloud Function that responds to messages sent in
# Google Chat.
#
# @param {Object} req Request sent from Google Chat.
# @param {Object} res Response to send back.
@functions_framework.http
def hello_chat(req: flask.Request):
    if req.method == "GET":
        return "Hello! This function must be called from Google Chat."

    request_json = req.get_json(silent=True)

    display_name = request_json["message"]["sender"]["displayName"]
    avatar = request_json["message"]["sender"]["avatarUrl"]

    response = create_message(name=display_name, image_url=avatar)

    return response


# Creates a card with two widgets.
# @param {string} name the sender's display name.
# @param {string} image_url the URL for the sender's avatar.
# @return {Object} a card with the user's avatar.
def create_message(name: str, image_url: str) -> Mapping[str, Any]:
    avatar_image_widget = {"image": {"imageUrl": image_url}}
    avatar_text_widget = {"textParagraph": {"text": "Your avatar picture:"}}
    avatar_section = {"widgets": [avatar_text_widget, avatar_image_widget]}

    header = {"title": f"Hello {name}!"}

    cards = {
        "cardsV2": [
            {
                "cardId": "avatarCard",
                "card": {
                    "name": "Avatar Card",
                    "header": header,
                    "sections": [avatar_section],
                },
            }
        ]
    }

    return cards

  8. Dağıt'ı tıklayın.

Java

  1. Google Cloud Console'da Cloud Functions sayfasına gidin:

    Cloud Functions'a gidin

    Chat uygulamanız için seçili projenin seçili olduğundan emin olun.

  2. İşlev Oluştur'u tıklayın.

  3. İşlev oluşturma sayfasında işlevinizi ayarlayın:

    1. İşlev adı alanına "QuickStartChatApp" yazın.
    2. Tetikleyici türü bölümünde HTTP'yi seçin.

    3. Kimlik Doğrulama bölümünde Kimliği doğrulanmayan çağrılara izin ver'i seçin.

      Google Workspace'te kimlik doğrulama hakkında daha fazla bilgi edinmek için Chat uygulaması ve API isteklerinin kimliğini doğrulama ve yetkilendirme başlıklı makaleyi inceleyin.

    4. Kaydet'i tıklayın.

    5. İleri'yi tıklayın.

  4. Çalışma zamanı bölümünde Java 11'i seçin.

  5. Kaynak kodu bölümünde Satır içi düzenleyici'yi seçin.

  6. Giriş noktası bölümünde varsayılan metni silin ve HelloChat girin.

  7. src/main/java/com/example/Example.java öğesini src/main/java/HelloChat.java olarak yeniden adlandırın.

  8. HelloChat.java içeriğini aşağıdaki kodla değiştirin:

    java/avatar-bot/src/main/java/HelloChat.java
    import com.google.api.services.chat.v1.model.CardWithId;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Card;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1CardHeader;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Image;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Section;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1TextParagraph;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Widget;
import com.google.api.services.chat.v1.model.Message;
import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import java.util.List;

public class HelloChat implements HttpFunction {
  private static final Gson gson = new Gson();

  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    JsonObject body = gson.fromJson(request.getReader(), JsonObject.class);

    if (request.getMethod().equals("GET") || !body.has("message")) {
      response.getWriter().write("Hello! This function must be called from Google Chat.");
      return;
    }

    JsonObject sender = body.getAsJsonObject("message").getAsJsonObject("sender");
    String displayName = sender.has("displayName") ? sender.get("displayName").getAsString() : "";
    String avatarUrl = sender.has("avatarUrl") ? sender.get("avatarUrl").getAsString() : "";
    Message message = createMessage(displayName, avatarUrl);

    response.getWriter().write(gson.toJson(message));
  }

  Message createMessage(String displayName, String avatarUrl) {
    GoogleAppsCardV1CardHeader cardHeader = new GoogleAppsCardV1CardHeader();
    cardHeader.setTitle(String.format("Hello %s!", displayName));

    GoogleAppsCardV1TextParagraph textParagraph = new GoogleAppsCardV1TextParagraph();
    textParagraph.setText("Your avatar picture: ");

    GoogleAppsCardV1Widget avatarWidget = new GoogleAppsCardV1Widget();
    avatarWidget.setTextParagraph(textParagraph);

    GoogleAppsCardV1Image image = new GoogleAppsCardV1Image();
    image.setImageUrl(avatarUrl);

    GoogleAppsCardV1Widget avatarImageWidget = new GoogleAppsCardV1Widget();
    avatarImageWidget.setImage(image);

    GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
    section.setWidgets(List.of(avatarWidget, avatarImageWidget));

    GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
    card.setName("Avatar Card");
    card.setHeader(cardHeader);
    card.setSections(List.of(section));

    CardWithId cardWithId = new CardWithId();
    cardWithId.setCardId("previewLink");
    cardWithId.setCard(card);

    Message message = new Message();
    message.setCardsV2(List.of(cardWithId));

    return message;
  }
}

  9. pom.xml içeriğini aşağıdaki kodla değiştirin:

    java/avatar-bot/pom.xml
    <project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>cloudfunctions</groupId>
  <artifactId>http-function</artifactId>
  <version>1.0-SNAPSHOT</version>

  <properties>
    <maven.compiler.target>11</maven.compiler.target>
    <maven.compiler.source>11</maven.compiler.source>
  </properties>

  <dependencies>
    <dependency>
      <groupId>com.google.cloud.functions</groupId>
      <artifactId>functions-framework-api</artifactId>
      <version>1.0.1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.9.1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.apis/google-api-services-chat -->
    <dependency>
      <groupId>com.google.apis</groupId>
      <artifactId>google-api-services-chat</artifactId>
      <version>v1-rev20230115-2.0.0</version>
    </dependency>
  </dependencies>

  <!-- Required for Java 11 functions in the inline editor -->
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.8.1</version>
        <configuration>
          <excludes>
            <exclude>.google/</exclude>
          </excludes>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

  10. Dağıt'ı tıklayın.

Cloud Functions sayfası açılır. İşleviniz, işlev adının yanında bir dağıtım ilerleme göstergesiyle birlikte gösterilir. İlerleme göstergesi kaybolur ve bir onay işareti görünürse işleviniz dağıtılır.

Uygulamayı Google Chat'te yayınlama

Cloud Functions işlevi dağıtıldıktan sonra Google Chat uygulamasına dönüştürmek için aşağıdaki adımları uygulayın:

  1. Google Cloud Console'da Menü > Cloud Functions'ı tıklayın.

    Cloud Functions'a gidin

    Cloud Functions'ı etkinleştirdiğiniz projenin seçili olduğundan emin olun.

  2. İşlevler listesinde QuickStartChatApp'i tıklayın.

  3. İşlev ayrıntıları sayfasında Tetikleyici'yi tıklayın.

  4. Tetikleyici URL'si bölümünde, URL'yi kopyalayın.

  5. "Google Chat API"yi arayın ve Google Chat API'yi tıklayın.

  6. Yönet'i tıklayın.

  7. Yapılandırma'yı tıklayın ve Google Chat uygulamasını kurun:

    1. Uygulama adı alanına Quickstart App yazın.
    2. Avatar URL'si alanına https://developers.google.com/chat/images/quickstart-app-avatar.png yazın.
    3. Açıklama alanına Quickstart app girin.
    4. İşlevler bölümünde, Bire bir mesajlar al, Alanlara ve grup görüşmelerine katıl ve Hataları Cloud Logging'e kaydet'i seçin.
    5. Bağlantı ayarları altında Uygulama URL'si öğesini seçin ve Cloud Functions işlevi tetikleyicisinin URL'sini kutuya yapıştırın.
    6. İzinler bölümünde, Alanınızdaki belirli kişiler ve gruplar'ı seçip e-posta adresinizi girin.

  8. Kaydet'i tıklayın.

Uygulama, Google Chat'te mesajlar almaya ve mesajlara yanıt vermeye hazırdır.

Chat uygulamanızı test etme

Chat uygulamanızı test etmek için uygulamaya doğrudan mesaj gönderin:

  1. Google Chat'i açın.
  2. Uygulamaya doğrudan mesaj göndermek için Sohbet başlat'ı tıklayın ve açılan pencerede Uygulama bul'u tıklayın.
  3. Uygulamaları bul iletişim kutusunda "Uygulamayı Hızlı Başlat" ifadesini arayın.
  4. Uygulamayla doğrudan bir mesaj açmak için Quickstart App'i (Hızlı Başlangıç Uygulaması) bulun ve Add (Ekle) > Chat'i tıklayın.
  5. Doğrudan mesaja Hello yazıp enter tuşuna basın.

Uygulama, görünen adınız ve avatar resminizi içeren bir kart döndürür.

Sonraki adımlar

Chat uygulamanızda sorun giderme ve hata ayıklama için aşağıdaki sayfalara bakın:

  • Chat uygulamasını oluştururken uygulamanın hata günlüklerini okuyarak uygulamada hata ayıklamanız gerekebilir. Günlükleri okumak için Google Cloud Console'da Günlük Gezgini'ne gidin.
  • Sorun giderin.

Chat uygulamanıza daha fazla işlev eklemek için şu kılavuzlara göz atın:

  • Etkileşimli kartlar oluşturun: Kart mesajları; tanımlı bir düzeni, düğmeler gibi etkileşimli kullanıcı arayüzü öğelerini ve resimler gibi rich media öğelerini destekler. Ayrıntılı bilgi sunmak, kullanıcılardan bilgi toplamak ve kullanıcıları sonraki adımı atmaya yönlendirmek için kart mesajlarını kullanın.
  • Destek eğik çizgi komutları: Eğik çizgi komutları, kullanıcıların /help gibi eğik çizgiyle (/) başlayan bir komut yazarak uygulamanıza verebileceği belirli komutları kaydetmenize ve bunların reklamını yapmanıza olanak tanır.
  • Başlatma iletişim kutuları: İletişim kutuları, uygulamanızın bir kullanıcıyla etkileşimde bulunmak için açabileceği pencereli, kart tabanlı arayüzlerdir. Birden fazla kart sırayla dizilebilir. Böylece, kullanıcılar form verilerini doldurmak gibi çok adımlı işlemleri tamamlayabilir.

Google Chat API hakkında daha fazla bilgi edinmek için referans belgelerini inceleyin.