Membuat aplikasi Chat dengan Google Cloud Functions

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

Untuk membuat aplikasi, tulis dan deploy Cloud Function yang digunakan aplikasi untuk memproses respons terhadap peristiwa pesan dari Google Chat. Responsnya adalah kartu yang menampilkan nama pengirim dan gambar avatar, seperti yang ditunjukkan pada gambar berikut:

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

Tujuan

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

Prasyarat

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 Google Cloud Console, aktifkan Google Chat API, Cloud Build API, Cloud Functions API, dan Cloud Pub/Sub 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, selesaikan langkah-langkah berikut:

Node.js

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

    Buka Cloud Functions

    Pastikan project untuk aplikasi Chat Anda dipilih.

  2. Klik Create Function.

  3. Di halaman Buat fungsi, siapkan fungsi Anda:

    1. Di bagian Nama fungsi, masukkan "QuickStartChatApp".
    2. Pada Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.

      Untuk informasi selengkapnya tentang autentikasi di Google Workspace, lihat Mengautentikasi dan memberi otorisasi aplikasi Chat dan permintaan API.

    4. Klik Simpan.

    5. Klik Next.

  4. Di Runtime, pilih Node.js 10.

  5. Pada 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-bot/index.js
    /**
     * 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. Klik Deploy.

Python

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

    Buka Cloud Functions

    Pastikan project untuk aplikasi Chat Anda dipilih.

  2. Klik Create Function.

  3. Di halaman Buat fungsi, siapkan fungsi Anda:

    1. Di bagian Nama fungsi, masukkan "QuickStartChatApp".
    2. Pada Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.

      Untuk informasi selengkapnya tentang autentikasi di Google Workspace, lihat Mengautentikasi dan memberi otorisasi aplikasi Chat dan permintaan API.

    4. Klik Simpan.

    5. Klik Next.

  4. Di Runtime, pilih Python 3.10.

  5. Pada 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-bot/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 = {
          "cardsV2": [
              {
                  "cardId": "avatarCard",
                  "card": {
                      "name": "Avatar Card",
                      "header": header,
                      "sections": [avatar_section],
                  },
              }
          ]
      }
    
      return cards
    
    

  8. Klik Deploy.

Java

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

    Buka Cloud Functions

    Pastikan project untuk aplikasi Chat Anda dipilih.

  2. Klik Create Function.

  3. Di halaman Buat fungsi, siapkan fungsi Anda:

    1. Di bagian Nama fungsi, masukkan "QuickStartChatApp".
    2. Pada Jenis pemicu, pilih HTTP.
    3. Di bagian Authentication, pilih Allow unauthenticated invocations.

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

    4. Klik Simpan.

    5. Klik Next.

  4. Di Runtime, pilih Java 11.

  5. Pada 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-bot/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.setCardsV2(List.of(cardWithId));
    
        return message;
      }
    }

  9. Ganti konten pom.xml dengan kode berikut:

    java/avatar-bot/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 Cloud Functions akan terbuka dan fungsi Anda muncul dengan indikator progres deployment di samping nama fungsi. Saat indikator progres hilang dan tanda centang muncul, fungsi Anda akan di-deploy.

Memublikasikan aplikasi ke Google Chat

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

  1. Di Google Cloud Console, klik Menu > Cloud Functions.

    Buka Cloud Functions

    Pastikan project tempat Anda mengaktifkan Cloud Functions dipilih.

  2. Dalam daftar fungsi, klik QuickStartChatApp.

  3. Di halaman detail Fungsi, klik Pemicu.

  4. Di bagian URL Pemicu, salin URL-nya.

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

  6. Klik Manage.

  7. Klik Konfigurasi, lalu siapkan aplikasi Google Chat:

    1. Di bagian Nama aplikasi, masukkan Quickstart App.
    2. Di URL Avatar, masukkan https://developers.google.com/chat/images/quickstart-app-avatar.png.
    3. Di Description, masukkan Quickstart app.
    4. Pada bagian Fungsi, pilih Terima pesan 1:1, Gabung ke ruang dan percakapan grup, lalu Catat error ke Cloud Logging.
    5. Di bagian Connection settings, pilih App URL, lalu tempelkan URL untuk pemicu Cloud Function ke dalam kotak.
    6. Pada Izin, pilih Orang dan grup tertentu di domain Anda, lalu masukkan alamat email.
  8. Klik Simpan.

Aplikasi siap menerima dan merespons pesan di Google Chat.

Menguji aplikasi Chat

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 Temukan aplikasi.
  3. Pada dialog Find apps, telusuri "Quickstart App".
  4. Untuk membuka pesan langsung dengan aplikasi, temukan Aplikasi Panduan Memulai dan klik Tambahkan > Chat.
  5. Dalam pesan langsung, ketik Hello dan tekan enter.

Aplikasi menampilkan kartu dengan nama tampilan dan gambar avatar Anda.

Langkah berikutnya

Untuk memecahkan masalah dan men-debug aplikasi Chat, lihat halaman berikut:

  • Saat membuat aplikasi Chat, Anda mungkin perlu melakukan debug dengan membaca log error aplikasi. Untuk membaca log, di Google Cloud Console, buka Logs Explorer.
  • Pemecahan masalah.

Untuk menambahkan lebih banyak fungsi ke aplikasi Chat, lihat panduan berikut:

  • Membuat 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 melakukan langkah berikutnya.
  • Perintah garis miring dukungan — Perintah garis miring memungkinkan Anda mendaftarkan dan mengiklankan perintah tertentu yang dapat diberikan pengguna kepada aplikasi dengan mengetik perintah yang diawali dengan garis miring (/), seperti /help.
  • Dialog peluncuran — Dialog adalah antarmuka berbasis kartu yang dapat dibuka aplikasi Anda untuk berinteraksi dengan pengguna. Beberapa kartu dapat dirangkai secara berurutan, yang membantu pengguna menyelesaikan proses multi-langkah, seperti mengisi data formulir.

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