Xây Dựng Ứng Dụng Chia Sẻ Công Thức Món Ăn

Khám phá đồ án 2 xây dựng ứng dụng chia sẻ công thức món ăn, nơi người dùng có thể tìm kiếm và chia sẻ những công thức nấu ăn độc đáo.

• Tác giả: Bùi Lê Hoài An
• Người hướng dẫn: ThS. Huỳnh Tuấn Anh
• Trường học: Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ phần mềm
• Đề tài: Xây Dựng Ứng Dụng Chia Sẻ Công Thức Món Ăn
• Loại tài liệu: báo cáo đồ án
• Năm xuất bản: 2023
• Địa điểm: Thành phố Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• NHẬN XÉT CỦA GIẢNG VIÊN
• 1. CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN
• 1.1. Thông tin sinh viên
• 1.2. Tổng quan đề tài
• 1.2.1. Giới thiệu đề tài
• 1.2.2. Phạm vi nghiên cứu
• 1.2.3. Nội dung nghiên cứu
• 1.2.4. Kết quả hướng tới
• 1.3. Công cụ sử dụng
• 2. CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG
• 2.1. Giới thiệu ngôn ngữ lập trình Kotlin
• 2.2. Jetpack Compose
• 2.3. Tại sao lại là Jetpack Compose?
• 2.4. Mô hình tư duy trong Jetpack Compose
• 2.5. Mô hình lập trình khai báo
• 2.6. Hàm composable đơn giản
• 2.7. Thay đổi mô hình khai báo
• 2.8. Nội dung động
• 2.9. Recomposition
• 3. CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG
• 3.1. Tổng quan
• 3.2. Tên ứng dụng: Recipely – Just a simple recipe app
• 3.3. Lý do chọn ứng dụng
• 3.4. Đối tượng hướng đến
• 3.5. Môi trường phát triển ứng dụng
• 3.6. Kết quả mong đợi
• 3.7. Quy trình thực hiện các công việc chính
• 3.8. Phân tích, thiết kế hệ thống
• 3.8.1. Xác định và mô hình hóa các yêu cầu phần mềm
• 3.8.2. Xác định yêu cầu
• 3.8.3. Một số yêu cầu phần mềm phải có
• 3.8.4. Ràng buộc logic ban đầu
• 3.8.5. Tính khả dụng
• 3.8.6. Mô hình hóa yêu cầu
• 3.8.7. Danh sách chức năng
• 3.8.8. Lược đồ Use-case
• 3.8.9. Thiết kế hệ thống
• 3.8.10. Kiến trúc hệ thống: Multi module architecture
• 3.8.11. Vấn đề về độ lớn của mã
• 3.8.12. Kiến trúc ứng dụng
• 3.8.13. Thiết kế dữ liệu
• 3.8.14. Thiết kế giao diện
• 3.8.15. Sơ đồ liên kết màn hình
• 3.8.16. Danh sách các màn hình
• 3.8.17. Cài đặt và thử nghiệm
• 4. CHƯƠNG 4: KẾT LUẬN
• 4.1. Kết quả đạt được
• 4.2. Hướng phát triển
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Giới thiệu tổng quan về ứng dụng chia sẻ công thức món ăn bằng Jetpack Compose

Ứng dụng chia sẻ công thức món ăn đang trở thành xu hướng trong thời đại công nghệ số. Với sự phát triển của Jetpack Compose, việc xây dựng ứng dụng trở nên dễ dàng và hiệu quả hơn bao giờ hết. Jetpack Compose cho phép lập trình viên tạo ra giao diện người dùng một cách linh hoạt và nhanh chóng, giúp tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng.

1.1. Tại sao chọn Jetpack Compose cho ứng dụng chia sẻ công thức

Jetpack Compose mang lại nhiều lợi ích cho việc phát triển ứng dụng, bao gồm khả năng khai báo giao diện người dùng dễ dàng và hiệu suất cao hơn so với các phương pháp truyền thống.

1.2. Lợi ích của việc chia sẻ công thức món ăn qua ứng dụng

Chia sẻ công thức món ăn không chỉ giúp người dùng dễ dàng tìm kiếm và lưu trữ công thức mà còn tạo ra một cộng đồng ẩm thực phong phú và đa dạng.

II. Vấn đề và thách thức trong việc phát triển ứng dụng chia sẻ công thức

Mặc dù Jetpack Compose mang lại nhiều lợi ích, nhưng vẫn tồn tại một số thách thức trong việc phát triển ứng dụng chia sẻ công thức món ăn. Các vấn đề như quản lý trạng thái, tối ưu hóa hiệu suất và đảm bảo tính tương thích với các thiết bị khác nhau là những yếu tố cần được xem xét kỹ lưỡng.

2.1. Quản lý trạng thái trong ứng dụng

Quản lý trạng thái là một trong những thách thức lớn nhất khi phát triển ứng dụng. Việc sử dụng ViewModel và LiveData trong Jetpack Compose có thể giúp giải quyết vấn đề này.

2.2. Tối ưu hóa hiệu suất ứng dụng

