Tạo thẻ cho các ứng dụng trong Google Chat

Trang này mô tả cách tạo các thành phần và cấu trúc của một thẻ. Thẻ là giao diện người dùng mà các ứng dụng Google Chat có thể dùng để trình bày và thu thập thông tin từ người dùng Chat. Các ứng dụng trò chuyện có thể tạo và hiển thị thẻ trong các giao diện sau:

  • 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ủ.

Trong trang này, bạn sẽ tìm hiểu về các thành phần sau đây của thẻ:

  • Tiêu đề, thường chứa tiêu đề của một thẻ hoặc phần thẻ.
  • Các phần tạo thành phần nội dung chính của thẻ, bao gồm cả các tiện ích và phần tử tương tác khác. Trong một phần thẻ, bạn có thể thêm cấu trúc cho thẻ, bao gồm cả cột và lưới.
  • Phần chân trang cố định xuất hiện ở cuối hộp thoại để hiển thị các phần tử giao diện người dùng cố định, chẳng hạn như nút.

Đ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:

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ẻ

Thêm tiêu đề

Tiện ích CardHeader đại diện cho tiêu đề của một thẻ. Tiêu đề có thể bao gồm tiêu đề, tiêu đề phụ và hình đại diện cho thẻ của bạn.

Sau đây là một ví dụ về CardHeader:

Thêm một hoặc nhiều phần thẻ

Tiện ích CardSection là một vùng chứa cấp cao trong thẻ. Bạn dùng các phần thẻ để nhóm các tiện ích trong một thẻ. Đối với mỗi phần thẻ, bạn có thể thêm một tiêu đề và một hoặc nhiều tiện ích.

Sau đây là ví dụ về một CardSection chứa 2 tiện ích textParagraph:

Thêm đường phân chia ngang giữa các tiện ích

Tiện ích divider hiển thị một đường kẻ ngang trải dài theo chiều rộng của thẻ giữa các tiện ích xếp chồng theo chiều dọc. Đường kẻ là một đường phân chia trực quan giúp người dùng phân biệt giữa các tiện ích, giúp họ dễ dàng quét và hiểu các thẻ hơn.

Sau đây là một thẻ bao gồm tiện ích divider giữa các loại tiện ích khác:

Thêm cột

Tiện ích columns hiển thị tối đa 2 cột trong một thẻ. Bạn có thể thêm các tiện ích vào từng cột; các tiện ích sẽ xuất hiện theo thứ tự mà bạn chỉ định. Để thêm nhiều hơn 2 cột hoặc sử dụng hàng, hãy dùng tiện ích grid.

Chiều cao của mỗi cột được xác định bằng cột cao hơn. Ví dụ: nếu cột đầu tiên cao hơn cột thứ hai, thì cả hai cột đều có chiều cao bằng cột đầu tiên. Vì mỗi cột có thể chứa một số lượng tiện ích khác nhau, nên bạn không thể xác định các hàng hoặc căn chỉnh các tiện ích giữa các cột.

Ví dụ sau đây minh hoạ một thẻ có tiện ích columns có 2 cột văn bản. Để chỉ xem bố cục cột và thu gọn mẫu mã, hãy nhấp vào Thu gọn. Khi không gian bị hạn chế, chẳng hạn như trong ví dụ sau, cột thứ hai sẽ xuống dòng bên dưới cột đầu tiên.

Xác định chiều rộng cột

Các cột được hiển thị cạnh nhau. Bạn có thể tuỳ chỉnh chiều rộng của từng cột bằng cách sử dụng trường horizontalSizeStyle. Nếu chiều rộng màn hình của người dùng quá hẹp, cột thứ hai sẽ nằm bên dưới cột thứ nhất:

  • Trên web, cột thứ hai sẽ xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 480 pixel.
  • Trên thiết bị iOS, cột thứ hai sẽ xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 300 pt.
  • Trên thiết bị Android, cột thứ hai sẽ xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 320 dp.

Ví dụ sau đây minh hoạ một thẻ có tiện ích columns có 2 cột văn bản với 4 mục trong các cột. Mỗi mục trong các cột đều có horizontalSizeStyle được áp dụng để điều chỉnh lượng không gian mà văn bản chiếm trong mỗi cột:

  • Đoạn văn bản đầu tiên sử dụng FILL_MINIMUM_SPACE để lấp đầy không quá 30% chiều rộng của thẻ.
  • Đoạn văn bản thứ hai sử dụng FILL_AVAILABLE_SPACE để lấp đầy khoảng trống có sẵn trong chiều rộng của thẻ. Trong ví dụ này, nó chiếm 70% chiều rộng của thẻ.
  • Đoạn văn bản thứ ba không xác định horizontalSizeStyle nên theo mặc định, đoạn văn bản này sẽ lấp đầy không gian có sẵn của không gian thẻ.
  • Đoạn văn bản thứ tư sử dụng FILL_MINIMUM_SPACE để lấp đầy không quá 30% chiều rộng của thẻ.

