HANOI UNIVERSITY OF SCIENCE AND

TECHNOLOGY

PROJECT 1 :
Thiết kế và xây dựng Web nghe nhạc

Giảng viên hướng dẫn: Ths. Vũ Đức Vượng

Sinh viên thực hiện: Trịnh Quang Duy
 LỜI CẢM ƠN
em xin gửi lời chân thành cảm ơn tới giáo viên hướng dẫn, thầy Vũ Đức
Vượng, vì sự kiên nhẫn, hướng dẫn và hỗ trợ của thầy, em đã được truyền cảm
hứng để nghiên cứu và thực hiện đề tài này. Chúng em vô cùng biết ơn vì sự
tâm huyết cũng như kì vọng của thầy trong suốt học kì vừa qua.

1
 MỤC LỤC

I. Giới thiệu chung ............................................................................ 2

1.1. Đặt vấn đề .............................. Error! Bookmark not defined.
1.2. Mục tiêu và phạm vi đề tài..... Error! Bookmark not defined.
1.3. Định hướng và giải pháp ......................................................... 2
II. KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU .................................. 4
III. CÔNG NGHỆ SỬ DỤNG .......................................................... 7
3.1. NodeJS ..................................................................................... 7
3.2. ReactJS..................................................................................... 8
3.3. ExpressJS ............................................................................... 10
3.3. MongoDB ............................................................................... 11
IV. THỰC NGHIỆM VÀ ĐÁNH GIÁ........................................... 12
4.1. Thiết kế kiến trúc .................................................................. 12
4.2. Thiết kế giao diện .................................................................. 12
4.3. Thiết kế cơ sở dữ liệu ............................................................ 13
4.4. Xây dựng ứng dựng ............................................................... 15
V. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN……………………. 20
VI. TÀI LIỆU THAM KHẢO…………………………………… 21

I. Giới thiệu chung

Web âm nhạc đã trở thành một phần không thể thiếu trong cuộc sống hiện đại
của chúng ta. Với sự phát triển của công nghệ, người dùng có thể dễ dàng truy

2
cập đến hàng triệu bài hát, album và ca sĩ yêu thích của mình chỉ bằng một cú
nhấp chuột. Ngoài ra, những nền tảng âm nhạc trực tuyến cũng cung cấp cho
người dùng khả năng tìm kiếm và khám phá những bài hát mới và nghệ sĩ mới,
từ đó giúp mở rộng và nâng cao trải nghiệm nghe nhạc của người dùng.
Tuy nhiên, ngành công nghiệp âm nhạc trên web cũng đang đối mặt với nhiều
thách thức như vi phạm bản quyền, sự cạnh tranh khốc liệt giữa các nền tảng âm
nhạc và sự thay đổi thói quen nghe nhạc của người dùng. Để giải quyết các vấn
đề này, ngành công nghiệp âm nhạc đang tích cực nghiên cứu và áp dụng các
giải pháp mới, từ việc bảo vệ bản quyền đến cung cấp nội dung âm nhạc chất
lượng cao và khuyến khích người dùng trả phí cho dịch vụ âm nhạc trực tuyến.
Với những tiềm năng và thách thức của mình, ngành công nghiệp âm nhạc trên
web đang dần trở thành một ngành công nghiệp phát triển và hấp dẫn với nhiều
cơ hội cho sự đầu tư và phát triển trong tương lai. Trong báo cáo này, chúng tôi
sẽ cùng nhau khám phá và phân tích sự phát triển và xu hướng của ngành công
nghiệp âm nhạc trên web, đồng thời đưa ra những quan điểm và gợi ý về cách
tận dụng cơ hội trong ngành này.

Nắm bắt được điều đó, trong khi tiếp cận môn Project 1, nhóm chúng em
đã lựa chọn đề tài “ Web âm nhạc”.
Trong quá trình hoàn thành bài tập lớn, chúng em xin được gửi lời cảm
ơn chân thành đến:
 Thầy giáo hướng dẫn Ths. Vũ Đức Vượng giảng viên trường đại học Bách
