Đồ á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 BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN – SE401.M21 ĐỀ TÀI: XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN Giảng viên hướng dẫn: ThS Đỗ Thị Thanh Tuyền Sinh viên thực hiện: 19522006 – Nguyễn Công Phi 19522055 – Lương Thiện Phước Thành phố Hồ Chí Minh, ngày 21 tháng 12 năm 2022 ĐẠ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 MÔN HỌC ĐỒ ÁN – SE401.M21 ĐỀ TÀI: XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN Giảng viên hướng dẫn: ThS Đỗ Thị Thanh Tuyền Sinh viên thực hiện: 19522006 – Nguyễn Công Phi 19522055 – Lương Thiện Phước Thành phố Hồ Chí Minh, ngày 21 tháng 12 năm 2022 ĐỀ 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: ThS Đỗ Thị Thanh Tuyền Thời gian thực hiện: Từ ngày: 5/9/2022 đến ngày 31/12/2022 Sinh viên thực hiện: Nguyễn Công Phi - 19522006 Lương Thiện Phước - 19522055 Nội dung đề tài: Lí chọn đề tài Khách quan: Âm nhạc kết hợp giọng hát giai điệu nhạc cụ nhằm tạo nên vẻ đẹp, hài hoà cảm xúc, mang đến cho người giây phút tuyệt vời Khơng thế, giúp cải thiện chất lượng giấc ngủ, ngăn ngừa chứng trầm cảm, giảm đau, kiểm soát thèm ăn để làm đẹp vóc dáng, tăng cường tập trung… Nếu không nghe nhạc ngày, bỏ lỡ nhiều lợi ích tốt cho sức khỏe Bên cạnh phát triển dội công nghệ, việc người dùng dùng đĩa để nghe nhạc lại đi, thay vào người dùng lại có thói quen nghe nhạc tảng web Và không nghe nhạc, cịn sử dụng nhạc để giúp tăng tập trung, việc tích hợp thêm todolist, notes hay timer giúp việc học tập làm việc gia tăng hiệu Nhóm em ấp ủ dự án xây dựng website nghe nhạc trực tuyến Em cố gắng thực với việc áp dụng công nghệ phù hợp có tính hay nhất, hữu ích nển tảng nghe nhạc tiếng Zingmp3, Spotify hay lofi.co Chủ quan: Nhóm em muốn tổng hợp kiến thức học trường thực tế để xây dựng ứng dụng nghe nhạc hoàn chỉnh nhất, đồng thời biết điểm mạnh, điểm yếu thân sau thực đồ án trước thực đồ án để cải thiện phát huy Sau sử dụng để nghe nhạc, hỗ trợ tập trung, có thêm động lực, tự hào nhìn lại sản phẩm Mục tiêu đề tài • Xây dựng website nghe nhạc trực tuyến với giao diện thân thiện với người dùng • Xây dựng tính vừa nghe nhạc để giúp người dùng hỗ trợ tập trung Có notes, todolist time để hỗ trợ người dùng thực mục đích Phạm vi đề tài Đề tài tập trung xây dựng website với tăng tối đa trải nghiệm người dùng Phạm vi mơi trường: • • Triển khai sản phẩm đề tài môi trường web Phạm vi chức năng: • • Tính đăng ký, đăng nhập, qn mật khẩu(Authentication) • Tính nghe nhạc (Bình luận, yêu thích, thêm nhạc, lịch sử nghe, tạo playlist) • Có thể nghe nhạc với giao diện tính khác như: todo list, timer, notes để tăng tập trung, hiệu người dùng cần nghe nhạc để làm việc • Profile người dùng(có thể list nhạc người lưu, hát người dùng nhạc người dùng cover) • Có thơng báo cho người dùng người theo dõi đăng tải nhạc • Admin (Thêm nhạc, xóa nhạc, thêm ca sĩ, xóa ca sĩ,…) Đối tượng sử dụng • Những người thích nghe nhạc, dùng âm nhạc để thư giãn • Những người nghe nhạc • Những người hay dùng âm nhạc để tăng hiệu công việc Phương pháp thực • Tìm hiểu phân tích giải pháp website âm nhạc lớn thị trường, tìm điểm mạnh điểm yếu => cải thiện • Đề xuất tính hướng đến đối tượng người dùng xác định • Tập trung chủ yếu vào design => tăng trải nghiệm người dùng Công nghệ sử dụng • Front-end: ReactJS – ReduxToolkit, ReactHook, Ant Design, TailwindCSS • Back-end: NodeJS, NestJS, ExpressJS • Security Standard: JWT • Database: MongoDB, Redis Kết mong đợi • Nắm bắt áp dụng công nghệ để xây dựng hoàn thiện sản phẩm đề tài • Học thêm push notification, animation chức • Xây dựng ứng dụng đem đến trải nghiệm nghe nhạc tốt hướng đến người dùng Tuần - Tuần (5/9 – 11/9) Công việc Công việc thành viên (Phi) thành viên (Phước) Nghiên cứu tính - Nghiên cứu tính app nghe nhạc có app nghe nhạc thị trường có thị trường - Tổng hợp tính - Chọn cơng nghệ phù hợp với backend - Tổng hợp tính - Chọn cơng nghệ phù hợp với frontend Tuần (12/9 – 18/9) Tuần (19/9 – 25/9) - Tạo codebase backend - Tạo codebase frontend - Viết tài liệu SRS - Viết tài liệu SRS - Tổng hợp tài liệu SRS - Tìm kiếm mẫu giao diện - Review codebase frontend - Review codebase backend - Góp ý chỉnh sửa chung - Góp ý chỉnh sửa chung codebase - codebase Thực code tính đăng nhập, authentication, đăng quên - Thực tính nghe xuất, nhạc với options: Phát mật nhạc, dừng nhạc, tua nhạc, khẩu, tích hợp totp sửa âm lượng - Thiết kế database - Thiết kế database - Review code giao diện - phần bạn Phước code Tuần - (26/9 – 2/10) Xây dựng phần profile bao Review code giao diện phần bạn Phi code - Thêm hát vào danh sách gồm thông tin phát nhạc, phát nhạc ngẫu Cho phép chỉnh sửa profile nhiên, phát nhiều nhạc - Thực CURD danh sách hát - Review code giao diện - phần bạn Phi code phần bạn Phước code Tuần - (3/10 – 9/10) Xây dựng tính nghe Review code giao diện - Thực tính nhạc với theme, download quản lý mode giống trang web trình download nhạc lofi.co Tuần (10/10 – - 16/10) Review code giao diện - Review code giao diện phần bạn Phước code phần bạn Phước code Tiếp tục hoàn thiện web với - Xây dựng tính xếp todo list, notes, picture in hạng hát picture để ghim lên hình Tuần (17/10 – 23/10) - Review code giao diện - Review code giao diện phần bạn Phước code phần bạn Phi code - Cho phép người dùng xem - Xây dựng tính tìm MV kiếm tên hát, lời hát, tác giả Tuần (24/10 – - 30/10) Review code giao diện - Review code giao diện phần bạn Phước code phần bạn Phi code Tính cho phép người - Xây dựng tính quản lý dùng theo dõi, đăng ký người dùng, quản lý ca sĩ người tải nhạc Tuần - (31/10 – 6/11) - Tuần 10 (7/11 – - 13/11) Review code giao diện - Review code giao diện phần bạn Phước code phần bạn Phi code Tính thơng báo cho - Xây dựng tính lịch sử người dùng nghe Review code giao diện - Review code giao diện phần bạn Phước code phần bạn Phi code Đề xuất tính phù - Đề xuất tính phù hợp với hướng ứng hợp với hướng ứng dụng dụng - Fix lỗi có Tuần 11 - Fix lỗi có (14/11 – - Dự trù có chậm trễ - Dự trù có chậm trễ code tính code tính 20/11) Tuần 12 Fix lỗi có Fix lỗi có - Dự trù có chậm trễ - Dự trù có chậm trễ code tính code tính Code thêm tính - Code thêm tính đề trình phát đề q trình triển có thời gian phát triển có thời gian (21/11 – 27/11) - - - Tuần 13 (28/11 – 4/12) Tuần 14 (5/12 – - Deloy Server client lên web docker Viết tài liệu báo cáo - Viết tài liệu báo cáo deploy Test lỗi có - Fix lỗi có deploy - Vẽ sơ đồ cho báo cáo - Fix lỗi có deploy - Cập nhật scale services - Fix lỗi có deploy cần 11/12) - Tổng hợp báo cáo Tuần 15 Hoàn tất toàn tài liệu cho báo cáo (12/12 – Đưa web vào sử dụng phản hồi lỗi 18/12) Tuần 16 (19/12 – 25/12) Sửa lỗi Tiến hành báo cáo Tuần 17 (26/12 – 31/12) TP HCM, ngày 10 tháng năm 2022 Xác nhận CBHD (Ký tên ghi rõ họ tên) Đỗ Thị Thanh Tuyền Sinh viên (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Phi Phuoc Nguyễn Công Phi Lương Thiện Phước NHẬN XÉT CỦA GIẢNG VIÊN …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Tp.HCM, ngày … tháng 12 năm 2022 GVHD………… ThS Đỗ Thị Thanh Tuyền… LỜI CẢM ƠN Lời đầu tiên, nhóm xin cảm ơn đến cô Đỗ Thị Thanh Tuyền tận tình hướng dẫn nhóm, hỗ trợ giải đáp thắc mắc nhóm cung cấp kiến thức công nghệ vấn đề thực ý tưởng suốt thời gian thực đồ án “Xây dựng Website nghe nhạc trực tuyến” Hi vọng với giúp đỡ, hỗ trợ từ cơ, nhóm tiếp tục phát triển ứng dụng theo hướng mà nhóm đề với mục đích mở rộng đề tài, tối ưu hoá trải nghiệm người dùng Tuy vậy, kinh nghiệm thời gian nhóm cịn hạn chế nên vẫm cịn hạn chế, thiếu sót Chúng em mong nhận đóng góp ý kiến bạn để đề tài hồn thiện Chúng em xin chân thành cảm ơn! Thành Phố Hồ Chí Minh, ngày 21/12/2022… Nhóm sinh viên thực Sinh viên (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Phi Phuoc Nguyễn Công Phi Lương Thiện Phước Bảng 2.19 Bảng đặc tả usecase xem chi tiết ca sĩ Xem chi tiết ca sĩ Tên yêu cầu Mô tả Người dùng xem thông tin ca sĩ để theo dõi Tác nhân Người dùng trang web Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau Không có Ngoại lệ Khơng có Luồng xử lý Chọn ca sĩ cần xem Hiển thị thơng tin chi tiết ca sĩ: (Thông tin, hát) Luồng xử lý - Hệ thống thông báo thực thao tác thành công phụ - Hệ thống thông báo lỗi 2.5.2.10 Đặc tả usecase xem chi tiết nhạc Hình 2.23 Sơ đồ usecase xem chi tiết nhạc 28 Bảng 2.20 Bảng đặc tả usecase xem chi tiết nhạc Tên yêu cầu Xem chi tiết nhạc Mô tả Người dùng xem thông tin hát để theo dõi Tác nhân Người sử dụng trang web Điều kiện trước Khơng có Điều kiện sau Khơng có Ngoại lệ Khơng có Luồng xử lý Chọn hát cần xem Hiển thị thơng tin chi tiết hát (thông tin, thời lượng, lyric) Luồng xử lý - Hệ thống thông báo thực thao tác thành công phụ - Hệ thống thông báo lỗi 2.5.2.11 Đặc tả usecase tìm kiếm hát Hình 2.24 Sơ đồ usecase tìm kiếm hát 29 Bảng 2.21 Bảng đặc tả usecase tìm kiếm hát Tên yêu cầu Tìm kiếm hát Mơ tả Tìm kiếm theo từ khóa Tác nhân Người dùng Điều kiện trước Khơng có Điều kiện sau Khơng có Ngoại lệ Khơng có Luồng xử lý I Chọn search nhập từ khóa cần tìm kiếm II Chọn “Search icon”, điều hướng tới trang tìm kiếm III Hiển thị thơng tin cần tìm kiếm Luồng xử lý - Hệ thống thơng báo thực thao tác thành công phụ - Hệ thống thông báo lỗi 2.6 Sơ đồ hoạt động 2.6.1 Danh sách sơ đồ Bảng 2.22 Danh sách sơ đồ STT Tên sơ đồ Sơ đồ hoạt động đăng ký tài khoản Sơ đồ hoạt động đăng nhập Sơ đồ hoạt động cập nhật thông tin Sơ đồ hoạt động quên mật Sơ đồ hoạt động nghe nhạc Sơ đồ hoạt động tạo playlist Sơ đồ hoạt động thêm nhạc vào playlist Sơ đồ hoạt động xem bảng xếp hạng Sơ đồ hoạt động xem chi tiết ca sĩ 10 Sơ đồ hoạt động xem thông tin hát 11 Sơ đồ hoạt động tìm kiếm hát Ghi 30 2.6.2 Chi tiết sơ đồ 2.6.2.1 Sơ đồ hoạt động đăng ký tài khoản Hình 2.25 Sơ đồ hoạt động đăng ký tài khoản 31 2.6.2.2 Sơ đồ hoạt động đăng nhập Hình 2.26 Sơ đồ hoạt động đăng nhập tài khoản 32 2.6.2.3 Sơ đồ hoạt động cập nhật thơng tin cá nhân Hình 2.27 Sơ đồ hoạt động cập nhật thông tin cá nhân 33 2.6.2.4 Sơ đồ hoạt động quên mật Hình 2.28 Sơ đồ hoạt động quên mật 34 2.6.2.5 Sơ đồ hoạt động nghe nhạc Hình 2.29 Sơ đồ hoạt động nghe nhạc 2.6.2.6 Sơ đồ hoạt động tạo playlist Hình 2.30 Sơ đồ hoạt động tạo playlist 35 2.6.2.7 Sơ đồ hoạt động thêm nhạc vào playlist Hình 2.31 Sơ đồ hoạt động thêm nhạc vào playlist 36 2.6.2.8 Sơ đồ hoạt động xem bảng xếp hạng Hình 2.32 Sơ đồ hoạt động xem bảng xếp hạng 2.6.2.9 Sơ đồ hoạt động xem chi tiết ca sĩ Hình 2.33 Sơ đồ hoạt động xem chi tiết ca sĩ 37 2.6.2.10 Sơ đồ hoạt động xem thông tin hát Hình 2.34 Sơ đồ hoạt động xem thơng tin hát 2.6.2.11 Sơ đồ hoạt động tìm kiếm hát Hình 2.35 Sơ đồ hoạt động tìm kiếm hát 38 Chương KẾT LUẬN 3.1 Kết 3.1.1 Các tính làm - Kết thúc giai đoạn phát triển, đồ án đạt tính u cầu mà nhóm đề - Phần mềm có đầy đủ tính đặt trang web nghe nhạc trực tuyến - Những tính làm được: o Đăng nhập, đăng xuất, quên mật o Xem nhạc, nghe nhạc o Tạo playlist, xem bảng xếp hạng, tìm kiếm o Nghe nhạc có tương tác tương tự lofi.co o Thêm session, quản lý công việc, tăng tập trung nghe nhạc 3.1.2 Những điều chưa làm - Có số trang cịn chưa responsive 100% - Khi chuyển trang truy vấn liệu nhiều bị chậm 3.2 Hướng phát triển - Dự án đến giai đoạn sử dụng với đầy đủ tính liên quan đến việc nghe nhạc, hỗ trợ tập trung người sử dụng người quản lý trang web có tính chưa hồn thiện tối ưu 100% Hơn đồ án nhận phản hồi người dùng cải thiện tính năng, giao diện cho phù hợp với người dùng Sau mở rộng dự án với tính mới, độc để thu hút thêm người dùng - Một số tồn cần cải thiện: o Một số trang chưa responsive 100% o Nâng cấp giao diện số phần cho người dùng dễ sử dụng o Trang web cho admin cịn thiếu tính - Đối với người dùng o Phần nghe nhạc có tương tác cịn thiếu tính lịch sử 39 o Phần nghe nhạc cịn cần thêm tính u thích nhạc, xem MV o Xây dựng trang cộng đồng người nghe nhạc, họ chia sẻ nhạc cho nhau, có đăng bình luận o Xây dựng ứng dụng chat, tạo phòng để người nghe nhạc chung với o Xây dựng phần podcast hay stream nhạc, phát trực tiếp o Xây dựng hệ thống gợi ý nhạc cho người dùng - Đối với người quản lý trang web: o Sử dụng biểu đồ hay hình ảnh trực quan trình tổng hợp liệu phân tích liệu o Tăng cường tính quản lý người quản lý: ▪ Quản lý chi tiết nhạc, việc upload nhạc người dùng 40 3.3 Bảng phân công công việc Bảng 3.1 Bảng phân công công việc Thành viên STT Tên công việc Phi Phước Chuẩn bị, lên kế hoạch x x Khảo sát, đặc tả yêu cầu x x Thiết kế kiến trúc x x Thiết kế liệu x x Thiết kế giao diện x Xây dựng trang chủ x Xây dựng trang chi tiết ca sĩ, nhạc x Xây dựng trang authentication x Xây dựng trang nghe nhạc có tương tác x 10 Xây dựng trang bảng xếp hạng x 11 Xây dựng trang tìm kiếm x 12 Xây dựng trang profile người dùng x Tỷ lệ cơng việc phân cơng 50% 50% Mức độ hồn thành 100% 100% 41 TÀI LIỆU THAM KHẢO Trang web thức MongoDB: https://www.mongodb.com/ Document Reactjs: https://reactjs.org/docs/getting-started.html Document ExpressJS: https://expressjs.com/ Trang web hỏi đáp dành cho lập trình viên: https://stackoverflow.com/ Dịch vụ âm nhạc kỹ thuật số Zingmp3: https://mp3.zing.vn/ Môi trường kỹ thuật số yên tĩnh để tập trung, làm việc học tập lofi.co: https://app.lofi.co/ 42 ... ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN – SE401.M21 ĐỀ TÀI: XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN Giảng viên hướng dẫn: ThS Đỗ Thị Thanh Tuyền Sinh viên... trường thực tế để xây dựng ứng dụng nghe nhạc hoàn chỉnh nhất, đồng thời biết điểm mạnh, điểm yếu thân sau thực đồ án trước thực đồ án để cải thiện phát huy Sau sử dụng để nghe nhạc, hỗ trợ tập... lực, tự hào nhìn lại sản phẩm Mục tiêu đề tài • Xây dựng website nghe nhạc trực tuyến với giao diện thân thiện với người dùng • Xây dựng tính vừa nghe nhạc để giúp người dùng hỗ trợ tập trung Có