Tạo ứng dụng Google Chat loại HTTP

Trang này giải thích cách tạo ứng dụng Chat qua HTTP. Có nhiều cách để triển khai cấu trúc này. Trên Google Cloud, bạn có thể sử dụng Cloud Functions, Cloud Run và App Engine. Trong hướng dẫn bắt đầu nhanh này, bạn sẽ viết và triển khai Chức năng đám mây mà ứng dụng Chat dùng để trả lời tin nhắn của người dùng.

Với cấu trúc này, bạn định cấu hình Chat để tích hợp với Google Cloud hoặc một máy chủ tại chỗ bằng cách sử dụng HTTP, như minh hoạ trong sơ đồ sau:

Cấu trúc của ứng dụng Chat sử dụng dịch vụ web trong máy chủ cục bộ.

Trong biểu đồ trước, người dùng tương tác với ứng dụng Chat qua HTTP có luồng thông tin sau:

  1. Người dùng gửi tin nhắn trong Chat đến một ứng dụng Chat, trong tin nhắn trực tiếp hoặc trong một không gian Chat.
  2. Yêu cầu HTTP được gửi đến một máy chủ web là hệ thống trên đám mây hoặc tại chỗ chứa logic ứng dụng Chat.
  3. Nếu muốn, logic của ứng dụng Chat có thể tích hợp với các dịch vụ của Google Workspace (như Lịch và Trang tính), các dịch vụ khác của Google (như Maps, YouTube và Vertex AI) hoặc các dịch vụ web khác (như hệ thống quản lý dự án hoặc công cụ bán vé).
  4. Máy chủ web gửi phản hồi HTTP trở lại dịch vụ ứng dụng Chat trong Chat.
  5. Nội dung phản hồi được gửi đến người dùng.
  6. Nếu muốn, ứng dụng Chat có thể gọi API Chat để đăng tin nhắn không đồng bộ hoặc thực hiện các thao tác khác.

Cấu trúc này cho phép bạn sử dụng linh hoạt các thư viện và thành phần hiện có trong hệ thống của mình vì các ứng dụng trong Chat này có thể được thiết kế bằng nhiều ngôn ngữ lập trình.

Mục tiêu

  • Thiết lập môi trường.
  • Tạo và triển khai Chức năng đám mây.
  • Phát hành ứng dụng lên Chat.
  • Kiểm tra ứng dụng.

Điều kiện tiên quyết

Thiết lập môi trường

Trước khi sử dụng các API của Google, bạn cần bật các API này trong một dự án trên Google Cloud. Bạn có thể bật một hoặc nhiều API trong một dự án Google Cloud.
  • Trong bảng điều khiển Google Cloud, hãy bật Google Chat API, Cloud Build API, Cloud Functions API, Cloud Pub/Sub API, Cloud Logging API, Artifact Registry API và Cloud Run API.

    Bật API

Tạo và triển khai Hàm đám mây

Tạo và triển khai Chức năng đám mây tạo thẻ Chat có tên hiển thị và hình đại diện của người gửi. Khi nhận được một tin nhắn, ứng dụng Chat sẽ chạy hàm này và phản hồi bằng thẻ.

Để tạo và triển khai chức năng này cho ứng dụng Chat, hãy hoàn tất các bước sau:

Node.js

  1. Trong bảng điều khiển Google Cloud, hãy truy cập vào trang Cloud Functions:

    Chuyển đến Cloud Functions

    Đảm bảo bạn đã chọn dự án cho ứng dụng Chat.

  2. Nhấp vào Create Function (Tạo hàm).

  3. Trên trang Tạo hàm, hãy thiết lập hàm:

    1. Trong Environment (Môi trường), hãy chọn Cloud Run Function (Hàm Cloud Run).
    2. Trong Function name (Tên hàm), hãy nhập QuickStartChatApp.
    3. Trong phần Khu vực, hãy chọn một khu vực.
    4. Trong phần Xác thực, hãy chọn Yêu cầu xác thực.
    5. Nhấp vào Tiếp theo.
  4. Trong Thời gian chạy, hãy chọn phiên bản mới nhất của Node.js.

  5. Trong Source code (Mã nguồn), hãy chọn Inline Editor (Trình chỉnh sửa cùng dòng).

  6. Trong Điểm truy cập, hãy xoá văn bản mặc định rồi nhập avatarApp.

  7. Thay thế nội dung của index.js bằng mã sau:

    node/avatar-app/index.js
    // The ID of the slash command "/about".
    // It's not enabled by default, set to the actual ID to enable it. You need to
    // use the same ID as set in the Google Chat API configuration.
    const ABOUT_COMMAND_ID = "";
    
    /**
     * Google Cloud Function that responds to messages sent from a
     * Google Chat space.
     *
     * @param {Object} req Request sent from Google Chat space
     * @param {Object} res Response to send back
     */
    exports.avatarApp = function avatarApp(req, res) {
      if (req.method === 'GET' || !req.body.message) {
        return res.send('Hello! This function is meant to be used ' +
          'in a Google Chat Space.');
      }
    
      // Stores the Google Chat event as a variable.
      const event = req.body;
    
      // Checks for the presence of a slash command in the message.
      if (event.message.slashCommand) {
        // Executes the slash command logic based on its ID.
        // Slash command IDs are set in the Google Chat API configuration.
        switch (event.message.slashCommand.commandId) {
          case ABOUT_COMMAND_ID:
            return res.send({
              privateMessageViewer: event.user,
              text: 'The Avatar app replies to Google Chat messages.'
            });
        }
      }
    
      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} avatarUrl the URL for the sender's avatar
     * @return {Object} a card with the user's avatar.
     */
    function createMessage(displayName, avatarUrl) {
      return {
        text: 'Here\'s your avatar',
        cardsV2: [{
          cardId: 'avatarCard',
          card: {
            name: 'Avatar Card',
            header: {
              title: `Hello ${displayName}!`,
            },
            sections: [{ widgets: [{
              textParagraph: { text: 'Your avatar picture: ' }
            }, {
              image: { imageUrl: avatarUrl }
            }]}]
          }
        }]
      };
    }

  8. Nhấp vào Triển khai.

