Báo cáo Đồ án: Xây dựng website nghe nhạc trực tuyến bằng ReactJS & NodeJS môn Công nghệ phần mềm | Trường Đại học Kiến trúc Đà Nẵng

TRƯỜNG ĐẠI HỌC KIẾN TRÚC ĐÀ NẴNG
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO KẾT THÚC HỌC PHẦN
ĐỒ ÁN CHUYÊN NGÀNH CÔNG NGHỆ PHẦN MỀM
NGÀNH: CÔNG NGHỆ THÔNG TIN ĐỀ TÀI:
NGHIÊN CỨU REACTJS, NODEJS
XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN
Người hướng dẫn: THS. NGUYỄN TẤT PHÚ CƯỜNG
Danh sách sinh viên thực hiện: NGÔ TẤN HIẾU
Mã số sinh viên: 2151220082 Lớp: 21CT2
HUỲNH QUỐC DUY Mã số sinh viên: 2151220079 Lớp: 21CT2
PHẠM VĂN THÀNH Mã số sinh viên: 2151220074 Lớp: 21CT2
NGUYỄN HOÀNG VŨ Mã số sinh viên: 2151220058 Lớp: 21CT2
Đà Nẵng, …../201… TÓM TẮT
Tên đề tài: Nghiên cứu ReactJs – NodeJs, xây dựng Website nghe nhạc trực tuyến.
Danh sách sinh viên thực hiện: Ngô Tấn Hiếu
MSSV: 2151220082 - Lớp:21CT2
Huỳnh Quốc Duy MSSV: 2151220079 - Lớp:21CT2 Phạm Văn Thành
MSSV: 2151220074 - Lớp:21CT2
Nguyễn Hoàng Vũ MSSV: 2151220058 - Lớp:21CT2
Đề tài tập trung vào việc ứng dụng các công nghệ hiện đại như ReactJs và
NodeJs để phát triển một nền tảng nghe nhạc trực tuyến, không chỉ cho phép người
dùng nghe nhạc mà còn tích hợp các tính năng cá nhân hóa và tương tác cộng đồng.
Cụ thể, website sẽ hỗ trợ người dùng tạo playlist, đề xuất bài hát dựa trên sở thích cá
nhân, chia sẻ âm nhạc với bạn bè, và tham gia các phòng nghe nhạc trực tuyến cùng
lúc. Hệ thống sẽ được tối ưu hóa về giao diện người dùng (UX/UI), hiệu suất vận
hành, và đảm bảo tính bảo mật thông tin người dùng.
Ngoài ra, đề tài cũng sẽ nghiên cứu và đề xuất các giải pháp mở rộng hệ thống
trong tương lai, như tích hợp AI để đề xuất nhạc chính xác hơn hoặc hỗ trợ đa nền tảng
(web, mobile). Website nghe nhạc trực tuyến không chỉ mang lại trải nghiệm âm nhạc
phong phú mà còn tạo ra một cộng đồng yêu nhạc, kết nối người dùng thông qua sở thích âm nhạc chung. LỜI NÓI ĐẦU
Để hoàn thành Đồ án chuyên ngành công nghệ phần mềm này, chúng em xin
chân thành cảm ơn quý thầy cô trong khoa Công Nghệ Thông Tin - Trường Đại Học
Kiến Trúc Đà Nẵng, đặc biệt là thầy Ths. Nguyễn Tất Phú Cường đã tận tình truyền
đạt kiến thức trong những năm học vừa qua. Với vốn kiến thức được tiếp thu trong quá
trình học, không chỉ là nền tảng cho quá trình làm đồ án tốt nghiệp mà còn là hành
trang quý báu để chúng em bước vào đời một cách vững chắc và tự tin.
Chúng em cũng xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đến thầy
Nguyễn Tất Phú Cường trong suốt thời gian vừa qua đã nhiệt tình chỉ dạy, giúp đỡ
chúng em để có thể hoàn thành tốt đồ án tốt nghiệp.
Trong quá trình làm bài đồ án tốt nghiệp, do trình độ lý luận cũng như kinh
nghiệm thực tiễn còn hạn chế nên không thể tránh khỏi những thiếu sót, chúng em rất
mong nhận được ý kiến đóng góp quý báu của các thầy cô để chúng em có thể học hỏi
thêm được nhiều kinh nghiệm và kiến thức.
Chúng em xin trân trọng cảm ơn! Phần I: MỞ ĐẦU 1. Lí do chọn đề tài:
Trong thời đại công nghệ số hiện nay, việc nghe nhạc trực tuyến đã trở thành
một phần không thể thiếu trong cuộc sống hàng ngày của nhiều người. Với sự phát
triển của các công nghệ web hiện đại như ReactJS và NodeJS, việc xây dựng một
website nghe nhạc trực tuyến không chỉ mang lại trải nghiệm người dùng tốt hơn mà
còn tối ưu hóa hiệu suất và khả năng mở rộng của ứng dụng. Đề tài này được chọn để
nghiên cứu và áp dụng các công nghệ này nhằm tạo ra một sản phẩm thực tế, đồng
thời nâng cao kiến thức và kỹ năng trong lĩnh vực phát triển web. 2. Mục tiêu đề tài:
- Nghiên cứu và hiểu rõ về các công nghệ ReactJS và NodeJS.
- Xây dựng một website nghe nhạc trực tuyến với các tính năng cơ bản như phát nhạc,
tìm kiếm bài hát, tạo playlist, và quản lý người dùng.
- Tối ưu hóa hiệu suất và trải nghiệm người dùng trên nền tảng web.
- Tạo ra một sản phẩm có khả năng mở rộng và dễ dàng bảo trì.
3. Đối tượng và phạm vi nghiên cứu: -
Đối tượng nghiên cứu: Các công nghệ ReactJS và NodeJS, cùng với các thư
viện và công cụ liên quan. -
Phạm vi nghiên cứu: Tập trung vào việc xây dựng một website nghe nhạc trực
tuyến với các tính năng cơ bản và bao gồm các tính năng phức tạp như phân tích dữ
liệu người dùng hay tích hợp thanh toán.
4. Phương pháp nghiên cứu: -
Nghiên cứu tài liệu: Tìm hiểu các tài liệu, bài viết, và khóa học về ReactJS và NodeJS. -
Thực hành: Xây dựng các ứng dụng nhỏ để làm quen với các công nghệ trước
khi áp dụng vào dự án chính. -
Phân tích và đánh giá: So sánh các phương pháp và công cụ khác nhau để chọn
ra giải pháp tối ưu cho dự án. -
Kiểm thử: Thực hiện các bài kiểm thử để đảm bảo tính ổn định và hiệu suất của ứng dụng. 5. Đóng góp đề tài: -
Cung cấp một ứng dụng web nghe nhạc trực tuyến hoạt động ổn định và có khả năng mở rộng. -
Đóng góp vào việc phổ biến và ứng dụng các công nghệ ReactJS và NodeJS
trong cộng đồng phát triển web. -
Tạo ra một nguồn tài liệu tham khảo hữu ích cho những người quan tâm đến
việc xây dựng ứng dụng web tương tự. 6. Cấu trúc đề tài: -
Phần I: Mở đầu - Giới thiệu tổng quan về đề tài, lí do chọn đề tài, mục tiêu, đối
tượng và phạm vi nghiên cứu, phương pháp nghiên cứu, đóng góp của đề tài, và cấu trúc đề tài. -
Phần II: Cơ sở lý thuyết - Trình bày các kiến thức cơ bản về ReactJS và
NodeJS, cùng với các công nghệ liên quan. -
Phần III: Phân tích và thiết kế hệ thống - Phân tích yêu cầu và thiết kế kiến trúc
hệ thống, cơ sở dữ liệu, và giao diện người dùng. -
Phần IV: Triển khai và thử nghiệm - Triển khai các tính năng của ứng dụng và
thực hiện các bài kiểm thử. -
Phần V: Kết luận và hướng phát triển - Tổng kết lại kết quả đạt được và đề
xuấtcác hướng phát triển trong tương lai.
PHẦN II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 MÔ TẢ BÀI TOÁN
Trong bối cảnh công nghệ phát triển mạnh mẽ và nhu cầu giải trí ngày càng cao, việc
xây dựng một website nghe nhạc trực tuyến là cần thiết để đáp ứng nhu cầu của cả
người dùng và nghệ sĩ/nhà sản xuất âm nhạc.
Đối với admin, bài toán đặt ra là làm thế nào để dễ dàng quản lý và phân phối nội
dung âm nhạc, theo dõi lượt nghe, và tăng khả năng tiếp cận khán giả. Họ cần một hệ
thống đơn giản, minh bạch, cho phép tải lên và quản lý các bài hát, album, và playlist.
Đồng thời, họ cần các công cụ hỗ trợ quảng bá như thống kê lượt nghe, tương tác
người dùng và xu hướng nghe nhạc.
Đối với người nghe nhạc, bài toán nằm ở việc tìm kiếm và thưởng thức nhạc phù hợp
với sở thích một cách thuận tiện. Người dùng cần trải nghiệm nghe nhạc cá nhân hóa
với tính năng gợi ý thông minh, tạo playlist, nghe offline, và chia sẻ âm nhạc với bạn bè. 2.2 PHÂN TÍCH
1. Đối tượng sử dụng và chức năng chính:
- Người dùng: Đăng ký/đăng nhập, tìm kiếm nhạc, tạo playlist, nghe nhạc - Admin:
Quản lý người dùng, nghệ sĩ, nội dung; giám sát hoạt động; thống kê 2. Yêu cầu kỹ thuật:
- Giao diện (UI/UX): Hiện đại, trực quan, dễ sử dụng, gồm các màn hình chính (trang
chủ, thư viện, tìm kiếm, player)
- Cơ sở dữ liệu: Lưu trữ thông tin người dùng, nghệ sĩ, bài hát, playlist
- Streaming: Hệ thống phát nhạc trực tuyến với độ trễ thấp
- Bảo mật: Bảo vệ bản quyền âm nhạc và thông tin người dùng
3. Xây dựng chức năng của ứng dụng 3.1 Người dùng (User)
Vai trò: Người sử dụng website để tìm kiếm và thưởng thức âm nhạc Chức năng chính:
- Đăng ký và đăng nhập:
+ Đăng ký tài khoản mới bằng email
+ Đăng nhập qua Google, Facebook + Khôi phục mật khẩu
- Tìm kiếm và khám phá nhạc:
+ Tìm kiếm theo tên bài hát, nghệ sĩ, album
+ Lọc theo thể loại, tâm trạng, thời gian
+ Khám phá nhạc mới, xu hướng - Nghe nhạc:
+ Phát nhạc với chất lượng cao
+ Điều chỉnh âm lượng, tốc độ phát
+ Xem lời bài hát đồng bộ
+ Tải về để nghe offline - Quản lý cá nhân:
+ Tạo và quản lý playlist
+ Thêm bài hát yêu thích + Theo dõi nghệ sĩ
+ Chia sẻ nhạc lên mạng xã hội 3.2 Admin
Vai trò: Quản lý và giám sát hoạt động của website Chức năng chính: - Quản lý người dùng:
+ Quản lý tài khoản người dùng và nghệ sĩ
+ Phân quyền và kiểm soát truy cập
+ Xử lý báo cáo vi phạm - Quản lý nội dung:
+ Kiểm duyệt nội dung âm nhạc + Quản lý bản quyền
+ Tổ chức danh mục và thể loại nhạc - Thống kê và báo cáo:
+ Theo dõi lượt nghe, tương tác
+ Phân tích xu hướng nghe nhạc
+ Báo cáo doanh thu (nếu có tính năng premium) - Hệ thống:
+ Giám sát hiệu suất server
+ Quản lý băng thông và lưu trữ
+ Bảo trì và cập nhật hệ thống Kỳ vọng kết quả:
Website hoạt động ổn định, mang lại trải nghiệm nghe nhạc tốt cho người dùng, hỗ
trợ hiệu quả cho nghệ sĩ trong việc phân phối nội dung âm nhạc, và đảm bảo tính
bền vững của hệ thống. 4. Mô hình hóa yêu cầu Sơ đồ Use case tổng quát
Sơ đồ tuần tự tổng quát
4.1 . Biểu đồ Use case đăng nhập
Mô tả Use case đăng nhập Tên Use case Đăng nhập Tác nhân Admin , người dùng Điều kiện đầu vào
Admin , người dùng chưa đăng nhập Kết quả đầu ra
Admin , người dùng đăng nhập thành công Mô tả
Use case cho phép Admin, người dung đăng nhập
Sơ đồ tuần tự đăng nhập
4.2. Biểu đồ Use case đăng ký Mô tả Use case đăng ký Tên Use case Đăng ký Tác nhân Người dùng Điều kiện đầu vào
Người dùng chưa đăng ký Kết quả đầu ra
Người dùng đăng ký thành công Mô tả
Use case cho phép người dùng đăng ký
Sơ đồ tuần tự đăng kí
4.3 Biểu đồ Use case thông tin về nghệ sĩ và bài hát
Mô tả Use case thông tin về nghệ sĩ và bài hát Tên Use case
Thông tin về nghệ sĩ và bài hát Tác nhân Người dùng Điều kiện đầu vào
Người dùng tìm thông tin nghệ sĩ và bài hát Kết quả đầu ra
Thông tin hiển thị thành công hoặc không thành công Mô tả
Cho phép người dung xem thông tin nghệ sĩ và bài hát
Biểu đồ tuần tự thông tin về nghệ sĩ và bài hát
4.4 Biểu đồ Use case nge nhạc trực tuyến
Mô tả Use case nge nhạc trực tuyến Tên Use case Nge nhạc Tác nhân Người dùng Điều kiện đầu vào
Người dùng điều chỉnh nhạc và xem lời Kết quả đầu ra
Người dùng điều chỉnh thành công Mô tả
Cho phép người dung điều chỉnh nhạc và xem lời
Sơ đồ tuần tự chức năng nghe nhạc trực tuyến
4.5 Biểu đồ Use case tìm kiếm Mô tả Use case tìm kiếm Tên Use case Tìm kiếm Tác nhân Người dùng Điều kiện đầu vào
Người dùng tìm kiếm bài hát, nghệ sĩ, album, playlist Kết quả đầu ra
Người dùng tìm kiếm thành công Mô tả
Cho phép người dung tìm kiếm bài hát, nghệ sĩ, album, playlist
Sơ đồ tuần tự chức năng tìm kiếm
4.6 Biểu đồ Use case xã hội Mô tả Use case xã hội Tên Use case Xã hội Tác nhân Người dùng Điều kiện đầu vào
Người dùng theo dõi, bình luận, đánh giá,
chia sẻ nghệ sĩ và bài hát Kết quả đầu ra
Người dùng theo dõi, bình luận, đánh giá,
chia sẻ nghệ sĩ và bài hát thành công Mô tả
Cho phép người dung theo dõi, bình luận,
đánh giá, chia sẻ nghệ sĩ và bài hát
Sơ đồ tuần tự xã hội