Xây dựng website nghe nhạc trực tuyến

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 MÔN HỌC ĐỒ ÁN XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Hoàng Lê Trung Hậu Mã sinh viên 19521484 : Sinh viên thực : Văn Quốc Huy Mã sinh viên : 19520607 Lớp : SE121.M21 Tp HCM, tháng năm 2022 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 MÔN HỌC ĐỒ ÁN XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Hoàng Lê Trung Hậu Mã sinh viên 19521484 : Sinh viên thực : Văn Quốc Huy Mã sinh viên : 19520607 Lớp : SE121.M21 Tp HCM, tháng năm 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN Tên đề tài tiếng Anh: BUILD A MUSIC STREAMING WEBSITE Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 21/02/2022 đến tháng 10/06/2022 Sinh viên thực hiện: Hoàng Lê Trung Hậu – 19521484 Văn Quốc Huy - 19520607 Nội dung đề tài: Giới thiệu: Âm nhạc phận thiếu sống người Âm nhạc chia sẻ với nhiều điều: giải khó khăn sống, vơi giận hờn vu vơ, … Âm nhạc gắn liền với đời sống người không ngừng phát triển Với thời đại cơng nghệ phát triển nhanh chóng nay, tảng âm nhạc đưa lên mạng Internet, qua đó, giúp người dùng tiếp cận đến giới âm nhạc rộng lớn cách tự do, thoải mái Thơng qua đề tài này, nhóm xây dựng website nghe nhạc trực tuyến Fiveseven Website cung cấp cho người dùng kho nhạc khổng lồ với đa dạng thể loại nhạc Người nghe thoả sức tìm kiếm với tuỳ chọn: hát, album, ca sĩ, tác giả, … Website cập nhật tất hát, album nhằm đáp ứng nhu cầu giải trí lĩnh vực âm nhạc Hệ thống có chức hiển thị chơi nhạc, upload/download hát, nghe nhạc, chức tìm kiếm theo dạng text, … Về phía quản tr ị viên có chức như: quản lý nội dung hát, album, thông tin nghệ sĩ, quản lý tài khoản người dùng, … Mục tiêu: - Xây dựng website nghe nhạc trực tuyến với nội dung phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng chức cần thiết website nghe nhạc trực tuyến - Xây dựng website dành cho quản trị viên với chức quản lý thông tin đa dạng tiện dụng Phạm vi: • Phạm vi mơi trường: o Triển khai sản phẩm đề tài môi trường web • Phạm vi chức năng: o Quản lý thông tin nhạc o Quản lý tài khoản người dùng o Quản lý thơng tin nghệ sĩ o Tìm kiếm nhạc o Phân loại nhạc theo thể loại, chủ đề, hay top lượt nghe, o Tạo playlist, đánh dấu hát yêu thích o Cho phép upload download nhạc o Báo cáo nhạc người dùng cho quản trị viên để xử lý Đối tượng: - Người dùng khách - Người dùng có tài khoản - Quản trị viên (Admin) Phương pháp thực hiện: - Tìm hiểu ReactJS, NodeJS, MongoDB - Khảo sát website nghe nhạc có thị trường, từ tiến hành phân tích, xác định yêu cầu, tính cụ thể cho đề tài - Phân tích thiết kế hệ thống website - Tìm hiểu quy trình thiết kế UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho người dùng website cho quản trị viên - Tiến hành triển khai kiểm thử Công nghệ: - Front-end: ReactJS - Back-end: NodeJS, ExpressJS - Database: MongoDB - Source control: Github Kết mong đợi - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website nghe nhạc trực tuyến - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng website sản phẩm đề tài - Xây dựng website nghe nhạc trực tuyến đáp ứng yêu cầu giao diện chức đề - Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực hiện: Thời gian Nội dung 21/02/2022 – 06/03/2022 Tìm hiểu đề tài, đánh giá thị trường, xác định chức hệ thống 07/03/2022 – 03/04/2022 Tìm hiểu, nghiên cứu cơng nghệ 04/04/2022 – 17/04/2022 Phân tích thiết kế hệ thống website 18/04/2022 – 08/05/2022 Tìm hiểu quy trình thiết kế UX/UI thiết kế giao diện cho website 09/05/2022 – 29/05/2022 Cài đặt phần back-end, xử lý hệ thống 30/05/2022 – 10/06/2022 Kiểm thử hệ thống hoàn thiện báo cáo TP HCM, ngày 18 tháng 02 năm 2022 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) ThS Trần Thị Hồng Yến Hoàng Lê Trung Hậu Văn Quốc Huy LỜI CẢM ƠN Đầu tiên, nhóm thực đề tài “Xây dựng website nghe nhạc trực tuyến FiveSeven” xin gửi lời cảm ơn đến quý thầy cô giảng dạy chúng em trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh kiến thức tảng vững để nhóm tự tìm hiểu hoàn thiện đề tài cách tốt Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến tận tình hướng dẫn góp ý, đề xuất quý báu dành cho nhóm q trình thực đồ án Trong suốt thời gian qua, nhóm tự tìm hiểu công nghệ kết hợp với kiến thức tảng trình học tập, nghiên cứu vận dụng để thực đề tài Với quỹ thời gian có hạn kinh nghiệm xây dựng sản phẩm thiếu, sản phẩm đồ án cuối mắc phải số sai sót chúng em mong nhận góp ý để bổ sung, cải tiến sản phẩm nâng cao kiến thức để xây dựng sản phẩm chu hoàn thiện hơn, tích luỹ thêm cho kinh nghiệm quý giá để đáp ứng tốt cho công việc thực tế tương lai Một lần nữa, xin cảm ơn đồng hành chúng em suốt học kỳ II năm học Sinh viên thực Hoàng Lê Trung Hậu - Văn Quốc Huy NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp.HCM, ngày … tháng năm 2022 GVHD ThS Trần Thị Hồng Yến MỤC LỤC LỜI CẢM ƠN .5 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Chương 1: GIỚI THIỆU ĐỀ TÀI .3 1.1 Tên đề tài: .3 1.2 Mô tả đề tài: 1.3 Lý chọn đề tài: 1.4 Khảo sát trạng: .4 1.5 Công nghệ sử dụng: .4 1.6 Môi trường thiết kế: .4 1.7 Công cụ hỗ trợ: Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan ReactJS: 2.1.1 Giới thiệu ReactJS: 2.1.2 Khái niệm ReactJS: 2.1.2.1 Virtual DOM: 2.1.2.2 JSX: 2.1.3 Cách ReactJS hoạt động: 2.1.4 Ưu điểm ReactJS: 2.2 NodeJS: 2.2.1 NodeJS gì? 2.2.2 Cách NodeJS hoạt động: .8 2.2.3 Ưu điểm NodeJS: 2.3 ExpressJS: .8 2.3.1 ExpressJS gì? .8 2.3.2 Tính ExpressJS: 2.4 MongoDB: 2.4.1 MongoDB gì: .9 2.4.2 Một số câu lệnh bản: 10 2.4.3 Ưu điểm MongoDB: 10 2.5 Spotify API: 11 2.5.1 Spotify API gì? 11 2.5.2 Tính Spotify API: 11 Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12 3.1 Sơ đồ Use-case: 12 3.1.1 Đăng nhập: 12 3.1.2 Đăng xuất: 13 3.1.3 Đăng ký thành viên: 14 3.1.4 Nghe nhạc: 15 3.1.5 Thay đổi thông tin nhân: 15 3.1.6 Quản lý playlist cá nhân: 17 3.1.7 Tìm kiếm: 20 3.1.8 Xem thông tin playlist: 21 Chương 4: THIẾT KẾ GIAO DIỆN 23 4.1 Trang đăng nhập, đăng ký: 23 4.1.1 Giao diện: 23 4.1.2 Mô tả: 23 4.2 Trang chủ: 24 4.2.1 Giao diện: 24 Hậu điều kiện  Luồng kiện chính  Người dùng xố hát khỏi playlist thành công Người dùng mở context menu nhạc cần xóa khỏi playlist Người dùng chọn xóa Hệ thống xóa hát khỏi Playlist Kết thúc Use-case Luồng kiện phụ  Bảng 3.12: Đặc tả xoá hát: Use – Case  Nội Dung  Tên Use – Case     Mơ tả  u thích playlist Actor  Thành viên Điều kiện kích hoạt  Người dùng trang Playlist Tiền điều kiện  Đã đăng nhập tài khoản Spotify Hậu điều kiện  Người dùng u thích playlist thành cơng Luồng kiện chính  Use-Case cho phép người dùng yêu thích playlist Người dùng chọn biểu tượng trái tim Hệ thống thêm vào Library thông báo thêm thành công Kết thúc Use-case Luồng kiện phụ  3.1.7 Tìm kiếm: Hình 3.8: Sơ đồ use-case tìm kiếm 20 Bảng 3.13: Đặc tả tìm kiếm: Use – Case  Nội Dung  Tên Use – Case     Mơ tả  Tìm kiếm Actor  Tất Điều kiện kích hoạt  Người dùng chọn Search Tiền điều kiện  Không Hậu điều kiện  Không Use-Case cho phép người dùng tìm kiếm hát, album, nghệ sĩ, … Luồng kiện chính  Hệ thống hiển thị trang tìm kiếm Người dùng nhập từ khóa Hệ thống hiển thị kết tìm kiếm Kết thúc Use-case Luồng kiện phụ  Người dùng xóa tồn từ khóa:  Hệ thống hiển thị danh sách thể loại Quay lại bước Luồng kiện chính.   Người dùng chọn thể loại: Hệ thống hiển thị playlist liên quan đến thể loại 3.1.8 Xem thơng tin playlist: Hình 3.9: Sơ đồ use-case xem thơng tin playlist Bảng 3.14: Đặc tả tìm kiếm: Use – Case  Tên Use – Case     Mô tả  Nội Dung  Xem thông tin playlist Use-Case cho phép người dùng xem thông tin playlist 21 Actor  Tất Điều kiện kích hoạt  Người dùng chọn playlist Tiền điều kiện  Không Hậu điều kiện  Không Luồng kiện chính  Hệ thống hiển thị trang thơng tin playlist Kết thúc Use-case Luồng kiện phụ  22 Chương 4: THIẾT KẾ GIAO DIỆN 4.1 Trang đăng nhập, đăng ký: Giao diện: 4.1.1 Hình 4.1 Giao diện nút đăng ký, đăng nhập bên phải header Mô tả: 4.1.2 - Khi click vào nút Log in, dẫn vào trang đăng nhập Spotify Hình 4.2 Giao diện nút trang đăng nhập sau click Log in - Khi click vào nút Sign up, dẫn vào trang đăng ký tài khoản Spotify Hình 4.3 Giao diện nút trang đăng ký sau click Sign up 23 - Sau đăng nhập thành công, trang tự chuyển hướng trang chủ 4.2 Trang chủ: 4.2.1 Giao diện: Hình 4.4 Giao diện trang chủ chưa đăng nhập 4.2.2 Mô tả: - Với người dùng khách, tính xem thư viện, tạo playlist, hát u thích khơng hoạt động phát nhạc phía cửa sổ bị ẩn Hình 4.5 Một số chức sidebar sử dụng sau đăng nhập 24 - Với người dùng đăng nhập, tính sử dụng giao diện có chút thay đổi: • Phần header hiển thị tên người dùng dropdown chức xem thơng tin cá nhân log out • Phần cuối cửa sổ hiển thị trình phát nhạc Hình 4.6: Giao diện trang chủ sau đăng nhập thành cơng 4.3 Trang cá nhân: 4.3.1 Giao diện: Hình 4.7: Giao diện trang cá nhân tài khoản đăng nhập 25 4.3.2 Mô tả: - Nhấn click vào Profile, dẫn đến trang cá nhân - Trang cá nhân hiển thị tên người dùng, avatar, playlist mà họ tạo 4.4 Trang tìm kiếm: 4.4.1 Giao diện: Hình 4.8: Giao diện trang tìm kiếm 4.4.2 Mơ tả: - Khi click vào Search side bar bên trái, dẫn đến trang tìm kiếm - Mặc định, website hiển thị sẵn đa dạng thể loại, chủ đề chẳng hạn như: top lists (những hát thuộc top), thể loại hiphop, R&B, indie, … hay chủ đề theo nhu cầu khác sleep (các hát để dễ chìm vào giấc ngủ), kpop (các hát Hàn Quốc), … Hình 4.9: Giao diện kết sau chọn thể loại nhạc hiphop 26 - Khi gõ vào tìm kiếm từ khố, cơng cụ tìm kiếm thể kết hát, playlist, album, tên nghệ sĩ liên quan tới từ khố Hình 4.10: Giao diện kết sau tìm kiếm với từ khố “le quyen” 27 4.5 Trang thơng tin nghệ sĩ: 4.5.1 Giao diện: Hình 4.11: Giao diện thông tin nghệ sĩ 4.5.2 Mô tả: - Khi click vào tên nghệ sĩ trình phát nhạc chọn nghệ sĩ cơng cụ tìm kiếm, dẫn đến trang thông tin nghệ sĩ - Trang có tab chính: • Tab Overview: hiển thị hát phổ biến danh sách album, playlist nghệ sĩ phát hành • Tab Related Artist: liệt kê nghệ sĩ liên quan tới nghệ sĩ hiển thị thơng tin • Nút Follow: click vào đổi sang trạng thái following nghệ sĩ nằm danh sách theo dõi trang thư viện người dùng Hình 4.12: Giao diện nghệ sĩ liên quan trạng thái Following 28 4.6 Trang hát u thích: 4.6.1 Giao diện: Hình 4.13: Giao diện trang hát u thích 4.6.2 Mơ tả: - Khi click Liked Songs side bar bên trái, dẫn đến trang hát yêu thích - Trang liệt kê danh sách hát mà người dùng yêu thích cách thả tim cho hát 4.7 Trang playlist/album: 4.7.1 Giao diện: Hình 4.14: Giao diện trang playlist/album 29 4.7.2 Mô tả: - Khi click playlist album, dẫn đến trang playlist/album - Trang liệt kê danh sách hát tạo sẵn nghệ sĩ hát người dùng tự tạo playlist cá nhân - Nút trái tim cho phép người dùng lưu playlist vào thư viện người dùng muốn 4.8 Trang thư viện: 4.8.1 Giao diện: Hình 4.15: Giao diện trang thư viện với tab playlist, artist, album 4.8.2 Mô tả: - Khi click vào Your library side bar bên trái, dấn đến trang thư viện người dùng - Trang có tab chính: Playlists, Artists, Albums - Mỗi tab liệt kê danh sách đối tượng theo tab mà bạn following click vào nút Flow yêu thích click vào nút trái tim 30 4.9 Trình phát nhạc: 4.9.1 Giao diện: Hình 4.16: Giao diện trình phát nhạc 4.9.2 Mơ tả: - Trình phát nhạc có đầy đủ chức bản: • Thơng tin hát: tên hát, tên nghệ sĩ, ảnh thumbnail • Player: ➢ Nút tạm dừng / chạy hát ➢ Nút chuyển tiến / lùi hát ➢ Nút trộn hát ngẫu nhiên ➢ Nút lặp lại hát ➢ Thanh kéo thời gian hát ➢ Thanh kéo tăng / giảm âm lượng - Chức đặc biệt: • Đề xuất hát: đề xuất hát có thể loại thị trường âm nhạc cho người dùng, qua làm tăng khả tiếp cận đến hát có giai điệu mà người dùng mong muốn Hình 4.17: Giao diện đề xuất hát • Hiển thị lời hát: Hiển thị lời hát phát player 31 Hình 4.18: Giao diện hiển thị hát 32 Chương 5: KẾT LUẬN 5.1 Nhận xét: 5.1.1 Thuận lợi: - Các tài liệu, video, giảng công nghệ sử dụng đồ án chia sẻ internet, giúp việc tìm hiểu chủ động chi phí bỏ thấp - Vận dụng quy trình xây dựng sản phẩm từ môn học trước áp dụng cho đồ án - Có hỗ trợ đắc lực từ API bên thứ ba - Giảng viên hướng dẫn tận tình, ln hỗ trợ chia sẻ, góp ý q trình thực đồ án 5.1.2 Khó khăn: - Vì cơng nghệ sử dụng cho đồ án tiếp cận lần đầu nhóm nên việc học tập, nghiên cứu, nắm bắt cơng nghệ diễn lâu - Sử dụng API bên thứ cịn nhiều hạn chế vấn đề khơng nhận liệu hay xảy 5.2 Đánh giá: 5.2.1 Ưu điểm đồ án: - Hoàn thành chức phía người dùng dành cho website nghe nhạc trực tuyến - Thiết kế giao diện đại, dễ sử dụng - Nguồn hát đa dạng, phòng phú nhờ vào sử dụng API bên thứ ba 5.2.2 Nhược điểm đồ án: - Một số tính xử lý khơng tốt vấn đề liệu từ API - Chưa xây dựng hệ thống quản trị đề từ đầu 5.3 Hướng phát triển đồ án: - Xây dựng hệ thống quản trị để quản lý đối tượng bổ sung nhiều tính hữu ích cho website - Thiết kế hồn thiện lại giao diện để phù hợp với loại thiết bị sử dụng - Phát triển thêm tính định hướng trở thành trang mạng xã hội âm nhạc 33 TÀI LIỆU THAM KHẢO [1] Trần Thị Hồng Yến (2021), Slide giảng môn Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [2] Phạm Thế Sơn (2021), Bài tập thực hành Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [3] Jon DuCkeTT (2011), HTML & CSS Design and Build Websites, John Wiley & Sons, Inc [4] Giới thiệu ReactJS - Phần I (Các khái niệm bản): https://viblo.asia/p/gioi-thieuve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [5] React gì? Và hoạt động nào? https://www.hostinger.vn/huong-dan/reactla-gi-va-no-hoat-dong-nhu-the-nao [6] NodeJS gì? Những điều nên biết NodeJS bạn cần biết năm 2022 : https://niithanoi.edu.vn/nodejs-la-gi-tong-hop-day-du-ve-nodejs-ban-can-biet.html [7] NodeJS gì? Tổng quan kiến thức Node.JS: https://vietnix.vn/nodejs-la-gi/ [8] Expressjs gì? Tại nên sử dụng Expressjs lập trình? https://itnavi.com.vn/blog/expressjs-la-gi/?amp [9] MongoDB gì? Cơ sở liệu phi quan hệ: https://viblo.asia/p/mongodb-la-gi-co-sodu-lieu-phi-quan-he-bJzKmgoPl9N [10] Trang chủ React: https://reactjs.org/ [11] Trình quản lý thư viện NPM: https://www.npmjs.com [12] Trang dành cho nhà phát triển Spotify: https://developer.spotify.com/ [13] F8 – Học lập trình để làm: https://fullstack.edu.vn/ 34 ... tiêu: - Xây dựng website nghe nhạc trực tuyến với nội dung phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng chức cần thiết website nghe nhạc trực tuyến - Xây dựng website. .. bao gồm việc thay đổi cách thức thói quen nghe nhạc trước xuất website nghe nhạc trực tuyến Chúng em định chọn đề tài ? ?Xây dựng website nghe nhạc trực tuyến? ?? tính ứng dụng cao, nhu cầu thực tế... kho âm nhạc quyền khổng lồ, chúng nhanh chóng trở thành website nghe nhạc trực tuyến hàng đầu Các chức website tập trung vào trải nghiệm nghe nhạc thoải mái cho người dùng Chúng em xây dựng website