Google Cloud Functions ile Chat uygulaması oluşturma

Bu sayfada, Google Cloud Functions ile Chat uygulaması oluşturma ve uygulamayla etkileşim kurma açıklanmaktadır.

Uygulamayı derlemek için, uygulamanın Google Chat'ten bir mesaj etkinliğine yanıt işlemek için kullandığı bir Cloud Functions işlevi yazıp 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:

Hedefler

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

Ön koşullar

• 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. Bir veya daha fazla API'yi tek bir Google Cloud projesinde 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 Chat kartı oluşturan bir Cloud Functions işlevi oluşturup dağıtın. Chat uygulaması mesaj aldığında işlevi çalıştırır ve kartla yanıt verir.

Chat uygulamanız için işlev 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 git

   Chat uygulamanızla ilgili projenin seçili olduğundan 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ü bölümünde HTTP'yi seçin.

   3. Kimlik Doğrulama altında, 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ının 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 kod bölümünde Satır içi düzenleyici'yi seçin.

6. Giriş noktası bölümünde varsayılan metni silip helloChat yazın.

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

   düğüm/avatar-bot/index.js

   GitHub'da göster

   /**
    * 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 git

   Chat uygulamanızla ilgili projenin seçili olduğundan 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ü bölümünde HTTP'yi seçin.

   3. Kimlik Doğrulama altında, 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ının 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 kod bölümünde Satır içi düzenleyici'yi seçin.

6. Giriş noktası bölümünde varsayılan metni silip hello_chat yazın.

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

   python/avatar-bot/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 Console'da Cloud Functions sayfasına gidin:

   Cloud Functions'a git

   Chat uygulamanızla ilgili projenin seçili olduğundan 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ü bölümünde HTTP'yi seçin.

   3. Kimlik Doğrulama altında, 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 kod bölümünde Satır içi düzenleyici'yi seçin.

6. Giriş noktası bölümünde varsayılan metni silip HelloChat yazın.

7. src/main/java/com/example/Example.java adını src/main/java/HelloChat.java olarak değiştir.

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

   java/avatar-bot/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 aşağıdaki kodla değiştirin:

   java/avatar-bot/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 birlikte gösterilir. İlerleme durumu 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 git

   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 girin.
   3. Açıklama alanına Quickstart app girin.
   4. İşlevsellik bölümünde Bire bir mesajlar alın, Alanlara ve grup görüşmelerine katılın ve Hataları Cloud Logging'e kaydedin seçeneğini belirleyin.
   5. Bağlantı ayarları bölümünde Uygulama URL'si'ni 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 mesaj 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'ı ve ardından açılan pencerede Uygulamaları bul'u tıklayın.
3. Uygulamaları bul iletişim kutusunda "Hızlı Başlangıç Uygulaması"nı arayın.
4. Uygulamayla doğrudan bir mesaj açmak için Quickstart App (Hızlı Başlangıç Uygulaması) öğesini bulun ve Add (Ekle) > Chat'i (Sohbet) tıklayın.
5. Doğrudan mesaja Hello yazıp enter tuşuna basın.

Uygulama, görünen adınızın ve avatar resminizin bulunduğu bir kart döndürür.

Sonraki adımlar

Chat uygulamanızla ilgili sorunları gidermek ve Chat uygulamasında hata ayıklamak için aşağıdaki sayfaları inceleyin:

• Chat uygulamasını geliştirirken, 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 aşağıdaki 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ı bir sonraki adıma geçmeye yönlendirmek için kart mesajlarını kullanın.
• Eğik çizgi komutlarını destekleme: Eğik çizgi komutları, /help gibi eğik çizgiyle (/) başlayan bir komut yazarak kullanıcıların uygulamanıza verebileceği belirli komutları kaydettirmenize ve yayınlamanıza olanak tanır.
• İletişim kutuları başlatma - İ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ıralı bir şekilde birbirine geçirilebilir. Böylece kullanıcılar form verilerini doldurma gibi çok adımlı işlemleri tamamlamaya yardımcı olur.

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