ĐẠI HỌC QUỐC GIA TP. 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 1
Đề tài: Website Nghe nhạc trực tuyến
Giảng viên hướng dẫn:
ThS. Thái Thụy Hàn Uyển
Nhóm thực hiện:
19521220

Trần Thế Anh

19521737

Đoàn Ngọc Lãm

TP. HCM, tháng 6 năm 2022


Lời cảm ơn
Lời đầu tiên, nhóm thực hiện đồ án xin gửi lời cảm ơn chân thành đến ThS.Thái Thụy Hàn Uyển,
đã hỗ trợ những thông tin cần thiết, giải đáp thắc mắc và góp ý cho các thành viên trong suốt quá
trình thực hiện đề tài.
Đồng thời, chúng em cũng muốn cảm ơn các anh chị khóa trên, bạn bè trong khoa đã chia sẻ những
kinh nghiệm quý báu về mơn học, đóng góp ý kiến để nhóm hồn thành tốt đề tài.
Vì điều kiện thời gian cũng như kiến thức cịn hạn chế nên khơng thể tránh khỏi những thiếu sót.
Chính vì vậy, nhóm chúng em rất mong nhận được những đóng góp nhằm hồn thiện hơn kiến

thức cịn thiếu của mình.
Chân thành cảm ơn!

TP. Hồ Chí Minh, ngày 18 tháng 06 năm 2022
Nhóm thực hiện


NHẬN XÉT CỦA GIẢNG VIÊN
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................

...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................


Mục lục
Lời cảm ơn

2

NHẬN XÉT CỦA GIẢNG VIÊN

3

Mục lục

4

Danh mục hình ảnh

6

Danh mục bảng biểu

7

Chương 1.


8

1.1.

Tổng quan

Lý do chọn đề tài

8

1.1.1.

Nhu cầu thực tế

8

1.1.2.

Hiện trạng tin học

8

1.2.

Mục tiêu

9

1.3.


Phạm vi

9

Chương 2.
2.1.

Cơ sở lý thuyết

Ngơn ngữ lập trình JavaScript

9
9

2.1.1.

JavaScript là gì?

9

2.1.2.

Lịch sử phát triển của JavaScript

9

2.1.3.

Cách thức hoạt động của JavaScript trên trang web


2.2.

API

10
10

2.2.1.

API là gì?

10

2.2.2.

API hoạt động như thế nào?

11

Khảo sát và phân tích hệ thống

12

Chương 3.
3.1.

Khảo sát

12


3.1.1.

Đối tượng nghiên cứu

12

3.1.2.

Lựa chọn giải pháp công nghệ

12


3.2.

Phân tích

12

3.2.1.

Yêu cầu chất lượng

12

3.2.2.

Danh sách Use case

13


3.3.

Thiết kế giao diện

13

3.3.1.

Màn hình Trang chủ

13

3.3.2.

Màn hình danh sách u thích

14

3.3.3.

Màn hình Lịch sử

14

3.3.4.

Màn hình download

15


3.3.5.

Màn hình Tìm kiếm

15

3.3.6.

Màn hình Nghe nhạc

16

3.3.7.

Màn hình Feedback

17

3.3.8.

Màn hình setting

17

Tổng kết

18

Chương 4.

4.1.

Kết quả

18

4.1.1.

Kết quả

18

4.1.2.

Điểm đặc sắc của đề tài

18

4.2.

Hạn chế

18

4.3.

Hướng phát triển

18


TÀI LIỆU THAM KHẢO

19


Danh mục hình ảnh
Hình 3-1: Màn hình Trang chủ ................................................................................................ 13
Hình 3-2: Màn hình Danh sách u thích ................................................................................ 14
Hình 3-3: Màn hình lịch sử ...................................................................................................... 14
Hình 3-4: Màn hình Download ................................................................................................ 15
Hình 3-5: Màn hình Tìm kiếm ................................................................................................. 15
Hình 3-6: Màn hình Nghe nhạc ............................................................................................... 16
Hình 3-7: Màn hình Feedback ................................................................................................. 17
Hình 3-8: Màn hình Setting ..................................................................................................... 17