Xác định chế độ căn chỉnh ngang của một cột

Bạn có thể căn chỉnh các tiện ích theo chiều ngang sang trái, phải hoặc giữa của một cột bằng cách xác định trường horizontalAligment. Nếu trường horizontalAlignment không xác định, các tiện ích sẽ được căn trái trong một cột.

Ví dụ sau đây căn chỉnh văn bản theo chiều ngang trong một cột ở bên trái:

Ví dụ sau đây căn chỉnh văn bản theo chiều ngang trong một cột ở giữa:

Ví dụ sau đây căn chỉnh văn bản theo chiều ngang trong một cột sang bên phải:

Xác định chế độ căn chỉnh dọc của một cột

Bạn có thể căn chỉnh các tiện ích theo chiều dọc ở trên cùng, dưới cùng hoặc ở giữa một cột bằng cách xác định trường verticalAlignment. Nếu trường verticalAlignment không được xác định, các tiện ích trong một cột sẽ được căn chỉnh lên trên cùng.

Ví dụ sau đây căn chỉnh văn bản theo chiều dọc trong một cột lên trên cùng:

Ví dụ sau đây căn chỉnh văn bản theo chiều dọc trong một cột ở giữa:

Ví dụ sau đây căn chỉnh văn bản theo chiều dọc trong một cột ở dưới cùng:

Thêm một lưới để hiển thị một bộ sưu tập các mục

Tiện ích grid hiển thị một lưới có một bộ sưu tập các mục. Lưới hỗ trợ số lượng cột và mục bất kỳ. Số hàng được xác định bằng số lượng mục chia cho số cột. Lưới có 10 mục và 2 cột sẽ có 5 hàng. Một lưới có 11 mục và 2 cột sẽ có 6 hàng.

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. Đây 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.

Ví dụ sau đây là một lưới gồm 2 cột có một mục duy nhất:

Để xác định vị trí xuất hiện của văn bản cùng với hình ảnh trong một lưới, bạn có thể chỉ định trường gridItemLayout. Trường này cho phép bạn xác định xem văn bản xuất hiện phía trên hay phía dưới mục trong lưới. Nếu gridItemLayout không được xác định, thì theo mặc định, văn bản sẽ xuất hiện bên dưới mục trong lưới.

Ví dụ sau đây là một lưới gồm 3 cột có văn bản và hình ảnh trong mỗi lưới. Lưới đầu tiên xác định văn bản sẽ xuất hiện phía trên hình ảnh, lưới thứ hai xác định văn bản sẽ xuất hiện bên dưới hình ảnh và lưới thứ ba không xác định vị trí của văn bản.

Thêm đường viền vào lưới hoặc cột

Đối với những mục xuất hiện trong tiện ích column hoặc grid, bạn có thể thêm đường viền vào các phần tử giao diện người dùng này bằng cách xác định trường borderType và trường borderStyle. Nếu không có trường borderStyle nào được xác định, thì theo mặc định, trường này sẽ không hiển thị đường viền. Bạn có thể xác định một borderType để áp dụng cho tất cả các mục trong một tiện ích hoặc áp dụng kiểu cho từng mục riêng lẻ trong một tiện ích.

Ví dụ sau đây là một lưới gồm 2 cột, mỗi lưới có một hình ảnh, trong đó loại, kiểu và màu đường viền đã được xác định để áp dụng cho tất cả các mục trong lưới.

Ví dụ sau đây là một lưới gồm 3 cột, mỗi lưới có một hình ảnh và kiểu cũng như loại đường viền được xác định riêng. Hình ảnh đầu tiên có đường viền được xác định là STROKE. Hình ảnh thứ hai có đường viền được xác định là NO_BORDER. Hình ảnh thứ ba không có đường viền.

Thêm băng chuyền

Tiện ích Carousel cho thấy một tập hợp các đối tượng CarouselCard có thể cuộn trên và ra khỏi màn hình. Bạn có thể thêm nhiều tiện ích vào mỗi CarouselCard.

Tiện ích CardFixedFooter đại diện cho chân trang của một thông báo hộp thoại do ứng dụng Chat gửi. Chân trang có thể bao gồm một nút chính và một nút phụ.

Tiện ích CardFixedFooter chỉ có trong hộp thoại.

Sau đây là ví dụ về một tiện ích CardFixedFooter có 2 nút:

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.