Đồ án tìm hiểu jetpack compose và xây dựng ứng dụng

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM - - BÁO CÁO ĐỒ ÁN Đề tài: TÌM HIỂU JETPACK COMPOSE VÀ XÂY DỰNG ỨNG DỤNG Giảng viên hướng dẫn: ThS Nguyễn Công Hoan Lớp: SE121.N21 Sinh viên thực hiện: BÙI LÊ HOÀI AN - 20520985 TP.HCM, tháng năm 2023 ĐỒ ÁN Bùi Lê Hồi An - 20520985 Trang ĐỜ ÁN Bùi Lê Hoài An - 20520985 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, em trang bị kiến thức kỹ thực tế để hồn thành Đồ án Để hồn thành đồ án này, với lịng biết ơn sâu sắc em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thơng tin với hệ thống thư viện đại, đa dạng loại sách tài liệu Gần gũi lời tốt đẹp xin gửi đến đến thầy Nguyễn Cơng Hoan tận tình giúp đỡ, định hướng cách tư hướng làm việc khoa học Đó góp ý q báu khơng q trình thực đồ án mà cịn hành trang tiếp bước cho em trình học tập làm việc sau Sau cùng, xin chúc quý Thầy Cơ khoa Cơng nghệ Phần mềm nói riêng giáo viên trường Công nghệ thông tin nói chung thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp Thành phố Hồ Chí Minh, tháng năm 2023 Sinh Viên Bùi Lê Hồi An Trang ĐỜ ÁN Bùi Lê Hoài An - 20520985 NHẬN XÉT CỦA GIẢNG VIÊN Trang ĐỜ ÁN Bùi Lê Hồi An - 20520985 MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Thông tin sinh viên: Tổng quan đề tài: 2.1 Giới thiệu đề tài: 2.2 Phạm vi nghiên cứu: 2.3 Nội dung nghiên cứu: 2.4 Kết quả hướng tới: Công cụ sử dụng: CHƯƠNG 2: JETPACK COMPOSE 10 Giới thiệu ngơn ngữ lập trình Kotlin 10 Jetpack Compose 10 Tại lại là Jetpack Compose? 11 Mơ hình tư Jetpack Compose 11 4.1 Mơ hình lập trình khai báo 12 4.2 Hàm composable đơn giản 12 4.3 Thay đởi mơ hình khai báo 14 4.4 Nội dung động 16 4.5 Recomposition 17 4.5.1 Các hàm composable thực thi theo thứ tự 18 4.5.2 Các hàm composable chạy song song 18 4.5.3 Bỏ qua recomposition nhiều 20 4.5.4 Recomposition khả quan 21 4.5.5 Các hàm có khả recomposition chạy thường xuyên 22 Bố cục Compose bản 22 5.1 Mục tiêu 22 5.2 Các hàm Composable 22 5.3 Các bố cục bản 23 Trang ĐỒ ÁN Bùi Lê Hồi An - 20520985 5.4 Mơ hình bố cục 26 5.5 Hiệu suất 28 5.6 Sử dụng modifiers 28 Quản lý trạng thái 29 6.1 Trạng thái và composition 30 6.2 Trạng thái composition 31 6.3 Chuyển trạng thái lên 32 6.4 Khôi phục trạng thái 35 6.4.1 Parcelize 35 6.4.2 MapSaver 36 6.5 Phần tử giữ trạng thái 36 6.6 Kích hoạt lại tính ghi nhớ tính tốn khố thay đởi 36 Vịng đời Composable 38 7.1 Tổng quan 38 7.2 Phân tích mợt Composable Composition 40 7.2.1 Thêm thơng tin hỗ trợ q trình recomposition 41 Bỏ qua nếu giá trị đầu vào không thay đổi 45 7.3 Các giai đoạn Jetpack Compose 46 8.1 giai đoạn một frame 46 8.2 Đọc trạng thái 48 8.3 Đọc trạng thái theo giai đoạn 49 8.3.1 Giai đoạn 1: Composition 49 8.3.2 Giai đoạn 2: Layout 49 8.3.3 Giai đoạn 3: Drawing 50 8.4 Tối ưu hóa việc đọc trạng thái 51 8.5 Vòng lặp tái kết hợp (phần phụ thuộc giai đoạn tuần hoàn) 53 Ktor 56 9.1 Tổng quan 56 9.2 Đặc điểm nổi bật 56 9.3 Vài thành phần Ktor 57 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 59 Tổng quan 59 1.1 Tên ứng dụng: Yum - Ứng dụng hỗ trợ đầu bếp 59 Trang ĐỒ ÁN Bùi Lê Hoài An - 20520985 1.2 Lý chọn ứng dụng 59 1.3 Đối tượng hướng đến 59 1.4 Môi trường phát triển ứng dụng 59 1.5 Kết quả mong đợi 60 1.6 Quy trình thực hiện cơng việc 60 Phân tích, thiết kế hệ thống 60 2.1 Xác định và mơ hình hóa u cầu phần mềm 60 2.1.1 Xác định yêu cầu 60 2.1.1.1 Một số yêu cầu phần mềm phải có 61 2.1.1.2 Ràng buộc logic ban đầu 61 2.1.1.3 Tính khả dụng 61 2.1.1.4 Tính ởn định 61 2.1.1.5 Hiệu suất 61 2.1.1.6 Bảo mật 62 2.1.2 Mơ hình hóa u cầu 62 2.1.2.1 Danh sách chức 62 2.1.2.2 Lược đồ Use-case 62 2.2 Thiết kế hệ thống 79 2.2.1 Kiến trúc hệ thống 79 2.3 Thiết kế liệu 81 2.4 Thiết kế giao diện 86 2.4.1 Sơ đồ liên kết màn hình 86 2.4.2 Danh sách màn hình 86 Cài đặt và thử nghiệm 107 CHƯƠNG 4: KẾT LUẬN 109 Kết quả đạt 109 Hướng phát triển 109 TÀI LIỆU THAM KHẢO 110 Trang ĐỜ ÁN Bùi Lê Hồi An - 20520985 CHƯƠNG 1: GIỚI THIỆU TỞNG QUAN Thơng tin sinh viên: MSSV 20520985 Họ tên Bùi Lê Hoài An Email 20520985@gm.uit.edu.vn Tổng quan đề tài: 2.1 Giới thiệu đề tài: Chúng ta khơng thể phủ nhận hữu ích framework cossplatform (Flutter, React-Native, …) giúp phần giải vấn đề mặt thời gian Tuy nhìn vào thực tế, cơng ty lớn giới tiếp tục sử dụng ứng dụng native, vấn đề lớn cần phải 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ì phát triển ứng dụng Phát triển ứng dụng native từ lâu tồn yếu điểm dễ dàng nhận thấy Đơn cử Android, việc nhà phát triển phải sử dụng loại ngôn ngữ khác hồn tồn với ngơn ngữ để lập trình – XML Đối với nhà phát triển công ty phải học song song ngôn ngữ (Java/Kotlin XML) thời gian, dẫn đến tiêu tốn nhiều chi phí Kể từ sau Google I/O 2019, Kotlin dần phát triển để thay Java, trở thành ngơn ngữ lập trình ưa chuộng cho phát triển ứng dụng Android native Và điều mong muốn đến: Jetpack Compose, sử dụng Kotlin làm ngơn ngữ lập trình đời với nhiệm vụ tiên quyết: source code chứa ngơn ngữ lập trình 2.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 cách sử dụng thư viện - package cách lưu trữ liệu Jetpack Compose Đồng thời, em áp dụng nghiên cứu vào ứng dụng thực tế để giúp em hiểu sâu kiến thức tìm hiểu 2.3 Nợi dung nghiên cứu: Trang ĐỜ ÁN Bùi Lê Hồi An - 20520985 Em tiến hành nghiên cứu chi tiết cách thức hoạt động, ưu - khuyết điểm thư viện - tính - package liên quan đến Compose 2.4 Kết quả hướng tới: Với đề tài này, em đề hai mục tiêu chính: • Đối với nhân: mở rộng kiến thức Compose thơng qua trình tìm hiểu áp dụng vào ứng dụng thực tế Các kiến thức tìm hiểu thơng qua đồ án thúc đẩy em phát triển thêm ứng dụng khác Compose Jetpack Đồng thời, em học cách nghiên cứu sử dụng framework cần trải qua trình nhằm giúp em dễ dàng tiếp xúc với công nghệ tương lai • Đối với lập trình viên dùng đồ án nghiên cứu làm tài liệu tham khảo: thông qua tài liệu nghiên cứu ứng dụng em xây dựng, lập trình viên khác dễ dàng định hướng cần phải tìm hiểu sử dụng Jetpack Compose Đồng thời em có nêu số khái niệm, kiến thức thư viện phổ biến đề xuất cộng đồng sử dụng Compose Jetpack, lập trình viên khác tham khảo tìm hiểu sâu Cơng cụ sử dụng: Trong trình xây dựng phần mềm, em sử dụng phần mềm sau: • Android Studio: phát triển front end • Intellij IDEA: phát triển back end • GitHub: quản lý source code Trang ĐỜ ÁN Bùi Lê Hồi An - 20520985 CHƯƠNG 2: JETPACK COMPOSE Giới thiệu ngơn ngữ lập trình Kotlin Kotlin ngơn ngữ lập trình đa năng, thiết kế để chạy tảng Java Virtual Machine (JVM), chạy tảng Android, JavaScript Native Kotlin phát triển JetBrains, với số cộng đồng lập trình viên đóng góp Một số đặc điểm Kotlin bao gồm: • Kotlin ngơn ngữ lập trình hướng đối tượng (OOP) hỗ trợ 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 • Kotlin có cú pháp đơn giản, dễ đọc dễ viết so với Java nhiều ngôn ngữ lập trình khác • Kotlin hỗ trợ null safety, giúp tránh lỗi runtime liên quan đến null pointer • Kotlin hỗ trợ extension function, giúp mở rộng tính lớp đối tượng mà khơng cần thay đổi mã nguồn gốc • Kotlin 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 sử dụng hai ngôn ngữ dự án Kotlin Google thức cơng nhận ngơn ngữ lập trình cho phát triển ứng dụng Android, sử dụng rộng rãi cộng đồng lập trình viên Android Ngoài ra, Kotlin sử dụng nhiều dự án khác, bao gồm phát triển máy chủ, ứng dụng web phát triển ứng dụng thiết bị nhúng Jetpack Compose Jetpack Compose thư viện UI cho phép bạn xây dựng giao diện người dùng Android cách sử dụng Kotlin Nó cho phép tạo giao diện người dùng tùy chỉnh linh hoạt Bạn tạo giao di Jetpack Compose framework để phát triển giao diện người dùng (UI) tảng Android, phát triển Google Nó cho phép lập trình viên tạo giao diện người dùng cách sử dụng hàm phương thức ngơn ngữ lập trình Kotlin, thay sử dụng XML trước Với Jetpack Compose, người lập trình tạo giao diện người dùng động tương tác với người dùng cách dễ dàng Framework cung cấp cho người dùng tính tạo theme, animation, layout linh hoạt Jetpack Compose xây dựng sở công nghệ đại Kotlin, coroutines, Android Jetpack Trang 10 ĐỜ ÁN Bùi Lê Hồi An - 20520985 2.4.3.10 Category 2.4.3.11 ChooseDate/Time Trang 96 ĐỒ ÁN Bùi Lê Hoài An - 20520985 2.4.3.12 Find ingredient Trang 97 ĐỜ ÁN Bùi Lê Hồi An - 20520985 2.4.3.13 RecipeDetail Trang 98 ĐỒ ÁN Bùi Lê Hồi An - 20520985 2.4.3.14 Overview Trang 99 ĐỜ ÁN Bùi Lê Hoài An - 20520985 2.4.3.15 Ingredient Trang 100 ĐỜ ÁN Bùi Lê Hồi An - 20520985 2.4.3.16 Direction Trang 101 ĐỒ ÁN Bùi Lê Hồi An - 20520985 2.4.3.17 Nutrition Trang 102 ĐỜ ÁN Bùi Lê Hoài An - 20520985 2.4.3.18 Review Trang 103 ĐỜ ÁN Bùi Lê Hồi An - 20520985 2.4.3.19 Other user Trang 104 ĐỒ ÁN Bùi Lê Hoài An - 20520985 2.4.3.20 Add to collection Trang 105 ĐỜ ÁN Bùi Lê Hồi An - 20520985 2.4.3.21 Leave review Trang 106 ĐỜ ÁN Bùi Lê Hồi An - 20520985 Cài đặt và thử nghiệm Source code: AnBuiii/Yum: Food recipe app using Jetpack Compose and Ktor (github.com) STT Chức Mức độ hoàn thành Đăng nhập 100% Xem cơng thức ăn 100% Quản lý sưu tập 100% Quản lý danh sách mua sắm 100% Trang 107 ĐỒ ÁN Bùi Lê Hoài An - 20520985 Quản lý lịch nấu ăn 100% Quản lý tài khoản 100% Trang 108 ĐỜ ÁN Bùi Lê Hồi An - 20520985 CHƯƠNG 4: KẾT LUẬN Kết quả đạt - Hiểu rõ Jetpack Compose, xây dựng ứng dụng hoàn chỉnh sử dụng Jetpack Compose - Hiểu rõ phát triển ứng dụng Android native tận dụng mạnh phát triển ứng dụng native Hướng phát triển - Ứng dụng ML (nhận dạng nguyên liệu) - Phát triển tính gợi ý ăn theo ngun liệu Trang 109 ĐỜ ÁN Bùi Lê Hồi An - 20520985 - TÀI LIỆU THAM KHẢO Android Document: Documentation | Android Developers Ktor Document: Welcome | Ktor Kotlinlang Slack: Slack StackOverFlow: Newest 'android-jetpack-compose' Questions - Stack Overflow Youtube: Android Developers - YouTube Trang 110