Python

  1. Trong bảng điều khiển Google Cloud, hãy truy cập vào trang Cloud Functions:

    Chuyển đến Cloud Functions

    Hãy đảm bảo bạn đã chọn dự án dành cho ứng dụng Chat.

  2. Nhấp vào Create Function (Tạo hàm).

  3. Trên trang Tạo hàm, hãy thiết lập hàm:

    1. Trong Environment (Môi trường), hãy chọn Cloud Run Function (Hàm Cloud Run).
    2. Trong Function name (Tên hàm), hãy nhập QuickStartChatApp.
    3. Trong phần Khu vực, hãy chọn một khu vực.
    4. Trong phần Xác thực, hãy chọn Yêu cầu xác thực.
    5. Nhấp vào Tiếp theo.
  4. Trong phần Thời gian chạy, hãy chọn phiên bản Python mới nhất.

  5. Trong Mã nguồn, chọn Trình chỉnh sửa cùng dòng.

  6. Trong Điểm truy cập, hãy xoá văn bản mặc định rồi nhập avatar_app.

  7. Thay thế nội dung của main.py bằng đoạn mã sau:

    python/avatar-app/main.py
    from typing import Any, Mapping
    
    import flask
    import functions_framework
    
    # The ID of the slash command "/about".
    # It's not enabled by default, set to the actual ID to enable it. You need to
    # use the same ID as set in the Google Chat API configuration.
    ABOUT_COMMAND_ID = ""
    
    @functions_framework.http
    def avatar_app(req: flask.Request) -> Mapping[str, Any]:
      """Google Cloud Function that handles requests from Google Chat
    
      Args:
          flask.Request: the request
    
      Returns:
          Mapping[str, Any]: the response
      """
      if req.method == "GET":
        return "Hello! This function must be called from Google Chat."
    
      request_json = req.get_json(silent=True)
    
      # Checks for the presence of a slash command in the message.
      if "slashCommand" in request_json["message"]:
        # Executes the slash command logic based on its ID.
        # Slash command IDs are set in the Google Chat API configuration.
        if request_json["message"]["slashCommand"]["commandId"] == ABOUT_COMMAND_ID:
          return {
            "privateMessageViewer": request_json["user"],
            "text": 'The Avatar app replies to Google Chat messages.'
          }
    
      display_name = request_json["message"]["sender"]["displayName"]
      avatar = request_json["message"]["sender"]["avatarUrl"]
      response = create_message(name=display_name, image_url=avatar)
      return response
    
    
    def create_message(name: str, image_url: str) -> Mapping[str, Any]:
      """Google Cloud Function that handles requests from Google Chat
    
      Args:
          str name: the sender's display name.
          str image_url: the URL for the sender's avatar.
    
      Returns:
          Mapping[str, Any]: a card with the user's avatar.
      """
      return {
        "text": "Here's your avatar",
        "cardsV2": [{
          "cardId": "avatarCard",
          "card": {
              "name": "Avatar Card",
              "header": { "title": f"Hello {name}!" },
              "sections": [{
                "widgets": [{
                  "textParagraph": { "text": "Your avatar picture:" }
                }, {
                  "image": { "imageUrl": image_url }
                }]
              }]
          }
        }]
      }

  8. Nhấp vào Triển khai.

Java

  1. Trong bảng điều khiển Google Cloud, hãy truy cập vào trang Cloud Functions:

    Chuyển đến Cloud Functions

    Đảm bảo bạn đã chọn dự án cho ứng dụng Chat.

  2. Nhấp vào Create Function (Tạo hàm).

  3. Trên trang Tạo hàm, hãy thiết lập hàm:

    1. Trong Environment (Môi trường), hãy chọn Cloud Run Function (Hàm Cloud Run).
    2. Trong Function name (Tên hàm), hãy nhập QuickStartChatApp.
    3. Trong phần Khu vực, hãy chọn một khu vực.
    4. Trong phần Xác thực, hãy chọn Yêu cầu xác thực.
    5. Nhấp vào Tiếp theo.
  4. Trong Thời gian chạy, hãy chọn phiên bản Java mới nhất.

  5. Trong Source code (Mã nguồn), hãy chọn Inline Editor (Trình chỉnh sửa cùng dòng).

  6. Trong Điểm truy cập, hãy xoá văn bản mặc định rồi nhập App.

  7. Đổi tên src/main/java/com/example/Example.java thành src/main/java/App.java.

  8. Thay thế nội dung của App.java bằng đoạn mã sau:

    java/avatar-app/src/main/java/App.java
    import java.util.List;
    
    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.api.services.chat.v1.model.User;
    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;
    
    public class App implements HttpFunction {
      private static final Gson gson = new Gson();
    
      // The ID of the slash command "/about".
      // It's not enabled by default, set to the actual ID to enable it. You need to
      // use the same ID as set in the Google Chat API configuration.
      private static final String ABOUT_COMMAND_ID = "";
    
      @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;
        }
    
        // Checks for the presence of a slash command in the message.
        if (body.getAsJsonObject("message").has("slashCommand")) {
          // Executes the slash command logic based on its ID.
          // Slash command IDs are set in the Google Chat API configuration.
          JsonObject slashCommand = body.getAsJsonObject("message").getAsJsonObject("slashCommand");
          switch (slashCommand.get("commandId").getAsString()) {
            case ABOUT_COMMAND_ID:
              Message aboutMessage = new Message();
              aboutMessage.setText("The Avatar app replies to Google Chat messages.");
              aboutMessage.setPrivateMessageViewer(new User()
                .setName(body.getAsJsonObject("user").get("name").getAsString()));
              response.getWriter().write(gson.toJson(aboutMessage));
              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) {
        return new Message()
          .setText("Here's your avatar")
          .setCardsV2(List.of(new CardWithId()
            .setCardId("previewLink")
            .setCard(new GoogleAppsCardV1Card()
              .setName("Avatar Card")
              .setHeader(new GoogleAppsCardV1CardHeader()
                .setTitle(String.format("Hello %s!", displayName)))
              .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(
                new GoogleAppsCardV1Widget()
                  .setTextParagraph(new GoogleAppsCardV1TextParagraph()
                    .setText("Your avatar picture: ")),
                new GoogleAppsCardV1Widget()
                  .setImage(new GoogleAppsCardV1Image().setImageUrl(avatarUrl)))))))));
      }
    }

  9. Thay thế nội dung của pom.xml bằng đoạn mã sau:

    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>com.google.chat</groupId>
      <artifactId>avatar-app</artifactId>
      <version>1.0-SNAPSHOT</version>
    
      <properties>
        <maven.compiler.target>17</maven.compiler.target>
        <maven.compiler.source>17</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-rev20241008-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. Nhấp vào Triển khai.

