Xây dựng mạng xã hội nghe nhạc trực tuyến music cloud

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬTKHOA CÔNG NGHỆ SỐ ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN ĐỀ TÀI: XÂY DỰNG MẠNG XÃ HỘI NGHE N

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG MẠNG XÃ HỘI NGHE NHẠC TRỰC

TUYẾN MUSIC CLOUD

Sinh viên thực hiện : Nguyễn Đông Nguyên

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG MẠNG XÃ HỘI NGHE NHẠC TRỰC

TUYẾN MUSIC CLOUD

Giảng viên hướng dẫn duyệt

Đà Nẵng, 06/2024

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN

Đà Nẵng, ngày … tháng … năm …

Người hướng dẫn

i

Đà Nẵng, ngày … tháng … năm …

Người phản biện

TÓM TẮT

Tên đề tài: Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

Sinh viên thực hiện: Nguyễn Đông Nguyên

Hiện nay, việc nghe nhạc trực tuyến đang rất phổ biến, nhu cầu nghe nhạc ngày càngcao đối với tất cả mọi người Nên việc tạo ra một nền tảng nghe nhạc online đang là mộtnhu cầu thiết yếu Từ đó xây dựng đề tài nghe nhạc trực tuyến để nhằm tối ưu hóa trảinghiệm của người dùng giúp việc lựa chọn bài hát được diễn ra một cách nhanh chóng,thuận tiện với các mục tiêu cụ thể:

- Cung cấp cho người dùng một nền tảng trực tuyến để dễ dàng nghe nhạc và lựachọn bài nhạc yêu thích

- Cung cấp thông tin chi tiết về các bài hát và các phương thức thanh toán banking

- Cung cấp các tính năng để người dùng có thể dễ dàng tìm kiếm bài hát theo sởthích

- Giúp cho admin dễ dàng quản lý các tài khoản, bài hát và các đánh giá một cáchthuận tiện

iii

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: TS Hoàng Thị Mỹ Lệ

Sinh viên thực hiện: Nguyễn Đông Nguyên Mã sinh viên:

2050531200238

1 Tên đề tài

Mạng xã hội nghe nhạc trực tuyến Music Cloud

2 Các số liệu, tài liệu ban đầu

- Dựa trên quá trình phân tích thiết kế

- Các tài liệu kiến thức nắm được qua quá trình học tập và làm việc

3 Nội dung chính của đồ án

- Mở đầu

- Chương 1: Cơ sở lý thuyết

- Chương 2: Phân tích thiết kế hệ thống

- Chương 3: Xây dựng chương trình

- Kết luận & hướng phát triển

4 Sản phẩm dự kiến

- Mạng xã hội nghe nhạc trực tuyến Music Cloud

- File word báo cáo đồ án tốt nghiệp

- Slide giới thiệu – báo cáo đề tài

LỜI NÓI ĐẦU

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cảchiều rộng và sâu Máy tính điện tử và điện thoại di động không còn là một thứphương tiện quý hiếm mà đang ngày càng trở thành một công cụ làm việc và giải tríthông dụng của con người, không chỉ ở công sở mà còn ngay cả trong gia đình

Đứng trước vai trò của thông tin hoạt động cạnh tranh gay gắt, các tổ chức và cácdoanh nghiệp giải trí đều tìm mọi biện pháp để xây dựng hoàn thiện hệ thống thông tincủa mình nhằm tin học hóa các hoạt động tác nghiệp của đơn vị

Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện cácgiải pháp cũng như các sản phẩm nhằm cho phép tiến hành tự động hóa trên Internet.Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng vàtính tất yếu của website Với những thao tác đơn giản trên máy có nối mạng Internet bạn

sẽ có tận tay những gì mình cần mà không phải mất nhiều thời gian Bạn chỉ cần vào cáctrang web làm theo hướng dẫn và click vào những gì bạn cần Các hoạt động sẽ thực hiệnngay trên hệ thống đó

Ở Việt Nam cũng có rất nhiều trường đại học tự động hóa các quy trình trên

