TRƯỜNG ĐẠI HỌC PHÚ XUÂN HUẾ

KHOA CÔNG NGHỆ - KINH DOANH

------

NGÀNH CÔNG NGHỆ THÔNG TIN

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN TRÊN NỀN TẢNG
ANGULAR VÀ NESTJS

SV thực hiện: Nguyễn Đức Long

Lớp: CNTT K18A

GVHD: Nguyễn Đình Hoa Cương

Năm học: 2022-2023

HUẾ 08/2023
 LỜI MỞ ĐẦU

Trong thời đại số hóa và phát triển công nghệ hiện nay, việc truy cập và thưởng thức âm
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 chúng ta.
Sự tiện lợi và đa dạng của dịch vụ nghe nhạc trực tuyến đã thu hút một lượng lớn người dùng
trên toàn thế giới. Nhằm đáp ứng nhu cầu ngày càng tăng của người dùng và mang đến trải
nghiệm nghe nhạc tốt nhất, em đã chọn đề tài "Xây dựng website nghe nhạc trực tuyến trên nền
tảng Angular và NestJS" cho đồ án tốt nghiệp của mình.

Tầm quan trọng và tính cấp thiết của đề tài này không thể phủ nhận. Trước đây, người
dùng phải tải xuống và cài đặt các ứng dụng nghe nhạc riêng lẻ trên các thiết bị của mình. Tuy
nhiên, với sự phát triển của công nghệ web và khả năng kết nối Internet ngày càng phổ biến, việc
xây dựng một trang web nghe nhạc trực tuyến sẽ mang lại nhiều lợi ích đáng kể.

Thứ nhất, việc xây dựng một website nghe nhạc trực tuyến sẽ mang lại sự tiện lợi cho
người dùng. Em không cần phải tải xuống và cài đặt nhiều ứng dụng khác nhau trên các thiết bị
của mình. Thay vào đó, em chỉ cần truy cập vào trang web thông qua trình duyệt web và có thể
truy cập vào kho nhạc phong phú và đa dạng mọi lúc, mọi nơi.

Thứ hai, việc sử dụng Angular và NestJS để xây dựng trang web nghe nhạc trực tuyến sẽ
mang lại hiệu năng cao, ổn định và mượt mà. Angular là một framework phát triển phía client
mạnh mẽ, cung cấp các công cụ và tính năng tiên tiến để xây dựng giao diện người dùng tương
tác. NestJS là một framework phát triển phía server dựa trên Node.js, giúp xây dựng ứng dụng
web mạnh mẽ và dễ dàng quản lý.

Cuối cùng, đề tài này cũng giúp em nắm vững kiến thức và kỹ năng trong việc phát triển
ứng dụng web sử dụng các công nghệ hiện đại. Việc áp dụng Angular và NestJS trong dự án này
sẽ giúp em rèn luyện khả năng phân tích, thiết kế và triển khai ứng dụng thực tế trên nền tảng
web.

Với những lý do trên, em tin rằng đề tài "Xây dựng website nghe nhạc trực tuyến trên nền
tảng Angular và NestJS" là một sự lựa chọn đáng giá và mang tính cấp thiết trong việc nâng cao
trải nghiệm nghe nhạc trực tuyến cho người dùng.

i
 MỤC LỤC

LỜI MỞ ĐẦU..........................................................................................i

MỤC LỤC...............................................................................................ii

DANH MỤC HÌNH ẢNH.....................................................................iv

DANH MỤC BẢNG DỮ LIỆU..............................................................v

DANH MỤC THUẬT NGỮ VIẾT TẮT..............................................vi

CHƯƠNG 1: CƠ SỞ LÍ THUYẾT.......................................................1
1.1 Giới thiệu đề tài.....................................................................................................................1

1.2 Nền tảng kỹ thuật...................................................................................................................2

1.2.1 AngularJS.......................................................................................................................2

1.2.2 NestJS.............................................................................................................................3

