Trang này được dịch bởi Cloud Translation API.

Xây dựng ứng dụng Google Chat bằng chức năng của Google Cloud

Trang này giải thích cách tạo và tương tác với các ứng dụng trong Google Chat bằng Hàm Google Cloud.

Để tạo ứng dụng, bạn phải viết và triển khai Chức năng đám mây mà ứng dụng dùng để xử lý phản hồi cho một sự kiện tin nhắn từ Google Chat. Phản hồi là một thẻ hiển thị tên và hình đại diện của người gửi, như minh họa trong hình ảnh sau:

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

Mục tiêu

Thiết lập môi trường.
Tạo và triển khai một Hàm đám mây.
Phát hành ứng dụng lên Google Chat.
Thử nghiệm ứng dụng.

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

Tài khoản Google Workspace có quyền truy cập vào Google Chat.
Dự án trên Google Cloud.
Hãy nhớ bật tính năng thanh toán cho dự án Cloud của bạn. Tìm hiểu cách xác minh trạng thái thanh toán của các dự án.

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

Trước khi sử dụng Google API, bạn cần bật các API đó trong dự á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 của Google Cloud, hãy bật API Google Chat, API Cloud Build, Cloud trùng API và Cloud Pub/Sub API.

Bật các API

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

Tạo và triển khai một Chức năng đám mây dùng để tạo thẻ Trò chuyện 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 hàm này cho ứng dụng Chat, hãy hoàn thành các bước sau:

Node.js

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

Chuyển đến trang Cloud Chức năng

Đảm bảo rằng bạn đã chọn dự án cho ứng dụng Chat của mình.
Nhấp vào Tạo hàm.
Trên trang Tạo hàm, hãy thiết lập hàm:
1. Trong Tên chức năng, hãy nhập "JAWSChatApp".
2. Trong Loại trình kích hoạt, hãy chọn HTTP.
3. Trong phần Xác thực, hãy chọn Cho phép lệnh gọi chưa được xác thực.
  
  Để biết thêm thông tin về việc xác thực trong Google Workspace, hãy xem phần Xác thực và ủy quyền ứng dụng Chat và yêu cầu API.
4. Nhấp vào Lưu.
5. Nhấp vào Tiếp theo.
Trong Thời gian chạy, hãy chọn Node.js 10.
Trong Mã nguồn, hãy chọn Trình chỉnh sửa cùng dòng.
Trong Điểm nhập, hãy xoá văn bản mặc định và nhập helloChat.

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

button/avatar-bot/index.js

Xem trên GitHub