Trang chi tiết về Chức năng trên đám mây sẽ mở ra và hàm của bạn sẽ xuất hiện cùng với hai chỉ báo tiến trình: một chỉ báo cho bản dựng và một chỉ báo cho dịch vụ. Khi cả hai chỉ báo tiến trình biến mất và được thay thế bằng một dấu kiểm, chức năng của bạn sẽ được triển khai và sẵn sàng.

Uỷ quyền cho Google Chat gọi hàm của bạn

Để Uỷ quyền cho Google Chat gọi hàm của bạn, hãy thêm tài khoản dịch vụ Google Chat với vai trò Trình gọi Cloud Run.

  1. Trong bảng điều khiển Google Cloud, hãy truy cập vào trang Cloud Run:

    Chuyển đến Cloud Run

  2. Trong danh sách dịch vụ Cloud Run, hãy chọn hộp đánh dấu bên cạnh hàm nhận. (Đừng nhấp vào chính hàm đó.)

  3. Nhấp vào Quyền. Bảng điều khiển Quyền sẽ mở ra.

  4. Nhấp vào Thêm người chính.

  5. Trong phần New principals (Tài khoản chính mới), hãy nhập chat@system.gserviceaccount.com.

  6. Trong mục Select a role (Chọn vai trò), hãy chọn Cloud Run > Cloud Run Invoker (Chọn vai trò).

  7. Nhấp vào Lưu.

Xuất bản ứng dụng lên Google Chat

Sau khi triển khai Hàm đám mây, hãy làm theo các bước sau để chuyển hàm này thành ứng dụng Google Chat:

  1. Trong bảng điều khiển Google Cloud, hãy nhấp vào biểu tượng Trình đơn > Hàm trên đám mây.

    Chuyển đến Cloud Functions

    Hãy đảm bảo rằng bạn đã chọn dự án mà bạn đã bật Cloud Functions.

  2. Trong danh sách chức năng, hãy nhấp vào QuickStartChatApp.

  3. Nhấp vào thẻ Điều kiện kích hoạt.

  4. Trong phần HTTPS, hãy sao chép URL.

  5. Tìm "API Google Chat" rồi nhấp vào API Google Chat, rồi nhấp vào Quản lý.

    Chuyển đến Chat API

  6. Nhấp vào Cấu hình rồi thiết lập ứng dụng Google Chat:

    1. Trong App name (Tên ứng dụng), hãy nhập Quickstart App.
    2. Trong URL hình đại diện, hãy nhập https://developers.google.com/chat/images/quickstart-app-avatar.png.
    3. Trong phần Description (Nội dung mô tả), hãy nhập Quickstart app.
    4. Trong phần Chức năng, hãy chọn Nhận tin nhắn 1:1Tham gia không gian và cuộc trò chuyện nhóm.
    5. Trong phần Cài đặt kết nối, hãy chọn URL điểm cuối HTTP rồi dán URL cho trình kích hoạt Hàm trên đám mây vào hộp.
    6. Trong mục Đối tượng xác thực, hãy chọn URL điểm cuối HTTP.
    7. Trong phần Chế độ hiển thị, hãy chọn Cung cấp ứng dụng Google Chat này cho những người và nhóm cụ thể trong miền rồi nhập địa chỉ email của bạn.
    8. Trong mục Nhật ký, hãy chọn Ghi lỗi vào nhật ký.
  7. Nhấp vào Lưu.