Để đảm bảo ứng dụng hoạt động mượt mà, việc tối ưu hóa hiệu suất là rất quan trọng. Jetpack Compose cung cấp các công cụ để giảm thiểu việc tái tạo giao diện không cần thiết.

III. Phương pháp xây dựng ứng dụng chia sẻ công thức bằng Jetpack Compose

Việc xây dựng ứng dụng chia sẻ công thức món ăn bằng Jetpack Compose có thể được thực hiện qua nhiều bước. Từ việc thiết kế giao diện người dùng đến việc tích hợp các tính năng cần thiết, mỗi bước đều quan trọng để tạo ra một ứng dụng hoàn chỉnh.

3.1. Thiết kế giao diện người dùng với Jetpack Compose

Thiết kế giao diện người dùng trong Jetpack Compose cho phép lập trình viên sử dụng các hàm composable để tạo ra các thành phần giao diện một cách dễ dàng và trực quan.

3.2. Tích hợp cơ sở dữ liệu cho ứng dụng

Việc tích hợp cơ sở dữ liệu như Room vào ứng dụng giúp lưu trữ và quản lý công thức món ăn một cách hiệu quả, đảm bảo dữ liệu luôn được cập nhật và dễ dàng truy xuất.

IV. Ứng dụng thực tiễn và kết quả nghiên cứu từ dự án

Dự án xây dựng ứng dụng chia sẻ công thức món ăn bằng Jetpack Compose đã đạt được nhiều kết quả tích cực. Ứng dụng không chỉ hoạt động ổn định mà còn nhận được phản hồi tích cực từ người dùng về giao diện và tính năng.

4.1. Phản hồi từ người dùng về ứng dụng

Người dùng đã đánh giá cao tính năng dễ sử dụng và giao diện thân thiện của ứng dụng, cho thấy sự thành công trong việc áp dụng Jetpack Compose.

4.2. Kết quả đạt được từ dự án

Dự án không chỉ giúp nâng cao kiến thức về Jetpack Compose mà còn mở ra cơ hội phát triển ứng dụng di động trong tương lai.

V. Kết luận và tương lai của ứng dụng chia sẻ công thức món ăn

Ứng dụng chia sẻ công thức món ăn bằng Jetpack Compose không chỉ là một sản phẩm công nghệ mà còn là một công cụ kết nối cộng đồng yêu thích ẩm thực. Tương lai của ứng dụng hứa hẹn sẽ còn phát triển hơn nữa với nhiều tính năng mới và cải tiến.

5.1. Hướng phát triển trong tương lai

Dự kiến sẽ tích hợp thêm nhiều tính năng như chia sẻ video hướng dẫn nấu ăn và tạo cộng đồng người dùng để tăng cường trải nghiệm.

5.2. Tầm quan trọng của Jetpack Compose trong phát triển ứng dụng

Jetpack Compose sẽ tiếp tục đóng vai trò quan trọng trong việc phát triển ứng dụng Android, giúp lập trình viên tiết kiệm thời gian và nâng cao hiệu suất làm việc.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong lĩnh vực phát triển ứng dụng di động, các nền tảng đa nền tảng (cross-platform) như Flutter hay React Native giúp tối ưu hóa thời gian và chi phí phát triển. Tuy nhiên, các tổ chức công nghệ quy mô lớn vẫn ưu tiên ứng dụng bản địa (native) nhằm tối ưu hiệu năng vận hành và bảo đảm trải nghiệm người dùng liền mạch. Mặc dù vậy, phương pháp phát triển ứng dụng Android native truyền thống tồn tại rào cản kỹ thuật lớn: lập trình viên buộc phải sử dụng song song hai ngôn ngữ khác nhau gồm ngôn ngữ logic (Java hoặc Kotlin) và ngôn ngữ định dạng giao diện (XML). Quy trình này làm gia tăng thời gian học tập, gây phân mảnh mã nguồn và gia tăng chi phí bảo trì hệ thống.

Từ sau sự kiện Google I/O 2019, Kotlin đã trở thành ngôn ngữ ưu tiên hàng đầu cho Android. Sự ra đời của Jetpack Compose – bộ công cụ xây dựng giao diện người dùng khai báo hoàn toàn bằng ngôn ngữ Kotlin – đã giải quyết triệt để sự phân tách giữa logic và giao diện, cho phép toàn bộ mã nguồn ứng dụng được viết thống nhất bằng một ngôn ngữ duy nhất.

Đồ án "Xây dựng ứng dụng chia sẻ công thức món ăn" do sinh viên Bùi Lê Hoài An (MSSV: 20520985, lớp SE122.O11) thực hiện dưới sự hướng dẫn của ThS. Huỳnh Tuấn Anh tại Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin – Đại học Quốc gia TP.HCM (tháng 12/2023) tập trung vào các mục tiêu và nhiệm vụ nghiên cứu sau:

1. Nghiên cứu tổng quan và chuyên sâu về mô hình tư duy, cách thức hoạt động, các ưu - khuyết điểm và hệ sinh thái thư viện, package đi kèm Jetpack Compose.
2. Tìm hiểu cơ chế lưu trữ dữ liệu, quản lý trạng thái và tối ưu hóa chu trình kết hợp lại (recomposition) trong ứng dụng di động.
3. Tìm hiểu định hướng ứng dụng học máy trên thiết bị di động (TensorFlow Lite) kết hợp trong ứng dụng di động.
4. Hiện thực hóa các nội dung lý thuyết thông qua việc phân tích, thiết kế và xây dựng ứng dụng thực tế mang tên "Recipely – Just a simple recipe app".

