Đồ án xây dựng website nghe nhạc trực tuyến

ĐẠ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 -🙚🙘🕮🙚🙘 - ĐỒ ÁN XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN GV HƯỚNG DẪN: TS ĐỖ THỊ THANH TUYỀN SV THỰC HIỆN: LÊ THỊ PHƯƠNG QUYÊN - 20520729 DƯƠNG HOÀNG MAI - 20520626 TP HỒ CHÍ MINH, 2023 ĐẠ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 -🙚🙘🕮🙚🙘 - ĐỒ ÁN XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN GV HƯỚNG DẪN: TS ĐỖ THỊ THANH TUYỀN SV THỰC HIỆN: LÊ THỊ PHƯƠNG QUYÊN - 20520729 DƯƠNG HOÀNG MAI - 20520626 TP HỒ CHÍ MINH, 2023 LỜI CẢM ƠN Trong trình thực Đồ án 1, chúng em trang bị kiến thức quan trọng kỹ thực tế để hồn thành đồ án Chúng em xin gửi lời cảm ơn chân thành đến cô Đỗ Thị Thanh Tuyền – người trực tiếp dẫn tận tình truyền đạt kinh nghiệm vô quý giá cho chúng em suốt q trình nhóm thực đồ án Hi vọng với báo góp ý cơ, đề tài nhóm tiếp tục phát triển để website ngày hoàn chỉnh phục vụ tốt cho người dùng Trong trình làm đồ án bước đầu tiếp cận công nghệ mới, nhóm cịn nhiều thiếu sót mặt kiến thức kinh nghiệm thực tiễn nên khó tránh khỏi sai sót Những nhận xét, góp ý chân tình sở để nhóm cải tiến hoàn thiện đề tài cách tốt Chúng em xin trân trọng cảm ơn! TP Hồ Chí Minh, ngày 30 tháng 06 năm 2023 Nhóm sinh viên thực Lê Thị Phương Quyên – Dương Hoàng Mai ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng website nghe nhạc trực tuyến Cán hướng dẫn: TS Đỗ Thị Thanh Tuyền Thời gian thực hiện: Từ ngày 27/02/2023 đến ngày 17/06/2023 Sinh viên thực hiện: Lê Thị Phương Quyên - 20520729 Dương Hoàng Mai - 20520626 Nội dung đề tài: Lý do chọn đề tài:  Âm nhạc từ lâu trở thành ăn tinh thần khơng người yêu nghệ thuật mà giới trẻ, người làm văn phòng Âm nhạc xem giải pháp giúp giải tỏa căng thẳng, mệt mỏi mang đến nguồn cảm hứng cho hầu hết tất người Cùng với phát triển nhanh chóng Internet cơng nghệ, nhu cầu nghe nhạc người dùng ngày phát triển, nhu cầu nghe nhạc cách nhanh chóng, tiện lợi, nghe nhạc lúc nơi dễ dàng cập nhật xu hướng âm nhạc Thấu hiểu rõ điều trên, nhóm em xây dựng website nghe nhạc trực tuyến với định hướng đáp ứng đầy đủ nhu cầu người dùng Mục tiêu: • Xây dựng website nghe nhạc trực tuyến • Có thể download, upload nhạc • Hệ thống danh sách hát, ca sĩ, album, bảng xếp hạng âm nhạc • Xây dựng website thân thiện, giao diện bố cục rõ ràng Phạm vi: • Phạm vi mơi trường: Triển khai sản phẩm mơi trường web • Phạm vi chức năng: - Nghe nhạc trực tuyến - Bảng xếp hạng hát, ca sĩ, album - Quản lý tài khoản người dùng - Gợi ý hát Đối tượng sử dụng:  • Những người dùng có nhu cầu nghe nhạc trực tuyến • Người dùng có nhu cầu chia sẻ, lưu trữ nhạc Phương pháp thực hiện:  • Tìm hiểu Reactjs, Nodejs • Khảo sát website tương tự thị trường Cơng nghệ sử dụng: • Cơng cụ thiết kế UI/UX: Figma • Front-end: Reactjs • Back-end: Nodejs Kết quả mong đợi:  • Áp dụng cơng nghệ để hồn thành sản phẩm đề tài • Xây dựng website hồn chỉnh đáp ứng yêu cầu người dùng Kế hoạch thực hiện: Thời gian Cơng việc 27/02 – 05/03 • Tìm hiểu cơng nghệ Reactjs, Nodejs 06/03 – 12/03 • Xác định yêu cầu chức đề tài • Phân tích chi tiết yêu cầu nghiệp vụ chức đề 13/03 – 26/03 tài • Viết tài liệu mô tả hệ thống website 27/03 – 09/04 10/04 – 10/05 11/05 – 24/05 25/05 – 07/06 • Xây dựng vẽ sơ đồ • Thiết kế giao diện website • Xây dựng giao diện website • Xây dựng tính website • Hoàn thiện giao diện chức website • Chỉnh sửa tài liệu liên quan • Kiểm thử, sửa lỗi hoàn thiện chức sản phẩm • Hồn thiện tài liệu báo cáo TP HCM, ngày tháng năm 2023 Xác nhận CBHD Sinh viên Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) Đỗ Thị Thanh Tuyền Lê Thị Phương Quyên Dương Hoàng Mai NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………….………………………………………………………………… ……………….………………………………………………………………………… …………….…………………………………………………………………………… ………….……………………………………………………………………………… ……….………………………………………………………………………………… ….……………………………………………………………………………………… ……………………………………………………………………………………….… …………………………………………………………………………………….…… ………………………………………………………………………………….……… ……………………………………………………………………………….………… …………………………………………………………………………………………… ………………………….……………………………………………………………… …………………………….…………………………………………………………… ………….……………………………………………………………………………… ……….………………………………………………………………………………… …….…………………………………………………………………………………… ….……………………………………………………………………………………… ………………………………………….……………………………………………… ……………………., ngày………tháng………năm……… Giảng viên hướng dẫn Đỗ Thị Thanh Tuyền MỤC LỤC TÓM TẮT ĐỒ ÁN CHƯƠNG MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.3 Đối tượng nghiên cứu phục vụ 1.4 Phạm vi nghiên cứu 1.5 Phương pháp nghiên cứu CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ Javascript 2.2 ReactJS 2.3 NodeJS 2.4 Redux Toolkit 11 CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12 3.1 Phân tích yêu cầu 12 3.1.1 Yêu cầu chức 12 3.1.2 Yêu cầu phi chức 13 3.2 Sơ đồ use case 14 3.2.1 Danh sách Actor 14 3.2.2 Sơ đồ use case tổng quát 15 3.2.3 Danh sách use case 16 3.2.4 Đặc tả use case 17 3.3 Sơ đồ hoạt động 28 3.3.1 Danh sách sơ đồ 29 3.3.2 Chi tiết sơ đồ 29 3.3 Thiết kế liệu 36 3.3.1 Sơ đồ thiết kế liệu 36 3.3.2 Danh sách bảng liệu 37 3.3.3 Chi tiết bảng 37 CHƯƠNG XÂY DỰNG ỨNG DỤNG 40 4.1 Danh sách hình 40 4.2 Chi tiết hình 41 4.2.1 Màn hình “Trang chủ” 41 4.2.2 Màn hình “Cá nhân” 44 4.2.3 Màn hình “Top 100” 45 4.2.4 Màn hình “Album” 46 4.2.5 Màn hình “Nghệ sĩ” 47 4.2.6 Màn hình “Thay đổi theme” 48 4.2.7 Màn hình “Đăng nhập” 49 4.2.9 Màn hình “Đăng kí” 50 4.2.10 Màn hình “Tìm kiếm” 51 4.2.11 Màn hình “Nhạc mới” 52 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 53 5.1 Kết luận 53 5.1.1 Đánh giá trình thực đồ án 53 5.1.2 Kết đạt 53 5.1.3 Ưu, nhược điểm đồ án 54 5.2 Hướng phát triển 54 TÀI LIỆU THAM KHẢO 55 DANH MỤC HÌNH ẢNH Hình 2.1 Logo Javascript Hình 2.2 Logo ReactJS Hình 2.3 Logo NodeJS Hình 2.4 Logo Redux Toolkit 11 Hình 3.1 Sơ đồ use case Tổng quát 15 Hình 3.2 Sơ đồ use case Đăng nhập 17 Hình 3.3 Sơ đồ use case Nghe nhạc 21 Hình 3.4 Sơ đồ use case Đăng tải hát 23 Hình 3.5 Sơ đồ use case Tạo danh sách phát nhạc 25 Hình 3.6 Sơ đồ hoạt động Đăng ký tài khoản 29 Hình 3.7 Sơ đồ hoạt động Đăng nhập tài khoản 30 Hình 3.8 Sơ đồ hoạt động Nghe nhạc 31 Hình 3.9 Sơ đồ hoạt động Tạo playlist 32 Hình 3.10 Sơ đồ hoạt động Thêm hát vào playlist 33 Hình 3.11 Sơ đồ hoạt động Xem Top 100 34 Hình 3.12 Sơ đồ hoạt động Xem thơng tin nghệ sĩ 34 Hình 3.13 Sơ đồ hoạt động Xem thơng tin hát 35 Hình 3.14 Sơ đồ hoạt động Tìm kiếm 35 Hình 3.15 Sơ đồ thiết kế liệu 36 Hình 4.1 Màn hình “Trang chủ” 42 Hình 4.2 Màn hình “Cá nhân” 44 Hình 4.3 Màn hình “Top 100” 45 Hình 4.4 Màn hình “Album” 46 Hình 4.5 Màn hình “Nghệ sĩ” 47 Hình 4.6 Màn hình “Thay đổi theme” 48 Hình 4.7 Màn hình “Đăng nhập” 49 4.2 Chi tiết hình 4.2.1 Màn hình “Trang chủ” 41 Hình 4.1 Màn hình “Trang chủ” Màn hình “Trang chủ” chia thành thành phần chính: Sidebar, Header, Player bar phần nội dung - Sidebar cố định phía bên trái website, hiển thị logo website nút điều hướng đến trang khác website, bao gồm: Cá Nhân, Khám Phá, Radio, Nhạc Mới Top 100 Khi người dùng nhấn vào nút chuyển tới trang tương ứng - Header cố định phía website, chứa tìm kiếm, nút “Thay đổi theme”, “Cài đặt” ảnh đại diện người dùng (trong trường hợp người dùng chưa đăng nhập hiển thị nút “Đăng nhập”) Người dùng nhấn vào nút “Cài đặt” để chọn tiếp tùy chọn “Giới thiệu”, “Liên hệ” “Thỏa thuận sử dụng” website Khi người dùng nhấn vào ảnh đại diện xuất hai tùy chọn “Tải lên” dùng để upload hát “Đăng xuất” dùng để đăng xuất tài khoản người dùng khỏi website - Player bar cố định phía website, chứa thông tin hát chọn phát (Tên hát, ca sĩ) 42 - Phần nội dung chứa slider giới thiệu xu hướng âm nhạc danh mục khác gồm: Trending, Nghệ sĩ thịnh hành Album Dưới phần nội dung mục đối tác âm nhạc số tùy chọn điều hướng đến trang thông tin website 43 4.2.2 Màn hình “Cá nhân” Hình 4.2 Màn hình “Cá nhân” Màn hình “Cá nhân” hiển thị danh sách hát mà người dùng nhấn yêu thích, đồng thời hiển thị nghệ sĩ trình bày hát 44 4.2.3 Màn hình “Top 100” Hình 4.3 Màn hình “Top 100” - Màn hình “Top 100” hiển thị danh sách 100 hát hot dựa lượt yêu thích hát - Người dùng nhấn vào nút có biểu tượng Play để phát toàn hát chọn phát hát danh sách 45 4.2.4 Màn hình “Album” Hình 4.4 Màn hình “Album” - Màn hình “Album” hiển thị thơng tin album (Hình ảnh, tên album, thời điểm cập nhật, số lượng yêu thích) danh sách hát album - Người dùng nhấn vào hát để phát hát nhấn vào nút “Phát ngẫu nhiên” để phát toàn hát album theo thứ tự ngẫu nhiên 46 4.2.5 Màn hình “Nghệ sĩ” Hình 4.5 Màn hình “Nghệ sĩ” - Màn hình “Nghệ sĩ” hiển thị thông tin nghệ sĩ (Tên nghệ sĩ, hình ảnh, số lượng người quan tâm hát bật nghệ sĩ đó) - Người dùng nhấn vào nút có biểu tượng Play để phát tất hát nghệ sĩ chọn phát hát - Người dùng nhấn vào “Tất cả” để xem toàn hát nghệ sĩ trường hợp số lượng hát nhiều không hiển thị hết hình “Nghệ sĩ” 47 4.2.6 Màn hình “Thay đổi theme” Hình 4.6 Màn hình “Thay đổi theme” - Màn hình “Thay đổi theme” hiển thị số mẫu theme có sẵn mà người dùng áp dụng cho website - Khi người dùng trỏ chuột vào mẫu theme xuất tùy chọn “Áp dụng” “Xem trước” Người dùng chọn “Áp dụng” để áp dụng mẫu theme cho website chọn “Xem trước” để xem thử mẫu theme áp dụng vào website đưa lựa chọn 48 4.2.7 Màn hình “Đăng nhập” Hình 4.7 Màn hình “Đăng nhập” - Ở hình “Đăng nhập”, người dùng nhập Email, Password vào tương ứng bấm nút “Đăng Nhập” để đăng nhập vào website chuyển hướng đến hình “Trang chủ” - Nếu chưa có tài khoản để đăng nhập, người dùng nhấn vào “Đăng Kí” chuyển hướng sang hình “Đăng kí” để tạo tài khoản 49 4.2.9 Màn hình “Đăng kí” Hình 4.8 Màn hình “Đăng kí” - Ở hình “Đăng kí”, người dùng nhấn vào “Đăng Nhập” để quay hình “Đăng nhập” - Người dùng nhập Username, mật khẩu, xác nhận mật Email vào tương ứng nhấn nút “Đăng Kí” để tạo tài khoản Sau tạo xong tài khoản mới, người dùng chuyển sang hình “Đăng nhập” sử dụng tài khoản vừa tạo để lặp lại bước đăng nhập vào website 50 4.2.10 Màn hình “Tìm kiếm” Hình 4.9 Màn hình “Tìm kiếm” - Sau người dùng nhập thơng tin tìm kiếm tên nghệ sĩ, tên hát… vào tìm kiếm ô tìm kiếm mở rộng hiển thị thông tin hát, nghệ sĩ sở hữu hát - Tại giao diện kết tìm kiếm, người dùng phát hát tìm tiến hành chọn nghệ sĩ để hiển thị chi tiết nội dung nghệ sĩ 51 4.2.11 Màn hình “Nhạc mới” Hình 4.10 Màn hình “Nhạc mới” - Màn hình “Nhạc mới” hiển thị danh sách hát vừa phát hành gần - Người dùng nhấn vào nút có biểu tượng Play để phát toàn hát chọn phát hát danh sách 52 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết luận 5.1.1 Đánh giá q trình thực đồ án • Thuận lợi: - Trong trình thực đồ án, nhóm nhận hướng dẫn hỗ trợ tận tình giảng viên hướng dẫn, từ giúp nhóm có định hướng rõ ràng cho đề tài - Các tài liệu ngơn ngữ lập trình cơng nghệ chia sẻ rộng rãi Internet, giúp việc tiếp cận học hỏi công nghệ trở nên nhanh chóng thuận tiện - Cộng đồng người dùng cơng nghệ lớn mạnh, giúp giải nhanh chóng vấn đề mà nhóm gặp phải sử dụng cơng nghệ • Khó khăn: - Đây lần đầu nhóm tiếp cận với công nghệ ReactJS, NodeJS… nên trình tìm hiểu tốn nhiều thời gian gặp phải số khó khăn định 5.1.2 Kết đạt Sau kết thúc Đồ án 1, nhóm nghiên cứu xây dựng website nghe nhạc trực tuyến tương đối hoàn chỉnh với chức hoạt động tương đối ổn định Website đáp ứng yêu cầu người dùng website nghe nhạc gồm nghe nhạc, đăng nhập, đăng ký, download hát, thêm vào yêu thích, lịch sử nghe nhạc, upload hát, tạo playlist… 53 5.1.3 Ưu, nhược điểm đồ án • Ưu điểm: - Website đáp ứng tính cần có website nghe nhạc trực tuyến - Giao diện website thiết kế theo hướng đại, đơn giản, bố cục cân đối, dễ sử dụng, phù hợp với thị hiếu giới trẻ dễ dàng cho người dùng - Thông qua việc phát triển website, nhóm tìm hiểu sâu cơng nghệ web củng cố vững kiến thức UML, sở liệu… • Nhược điểm: - Chưa xây dựng thêm tính đặc sắc so với website lĩnh vực thị trường 5.2 Hướng phát triển - Hoàn thiện tính cốt lõi website - Nâng cấp giao diện website thêm bắt mắt, sinh động từ tăng trải nghiệm người dùng - Xây dựng thêm số tính để tăng tính cạnh tranh với website lĩnh vực thị trường nay: Comment hát, Live radio/podcast, Chart, Gợi ý hát dựa thói quen nghe nhạc người dùng… - Tối ưu hóa mã nguồn đồng thời làm tăng hiệu suất hoạt động website 54 TÀI LIỆU THAM KHẢO [1] "NodeJs," [Online] Available: https://nodejs.org/en/docs [Accessed 30 May 2023] [2] "ReactJs," [Online] Available: https://react.dev/learn [Accessed 28 May 2023] [3] "Redux-Toolkit," [Online] Available: https://reduxtoolkit.js.org/tutorials/overview [Accessed 15 2023] [4] "React Tutorial," [Online] Available: https://www.w3schools.com/react/default.asp [Accessed 15 May 2023] [5] "React Router," [Online] Available: https://reactrouter.com/en/main [Accessed 16 June 2023] [6] "Node.js Tutorial," [Online] Available: https://www.w3schools.com/nodejs/default.asp [Accessed 03 May 2023] [7] F Cloud, "Javascript gì? Kiến thức tổng quan Javascript từ A – Z," [Online] Available: https://fptcloud.com/javascript/ [Accessed 06 May 2023] [8] "Tự Học ReactJS Cơ Bản – Các Khái Niệm Cần Nắm Rõ," 01 December 2022 [Online] Available: https://glints.com/vn/blog/hoc-lap-trinh-reactjs/ [Accessed 06 May 2023] [9] "NodeJS gì? Tổng quan kiến thức Node.JS," [Online] Available: https://vietnix.vn/nodejs-la-gi/ [Accessed 06 May 2023] [10] L B T Tuan, "[React] Cùng tìm hiểu Redux Toolkit, phiên Redux," [Online] Available: https://viblo.asia/p/react-cung-tim-hieu-ve-reduxtoolkit-mot-phien-ban-moi-cua-redux-XL6lA6yg5ek [Accessed 10 May 2023] 55