1.3 Các công trình liên quan........................................................................................................4

CHƯƠNG 2: THIẾT KẾ CƠ SỞ DỮ LIỆU VÀ CHỨC NĂNG HỆ

THỐNG...................................................................................................5
2.1 Thiết kế cơ sở dữ liệu............................................................................................................5

2.1.1 Các bảng trong cơ sở dữ liệu..........................................................................................5

2.2 Chức năng của hệ thống.........................................................................................................5

2.3 Giao diện................................................................................................................................5

ii
 2.3.1 Giao diện người dùng:....................................................................................................5

2.3.2 Giao diện người quản lí..................................................................................................5

CHƯƠNG 3: ĐÁNH GIÁ HỆ THỐNG................................................6

3.1 Xây dựng bảng hỏi khảo sát..................................................................................................6

3.1.1 Mục đích khảo sát...........................................................................................................6

3.1.2 Các câu hỏi khảo sát.......................................................................................................6

3.2 Tiến hành khảo sát.................................................................................................................7

3.3 Phân tích kết quả khảo sát.....................................................................................................7

KẾT LUẬN..............................................................................................8

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

KẾT QUẢ KIỂM TRA ĐẠO VĂN.....................................................10

iii
 DANH MỤC HÌNH ẢNH

No table of figures entries found.

iv
 DANH MỤC BẢNG DỮ LIỆU

Bảng 1: Bảng danh sách các câu hỏi loại trừ...................................................................................3

Bảng 2: Bảng danh sách các câu hỏi Linkert...................................................................................3

v
 DANH MỤC THUẬT NGỮ VIẾT TẮT

STT Thuật ngữ viết tắt Ý nghĩa

vi
 CHƯƠNG 1: CƠ SỞ LÍ THUYẾT

1.1 Giới thiệu đề tài

Trong đồ án này, em tập trung vào xây dựng một ứng dụng website nghe nhạc trực tuyến
nhằm cung cấp một nền tảng giải trí và kết nối thông qua chia sẻ âm nhạc. Chia sẻ âm nhạc đóng
vai trò quan trọng trong việc đáp ứng nhu cầu giải trí và tạo sự kết nối giữa những người yêu
thích âm nhạc.

Chia sẻ âm nhạc còn tạo sự kết nối và chia sẻ cảm xúc giữa các người dùng. Em có thể
chia sẻ những bản nhạc yêu thích của mình với bạn bè, gia đình hoặc cộng đồng trực tuyến, tạo
ra một không gian giao lưu và tương tác qua sở thích âm nhạc chung. Đồng thời, chia sẻ âm nhạc
cung cấp cơ hội cho người nghe tương tác, đánh giá và chia sẻ ý kiến về các bản nhạc, tạo ra một
môi trường thảo luận và tương tác xung quanh âm nhạc.

Ứng dụng của em cung cấp các chức năng tổng quát cho người dùng. Người dùng có thể
đăng ký tài khoản, đăng nhập và quản lý thông tin cá nhân. Họ có thể tìm kiếm các bài hát, nghệ
sĩ và album theo từ khóa, và phát nhạc trực tuyến với các tùy chọn như điều chỉnh âm lượng, chế
độ phát và tạo danh sách phát cá nhân. Người dùng cũng có thể tạo danh sách nhạc yêu thích và
chia sẻ bài hát, nghệ sĩ hoặc album lên các mạng xã hội khác. Đồng thời, em cũng cung cấp các
chức năng tương tác như bình luận, đánh giá và đề xuất nhạc tương tự để tăng tính tương tác và
sự tham gia của người dùng.

Bản quyền âm nhạc là một yếu tố quan trọng trong việc xây dựng ứng dụng nghe nhạc
trực tuyến. Để đảm bảo tuân thủ pháp luật và tôn trọng quyền sở hữu trí tuệ của những người tạo
ra âm nhạc, em đã thực hiện các biện pháp để đảm bảo rằng nội dung âm nhạc trong ứng dụng
của em được sử dụng hợp pháp.