hệ thống website nhưng do những khó khăn về cơ sở hạ tầng như viễn thông chưaphát triển mạnh nên các quy trình vẫn còn rất nhiều sổ sách, giấy tờ thủ công dẫn đếnthiếu hiệu quả, mất khá nhiều thời gian

Để tiếp cận và góp phần đẩy mạnh sự phổ biến và tiện ích của website, em đã tìm hiểu và thực hiện đề tài “Mạng xã hội nghe nhạc trực tuyến Music Cloud”

Em cũng xin gửi lời cảm sâu sắc đến GVHD TS Hoàng Thị Mỹ Lệ với sự hướng d

ẫn tận tình em đã hoàn thành đồ án tốt nghiệp này Tuy đã cố gắng hết sức tìm hiểu, phântích thiết kế và cài đặt hệ thống nhưng chắc rằng không tránh khỏi những thiếu sót Emrất mong nhận được sự thông cảm và góp ý của quý Thầy cô

Em xin chân thành cảm ơn!

v

Em xin cam đoan:

- Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn của

Sinh viên thực hiện

Nguyễn Đông Nguyên

MỤC LỤC

MỞ ĐẦU 1

Chương 1: CƠ SỞ LÝ THUYẾT 4

1.1 Hệ quản trị cơ sở dữ liệu MySQL 4

1.1.1 Khái quát về hệ quản trị CSDLMySQL 4

1.1.2 Đặc điểm chính của hệ quản trị CSDL MySQL 4

1.1.3 Quy trình hoạt động của MySQL 5

1.2 Ngôn ngữ ReactJS [2] 5

1.2.1 Sơ lược 5

1.2.2 Cách hoạt động của ReactJS 6

1.3 Framework NextJS [3] 6

1.3.1 Sơ lược 6

1.3.2 Cách hoạt động của NextJS 7

1.4 Framework ExpressJS [4] [5] 8

1.4.1 Sơ lược 8

1.4.2 Đặc điểm chính của ExpressJS 8

Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 9

2.1 Đặc tả yêu cầu phần mềm (Software Requirements) 9

2.1.1 Admin 9

2.1.2 Thành viên 9

2.1.3 Thành viên VIP 9

2.1.4 Khách vãng lai 9

2.2 Sơ đồ Use-case 10

2.3 Kịch bản cho Use-case 11

2.3.1 Use-case đăng nhập 11

2.3.2 Use-case đăng ký 13

2.3.3 Use-case xem chi tiết bài nhạc 15

vii

2.3.5 Use-case cập nhật tài khoản 18

2.3.6 Use-case yêu thích bài nhạc 20

2.3.7 Use-case bình luận bài nhạc 21

2.3.8 Use-case nâng cấp thành viên VIP 23

2.3.9 Use-case tạo danh sách phát 24

2.3.10 Use-case theo dõi 26

2.3.11 Use-case cập nhật thông tin bài nhạc 27

2.3.12 Use-case duyệt thành viên VIP 29

2.3.13 Use-case duyệt bài nhạc 30

2.4 Thiết kế cơ sở dữ liệu 32

2.4.1 Bảng ThanhVien 32

2.4.2 Bảng BaiNhac 32

2.4.3 Bảng ThanhVienVIP 33

2.4.4 Bảng YeuThich 33

2.4.5 Bảng BinhLuan 33

2.4.6 Bảng DanhSachPhat 34

2.4.7 Bảng ChiTietDanhSach 34

2.4.8 Bảng TheoDoi 34

2.5 Sơ đồ ERD 35

Chương 3: XÂY DỰNG CHƯƠNG TRÌNH 36

3.1 Trang dành cho Thành viên và Khách vãng lai 36

3.1.1 Trang chủ 36

3.1.2 Trang Danh sách bài nhạc 36

3.1.3 Trang Chi tiết bài nhạc 37

3.1.4 Trang Cập nhật thông tin 37

3.1.5 Trang Bài nhạc dã yêu thích 38

3.1.6 Trang Bài nhạc đã tải lên 38

3.1.7 Trang Danh sách phát 39

3.1.8 Trang Theo dõi 39