Khoa Hà Nội đã hết lòng hướng dẫn, giúp đỡ tạo mọi điều kiện để chúng
em hoàn thành bài tập lớn.

1.3. Định hướng và giải pháp

- Để đạt được những mục tiêu trên, em đã sử dụng kết hợp nhiều công
nghệ, bao gồm NodeJS, ReactJS, ExpressJs và Xampp . NodeJS là một môi
trường thời gian chạy JavaScript phía máy chủ cung cấp một nền tảng hiệu quả
và có thể mở rộng để xây dựng các ứng dụng web. ReactJS là một thư viện
JavaScript phổ biến để xây dựng giao diện người dùng, trong khi ExpressJs là
một khung NodeJS linh hoạt để tạo các ứng dụng web.

- Bằng cách sử dụng các công nghệ này, em đã tạo ra một web âm nhạc mạnh
mẽ và có thể mở rộng, cung cấp cho người dùng giao diện người dùng trực quan

3
và hấp dẫn, đồng thời duy trì mức bảo mật và quyền riêng tư cao nhất.em tin
rằng ứng dụng này sẽ rất có lợi cho những người dùng muốn nghe nhạc trong
thời gian thực, bất kể vị trí hoặc thiết bị của họ.

II. KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU

2.1 Khảo sát hiện trạng

Thời kỳ đầu, khi Internet chưa bùng nổ, mạng di động thống trị, người
dùng chỉ xoay quanh 2 lựa chọn: gọi điện thoại và nhắn tin SMS. Nhưng bây
giờ thì sao? Wi-Fi chỗ nào cũng có, từ nhà đến công ty, ra quán café sang chảnh
hay trà đá vỉa hè. Không Wi-Fi thì 3G, 4G bật 24/7. Cước phí Internet rẻ hơn rất
nhiều lần so với tiền card điện thoại di động hàng tháng.

Để thực hiện khảo sát, chúng tôi đã tìm kiếm các trang web âm nhạc phổ
biến và phân tích chất lượng và hiệu suất của chúng bằng các công cụ như
Google PageSpeed Insights và GTmetrix. Các trang web được khảo sát bao gồm
Spotify, Apple Music, Tidal và SoundCloud.

Kết quả cho thấy rằng tốc độ tải trang của các trang web âm nhạc này có
thể chậm và chất lượng trải nghiệm người dùng không được tối ưu. Một số
trang web có thời gian tải trang rất chậm, khiến người dùng phải đợi lâu để truy
cập vào nội dung âm nhạc. Thêm vào đó, một số trang web còn có các lỗi trong
cách xử lý dữ liệu, khiến trải nghiệm người dùng trở nên khó khăn.

Để cải thiện trải nghiệm người dùng và tăng tốc độ tải trang, chúng tôi đề
xuất các giải pháp như tối ưu hóa hình ảnh và tài nguyên trên trang web, sử
dụng các giải pháp bộ nhớ cache, tối ưu hóa cấu trúc trang web và sử dụng các
công nghệ mới như HTTP/2 và CDN. Bên cạnh đó, các trang web cần kiểm tra
và sửa các lỗi xử lý dữ liệu để cải thiện trải nghiệm người dùng và tăng tính ổn
định của trang web.

2.2 Tổng quan chức năng

2.2.1 Biểu đồ use case tổng quát

4
2.2.2 Quy trình nghiệp vụ

- Hoạt động gửi tin nhắn:

Khi người dùng nhập nội dung tin nhắn vào thanh hộp thoại trên
website, người dùng chỉ cần click chuột vào nút gửi hoặc phím Enter để
gửi tin nhắn cho người khác trên website

- Hoạt động tạo phòng trò chuyện mới:

Khi người dùng muốn tạo một group cho một lĩnh vực riêng nào đó,
họ chỉ cần ấn vào nút tạo group mới là đã có thể tạo được một nhóm mới

5
 - Hoạt động quản lí khách hàng:

Khi cần diều chỉnh thông tin khách hàng cũng như xóa đi các khách
hàng không phù hợp đối với app nữa hoặc các khách hàng mà app mới
được bổ sung sẽ do admin quản lý.

