Trang này giải thích cách thêm các tiện ích và phần tử trên giao diện người dùng vào thẻ để người dùng có thể tương tác với ứng dụng Google Chat của bạn, chẳng hạn như bằng cách nhấp vào một nút hoặc gửi thông tin.
Các ứng dụng Chat có thể sử dụng những giao diện Chat sau đây để tạo thẻ tương tác:
- Tin nhắn có chứa một hoặc nhiều thẻ.
- Trang chủ, là thẻ xuất hiện trong thẻ Trang chủ trong tin nhắn trực tiếp với ứng dụng Chat.
- Hộp thoại là những thẻ mở ra trong một cửa sổ mới từ tin nhắn và trang chủ.
Khi người dùng tương tác với thẻ, các ứng dụng Chat có thể sử dụng dữ liệu mà chúng nhận được để xử lý và phản hồi cho phù hợp. Để biết thông tin chi tiết, hãy xem phần Thu thập và xử lý thông tin của người dùng Google Chat.
Sử dụng Trình tạo thẻ để thiết kế và xem trước giao diện người dùng và tin nhắn cho các ứng dụng Chat:
Mở Trình tạo thẻĐiều kiện tiên quyết
Một ứng dụng Google Chat được định cấu hình để nhận và phản hồi sự kiện tương tác. Để tạo một ứng dụng Chat có tính tương tác, hãy hoàn tất một trong các hướng dẫn nhanh sau đây dựa trên cấu trúc ứng dụng mà bạn muốn sử dụng:
- Dịch vụ HTTP bằng Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Thêm nút
Tiện ích ButtonList hiển thị một nhóm nút. Các nút có thể hiển thị văn bản, biểu tượng hoặc cả văn bản và biểu tượng. Mỗi Button đều hỗ trợ một thao tác OnClick xảy ra khi người dùng nhấp vào nút. Ví dụ:
- Mở một siêu liên kết bằng
OpenLinkđể cung cấp thêm thông tin cho người dùng. - Chạy một
actionchạy một hàm tuỳ chỉnh, chẳng hạn như gọi một API.
Để hỗ trợ tiếp cận, các nút hỗ trợ văn bản thay thế.
Thêm nút chạy một hàm tuỳ chỉnh
Sau đây là một thẻ bao gồm tiện ích ButtonList có 2 nút.
Một nút sẽ mở tài liệu dành cho nhà phát triển Google Chat trong một thẻ mới. Nút còn lại chạy một hàm tuỳ chỉnh có tên là goToView() và truyền tham số viewType="BIRD EYE VIEW".
Thêm một nút theo kiểu Material Design
Sau đây là một nhóm nút có nhiều kiểu nút Material Design.
Để áp dụng kiểu Material Design, đừng thêm thuộc tính "màu sắc".
Thêm nút có màu tuỳ chỉnh và nút không hoạt động
Bạn có thể ngăn người dùng nhấp vào một nút bằng cách đặt "disabled": "true".
Sau đây là một thẻ bao gồm một tiện ích ButtonList có 2 nút. Một nút sử dụng trường Color để tuỳ chỉnh màu nền của nút. Nút còn lại sẽ bị vô hiệu hoá bằng trường Disabled. Trường này ngăn người dùng nhấp vào nút và thực thi hàm.
Thêm nút có biểu tượng
Sau đây là một thẻ bao gồm một tiện ích ButtonList có 2 tiện ích Button biểu tượng. Một nút sử dụng trường knownIcon để hiển thị biểu tượng email tích hợp của Google Chat. Nút còn lại sử dụng trường iconUrl để hiển thị tiện ích biểu tượng tuỳ chỉnh.
Thêm một nút có biểu tượng và văn bản
Sau đây là một thẻ bao gồm tiện ích ButtonList, nhắc người dùng gửi email. Nút đầu tiên hiển thị biểu tượng email và nút thứ hai hiển thị văn bản. Người dùng có thể nhấp vào biểu tượng hoặc nút văn bản để chạy hàm sendEmail.
Tuỳ chỉnh nút cho một phần có thể thu gọn
Tuỳ chỉnh nút điều khiển thu gọn và mở rộng các phần trong thẻ. Chọn trong số nhiều biểu tượng hoặc hình ảnh để thể hiện nội dung của phần một cách trực quan, giúp người dùng dễ hiểu và tương tác với thông tin hơn.
Thêm trình đơn mục bổ sung
Bạn có thể dùng Overflow menu trong thẻ Chat để cung cấp các lựa chọn và hành động khác. Nhờ đó, bạn có thể thêm nhiều lựa chọn hơn mà không làm rối giao diện của thẻ, đảm bảo thiết kế gọn gàng và ngăn nắp.
Thêm danh sách Chip
Tiện ích ChipList cung cấp một cách linh hoạt và hấp dẫn về mặt hình ảnh để hiển thị thông tin.
Sử dụng danh sách các khối để thể hiện thẻ, danh mục hoặc dữ liệu liên quan khác, giúp người dùng dễ dàng điều hướng và tương tác với nội dung của bạn.
Thu thập thông tin từ người dùng
Phần này giải thích cách bạn có thể thêm các tiện ích thu thập thông tin, chẳng hạn như văn bản hoặc lựa chọn.
Để tìm hiểu cách xử lý thông tin người dùng nhập, hãy xem phần Thu thập và xử lý thông tin của người dùng Google Chat.
Thu thập văn bản
Tiện ích TextInput cung cấp một trường để người dùng có thể nhập văn bản. Tiện ích này hỗ trợ các đề xuất (giúp người dùng nhập dữ liệu đồng nhất) và các thao tác khi có thay đổi (là Actions chạy khi có thay đổi trong trường nhập văn bản, chẳng hạn như khi người dùng thêm hoặc xoá văn bản).
Khi cần thu thập dữ liệu trừu tượng hoặc không xác định từ người dùng, hãy sử dụng tiện ích TextInput này. Để thu thập dữ liệu đã xác định từ người dùng, hãy sử dụng tiện ích SelectionInput.
Sau đây là một thẻ bao gồm tiện ích TextInput:
Thu thập ngày hoặc giờ
Tiện ích DateTimePicker cho phép người dùng nhập ngày, giờ hoặc cả ngày và giờ. Hoặc người dùng có thể sử dụng bộ chọn để chọn ngày và giờ. Nếu người dùng nhập ngày hoặc giờ không hợp lệ, bộ chọn sẽ cho thấy một lỗi nhắc người dùng nhập thông tin chính xác.
Sau đây là một thẻ bao gồm 3 loại tiện ích DateTimePicker:
Cho phép người dùng chọn các mục
Tiện ích SelectionInput cung cấp một tập hợp các mục có thể chọn, chẳng hạn như hộp đánh dấu, nút chọn, công tắc hoặc trình đơn thả xuống. Bạn có thể sử dụng tiện ích này để thu thập dữ liệu đã xác định và được chuẩn hoá từ người dùng. Để thu thập dữ liệu không xác định từ người dùng, hãy sử dụng tiện ích TextInput.
Tiện ích SelectionInput hỗ trợ các đề xuất giúp người dùng nhập dữ liệu đồng nhất và các hành động khi có thay đổi. Đây là Actions chạy khi có thay đổi trong trường nhập lựa chọn, chẳng hạn như khi người dùng chọn hoặc bỏ chọn một mục.
Các ứng dụng trò chuyện có thể nhận và xử lý giá trị của các mục đã chọn. Để biết thông tin chi tiết về cách xử lý dữ liệu đầu vào của biểu mẫu, hãy xem phần Xử lý thông tin do người dùng nhập.
Phần này cung cấp ví dụ về các thẻ sử dụng tiện ích SelectionInput.
Các ví dụ này sử dụng nhiều loại dữ liệu đầu vào cho phần:
Thêm hộp đánh dấu
Sau đây là một thẻ yêu cầu người dùng chỉ định xem một người liên hệ là chuyên nghiệp, cá nhân hay cả hai, với một tiện ích SelectionInput sử dụng hộp đánh dấu:
Thêm nút chọn
Sau đây là một thẻ yêu cầu người dùng chỉ định xem một người liên hệ là chuyên nghiệp hay cá nhân bằng một tiện ích SelectionInput sử dụng các nút chọn:
Thêm một nút chuyển
Sau đây là một thẻ yêu cầu người dùng chỉ định xem một người liên hệ là chuyên nghiệp, cá nhân hay cả hai bằng một tiện ích SelectionInput sử dụng các công tắc:
Thêm trình đơn thả xuống
Sau đây là một thẻ yêu cầu người dùng chỉ định xem một số liên hệ là chuyên nghiệp hay cá nhân bằng một tiện ích SelectionInput sử dụng trình đơn thả xuống:
Thêm trình đơn nhiều lựa chọn
Sau đây là một thẻ yêu cầu người dùng chọn danh bạ trong một trình đơn chọn nhiều mục:
Bạn có thể điền các mục cho một trình đơn chọn nhiều mục từ các nguồn dữ liệu sau trong Google Workspace:
- Người dùng Google Workspace: Bạn chỉ có thể điền sẵn thông tin người dùng trong cùng một tổ chức Google Workspace.
- Không gian trò chuyện: Người dùng nhập các mục trong trình đơn chọn nhiều chỉ có thể xem và chọn những không gian mà họ thuộc về trong tổ chức Google Workspace của mình.
Để sử dụng nguồn dữ liệu Google Workspace, bạn chỉ định trường platformDataSource. Không giống như các loại dữ liệu đầu vào lựa chọn khác, bạn bỏ qua các đối tượng SelectionItem vì các mục lựa chọn này được lấy từ Google Workspace một cách linh hoạt.
Đoạn mã sau đây cho thấy một trình đơn chọn nhiều người dùng Google Workspace.
Để điền sẵn người dùng, chế độ cài đặt đầu vào lựa chọn sẽ đặt commonDataSource thành USER:
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"commonDataSource": "USER"
}
}
}
Đoạn mã sau đây cho thấy một trình đơn chọn nhiều mục của các không gian trò chuyện. Để điền vào các khoảng trống, đầu vào lựa chọn chỉ định trường hostAppDataSource. Trình đơn chọn nhiều mục cũng đặt defaultToCurrentSpace thành true, nhờ đó, không gian hiện tại sẽ là lựa chọn mặc định trong trình đơn:
JSON
{
"selectionInput": {
"name": "spaces",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"hostAppDataSource": {
"chatDataSource": {
"spaceDataSource": {
"defaultToCurrentSpace": true
}
}
}
}
}
}
Trình đơn chọn nhiều mục cũng có thể điền sẵn các mục từ nguồn dữ liệu bên ngoài hoặc bên thứ ba. Ví dụ: bạn có thể sử dụng trình đơn chọn nhiều mục để giúp người dùng chọn trong danh sách khách hàng tiềm năng từ hệ thống quản lý quan hệ khách hàng (CRM).
Để sử dụng nguồn dữ liệu bên ngoài, bạn dùng trường externalDataSource để chỉ định một hàm trả về các mục từ nguồn dữ liệu.
Để giảm số lượng yêu cầu gửi đến một nguồn dữ liệu bên ngoài, bạn có thể thêm các mục được đề xuất xuất hiện trong trình đơn chọn nhiều mục trước khi người dùng nhập vào trình đơn. Ví dụ: bạn có thể điền sẵn những người liên hệ mà người dùng đã tìm kiếm gần đây. Để điền sẵn các mục được đề xuất từ một nguồn dữ liệu bên ngoài, hãy chỉ định các đối tượng SelectionItem.
Đoạn mã sau đây cho thấy một trình đơn chọn nhiều mục gồm các mục từ một tập hợp danh bạ bên ngoài cho người dùng. Theo mặc định, trình đơn này sẽ hiển thị một số liên hệ và chạy hàm getContacts để truy xuất và điền các mục từ nguồn dữ liệu bên ngoài:
Node.js
Python
Java
Apps Script
Đối với các nguồn dữ liệu bên ngoài, bạn cũng có thể tự động hoàn thành những mục mà người dùng bắt đầu nhập trong trình đơn chọn nhiều. Ví dụ: nếu người dùng bắt đầu nhập Atl cho một trình đơn điền sẵn các thành phố ở Hoa Kỳ, thì ứng dụng Chat của bạn có thể tự động đề xuất Atlanta trước khi người dùng nhập xong. Bạn có thể tự động hoàn tất tối đa 100 mục.
Để tự động hoàn thành các mục, bạn tạo một hàm truy vấn nguồn dữ liệu bên ngoài và trả về các mục bất cứ khi nào người dùng nhập vào trình đơn chọn nhiều. Hàm phải thực hiện những việc sau:
- Truyền một đối tượng sự kiện đại diện cho hoạt động tương tác của người dùng với trình đơn.
- Xác định rằng giá trị
invokedFunctioncủa sự kiện tương tác khớp với hàm trong trườngexternalDataSource. - Khi các hàm khớp nhau, hãy trả về các mục được đề xuất từ nguồn dữ liệu bên ngoài. Để đề xuất các mục dựa trên nội dung mà người dùng nhập, hãy lấy giá trị cho khoá
autocomplete_widget_query. Giá trị này thể hiện nội dung mà người dùng nhập vào trình đơn.
Đoạn mã sau đây tự động hoàn thành các mục từ một tài nguyên dữ liệu bên ngoài. Sử dụng ví dụ trước, ứng dụng Chat sẽ đề xuất các mục dựa trên thời điểm hàm getContacts được kích hoạt:
Node.js
Python
Java
Apps Script
Xác thực dữ liệu được nhập vào thẻ
Trang này giải thích cách xác thực dữ liệu được nhập vào action và các tiện ích của thẻ.
Ví dụ: bạn có thể xác thực rằng một trường nhập văn bản có văn bản do người dùng nhập hoặc chứa một số lượng ký tự nhất định.
Đặt các tiện ích bắt buộc cho hành động
Trong action của thẻ, hãy thêm tên của những tiện ích mà một thao tác cần vào danh sách requiredWidgets.
Nếu bất kỳ tiện ích nào được liệt kê ở đây không có giá trị khi thao tác này được gọi, thì quá trình gửi thao tác biểu mẫu sẽ bị huỷ.
Khi "all_widgets_are_required": "true" được đặt cho một thao tác, thì tất cả các tiện ích trong thẻ đều phải có thao tác này.
Đặt thao tác all_widgets_are_required trong chế độ chọn nhiều
JSON
{
"sections": [
{
"header": "Select contacts",
"widgets": [
{
"selectionInput": {
"type": "MULTI_SELECT",
"label": "Selected contacts",
"name": "contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"onChangeAction": {
"all_widgets_are_required": true
},
"items": [
{
"value": "contact-1",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 1",
"bottomText": "Contact one description",
"selected": false
},
{
"value": "contact-2",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 2",
"bottomText": "Contact two description",
"selected": false
},
{
"value": "contact-3",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 3",
"bottomText": "Contact three description",
"selected": false
},
{
"value": "contact-4",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 4",
"bottomText": "Contact four description",
"selected": false
},
{
"value": "contact-5",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 5",
"bottomText": "Contact five description",
"selected": false
}
]
}
}
]
}
]
}
Đặt thao tác all_widgets_are_required trong dateTimePicker
JSON
{
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "A datetime picker widget with both date and time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_and_time",
"label": "meeting",
"type": "DATE_AND_TIME"
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just date:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_only",
"label": "Choose a date",
"type": "DATE_ONLY",
"onChangeAction":{
"all_widgets_are_required": true
}
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_time_only",
"label": "Select a time",
"type": "TIME_ONLY"
}
}
]
}
]
}
Đặt thao tác all_widgets_are_required trong trình đơn thả xuống
JSON
{
"sections": [
{
"header": "Section Header",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"selectionInput": {
"name": "location",
"label": "Select Color",
"type": "DROPDOWN",
"onChangeAction": {
"all_widgets_are_required": true
},
"items": [
{
"text": "Red",
"value": "red",
"selected": false
},
{
"text": "Green",
"value": "green",
"selected": false
},
{
"text": "White",
"value": "white",
"selected": false
},
{
"text": "Blue",
"value": "blue",
"selected": false
},
{
"text": "Black",
"value": "black",
"selected": false
}
]
}
}
]
}
]
}
Đặt quy trình xác thực cho tiện ích nhập văn bản
Trong trường xác thực của tiện ích textInput, bạn có thể chỉ định giới hạn ký tự và loại dữ liệu đầu vào cho tiện ích nhập văn bản này.
Đặt giới hạn ký tự cho tiện ích nhập văn bản
JSON
{
"sections": [
{
"header": "Tell us about yourself",
"collapsible": true,
"uncollapsibleWidgetsCount": 2,
"widgets": [
{
"textInput": {
"name": "favoriteColor",
"label": "Favorite color",
"type": "SINGLE_LINE",
"validation": {"character_limit":15},
"onChangeAction":{
"all_widgets_are_required": true
}
}
}
]
}
]
}
Đặt loại dữ liệu đầu vào cho một tiện ích nhập văn bản
JSON
{
"sections": [
{
"header": "Validate text inputs by input types",
"collapsible": true,
"uncollapsibleWidgetsCount": 2,
"widgets": [
{
"textInput": {
"name": "mailing_address",
"label": "Please enter a valid email address",
"type": "SINGLE_LINE",
"validation": {
"input_type": "EMAIL"
},
"onChangeAction": {
"all_widgets_are_required": true
}
}
},
{
"textInput": {
"name": "validate_integer",
"label": "Please enter a number",
"type": "SINGLE_LINE",
"validation": {
"input_type": "INTEGER"
}
}
},
{
"textInput": {
"name": "validate_float",
"label": "Please enter a number with a decimal",
"type": "SINGLE_LINE",
"validation": {
"input_type": "FLOAT"
}
}
}
]
}
]
}
Khắc phục sự cố
Khi một ứ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ị bất kỳ thông báo lỗi nào, nhưng ứng dụng hoặc thẻ Chat 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 xuất hiện trong giao diện người dùng Chat, nhưng bạn có thể sử dụng 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à khắc phục lỗi, hãy xem bài viết Khắc phục lỗi trong Google Chat.