Xây dựng ứng dụng chia sẻ công thức món ăn bằng Jetpack Compose
MỤC LỤC
Jetpack Compose
Bạn có thể tạo các giao diJetpack Compose là một framework để phát triển giao diện người dùng (UI) trên nền tảng Android, được phát triển bởi Google. Nó cho phép lập trình viên tạo giao diện người dùng bằng cách sử dụng các hàm và phương thức trong ngôn ngữ lập trình Kotlin, thay vì sử dụng XML như trước đây.
Mô hình tư duy trong Jetpack Compose
- Recomposition
Cách phổ biến nhất để cập nhật giao diện người dùng là hướng dẫn cho cây bằng các hàm như findViewById() và thay đổi các nút bằng những phương thức gọi như button.setText(String), container.addChild(View) hoặc img.setImageBitmap(Bitmap). Nếu một thành phần đo lường thành phần con cháu của nó hai lần và thành phần con cháu đó đo lường từng thành phần con cháu của nó hai lần và cứ tiếp tục như vậy, thì một lần thử duy nhất để tạo ra toàn bộ Giao diện người dùng sẽ phải thực hiện rất nhiều việc, khiến ứng dụng của bạn khó duy trì hoạt động.
Quản lý trạng thái
- Khôi phục trạng thái
Tài liệu hướng dẫn này tập trung vào hoạt động kết nối giữa các trạng thái và thành phần kết hợp (composable), đồng thời tập trung vào những API mà Jetpack Compose cung cấp để xử lý trạng thái dễ dàng hơn. Tuy nhiờn, nếu số lượng trạng thỏi cần theo dừi tăng lờn hoặc logic để thực hiện trong các hàm có khả năng kết hợp phát sinh, bạn nên uỷ quyền trách nhiệm về logic và trạng thái cho các lớp khác: phần tử giữ trạng thái.
Vòng đời của Composable 1. Tổng quan
Phân tích một Composable trong Composition
Nếu trong quá trình kết hợp lại một thành phần kết hợp gọi các thành phần kết hợp khác những thành phần đã gọi trong quá trình kết hợp trước, Compose sẽ xác định các thành phần kết hợp nào đã được gọi. Mặc dù mức độ ưu tiên của việc gọi LoginInput chuyển từ thứ nhất sang thứ hai, nhưng LoginInput vẫn sẽ được giữ nguyên trong các thành phần kết hợp lại. Nếu một movie mới được thêm vào cuối của danh sách thì Compose có thể tái sử dụng các thực thể có sẵn trong thành phần Compose vì vị trí của chúng trong danh sách chưa thay đổi, do đó, giá trị đầu vào của những thực thể trên movie vẫn còn nguyên vẹn.
Có thể tái sử dụng thành phần kết hợp MovieOverview trong thành phần Compose MovieOverview cùng màu có nghĩa thành phần kết hợp chưa được kết hợp lại. Tuy nhiên, nếu danh sách movies thay đổi bằng cách thêm vào phần đầu hoặc phần giữa thì việc xoá hoặc sắp xếp lại các mục sẽ tạo ra quá trình kết hợp lại trong tất cả lệnh gọi MovieOverview có tham số đầu vào đã thay đổi vị trí trong danh sách. Nếu sắp xếp lại danh sách phim, tốt nhất chúng ta nên sắp xếp lại các thực thể trong cây thành phần Compose thay vì kết hợp lại từng thành phần kết hợp MovieOverview với một thực thể movie (phim) khác.
Bằng cách gói một khối mã cùng lệnh gọi thành phần kết hợp khoá có một hoặc nhiều giá trị được truyền, những giá trị đó sẽ được kết hợp để xác định thực thể trong thành phần Compose. Với các tuỳ chọn nêu trên, ngay cả khi các phần tử trong danh sách thay đổi, Compose vẫn nhận ra các lệnh gọi riêng lẻ đến MovieOverview và có thể tái sử dụng các lệnh gọi đó. Vì thành phần kết hợp MovieOverview có các khoá riêng biệt nên Compose nhận ra thực thể MovieOverview nào không thay đổi và có thể sử dụng lại các thực thể đó; các hiệu ứng phụ của những thực thể này vẫn tiếp tục được thực thi.
Bỏ qua nếu giá trị đầu vào không thay đổi
Khi tất cả các kiểu được truyền dưới dạng tham số đến thành phần kết hợp đều ổn định, các giá trị tham số sẽ được so sánh bằng nhau dựa trên vị trí có thể kết hợp trong cây Giao diện người dùng. Quá trình kết hợp lại được bỏ qua nếu tất cả các giá trị không thay đổi kể từ lệnh gọi trước. Lưu ý quan trọng: Compose sẽ bỏ qua quá trình kết hợp lại của một thành phần kết hợp nếu tất cả giá trị đầu vào đều ổn định và không đổi.
Nếu Compose không thể dự đoán nhưng bạn muốn buộc phải xem kiểu này là một kiểu ổn định, hãy đánh dấu bằng chú giải @Stable. Trong đoạn mã trên, vì UiState là một interface nên Compose thường có thể coi kiểu này là không ổn định. Bằng cách thêm chú giải @Stable, bạn cho Compose biết kiểu trên ổn định và cho phép bộ công cụ này ưu tiên quá trình kết hợp lại thông minh.
Điều này cũng có nghĩa Compose sẽ coi tất cả thao tác triển khai là ổn định nếu giao diện được sử dụng làm kiểu tham số.
Các giai đoạn trong Jetpack Compose
- Đọc trạng thái theo giai đoạn
Khi bạn đọc giá trị của trạng thái tổng quan nhanh (snapshot state) của một trong cỏc giai đoạn được liệt kờ ở trờn, Compose sẽ tự động theo dừi trạng thỏi của hoạt động khi giỏ trị được đọc. Để chính xác hơn, bước đo lường và bước đặt vị trí sẽ có các phạm vi bắt đầu riêng biệt, nghĩa là việc đọc trạng thái trong bước đặt vị trí sẽ không gọi lại bước đo lường trước đó. Mặc dù vậy, trong ví dụ này, phương pháp này không tối ưu vì mọi sự kiện cuộn sẽ dẫn đến việc toàn bộ nội dung của thành phần kết hợp bị đánh giá lại, đo lường lại, bố cục lại và cuối cùng là vẽ lại.
Khối lambda dùng cho công cụ sửa đổi được gọi trong giai đoạnbố cục (cụ thể là trong bước đặt vị trí của giai đoạn bố cục), có nghĩa làfirstVisibleItemScrollOffset trạng thái không còn được đọc trong. Vỡ Compose theo dừi thời điểm đọc trạng thỏi nờn sự thay đổi này cú nghĩa là nếu giá trị firstVisibleItemScrollOffset thay đổi thì Compose chỉ cần khởi động lại giai đoạn bố cục và giai đoạn vẽ. Giá trị của firstVisibleItemScrollOffset sẽ thay đổi mọi khung trong quá trình cuộn và bằng cách trì hoãn việc đọc trạng thái sang giai đoạn bố cục, chúng ta có thể tránh việc tái cấu trúc tất cả các khung này.
Ví dụ này dựa trên các công cụ sửa đổi mức chênh lệch khác nhau để có thể tối ưu hoá mã kết quả, nhưng ý tưởng chung là cố gắng: cố gắng bản địa hoá trạng thái đọc cho giai đoạn thấp nhất có thể, cho phép Compose thực hiện số lượng công việc tối thiểu. Việc sử dụng một nguyên hàm bố cục hợp lý hoặc tạo một bố cục tuỳ chỉnh có nghĩa là thuộc tính mẹ tối thiểu mà bạn dùng để làm nguồn chân lý có thể điều phối mối quan hệ giữa nhiều thành phần. • Tích hợp dễ dàng: TensorFlow Lite tích hợp mạnh mẽ với TensorFlow và cung cấp các công cụ và tài liệu để chuyển đổi mô hình từ TensorFlow sang TensorFlow Lite một cách thuận lợi.
XÂY DỰNG ỨNG DỤNG 1. Tổng quan
Phân tích, thiết kế hệ thống
- Thiết kế hệ thống
- Thiết kế giao diện
- Quản lý công thức - Tìm kiếm công thức - Quản lý đơn hàng - Quản lý giỏ hàng - Quản lý ứng dụng - Quản lý thông báo. Quản lý công thức Người dùng có thể xem, thêm và xóa công thức Tìm kiếm công thức Người dùng có thể tìm kiếm theo tên, theo nguyên. Quản lý giỏ hàng Người dùng có thể thêm các nguyên liệu từ món ăn vào giỏ hàng, thay đổi số lượng, xóa vật phẩm, thay.
Quản lý thông báo Người dùng có thể nhận và xem thông báo Quản lý tài khoản Người dùng có thể thay đổi các thông tin của tài. Công thức đã được tương tác, công thức được lưu vào mục yêu thích trong cài đặt, một thông báo được gửi đến chủ công thức. Mục đích Người dùng muốn tìm kiếm công thức theo tên nguyên liệu Tiền điều kiện Người dùng đã đăng nhập vào ứng dụng.
Một thông báo sẽ được gửi cho người sở hữu công thức Ngoại lệ Người sở hữu sẽ không nhận được thông báo nếu đã từ chối. Mục đích Người dùng thay đổi thông tin trong giỏ hàng Tiền điều kiện Người dùng đã đăng nhập vào ứng dụng Diễn biến chính 1. • Các chủ thể trạng thái (chẳng hạn như các lớp ViewModel) chứa dữ liệu, hiển thị thông tin đó tới giao diện người dùng và xử lý logic.
Ví dụ: ứng dụng có thể có một lớp GetTimeZoneUseCase nếu nhiều ViewModel dựa vào múi giờ để hiển thị thông báo thích hợp trên màn hình. 18 Đơn hàng của tôi Màn hình tất cả đơn hàng của tài khoản 19 Công thức của tôi Màn hình tất cả công thức của tài khoản.
Cài đặt và thử nghiệm
- Hiểu rừ Jetpack Compose, xõy dựng được một ứng dụng hoàn chỉnh sử dụng Jetpack Compose. - Hiểu rừ phỏt triển ứng dụng Android native và tận dụng thế mạnh của phát triển ứng dụng native. - Ứng dụng được ML trực tiếp vào ứng dụng điện thoại - Phát triển một ứng dụng có tính thực tế cao.