Phạm vi nghiên cứu của đề tài giới hạn trong hệ sinh thái Android native, tập trung vào bộ công cụ Jetpack Compose và quy trình phát triển ứng dụng di động tại Khoa Công nghệ Phần mềm trong mốc thời gian hoàn thành vào tháng 12 năm 2023.

---

Cơ sở lý thuyết và phương pháp

Đồ án xây dựng nền tảng dựa trên các khung lý thuyết, công nghệ và phương pháp kỹ thuật phần mềm chuẩn mực:

Thành phần	Chi tiết công nghệ / Lý thuyết áp dụng	Mục đích trong đề tài
Ngôn ngữ lập trình	Kotlin (JetBrains / Google)	Hỗ trợ hướng đối tượng (OOP), lập trình hàm (FP), tính năng null safety, extension function và tương thích hoàn toàn với JVM/Java.
Bộ công cụ UI	Jetpack Compose (Google)	Xây dựng giao diện người dùng theo mô hình lập trình khai báo (Declarative UI) dựa trên hàm @Composable.
Quản lý trạng thái	Unidirectional Data Flow (UDF), State Hoisting, remember, rememberSaveable, MutableState	Tách biệt trạng thái khỏi thành phần giao diện, duy trì trạng thái qua chu kỳ cấu hình lại.
Kiến trúc hệ thống	Multi-module Architecture, Android Architecture Components (ViewModel, LiveData, Room)	Giải quyết vấn đề độ phình mã nguồn, tăng tính mô-đun hóa, dễ tái sử dụng và kiểm thử.
Trí tuệ nhân tạo	TensorFlow Lite	Định hướng tích hợp mô hình học máy (Machine Learning) trực tiếp trên thiết bị di động.
Công cụ phát triển	Android Studio, Google Colab, GitHub	Lập trình giao diện/hệ thống, huấn luyện mô hình và quản lý phiên bản mã nguồn.

Phương pháp nghiên cứu chính được triển khai là phương pháp nghiên cứu thực nghiệm và thiết kế - phát triển kỹ thuật phần mềm (Design and Implementation):

• Phân tích và tổng hợp lý thuyết: Hệ thống hóa các nguyên lý lập trình khai báo, vòng đời Composable, cơ chế kết hợp lại (recomposition), đo lường bố cục đơn luồng và ba giai đoạn kết xuất khung hình.
• Phương pháp mô hình hóa phần mềm: Phân tích yêu cầu chức năng, phi chức năng, ràng buộc logic, thiết lập lược đồ Use-Case và thiết kế luồng chuyển dịch màn hình (Screen Flow).
• Phương pháp thiết kế kiến trúc: Áp dụng kiến trúc đa mô-đun (Multi-module) kết hợp các mẫu thiết kế hướng trạng thái.

---

Nội dung chính theo từng chương

Chương 1: Giới thiệu tổng quan

Chương 1 thiết lập các thông tin cơ sở của đồ án bao gồm thông tin tác giả, giảng viên hướng dẫn và tổng quan đề tài. Tác giả phân tích sự đối sánh giữa các giải pháp đa nền tảng và phát triển bản địa, chỉ ra điểm nghẽn của việc sử dụng song song Java/Kotlin và XML. Nội dung nghiên cứu được xác định rõ là khảo sát cơ chế vận hành của Jetpack Compose và áp dụng xây dựng ứng dụng thực tế. Hai kết quả hướng tới là nâng cao năng lực làm chủ framework mới và tiếp cận việc tích hợp Machine Learning vào môi trường di động. Danh mục công cụ phục vụ nghiên cứu gồm Android Studio (giao diện và logic), Google Colab (huấn luyện mô hình) và GitHub (quản lý mã nguồn).

Chương 2: Công nghệ sử dụng

Chương 2 trình bày chi tiết về nền tảng lý thuyết kỹ thuật của Kotlin và Jetpack Compose:

• Đặc trưng Kotlin: Khả năng kết hợp OOP và FP, cú pháp ngắn gọn, an toàn với con trỏ null, extension functions và tính tương thích Java.
• Mô hình tư duy Jetpack Compose: Chuyển đổi từ mô hình mệnh lệnh truyền thống (nơi hệ phân cấp View được cập nhật thủ công qua findViewById(), setter/getter dễ dẫn đến xung đột trạng thái) sang mô hình khai báo (tái tạo màn hình thông qua các hàm @Composable nhận dữ liệu đầu vào và phát sinh giao diện).
• Quy tắc của hàm Composable: Phải được đánh dấu chú thích @Composable, không trả về giá trị (Unit), chạy nhanh, có tính idempotent (bất biến) và không chứa tác dụng phụ (side-effects).
• Cơ chế Recomposition: Giải thích nguyên lý Recomposition thông minh — chỉ vẽ lại các nút có dữ liệu thay đổi; có thể thực thi theo thứ tự bất kỳ, chạy song song trên nhiều luồng nền, có thể bị hủy nếu dữ liệu đầu vào thay đổi giữa chừng (tính khả quan) và bỏ qua việc thực thi lại đối với các kiểu dữ liệu ổn định (Stable Types).
• Hệ thống bố cục và Modifier: Giới thiệu các bố cục nền tảng gồm Column, Row, Box cùng các thuộc tính căn chỉnh (horizontalArrangement, verticalAlignment). Cơ chế đo lường bố cục đơn luồng (Single-pass measurement) giúp tối ưu hiệu năng và xử lý tốt các cấu trúc lồng nhau mà không bị suy giảm tốc độ như hệ thống Android View cũ. Các đối tượng sửa đổi (Modifier) như clickable, padding, fillMaxWidth, size cung cấp khả năng trang trí và an toàn kiểu dữ liệu.
• Quản lý trạng thái và luồng dữ liệu một chiều (UDF): Khái niệm trạng thái trong Composition; các API remember và mutableStateOf; kỹ thuật chuyển trạng thái lên trên (State Hoisting) để tạo các hàm không trạng thái (stateless); khôi phục trạng thái bằng rememberSaveable, @Parcelize, mapSaver; sử dụng các phần tử giữ trạng thái (State Holders) và tái kích hoạt tính toán qua key.
• Vòng đời Composable và ba giai đoạn của một frame: Vòng đời gồm: đi vào Composition, tái kết hợp từ 0 đến nhiều lần, và rời khỏi Composition. Xác định thực thể Composable dựa trên vị trí gọi (call-site) và khóa (key). Ba giai đoạn kết xuất một frame gồm: Composition (Sáng tác nội dung) -> Layout (Đo lường và Đặt vị trí) -> Drawing (Vẽ lên Canvas). Quá trình đọc trạng thái theo từng giai đoạn giúp giảm thiểu tối đa khối lượng công việc kết xuất lại.
• TensorFlow Lite cho thiết bị di động: Đặt nền móng kỹ thuật cho việc nhúng các mô hình trí tuệ nhân tạo gọn nhẹ trên nền tảng Android.

Chương 3: Xây dựng ứng dụng

Chương 3 mô tả quá trình hiện thực hóa ứng dụng "Recipely – Just a simple recipe app":

• Tổng quan ứng dụng: Trình bày lý do xây dựng ứng dụng, đối tượng người dùng hướng đến, môi trường phát triển và kết quả mong đợi.
• Quy trình triển khai: Khái quát các giai đoạn từ thu thập yêu cầu, phân tích thiết kế đến hiện thực mã nguồn.
• Phân tích yêu cầu phần mềm: Xác định các yêu cầu chức năng cốt lõi (chia sẻ, tra cứu công thức món ăn), các ràng buộc logic ban đầu, tiêu chí về tính khả dụng và xây dựng lược đồ Use-Case hệ thống.
• Thiết kế hệ thống:
  • Kiến trúc đa mô-đun (Multi-module architecture): Phân tách mã nguồn thành các mô-đun độc lập nhằm kiểm soát độ phức tạp khi dự án mở rộng, tối ưu thời gian biên dịch và bảo đảm tính độc lập giữa các tầng nghiệp vụ.
  • Kiến trúc ứng dụng: Định hình luồng dữ liệu theo kiến trúc chuẩn của Android, phân định rõ ràng giữa tầng hiển thị (UI Layer) và tầng dữ liệu (Data Layer).
• Thiết kế dữ liệu và giao diện: Thiết kế cấu trúc lưu trữ dữ liệu, sơ đồ liên kết giữa các màn hình (Screen flow) và chi tiết danh sách các màn hình giao diện người dùng.
• Cài đặt và thử nghiệm: Triển khai các màn hình bằng Jetpack Compose và kiểm thử chức năng vận hành thực tế.

Chương 4: Kết luận

Chương 4 đúc kết các kết quả đạt được của đề tài, đánh giá mức độ hoàn thành so với mục tiêu ban đầu về việc làm chủ Jetpack Compose và xây dựng thành công ứng dụng Recipely. Đồng thời, tác giả vạch ra các hướng phát triển tiếp theo của sản phẩm trong tương lai.

---

Thiết kế và triển khai

Hệ thống của đồ án được triển khai xoay quanh các giải pháp kỹ thuật cụ thể:

1. Kiến trúc hệ thống và đa mô-đun (Multi-module Architecture)

Nhằm khắc phục vấn đề độ lớn của mã nguồn (code size/bloat) trong các dự án di động phức tạp, tác giả áp dụng kiến trúc Multi-module. Cấu trúc này chia nhỏ hệ thống thành các module chuyên biệt:

• Phân tách module theo tính năng (feature modules) và module lõi/chia sẻ (core/common modules).
• Giảm thiểu sự phụ thuộc vòng, cho phép tái sử dụng mã nguồn và cải thiện hiệu suất biên dịch gia tăng (incremental build) trong Android Studio.
• Tầng giao diện tuân thủ mô hình UDF: dữ liệu trạng thái đi xuống (state flows down) từ ViewModel tới các Composable, trong khi các sự kiện người dùng đi lên (events flow up) thông qua các biểu thức lambda callback.