/**
 * 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],
      }
    }],
  };
}

Nhấp vào Triển khai.

Python

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

Chuyển đến trang Cloud Chức năng

Đảm bảo rằng bạn đã chọn dự án cho ứng dụng Chat của mình.
Nhấp vào Tạo hàm.
Trên trang Tạo hàm, hãy thiết lập hàm:
1. Trong Tên chức năng, hãy nhập "JAWSChatApp".
2. Trong Loại trình kích hoạt, hãy chọn HTTP.
3. Trong phần Xác thực, hãy chọn Cho phép lệnh gọi chưa được xác thực.
  
  Để biết thêm thông tin về việc xác thực trong Google Workspace, hãy xem phần Xác thực và ủy quyền ứng dụng Chat và yêu cầu API.
4. Nhấp vào Lưu.
5. Nhấp vào Tiếp theo.
Trong Thời gian chạy, hãy chọn Python 3.10.
Trong Mã nguồn, hãy chọn Trình chỉnh sửa cùng dòng.
Trong Điểm nhập, hãy xoá văn bản mặc định và nhập hello_chat.

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

python/avatar-bot/main.py

Xem trên 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):
    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

Nhấp vào Triển khai.

Java

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

Chuyển đến trang Cloud Chức năng

Đảm bảo rằng bạn đã chọn dự án cho ứng dụng Chat của mình.
Nhấp vào Tạo hàm.
Trên trang Tạo hàm, hãy thiết lập hàm:
1. Trong Tên chức năng, hãy nhập "JAWSChatApp".
2. Trong Loại trình kích hoạt, hãy chọn HTTP.
3. Trong phần Xác thực, hãy chọn Cho phép lệnh gọi chưa được xác thực.
  
  Để biết thêm thông tin về việc xác thực trong Google Workspace, hãy xem phần Xác thực và ủy quyền yêu cầu API và ứng dụng Chat.
4. Nhấp vào Lưu.
5. Nhấp vào Tiếp theo.
Trong Thời gian chạy, hãy chọn Java 11.
Trong Mã nguồn, hãy chọn Trình chỉnh sửa cùng dòng.
Trong Điểm nhập, hãy xoá văn bản mặc định và nhập HelloChat.
Đổi tên src/main/java/com/example/Example.java thành src/main/java/HelloChat.java.

Thay thế nội dung của HelloChat.java bằng mã sau:

java/avatar-bot/src/main/java/HelloChat.Java

Xem trên 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.setCardsV2(List.of(cardWithId));

    return message;
  }
}

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

java/avatar-bot/pom.xml

Xem trên 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>

Nhấp vào Triển khai.

Trang Chức năng đám mây mở ra và hàm của bạn sẽ xuất hiện cùng với chỉ báo tiến trình triển khai bên cạnh tên hàm. Khi chỉ báo tiến trình biến mất và dấu kiểm xuất hiện, hàm của bạn sẽ được triển khai.

Phát hành ứng dụng lên Google Chat

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

Trong bảng điều khiển của Google Cloud, hãy nhấp vào biểu tượng Trình đơn > Chức năng đám mây.

Chuyển đến trang Tổng quan về chức năng đám mây

Đảm bảo rằng bạn đã chọn dự án mà bạn đã bật Cloud Functions.
Trong danh sách hàm, hãy nhấp vào NIGHTSChatApp.
Trên trang Chi tiết về hàm, hãy nhấp vào Trình kích hoạt.
Trong mục URL trình kích hoạt, hãy sao chép URL đó.
Tìm "API Google Chat" rồi nhấp vào API Google Chat.
Nhấp vào Quản lý.
Nhấp vào Cấu hình và thiết lập ứng dụng Google Chat:
1. Trong Tên ứng dụng, hãy nhập Quickstart App.
2. Trong mục URL hình đại diện, hãy nhập https://developers.google.com/chat/images/quickstart-app-avatar.png.
3. Trong Mô tả, nhập Quickstart app.
4. Trong phần Chức năng, chọn Nhận tin nhắn 1:1, Tham gia không gian và cuộc trò chuyện nhóm, và Ghi lại lỗi vào Cloud Logging.
5. Trong phần Cài đặt kết nối, hãy chọn URL ứng dụng và dán URL cho trình kích hoạt Chức năng đám mây vào hộp.
6. Trong phần Quyền, chọn Người và nhóm cụ thể trong miền của bạn rồi nhập địa chỉ email của bạn.
Nhấp vào Lưu.

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

Kiểm thử ứng dụng Chat

Để thử nghiệm ứng dụng Chat, hãy gửi tin nhắn trực tiếp cho ứng dụng:

Mở Google Chat.
Để gửi tin nhắn trực tiếp cho ứng dụng, hãy nhấp vào biểu tượng Bắt đầu trò chuyện và trong cửa sổ xuất hiện, hãy nhấp vào Tìm ứng dụng.
Trong hộp thoại Find apps (Tìm ứng dụng), hãy tìm "Quickstart App".
Để mở một tin nhắn trực tiếp với ứng dụng, hãy tìm Ứng dụng khởi động nhanh và nhấp vào Thêm > Trò chuyện.
Trong tin nhắn trực tiếp, hãy nhập Hello rồi nhấn enter.

Ứng dụng sẽ trả về một thẻ có tên hiển thị và ảnh đại diện của bạn.

Các bước tiếp theo

Để khắc phục sự cố và gỡ lỗi ứng dụng Chat, hãy tham khảo các trang sau:

Khi tạo ứng dụng nhắn tin, bạn có thể cần gỡ lỗi ứng dụng này bằng cách đọc nhật ký lỗi của ứng dụng. Để đọc nhật ký, hãy truy cập Trình khám phá nhật ký trong Bảng điều khiển Google Cloud.
Khắc phục sự cố.

Để thêm chức năng khác vào ứng dụng Chat, hãy tham khảo các hướng dẫn sau:

Tạo thẻ tương tác – Thông báo thẻ hỗ trợ một bố cục đã xác định, các phần tử giao diện người dùng tương tác như nút và nội dung đa phương tiện như hình ảnh. Sử dụng các thông báo thẻ để trình bày thông tin chi tiết, thu thập thông tin từ người dùng và hướng dẫn người dùng thực hiện bước tiếp theo.
Hỗ trợ lệnh dấu gạch chéo – Lệnh dấu gạch chéo sẽ cho phép bạn đăng ký và quảng cáo những lệnh cụ thể mà người dùng có thể cung cấp cho ứng dụng của bạn bằng cách nhập một lệnh bắt đầu bằng dấu gạch chéo lên (/), như /help.
Hộp thoại khởi chạy – Hộp thoại là các giao diện dựa trên thẻ, được chuyển sang cửa sổ mà ứng dụng của bạn có thể mở để tương tác với người dùng. Bạn có thể liên kết nhiều thẻ theo tuần tự với nhau, giúp người dùng hoàn tất các quy trình nhiều bước, chẳng hạn như điền dữ liệu vào biểu mẫu.

Để tìm hiểu thêm về API Google Chat, hãy xem tài liệu tham khảo.