3.1.9 Trang Nâng cấp thành viên VIP 40

3.1.10 Trang Thanh toán 40

3.1.11 Trang Đăng nhập 41

3.1.12 Trang Đăng ký 41

3.1.13 Trang Quên mật khẩu 42

3.2 Trang dành cho Thành viên VIP 42

3.2.1 Trang đăng tải bài nhạc 42

3.3 Trang dành cho Admin 43

3.3.1 Trang Thống kê tổng bài nhạc và người dùng 43

3.3.2 Trang Quản lý tài khoản 43

3.3.3 Trang Quản lý bài nhạc 44

3.3.4 Trang Phê duyệt bài nhạc 44

3.3.5 Trang Quản lý thành viên VIP 45

KẾT LUẬN & HƯỚNG PHÁT TRIỂN 46

TÀI LIỆU THAM KHẢO 47

ix

Bảng 2.1 Kịch bản use-case đăng nhập 11

Bảng 2.2 Kịch bản use-case đăng ký 13

Bảng 2.3 Kịch bản use-case xem chi tiết bài nhạc 15

Bảng 2.4 Kịch bản use-case tìm kiếm bài nhạc 16

Bảng 2.5 Kịch bản use-case cập nhật tài khoản 18

Bảng 2.6 Kịch bản use-case yêu thích bài nhạc 20

Bảng 2.7 Kịch bản use-case bình luận bài nhạc 21

Bảng 2.8 Kịch bản use-case nâng cấp thành viên VIP 23

Bảng 2.9 Kịch bản use-case tạo danh sách phát 24

Bảng 2.10 Kịch bản use-case theo dõi người dùng 26

Bảng 2.11 Kịch bản use-case cập nhật thông tin bài nhạc 27

Bảng 2.12 Kịch bản use-case duyệt thành viên VIP 29

Bảng 2.13 Kịch bản use-case duyệt bài nhạc 30

Bảng 2.14 ThanhVien 32

Bảng 2.15 BaiNhac 32

Bảng 2.16 ThanhVienVIP 33

Bảng 2.17 YeuThich 33

Bảng 2.18 BinhLuan 33

Bảng 2.19 DanhSachPhat 34

Bảng 2.20 ChiTietDanhSach 34

Bảng 2.21 TheoDoi 34

DANH MỤC HÌNH VẼ

Hình 1.1 Hình ảnh MySQL 4

Hình 1.2 Mô hình hoạt động Client – Server 5

Hình 1.3 Hình ảnh ReactJS 6

Hình 2.1 Sơ đồ Use-case 10

Hình 2.2 Sơ đồ hoạt động use-case đăng nhập 12

Hình 2.3 Sơ đồ tuần tự use-case đăng nhập 12

Hình 2.4 Sơ đồ hoạt động use-case đăng ký 14

Hình 2.5 Sơ đồ tuần tự use-case đăng ký 14

Hình 2.6 Sơ đồ hoạt động use-case xem chi tiết bài nhạc 15

Hình 2.7 Sơ đồ tuần tự use-case xem chi tiết bài nhạc 16

Hình 2.8 Sơ đồ hoạt động use-case tìm kiếm bài nhạc 17

Hình 2.9 Sơ đồ tuần tự use-case tìm kiếm bài nhạc 17

Hình 2.10 Sơ đồ hoạt động use-case cập nhật tài khoản 18

Hình 2.11 Sơ đồ tuần tự use-case cập nhật tài khoản 19

Hình 2.12 Sơ đồ hoạt động use-case yêu thích bài nhạc 20

Hình 2.13 Sơ đồ tuần tự use-case yêu thích bài nhạc 21

Hình 2.14 Sơ đồ hoạt động use-case bình luận bài nhạc 22

Hình 2.15 Sơ đồ tuần tự use-case bình luận bài nhạc 22

Hình 2.16 Sơ đồ hoạt động use-case nâng cấp thành viên VIP 23

Hình 2.17 Sơ đồ tuần tự use-case nâng cấp thành viên VIP 24

Hình 2.18 Sơ đồ hoạt động use-case tạo danh sách phát 25

