ĐẠ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 - o0o - BÁO CÁO ĐỒ ÁN TÌM HIỂU FLUTTER VÀ PHÁT TRIỂN ỨNG DỤNG NGHE NHẠC Giảng viên hướng dẫn: ThS.Huỳnh Tuấn Anh Nhóm sinh viên thực hiện: Nguyễn Dỗn Thịnh 19522281 Hồng Quốc Trọng 19522408 Thành phố Hồ Chí Minh, tháng năm 2022 MỤC LỤC CHƯƠNG TỔNG QUAN 1.1 Giới thiệu chung 1.2 Mục tiêu 1.3 Các phương pháp để thực 1.4 Các chức CHƯƠNG TÌM HIỂU FLUTTER 2.1 Flutter 2.1.1 Tổng quan lịch sử: 2.1.2 Ưu điểm nhược điểm Flutter 2.2 Ngôn ngữ Dart 2.3 Kiến trúc Flutter 10 CHƯƠNG 11 XÂY DỰNG ỨNG DỤNG .11 3.1 Use case diagram: 11 3.2 Chi tiết chức năng: 13 3.2.1 Thông tin chức đăng ký 13 3.2.2 Thông tin chức đăng nhập 13 3.2.3 Thông tin chức quên mật 14 3.2.4 Thông tin chức đổi thông tin 15 3.2.5 Thông tin chức tìm kiếm 15 3.2.6 Thông tin chức yêu thích 17 3.2.7 Thơng tin chức xem danh sách u thích 17 3.2.8 Thông tin chức xem danh sách album 18 3.2.9 Thông tin chức them nhạc vào danh sách album 18 3.2.10 Thông tin chức Thay đổi thông tin album 19 3.2.11 Thơng tin chức Xóa thơng tin album 20 3.2.12 Thông tin chức Phát nhạc 20 3.2.13 Thông tin chức Phát ngẫu nhiên 21 3.2.14 Thông tin chức Phát lặp 22 3.2.15 Thông tin chức hẹn ngủ 22 3.3 Thiết kế giao diện 23 3.3.1 Xây dựng hình đăng nhập ứng dụng: 23 3.3.2 Xây dựng hình Đăng ký: 25 3.3.3 Xây dựng hình Quên mật khẩu: 26 3.3.4 Xây dựng hình chính: 28 3.3.5 Xây dựng hình Trang khám phá 30 3.3.6 Xây dựng hình Tìm kiếm: 31 3.3.7 Xây dựng hình Nghệ sĩ: 32 3.3.8 Xây dựng hình Album: 33 3.3.9 Xây dựng hình Phát nhạc: 35 CHƯƠNG 36 TỔNG KẾT 36 4.1 Kết đạt 36 4.2 Hướng phát triển 37 TÀI LIỆU THAM KHẢO .38 Lời cảm ơn Đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến tập thể quý thầy cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý thầy cô khoa Công nghệ phần mềm giúp cho chúng em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm tác giả xin gửi lời cảm ơn lòng biết ơn sâu sắc tới thầy Huỳnh Tuấn Anh, người hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến quý báu giúp em hồn thành báo cáo mơn học Trong thời gian học đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực khơng tránh khỏi thiếu sót Chính vậy, em mong nhận góp ý từ phía thầy/cơ nhằm hoàn thiện kiến thức mà em học tập hành trang để em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý thầy/cô! Nhận xét giảng viên …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ……………………………………………….…………………………………… ……………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….………………………………… ………………………………………………….……………………………… Giảng viên hướng dẫn ThS Huỳnh Tuấn Anh CHƯƠNG TỔNG QUAN 1.1 Giới thiệu chung Âm nhạc đóng vai trị quan trọng sống người, giúp giải tỏa áp lực sống ngày, sợi dây gắn kết người với người Do nhu cầu nghe nhạc chia sẻ hát yêu thích cho người khác thưởng thức cao chúng em định xây dựng ứng dụng nghe nhạc thơng qua tìm hiểu Flutter 1.2 Mục tiêu - Tìm hiểu tổng quan Flutter, lịch sử phát triển, ưu nhược điểm, so sánh Flutter với đối thủ Xây dựng ứng dụng để thực hoá giải pháp - Tìm hiểu ngơn ngữ Dart: cú pháp, kiểu liệu thường dùng, lập trình bất động bộ, kỹ thuật lập trình, … - Nâng cao kĩ chuyên môn xây dựng ứng dụng di động, thiết kế giao diện người dùng phù hợp với mục đích ứng dụng - Áp dụng công nghệ lạ vào ứng dụng 1.3 Các phương pháp để thực Thực đề tài theo bước: - Phân tích đề tài - Tham khảo ứng dụng tương tự có thị trường - Nghiên cứu công nghệ để áp dụng - Phát triển ứng dụng - Đưa cho số người dùng sử dụng thử để lấy ý kiến phản hồi - Kiểm thử hồn thiện ứng dụng Những cơng nghệ sử dụng: - Flutter - Firebase - Web scraping 1.4 Các chức  Phát nhạc nhiều định dạng(bao gồm audio video)  Lưu danh sách hát ưa thích, chơi nhạc chế độ random hát repeat danh sách nhạc chơi  Tìm kiếm nhạc online trang: http://mp3.zing.vn Kèm theo tính cho phép nghe trực tuyến download hát  Các playlist(danh sách hát yêu thích) quản lý riêng tiện lợi, kèm theo số chức tiện lợi : xem thông số hát, chuyển đổi qua lại hát playlist, ………  Chức hẹn tắt máy, tiện lợi cho người dùng có thói quen nghe nhạc thường xuyên CHƯƠNG TÌM HIỂU FLUTTER 2.1 Flutter 2.1.1 Tổng quan lịch sử: Flutter công cụ phát triển phần mềm mã nguồn mở giúp lập trình viên xây dựng ứng dụng tảng di động, web máy tính với codebase Flutter giới thiệu vào năm 2015 sau thử nghiệm phát triển mắt phiên thức vào ngày tháng 12 năm 2018 Từ Flutter phát triển mạnh mẽ trở thành đối thủ đáng gồm với công cụ lập trình đa tảng trước đó, Flutter giải pháp phát triển ứng dụng đa tảng sử dụng nhiều với cộng đồng không ngừng phát triển Flutter ứng dụng có số đứng thứ 17 github Tháng năm 2020 theo thống kê Google có hai triệu lập trình viên sử dụng Flutter 50.000 ứng dụng sử dụng Flutter đưa lên PlayStore Chỉ sau tháng số lên tới 60.000 Flutter sử dụng để phát triển nhiều ứng dụng tiếng phục vụ hàng trăm triệu người dùng giới 2.1.2 Ưu điểm nhược điểm Flutter Hình 2.1: Các cơng ty sử dụng Flutter - Ưu điểm:  Tiết kiệm thời gian nhân lực: Flutter cơng cụ lập trình đa tảng, ta tạo ứng dụng cho Android iOS Từ tiết kiệm thời gian nguồn nhân lực phát triển, kiểm thử, cập nhật bảo trì  Hiệu tuyệt vời: Flutter sử dụng ngôn ngữ Dart, biên dịch trực tiếp thành mã máy mà thơng qua cách giao tiếp trung gian khác Vì ứng dụng hoạt động với hiệu cao công cụ phát triển ứng dụng đa tảng khác  Hỗ trợ hot reload: Hot reload cho phép trực tiếp thay đổi giao diện máy ảo hay thiết bị thật mà không cần phải rebuild hay khởi động lại ứng dụng, từ tiết kiệm thời gian lập trình viên giúp việc xây dựng ứng dụng, sửa lỗi dễ dàng  Khả tương thích: Flutter sử dụng giao diện nên lập trình viên gặp vấn đề liên quan tới khả tương thích giao diện gặp vấn đề phiên hay hệ điều hành khác  Mã nguồn mở: Flutter công nghệ mã nguồn mở phát triển Google cộng đồng lập trình viên hoạt động tích cực Việc phát triển mắt ứng dụng với Flutter hồn tồn miễn phí Nhiều gói mở rộng tài liệu đóng góp giúp việc phát triển phần mềm Flutter trở nên dễ dàng - Nhược điểm:  Phải học ngôn ngữ mới: Nếu muốn lập trình với Flutter, lập trình viên cần phải học ngôn ngữ Dart Tuy nhiên khơng phải vấn đề lớn Dart ngôn ngữ dễ học  Không phù hợp để xây dựng ứng dụng theo giao diện Android hay iOS: vài ứng dụng xây dựng giao diện theo Android hay iOS không phù hợp với Flutter  Kích thước ứng dụng lớn: Flutter khơng sử dụng giao diện hệ điều hành mà sử dụng thư viện nên kích thước ứng dụng lớn Tuy nhiên Google nói cải thiện điều tương lai  Công nghệ cịn thư viện có sẵn chưa đa dạng: Flutter giới thiệu thức chưa năm, cịn nhiều lỗi vấn đề chưa giải Cộng đồng phát triển số lượng thư viện chưa thật đa dạng 2.2 Ngôn ngữ Dart Flutter sử dụng ngơn ngữ lập trình Dart, ngơn ngữ Dart đời từ năm 2011 phát triển Google, nhắm đến việc tạo ứng dụng đa tảng cho di động, máy tính, server web Dart theo hướng đối tượng, đơn giản, dễ tiếp cận dễ hiểu Ngơn ngữ có cú pháp giống ngôn ngữ C Dart ngôn ngữ mã nguồn mở miễn phí, phát triển Github Phiên 2.9.0 Dart hỗ trợ hai cách biên dịch “Just In Time” (JIT) “Ahead Of Time” (AOT) - Với Flutter, release ứng dụng ngôn ngữ Dart biên dịch AOT thành thư viện native, ARM, x86 Sau tất thư viện resource dựng thành file apk ipa Với cách chạy ứng có hiệu tốt nhất, dung lượng nhỏ loại bỏ thứ không cần thiết - Khi chế độ debug Dart biên dịch JIT ứng dụng chạy, lập trình viên thay đổi cập nhật nhờ tạo thuận tiện trình phát triển phần mềm 2.3 Kiến trúc Flutter Flutter gồm hai tầng Engine Framework - Tầng engine chứa thư viện đồ họa 2D giúp render giao diện người dùng máy ảo Dart môi trường để thực thi mã biên dịch mã Dart Đây nơi thực việc kết nối với hệ thống - Flutter framework: viết Dart, cung cấp lớp, chức widget dùng để tạo ứng dụng Flutter Lập trình viên sử dụng chủ yếu tầng để lập trình Flutter framework cung cấp hai tập hợp widget Material Cupertino ứng với hai hệ điều hành Android iOS 10 Danh sách xử lý: STT Tên xử lý Sign in Điều kiện gọi thực Sau nhập email address password 24 Ý nghĩa Ghi Đăng nhập vào Email address app password phải hợp lệ thực Forgot your password Mở hình quên mật Được sử dụng người dung quên mật Sign up Mở hình đăng ký Đăng ký tài khoản 3.3.2 Xây dựng hình Đăng ký: 25 Danh sách xử lý: STT Tên xử lý Create account Điều kiện gọi thực Ý nghĩa Khi thông tin Đăng ký tài nhập đầy đủ hợp lệ khoản vào hệ thống Quay lại trang đăng nhập Sign in 3.3.3 Xây dựng hình Quên mật khẩu: 26 Ghi Sau đăng ký có mail gửi đến mail người dùng để xác thực email Danh sách xử lý: STT Tên xử lý Request reset password link Cancel Điều kiện gọi thực Ý nghĩa Ghi Khi Email nhập hợp lệ Yêu cầu hệ thống gửi mail đến email yêu cầu Email phải tồn Quay lại trang đăng nhập 27 3.3.4 Xây dựng hình chính: 28 Danh sách xử lý STT Tên xử lý Điều kiện gọi thực Ý nghĩa Ghi Album từ cá nhân hệ thống recommend Thẻ album danh sách album Mở danh sách hát có album Thẻ hát Phát nhạc Nút thêm thẻ hát Mở lựa chọn liên quan đến hát Avatar người dùng Mở trang thông Trang thông tin tin người dùng người dung dung để thay đổi thông tin họ xem thông tin 29 Các lựa chọn Thêm vào danh sách yêu thích,them vào playlist, xem nghệ sĩ hát 3.3.5 Xây dựng hình Trang khám phá Mơ tả trang khám phá: Bao gồm album liên quan đến  Favorite songs người dung  PlayBack albums  Playlists người dung 30 3.3.6 Xây dựng hình Tìm kiếm: Mơ tả hình tìm kiếm: Các liệu tìm kiếm dựa ZingMP3API Các thẻ Songs tự động phát nhạc Các thẻ Artists mở trang artist liên quan đến artist Các thẻ albums mở hát album 31 3.3.7 Xây dựng hình Nghệ sĩ: Mơ tả hình nghệ sĩ Bao gồm thông tin description, Tên, ngày tháng năm sinh Nút follow để Follow nghệ sĩ 32 3.3.8 Xây dựng hình Album: 33 Danh sách xử lý STT Tên xử lý Điều kiện gọi thực Ý nghĩa Nút yêu thích Thêm album vào danh sách playlist Nút chọn phát ngẫu nhiên Phát nhạc ngẫu nhiên album 34 Ghi 3.3.9 Xây dựng hình Phát nhạc: 35 Danh sách xử lý STT Tên xử lý Điều kiện gọi thực Ý nghĩa Nút yêu thích Thêm nhạc vào danh sách yêu thích Nút thêm vào album Thêm nhạc vào playlist Nút hẹn ngủ Đặt thời gian hẹn ngủ Nút phát nhạc ngẫu nhiên Phát nhạc ngẫu nhiên theo playlist phát Nút phát nhạc lặp lại Lặp lại hát sau phát xong Ghi CHƯƠNG TỔNG KẾT 4.1 Kết đạt • Phần mềm đáp ứng sơ yêu cầu phần mềm Nghe nhạc 36 • Ngồi phần mềm có khả phát triển sau này, mang hạn chế định hạn đặc điểm tổ chức phát triển có phần đơn giản • Đây bước đầu giúp chúng em tích lũy kiến thức, kinh nghiệm nghiệp vụ kĩ sư phát triển phần mềm • Sau đồ án này, chúng em học được: o Cách sử dụng Flutter để phát triển ứng dụng di động o Kỹ tổ chức, làm việc nhóm suốt trình phát triển phần mềm 4.2 Hướng phát triển Trong thời gian học kì, tụi em nỗ lực cố gắng tìm hiểu làm tốt khả để hồn thiện đề tài Tuy nhiên có nhiều sai sót hạn chế Mong quý độc giả thầy/cô bỏ qua Về hạn chế:  Hệ thống xây dựng chưa thật ứng dụng hoàn chỉnh  Hệ thống ứng dụng nhỏ nghe nhạc cần có liệu nghe nhạc lớn để ứng dụng thích ứng so với thực tế  Vẫn có vài lỗi nhỏ lặt vặt ứng dụng Chính hạn chế trên, hướng phát triển đề tài lớn, rộng Rất mong quý độc giả thầy/cô chỉnh sửa bổ sung bỏ qua sai sót nhỏ Chúng tơi xin chân thành cảm ơn 37 TÀI LIỆU THAM KHẢO [1] Tổng quan Flutter (viblo.asia) [2] Web Scraping [3] Flutter Firebase [4] Tìm hiểu ngôn ngữ Dart - Phần I (viblo.asia) [5] Zing MP3 API 38 ... định xây dựng ứng dụng nghe nhạc thơng qua tìm hiểu Flutter 1.2 Mục tiêu - Tìm hiểu tổng quan Flutter, lịch sử phát triển, ưu nhược điểm, so sánh Flutter với đối thủ Xây dựng ứng dụng để thực... lập trình đa tảng trước đó, Flutter giải pháp phát triển ứng dụng đa tảng sử dụng nhiều với cộng đồng không ngừng phát triển Flutter ứng dụng có số ? ?ứng thứ 17 github Tháng năm 2020 theo thống kê... sư phát triển phần mềm • Sau đồ án này, chúng em học được: o Cách sử dụng Flutter để phát triển ứng dụng di động o Kỹ tổ chức, làm việc nhóm suốt q trình phát triển phần mềm 4.2 Hướng phát triển