- Hoạt động quản lí thông tin:

Khi khách hàng có các vấn đề thắc mắc về app, họ có thể liên lạc đến
bộ phận hỗ trợ của app để được tư vấn và giải quyết các thắc mắc.

2.2.3 Xác định yêu cầu phần mềm

- Yêu cầu chức năng:

+ Gửi tin nhắn
+ Tạo phòng chat
+ Tham gia phòng chat
+ Tìm kiếm người dùng

- Yêu cầu phi chức năng:

+ Tính tiện dụng: Giao diện thân thiện, dễ sử dụng, đa ngôn ngữ
(tối thiểu phải có tiếng Anh và tiếng Việt)
+ Tính ổn định: Hệ thống hoạt động ổn định 24/7.
+ Tính an toàn thông tin: Bảo mật, toàn vẹn, xác thực.
+ Tính phân quyền: người sử dụng chương trình được cấp
username và password và được phân quyền sử dụng chương trình, giúp người
quản lý có thể theo dõi, kiểm soát được chương trình, tránh các hợp sửa đổi
thông tin không thuộc phạm vi quyền hạn.

6
 III. CÔNG NGHỆ SỬ DỤNG

3.1. NodeJS
- Node.js là một môi trường thời gian chạy JavaScript nguồn mở, đa nền
tảng cho phép các nhà phát triển xây dựng các ứng dụng phía máy chủ bằng
JavaScript. Dưới đây là một số tính năng, lợi ích và hạn chế của Node.js, cũng
như cách chúng được sử dụng trong trò chuyện trên web:

- Đặc trưng:
+ Kiến trúc hướng sự kiện: Node.js được xây dựng xung quanh mô
hình I/O không chặn, hướng sự kiện giúp cho nó có khả năng mở rộng và
hiệu quả cao.
+ Nhẹ và nhanh: Node.js là môi trường thời gian chạy nhẹ, sử dụng
một lượng nhỏ tài nguyên và có thể xử lý đồng thời một số lượng lớn kết
nối.
+ Thư viện mô-đun phong phú: Node.js có một thư viện mô-đun
lớn và đang phát triển mà các nhà phát triển có thể sử dụng để thêm chức
năng cho ứng dụng của họ.
+ Dễ học: Vì Node.js sử dụng JavaScript, một ngôn ngữ phổ biến
và được sử dụng rộng rãi nên các nhà phát triển rất dễ học và bắt đầu.

- Những lợi ích:

+ Khả năng mở rộng: Kiến trúc hướng sự kiện của Node.js làm cho
nó có khả năng mở rộng cao, cho phép nó xử lý khối lượng lớn dữ liệu và
kết nối.
+ Hiệu quả: Node.js được biết đến với tốc độ và hiệu quả, khiến nó
trở thành lựa chọn phổ biến để xây dựng các ứng dụng thời gian thực như
trò chuyện trên web.
+ Cộng đồng lớn: Node.js có một cộng đồng các nhà phát triển lớn
và tích cực, những người đóng góp cho sự phát triển của nó và tạo ra các
mô-đun hữu ích có thể được sử dụng trong các ứng dụng.
+ Chia sẻ mã: Node.js cho phép các nhà phát triển sử dụng cùng
một ngôn ngữ và mã trên cả mặt trước và mặt sau của ứng dụng, giúp
chia sẻ mã dễ dàng hơn và nâng cao hiệu quả phát triển.

7
 - Hạn chế:
+ Đơn luồng: Node.js là đơn luồng, có nghĩa là nó có thể không
phải là lựa chọn tốt nhất cho các tác vụ sử dụng nhiều CPU.
+ Quản lý bộ nhớ: Vì Node.js sử dụng mô hình I/O không chặn,
nên nó có thể dễ bị rò rỉ bộ nhớ nếu không được quản lý đúng cách.
+ Thiếu khả năng tương thích ngược: Node.js vẫn là một công
nghệ tương đối mới, điều đó có nghĩa là các phiên bản cũ hơn có thể
không tương thích ngược với các phiên bản mới hơn.