2. Quản lý trạng thái và tối ưu hóa luồng dựng hình

Ứng dụng áp dụng triệt để kỹ thuật chuyển trạng thái lên trên (State Hoisting) theo 3 quy tắc được xác lập trong đồ án:

1. Trạng thái phải được chuyển lên ít nhất đến cấp nút cha chung thấp nhất của tất cả các Composable đọc trạng thái đó.
2. Trạng thái phải được chuyển lên ít nhất đến cấp cao nhất mà nó có thể bị thay đổi.
3. Nếu hai trạng thái cùng thay đổi để phản hồi một sự kiện, chúng phải được chuyển lên cùng nhau.

Để đảm bảo hiệu năng và tránh hiện tượng giật khung hình (jank), các tác vụ nặng (như truy xuất dữ liệu, tính toán phức tạp) được tách khỏi hàm Composable và thực thi trên coroutine nền. Cơ chế theo dõi đọc trạng thái theo từng giai đoạn (Composition, Layout, Drawing) giúp hệ thống chỉ kích hoạt lại giai đoạn tối thiểu cần thiết thay vì vẽ lại toàn bộ giao diện.

3. Quy trình công nghệ và công cụ

Toàn bộ mã nguồn giao diện được xây dựng bằng ngôn ngữ Kotlin trên môi trường Android Studio. Việc huấn luyện mô hình học máy được thực hiện thông qua Google Colab trước khi chuyển đổi sang định dạng TensorFlow Lite để tích hợp vào ứng dụng. Mã nguồn được kiểm soát phiên bản và cộng tác qua GitHub.

---

Kết quả và đóng góp

1. Về mặt kỹ thuật phần mềm: Đồ án tổng hợp và chuẩn hóa toàn bộ lý thuyết nền tảng về Jetpack Compose, từ mô hình lập trình khai báo, cơ chế recomposition thông minh, đo lường bố cục đơn luồng đến quy tắc quản lý trạng thái nâng cao và ba giai đoạn của một frame.
2. Về mặt ứng dụng thực tiễn: Xây dựng hoàn chỉnh ứng dụng di động bản địa "Recipely – Just a simple recipe app" đáp ứng đầy đủ quy trình từ thu thập yêu cầu, mô hình hóa Use-case, thiết kế kiến trúc đa mô-đun (Multi-module) đến thiết kế dữ liệu và hệ thống màn hình UI trực quan.
3. Về mặt phương pháp luận: Minh chứng tính khả thi và hiệu quả vượt trội của việc chuyển đổi hoàn toàn sang 100% mã nguồn Kotlin trong phát triển ứng dụng Android native, loại bỏ sự phụ thuộc vào tệp bố cục XML truyền thống mà vẫn bảo đảm tối ưu hóa hiệu năng render.

---

Hạn chế và hướng nghiên cứu tiếp

• Hạn chế: Theo phạm vi nghiên cứu được tác giả xác định trong tài liệu, một số loại bố cục chuyên biệt nâng cao trong Compose như bố cục có thể cuộn phức tạp (Scrollable Layout), bố cục phản hồi đa kích thước màn hình (Responsive Layout) và bố cục dạng khe cắm nâng cao (Slot-based Layout) chưa được phân tích toàn diện.
• Hướng phát triển tiếp theo:
  • Hoàn thiện và mở rộng các tính năng nghiệp vụ cho ứng dụng Recipely.
  • Tích hợp sâu hơn mô hình trí tuệ nhân tạo TensorFlow Lite để nhận diện hình ảnh món ăn hoặc gợi ý công thức thông minh trực tiếp trên thiết bị di động.
  • Mở rộng nghiên cứu các mẫu kiến trúc và tối ưu hóa hiệu năng nâng cao cho các màn hình có dữ liệu lớn.

---

Giá trị tham khảo

Tài liệu này là tài liệu tham khảo giá trị cho:

• Sinh viên ngành Kỹ thuật Phần mềm và Công nghệ Thông tin: Đặc biệt là những người đang thực hiện đồ án chuyên ngành, đồ án tốt nghiệp liên quan đến phát triển ứng dụng di động Android native.
• Lập trình viên Android: Những người đang trong quá trình chuyển đổi từ phương pháp xây dựng giao diện XML/View truyền thống sang Jetpack Compose, cần nắm vững mô hình tư duy khai báo, vòng đời Composable và cơ chế quản lý trạng thái luồng dữ liệu một chiều (UDF).
• Kỹ sư thiết kế kiến trúc phần mềm di động: Tham khảo phương án triển khai kiến trúc đa mô-đun (Multi-module architecture) nhằm giải quyết bài toán quy mô mã nguồn trong các ứng dụng thực tế.

---

Câu hỏi thường gặp

1. Tại sao tác giả đề xuất sử dụng Jetpack Compose thay thế cho hệ thống Android View/XML truyền thống?

