Đồ án tìm hiểu flutter và xây dựng ứng dụng nghe nhạc và chia sẻ bài hát

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG NGHE NHẠC VÀ CHIA SẺ BÀI HÁT Giảng viên hướng dẫn : ThS Nguyễn Công Hoan Sinh viên thực : Nguyễn Việt Hoàng Mã sinh viên 19521540 : Sinh viên thực : Bùi Đức Hoàng Nhật Mã sinh viên 20520260 : Tp HCM, tháng năm 2023 ĐỒ ÁN SE121.N21.PMCL LỜI CẢM ƠN Nhóm em xin chân thành cảm ơn hướng dẫn tận tình thầy Nguyễn Cơng Hoan - giảng viên hướng dẫn mơn Đồ án hỗ trợ cho nhóm q trình nghiên cứu để nhóm hồn thành đề tài Trong khoảng thời gian thực đồ án, chúng em học hỏi thêm nhiều kiến thức, kinh nghiệm, biết thêm nhiều công nghệ Nhóm em vận dụng nhữ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 những kiến thức Từ đó, vận dụng tối đa những học hỏi để hồn thành báo cáo đồ án Vì kiến thức chúng em cịn hạn hẹp nên khơng thể tránh khỏi những thiếu sót q trình thực đồ án Vì nhóm chúng em ln mong đợi nhận những ý kiến đóng góp quý báu từ phía giảng viên để qua rút kinh nghiệm, tự sửa chữa, hồn thiện thân tinh thần nghiêm túc, tự giác học hỏi Một lần nữa nhóm chúng em xin chân thành cảm ơn thầy Nhóm sinh viên thực Nguyễn Việt Hồng – Bùi Đức Hoàng Nhật ĐỒ ÁN SE121.N21.PMCL NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp.HCM, ngày … tháng năm 2023 GVHD ThS Nguyễn Công Hoan ĐỒ ÁN SE121.N21.PMCL MỤC LỤC Chương 1: MỞ ĐẦU 1.1 Lý chọn đề tài: 1.2 Phương pháp nghiên cứu phát triển: 1.3 Đối tượng hướng đến: Chương 2: GIỚI THIỆU VỀ FLUTTER 10 2.1 Giới thiệu ngôn ngữ lập trình Dart: .10 2.1.1 Ngơn ngữ lập trình Dart gì? 10 2.1.2 Ưu điểm Dart: 10 2.2 Giới thiệu framework Flutter: 11 2.2.1 Flutter gì? .11 2.2.2 Kiến trúc Flutter: .12 2.2.3 Ưu điểm Flutter so với framework khác: 13 Chương 3: CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER 16 3.1 Yêu cầu cấu hình phần cứng: 16 3.2 Hướng dẫn cài đặt Futter: 16 3.3 Tạo project Flutter với Visual Studio Code: 17 Chương 4: CÀI ĐẶT FIREBASE LƯU TRỮ CƠ SỞ DỮ LIỆU 19 4.1 Tạo Project Firebase: 19 4.2 Thêm Android vào project Firebase: 21 4.3 Thêm IOS vào project Firebase: 25 Chương 5: NGHIÊN CỨU TIỀN DỰ ÁN .30 5.1 Mơ hình kinh doanh: 30 5.2 Đối tượng sử dụng: 30 5.3 Rủi ro: 30 5.4 Tiêu chí thành cơng: 31 Chương 6: PHÁT TRIỂN ỨNG DỤNG NGHE NHẠC VÀ CHIA SẺ BÀI HÁT 33 6.1 Đặt vấn đề: 33 6.2 Phạm vi ứng dụng: .34 6.3 Mơ tả tốn: .34 6.4 Các chức chính: 34 ĐỒ ÁN SE121.N21.PMCL 6.5 Phân tích thiết kế: 35 6.5.1 Sơ đồ use case đặc tả use case: 35 6.6 Giao diện ứng dụng: 44 6.6.1 Màn hình khởi động: 44 6.6.2 Màn hình đăng nhập: 45 6.6.3 Màn hình đăng kí: 47 6.6.4 Màn hình trang chủ: 48 6.6.5 Màn hình thơng báo: 49 6.6.6 Màn hình lịch sử phát nhạc: .51 6.6.7 Màn hình thơng tin chi tiết Playlist: 52 6.6.8 Màn hình thơng tin chi tiết hát: 53 6.6.9 Màn hình tìm kiếm: 55 6.6.10 Màn hình thư viện lưu trữ: 57 6.6.11 Màn hình thơng tin tài khoản: .59 Chương 7: 61 KẾT LUẬN .61 7.1 Kết thu được: 61 7.2 Ưu điểm: 61 7.3 Khó khăn: 61 7.4 Phương hướng phát triển: 61 TÀI LIỆU THAM KHẢO 63 ĐỒ ÁN SE121.N21.PMCL MỤC LỤC HÌNH ẢNH Hình 2.1 Logo Dart 10 Hình 2.2 Logo Flutter .11 Hình 2.3 Kiến trúc Flutter 12 Hình 3.1 Chỉnh sửa biến môi trường 16 Hình 3.2 Chuẩn đốn Flutter với flutter doctor 17 Hình 3.3 Extension Flutter Visual Studio 17 Hình 3.4 Tạo project Flutter Visual Studio Code 18 Hình 3.5 Nhập tên project Flutter 18 Hình 3.6 Giao diện Visual Studio Code sau tạo thành công project Flutter 18 Hình 4.1 Tạo project Firebase 19 Hình 4.2 Nhập tên project Firebase 19 Hình 4.3 Chọn tiêu chí Create project 20 Hình 4.4 Hồn thành tạo project 21 Hình 4.5 Thêm Firebase vào app android 22 Hình 4.6 Điền thơng tin đăng ký 23 Hình 4.7 Cấu hình file build gradle 24 Hình 4.8 Thêm Firebase vào app IOS 25 Hình 4.9 Lấy Bundle id IOS 26 Hình 4.10 Tải di chuyển file GoogleService.json .27 Hình 4.11 Cấu hình Firebase 28 Hình 4.12 Giao diện thiết lập Firebase với IOS thành công 29 Hình 5.1 Sơ đồ use case tổng quát 36 Hình 6.1 Màn hình khởi động 44 ĐỒ ÁN SE121.N21.PMCL Hình 6.2 Màn hình đăng nhập 46 Hình 6.3 Màn hình đăng kí 47 Hình 6.4 Màn hình trang chủ 48 Hình 6.5 Màn hình thông báo 50 Hình 6.6 Màn hình lịch sử phát nhạc .51 Hình 6.7 Màn hình thơng tin chi tiết Playlist 52 Hình 6.8 Màn hình thơng tin chi tiết hát 54 Hình 6.9 Màn hình tìm kiếm 57 Hình 6.10 Màn hình thư viện lưu trữ .58 Hình 6.11 Màn hình thơng tin tài khoản 59 ĐỒ ÁN SE121.N21.PMCL Chương 1: MỞ ĐẦU 1.1 Lý chọn đề tài: Âm nhạc những ngành công nghiệp lớn giới, hàng triệu người khắp giới yêu thích nghe nhạc hàng ngày Vì vậy, nghiên cứu hệ hỗ trợ định cần thiết có tính ứng dụng cao thực tế Việc xây dựng hệ thống gợi ý hát giúp người dùng tìm thấy những hát mới, phù hợp với sở thích họ Ngồi hệ thống cung cấp cho người dùng danh sách hát mà họ thích dựa yếu tố sở thích âm nhạc, lịch sử nghe nhạc, thời gian nghe nhạc, v.v Việc sử dụng hệ thống gợi ý hát giúp cho người dùng tiết kiệm thời gian tìm kiếm chọn lựa hát, đồng thời giúp tăng trải nghiệm nghe nhạc cho người dùng Để giải vấn đề trên, nhóm em định chọn đề tài Xây dựng hệ thống gợi ý hát nhằm phát triển ứng dụng cung cấp lựa chọn phù hợp với người sử dụng giúp cải thiện trải nghiệm người dùng tăng khả giữ chân khách hàng 1.2 Phương pháp nghiên cứu phát triển: Nhóm chúng em thực đề tài ngôn ngữ Dart với công nghệ ứng dụng Flutter Trong trình tìm hiểu nghiệp vụ, nhóm chúng em có tham khảo diễn đàn âm nhạc mạng xã hội Cùng với ứng dụng có sẵn phát triển thành cơng App store CH Play để có nhìn tổng quát đề tài chọn Nhóm phát triển tuân theo quy chuẩn thiết kế ứng dụng hành Nhóm thực bước sau trình phát triển ứng dụng: Bước 1: Nhóm tiến hành thu thập thông tin yêu cầu người dùng Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mơ hình hố yêu cầu người dùng Bước 3: Nhóm tiến hành nghiên cứu ứng dụng sẵn có (với chức gần giống) thị trường để bắt kịp xu hướng ĐỒ ÁN SE121.N21.PMCL Bước 4: Nhóm thực chỉnh sửa lại mơ hình hố u cầu người dùng theo những thu thập Bước 5: Nhóm thực thiết kế CSDL Bước 6: Nhóm chọn Flutter (Cross platform) để phát triển ứng dụng phát huy tối đa tốc độ thực thi, đồng thời hỗ trợ tính cấp phục vụ cho yêu cầu người dùng Bước 7: Nhóm tiến hành thiết kế giao diện Prototype cho ứng dụng Bước 8: Nhóm tiến hành công đoạn cài đặt cho ứng dụng Bước 9: Nhóm tiến hành cơng việc bảo trì (sửa chữa lỗi phát triển thêm những tính chưa đề ban đầu) Bước 10: Nhóm hồn thành đồ án Mơ hình sử dụng để xây dựng đề tài: MVC 1.3 Đối tượng hướng đến: Nhóm đối tượng chủ yếu ứng dụng tổ chức/cá nhân có biết sử dụng smart phone độ tuổi từ 12 -> 60, cụ thể: - Bất kỳ yêu thích âm nhạc có nhu cầu lắng nghe nhạc thiết bị di động - Những nghệ sĩ có mong muốn đăng tải hát để lan tỏa đến với người Ứng dụng trợ thủ đắc lực giúp người dùng nghe nhạc truy cập thông tin hát, nghệ sĩ, album Người dùng tìm kiếm hát theo tên, nghệ sĩ, thể loại, hay lời hát Ứng dụng cung cấp cho người dùng thông tin chi tiết hát, bao gồm tên nghệ sĩ, album, năm phát hành, lời hát, đánh giá Ngồi ra, người dùng tạo danh sách phát cá nhân, lưu trữ hát yêu thích, chia sẻ những hát mà họ nghe với bạn bè qua mạng xã hội ĐỒ ÁN SE121.N21.PMCL Chương 2: GIỚI THIỆU VỀ FLUTTER Hình 2.1 Logo Dart 2.1 Giới thiệu ngơn ngữ lập trình Dart: 2.1.1 - Ngơn ngữ lập trình Dart gì? Dart ngơn ngữ lập trình mới, phát triển Google, chấp thuận tổ chức Ecma (ECMA-408) Nó sử dụng để xây dựng loại ứng dụng: web, server, di động (IOS Android) - Dart ngơn ngữ lập trình hướng đối tượng, với chế garbage collector, cú pháp kiểu C Nó hỗ trợ những khái niệm lập trình đại interface, mixin, abstract, generic, type - safe Đây ngôn ngữ lập trình mã nguồn mở, cơng bố Github 2.1.2 Ưu điểm Dart: Một số ưu điểm vượt trội Dart so với ngơn ngữ lập trình khác: - Năng suất: Dart có cú pháp dễ hiểu, rõ ràng súc tích Type-safe giúp lập trình viên xác định sớm lỗi Bên cạnh Dart có hệ sinh thái rộng lớn lên đến hàng nghìn packages 10 ĐỒ ÁN SE121.N21.PMCL Mơ tả cách sử dụng xử lý hình: Màn hình trang chủ hiển thị hát, danh sách hát, nghệ sĩ thịnh hành, mới, bật, … gồm thành phần chính: - Phần gồm tên ứng dụng Button góc phải thơng báo lịch sử phát nhạc - Phần ListView hát, danh sách hát, nghệ sĩ mới, bật, thịnh hành, … bấm vào item hát thông tin chi tiết - Phần BottomNavigation gồm tab: Home, Search, For you, Library, Account 6.6.5 Màn hình thơng báo: 49 ĐỒ ÁN SE121.N21.PMCL Hình 6.5 Màn hình thơng báo Mơ tả cách sử dụng xử lý hình: Màn hình thơng báo thể thông báo hát, playlist phát hành gồm thành phần: - Phần gồm TextView tiêu đề hình mơ tả hình button back để quay lại hình Trang chủ - Phần ListView thông báo, item gồm tên thông báo thơng tin chi tiết thơng báo 50 ĐỒ ÁN SE121.N21.PMCL - Phần BottomNavigation gồm tab: Home, Search, For you, Library, Account 6.6.6 Màn hình lịch sử phát nhạc: Hình 6.6 Màn hình lịch sử phát nhạc Mô tả cách sử dụng xử lý hình: Màn hình thể lịch sử phát nhạc người dùng gồm thành phần: 51 ĐỒ ÁN SE121.N21.PMCL - Phần gồm TextView tiêu đề hình button để quay lại hình Trang chủ - Phần ListView danh sách hát người dùng phát nhạc - Phần BottomNavigation gồm tab: Home, Search, For you, Library, Account 6.6.7 Màn hình thơng tin chi tiết Playlist: Hình 6.7 Màn hình thơng tin chi tiết Playlist Mô tả cách sử dụng xử lý hình: Màn hình thơng tin chi tiết Playlist hiển thị tên Playlist, nhà phát hành, số lượt yêu thích, số hát list hát gồm thành phần chính: 52 ĐỒ ÁN SE121.N21.PMCL - Phần tên Playlist hình ảnh đại diện Botton quay lại hình trước - Phần gồm TextView hiển thị tên nhà phát hành, thơng tin mơ tả, số lượt người thích, thời gian phát Playlist, số lượt hát button phát lặp hát ngẫu nhiên - Phần danh sách hát có Playlist, item gồm tên hát, nhạc sĩ button cài đặt - Phần BottomNavigation gồm tab: Home, Search, For you, Library, Account - Ngồi cịn có TextView tơ đậm phía cuối hình xuất người dùng bấm phát nhạc hát phát hiển thị với tên hát, nhạc sĩ 6.6.8 Màn hình thơng tin chi tiết hát: 53 ĐỒ ÁN SE121.N21.PMCL Hình 6.8 Màn hình thơng tin chi tiết hát Mơ tả cách sử dụng xử lý hình: Màn hình thơng tin chi tiết hát hiển thị hát phát gồm tên hát, nhạc sĩ, hình ảnh, lời hát gồm thành phần: - Phần chứa thông tin bao gồm ảnh, tên hát, nghệ sĩ thể - Phần chứa phần phát nhạc bao gồm phát nhạc, nút Phát nhạc, nút chuyển tiếp hát, nút phát ngẫu nhiên nút chia sẻ hát 54 ĐỒ ÁN SE121.N21.PMCL - Phần TextView Lời hát, tự động cuộn tương ứng với phần nhạc phát 6.6.9 Màn hình tìm kiếm: 55 ĐỒ ÁN SE121.N21.PMCL 56 ĐỒ ÁN SE121.N21.PMCL Hình 6.9 Màn hình tìm kiếm Mô tả cách sử dụng xử lý hình: Màn hình tìm kiếm giúp người dùng tìm kiếm hát, playlist, nghệ sĩ gồm thành phần: - Phần gồm ô TextInput dùng để điền nội dung cần tìm kiếm - Phần gồm GridView chứa danh sách hát theo danh mục Khi nhấn vào item hình chuyển đến Màn hình Hiển thị thơng tin Danh sách hát tương ứng - Phần BottomNavigation gồm Tab: Home, Search, For You, Library Account 6.6.10.Màn hình thư viện lưu trữ: 57 ĐỒ ÁN SE121.N21.PMCL Hình 6.10 Màn hình thư viện lưu trữ Mơ tả cách sử dụng xử lý hình: Màn hình thư viện lưu trữ hiển thị hát, playlist, nghệ sĩ yêu thích người dùng thêm vào thư viện lưu trữ gồm thành phần: - Phần gồm AppBar với Label hiển thị Your Library, Search Button dùng để tìm kiếm - Phần gồm ListView chứa danh sách item Filter thể loại danh sách phát khác Sau chọn item, hệ thống danh sách hát tương ứng với Filter 58 ĐỒ ÁN SE121.N21.PMCL - Phần gồm GridView chứa danh sách hát thư viên Khi người dùng nhấn vào danh sách ứng dụng thể thông tin chi tiết danh sách hát tương ứng - Phần BottomNavigation gồm Tab: Home, Search, For You, Library Account 6.6.11.Màn hình thơng tin tài khoản: Hình 6.11 Màn hình thơng tin tài khoản 59 ĐỒ ÁN SE121.N21.PMCL Mô tả cách sử dụng xử lý hình: Màn hình thơng tin tài khoản hiển thị profile người dùng, playlist người dùng đăng tải, số người theo dõi, số lượng người theo dõi gồm thành phần: - Phần gồm TextView tên người dùng button cài đặt chỉnh sửa thông tin tài khoản - Phần gồm ảnh đại diện người dùng TextView hiển thị số playlist, lượt theo dõi, người theo dõi button chỉnh sửa tài khoản chia sẻ tài khoản - Phần ListView hiển thị Playlist người dùng đăng tải 60 ĐỒ ÁN SE121.N21.PMCL Chương 7: KẾT LUẬN 7.1 Kết thu được: - Căn vận dụng Dart Flutter vào việc phát triển ứng dụng di động - Sử dụng Firebase kết nối với Flutter để sử dụng Authentication - Kết thúc mơn học, nhóm tìm hiểu hoàn thành ứng dụng tương đối hoàn chỉnh - Trong khoảng thời gian hạn chế, nhóm phát triển phần mềm tương đối hoàn thiện Phần mềm tại đáp ứng tốt chức người sử dụng thông thường việc tìm kiếm thơng tin thực phẩm 7.2 Ưu điểm: - Đánh giá giao diện người dùng: thiết kế trực quan hóa, dễ sử dụng tương tác người dùng - Tính chức năng: khả tìm kiếm phát hát, tạo danh sách phát, tạo quản lý playlist, tích hợp dịch vụ âm nhạc khác, v.v - Tính tương thích đa tảng: bao gồm iOS Android, tích hợp tương thích với thiết bị hệ điều hành khác - Đánh giá tính bảo mật quyền riêng tư: bảo mật quyền riêng tư mà ứng dụng âm nhạc áp dụng để bảo vệ thông tin cá nhân dữ liệu người dùng 7.3 Khó khăn: - Gặp khó khăn việc tìm kiếm xây dựng, chuyển đổi bảng CSDL thành kiểu dữ liệu tương ứng Dart - Khó khăn việc quản lý, bố cục code - u cầu máy tính có cấu hình cao để phát triển ứng dụng, chiếm nhiều tài nguyên Debug 7.4 Phương hướng phát triển: 61 ĐỒ ÁN SE121.N21.PMCL - Cải thiện tốc độ phản hồi, cung cấp trải nghiệm chạm vuốt mượt mà - Sắp xếp bố cục hợp lý hơn, mang lại trải nghiệm sử dụng đơn giản trực quan - Tổ chức quản lý Code Cơ sở dữ liệu hợp lý khoa học - Bổ sung tăng độ xác Cơ sở dữ liệu - Vận dụng công nghệ để mang tiếp tục phản triển chức mà nhóm dự định 62 ĐỒ ÁN SE121.N21.PMCL TÀI LIỆU THAM KHẢO Nhóm có dùng tài liệu tham khảo từ trang chủ Flutter Bên cạnh nhóm chúng em tham khảo nhiều chủ đề thảo luận, ví dụ minh hoạ Dart, Flutter, Firebase trang web Stackoverflow, Github, - https://pub.dev/ - https://github.com/flutter/samples - https://flutter.dev/docs - https://stackoverflow.com/ - https://youtube.com/ - https://firebase.google.com/docs/android/setup - https://firebase.google.com/docs Ứng dụng liên quan: Spotify, SoundCloud 63