- Trong trò chuyện trên web, Node.js được sử dụng làm công nghệ phụ
trợ để xử lý giao tiếp thời gian thực giữa những người dùng. Kiến trúc hướng sự
kiện của Node.js đặc biệt hữu ích trong bối cảnh này, vì nó cho phép xử lý hiệu
quả nhiều kết nối và cập nhật theo thời gian thực. Bản chất gọn nhẹ của Node.js
cũng khiến nó rất phù hợp để trò chuyện trên web, vì nó có thể xử lý đồng thời
một số lượng lớn kết nối mà không cần sử dụng quá nhiều tài nguyên. Cuối
cùng, thư viện mô-đun phong phú có sẵn trong Node.js giúp các nhà phát triển
dễ dàng thêm chức năng bổ sung vào ứng dụng trò chuyện trên web, chẳng hạn
như xác thực người dùng và lưu trữ dữ liệu.

3.2. ReactJS
- ReactJS là một thư viện JavaScript phổ biến để xây dựng giao diện
người dùng. Dưới đây là một số tính năng, lợi ích và hạn chế của ReactJS, cũng
như cách chúng được sử dụng trong trò chuyện trên web:

- Đặc trưng:
+ Kiến trúc dựa trên thành phần: ReactJS được xây dựng dựa trên
kiến trúc dựa trên thành phần giúp dễ dàng chia các giao diện người dùng
phức tạp thành các phần nhỏ hơn, có thể tái sử dụng.
+ DOM ảo: ReactJS sử dụng DOM ảo để tối ưu hóa hiệu suất, cho
phép nó cập nhật giao diện người dùng một cách nhanh chóng và hiệu
quả.
+ Ràng buộc dữ liệu một chiều: ReactJS sử dụng liên kết dữ liệu
một chiều, nghĩa là dữ liệu chảy theo một hướng duy nhất thông qua cấu
trúc phân cấp thành phần, giúp quản lý và gỡ lỗi dễ dàng hơn.

8
 + Cú pháp JSX: ReactJS sử dụng cú pháp có tên là JSX, cho phép
các nhà phát triển viết mã giống như HTML trong JavaScript, giúp tạo và
quản lý giao diện người dùng dễ dàng hơn.

- Những lợi ích:

+ Khả năng sử dụng lại: Kiến trúc dựa trên thành phần của ReactJS
giúp dễ dàng sử dụng lại các thành phần trên các phần khác nhau của ứng
dụng, giảm thời gian phát triển và tăng tính nhất quán.
+ Hiệu suất: DOM ảo của ReactJS và các bản cập nhật hiệu quả
giúp nó hoạt động nhanh và phản hồi nhanh, ngay cả đối với các giao
diện người dùng lớn và phức tạp.
+ Cộng đồng lớn: ReactJS có một cộng đồng các nhà phát triển lớn
và tích cực, những người đóng góp cho sự phát triển của nó và tạo ra các
mô-đun hữu ích có thể được sử dụng trong các ứng dụng.
+ Dễ học: Vì ReactJS sử dụng các công nghệ quen thuộc như
JavaScript và HTML nên các nhà phát triển rất dễ học và bắt đầu sử
dụng.

- Hạn chế:
+ Đường cong học tập: Mặc dù ReactJS rất dễ bắt đầu, nhưng có
thể mất thời gian để thành thạo kiến trúc dựa trên thành phần và các tính
năng nâng cao khác.
+ Chức năng hạn chế: ReactJS tập trung vào phát triển giao diện
người dùng, vì vậy nó có thể không phải là lựa chọn tốt nhất để xây dựng
chức năng back-end phức tạp.