Em đã tiến hành tìm hiểu và xác định các nguồn cung cấp âm nhạc có bản quyền để đảm
bảo rằng em sử dụng các bài hát, album và nghệ sĩ với sự cho phép hoặc thông qua việc mua các
giấy phép sử dụng hợp pháp. Em đã tiếp cận với các nhà sản xuất âm nhạc, hãng thu âm và các
dịch vụ cung cấp bản quyền âm nhạc để đảm bảo rằng em tuân thủ các quy định về bản quyền.

Trang 1
 Em luôn chú trọng đảm bảo rằng người dùng chỉ chia sẻ các bài hát, nghệ sĩ và album mà
họ có quyền sử dụng hoặc đã nhận được sự cho phép từ chủ sở hữu bản quyền. Em khuyến khích
người dùng tuân thủ các quy định bản quyền và không vi phạm quyền sở hữu trí tuệ của người
khác trong quá trình sử dụng ứng dụng của em.

Em nhận thức rõ rằng việc tuân thủ bản quyền âm nhạc là cần thiết để đảm bảo tính hợp
pháp và tôn trọng quyền sở hữu trí tuệ. Em đã nghiên cứu và áp dụng các biện pháp phù hợp để
đảm bảo sự tuân thủ.

Mục tiêu chính của đồ án là xây dựng một ứng dụng website nghe nhạc trực tuyến với
giao diện người dùng thân thiện và dễ sử dụng. Ứng dụng cũng sẽ có hệ thống tìm kiếm và xếp
hạng nhạc để em dễ dàng tìm kiếm và khám phá những bản nhạc mới. Hỗ trợ chức năng chia sẻ
âm nhạc giúp em kết nối với nhau thông qua sở thích âm nhạc chung và tạo ra một môi trường
tương tác và thảo luận xung quanh âm nhạc.

1.2 Nền tảng kỹ thuật

Với việc sử dụng Angular và NestJS, em hy vọng xây dựng một ứng dụng web chất
lượng cao, có độ phản hồi nhanh, giao diện thân thiện và đáng tin cậy để cung cấp trải nghiệm
nghe nhạc tuyệt vời cho người dùng. Đồng thời, em cũng hy vọng rằng đề tài này sẽ đóng góp
vào sự phát triển và ứng dụng thực tế của các công nghệ Angular và NestJS trong lĩnh vực phát
triển web.

1.2.1 AngularJS

Angular là một framework phát triển giao diện người dùng mạnh mẽ và linh hoạt, được
xây dựng bởi Google. Với Angular, em có thể xây dựng các ứng dụng web đơn trang (single-
page applications - SPAs) linh hoạt và tương tác.

Một trong những ưu điểm quan trọng của Angular là cung cấp một cấu trúc MVC
(Model-View-Controller) mạnh mẽ. Điều này giúp tách biệt logic ứng dụng, dữ liệu và giao diện
người dùng, giúp dễ dàng bảo trì và phát triển ứng dụng. Angular sử dụng TypeScript, một phiên
bản mở rộng của JavaScript, để viết mã nguồn. TypeScript cung cấp cú pháp dễ đọc và sử dụng,
giúp tăng tính nhất quán và độ tin cậy của mã nguồn.

Trang 2
 Angular cung cấp các công cụ và thư viện mạnh mẽ để xây dựng giao diện người dùng
tương tác đẹp mắt và dễ sử dụng. Em có thể sử dụng các thành phần (components) để tạo ra các
phần tử giao diện, bộ điều hướng (directives) để thay đổi cách hiển thị và hành vi của các phần
tử, và bộ lọc (pipes) để biến đổi và định dạng dữ liệu.