Ứng dụng Chat đã sẵn sàng nhận và trả lời tin nhắn trên Chat.

Kiểm thử ứng dụng Chat

Để kiểm thử ứng dụng Chat, hãy mở một không gian tin nhắn trực tiếp bằng ứng dụng Chat và gửi tin nhắn:

  1. Mở Google Chat bằng tài khoản Google Workspace mà bạn đã cung cấp khi thêm chính mình làm người kiểm thử đáng tin cậy.

    Truy cập Google Chat

  2. Nhấp vào Cuộc trò chuyện mới.
  3. Trong trường Thêm 1 hoặc nhiều người, hãy nhập tên ứng dụng của bạn trong Chat.
  4. Chọn ứng dụng Chat của bạn trong kết quả. Một tin nhắn trực tiếp sẽ mở ra.

  5. Trong tin nhắn trực tiếp mới với ứng dụng, hãy nhập Hello rồi nhấn enter.

Phản hồi của ứng dụng Chat có chứa thông báo thẻ cho thấy tên và hình đại diện của người gửi, như minh hoạ trong hình sau:

Ứng dụng Chat phản hồi bằng một thẻ có tên hiển thị và hình ảnh đại diện của người gửi

Để thêm người kiểm thử đáng tin cậy và tìm hiểu thêm về cách kiểm thử các tính năng tương tác, hãy xem phần Kiểm thử các tính năng tương tác cho ứng dụng Google Chat.

Khắc phục sự cố

Khi ứng dụng Google Chat hoặc thẻ trả về lỗi, giao diện Chat sẽ hiển thị thông báo "Đã xảy ra lỗi". hoặc "Không thể xử lý yêu cầu của bạn". Đôi khi, giao diện người dùng Chat không hiển thị thông báo lỗi nào, nhưng ứng dụng Chat hoặc thẻ lại tạo ra kết quả không mong muốn; ví dụ: thông báo thẻ có thể không xuất hiện.

Mặc dù thông báo lỗi có thể không hiển thị trong giao diện người dùng Chat, nhưng bạn có thể xem thông báo lỗi mô tả và dữ liệu nhật ký để khắc phục lỗi khi bật tính năng ghi nhật ký lỗi cho ứng dụng Chat. Để được trợ giúp xem, gỡ lỗi và sửa lỗi, hãy xem bài viết Khắc phục sự cố và sửa lỗi Google Chat.

Dọn dẹp

Để tránh bị tính phí vào tài khoản Google Cloud cho những tài nguyên dùng trong hướng dẫn này, bạn nên xoá dự án Google Cloud đó.

  1. Trong Google Cloud Console, hãy chuyển đến trang Quản lý tài nguyên. Nhấp vào biểu tượng Trình đơn > IAM và quản trị > Quản lý tài nguyên.

    Chuyển đến Trình quản lý tài nguyên

  2. Trong danh sách dự án, hãy chọn dự án bạn muốn xoá rồi nhấp vào biểu tượng Xoá .
  3. Trong hộp thoại, hãy nhập mã dự án rồi nhấp vào Shut down (Tắt) để xoá dự án.