Membangun aplikasi Google Chat HTTP dengan Cloud Functions

Halaman ini menjelaskan cara membuat aplikasi HTTP Chat. Ada berbagai cara untuk menerapkan arsitektur ini. Di Google Cloud, Anda dapat menggunakan Cloud Functions, Cloud Run, dan App Engine. Dalam panduan memulai ini, Anda menulis dan men-deploy Cloud Function yang digunakan aplikasi Chat untuk menanggapi pesan pengguna.

Dengan arsitektur ini, Anda mengonfigurasi Chat untuk diintegrasikan dengan Google Cloud atau server lokal dengan menggunakan HTTP, seperti yang ditunjukkan diagram berikut:

Pada diagram sebelumnya, pengguna berinteraksi dengan permintaan HTTP Aplikasi Chat memiliki alur informasi berikut:

1. Pengguna mengirim pesan di Chat kepada aplikasi Chat, baik di pesan langsung maupun dalam Ruang Chat.
2. Permintaan HTTP dikirim ke server web yang merupakan {i>cloud<i} atau sistem lokal yang berisi aplikasi Chat logika.
3. Secara opsional, logika aplikasi Chat dapat diintegrasikan dengan Layanan Google Workspace (seperti Kalender dan Spreadsheet), layanan Google lainnya (seperti Maps, YouTube, dan Vertex AI), atau layanan web lainnya (seperti project sistem pengelolaan otomatis atau alat penjualan tiket).
4. Server web mengirimkan respons HTTP kembali ke Layanan aplikasi Chat di Chat.
5. Respons dikirimkan ke pengguna.
6. Secara opsional, aplikasi Chat dapat memanggil Chat API untuk memposting pesan secara asinkron atau melakukan operations.

Arsitektur ini memberi Anda fleksibilitas untuk menggunakan library dan komponen yang sudah ada di sistem Anda karena langkah ini Aplikasi chat dapat dirancang menggunakan bahasa pemrograman yang berbeda.

Tujuan

• Menyiapkan lingkungan Anda.
• Membuat dan men-deploy Cloud Function.
• Publikasikan aplikasi ke Chat.
• Uji aplikasi.

Prasyarat

• J Google Workspace akun dengan akses ke Google Chat dan Google Cloud Functions.
• Project Google Cloud.
• Pastikan Anda mengaktifkan penagihan untuk project Cloud. Pelajari petunjuk memverifikasi status penagihan project Anda.

Menyiapkan lingkungan

Sebelum menggunakan Google API, Anda harus mengaktifkannya di project Google Cloud. Anda dapat mengaktifkan satu atau beberapa API dalam satu project Google Cloud.

• Di konsol Google Cloud, aktifkan Google Chat API, Cloud Build API, Cloud Functions API, Cloud Pub/Sub API, Cloud Logging API, Artifact Registry API, dan Cloud Run API.

  Aktifkan API

Membuat dan men-deploy Cloud Function

Membuat dan men-deploy Cloud Function yang menghasilkan kartu Chat dengan nama tampilan dan gambar avatar pengirim. Jika Aplikasi Chat menerima pesan, lalu menjalankan fungsi dan merespons dengan kartu.

Untuk membuat dan men-deploy fungsi pada aplikasi Chat Anda, selesaikan langkah-langkah berikut:

Node.js

1. Di konsol Google Cloud, buka halaman Cloud Functions:

   Buka Cloud Functions

   Pastikan project untuk aplikasi Chat Anda dipilih.

2. Klik Create Function.

3. Di halaman Create function, siapkan fungsi Anda:

   1. Di Environment, pilih 2nd generasi.
   2. Di Function name, masukkan QuickStartChatApp.
   3. Di Region, pilih wilayah.
   4. Pada bagian Autentikasi, pilih Wajibkan autentikasi.
   5. Klik Berikutnya.

4. Di Runtime, pilih versi terbaru Node.js.

5. Di Source code, pilih Inline Editor.

6. Di Titik entri, hapus teks default, lalu masukkan helloChat.