Ngoài ra, Angular hỗ trợ quản lý luồng dữ liệu một chiều thông qua hệ thống "Data
Binding" và "Change Detection". Điều này giúp em dễ dàng theo dõi và cập nhật dữ liệu trong
ứng dụng của mình. Angular cũng cung cấp các công cụ và thư viện để tương tác với các dịch vụ
web bên ngoài. Em có thể sử dụng HTTP để gửi yêu cầu và nhận dữ liệu từ các API web,
WebSocket để tạo ra các kết nối hai chiều và tương tác thời gian thực, và các giao thức khác để
tương tác với các dịch vụ web.

Hơn nữa, Angular còn cung cấp các công cụ để kiểm thử và debug ứng dụng dễ dàng. Em
có thể viết các bộ kiểm thử tự động để đảm bảo tính ổn định và đúng đắn của ứng dụng, và sử
dụng các công cụ theo dõi hiệu suất để tối ưu hóa hiệu suất của ứng dụng.

Tóm lại, Angular là một framework mạnh mẽ và linh hoạt cho phát triển giao diện người
dùng. Với Angular, em có thể xây dựng các ứng dụng web đơn trang linh hoạt, tương tác và dễ
sử dụng. Framework này cung cấp các công cụ và thư viện mạnh mẽ để quản lý luồng dữ liệu,
tương tác với các dịch vụ web và tạo ra giao diện người dùng tương tác đẹp mắt và dễ sử dụng.

1.2.2 NestJS

NestJS là một framework phát triển ứng dụng web server-side trên nền tảng Node.js, nổi
bật với sự kết hợp độc đáo của các khái niệm từ Angular, một framework phát triển ứng dụng
web client-side, và Express, một framework phổ biến trong việc xây dựng ứng dụng web trên
Node.js. Với NestJS, em có thể tận dụng sức mạnh của TypeScript để xây dựng ứng dụng phía
server một cách dễ dàng và hiệu quả.

Một trong những ưu điểm nổi bật của NestJS chính là hỗ trợ đầy đủ TypeScript.
TypeScript là một ngôn ngữ lập trình phía server, mở rộng JavaScript bằng cách thêm tính năng
kiểu tĩnh và các tính năng mới khác. Việc sử dụng TypeScript giúp cho việc phát triển ứng dụng
trở nên dễ dàng hơn, giảm thiểu lỗi do kiểu dữ liệu và cung cấp tính năng gợi ý mã nguồn thông
minh trong quá trình lập trình. Đồng thời, TypeScript cũng giúp cho mã nguồn trở nên dễ đọc và
dễ bảo trì hơn trong dự án lớn.

Trang 3
 NestJS cung cấp một kiến trúc module để tổ chức mã nguồn của ứng dụng. Kiến trúc
module cho phép em tách biệt các thành phần khác nhau của ứng dụng và tạo ra sự rõ ràng trong
việc quản lý các phần của hệ thống. Bằng cách chia nhỏ ứng dụng thành các module riêng biệt,
em có thể tái sử dụng mã nguồn một cách dễ dàng và tăng tính mô-đun của hệ thống. NestJS
cung cấp cơ chế dependency injection (DI) để giúp quản lý các phụ thuộc giữa các thành phần
một cách dễ dàng và linh hoạt. DI giúp giảm sự phụ thuộc cứng rắn giữa các thành phần và giúp
em xây dựng các ứng dụng có khả năng mở rộng và dễ kiểm thử.

NestJS cũng hỗ trợ middleware, cho phép em thực hiện các xử lý trung gian trước khi các
yêu cầu được xử lý hoặc trước khi các phản hồi được gửi đi. Điều này cho phép em thực hiện các
chức năng như xác thực người dùng, ghi lại nhật ký, kiểm soát truy cập và nhiều hơn nữa.
Middleware giúp tách biệt logic xử lý yêu cầu và phản hồi ra khỏi các tác vụ khác như xử lý
ngoại lệ, quản lý phiên và nén dữ liệu. Điều này giúp mã nguồn trở nên dễ đọc, dễ bảo trì và dễ
mở rộng.