Danh mục bảng biểu
Bảng 3-1: Khảo sát website nghe nhạc tương tự ..................................................................... 12
Bảng 3-2: Danh sách UseCase ................................................................................................. 13


Chương 1.
1.1.

Tổng quan

Lý do chọn đề tài
1.1.1.

Nhu cầu thực tế


Nhằm phục vụ nhu cầu ngày càng cao của con người, hoạt động giải trí ngày càng phát
triển mạnh mẽ trong xu hướng hội nhập ngày nay. Trong thực tế, đa số giới trẻ ngày
nay thường hay dành thời gian để lướt facebook, xem tiktok, sử dụng youtube để nghe
nhạc thay vì website dành cho âm nhạc.
Điều này cũng là bởi vì các website nghe nhạc khơng đáp ứng đủ nhu cầu giải trí của
người dùng, bởi vậy địi hỏi một website cho phép thực hiện việc đáp ứng nhu cầu giải
trí của mọi người được tốt hơn. Với việc website hướng đến có đủ các chức năng cần
thiết để nghe nhạc, dữ liệu âm nhạc luôn được cập nhật và làm mới theo xu hướng giúp
giới trẻ (độ tuổi nhóm hướng đến).
Nhằm phục vụ nhu cầu giải trí của giới trẻ, mang lại tính linh hoạt, đa dạng và tiện dụng
khi giải trí, chúng em quyết định tìm hiểu về cách tổ chức thiết kế Trang web nghe nhạc
online với những nội dung chính sau:
•
•
•
•
•

Nghe nhạc
Lặp nhạc
Phát ngẫu nhiên
Tăng giảm âm lượng
Thêm, xóa, sửa list nhạc
1.1.2.

Hiện trạng tin học

Ngày nay, ứng dụng Công nghệ Thông tin và việc tin học hóa được xem là một trong
những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức cũng

như các cơng ty, cửa hàng; nó đóng vai trị hết sức quan trọng, có thể tạo ra những bước
đột phá mạnh mẽ.
Việc xây dựng các website nghe nhạc trực tuyến để phục vụ cho các nhu cầu giải trí của
các tổ chức, cơng ty thậm chí các cá nhân ngày nay khơng lấy gì làm xa lạ. Quản lý là
một trong những công việc tương đối phức tạp, tốn nhiều thời gian và công sức. Bên


cạnh đó, khi cuộc sống của mỗi người dân đang từng bước được nâng cao thì nhu cầu
về mua sắm, vui chơi giải trí ngày càng được chú trọng. Chính vì vậy, tin học hóa trong
lĩnh vực giải trí online là một yêu cầu tất yếu và cần thiết.

1.2.

Mục tiêu

Nhằm tạo môi trường đơn giản, thoải mái, thuận lợi cho mục đích giải trí, thư giản của
người dùng, website hướng đến sự thân thiện, dễ thao tác, nhóm em quyết định tìm hiểu
và thực hiện xây dựng website nghe nhạc trực tuyến với đủ các chức năng cơ bản phục
vụ cho như cầu nghe nhạc của người dùng

1.3.

Phạm vi

Phần mềm hướng tới đối tượng là học sinh, sinh viên, các tầng lớp cơng nhân, nhân viên văn
phịng.

Chương 2.

Cơ sở lý thuyết


Qua sự trải nghiệm, cũng như tìm hiểm các website với mục đích tương tự: MP3, Spotify, …,
thì nhóm chúng quyết định xây dựng website – là website nghe nhạc trực tuyến. Website được
xây dựng dựa trên ngôn ngữ lập trình JavaScript, HTML, CSS dưới sự hỗ trợ của các thư viện
về lập trình web như ReactJS và sử dụng API của bên thứ 3 để lấy dữ liệu.