7. Ganti konten index.js dengan kode berikut:

   node/avatar-app/index.js

   Lihat di GitHub

   /**
    * 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 {
       text: 'Here\'s your avatar',
       cardsV2: [{
         cardId: 'avatarCard',
         card: {
           name: 'Avatar Card',
           header: cardHeader,
           sections: [avatarSection],
         }
       }],
     };
   }

8. Klik Deploy.

Python

1. Di konsol Google Cloud, buka halaman Cloud Functions:

   Buka Cloud Functions

   Pastikan project untuk aplikasi Chat Anda dipilih.

2. Klik Create Function.

3. Di halaman Create function, siapkan fungsi Anda:

   1. Di Environment, pilih 2nd generasi.
   2. Di Function name, masukkan QuickStartChatApp.
   3. Di Region, pilih wilayah.
   4. Pada bagian Autentikasi, pilih Wajibkan autentikasi.
   5. Klik Berikutnya.

4. Di Runtime, pilih versi terbaru Python.

5. Di Source code, pilih Inline Editor.

6. Di Titik entri, hapus teks default, lalu masukkan hello_chat.

7. Ganti konten main.py dengan kode berikut:

   python/avatar-app/main.py

   Lihat di GitHub

   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 = {
         "text": "Here's your avatar",
         "cardsV2": [
             {
                 "cardId": "avatarCard",
                 "card": {
                     "name": "Avatar Card",
                     "header": header,
                     "sections": [avatar_section],
                 },
             }
         ]
     }
   
     return cards

8. Klik Deploy.

Java

1. Di konsol Google Cloud, buka halaman Cloud Functions:

   Buka Cloud Functions

   Pastikan project untuk aplikasi Chat Anda dipilih.

2. Klik Create Function.

3. Di halaman Create function, siapkan fungsi Anda:

   1. Di Environment, pilih 2nd generasi.
   2. Di Function name, masukkan QuickStartChatApp.
   3. Di Region, pilih wilayah.
   4. Pada bagian Autentikasi, pilih Wajibkan autentikasi.
   5. Klik Berikutnya.

4. Di Runtime, pilih versi Java terbaru.

5. Di Source code, pilih Inline Editor.

6. Di Titik entri, hapus teks default, lalu masukkan HelloChat.

7. Mengganti nama src/main/java/com/example/Example.java menjadi src/main/java/HelloChat.java.

8. Ganti konten HelloChat.java dengan kode berikut:

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

   Lihat di GitHub

   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.setText("Here's your avatar");
       message.setCardsV2(List.of(cardWithId));
   
       return message;
     }
   }

9. Ganti konten pom.xml dengan kode berikut:

   java/avatar-app/pom.xml

   Lihat di GitHub

   <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. Klik Deploy.

Halaman detail Cloud Functions akan terbuka, dan fungsi Anda akan muncul dengan dua indikator progres: satu untuk build dan satu untuk layanan. Jika keduanya indikator progres menghilang dan diganti dengan tanda centang, fungsi Anda sudah di-deploy dan siap digunakan.

Izinkan Google Chat untuk memanggil fungsi Anda

Untuk Mengizinkan Google Chat memanggil fungsi Anda, tambahkan Google Chat akun layanan Anda dengan peran Cloud Run Invoker.

1. Di konsol Google Cloud, buka halaman Cloud Run:

   Buka Cloud Run

2. Dalam daftar layanan Cloud Run, pilih kotak centang di samping penerima fungsi tersebut. (Jangan klik fungsi itu sendiri.)

3. Klik Izin. Panel Izin akan terbuka.

4. Klik Tambahkan akun utama.

5. Di New principals, masukkan [e-mail].

6. Pada bagian Select a role, pilih Cloud Run > Invoker Cloud Run.

7. Klik Simpan.

Memublikasikan aplikasi ke Google Chat

Setelah Cloud Function di-deploy, ikuti langkah-langkah berikut untuk mengubahnya menjadi Aplikasi Google Chat:

1. Di Konsol Google Cloud, klik Menu &gt; Cloud Functions.

   Buka Cloud Functions

   Pastikan project tempat Anda mengaktifkan Cloud Functions dipilih.

2. Dalam daftar fungsi, klik QuickStartChatApp.

3. Klik tab Trigger.

4. Di bagian HTTPS, salin URL.

5. Telusuri "Google Chat API" dan klik Google Chat API, lalu klik Kelola.

   Buka Chat API

6. Klik Konfigurasi dan siapkan aplikasi Google Chat:

   1. Di App name, masukkan Quickstart App.
   2. Di Avatar URL, masukkan https://developers.google.com/chat/images/quickstart-app-avatar.png.
   3. Pada Description, masukkan Quickstart app.
   4. Di bawah Functionality, pilih Receive 1:1 messages dan Bergabung ke ruang dan percakapan grup.
   5. Di bagian Connection settings, pilih App URL dan tempelkan URL untuk pemicu Cloud Function ke dalam kotak.
   6. Di bagian Authentication Audience, pilih App URL.
   7. Di bagian Visibility, pilih Jadikan aplikasi Google Chat ini tersedia untuk orang dan grup di domain Anda dan masukkan alamat email Anda.
   8. Di bagian Logs, pilih Log errors to Logging.

7. Klik Simpan.

Aplikasi Chat siap menerima dan merespons pesan di Chat.

Menguji aplikasi Chat Anda

Untuk menguji aplikasi Chat Anda, buka ruang pesan langsung dengan aplikasi Chat dan mengirim pesan:

1. Buka Google Chat menggunakan akun Google Workspace yang telah Anda yang diberikan ketika Anda menambahkan diri Anda sebagai penguji tepercaya.

   Buka Google Chat

2. Klik Chat baru.
3. Di kolom Tambahkan 1 orang atau lebih, ketik nama Aplikasi Chat.

4. Pilih aplikasi Chat Anda dari hasil yang ditampilkan. Iklan langsung pesan terbuka.

   Catatan:Jika Anda tidak melihat aplikasi Chat Anda dalam daftar hasil, pastikan Anda telah menyertakan akun Google Workspace di Visibilitas setelan Konfigurasi Chat API di Konsol Google Cloud.
5. Di pesan langsung baru dengan aplikasi, ketik Hello, lalu tekan enter.

Respons aplikasi Chat berisi pesan kartu yang menampilkan nama pengirim dan gambar avatar, seperti yang ditunjukkan dalam gambar berikut:

Untuk menambahkan penguji tepercaya dan mempelajari lebih lanjut pengujian fitur interaktif, lihat Menguji fitur interaktif untuk Aplikasi Google Chat.

Memecahkan masalah

Saat aplikasi Google Chat atau kartu menampilkan error, Antarmuka Chat menampilkan pesan yang bertuliskan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi Chat atau memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak akan muncul.

Meskipun pesan error mungkin tidak ditampilkan di UI Chat, pesan error deskriptif dan data log tersedia untuk membantu Anda memperbaiki error saat logging error untuk aplikasi Chat diaktifkan. Untuk bantuan melihat, men-debug, dan memperbaiki error, melihat Memecahkan masalah dan memperbaiki error Google Chat.

Pembersihan

Agar tidak menimbulkan tagihan ke akun Google Cloud Anda untuk sumber daya yang digunakan dalam tutorial ini, sebaiknya Anda menghapus project Google Cloud.

Perhatian: Menghapus project memiliki efek berikut:

• Semua hal dalam project akan dihapus. Jika Anda menggunakan project yang ada untuk tutorial ini, saat menghapusnya, Anda juga akan menghapus semua pekerjaan lain yang telah Anda lakukan di project tersebut.
• Project ID kustom akan hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang masih ingin Anda gunakan pada masa mendatang. Untuk mempertahankan URL yang menggunakan project ID, seperti URL di appspot.com, hapus resource yang dipilih di dalam project, bukan menghapus keseluruhan project.

Jika Anda berencana untuk mempelajari beberapa tutorial dan panduan memulai, menggunakan kembali project dapat membantu Anda agar tidak melampaui batas kuota project.

1. Pada Konsol Google Cloud, buka halaman Kelola resource Klik Menu &gt; IAM & Admin &gt; Kelola Resource.

   Buka Resource Manager

2. Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Hapus .
3. Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus menyelesaikan proyek tersebut.

Topik terkait

• Untuk menambahkan lebih banyak fitur ke aplikasi Chat Anda, lihat berikut ini:

  • Membuat pesan kartu interaktif
  • Merespons perintah garis miring
  • Membuka dan merespons dialog

• Memilih arsitektur aplikasi Chat

• Memverifikasi permintaan dari Google Chat