- Trong trò chuyện trên web, ReactJS đã được sử dụng trên giao diện
người dùng để tạo giao diện người dùng năng động và phản hồi nhanh. Kiến
trúc dựa trên thành phần của ReactJS giúp dễ dàng chia giao diện người dùng
thành các thành phần nhỏ hơn, có thể tái sử dụng, chẳng hạn như tin nhắn trò
chuyện, phòng trò chuyện và danh sách người dùng. DOM ảo và các bản cập
nhật hiệu quả của ReactJS cho phép xử lý các bản cập nhật và thông báo theo
thời gian thực mà không làm chậm ứng dụng. Cuối cùng, cú pháp JSX của
ReactJS giúp dễ dàng tạo và quản lý các giao diện người dùng phức tạp, chẳng
hạn như phòng trò chuyện có nhiều người tham gia và hồ sơ người dùng có thể
tùy chỉnh.

9
3.3. ExpressJS
- ExpressJS là một khung ứng dụng web phổ biến cho Node.js. Dưới đây
là một số tính năng, lợi ích và hạn chế của ExpressJS, cũng như cách chúng
được sử dụng trong trò chuyện trên web:

- Đặc trưng:
+ Định tuyến: ExpressJS cung cấp một hệ thống định tuyến mạnh
mẽ cho phép các nhà phát triển dễ dàng ánh xạ các yêu cầu HTTP tới các
chức năng xử lý cụ thể.
+ Phần mềm trung gian: ExpressJS hỗ trợ phần mềm trung gian, là
các chức năng có thể được thực thi trước hoặc sau khi yêu cầu được xử
lý, cho phép xử lý bổ sung hoặc sửa đổi các yêu cầu và phản hồi.
+ Công cụ tạo khuôn mẫu: ExpressJS hỗ trợ nhiều công cụ tạo
khuôn mẫu, giúp dễ dàng hiển thị các chế độ xem HTML động dựa trên
dữ liệu từ máy chủ.
+ Xử lý lỗi: ExpressJS cung cấp một cơ chế xử lý lỗi đơn giản và
có thể tùy chỉnh giúp dễ dàng nắm bắt và xử lý lỗi một cách nhất quán và
tập trung.

- Những lợi ích:

+ Nhanh và có thể mở rộng: ExpressJS nhanh và hiệu quả, làm cho
nó trở thành một lựa chọn tốt để xây dựng các ứng dụng web có thể mở
rộng để có thể xử lý một số lượng lớn yêu cầu.
+ Tính linh hoạt: ExpressJS rất linh hoạt, cho phép các nhà phát
triển tùy chỉnh và mở rộng nó để phù hợp với nhu cầu cụ thể của ứng
dụng của họ.
+ Cộng đồng lớn: ExpressJS có một cộng đồng các nhà phát triển
lớn và tích cực, những người đóng góp cho sự phát triển của nó và tạo ra
các mô-đun hữu ích có thể được sử dụng trong các ứng dụng.
+ Dễ học: ExpressJS tương đối dễ học và dễ bắt đầu, đặc biệt đối
với các nhà phát triển đã quen thuộc với Node.js.

- Hạn chế:
+ Đường cong học tập: Mặc dù ExpressJS tương đối dễ học, nhưng
có thể mất thời gian để thành thạo các tính năng và kỹ thuật nâng cao
hơn, chẳng hạn như phần mềm trung gian và xử lý lỗi.

10
 + Chức năng hạn chế: ExpressJS chủ yếu tập trung vào xử lý các
yêu cầu và phản hồi HTTP, do đó, nó có thể không phải là lựa chọn tốt
nhất cho các ứng dụng phức tạp hơn yêu cầu chức năng bổ sung, chẳng
hạn như xử lý nền hoặc giao tiếp thời gian thực.

- Trong trò chuyện trên web, ExpressJS được sử dụng ở phía máy chủ để
xử lý các yêu cầu và phản hồi HTTP, quản lý định tuyến và cung cấp các chức
năng phần mềm trung gian để xử lý bổ sung. Hệ thống định tuyến mạnh mẽ của
ExpressJS được sử dụng để ánh xạ các yêu cầu HTTP đến tới các chức năng xử
lý cụ thể, chẳng hạn như truy xuất tin nhắn trò chuyện hoặc cập nhật thông tin
người dùng. Các chức năng của phần mềm trung gian được sử dụng để xử lý các
tác vụ như xác thực, xử lý lỗi và xử lý dữ liệu đến từ máy khách. Cuối cùng,
ExpressJS đã được sử dụng để hiển thị các chế độ xem HTML động bằng cách
sử dụng các công cụ tạo khuôn mẫu, chẳng hạn như Tay cầm hoặc EJS.