Hình 2.19 Sơ đồ tuần tự use-case tạo danh sách phát 25

Hình 2.20 Sơ đồ hoạt động use-case theo dõi người dùng 26

Hình 2.21 Sơ đồ tuần tự use-case theo dõi người dùng 27

Hình 2.22 Sơ đồ hoạt động use-case cập nhật thông tin bài nhạc 28

Hình 2.23 Sơ đồ tuần tự use-case cập nhật thông tin bài nhạc 28

Hình 2.24 Sơ đồ hoạt động use-case duyệt thành viên VIP 29

Hình 2.25 Sơ đồ tuần tự use-case duyệt thành viên VIP 30

Hình 2.26 Sơ đồ hoạt động use-case duyệt bài nhạc 31

Hình 2.27 Sơ đồ tuần tự use-case duyệt bài nhạc 31

Hình 2.28 Sơ đồ ERD 35

Hình 3.1 Giao diện trang chủ 36

Hình 3.2 Giao diện trang danh sách bài nhạc 37

Hình 3.3 Giao diện trang chi tiết bài nhạc 37

Hình 3.4 Giao diện trang cập nhật thông tin 37

xi

Hình 3.6 Giao diện trang bài nhạc đã tải lên 38

Hình 3.7 Giao diện trang danh sách phát 39

Hình 3.8 Giao diện trang theo dõi 39

Hình 3.9 Giao diện trang nâng cấp thành viên VIP 40

Hình 3.10 Giao diện trang thanh toán 40

Hình 3.11 Giao diện trang đăng nhập 41

Hình 3.12 Giao diện trang đăng ký 41

Hình 3.13 Giao diện trang quên mật khẩu 42

Hình 3.14 Giao diện trang đăng tải bài nhạc 42

Hình 3.15 Giao diện trang thống kê bài nhạc và người dùng 43

Hình 3.16 Giao diện trang quản lý tài khoản 43

Hình 3.17 Giao diện trang quản lý bài nhạc 44

Hình 3.18 Giao diện trang phê duyệt bài nhạc 44

Hình 3.19 Giao diện trang quản lý quản lý thành viên VIP 45

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT

CHỮ VIẾT TẮT TIẾNG VIỆT:

- ĐHSPKT: Đại Học Sư Phạm Kỹ Thuật

- CSVC: Cơ sở vật chất

- UI: Giao diện

- TTCT: Thông tin chi tiết

CHỮ VIẾT TẮT TIẾNG ANH:

- MVC: Model – View – Controller

- ERD: Entity Relationship Diagram

xiii

MỞ ĐẦU

1 Mục đích đề tài

Để phục vụ việc giải trí không phải là một việc dễ dàng, nhu cầu của người sáng tác nhạc cũng như nhu cầu của người dùng ngày càng tăng Bên cạnh đó thì việc tìm kiếm vàđăng tải các bài nhạc như thế nào cũng là một câu hỏi lớn cần giải quyết Vậy việc đăngtải bài hát của các cá nhân như thế nào và bằng cách gì? Thực hiện việc tìm kiếm như thếnào? Tạo các danh sách phát cá nhân như thế nào? Quản lý các bài hát và tài khoản ngườidùng như thế nào được gọi là tiện lợi, ít tốn công sức nhưng lại cho ra kết quả một cáchhiệu quả?

“Mạng xã hội nghe nhạc trực tuyến Music Cloud” đáp ứng nhu cầu nghe nhạc vàtìm kiếm các bài nhạc mới nhất hiện nay Giúp cho người dùng được giải trí sau nhữnggiờ làm việc hay học hành mệt mõi

 Cung cấp cho người dùng một nền tảng trực tuyến để dễ dàng nghe nhạc vàlựa chọn bài nhạc yêu thích

 Cung cấp thông tin chi tiết về các bài hát và các phương thức thanh toánngân hàng

 Cung cấp các tính năng để người dùng có thể dễ dàng tìm kiếm bài hát theo sở thích

 Giúp cho admin dễ dàng quản lý các tài khoản, bài hát và các đánh giá một cáchthuận tiện

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