Trong phương pháp truyền thống, lập trình viên phải duy trì song song hai ngôn ngữ: Java/Kotlin cho logic và XML cho giao diện, dẫn đến tốn thời gian và tăng chi phí bảo trì. Jetpack Compose hợp nhất toàn bộ mã nguồn về duy nhất ngôn ngữ Kotlin theo mô hình khai báo, giúp mã nguồn ngắn gọn, dễ đọc, hỗ trợ tái sử dụng cao và tối ưu hóa hiệu năng thông qua cơ chế Recomposition thông minh.

2. Quá trình kết hợp lại (Recomposition) trong Jetpack Compose hoạt động theo nguyên lý nào?

Recomposition là quá trình gọi lại các hàm Composable khi tham số đầu vào của chúng thay đổi. Compose tối ưu hóa bằng cách chỉ thực thi lại những hàm hoặc khối lambda có dữ liệu bị thay đổi và bỏ qua các thành phần còn lại. Recomposition có thể chạy song song trên nhiều luồng, thực thi theo thứ tự bất kỳ và có tính khả quan (có thể bị hủy bỏ và khởi động lại nếu tham số tiếp tục thay đổi trước khi hoàn tất). Do đó, các hàm Composable bắt buộc phải không có tác dụng phụ (side-effect free).

3. Ba quy tắc cốt lõi khi thực hiện chuyển trạng thái lên trên (State Hoisting) là gì?

Theo đồ án, 3 quy tắc định vị trạng thái gồm:

1. Trạng thái phải được chuyển lên ít nhất đến cấp cha chung thấp nhất của tất cả các Composable có đọc trạng thái đó.
2. Trạng thái phải được chuyển lên ít nhất đến cấp cao nhất mà tại đó trạng thái có thể bị thay đổi.
3. Nếu hai trạng thái cùng thay đổi để phản hồi cùng một sự kiện, chúng phải được chuyển lên trên cùng nhau.

4. Ba giai đoạn hiển thị một khung hình (frame) trong Jetpack Compose diễn ra như thế nào?

Một frame trong Compose trải qua 3 giai đoạn theo luồng dữ liệu một chiều:

1. Composition (Sáng tác): Xác định nội dung hiển thị bằng cách chạy các hàm Composable để mô tả cây giao diện.
2. Layout (Bố cục): Xác định vị trí đặt giao diện qua hai bước: đo lường kích thước (measure) và đặt vị trí (place) theo tọa độ 2D.
3. Drawing (Bản vẽ): Xác định cách thức hiển thị bằng cách vẽ các thành phần lên Canvas màn hình.

5. Ứng dụng "Recipely" giải quyết bài toán kiến trúc hệ thống như thế nào?

Để giải quyết vấn đề độ lớn mã nguồn và tính phức tạp khi mở rộng, tác giả thiết kế ứng dụng theo kiến trúc đa mô-đun (Multi-module architecture), phân tách độc lập các module chức năng và module dùng chung, kết hợp mô hình luồng dữ liệu một chiều (UDF) để đảm bảo tính đóng gói, dễ bảo trì và thuận tiện cho việc kiểm thử.

---

Kết luận

Báo cáo Đồ án 2 "Xây dựng ứng dụng chia sẻ công thức món ăn" của tác giả Bùi Lê Hoài An là một công trình nghiên cứu và thực nghiệm bài bản trong lĩnh vực phát triển ứng dụng di động Android bản địa. Đề tài đã hệ thống hóa sâu sắc các nguyên lý kỹ thuật của Jetpack Compose và hiện thực hóa thành công vào sản phẩm ứng dụng "Recipely" thông qua kiến trúc đa mô-đun chuẩn mực. Đây là nguồn tài liệu học thuật và kỹ thuật giá trị, cung cấp cái nhìn toàn diện về phương pháp lập trình giao diện khai báo hiện đại cho sinh viên và kỹ sư phần mềm.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN 1. Thông tin sinh viên: MSSV Họ tên Email 20520985 Bùi Lê Hoài An 20520985@gm. Tổng quan đề tài: 2.1 Giới thiệu đề tài: Chúng ta không thể phủ nhận sự hữu ích của các framework coss- platform (Flutter, React-Native, …) đã giúp chúng ta phần nào giải quyết được vấn đề về mặt thời gian. Tuy vậy khi nhìn vào thực tế, các công ty lớn trên thế giới tiếp tục sử dụng các ứng dụng native, đó là vấn đề lớn cũng cần phải được kể đến: hiệu suất.

Hiệu suất ảnh hưởng trực tiếp đến trải nghiệm người dùng. Vì thế phát triển ứng dụng. Phát triển ứng dụng native từ lâu đã tồn tại những yếu điểm dễ dàng nhận thấy. Đơn cử như đối với Android, đó là việc nhà phát triển phải sử dụng một loại ngôn ngữ khác hoàn toàn với ngôn ngữ chính để lập trình – XML.

