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 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ê Hoài An NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN .4 MỤC LỤC CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN .8 Thông tin sinh viên: .8 Tổng quan đề tài: 2.1 Giới thiệu đề tài: .8 2.2 Phạm vi nghiên cứu: .8 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 là 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 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 7.3 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 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 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 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 2.1.1.1 Mợt số 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 2.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 Thiết kế hệ thống 79 2.2.1 Xác định yêu cầu 60 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 TÀI LIỆU THAM KHẢO 109 CHƯƠNG 1: GIỚI THIỆU TỞNG QUAN Thơng tin sinh viên: MSSV 20520985 Họ tên Bùi Lê Hồi An Email 20520985@gm.uit.edu.vn Tởng quan đề tài: 2.1 Giới thiệu đề tài: Chúng ta phủ nhận hữu ích framework coss-platform (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: 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 q 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 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 Ngồ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 Tại lại là Jetpack Compose?