3 Đối tượng nghiên cứu và phạm vi nghiên cứu

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

4 Phương pháp nghiên cứu, lựa chọn giải pháp công nghệ

a Phương pháp nghiên cứu:

- Phương pháp nghiên cứu lý thuyết: thu thập thông tin qua sách, các tài liệu,trang web

- Phương pháp nghiên cứu thực tiễn: tạo ra sản phẩm và không ngừng cải tiến

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

- Sử dụng ngôn ngữ chính là HTML, CSS để phát triển giao diện Ngoài ra còn

sử dụng JavaScript và MUI để làm website thêm sống động, hiệu ứng đẹp mắthơn

- Sử dụng ngôn ngữ Nodejs kết hợp với framework Express để viết api và phát triểnwebsite theo kiến trúc MVC

- Sử dụng hệ quản trị CSDL MySQL để lưu trữ CSDL cùng với công cụ XamPPgiúp việc thao tác trên CSDL dễ dàng hơn

- Ngoài ra còn có các công cụ hỗ trợ khác như: Vscode để viết code, Figma đểthiết kế giao diện và GitHub để lưu trữ code

5 Cấu trúc đồ án tốt nghiệp

Mở đầu

Giới thiệu lý do và các mục tiêu mà đề tài cần giải quyết, phạm vi nghiên cứu của đềtài Giới thiệu tóm tắt nội dung sẽ được trình bày trong các chương trình tiếp theo.Nghiên cứu, tìm hiểu và đưa ra lý do chọn đề tài, mục tiêu và mục đích khi xây dựng vàphát triển đề tài Xác định rõ phạm vi và đối tượng hướng đến, giải pháp công nghệ đểtriển khai, xây dựng đề tài, đồng thời phân tích đặc tả yêu cầu nghiệp vụ

Chương 1: Cơ sở lý thuyết

SVTH: Nguyễn Đông Nguyên Người hướng dẫn: TS Hoàng Thị Mỹ Lệ 2

Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trình JavaScript, và hệquản trị cơ sở dữ liệu MySQL.

Chương 2: Phân tích thiết kế hệ thống

Phân tích các tác nhân và chức năng của từng tác nhân của hệ thống Thiết kế sơ đồuse-case, sơ đồ hoạt động, sơ đồ ERD Thiết kế cơ sở dữ liệu Xây dựng kịch bản chotừng use-case hệ thống

Chương 3: Xây dựng chương trình

Xây dựng giao diện và chức năng của hệ thống

Kết luận và hướng phát triển

Kết luận chung cho các chương trong đồ án Trình bày những vấn đề đã giải quyếtđồng thời trình bày hướng phát triển

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

Chương 1:

CƠ SỞ LÝ THUYẾT

1.1 Hệ quản trị cơ sở dữ liệu MySQL

1.1.1 Khái quát về hệ quản trị CSDL MySQL

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở phổ biến và được sửdụng rộng rãi trên toàn thế giới Nó được phát triển bởi Oracle Corporation và được phânphối dưới dạng phần mềm miễn phí hoặc có giấy phép thương mại MySQL được xâydựng trên ngôn ngữ truy vấn cấu trúc (SQL) và cung cấp một loạt các tính năng và công

cụ cho việc quản lý và truy xuất cơ sở dữ liệu [1]

Hình CƠ SỞ LÝ THUYẾT.1 Hình ảnh MySQL

1.1.2 Đặc điểm chính của hệ quản trị CSDL MySQL

- Hỗ trợ ngôn ngữ truy vấn cấu trúc (SQL): MySQL tuân thủ chuẩn SQL và cungcấp các câu lệnh và chức năng để truy vấn, thêm, sửa đổi và xóa dữ liệu trong cơ

sở dữ liệu

- Độ tin cậy và hiệu suất: MySQL được tối ưu hóa để cung cấp hiệu suất cao và độ

tin cậy trong việc xử lý các truy vấn và thao tác cơ sở dữ liệu