Đối với các nhà phát triển cũng như các công ty phải học song song 2 ngôn ngữ (Java/Kotlin và XML) là rất mất thời gian, dẫn đến đó là tiêu tốn nhiều chi phí. Kể từ sau Google I/O 2019, Kotlin dần phát triển để thay thế Java, trở thành một ngôn ngữ lập trình được ưa chuộng nhất cho phát triển ứng dụng Android native. Và điều chúng ta mong muốn nhất rồi cũng đến: Jetpack Compose, sử dụng Kotlin làm ngôn ngữ lập trình đã ra đời với nhiệm vụ tiên quyết: source code chỉ chứa duy nhất 1 ngôn ngữ lập trình.2 Phạm vi nghiên cứu: Đồ án tập trung vào nghiên cứu tổng quan cách thức hoạt động và cách sử dụng các thư viện - package cũng như cách lưu trữ dữ liệu của Jetpack Compose. Đồng thời, em áp dụng các nghiên cứu trên vào một ứng dụng thực tế để giúp em có thể hiểu sâu hơn các kiến thức đã tìm hiểu.3 Nội dung nghiên cứu: Trang 9 ĐỒ ÁN 2 Bùi Lê Hoài An - 20520985 Em sẽ tiến hành nghiên cứu chi tiết về cách thức hoạt động, ưu - khuyết điểm cũng như các thư viện - tính năng - package liên quan đến Compose.4 Kết quả hướng tới: Với đề tài này, em đề ra hai mục tiêu chính: • Đối với các nhân: mở rộng kiến thức của mình về Compose thông qua quá trình tìm hiểu và áp dụng vào ứng dụng thực tế.

Các kiến thức tìm hiểu được thông qua đồ án thúc đẩy em phát triển thêm các ứng dụng khác bằng Compose Jetpack. Đồng thời, em học được cách nghiên cứu và sử dụng một framework mới cần trải qua quá trình gì nhằm giúp em dễ dàng tiếp xúc với các công nghệ mới hơn trong tương lai. • Có cái nhìn tổng quát hơn trong việc ứng dụng Machine Learning trong phát triển ứng dụng mobile. Công cụ sử dụng: Trong quá trình xây dựng phần mềm, em đã sử dụng các phần mềm sau: • Android Studio: phát triển front end • Google Colabs: training model • GitHub: quản lý source code Trang 10 ĐỒ ÁN 2 Bùi Lê Hoài An - 20520985 CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG 1.

Giới thiệu ngôn ngữ lập trình Kotlin Kotlin là một ngôn ngữ lập trình đa năng, được thiết kế để chạy trên nền tảng Java Virtual Machine (JVM), nhưng cũng có thể chạy trên nền tảng Android, JavaScript và Native. Kotlin được phát triển bởi JetBrains, cùng với một số cộng đồng lập trình viên đóng góp. Một số đặc điểm của Kotlin bao gồm: • Kotlin là một ngôn ngữ lập trình hướng đối tượng (OOP) và hỗ trợ các khái niệm lập trình hàm (FP), giúp cho việc phát triển ứng dụng linh hoạt hơn. • Kotlin có cú pháp đơn giản, dễ đọc và dễ viết hơn so với Java và nhiều ngôn ngữ lập trình khác.

• Kotlin hỗ trợ null safety, giúp tránh được các lỗi runtime liên quan đến null pointer. • Kotlin hỗ trợ extension function, giúp mở rộng tính năng của một lớp đối tượng mà không cần thay đổi mã nguồn gốc. • Kotlin có thể tương thích với mã nguồn Java, cho phép lập trình viên dễ dàng chuyển đổi từ Java sang Kotlin hoặc sử dụng cả hai ngôn ngữ trong một dự án. Kotlin đã được Google chính thức công nhận là ngôn ngữ lập trình cho phát triển ứng dụng Android, và được sử dụng rộng rãi trong cộng đồng lập trình viên Android.

Ngoài ra, Kotlin cũng được sử dụng trong nhiều dự án khác, bao gồm phát triển trên máy chủ, ứng dụng web và phát triển ứng dụng trên các thiết bị nhúng. Jetpack Compose Jetpack Compose là một thư viện UI cho phép bạn xây dựng giao diện người dùng Android bằng cách sử dụng Kotlin. Nó cho phép tạo các giao diện người dùng tùy chỉnh và linh hoạt hơn. Bạn có thể tạo các giao di Jetpack 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. Với Jetpack Compose, người lập trình có thể tạo các giao diện người dùng động và tương tác với người dùng một cách dễ dàng. Framework này cũng cung cấp cho người dùng các tính năng như tạo theme, animation, và layout cực kỳ linh hoạt. Jetpack Compose được xây dựng trên cơ sở của các công nghệ hiện đại như Kotlin, coroutines, và Android Jetpack.

Trang 11 ĐỒ ÁN 2 Bùi Lê Hoài An - 20520985 3. Tại sao lại là Jetpack Compose? • Khai báo giao diện người dùng: Jetpack Compose sử dụng phong cách lập trình khai báo, cho phép bạn xác định giao diện bằng cách chỉ định những gì bạn muốn nó hiển thị, thay vì xác định cách để đạt được nó. Điều này làm cho mã dễ đọc, dễ hiểu hơn và dễ bảo trì hơn so với phương pháp truyền thống sử dụng XML. • Dễ dàng tích hợp: Jetpack Compose tích hợp tốt với các thành phần và công nghệ hiện có của Android, cho phép bạn sử dụng các tính năng mạnh mẽ khác như ViewModel, LiveData và Room để quản lý trạng thái ứng dụng và tương tác với cơ sở dữ liệu.

