Membangun aplikasi Google Chat HTTP dengan Cloud Functions

Halaman ini menjelaskan cara membuat aplikasi Chat HTTP. 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 akan menulis dan men-deploy Cloud Function yang digunakan aplikasi Chat untuk merespons pesan pengguna.

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

Arsitektur aplikasi Chat menggunakan layanan web di server lokal.

Dalam diagram sebelumnya, pengguna yang berinteraksi dengan aplikasi Chat HTTP memiliki alur informasi berikut:

  1. Pengguna mengirim pesan di Chat ke aplikasi Chat, baik dalam pesan langsung maupun di ruang Chat.
  2. Permintaan HTTP dikirim ke server web yang merupakan sistem lokal atau cloud yang berisi logika aplikasi Chat.
  3. Secara opsional, logika aplikasi Chat dapat berintegrasi dengan layanan Google Workspace (seperti Kalender dan Spreadsheet), layanan Google lainnya (seperti Maps, YouTube, dan Vertex AI), atau layanan web lainnya (seperti sistem pengelolaan project atau alat 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 operasi lainnya.

Arsitektur ini memberi Anda fleksibilitas untuk menggunakan library dan komponen yang ada di sistem Anda karena aplikasi Chat ini dapat didesain menggunakan bahasa pemrograman yang berbeda.

Tujuan

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

Prasyarat

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

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, Cloud Logging API, Artifact Registry API, dan Cloud Run API.

    Aktifkan API

Membuat dan men-deploy Cloud Function

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

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

  2. Klik Create Function.

  3. Pada halaman Buat fungsi, siapkan fungsi Anda:

    1. Di Environment, pilih 2nd gen.
    2. Di Function name, masukkan QuickStartChatApp.
    3. Di Region, pilih wilayah.
    4. Di bagian Authentication, pilih Allow unauthenticated invocations.
    5. Klik Next.
  4. Di Runtime, pilih Node.js 20.

  5. Di Source code, pilih Inline Editor.

  6. Di Titik entri, 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 sudah dipilih.

  2. Klik Create Function.

  3. Pada halaman Buat fungsi, siapkan fungsi Anda:

    1. Di Function name, masukkan QuickStartChatApp.
    2. Di Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.
    4. Klik Simpan.
    5. Klik Next.
  4. Di Runtime, pilih Python 3.10.

  5. Di Source code, pilih Inline Editor.

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

  7. Ganti konten main.py dengan kode berikut:

    python/avatar-app/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) -> 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 sudah dipilih.

  2. Klik Create Function.

  3. Pada halaman Buat fungsi, siapkan fungsi Anda:

    1. Di Function name, masukkan QuickStartChatApp.
    2. Di Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.
    4. Klik Simpan.
    5. Klik Next.
  4. Di Runtime, pilih Java 11.

  5. Di Source code, pilih Inline Editor.

  6. Di Titik entri, 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:

    java/avatar-app/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. Klik Deploy.

Halaman detail Cloud Functions akan terbuka, dan fungsi Anda akan muncul dengan dua indikator progres: satu untuk build dan satu untuk layanan. Saat kedua indikator progres menghilang dan diganti dengan tanda centang, berarti fungsi Anda telah di-deploy dan siap.

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 sudah dipilih.

  2. Dalam daftar fungsi, klik QuickStartChatApp.

  3. Di halaman detail Fungsi, klik Pemicu.

  4. Di bagian URL Pemicu, salin URL tersebut.

  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 dan Join spaces and group conversations.
    5. Di bagian Connection settings, pilih App URL dan tempelkan URL untuk pemicu Cloud Function ke dalam kotak.
    6. Di bagian Visibility, pilih Jadikan aplikasi Google Chat ini tersedia untuk orang dan grup tertentu di domain Anda, lalu masukkan alamat email Anda.
    7. 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, 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. Pada dialog Find apps, telusuri Quickstart App.
  4. Untuk membuka pesan langsung dengan aplikasi, temukan Aplikasi Quickstart, lalu klik Add > Chat.
  5. Di pesan langsung, ketik Hello, lalu tekan enter.

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

Memecahkan masalah error

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