Google Cloud Functions ile Google Chat uygulaması oluşturma

Bu sayfada, Google Cloud Functions'ı kullanarak nasıl Google Chat uygulaması oluşturabileceğiniz ve bu uygulamayla nasıl etkileşim kurabileceğiniz açıklanmaktadır.

Chat uygulamasını oluşturmak için Chat uygulamasının kullanıcının mesajlarına yanıt vermek amacıyla kullandığı bir Cloud Functions işlevi yazıp dağıtırsınız. Chat uygulamasının yanıtı, aşağıdaki resimde gösterildiği gibi gönderenin adını ve avatar resmini gösteren bir kart mesajı içerir:

Hedefler

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

Ön koşullar

• Kimliği doğrulanmamış Google Cloud Functions işlevi çağrılarına izin veren ve Google Workspace kuruluşlarında Google Chat'e erişimi olan bir Google Workspace hesabı.

• Bir Google Cloud projesi.
• Cloud projeniz için faturalandırmayı etkinleştirdiğinizden emin olun. Projelerinizin faturalandırma durumunu nasıl doğrulayacağınızı öğrenin.

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 konsolunda Google Chat API, Cloud Build API, Cloud Functions API, Cloud Pub/Sub API ve Cloud Logging API'yi etkinleştirin.

  API'leri etkinleştirme

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

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

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

Node.js

1. Google Cloud konsolunda Cloud Functions sayfasına gidin:

   Cloud Functions'a git

   Chat uygulamanızın projesinin seçildiğinden emin olun.

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

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

   1. İşlev adı alanına "QuickStartChatApp" yazın.
   2. Tetikleyici türü'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 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 Node.js 10'u seçin.

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

6. Giriş noktası'nda varsayılan metni silin ve helloChat girin.

7. index.js içeriğini şu kodla değiştirin:

   Node/avatar-app/index.js

   GitHub'da göster

   /**
    * Google Cloud Function that responds to messages sent from a
    * Google Chat room.
    *
    * @param {Object} req Request sent from Google 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 Google 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 konsolunda Cloud Functions sayfasına gidin:

   Cloud Functions'a git

   Chat uygulamanızın projesinin seçildiğinden emin olun.

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

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

   1. İşlev adı alanına "QuickStartChatApp" yazın.
   2. Tetikleyici türü'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 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 Düzenleyici'yi seçin.

6. Giriş noktası'nda varsayılan metni silin ve hello_chat girin.

7. main.py içeriğini şu kodla değiştirin:

   python/avatar-app/main.py

   GitHub'da göster

   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) -> Mapping[str, Any]:
     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 konsolunda Cloud Functions sayfasına gidin:

   Cloud Functions'a git

   Chat uygulamanızın projesinin seçildiğinden emin olun.

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

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

   1. İşlev adı alanına "QuickStartChatApp" yazın.
   2. Tetikleyici türü'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 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 Düzenleyici'yi seçin.

6. Giriş noktası'nda 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.

8. HelloChat.java içeriğini şu kodla değiştirin:

   java/avatar-app/src/main/java/HelloChat.java

   GitHub'da göster

   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 şu kodla değiştirin:

   java/avatar-app/pom.xml

   GitHub'da göster

   <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 ve işleviniz, işlev adının yanında bir dağıtım ilerleme göstergesiyle görünür. İlerleme göstergesi kaybolduğunda ve bir onay işareti göründüğünde işleviniz dağıtılmıştı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 konsolunda Menü > Cloud Functions'ı tıklayın.

   Cloud Functions'a git

   Cloud Functions'ı etkinleştirdiğiniz projenin seçildiğinden 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" araması yapın ve Google Chat API'yi, ardından Yönet'i tıklayın.

   Chat API'ye git

6. Yapılandırma'yı tıklayın ve Google Chat uygulamasını ayarlayın:

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

7. Kaydet'i tıklayın.

Uygulama, Google Chat'te mesaj almaya ve mesajları yanıtlamaya hazırdır.

Chat uygulamanızı test edin

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. Uygulama bul iletişim kutusunda "Hızlı Başlangıç Uygulaması" ifadesini arayın.
4. Uygulamayla doğrudan bir mesaj açmak için Hızlı Başlangıç Uygulaması'nı bulun ve Ekle > Sohbet'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.

Hataların giderilmesi

Chat uygulamanızla ilgili sorunları gidermek ve hata ayıklamak için Google Chat uygulaması hatalarını giderme ve düzeltme başlıklı makaleyi inceleyin.

İlgili konular

Chat uygulamanıza daha fazla işlev eklemek için aşağıdaki kılavuzları inceleyin:

• Etkileşimli kart mesajları oluşturma - Kart mesajları, tanımlanmış bir düzeni, düğmeler gibi etkileşimli kullanıcı arayüzü öğelerini ve resim gibi rich media öğelerini destekler. Kart mesajlarıyla ayrıntılı bilgiler sunun, kullanıcılardan bilgi toplayın ve kullanıcıları bir sonraki adımı atmaya yönlendirin.
• Eğik çizgi komutlarını destekleyin: Eğik çizgiyle başlayan komutlar: Eğik çizgiyle (/) başlayan bir komut yazarak kullanıcıların uygulamanıza verebileceği belirli komutları (ör. /help) kaydetmenize ve tanıtmanıza olanak tanır.
• Başlatma iletişim kutuları: İletişim kutuları, uygulamanızın kullanıcıyla etkileşim kurmak için açabileceği pencereli, kart tabanlı arayüzlerdir. Birden fazla kart art arda sıralanabilir. Bu da kullanıcıların form verilerini doldurmak gibi çok adımlı işlemleri tamamlamalarına yardımcı olur.

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