- Khả năng mở rộng: MySQL cho phép mở rộng cả theo chiều ngang (horizontal

scaling) và theo chiều dọc (vertical scaling), cho phép bạn tăng cường khả năngchịu tải và quy mô của cơ sở dữ liệu

- Hỗ trợ đa nền tảng: MySQL có thể chạy trên nhiều hệ điều hành, bao gồm

Windows, macOS và các bản phân phối Linux

SVTH: Nguyễn Đông Nguyên Người hướng dẫn: TS Hoàng Thị Mỹ Lệ 4

- Bảo mật: MySQL cung cấp các tính năng bảo mật như phân quyền người dùng và

mã hóa dữ liệu để bảo vệ cơ sở dữ liệu khỏi truy cập trái phép

1.1.3 Quy trình hoạt động của MySQL

- Kết nối: Người dùng kết nối đến MySQL Server bằng các ứng dụng hoặc công cụ

quản lý cơ sở dữ liệu

- Xử lý yêu cầu: MySQL Server nhận yêu cầu từ người dùng và xử lý các truy vấn

SQL tương ứng Điều này bao gồm việc phân tích cú pháp, tạo kế hoạch truy vấn,truy xuất dữ liệu từ bộ nhớ hoặc đĩa, và trả về kết quả cho người dùng

- Lưu trữ và truy xuất dữ liệu: MySQL sử dụng cấu trúc bảng để lưu trữ dữ liệu

dưới dạng hàng và cột Dữ liệu được lưu trữ trong các tập tin và các chỉ mục đượctạo để tăng tốc độ truy xuất dữ liệu

- Bảo đảm tính toàn vẹn dữ liệu: MySQL hỗ trợ các ràng buộc (constraints) như

khóa ngoại (foreign key) và quản lý các giao dịch để đảm bảo tính toàn vẹn dữliệu

- Sao lưu và phục hồi: MySQL cung cấp các công cụ để sao lưu và phục hồi dữ liệu,

bảo vệ dữ liệu khỏi mất mát hoặc hỏng hóc

Hình CƠ SỞ LÝ THUYẾT.2 Mô hình hoạt động Client – Server

quy trình hoạt động chính của nó MySQL có rất nhiều tính năng và khả năng mạnh

mẽ, là một công cụ quan trọng cho việc lưu trữ và quản lý dữ liệu.

1.2 Ngôn ngữ ReactJS [2]

1.2.1 Sơ lược

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook,chú trọng vào việc xây dựng giao diện người dùng (UI) ReactJS cho phép các nhà phát

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

triển xây dựng các ứng dụng web đơn trang (Single Page Application - SPA) có hiệu suấtcao và dễ bảo trì

Một trong những đặc điểm nổi bật của ReactJS là hệ thống component.Component trong ReactJS là một khối xây dựng độc lập có thể được sử dụng lại và tái sửdụng trong các ứng dụng khác nhau Việc sử dụng component giúp giảm thiểu lặp lạicode, giúp cho ứng dụng dễ bảo trì và phát triển

ReactJS cũng hỗ trợ một cú pháp gọi là JSX, cho phép các nhà phát triển viếtHTML và JavaScript trong cùng một file JSX cho phép code được viết rõ ràng hơn và dễđọc hơn

ReactJS cũng có cộng đồng lớn và phong phú, với rất nhiều tài liệu, thư viện vàcông cụ hỗ trợ cho việc phát triển ứng dụng Ngoài ra, ReactJS còn có khả năng tích hợpvới nhiều công nghệ khác như Redux, React Native, NextJS, v.v

Tóm lại, ReactJS là một thư viện JavaScript rất mạnh mẽ, phổ biến trong việc xâydựng các ứng dụng web đơn trang có hiệu suất cao và dễ bảo trì

Hình CƠ SỞ LÝ THUYẾT.3 Hình ảnh ReactJS

1.2.2 Cách hoạt động của ReactJS

ReactJS hoạt động dựa trên mô hình component và sử dụng Virtual DOM để tối ưuhóa hiệu suất JSX được sử dụng để viết HTML trong JavaScript, và React sử dụng luồng

