Các khái niệm và cấu trúc của Remote Compose

Remote Compose là một thư viện Jetpack cho phép bạn xây dựng giao diện người dùng bằng các API kiểu Compose trong ứng dụng và hiển thị giao diện người dùng đó trong các quy trình hệ thống, chẳng hạn như Tiện ích ứng dụng hoặc Tiện ích Wear OS. Ứng dụng của bạn ghi lại giao diện người dùng dưới dạng một tài liệu nhỏ gọn, còn trình phát trong quy trình lưu trữ sẽ kết xuất giao diện người dùng đó và xử lý các hoạt động tương tác, thay đổi trạng thái và ảnh động trên thiết bị mà không cần gọi lại vào ứng dụng của bạn.

Hướng dẫn này giải thích cấu trúc Remote Compose và sự khác biệt giữa cấu trúc này với Jetpack Compose tiêu chuẩn. Hướng dẫn này tập trung vào việc xây dựng giao diện người dùng bằng các thành phần.

Trường hợp sử dụng tính năng Soạn thư từ xa

Bạn có thể dùng tính năng Soạn từ xa trên mọi nền tảng có trình phát hỗ trợ. Trên Android, Glance hỗ trợ các tiện ích của ứng dụng và tiện ích Wear OS.

Cách hoạt động: Kiến trúc ba khối

Sự khác biệt cơ bản về cấu trúc giữa Remote Compose và Jetpack Compose tiêu chuẩn nằm ở việc tách biệt định nghĩa giao diện người dùng khỏi quá trình thực thi trên ba khối cấp cao:

• Tạo tài liệu: Ứng dụng của bạn chạy các hàm @RemoteComposable để ghi lại một tài liệu: nội dung mô tả ngắn gọn, được chuyển đổi tuần tự về giao diện người dùng, bao gồm cả bố cục, trạng thái từ xa và các thao tác. Khi dữ liệu thay đổi, ứng dụng của bạn có thể ghi lại và gửi một tài liệu mới.
• Chuyển tài liệu đến máy chủ từ xa: Ứng dụng của bạn chuyển tài liệu đến máy chủ, quy trình hiển thị tài liệu, chẳng hạn như trình chạy hoặc Wear OS.
• Phát tài liệu: Trình phát Remote Compose trong máy chủ lưu trữ sẽ kết xuất tài liệu và xử lý bố cục, hoạt động đầu vào, thay đổi trạng thái trải nghiệm người dùng và ảnh động trên thiết bị mà không cần gọi lại vào ứng dụng của bạn.

Kiến trúc này mang lại những lợi ích chính giúp giảm trực tiếp độ trễ:

• Kích thước tài liệu nhỏ: Ảnh chụp nhanh tài liệu được chuyển đổi tuần tự vẫn nhỏ gọn và nhẹ.
• Giảm số lần khứ hồi: Vì trình phát lưu trữ từ xa xử lý hoạt động tương tác và thay đổi trạng thái cục bộ, nên hoạt động giao tiếp khứ hồi trở lại ứng dụng hoặc máy chủ sẽ được giảm thiểu.

Tương tự như trang web/HTML: Remote Compose hoạt động tương tự như việc phân phát một trang web. Máy chủ ứng dụng tạo và gửi cấu trúc HTML/tài liệu một lần, còn máy chủ lưu trữ trình duyệt sẽ kết xuất cấu trúc đó và xử lý các hoạt động tương tác cục bộ mà không cần liên tục truy vấn phần phụ trợ.

Thành phần

Remote Compose cung cấp các thành phần giao diện người dùng cấp cao để tạo cấu trúc bố cục. Sử dụng các thành phần Remote Compose và RemoteModifier thay vì các thành phần Compose tiêu chuẩn tương đương. Các thành phần này bao gồm vùng chứa bố cục cơ bản cũng như các thành phần thích ứng được thiết kế riêng để xử lý kích thước màn hình động:

• Thành phần bố cục cơ bản: Các thành phần bố cục phổ biến giống như Compose, chẳng hạn như RemoteBox, RemoteRow và RemoteColumn.
• Thành phần bố cục thích ứng: Các thành phần chuyên biệt như RemoteFitBox, RemoteCollapsibleRow và RemoteCollapsibleColumn được thiết kế để thích ứng một cách rõ ràng trên các nền tảng từ xa.
• Tạo giao diện Material Design: Việc tạo giao diện cũng hoạt động tương tự đối với các tiện ích Wear OS, với hệ thống phân cấp màu sắc và kiểu chữ do RemoteMaterialTheme cung cấp. Điều này giúp đảm bảo tính nhất quán trong việc triển khai hệ thống thiết kế và xây dựng thương hiệu trên ứng dụng và tiện ích của bạn.

Bản vẽ tuỳ chỉnh bằng RemoteCanvas

Đối với đồ hoạ tuỳ chỉnh và ảnh động dựa trên thời gian, hãy sử dụng RemoteCanvas để ghi lại các lệnh vẽ mà trình phát chạy trên máy chủ. Hướng dẫn này tập trung vào việc xây dựng giao diện người dùng bằng các thành phần.

Những điểm khác biệt chính

Hãy xem các khái niệm cốt lõi sau đây để hiểu cách Remote Compose quản lý trạng thái, logic và hành động.

Tham chiếu trạng thái tượng trưng