2.1.

Ngôn ngữ lập trình JavaScript
2.1.1.

JavaScript là gì?

JavaScript là ngơn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng
vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trị như là một
phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như
phía máy chủ (Nodejs) tạo ra các trang web động.
2.1.2.

Lịch sử phát triển của JavaScript

JavaScript được phát tiển bởi Brendan Eich tại hãng truyền thông Netscape với tên đầu
tiên là Mocha. Sau đó, đổi tên thành LiveScript và cuối cùng là JavaSript được sử dụng
phổ biến tới thời điểm bây giờ.


Phiên bản mới nhất của JavaScript là ECMAScript (là phiên bản chuẩn hóa của
JavaScript). Với ECMAScript 2 phát hành năm 1998 và ECMAScript 3 được ra mắt
năm 1999 và hoạt động mạnh mẽ trên mọi trình duyệt và các thiết bị khác nhau.
Năm 2016, JavaScript đạt kỷ lục đến 92% website sử dụng và được đánh giá từ một

ngôn ngữ lập trình riêng trở thành cơng cụ quan trọng nhất trên các bộ cơng cụ lập trình
web của các lập trình viên. Nếu bạn sử dụng internet khi truy cập vào các website, có
thể nhìn thấy các hiệu ứng slide ảnh chuyển động, menu sổ xuống… đều được tạo nên
từ JavaScript.
2.1.3.

Cách thức hoạt động của JavaScript trên trang web

JavaScript thường sẽ được nhúng trực tiếp vào một trang web hoặc được tham chiếu
qua file .js riêng. JavaScript là ngôn ngữ từ phía client nên script sẽ được tải về máy
client khi truy cập và được xử lý tại đó. Thay vì tải về máy server và sau khi xử lý xong
mới phản hồi kết quả đến client.
Với hiện nay, thì các trình duyệt Internet cũng có thể hỗ trợ bạn tắt/mở JavaScript. Lúc
đó bạn có thể thấy được nếu một trang web khơng có JavaScript thì sẽ như thế nào? Từ
đó bạn có thể hình dung dễ dàng hơn về cách JavaScript hoạt động.

2.2.

API
2.2.1.

API là gì?

API là cách viết tắt của Application Programming Interface, nghĩa là giao diện lập trình
ứng dụng. Nó là tập các định nghĩa về phương thức, giao thức, công cụ xây dựng phần
mềm ứng dụng. Nhờ có API, các lập trình viên có thể dễ dàng xây dựng các chương
trình máy tính. API cũng cung cấp phương thức để ứng dụng từ xa yêu cầu dịch vụ đến
hệ thống cung cấp dịch vụ, giúp trao đổi dữ liệu giữa các hệ thống.
API có 3 loại: Cơng khai, riêng tư và đối tác. API công khai (hay API mở) có thể truy
cập cơng khai đối với bất kỳ nhà phát triển nào. Sử dụng các API công khai đi kèm với

một số hạn chế và chúng có thể miễn phí hoặc mang tính thương mại. Các API riêng tư


được sử dụng riêng trong một công ty hoặc tổ chức. API đối tác chỉ có sẵn cho các đối
tác kinh doanh cụ thể, được sử dụng thường xuyên nhất để tạo điều kiện tích hợp phần
mềm giữa hai doanh nghiệp khác nhau.
2.2.2.

API hoạt động như thế nào?