NestJS cung cấp nhiều tính năng khác nhau để giúp em xây dựng các ứng dụng web
mạnh mẽ, dễ bảo trì và mở rộng. Nó hỗ trợ các khái niệm như Pipes (để xử lý dữ liệu đầu vào),
Guards (để kiểm tra quyền truy cập), Interceptors (để xử lý các yêu cầu và phản hồi), Filters (để
xử lý các ngoại lệ) vàTransformers (để thực hiện chuyển đổi dữ liệu). Các tính năng này giúp em
xử lý và kiểm soát dữ liệu, quyền truy cập và lỗi một cách linh hoạt và hiệu quả.

Bên cạnh đó, NestJS hỗ trợ các tiện ích hữu ích như Caching (bộ nhớ cache) để tăng tốc
độ truy cập dữ liệu, WebSockets để xây dựng ứng dụng realtime và Testing (kiểm thử) để đảm
bảo chất lượng mã nguồn và tính ổn định của ứng dụng.

Với sự kết hợp giữa các khái niệm từ Angular và Express, NestJS mang đến cho nhà phát
triển một cách tiếp cận hiện đại và mạnh mẽ trong việc xây dựng ứng dụng web phía server. Tích
hợp TypeScript và các tính năng như kiến trúc module, dependency injection và middleware,
NestJS giúp tạo ra các ứng dụng web mạnh mẽ, dễ bảo trì và mở rộng. Bên cạnh đó, việc hỗ trợ
các tính năng như Pipes, Guards, Interceptors và Filters giúp em xử lý các tác vụ trong việc xử lý
dữ liệu, quản lý quyền truy cập và xử lý lỗi một cách linh hoạt và đáng tin cậy.

Tóm lại, với NestJS, em có thể xây dựng ứng dụng web server-side mạnh mẽ, dễ bảo trì
và mở rộng. Với việc sử dụng TypeScript và các tính năng quan trọng như kiến trúc module,

Trang 4
dependency injection và middleware, NestJS giúp em tận dụng sức mạnh của Node.js và xây
dựng các ứng dụng web có hiệu suất cao và dễ quản lý.

1.3 Các công trình liên quan

Trang 5
 CHƯƠNG 2: THIẾT KẾ CƠ SỞ DỮ LIỆU VÀ CHỨC NĂNG HỆ
THỐNG
2.1 Thiết kế cơ sở dữ liệu
2.1.1 Các bảng trong cơ sở dữ liệu
2.2 Chức năng của hệ thống
2.3 Giao diện
2.3.1 Giao diện người dùng:
2.3.2 Giao diện người quản lí

Trang 6
 CHƯƠNG 3: ĐÁNH GIÁ HỆ THỐNG

3.1 Xây dựng bảng hỏi khảo sát

3.1.1 Mục đích khảo sát
3.1.2 Các câu hỏi khảo sát
Bảng 1: Bảng danh sách các câu hỏi loại trừ

STT Câu hỏi Câu trả lời

1
2

Bảng 2 gồm các câu hỏi theo thang đo likert mang tính khảo sát chuyên sâu về vấn đề cần
khảo sát. Các câu trả lời này được đánh giá theo 5 mức độ từ (1), Rất không hài lòng, (2) Không
hài lòng, (3) Bình thường, (4) Hài lòng, (5) Rất hài lòng.
Bảng 2: Bảng danh sách các câu hỏi Linkert

STT Câu hỏi Câu trả lời

1 1 2 3 4 5

2 1 2 3 4 5

3 1 2 3 4 5

4 1 2 3 4 5

5 1 2 3 4 5

6 1 2 3 4 5

7 1 2 3 4 5

8 1 2 3 4 5

Trang 7
 9 1 2 3 4 5

10 1 2 3 4 5

11 1 2 3 4 5

3.2 Tiến hành khảo sát

3.3 Phân tích kết quả khảo sát

Trang 8
KẾT LUẬN

Trang 9
TÀI LIỆU THAM KHẢO

Trang 10
KẾT QUẢ KIỂM TRA ĐẠO VĂN

Trang 11