• Hiệu suất cao hơn: Jetpack Compose được tối ưu để cung cấp hiệu suất cao hơn so với phương pháp truyền thống. Compose sử dụng một cơ chế gọi là "Recompose" để chỉ cập nhật lại các phần tử giao diện người dùng đã thay đổi thay vì cập nhật toàn bộ giao diện. Điều này giúp giảm tải cho CPU và cải thiện hiệu suất của ứng dụng. • Tương thích và tái sử dụng tốt hơn: Jetpack Compose được thiết kế để tương thích với các phiên bản Android cũ hơn và mới hơn.

Bạn có thể sử dụng Compose trong các dự án hiện có hoặc tích hợp nó với mã Java/Kotlin truyền thống. Ngoài ra, Jetpack Compose cũng khuyến khích tái sử dụng mã và các thành phần giao diện người dùng, giúp tiết kiệm thời gian và công sức trong quá trình phát triển. • Cộng đồng mạnh mẽ: Jetpack Compose đã nhận được sự hỗ trợ rất lớn từ cộng đồng phát triển Android. Có nhiều tài liệu, ví dụ mã và nguồn tài nguyên hữu ích được chia sẻ trên trang web của Google và từ các nhà phát triển khác trên Internet.

Bạn cũng có thể nhận được sự hỗ trợ từ cộng đồng qua các diễn đàn, nhóm Facebook, và các nhóm Telegram. Tổng thể, Jetpack Compose là một framework mạnh mẽ và tiện ích cho việc phát triển giao diện người dùng Android. Nó giúp bạn tăng năng suất, cải thiện hiệu suất ứng dụng và tạo ra giao diện linh hoạt, tương tác. Mô hình tư duy trong Jetpack Compose Jetpack Compose là bộ công cụ khai báo giao diện người dùng hiện đại cho Android.

Compose sẽ giúp bạn dễ dàng ghi và duy trì giao diện người dùng ứng dụng bằng cách cung cấp API khai báo cho phép bạn hiển thị giao diện người dùng Trang 12 ĐỒ ÁN 2 Bùi Lê Hoài An - 20520985 của ứng dụng mà không cần ra lệnh thay đổi các chế độ xem giao diện người dùng. Thuật ngữ này cần được giải thích đôi chút nhưng có ý nghĩa rất quan trọng đối với cách thiết kế ứng dụng của bạn. Mô hình lập trình khai báo Trước đây, hệ phân cấp chế độ xem Android được biểu thị dưới dạng cây tiện ích giao diện người dùng. Khi trạng thái của ứng dụng thay đổi vì những yếu tố như hoạt động tương tác của người dùng, bạn cần cập nhật hệ thống phân cấp giao diện người dùng để hiển thị dữ liệu hiện tại.

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.addChild(View) hoặc img. Các phương thức này thay đổi trạng thái nội bộ của tiện ích. Việc điều chỉnh chế độ xem theo cách thủ công sẽ làm tăng khả năng xảy ra lỗi. Nếu một phần dữ liệu hiển thị ở nhiều vị trí thì bạn sẽ có thể quên cập nhật một trong các chế độ xem hiển thị dữ liệu đó.

Việc tạo các trạng thái không hợp lệ cũng rất dễ xảy ra khi hai lượt cập nhật xung đột theo cách không mong đợi. Ví dụ: một lượt cập nhật có thể cố gắng đặt một giá trị nút vừa mới bị xoá khỏi giao diện người dùng. Nói chung, độ phức tạp của việc bảo trì phần mềm tăng lên cùng với số chế độ xem cần cập nhật. Trong vài năm qua, toàn bộ ngành đã bắt đầu chuyển sang mô hình giao diện người dùng khai báo, giúp đơn giản hoá rất nhiều kỹ thuật liên quan đến việc xây dựng và cập nhật giao diện người dùng.

Kỹ thuật này hoạt động bằng cách tạo lại từ đầu toàn bộ màn hình, sau đó chỉ áp dụng những thay đổi cần thiết. Phương pháp này giúp bạn dễ dàng cập nhật hệ phân cấp chế độ xem có trạng thái theo cách thủ công. Compose là một khung giao diện người dùng khai báo. Một khó khăn trong việc tạo lại toàn bộ màn hình là giải pháp này có thể tốn kém về mặt thời gian, khả năng tính toán và mức sử dụng pin.

Để giảm thiểu chi phí này, Compose sẽ lựa chọn một cách thông minh những phần cần vẽ lại trên giao diện người dùng bất cứ lúc nào. Điều này có một số ảnh hưởng đến cách bạn thiết kế các thành phần trên giao diện người dùng, như đã thảo luận trong bài viết về tính năng kết hợp lại. Hàm composable đơn giản Trang 13 ĐỒ ÁN 2 Bùi Lê Hoài An - 20520985 Bằng cách sử dụng Compose, bạn có thể xây dựng giao diện người dùng bằng cách xác định một tập hợp các hàm có khả năng kết hợp lấy dữ liệu và cung cấp các thành phần trên giao diện người dùng. Một ví dụ đơn giản là hàm Greeting lấy String và cung cấp Text hiển thị tin nhắn chào mừng.