3.3. Xampp

Chữ X đầu tiên là viết tắt của hệ điều hành mà nó hoạt động với: Linux,
Windows và Mac OS X.

Apache: Web Server mã nguồn mở Apache là máy chủ được sử dụng rộng rãi
nhất trên toàn thế giới để phân phối nội dung Web. Ứng dụng được cung cấp
dưới dạng phần mềm miễn phí bởi Apache Software Foundation.

MySQL / MariaDB: Trong MySQL, XAMPP chứa một trong những hệ quản
trị cơ sở dữ liệu quan hệ phổ biến nhất trên thế giới. Kết hợp với Web Server
Apache và ngôn ngữ lập trình PHP, MySQL cung cấp khả năng lưu trữ dữ liệu
cho các dịch vụ Web. Các phiên bản XAMPP hiện tại đã thay thế MySQL bằng
MariaDB (một nhánh của dự án MySQL do cộng đồng phát triển, được thực
hiện bởi các nhà phát triển ban đầu).

PHP: Ngôn ngữ lập trình phía máy chủ PHP cho phép người dùng tạo các trang
Web hoặc ứng dụng động. PHP có thể được cài đặt trên tất cả các nền tảng và
hỗ trợ một số hệ thống cơ sở dữ liệu đa dạng.

Perl: ngôn ngữ kịch bản Perl được sử dụng trong quản trị hệ thống, phát triển
Web và lập trình mạng. Giống như PHP, Perl cũng cho phép người dùng lập
trình các ứng dụng Web động.

11
 IV. THỰC NGHIỆM VÀ ĐÁNH GIÁ

4.1. Thiết kế kiến trúc

- Kiến trúc của web chat bao gồm một thành phần giao diện người dùng
và một thành phần phụ trợ. Thành phần front-end chịu trách nhiệm trình bày
giao diện trò chuyện cho người dùng, trong khi thành phần back-end xử lý việc
xử lý tin nhắn, lưu trữ và truy xuất dữ liệu từ cơ sở dữ liệu.

- Thành phần giao diện người dùng thường được xây dựng bằng khung
JavaScript chẳng hạn như ReactJS, cho phép tạo giao diện người dùng động và
tương tác. Thành phần giao diện người dùng giao tiếp với thành phần phụ trợ
bằng cách sử dụng các yêu cầu và phản hồi HTTP, thường thông qua một API
do phụ trợ cung cấp.

- Thành phần back-end được xây dựng bằng khung phía máy chủ như
NodeJS và ExpressJS, cho phép tạo logic và API phía máy chủ. Thành phần
back-end chịu trách nhiệm nhận và xử lý thông báo từ thành phần front-end,
đồng thời lưu trữ và truy xuất dữ liệu từ cơ sở dữ liệu.

- Các thành phần front-end và back-end giao tiếp với nhau bằng API,
thường ở dạng RESTful API hoặc WebSockets. API RESTful cho phép trao đổi
dữ liệu giữa front-end và back-end bằng cách sử dụng các yêu cầu và phản hồi
HTTP, trong khi WebSockets cung cấp kênh giao tiếp hai chiều, thời gian thực
giữa front-end và back-end.

- Nhìn chung, kiến trúc trò chuyện trên web được thiết kế để cung cấp
giao diện trò chuyện có thể mở rộng, linh hoạt và tương tác cho người dùng,
đồng thời cung cấp khả năng lưu trữ và truy xuất dữ liệu từ cơ sở dữ liệu đáng
tin cậy và hiệu quả.

4.2. Thiết kế giao diện