Trong Compose tiêu chuẩn, vùng chứa trạng thái lưu giữ các giá trị đang hoạt động, có thể đọc được trong bộ nhớ ứng dụng cục bộ do mã ứng dụng (lambda) thay đổi khi có sự kiện xảy ra. Trong Remote Compose, khai báo trạng thái đóng vai trò là tham chiếu tượng trưng. Thay vì giữ các giá trị đang hoạt động trong bộ nhớ ứng dụng cục bộ, các giá trị này khai báo các liên kết mà trình phát từ xa quản lý và cập nhật cục bộ trong thời gian chạy. Hãy lưu ý những điều sau khi khai báo trạng thái trong Remote Compose:

• Sử dụng các hàm nhà máy của Remote Compose để khai báo trạng thái như rememberMutableRemoteInt, rememberMutableRemoteFloat hoặc rememberMutableRemoteString.
• Mã ứng dụng của bạn không thể kiểm tra hoặc đọc giá trị của biến trạng thái từ xa trực tiếp trong quá trình kết hợp.
• Trình phát lưu trữ và cập nhật các giá trị này trên thiết bị khi người dùng tương tác với tài liệu.

Trạng thái từ xa so với luồng điều khiển Kotlin

Mã Kotlin của bạn chỉ chạy khi ứng dụng tạo tài liệu. Các câu lệnh Kotlin như if, when và for có thể định hình tài liệu dựa trên các giá trị đã biết tại thời điểm đó, chẳng hạn như lặp lại một hàng cho mỗi mục trong danh sách, nhưng không thể phản ứng với trạng thái từ xa thay đổi sau đó. Hãy lưu ý những điều sau khi làm việc trong tính năng Soạn thư từ xa:

• Logic phân nhánh: Việc chuyển đổi giao diện người dùng động được thực hiện bằng cách sử dụng RemoteStateLayout bằng cách liên kết trạng thái với các vùng RemoteComposable khác nhau.
• Đánh giá văn bản: Tránh nội suy chuỗi Kotlin tiêu chuẩn ("$remoteValue"), chỉ đánh giá khi tài liệu được tạo. Thay vào đó, hãy truyền RemoteString đến RemoteText.

Tạo kiểu động bằng RemoteModifier

Kiểu động trên máy chủ lưu trữ không chạy lại thành phần; thay vào đó, các biến trạng thái từ xa được truyền trực tiếp vào đối tượng sửa đổi, chẳng hạn như RemoteModifier.background(remoteColor).

Bối cảnh hệ thống từ xa

Các nhà cung cấp CompositionLocal như LocalConfiguration hoặc LocalDensity chỉ phản ánh môi trường ứng dụng cục bộ tại thời điểm tài liệu được ghi lại. Các thành phần này không cập nhật linh động trên máy chủ từ xa khi nền tảng thay đổi kích thước, thay đổi trạng thái hiển thị hoặc tiến triển theo thời gian. Thay vào đó, hãy sử dụng các giá trị mà trình phát phân giải trên máy chủ lưu trữ trong thời gian chạy, chẳng hạn như kích thước hiện tại của thành phần, RemoteConfiguration hoặc RemoteDensity.

Hành động khai báo

Trong Compose tiêu chuẩn, trình xử lý lượt nhấp là các hàm lambda chạy trong ứng dụng của bạn. Máy chủ lưu trữ không thể chạy mã của ứng dụng, vì vậy, trong Remote Compose, bạn sẽ đính kèm các hành động, ví dụ: bằng RemoteModifier.clickable(action). Một hành động có thể cập nhật trạng thái từ xa trực tiếp trên máy chủ lưu trữ bằng valueChange hoặc chuyển giao cho ứng dụng hoặc máy chủ lưu trữ bằng pendingIntentAction hoặc hostAction. Để chạy nhiều hành động chỉ bằng một lần nhấp, hãy sử dụng combinedAction.

So sánh mô hình cấp cao

Miền tính năng	Jetpack Compose tiêu chuẩn	Remote Compose
Sự kiện nhấp và chạm	Biểu thức lambda đồng bộ trong quá trình	Đối tượng Action được chuyển đổi tuần tự theo kiểu khai báo
Logic có điều kiện	Luồng kiểm soát if và when trong Kotlin	if/when Kotlin chuẩn hoạt động bình thường đối với trạng thái tĩnh đã biết khi tạo tài liệu. Tính năng phân nhánh động sử dụng RemoteStateLayout (cho cây giao diện người dùng).
Vòng lặp luồng điều khiển	Vòng lặp for và while chuẩn trong Kotlin	Các vòng lặp Kotlin chuẩn (repeat, for, forEach) chỉ chạy khi tài liệu được tạo. Họ không thể lặp lại trạng thái từ xa trên máy chủ
Máy chủ thực thi	Quy trình ứng dụng	Trình chạy (AppWidget), tiện ích Wear OS hoặc bất kỳ kiểu dáng nào có trình phát hỗ trợ
Vòng đời của quy trình	Quá trình phải luôn hoạt động để kết hợp lại và kết xuất	Quá trình này ghi lại tài liệu tổng quan nhanh về giao diện người dùng; công cụ Trình phát từ xa phân tích cú pháp cây thành phần, theo dõi các thay đổi về trạng thái và vẽ lại cục bộ mà không cần gọi lại vào ứng dụng.
Tác dụng phụ	Vòng đời coroutine (LaunchedEffect)	Không có trên máy chủ lưu trữ. Thành phần kết hợp chạy trong ứng dụng của bạn để tạo tài liệu, vì vậy, hiệu ứng coroutine không thể điều khiển giao diện người dùng từ xa, trừ phi quá trình tích hợp duy trì một thành phần kết hợp mở.
Mô hình trạng thái	Giá trị trạng thái bộ nhớ cục bộ	Các hàm nhà máy (rememberMutableRemoteInt(), rememberNamedRemoteColor()) trả về các tham chiếu trạng thái tượng trưng thay vì các giá trị thô.