Khóa luận xây dựng website nghe nhạc trực tuyến

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM PHẠM MINH VIỆT KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN BUILDING A MUSIC STREAMING WEBSITE KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2023 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM PHẠM MINH VIỆT – 18520398 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN BUILDING A MUSIC STREAMING WEBSITE KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN TS ĐỖ THỊ THANH TUYỀN ThS TRẦN THỊ HỒNG YẾN TP HỒ CHÍ MINH, 2023 THƠNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin LỜI CẢM ƠN Em xin chân thành cảm ơn tập thể quý thầy cô trường Đại học Công nghệ Thông tin, quý thầy cô khoa Công nghệ Phần mềm, bạn truyền đạt kiến thức, tạo điều kiện hỗ trợ nhiệt tình cho em suốt trình em theo học trường Đặc biệt, em xin gửi lời cảm ơn đến với cô Đỗ Thị Thanh Tuyền cô Trần Thị Hồng Yến tạo điều kiện cho em thực đề tài khóa luận tốt nghiệp, đồng thời giúp đỡ, giải đáp khúc mắc có thời gian thực đề tài khóa luận tốt nghiệp Mặc dù có nhiều cố gắng suốt trình thực đề tài, bên cạnh cịn có mặt hạn chế, thiếu sót Em mong nhận góp ý q thầy bạn để hồn thiện kiến thức, lấy làm hành trang quý báu chặng đường Một lần nữa, em xin chân thành cảm ơn TP Hồ Chí Minh, tháng năm 2023 Sinh viên thực đề tài Phạm Minh Việt MỤC LỤC CHƯƠNG 1: TỔNG QUAN .17 1.1 Lý chọn đề tài .17 1.2 Mục tiêu đề tài 17 1.3 Phạm vi 17 1.4 Đối tượng sử dụng .18 1.5 Phương pháp thực 18 1.6 Kết mong đợi 18 CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 19 2.1 Công cụ quản lý phát triển 19 2.1.1 Visual Studio Code 19 2.1.2 Visual Studio .20 2.1.3 Git 22 2.1.4 Github 23 2.1.5 Insomnia 25 2.2 Công nghệ sử dụng 26 2.2.1 Vue.js 26 2.2.2 Vue Audio Visual 26 2.2.3 Javascript 27 2.2.4 Fuse.js 28 2.2.5 LocalForage .28 2.2.6 .NET Core ASP.NET Core 29 2.2.7 Entity Framework 29 2.2.8 PostgreSQL .30 2.2.9 Azure App Services 31 2.2.10 Azure Blob Storage 32 2.2.11 Azure Cognitive Services 33 CHƯƠNG 3: THIẾT KẾ ỨNG DỤNG 34 3.1 Phân tích yêu cầu hệ thống .34 3.1.1 Phân tích yêu cầu chức .34 3.1.1.1 Yêu cầu lưu trữ 34 3.1.1.2 Yêu cầu tính .34 3.1.2 Phân tích yêu cầu phi chức .35 3.1.3 Phân tích yêu cầu người dùng 36 3.1.3.1 Mơ hình use case tồn hệ thống 36 3.1.3.2 Danh sách actor .37 3.1.3.3 Danh sách use case 37 3.1.3.4 Đặc tả chi tiết use case 41 3.2 Phân tích thiết kế hệ thống 73 3.2.1 Thiết kế xử lý 73 3.2.2 Thiết kế sở liệu 81 3.2.2.1 Lược đồ sở liệu 81 3.2.2.2 Mô tả bảng liệu 82 3.2.3 Thiết kế kiến trúc hệ thống 87 3.2.3.1 Kiến trúc tổng thể 87 3.2.3.2 Kiến trúc website 88 CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG 90 4.1 Thiết kế giao diện 90 4.1.1 Danh sách hình 90 4.1.2 Giao diện hình .92 4.2 Triển khai hệ thống 106 4.2.1 Máy chủ 106 4.2.2 Lưu trữ .106 CHƯƠNG 5: KẾT LUẬN 107 5.1 Kết đạt .107 5.2 Thuận lợi khó khăn .107 5.2.1 Thuận lợi 107 5.2.2 Khó khăn 108 5.3 Hướng phát triển .108 TÀI LIỆU THAM KHẢO .109 DANH MỤC HÌNH Hình 2.1 Visual Studio Code[1] 19 Hình 2.2 Visual Studio[2] 20 Hình 2.3 Git[3] 22 Hình 2.4 Github[4] 23 Hình 2.5 Insomnia[5] 25 Hình 2.6 Vue.js[6] 26 Hình 2.7 Vue Audio Visual[7] 26 Hình 2.8 Javascript[8] 27 Hình 2.9 Fuse.js[9] 28 Hình 2.10 LocalForage[10] 28 Hình 2.11 NET Core[11] 29 Hình 2.12 PostgreSQL[15] 30 Hình 2.13 Microsoft Azure[16] 31 Hình 3.1 Mơ hình use case tồn hệ thống 36 Hình 3.2 Biểu đồ chức “Sign in” 73 Hình 3.3 Biểu đồ chức “Sign up” .73 Hình 3.4 Biểu đồ chức “Change password” .74 Hình 3.5 Biểu đồ chức “Search tracks” .74 Hình 3.6 Biểu đồ chức “Search artist” 74 Hình 3.7 Biểu đồ chức “Rate” 75 Hình 3.8 Biểu đồ chức “Download” 75 Hình 3.9 Biểu đồ chức “Add to playlist” .76 Hình 3.10 Biểu đồ chức “Create playlist” 76 Hình 3.11 Biểu đồ chức “Edit playlist” .76 Hỉnh 3.12 Biểu đồ chức “Delete playlist” 77 Hỉnh 3.13 Biểu đồ chức “Remove track” 77 Hỉnh 3.14 Biểu đồ chức “Edit information” 77 Hỉnh 3.15 Biểu đồ chức “Follow/unfollow user” 78 Hỉnh 3.16 Biểu đồ chức “Create artist’s biography” 78 Hình 3.17 Biểu đồ chức “Upload track” 78 Hỉnh 3.18 Biểu đồ chức “Edit track” 79 Hình 3.19 Biểu đồ chức “Delete track” .79 Hỉnh 3.20 Biểu đồ chức “Create captions” “Edit captions” 80 Hỉnh 3.21 Biểu đồ chức “Generate captions” 80 Hỉnh 3.22 Lược đồ sở liệu[21] .81 Hình 3.23 Sơ đồ kiến trúc tổng thể 87 Hình 3.24 Sơ đồ kiến trúc website 88 Hình 4.1 Giao diện đăng nhập 92 Hình 4.2 Giao diện chưa đăng nhập 93 Hình 4.3 Giao diện sau đăng nhập 94 Hình 4.4 Giao diện ‘home’ 95 Hình 4.5 Giao diện ‘discover’ 96 Hình 4.6 Giao diện ‘my_tracks’ 97 Hình 4.7 Giao diện ‘my_playlists’ 98 Hình 4.8 Giao diện ‘storage’ .98 Hỉnh 4.9 Giao diện thông tin người dùng .99 Hình 4.10 Giao diện thơng tin người dùng khác .100 Hình 4.11 Giao diện thêm vào danh sách .100 Hỉnh 4.12 Giao diện thông tin hát .101 Hình 4.13 Giao diện thơng tin nghệ sĩ 101 Hình 4.14 Giao diện danh sách hát chạy 102 Hình 4.15 Giao diện liên kết nghệ sĩ .103 Hình 4.16 Giao diện tạo hát 104 Hỉnh 4.17 Giao diện chỉnh sửa hát 104 Hình 4.18 Giao diện ‘welcome.txt’ 105 Hình 4.19 Giao diện ‘about.txt’ 105 Hình 4.5 Giao diện ‘discover’ Mô tả: Giao diện ‘discover’ chia thành mục: ‘Trending’ ‘From people you’re following’; mục ‘Trending’ hiển thị danh sách gồm tối đa hát có lượt nghe lượt thích nhiều nhất; tất phân chia theo thể loại; mục ‘From people you’re following’ bao gồm hát từ người dùng khác mà người dùng theo dõi 96 Hình 4.6 Giao diện ‘my_tracks’ Mô tả: Giao diện ‘my_tracks’ bao gồm hát mà người dùng quản lý; người dùng thực chức thêm, xóa, sửa nội dung hát mà người dùng đăng tải 97 Hình 4.7 Giao diện ‘my_playlists’ Mơ tả: Giao diện ‘my_playlists’ bao gồm danh sách hát; danh sách tập hợp hát từ nhiều thể loại khác người dùng thêm vào Gồm có chức quản lý chức bắt đầu chạy danh sách Hình 4.8 Giao diện ‘storage’ Mơ tả: Giao diện ‘storage’ lưu trữ hát mà người dùng tải 98 Hỉnh 4.9 Giao diện thông tin người dùng Mơ tả: Giao diện người dùng gồm có chức quản lý thơng tin người dùng mơ tả, bên cạnh cịn có danh sách hát mà người dùng đăng tải 99 Hình 4.10 Giao diện thơng tin người dùng khác Mô tả: Giao diện thông tin người dùng khác gồm thông tin người dùng danh sách hát mà người dùng đăng tải; bên cạnh gồm có nút theo dõi bỏ theo dõi người dùng Hình 4.11 Giao diện thêm vào danh sách Mô tả: Giao diện thêm vào danh sách hát gồm danh sách mặc định tên ‘Liked tracks’ tơ đậm, bên cạnh cịn có danh sách mà người dùng tạo 100 Hỉnh 4.12 Giao diện thông tin hát Mô tả: Giao diện hiển thị thông tin hát, thông tin người dùng đăng tải hát quản lý; thông thường thông tin bao gồm ngày đăng, nghệ sĩ, đường dẫn khác, v.v Hình 4.13 Giao diện thơng tin nghệ sĩ Mô tả: Giao diện thông tin nghệ sĩ bao gồm thông tin nghệ sĩ, đường dẫn tới trang web nghệ sĩ danh sách hát mà nghệ sĩ sáng tác 101 Hình 4.14 Giao diện danh sách hát ch ạy Mô tả: Giao diện hiển thị hát người dùng thực chức bắt đầu chạy danh sách; gồm chức tráo đổi hát chạy, lặp lại danh sách, lùi tiến hát nút dừng chạy danh sách tơ đỏ 102 Hình 4.15 Giao diện liên kết nghệ sĩ Mô tả: Giao diện liên kết nghệ sĩ chia thành mục: quản lý thông tin nghệ sĩ danh sách chọn nghệ sĩ Mục quản lý thơng tin người dùng thêm cập nhật thơng tin nghệ sĩ; mục danh sách người dùng chọn liên kết nghệ sĩ với hát người dùng quản lý 103 Hình 4.16 Giao diện tạo hát Mơ tả: Giao diện tạo hát gồm có trường thông tin cần thiết tên hát, tên nghệ sĩ, nút liên kết nghệ sĩ với hát, thông tin mô tả hát, ảnh thu nhỏ (thumbnail) hát Hỉnh 4.17 Giao diện chỉnh sửa hát Mơ tả: Ngồi mục thơng tin hát, cịn có mục quản lý phụ đề hát Mục quản lý phụ đề gồm chức quản lý bản: thêm, xóa, sửa phụ đề; bên cạnh cịn có chức tự động tạo phụ đề cho người dùng 104 Hình 4.18 Giao diện ‘welcome.txt’ Mô tả: Giao diện ‘welcome.txt’ hiển thị lời chào mời người dùng đến website, bao gồm thông tin khác website Hình 4.19 Giao diện ‘about.txt’ Mơ tả: Giao diện ‘about.txt’ mô tả thêm website 105 4.2 Triển khai hệ thống 4.2.1 Máy chủ Azure App Service dịch vụ dựa HTTP để lưu trữ ứng dụng web, API REST mobile back-end Người dùng phát triển ứng dụng ngơn ngữ lập trình u thích mình, chẳng hạn NET, NET Core, Java, Ruby, Node.js, PHP Python Các ứng dụng chạy mở rộng cách dễ dàng môi trường Windows Linux Riêng với mơi trường Linux, người dùng tìm hiểu rõ App Service Linux 4.2.2 Lưu trữ Azure Blob Storage dịch vụ hay đơn giản công cụ cho phép lưu trữ liệu không cấu trúc cloud Mỗi liệu đưa lên để lưu trữ ta coi object, text, liệu nhị phân, document hay media file, file cài đặt… Blob storage hay gọi Object storage Azure Blob Storage NON-SQL Database 106 CHƯƠNG 5: KẾT LUẬN 5.1 Kết đạt Sau khoảng thời gian thực đề tài, website hoàn thiện đạt số kết sau: Về mặt kỹ thuật công nghệ: - Nắm cách xây dựng website Vue.js Javascript - Áp dụng công nghệ phục phụ cho việc lưu trữ nghe nhạc Azure App Services, Azure Blob Storage để lưu trữ file hát, Azure Cognitive Services để nhận diện giọng nói tạo phụ đề, PostgresQL để lưu trữ thơng tin người dùng - Đảm bảo độ hoàn thiện chức đề ra, hoàn thành đa số chức đề - Giao diện đơn giản dễ sử dụng, có khả mở rộng Về mặt thực tiễn: - Nâng cao kỹ tìm hiểu áp dụng cơng nghệ cách nhanh chóng - Lập kế hoạch cụ thể, rõ ràng bám sát theo kế hoạch 5.2 Thuận lợi khó khăn 5.2.1 Thuận lợi - Kinh nghiệm từ đồ án trước góp phần giúp đẩy đồ án theo tiến độ - Công nghệ thân thiện dễ sử dụng 107 - Giảng viên hướng dẫn có nhiều kiến thức kinh nghiệm giúp đỡ nhiều việc gợi ý, đưa giải pháp q trình thực khóa luận 5.2.2 Khó khăn - Do thời gian gấp rút nên hồn thành chức cịn lại đề - Dịch vụ nhận diện giọng nói Azure Cognitive Services trả kết chưa thật sử thỏa đáng chưa tìm hiểu cơng nghệ cách chun sâu - Chưa có phản hồi thực tế từ người dùng 5.3 Hướng phát triển - Xây dựng lại giao diện cho bắt mắt thân thiện cho người dùng, đồng thời dễ bảo trì có tính mở rộng cao - Thêm lớp bảo mật bên phía người dùng phía server - Xây dựng hệ thống quản lý người dùng để lọc nội dung phản cảm - Có thể mở rộng thêm chức có thêm nhiều thể loại khác cho hát; liên kết nhiều nghệ sĩ cho hát; thêm lọc tìm kiếm hát, nghệ sĩ, thêm hiệu ứng chạy phụ đề, v.v 108 TÀI LIỆU THAM KHẢO [1] Visual Studio Code, https://code.visualstudio.com/ [accessed Jul 20, 2023] [2] Visual Studio, https://visualstudio.microsoft.com/ [accessed Jul 20, 2023] [3] Git, https://git-scm.com/ [accessed Jul 20, 2023] [4] Github, https://github.com/ [accessed Jul 20, 2023] [5] Insomnia, https://insomnia.rest/ [accessed Jul 20, 2023] [6] Evan You, “The Progressive JavaScript Framework”, Vue.js – The Progressive JavaScript Framework | Vue.js, https://vuejs.org/ [accessed Jul 20, 2023] [7] Stas “staskobzar” Kobzar, staskobzar/vue-audio-visual: VueJS audio visualization components, https://github.com/staskobzar/vue-audio-visual [accessed Jul 20, 2023] [8] JavaScript, https://developer.mozilla.org/en-US/docs/Web/JavaScript [accessed Jul 20, 2023] [9] Fuse.js, https://www.fusejs.io/ [accessed Jul 20, 2023] [10] localForage, localForage/localForage: Offline storage, improved Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API, https://github.com/localForage/localForage [accessed Jul 20, 2023] [11] NET Core, https://learn.microsoft.com/en-us/dotnet/core/introduction [accessed Jul 20, 2023] [12] NET Framework, https://dotnet.microsoft.com/en-us/download/dotnetframework [accessed Jul 20, 2023] 109 [13] ASP.NET Core, https://learn.microsoft.com/en- us/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-7.0 [accessed Jul 20, 2023] [14] dotnet, dotnet/efcore: EF Core is a modern object-database mapper for NET It supports LINQ queries, change tracking, updates, and schema migrations, https://github.com/dotnet/efcore [accessed Jul 20, 2023] [15] PostgreSQL, https://www.postgresql.org/ [accessed Jul 20, 2023] [16] Microsoft Azure, https://en.wikipedia.org/wiki/Microsoft_Azure [accessed Jul 20, 2023] [17] App Service, https://azure.microsoft.com/en-us/products/app-service [accessed Jul 20, 2023] [18] Azure Blob Storage, https://azure.microsoft.com/en- us/products/storage/blobs [accessed Jul 20, 2023] [19] Azure Cognitive Services, https://azure.microsoft.com/en- au/products/cognitive-services [accessed Jul 20, 2023] [20] Andrew “Sock” Lock, “Exploring the ASP.NET Core Identity PasswordHasher”, Exploring the ASP.NET Core Identity PasswordHasher, https://andrewlock.net/exploring-the-asp-net-core-identity-passwordhasher/ [accessed Jul 20, 2023] [21] SqlDBM, https://sqldbm.com [accessed Jul 20, 2023] 110