-Trang web âm nhạc được thiết kế với mục đích cung cấp thông tin về các
bài hát, nghệ sĩ và sự kiện âm nhạc cho người dùng. Giao diện trang web được
thiết kế để đơn giản, dễ sử dụng và tối ưu hóa trải nghiệm người dùng.

+Header của trang web bao gồm logo của trang web, menu chính và

12
thanh tìm kiếm. Logo được đặt ở góc trái của header để giúp người dùng dễ
dàng nhận biết trang web. Menu chính bao gồm các liên kết đến các trang chính
của trang web như bài hát, nghệ sĩ và sự kiện. Thanh tìm kiếm được đặt ở phía
bên phải của header để cho phép người dùng tìm kiếm bài hát hoặc nghệ sĩ một
cách nhanh chóng.
+Banner được đặt ở phía trên của trang web và được sử dụng để quảng
cáo các sự kiện âm nhạc mới nhất hoặc các album mới của các nghệ sĩ. Banner
cũng bao gồm nút để chuyển đến trang liên quan.

+Các danh mục Trang web âm nhạc được chia thành các danh mục như
bài hát, nghệ sĩ và sự kiện. Các danh mục này được đặt ở phía bên trái của trang
web và được sắp xếp theo thứ tự ưu tiên. Các danh mục này cũng được trang bị
với các liên kết đến các trang chi tiết để người dùng có thể xem chi tiết về từng
bài hát, nghệ sĩ hoặc sự kiện.

+Danh sách bài hát và nghệ sĩ Danh sách bài hát và danh sách nghệ sĩ
được đặt ở trung tâm của trang web. Các danh sách này được thiết kế với kiểu
dáng bắt mắt và đơn giản để người dùng dễ dàng tìm kiếm thông tin về các bài
hát và nghệ sĩ. Mỗi bài hát hoặc nghệ sĩ được hiển thị với hình ảnh đại diện, tên
và thông tin ngắn về bài hát hoặc nghệ sĩ.

+ Footer của trang web bao gồm các liên kết đến các trang liên quan như
trang giới thiệu, trang liên hệ và trang đăng nhập. Ngoài ra, footer cũng bao
gồm

+ Khả năng truy cập: Điều quan trọng là thiết kế giao diện âm nhạc có
lưu ý đến khả năng truy cập, đảm bảo rằng người khuyết tật có thể sử dụng giao
diện đó. Điều này bao gồm sử dụng độ tương phản màu phù hợp, cung cấp văn
bản thay thế cho hình ảnh và đảm bảo rằng giao diện có thể được điều hướng
bằng phím tắt.

- Nhìn chung, giao diện trò chuyện trên web phải trực quan, thân thiện
với người dùng và hấp dẫn trực quan, tập trung vào tính dễ sử dụng và chức
năng.

4.3. Thiết kế cơ sở dữ liệu

-Để thiết kế cơ sở dữ liệu cho web âm nhạc, ta cần lưu trữ các thông tin
về bài hát, nghệ sĩ, album, thể loại, người dùng và lịch sử nghe nhạc. Dưới đây
là một số bảng và mối quan hệ giữa chúng có thể được sử dụng trong thiết kế cơ
sở dữ liệu:

13
 -Bảng "Songs": Lưu trữ các thông tin về bài hát bao gồm tên bài hát, nghệ
sĩ, album, thể loại, năm phát hành, thời lượng, lời bài hát, lượt nghe, ngày đăng
tải và link tới file nhạc.
+song_id (primary key)
+song_name
+artist_id (foreign key)
+album_id (foreign key)
+genre_id (foreign key)
+year
+duration
+lyrics
+play_count
+upload_date
+song_file
-Bảng "Artists": Lưu trữ thông tin về nghệ sĩ bao gồm tên nghệ sĩ, thông
tin liên lạc và thông tin về các bài hát của nghệ sĩ đó.
+artist_id (primary key)
+artist_name
+contact_info
+bio
-Bảng "Albums": Lưu trữ thông tin về các album âm nhạc bao gồm tên
album, nghệ sĩ, năm phát hành và số lượng bài hát.
+album_id (primary key)
+album_name
+artist_id (foreign key)
+year
+number_of_songs
-Bảng "Genres": Lưu trữ thông tin về các thể loại âm nhạc bao gồm tên
thể loại và mô tả.
+genre_id (primary key)
+genre_name
+description
-Bảng "Users": Lưu trữ thông tin về người dùng bao gồm tên đăng nhập,
mật khẩu, email, ngày sinh và thông tin liên hệ.
+user_id (primary key)
+username
+password
+email
+date_of_birth
+contact_info
-Bảng "Playlists": Lưu trữ thông tin về danh sách phát của người dùng
bao gồm tên danh sách phát, người dùng và các bài hát trong danh sách phát đó.
+playlist_id (primary key)