Các nhà phát triển tạo API dưới dạng sản phẩm có thể phục vụ những nhà phát triển
khác. Mục đích là làm cho các quy trình phát triển web phức tạp trở nên dễ dàng, hiệu
quả và nhanh chóng hơn cho những nhà phát triển hoặc doanh nghiệp tiêu dùng.
Hầu hết các doanh nghiệp hiện phụ thuộc vào API của bên thứ ba để giải quyết vấn đề
và phục vụ khách hàng của mình tốt hơn. Tuy nhiên, việc sử dụng API khơng phức tạp
như nhiều người nghĩ. Bạn có thể coi nó như một giải pháp của bên thứ ba, cung cấp
cho bạn một phản hồi cụ thể dưới dạng dữ liệu, khi bạn thực hiện một yêu cầu HTTP
cụ thể.
Sử dụng API giống như đặt hàng tại một nhà hàng pizza. Bạn khơng thể vào bếp để nói
với họ những gì bạn muốn. Bạn cần một người phục vụ nhận đơn đặt hàng của bạn và
giao nó cho nhà bếp, sau đó quay lại với chiếc pizza bạn muốn.
Bạn có thể xem một API là thứ liên kết giữa bạn và nhà bếp. Trong trường hợp này, bạn
là khách hàng đang lui tới nhà hàng cung cấp người phục vụ (API). Sau đó, người phục
vụ sẽ phản hồi với lựa chọn pizza của bạn (dữ liệu). Trong một API thực, ứng dụng web
là client yêu cầu sử dụng nội dung của nhà cung cấp thông qua API, bằng cách thực
hiện các yêu cầu HTTP endpoint.


Chương 3.
3.1.


Khảo sát và phân tích hệ thống

Khảo sát
3.1.1.

Đối tượng nghiên cứu

• Website nghe nhạc tương tự: Zingmp3, Spotify
• Đối tượng nghiên cứu: các chức năng cần có của một website nghe nhạc như là
phát nhạc, tải nhạc, tìm kiếm....
Website

Ưu điểm

Zing
MP3

Giao diện bố trí hợp lý, dễ nhìn
Nhiều tình năng hỗ trợ nghe nhạc, tạo
list nhạc, đề xuất nhạc, theo dõi ca sĩ
Nhiều tính năng nâng cao xem lời bài
hát trong thời gian thực, chế độ cửa sổ.

Spotify

Các chức năng gần như hồn thiện.
Các tính năng chính gồm: hỗ trợ nghe
nhạc, tạo list nhạc, theo dõi ca sĩ,..
Hỗ trợ nhiều yêu cầu nghiệp vụ nâng

cao.
Lyric, kết nối thiết bị khác.
Giao diện phù hợp, dễ nhìn.

Nhược điểm

Cần đăng nhập để nghe nhạc
và thực hiện các tác vụ khác

Bảng 3-1: Khảo sát website nghe nhạc tương tự

3.1.2.
•
•
•
•

Lựa chọn giải pháp cơng nghệ

Ngơn ngữ lập trình: JavaScript
Thư viên: React, Material UI
Mơ hình phát triển phần mềm: Mơ hình thác nước
Cơ sở dữ liệu: Call Youtube API để lấy dữ liệu

3.2.

Phân tích
3.2.1.

Yêu cầu chất lượng


Xây dựng một website nghe nhạc trực tuyến đơn giản, thân thiện, dễ nhìn, người dùng phổ
thơng dễ dàng sử dụng, cho phép người dùng nghe nhạc, tải nhạc; tìm kiếm thông tin về bài
hát, về ca, nhạc sĩ hot nhấ; chia sẽ bài hát; thiết lập thời gian dừng; thay đổi theme; bài hát yêu
thích.


3.2.2.

Danh sách Use case

STT
Tên Use-case
1
Nghe nhạc
2
3
4

Ý nghĩa/Ghi chú
Nghe được bài hát, thực hiện các tác vụ đối với bài hát như:
phát, dừng, tua nhạc, chuyển bài, lặp bài, nghe ngẫu nhiên.
Tìm kiếm bài hát
Tìm kiếm bài hát gần giống với nội dung được tìm kiếm
Chia sẽ bài hát
Chia sẽ đường dẫn bài hát hiện tại cho người khác qua các nền
tảng như: facebook, twitter,..
Hẹn giờ dừng phát Thiết lập thời gian ngừng phát nhạc
nhạc
Bảng 3-2: Danh sách UseCase


