Membangun aplikasi Google Chat dengan Google Cloud Functions

Halaman ini menjelaskan cara membuat dan berinteraksi dengan aplikasi Google Chat menggunakan Google Cloud Functions.

Untuk membangun aplikasi Chat, Anda perlu menulis dan men-deploy Cloud Function yang digunakan aplikasi Chat untuk merespons pesan pengguna. Respons aplikasi Chat berisi pesan kartu yang menampilkan nama pengirim dan gambar avatar, seperti yang ditunjukkan dalam gambar berikut:

Aplikasi chat merespons dengan kartu yang menampilkan nama tampilan dan gambar avatar pengirim

Tujuan

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

Prasyarat

  • Akun Google Workspace dengan akses ke Google Chat di organisasi Google Workspace yang mengizinkan pemanggilan Google Cloud Function yang tidak diautentikasi.

Menyiapkan lingkungan

Sebelum menggunakan Google API, Anda perlu 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, dan Cloud Logging API.

    Mengaktifkan API

Membuat dan men-deploy Cloud Function

Buat dan deploy Cloud Function yang menghasilkan kartu Chat dengan nama tampilan dan gambar avatar pengirim. Saat menerima pesan, aplikasi Chat akan menjalankan fungsi dan merespons dengan kartu.

Untuk membuat dan men-deploy fungsi 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 telah dipilih.

  2. Klik Create Function.

  3. Di halaman Create function, siapkan fungsi Anda:

    1. Di Function name, masukkan "QuickStartChatApp".
    2. Di Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.

      Untuk mengetahui informasi selengkapnya tentang autentikasi di Google Workspace, lihat Mengautentikasi serta mengizinkan aplikasi Chat dan permintaan API.

    4. Klik Simpan.

    5. Klik Next.

  4. Di Runtime, pilih Node.js 10.

  5. Di Source code, pilih Inline Editor.

  6. Di Entry point, hapus teks default dan masukkan helloChat.

  7. Ganti konten index.js dengan kode berikut:

    node/avatar-app/index.js
    /**
     * 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 telah dipilih.

  2. Klik Create Function.

  3. Di halaman Create function, siapkan fungsi Anda:

    1. Di Function name, masukkan "QuickStartChatApp".
    2. Di Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.

      Untuk mengetahui informasi selengkapnya tentang autentikasi di Google Workspace, lihat Mengautentikasi serta mengizinkan aplikasi Chat dan permintaan API.

    4. Klik Simpan.

    5. Klik Next.

  4. Di Runtime, pilih Python 3.10.

  5. Di Source code, pilih Inline Editor.

  6. Di Entry point, hapus teks default dan masukkan hello_chat.

  7. Ganti konten main.py dengan kode berikut:

    {i>python/avatar-app/main.py<i}
    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 telah dipilih.

  2. Klik Create Function.

  3. Di halaman Create function, siapkan fungsi Anda:

    1. Di Function name, masukkan "QuickStartChatApp".
    2. Di Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.

      Untuk mengetahui informasi selengkapnya tentang autentikasi di Google Workspace, lihat Mengautentikasi serta mengizinkan aplikasi Chat dan permintaan API.

    4. Klik Simpan.

    5. Klik Next.

  4. Di Runtime, pilih Java 11.

  5. Di Source code, pilih Inline Editor.

  6. Di Entry point, hapus teks default dan 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
    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:

    {i>java/avatar-app/pom.xml<i}
    <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 Cloud Functions akan terbuka, dan fungsi Anda akan muncul dengan indikator progres deployment di samping nama fungsi. Saat indikator progres menghilang dan tanda centang muncul, fungsi Anda di-deploy.

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 > Cloud Functions.

    Buka Cloud Functions

    Pastikan project tempat Anda mengaktifkan Cloud Functions telah dipilih.

  2. Dalam daftar fungsi, klik QuickStartChatApp.

  3. Di halaman detail Fungsi, klik Pemicu.

  4. Di bagian URL Pemicu, salin URL.

  5. Cari "Google Chat API" dan klik Google Chat API, lalu klik Manage.

    Buka Chat API

  6. Klik Konfigurasi, lalu 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 bagian Functionality, pilih Receive 1:1 messages, Join workspace and group conversations, dan Log errors to Cloud Logging.
    5. Di bagian Connection settings, pilih App URL dan tempelkan URL untuk pemicu Cloud Function ke dalam kotak.
    6. Di bagian Permissions, pilih Specific people and groups in your domain dan masukkan alamat email Anda.
  7. Klik Simpan.

Aplikasi siap menerima dan menanggapi pesan di Google Chat.

Menguji aplikasi Chat Anda

Untuk menguji aplikasi Chat Anda, kirim pesan langsung ke aplikasi:

  1. Buka Google Chat.
  2. Untuk mengirim pesan langsung ke aplikasi, klik Mulai chat , dan di jendela yang muncul, klik Find apps.
  3. Dalam dialog Find apps, telusuri "Quickstart App".
  4. Untuk membuka pesan langsung dengan aplikasi, temukan Quickstart App, lalu klik Add > Chat.
  5. Di pesan langsung, ketik Hello, lalu tekan enter.

Aplikasi akan menampilkan kartu dengan nama tampilan dan gambar avatar Anda.

Memecahkan masalah error

Untuk memecahkan masalah dan men-debug aplikasi Chat Anda, lihat Memecahkan masalah dan memperbaiki error aplikasi Google Chat.

Untuk menambahkan fungsi lainnya ke aplikasi Chat Anda, lihat panduan berikut:

  • Membuat pesan kartu interaktif — Pesan kartu mendukung tata letak yang ditentukan, elemen UI interaktif seperti tombol, dan multimedia seperti gambar. Gunakan pesan kartu untuk menyajikan informasi mendetail, mengumpulkan informasi dari pengguna, dan memandu pengguna untuk mengambil langkah selanjutnya.
  • Mendukung perintah garis miring — Perintah garis miring memungkinkan Anda mendaftarkan dan memberitahukan perintah khusus yang dapat diberikan pengguna aplikasi dengan mengetik perintah yang dimulai dengan garis miring (/), seperti /help.
  • Meluncurkan dialog — Dialog adalah antarmuka berbasis kartu berjendela yang dapat dibuka aplikasi Anda untuk berinteraksi dengan pengguna. Beberapa kartu dapat dirangkai secara berurutan, sehingga membantu pengguna menyelesaikan proses multi-langkah, seperti mengisi data formulir.

Untuk mempelajari Google Chat API lebih lanjut, lihat dokumentasi referensi.