14
+playlist_name
+user_id (foreign key)
-Bảng "Playlist_Songs": Lưu trữ thông tin về các bài hát trong danh sách
phát của người dùng bao gồm danh sách phát và bài hát.
+playlist_id (foreign key)
+song_id (foreign key)
-Bảng "Listening_History" lưu trữ thông tin về lịch sử nghe nhạc của
người dùng bao gồm thông tin về bài hát đã nghe, thời gian nghe và người dùng.
+history_id (primary key)
+user_id (foreign key)
+song_id (foreign key)
+timestamp
Một số mối quan hệ giữa các bảng:
Bảng "Songs" có mối quan hệ nhiều-một với bảng "Artists", bảng
"Albums" và bảng "Genres", vì một bài hát có thể thuộc về nhiều nghệ sĩ, album
và thể loại khác nhau.

Bảng "Albums" và bảng "Artists" cũng có mối quan hệ nhiều-một vì một

nghệ sĩ có thể phát hành nhiều album khác nhau.

Bảng "Playlists" và bảng "Users" có mối quan hệ nhiều-một vì một người

dùng có thể có nhiều danh sách phát khác nhau.

Bảng "Playlist_Songs" có mối quan hệ nhiều-nhiều với bảng "Songs", vì

một bài hát có thể thuộc về nhiều danh sách phát khác nhau.

Bảng "Listening_History" có mối quan hệ nhiều-một với bảng "Users" và

bảng "Songs", vì một người dùng có thể nghe nhiều bài hát khác nhau và một
bài hát có thể được nghe bởi nhiều người dùng khác nhau.

Trên đây là một số bảng và mối quan hệ có thể được sử dụng trong thiết
kế cơ sở dữ liệu cho web âm nhạc. Tuy nhiên, cấu trúc cơ sở dữ liệu phù hợp sẽ
phụ thuộc vào các yêu cầu cụ thể của dự án và nhu cầu của người dùng.

4.4. Xây dựng ứng dựng

- Sign Up:

15
- Login:

- Trang chủ:

16
- Tìm kiếm nhạc:

-Phát nhạc

17
- Khám phá

-Zing chart

-Radio live

18
 -Thêm nhạc ưa thích

-Tải bài hát ưa thích trong máy lên

- Đăng xuất

19
 V. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
- Nhìn chung sau quá trình phát triển phần mềm nhóm đã hoàn thành
được đa số các yêu cầu đã đặt ra trước đó như xây dựng một web chat đơn giản,
dễ sử dụng, công khai. Những chức năng nghe nhạc ,thêm nhạc vào mục ưa
thích, tìm kiếm bài hát,tải bài hát ,nghe nhạc người hát trực tuyến,….

- Tuy nhiên do thời gian có hạn nên vẫn còn một số hạn chế mà nhóm
chưa thể khắc phục ngay. Chúng em mong nhận được sự đóng góp ý kiến của
thầy và các bạn để góp phần hoàn thiện đề tài.

VI. TÀI LIỆU THAM KHẢO

[1] https://en.wikipedia.org/wiki/Network_socket
[2] http://it.die.vn/s/socket/
[3] https://medium.com/@noufel.gouirhate/build-a-simple-chat-app-with-
node-js-and-socket-io-ea716c093088
[4]https://www.youtube.com/watch?v=vAecGPWxzFE&t=3267s&ab_ch
annel=F8Official

20