3.3.

Thiết kế giao diện
3.3.1.

Màn hình Trang chủ

Hình 3-1: Màn hình Trang chủ


3.3.2.

Màn hình danh sách u thích

Hình 3-2: Màn hình Danh sách u thích

3.3.3.

Màn hình Lịch sử

Hình 3-3: Màn hình lịch sử


3.3.4.

Màn hình download

Hình 3-4: Màn hình Download


3.3.5.

Màn hình Tìm kiếm

Hình 3-5: Màn hình Tìm kiếm


3.3.6.

Màn hình Nghe nhạc

Hình 3-6: Màn hình Nghe nhạc


3.3.7.

Màn hình Feedback

Hình 3-7: Màn hình Feedback

3.3.8.

Màn hình setting

Hình 3-8: Màn hình Setting


Chương 4.
4.1.


Tổng kết

Kết quả
4.1.1.

Kết quả

• Nhóm đã thực hiện được một số chức năng đặt ra trong kỳ này của đề tài
• Giao diện đơn giản, thân thiện, dễ sử dụng
• Thực hiện việc kiểm thử
4.1.2.
•
•
•
•

Điểm đặc sắc của đề tài

Tạo điều kiện dễ dàng hơn cho việc bảo trì, mở rộng trong tương lai
Tìm kiếm bài hát dựa trên youtube API
Có tính năng mới như hẹn giờ dừng phát nhạc
Có responsive web design với thiết bị mobile

4.2.

Hạn chế

Bên cạnh những kết quả đạt được khi làm bài, đồ án của nhóm vẫn cịn một số hạn chế
sau:
• Chưa tạo được server cơ sở dữ liệu riêng cho website mà dùng youtube api để

lấy dữ liệu
• Chưa triển khai thực hiện một số chức năng đề ra
• Vẫn cịn một số lỗi chưa được khắc phục

4.3.

Hướng phát triển

• Hồn hiện việc lỗi các chức năng hiện có
• Xây dựng thêm mốt số chức năng chưa được triển khai:
o Cá nhân hóa chức năng người dùng (playlist cho từng user)
o Quản lý nhạc theo ca sĩ, chủ đề, bài hát yêu thích
o Đăng nhập, đăng ký bằng google, facebook,..
o Phát được video, xem được lyrics
• Xây dựng hệ thống cơ sở dữ liệu riêng cho website


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

2.
3.
4.

5.
6.
7.
8.
9.


Hà Nguyễn, “API hoạt động như thế nào? Cách tích hợp API vào ứng dụng”, 2021, [Trực
tuyến]. Địa chỉ: [ Truy cập
lần cuối: 18/06/2022
Trang web Spotify, [Trực tuyến]. Địa chỉ: []. Truy cập lần cuối:
18/06/2022
Trang web Zingmp3, [Trực tuyến]. Địa chỉ: []. Truy cập lần cuối:
18/06/2022
Hưng Nguyễn, “JavaScript là gì? Kiến thức chi tiết về JavaScript cơ bản”, [Trực tuyến].
Địa
chỉ:
[ />yPSOWEod7TfYPzcJ7Swe8Fxv8aAh2lEALw_wcB]. Truy cập lần cuối: 18/06/2022
Trang web JavaScript, [Trực tuyến]. Địa chỉ: []. Truy cập lần
cuối: 18/06/2022
Trang web W3School, [Trực tuyến]. Địa chỉ: [ Truy cập
lần cuối: 18/06/2022.
Trang web React A JavaScript library for building user interfaces, [Trục tuyến]. Địa chỉ:
[]. Truy cập lần cuối 18/06/2002
Trang web MUI: The React component library you always wanted, [Trục tuyến]. Địa
chỉ: []. Truy cập lần cuối: 18/06/2022
Trang web API Reference | YouTube Data API | Google Developers, [Trục tuyến].
Địa chỉ: [ Truy cập lần cuối:
18/06/2022