dữ liệu một chiều để quản lý trạng thái của các component Lifecycle methods và ReactHooks cung cấp các cơ chế để quản lý vòng đời và logic của ứng dụng một cách hiệu quả

Hình CƠ SỞ LÝ THUYẾT.4 Hình ảnh ReactJS

1.3.2 Cách hoạt động của NextJS

Next.js hoạt động dựa trên một số nguyên lý cơ bản để cung cấp các tính năng nhưServer-side Rendering (SSR), Static Site Generation (SSG), và routing tự động Dướiđây là cách Next.js hoạt động chính:

• Server-side Rendering (SSR): Next.js cho phép render trước các trangReact trên server trước khi gửi đến client, giúp cải thiện SEO và tối ưu hóahiệu suất

• Static Site Generation (SSG): Ngoài SSR, Next.js hỗ trợ cả SSG, cho phépbạn tạo các trang tĩnh tại thời điểm build, giúp giảm tải cho server và tăngtốc độ tải trang

• Routing tự động: Next.js sử dụng hệ thống routing dựa trên thư mục và tênfile, giúp bạn dễ dàng tổ chức và quản lý các route của ứng dụng

• Hỗ trợ API Routes: Bạn có thể dễ dàng tạo các API endpoints bằng cáchđịnh nghĩa các file trong thư mục, giúp việc xây dựng backend đơn giảnhơn

• Tích hợp TypeScript: Next.js hỗ trợ TypeScript một cách nền tảng, giúptăng tính tổng quát và dễ bảo trì của ứng dụng

• Hỗ trợ CSS Modules và Styled JSX: Next.js tích hợp sẵn hỗ trợ cho CSSModules và Styled JSX, giúp bạn quản lý phạm vi CSS một cách hiệu quả

và tạo các component UI linh hoạt

• Plugin và môi trường mở rộng: Next.js có một cộng đồng phát triển mạnh

mẽ, hỗ trợ nhiều plugin và môi trường mở rộng để bạn có thể mở rộng chứcnăng của ứng dụng dễ dàng

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

1.4 Framework ExpressJS [4] [5]

1.4.1 Sơ lược

Express.js là một framework web cho Node.js, được xây dựng để phát triển cácứng dụng web và API một cách đơn giản và hiệu quả Được biết đến với tính linh hoạtcao và cộng đồng hỗ trợ lớn, Express.js cung cấp các công cụ và tính năng giúp ngườiphát triển xử lý các yêu cầu HTTP, quản lý middleware, và xây dựng routing một cách dễdàng

1.4.2 Đặc điểm chính của ExpressJS

- Middleware: Express.js cho phép người phát triển sử dụng middleware để xử lýcác yêu cầu và phản hồi HTTP Middleware có thể thực hiện các tác vụ như xácthực, ghi log, xử lý lỗi, v.v Điều này giúp phân tách logic ứng dụng thành cácbước nhỏ hơn và tái sử dụng được

- Routing: Express.js cung cấp một cách tiếp cận dễ dàng và linh hoạt để xử lýrouting của ứng dụng Người phát triển có thể định nghĩa các route (đường dẫn)

và xử lý các yêu cầu HTTP (GET, POST, PUT, DELETE, v.v.) tương ứng vớimỗi route

- Template engines: Mặc dù Express.js không yêu cầu sử dụng template engine cụthể, nhưng nó hỗ trợ tích hợp với nhiều template engine phổ biến như Pug (cũngđược biết đến là Jade), EJS, Handlebars, v.v Điều này cho phép người phát triểnrender và trả về các trang HTML động dễ dàng

- Static file serving: Express.js hỗ trợ phục vụ các tệp tĩnh như hình ảnh, CSS,

JavaScript, v.v., cho phép ứng dụng web của bạn phục vụ các tệp này một cáchhiệu quả

- Error handling: Express.js cung cấp cơ chế xử lý lỗi để quản lý và xử lý các lỗixảy ra trong quá trình xử lý yêu cầu HTTP

-SVTH: Nguyễn Đông Nguyên Người hướng dẫn: TS Hoàng Thị Mỹ Lệ 8

 Thống kê tổng user, bài nhạc

 Quản lý tài khoản

 Xem danh sách các bài nhạc đã yêu thích

 Nâng cấp thành viên VIP

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

2.2 Sơ đồ Use-case

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG.4 Sơ đồ Use-case

SVTH: Nguyễn Đông Nguyên Người hướng dẫn: TS Hoàng Thị Mỹ Lệ 10

2.3 Kịch bản cho Use-case

2.3.1 Use-case đăng nhập

2.3.1.1 Kịch bản

Mô tả Chức năng đăng nhập cho phép người dùng truy cập vào hệ

thống bằng email và mật khẩu hoặc đăng nhập bằng Google

Tác nhân Thành viên, Thành viênVIP

Yêu cầu - Thời gian thực hiện không quá 5 giây

- Tên người dùng và mật khẩu phải được xác minh là chínhxác

- Thông tin đăng nhập phải được lưu trữ an toàn

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG.1 Kịch bản use-case đăng nhập

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

2.3.1.2 Sơ đồ hoạt động

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG.5 Sơ đồ hoạt động use-case đăng

nhập2.3.1.3 Sơ đồ tuần tự

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG.6 Sơ đồ tuần tự use-case đăng nhập

SVTH: Nguyễn Đông Nguyên Người hướng dẫn: TS Hoàng Thị Mỹ Lệ 12

2.3.2 Use-case đăng ký

2.3.2.1 Kịch bản

Chức năng Đăng ký

Mô tả Chức năng đăng ký cho phép người dùng tạo tài khoản mới trong

hệ thống Chức năng này yêu cầu người dùng cung cấp thông tin

cá nhân, chẳng hạn như tên, địa chỉ email và mật khẩu

Tác nhân Thành viên Thành viên VIP

Đầu vào - Thông tin tài khoản (Họ và tên, email, password)

Đầu ra - Tạo tài khoản mới

- Hiển thị thông báo thành công

Yêu cầu - Cho phép người dùng xác minh địa chỉ email của họ

- Cho phép người dùng xác minh tài khoản của họ bằng cáchnhấp vào liên kết trong email xác nhận

- Cho phép người dùng tạo tài khoản bằng các phương thứckhác, chẳng hạn như bằng mạng xã hội

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG.2 Kịch bản use-case đăng ký

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

2.3.2.2 Sơ đồ hoạt động

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG.7 Sơ đồ hoạt động use-case đăng ký2.3.2.3 Sơ đồ tuần tự

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG.8 Sơ đồ tuần tự use-case đăng ký

SVTH: Nguyễn Đông Nguyên Người hướng dẫn: TS Hoàng Thị Mỹ Lệ 14

2.3.3 Use-case xem chi tiết bài nhạc

2.3.3.1 Kịch bản

Chức năng Xem chi tiết bài nhạc

Mô tả Chức năng xem chi tiết bài nhạc cho phép người dùng nghe và

xem thông tin chi tiết về một bài nhạc cụ thể

Tác nhân Thành viên, khách

Đầu vào Tiêu đề bài nhạc

Đầu ra Trang chi tiết bài nhạc

Yêu cầu - Trang chi tiết bài nhạc phải bao gồm tất cả thông tin cần thiết

về bài nhạc

- Trang chi tiết bài nhạc phải được trình bày rõ ràng

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG.3 Kịch bản use-case xem chi tiết bài

nhạc2.3.3.2 Sơ đồ hoạt động

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG.9 Sơ đồ hoạt động use-case xem chi

tiết bài nhạc

Xây dựng mạng xã hội nghe nhạc trực tuyến Music Cloud

Chức năng Tìm kiếm bài nhạc

Mô tả Chức năng tìm kiếm bài nhạc cho phép người dùng tìm kiếm bài

nhạc mà họ mong muốn

Tác nhân Thành viên, Khách

Đầu vào Tên bài nhạc

Đầu ra Danh sách bài nhạc đã tìm thấy

Yêu cầu - Danh sách tìm kiếm bài nhạc phải chứa ký tự mà người