Đồ án xây dựng website nghe nhạc trực tuyến
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.47 MB, 67 trang )
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
-----🙚🙘🕮🙚🙘-----
ĐỒ ÁN 1
XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN
GV HƯỚNG DẪN:
TS ĐỖ THỊ THANH TUYỀN
SV THỰC HIỆN:
LÊ THỊ PHƯƠNG QUYÊN - 20520729
DƯƠNG HỒNG MAI - 20520626
TP. HỒ CHÍ MINH, 2023
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
-----🙚🙘🕮🙚🙘-----
ĐỒ ÁN 1
XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN
GV HƯỚNG DẪN:
TS ĐỖ THỊ THANH TUYỀN
SV THỰC HIỆN:
LÊ THỊ PHƯƠNG QUYÊN - 20520729
DƯƠNG HỒNG MAI - 20520626
TP. HỒ CHÍ MINH, 2023
LỜI CẢM ƠN
Trong quá trình thực hiện Đồ án 1, chúng em đã được trang bị những kiến thức
quan trọng và các kỹ năng thực tế để có thể hồn thành đồ án của mình.
Chúng em xin gửi lời cảm ơn chân thành đến cô Đỗ Thị Thanh Tuyền – người đã
trực tiếp chỉ dẫn tận tình và truyền đạt những kinh nghiệm vô cùng quý giá cho chúng
em trong suốt q trình nhóm thực hiện đồ án này. Hi vọng với sự chỉ báo và góp ý của
cơ, đề tài của nhóm có thể tiếp tục phát triển để website ngày càng hoàn chỉnh hơn và
phục vụ tốt hơn cho người dùng.
Trong quá trình làm đồ án và bước đầu tiếp cận các cơng nghệ mới, nhóm cịn
nhiều thiếu sót về mặt kiến thức cũng như kinh nghiệm thực tiễn nên khó tránh khỏi
những sai sót. Những nhận xét, góp ý chân tình của cơ chính là cơ sở để nhóm có thể cải
tiến và hồn thiện đề tài này một cách tốt nhất.
Chúng em xin trân trọng cảm ơn!
TP. Hồ Chí Minh, ngày 30 tháng 06 năm 2023
Nhóm sinh viên thực hiện
Lê Thị Phương Quyên – Dương Hoàng Mai
ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI: Xây dựng website nghe nhạc trực tuyến
Cán bộ hướng dẫn: TS Đỗ Thị Thanh Tuyền
Thời gian thực hiện: Từ ngày 27/02/2023 đến ngày 17/06/2023
Sinh viên thực hiện:
1. Lê Thị Phương Quyên - 20520729
2. Dương Hoàng Mai - 20520626
Nội dung đề tài:
1. Lý do chọn đề tài:
Âm nhạc từ lâu đã trở thành món ăn tinh thần khơng chỉ đối với những người yêu nghệ
thuật mà còn đối với giới trẻ, những người làm văn phòng. Âm nhạc được xem là giải
pháp giúp giải tỏa những căng thẳng, mệt mỏi và mang đến nguồn cảm hứng cho hầu
hết tất cả mọi người. Cùng với sự phát triển nhanh chóng của Internet và công nghệ,
nhu cầu nghe nhạc của người dùng cũng ngày càng phát triển, đó là nhu cầu được nghe
nhạc một cách nhanh chóng, tiện lợi, nghe nhạc ở mọi lúc mọi nơi và dễ dàng cập nhật
xu hướng âm nhạc hiện tại. Thấu hiểu rõ những điều trên, nhóm em xây dựng một
website nghe nhạc trực tuyến với định hướng đáp ứng đầy đủ các nhu cầu hiện tại của
người dùng.
2.
Mục tiêu:
•
Xây dựng một website nghe nhạc trực tuyến.
•
Có thể download, upload nhạc.
•
Hệ thống danh sách các bài hát, ca sĩ, album, các bảng xếp hạng âm nhạc.
•
Xây dựng website thân thiện, giao diện bố cục rõ ràng.
3.
Phạm vi:
•
Phạm vi môi trường:
Triển khai sản phẩm trên môi trường web.
•
Phạm vi chức năng:
-
Nghe nhạc trực tuyến.
-
Bảng xếp hạng các bài hát, ca sĩ, album.
-
Quản lý tài khoản của người dùng.
-
Gợi ý bài hát.
Đối tượng sử dụng:
4.
•
Những người dùng có nhu cầu nghe nhạc trực tuyến.
•
Người dùng có nhu cầu chia sẻ, lưu trữ nhạc.
Phương pháp thực hiện:
5.
•
Tìm hiểu về Reactjs, Nodejs.
•
Khảo sát các website tương tự trên thị trường.
Cơng nghệ sử dụng:
6.
•
Cơng cụ thiết kế UI/UX: Figma.
•
Front-end: Reactjs.
•
Back-end: Nodejs.
7.
Kết quả mong đợi:
•
Áp dụng các cơng nghệ để hồn thành sản phẩm đề tài.
•
Xây dựng website hồn chỉnh đáp ứng yêu cầu người dùng.
Kế hoạch thực hiện:
Thời gian
Công việc
27/02 – 05/03
•
Tìm hiểu về cơng nghệ Reactjs, Nodejs.
06/03 – 12/03
•
Xác định u cầu và các chức năng của đề tài.
•
Phân tích chi tiết các yêu cầu nghiệp vụ và chức năng của đề
13/03 – 26/03
tài.
•
Viết tài liệu mơ tả hệ thống website.
27/03 – 09/04
10/04 – 10/05
11/05 – 24/05
25/05 – 07/06
•
Xây dựng bản vẽ các sơ đồ.
•
Thiết kế giao diện website.
•
Xây dựng giao diện của website.
•
Xây dựng các tính năng cơ bản của website.
•
Hồn thiện giao diện và các chức năng của website.
•
Chỉnh sửa các tài liệu liên quan.
•
Kiểm thử, sửa lỗi và hồn thiện các chức năng của sản phẩm.
•
Hồn thiện các tài liệu báo cáo.
TP. HCM, ngày ... tháng 6 năm 2023
Xác nhận của CBHD
Sinh viên 1
Sinh viên 2
(Ký tên và ghi rõ họ tên)
(Ký tên và ghi rõ họ tên)
(Ký tên và ghi rõ họ tên)
Đỗ Thị Thanh Tuyền
Lê Thị Phương Quyên
Dương Hoàng Mai
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
……………………….…………………………………………………………………
……………….…………………………………………………………………………
…………….……………………………………………………………………………
………….………………………………………………………………………………
……….…………………………………………………………………………………
….……………………………………………………………………………………….
……………………………………………………………………………………….…
…………………………………………………………………………………….……
………………………………………………………………………………….………
……………………………………………………………………………….…………
……………………………………………………………………………………………
………………………….………………………………………………………………
…………………………….……………………………………………………………
………….………………………………………………………………………………
……….…………………………………………………………………………………
…….……………………………………………………………………………………
….………………………………………………………………………………………
………………………………………….………………………………………………
……………………., ngày………tháng………năm………
Giảng viên hướng dẫn
Đỗ Thị Thanh Tuyền
MỤC LỤC
TÓM TẮT ĐỒ ÁN........................................................................................................... 1
CHƯƠNG 1. MỞ ĐẦU ................................................................................................... 2
1.1. Lý do chọn đề tài ................................................................................................... 2
1.2. Mục tiêu đề tài ....................................................................................................... 3
1.3. Đối tượng nghiên cứu và phục vụ.......................................................................... 3
1.4. Phạm vi nghiên cứu ............................................................................................... 3
1.5. Phương pháp nghiên cứu ....................................................................................... 4
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT ................................................................................ 5
2.1. Ngôn ngữ Javascript .............................................................................................. 5
2.2. ReactJS................................................................................................................... 7
2.3. NodeJS ................................................................................................................... 9
2.4. Redux Toolkit ...................................................................................................... 11
CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG .................................................... 12
3.1. Phân tích yêu cầu ................................................................................................. 12
3.1.1. Yêu cầu chức năng ........................................................................................ 12
3.1.2. Yêu cầu phi chức năng .................................................................................. 13
3.2. Sơ đồ use case ...................................................................................................... 14
3.2.1. Danh sách Actor ............................................................................................ 14
3.2.2. Sơ đồ use case tổng quát ............................................................................... 15
3.2.3. Danh sách use case ........................................................................................ 16
3.2.4. Đặc tả use case .............................................................................................. 17
3.3. Sơ đồ hoạt động ................................................................................................... 28
3.3.1. Danh sách các sơ đồ ...................................................................................... 29
3.3.2. Chi tiết các sơ đồ ........................................................................................... 29
3.3. Thiết kế dữ liệu .................................................................................................... 36
3.3.1 Sơ đồ thiết kế dữ liệu...................................................................................... 36
3.3.2. Danh sách các bảng dữ liệu ........................................................................... 37
3.3.3. Chi tiết các bảng ............................................................................................ 37
CHƯƠNG 4. XÂY DỰNG ỨNG DỤNG ..................................................................... 40
4.1. Danh sách màn hình............................................................................................. 40
4.2. Chi tiết màn hình ................................................................................................. 41
4.2.1. Màn hình “Trang chủ” ................................................................................... 41
4.2.2. Màn hình “Cá nhân” ...................................................................................... 44
4.2.3. Màn hình “Top 100”...................................................................................... 45
4.2.4. Màn hình “Album” ........................................................................................ 46
4.2.5. Màn hình “Nghệ sĩ” ....................................................................................... 47
4.2.6. Màn hình “Thay đổi theme” .......................................................................... 48
4.2.7. Màn hình “Đăng nhập”.................................................................................. 49
4.2.9. Màn hình “Đăng kí” ...................................................................................... 50
4.2.10. Màn hình “Tìm kiếm” ................................................................................. 51
4.2.11. Màn hình “Nhạc mới” ................................................................................. 52
CHƯƠNG 5. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ............................................... 53
5.1. Kết luận ................................................................................................................ 53
5.1.1. Đánh giá quá trình thực hiện đồ án ............................................................... 53
5.1.2. Kết quả đạt được ........................................................................................... 53
5.1.3. Ưu, nhược điểm của đồ án ............................................................................ 54
5.2. Hướng phát triển .................................................................................................. 54
TÀI LIỆU THAM KHẢO .............................................................................................. 55
DANH MỤC HÌNH ẢNH
Hình 2.1. Logo Javascript. ............................................................................................... 5
Hình 2.2. Logo ReactJS. .................................................................................................. 7
Hình 2.3. Logo NodeJS. ................................................................................................... 9
Hình 2.4. Logo Redux Toolkit. ...................................................................................... 11
Hình 3.1. Sơ đồ use case Tổng quát. .............................................................................. 15
Hình 3.2. Sơ đồ use case Đăng nhập. ............................................................................. 17
Hình 3.3. Sơ đồ use case Nghe nhạc. ............................................................................. 21
Hình 3.4. Sơ đồ use case Đăng tải bài hát. ..................................................................... 23
Hình 3.5. Sơ đồ use case Tạo danh sách phát nhạc........................................................ 25
Hình 3.6. Sơ đồ hoạt động Đăng ký tài khoản ............................................................... 29
Hình 3.7. Sơ đồ hoạt động Đăng nhập tài khoản ........................................................... 30
Hình 3.8. Sơ đồ hoạt động Nghe nhạc ........................................................................... 31
Hình 3.9. Sơ đồ hoạt động Tạo playlist ......................................................................... 32
Hình 3.10. Sơ đồ hoạt động Thêm bài hát vào playlist .................................................. 33
Hình 3.11. Sơ đồ hoạt động Xem Top 100 .................................................................... 34
Hình 3.12. Sơ đồ hoạt động Xem thơng tin nghệ sĩ ....................................................... 34
Hình 3.13. Sơ đồ hoạt động Xem thơng tin bài hát........................................................ 35
Hình 3.14. Sơ đồ hoạt động Tìm kiếm ........................................................................... 35
Hình 3.15. Sơ đồ thiết kế dữ liệu ................................................................................... 36
Hình 4.1. Màn hình “Trang chủ”. .................................................................................. 42
Hình 4.2. Màn hình “Cá nhân”....................................................................................... 44
Hình 4.3. Màn hình “Top 100”. ..................................................................................... 45
Hình 4.4. Màn hình “Album”. ........................................................................................ 46
Hình 4.5. Màn hình “Nghệ sĩ”. ...................................................................................... 47
Hình 4.6. Màn hình “Thay đổi theme”........................................................................... 48
Hình 4.7. Màn hình “Đăng nhập”. ................................................................................. 49
Hình 4.8. Màn hình “Đăng kí”. ...................................................................................... 50
Hình 4.9. Màn hình “Tìm kiếm” .................................................................................... 51
Hình 4.10. Màn hình “Nhạc mới”. ................................................................................. 52
DANH MỤC BẢNG
Bảng 3.1. Bảng danh sách Actor .................................................................................... 14
Bảng 3.2. Danh sách Usecase ........................................................................................ 16
Bảng 3.3. Đặc tả usecase Đăng nhập ............................................................................. 18
Bảng 3.4. Đặc tả usecase Đăng ký ................................................................................. 20
Bảng 3.5. Đặc tả usecase Nghe nhạc ............................................................................. 22
Bảng 3.6. Đặc tả usecase Đăng tải bài hát ..................................................................... 24
Bảng 3.7. Đặc tả usecase tạo danh sách phát nhạc. ....................................................... 26
Bảng 3.8. Đặc tả usecase đăng xuất ............................................................................... 27
Bảng 3.9. Danh sách các bảng dữ liệu ........................................................................... 37
Bảng 3.10. Chi tiết bảng “account” ................................................................................ 37
Bảng 3.11. Chi tiết bảng “music”................................................................................... 38
Bảng 3.12. Chi tiết bảng “list_music” ............................................................................ 38
Bảng 3.13. Chi tiết bảng “array_music” ........................................................................ 39
Bảng 3.14. Chi tiết bảng “play_history” ........................................................................ 39
Bảng 3.15. Chi tiết bảng “favortie” ................................................................................ 39
Bảng 4.1. Danh sách các màn hình chính ...................................................................... 40
TÓM TẮT ĐỒ ÁN
Đồ án “Xây dựng website nghe nhạc trực tuyến” sau khi hoàn thành việc nghiên
cứu phạm vi và phương pháp đã tiến hành xây dựng website tập trung vào chức năng
nghe nhạc trực tuyến, cùng các chức năng tìm kiếm, bài hát u thích, thêm bài hát vào
danh sách phát, xem video ca nhạc…
Đề tài được bắt đầu từ việc tìm hiểu thực trạng, xác định phạm vi, mục tiêu của
đề tài. Từ đó đưa ra các chức năng cần có và các cơng nghệ cần sử dụng cho website.
Với các chức năng chính yêu cầu qui trình phát triển website logic và mang tính chất
tuần tự. Qui trình phát triển được ghi nhận bằng cơng cụ Github project. Ở giai đoạn
thực hiện, client và server được phát triển song song sử dụng thư viện ReactJS cho client
và NodeJS cho server, sử dụng Visual Studio Code làm IDE chính.
Phần cuối cùng của đồ án là trình bày kết quả đã thực hiện lên cuốn báo cáo, đưa
ra kết luận và hướng phát triển cho ứng dụng trong tương lai. Nội dung đồ án được trình
bày trong 5 chương như sau:
• CHƯƠNG 1. MỞ ĐẦU: Xác định lí do, mục tiêu đề tài, đối tượng, phạm vi và
phương pháp nghiên cứu.
• CHƯƠNG 2. CƠ SỞ LÍ THUYẾT: Giới thiệu các công nghệ và ngôn ngữ đã sử
dụng gồm ngơn ngữ Javascript, cơng nghệ ReactJS, Redux Toolkit, NodeJS.
• CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG: Phân tích u cầu, sơ đồ use
case, sơ đồ hoạt động và thiết kế dữ liệu cho website nghe nhạc trực tuyến.
• CHƯƠNG 4. XÂY DỰNG ỨNG DỤNG: Xây dựng website nghe nhạc trực tuyến
LUXMusic được mô tả thông qua danh sách và chi tiết các màn hình.
• CHƯƠNG 5. KẾT LUẬN: Trình bày kết quả đạt được, ưu, nhược điểm của đồ
án và hướng phát triển trong tương lai của đồ án.
1
CHƯƠNG 1. MỞ ĐẦU
1.1. Lý do chọn đề tài
Hiện nay, Internet đã trở thành một phần không thể thiếu trong cuộc sống của con
người. Internet hiện hữu ở mọi mặt trong xã hội, ảnh hưởng hoàn toàn đến cách sống của
con người, bao gồm việc mua sắm, tìm hiểu thơng tin, phương pháp học tập, làm việc…
và cả việc nghe nhạc cũng vậy.
Âm nhạc từ lâu đã trở thành món ăn tinh thần quan trọng không chỉ đối với những
người yêu nghệ thuật mà còn đối với giới trẻ, những người làm việc văn phòng. Âm nhạc
được xem là giải pháp giúp giải tỏa những căng thẳng, mệt mỏi, thúc đẩy hiệu suất làm
việc và mang đến nguồn cảm hứng cho hầu hết tất cả mọi người. Âm nhạc là sự kết hợp
của giọng hát và các giai điệu của nhạc cụ nhằm tạo nên vẻ đẹp, sự hài hoà của cảm xúc,
mang đến cho con người những giây phút tuyệt vời. Khơng những thế, nó cịn giúp cải
thiện chất lượng giấc ngủ, ngăn ngừa chứng trầm cảm, giảm đau, kiểm sốt cơn thèm ăn
để làm đẹp vóc dáng, tăng cường sự tập trung…
Nếu như chúng ta bỏ qua việc nghe nhạc, chúng ta đã bỏ lỡ rất nhiều lợi ích tốt
cho sức khỏe. Cùng với sự phát triển nhanh chóng của Internet và cơng nghệ, nhu cầu
nghe nhạc của người dùng cũng ngày càng phát triển, đó là nhu cầu được nghe nhạc một
cách nhanh chóng, tiện lợi, nghe nhạc ở mọi lúc mọi nơi và dễ dàng cập nhật xu hướng
âm nhạc hiện tại. Bên cạnh sự phát triển quá dữ dội của công nghệ, việc người dùng
dùng đĩa để nghe nhạc lại càng ít đi, thay vào đó người dùng lại có thói quen nghe nhạc
trên các nền tảng web. Và không chỉ nghe nhạc, chúng ta cịn có thể sử dụng nhạc để
giúp tăng sự tập trung, việc tích hợp thêm todolist, notes hay timer cũng giúp việc học
tập và làm việc được gia tăng sự hiệu quả.
Thấu hiểu rõ những điều trên, nhóm đã quyết định lên ý tưởng và xây dựng một
website nghe nhạc trực tuyến với định hướng đáp ứng đầy đủ các nhu cầu hiện tại của
người dùng.
2
1.2. Mục tiêu đề tài
Việc nghiên cứu và xây dựng website được dựa trên hai mục tiêu chính sau:
-
Thứ nhất, nghiên cứu và áp dụng các cơng nghệ lập trình như ReactJS, NodeJS…
-
Thứ hai, có thể xây dựng được một website nghe nhạc trực tuyến có tính thực tiễn
cao, có khả năng triển khai và áp dụng vào thực tế, giúp những người có nhu cầu
nghe nhạc trực tuyến có thể thao tác một cách dễ dàng và tiện lợi.
1.3. Đối tượng nghiên cứu và phục vụ
• Đối tượng nghiên cứu:
-
Thư viện Javascript mã nguồn mở React (hay React JS, Reactjs) cho phần
Front-end và công nghệ NodeJS cho phần Back-end.
-
Thông tin dữ liệu của bài hát, album, nghệ sĩ và quản lý người dùng.
• Đối tượng phục vụ:
-
Người dùng có nhu cầu nghe nhạc, upload, download nhạc trực tuyến.
1.4. Phạm vi nghiên cứu
• Phạm vi mơi trường:
-
Triển khai sản phẩm trên mơi trường web.
• Phạm vi chức năng:
-
Nghe nhạc trực tuyến.
-
Bảng xếp hạng các bài hát, ca sĩ, album.
-
Quản lý tài khoản của người dùng.
-
Gợi ý bài hát.
3
1.5. Phương pháp nghiên cứu
-
Nghiên cứu các website liên quan hiện đang có trên thị trường, quan sát và từ đó
rút ra những ưu, nhược điểm của các website đó (Spotify, ZingMP3,
SoundCloud,...).
-
Tìm hiểu các cơng nghệ liên quan, thử trải nghiệm từng loại công nghệ và chọn
ra một số công nghệ phù hợp nhất.
-
Tham khảo ý kiến của giảng viên hướng dẫn để đạt được kết quả tốt nhất.
4
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1. Ngơn ngữ Javascript
Hình 2.1. Logo Javascript.
Javascript chính là một ngơn ngữ lập trình web rất phổ biến ngày nay. Javascript
được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động hơn.
Chúng cũng đóng vai trị tương tự như một phần của website, cho phép Client-side Script
từ người dùng tương tự máy chủ (NodeJS) để tạo ra những website động. [7]
Cách hoạt động của Javascript:
-
Thông thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúng
được tham chiếu qua file .js hoặc .JavaScript.
-
Đây là một ngôn ngữ đến từ phía Client nên Script sẽ được download về máy
client khi truy cập.
-
Tại đây, chúng sẽ được hệ thống xử ý. Vì vậy, bạn khơng cần phải tải về máy
server rồi chờ cho chúng xử lý xong mới phản hồi được kết quả đến client.
Ưu điểm:
-
Chương trình rất dễ học.
5
-
Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh
chóng hơn.
-
Những trình duyệt web có thể dịch thơng qua HTML mà khơng cần sử dụng đến
một compiler.
-
Javascript có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác
nhau.
-
Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn
nhiều so với các ngơn ngữ lập trình khác.
-
Javascript cịn có thể được gắn trên một số các element hoặc những events của
các trang web.
-
Những website có sử dụng Javascript thì chúng sẽ giúp cho trang web đó có sự
tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.
-
Người dùng cũng có thể tận dụng Javascript với mục đích là để kiểm tra những
input thay vì cách kiểm tra thủ cơng thơng qua hoạt động truy xuất database.
-
Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop,
Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính
năng).
Nhược điểm:
-
Javascript dễ bị các hacker và scammer khai thác hơn.
-
Javascript cũng khơng có khả năng đa luồng hoặc đa dạng xử lý.
-
Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng.
-
Những thiết bị khác nhau có thể sẽ thực hiện Javascript khác nhau, từ đó dẫn đến
sự khơng đồng nhất.
-
Vì tính bảo mật và an tồn nên các Client-Side Javascript sẽ không cho phép đọc
hoặc ghi các file.
6
2.2. ReactJS
Hình 2.2. Logo ReactJS.
ReactJS là một thư viện JavaScript dùng để xây dựng giao diện người dùng. Tính
đến thời điểm hiện tại, đã có khoảng 1300 developer và hơn 94000 trang web đang sử
dụng. ReactJS được hiểu nôm na là một thư viện, có chứa nhiều JavaScript mã nguồn và
“cha đẻ” chính là Facebook. Mục đích chính đó là mỗi website sử dụng ReactJS thì phải
chạy thật mượt hoặc thật nhanh, có khả năng mở rộng cao và đơn giản thực hiện. [8]
Về cơ bản, các tính năng của ReactJS thường xuất phát từ việc tập trung các phần
mềm riêng lẻ, cho phép các developer có chức năng phá vỡ giao diện của người dùng từ
một cách phức tạp và biến nó trở thành các phần mềm đơn giản. Hiểu đơn giản thì các
render dữ liệu khơng chỉ được thực hiện ở vị trí server mà cịn ở vị trí client khi sử dụng
ReactJS. [8]
Ưu điểm:
-
ReactJS cực kì hiệu quả: ReactJS tạo ra cho chính nó DOM ảo – nơi mà các
component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều.
ReactJS cũng tính tốn những thay đổi nào cần cập nhật len DOM và chỉ thực
hiện chúng. Điều này giúp ReactJS tránh những thao tác cần trên DOM mà nhiều
chi phí.
7
-
ReactJS giúp việc viết các đoạn code Javascript dễ dàng hơn: Nó dung cú pháp
đặc biệt là JSX (Javascript mở rộng) cho phép trộn giữa code HTML và
Javascript. Người dùng có thể thêm vào các đoạn HTML vào trong hàm render
mà khơng cần phải nối chuỗi. Đây là đặc tính thú vị của ReactJS. Nó sẽ chuyển
đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi
JSX.
-
Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu
SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực
hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên.
Điều này thực tế là chậm. ReactJS là một thư viện component, nó có thể vừa
render ở ngồi trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi
HTML mà server trả về.
-
Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì
virtual DOM được cài đặt hồn toàn bằng Javascript.
-
Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo
trì và sửa lỗi.
Nhược điểm:
-
ReactJS chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là
một MVC framework như những framework khác. Đây chỉ là thư viện của
Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và
Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2-way
binding hay là Ajax.
-
React khá nặng nếu so với các framework khác React có kích thước tương tương
với Angular (Khoảng 35KB so với 39KB của Angular). Trong khi đó Angular là
một framework hoàn chỉnh.
8
2.3. NodeJS
Hình 2.3. Logo NodeJS.
NodeJS là một mơi trường runtime chạy JavaScript đa nền tảng và có mã nguồn
mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client. Nền tảng
này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo
cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mơ hình hướng sự kiện (event-driven)
khơng đồng bộ. [9]
Các đặc tính của NodeJS:
-
Lập trình hướng sự kiện và khơng đồng bộ: Tồn bộ API trong thư viện NodeJS
đều không đồng bộ, hay không bị chặn. Về cơ bản điều này có nghĩa là một server
sử dụng NodeJS sẽ không bao giờ chờ một API trả về dữ liệu. Server sẽ chuyển
sang API kế tiếp sau khi gọi API đó và cơ chế thơng báo của Events trong NodeJS
giúp server nhận được phản hồi từ lần gọi API trước.
-
Cực kỳ nhanh chóng: Được xây dựng trên Cơng cụ JavaScript V8 của Google
Chrome, thư viện NodeJS có khả năng xử lý mã vơ cùng nhanh.
-
Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng một
mơ hình luồng đơn với vòng lặp sự kiện/event. Cơ chế event cho phép máy chủ
phản hồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các
9
server truyền thống hỗ trợ giới hạn các thread để xử lý yêu cầu. NodeJS sử dụng
một chương trình đơn luồng, cùng một chương trình có thể cung cấp dịch vụ cho
một số lượng yêu cầu lớn hơn so với các máy chủ truyền thống như Apache HTTP
Server.
-
Khơng có buffer: Các ứng dụng NodeJS khơng có vùng nhớ tạm thời (buffer) cho
bất kỳ dữ liệu nào. Các ứng dụng này chỉ đơn giản xuất dữ liệu theo khối.
-
License: NodeJS được phát hành theo giấy phép MIT.
Ưu điểm:
-
IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.
-
Sử dụng Javascript – một ngơn ngữ lập trình dễ học.
-
Chia sẻ cùng code ở cả phía client và server.
-
NPM (Node Package Manager) và module Node đang ngày càng phát triển mạnh
mẽ.
-
Cộng đồng hỗ trợ tích cực.
-
Cho phép stream các file có kích thước lớn.
Nhược điểm:
-
Cần có kiến thức tốt về Javascript.
-
Rất hạn chế khi áp dụng NodeJS khi xây dựng ứng dụng nặng, tốn tài nguyên.
Bởi vì NodeJS được viết bằng C++ và Javascript, nên phải thông qua thêm 1 trình
biên dịch của NodeJS sẽ lâu hơn 1 chút.
-
Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên host không
phải là điều dễ dàng.
-
Thiếu sự kiểm duyệt chất lượng các module NodeJS.
10
2.4. Redux Toolkit
Hình 2.4. Logo Redux Toolkit.
Gói Redux Toolkit là cách chuẩn để viết logic Redux. Ban đầu nó được tạo ra để giúp
giải quyết ba mối quan tâm phổ biến về Redux:
-
"Định cấu hình Redux Store quá phức tạp".
-
"Dev phải thêm rất nhiều packages để Redux có thể làm bất cứ điều gì hữu ích.
-
"Redux u cầu q nhiều mã code sẵn".
Redux Toolkit có thể khơng giải quyết mọi trường hợp sử dụng, nhưng với tinh thần
của create-react-app, Redux Toolkit có thể cố gắng cung cấp một số cơng cụ tóm tắt q
trình thiết lập và xử lý các trường hợp sử dụng phổ biến nhất, cũng như bao gồm một số
tiện ích hữu ích sẽ cho phép người dùng đơn giản hóa mã ứng dụng của họ. [10]
Bộ cơng cụ Redux Toollkit cũng bao gồm khả năng tìm nạp và lưu trữ dữ liệu mạnh
mẽ tên là "Truy vấn RTK". Nó được bao gồm trong gói như một tập hợp các điểm đầu
vào riêng biệt. Nó là tùy chọn, nhưng có thể loại bỏ nhu cầu tự viết tay logic tìm nạp dữ
liệu. [10]
Những cơng cụ này sẽ mang lại lợi ích cho tất cả người dùng Redux. Cho dù người
dùng Redux hoàn toàn mới đang thiết lập dự án đầu tiên của mình hay là người dùng có
kinh nghiệm muốn đơn giản hóa ứng dụng hiện có, bộ cơng cụ Redux có thể giúp làm
cho mã Redux của mình tốt hơn. [10]
11
CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG
3.1. Phân tích yêu cầu
3.1.1. Yêu cầu chức năng
3.1.1.1. Đăng ký
Người dùng đăng ký tài khoản bằng cách sử dụng Email và Password. Sau khi
hoàn thành form điền Email và Password, người dùng đăng ký tài khoản mới thành công
và sử dụng tài khoản này để đăng nhập vào website.
3.1.1.2. Đăng nhập
Để sử dụng được các chức năng như: Playlist, upload bài hát hoặc yêu thích bài
hát, người dùng phải tiến hành đăng nhập vào website. Người dùng đăng nhập bằng tài
khoản đã đăng ký trước đó.
3.1.1.3. Nghe nhạc
Đây là chức năng quan trọng nhất của ứng dụng, người dùng không cần đăng
nhập vẫn sử dụng được.
Trong chức năng này bao gồm các chức năng nhỏ như xem danh sách phát, tăng
giảm âm lượng, phát bài hát tiếp theo, phát bài hát trước đó, nghe nhạc ngẫu nhiên, lặp
lại 1 bài hát, lặp lại danh sách phát.
3.1.1.4. Yêu thích bài hát
Chức năng này cho phép người dùng yêu thích một bài hát bất kì và xem lại danh
sách các bài hát đã yêu thích.
12
3.1.1.5. Tìm kiếm
Chức năng này hỗ trợ người dùng tìm kiếm bài hát theo tên bài hát, ca sĩ... trên
thanh tìm kiếm.
3.1.1.6. Thay đổi theme
Người dùng có thể thay đổi theme của website với một số mẫu theme có sẵn.
3.1.1.7. Lịch sử nghe nhạc
Người dùng có thể xem lại lịch sử các bài hát đã nghe gần đây.
3.1.1.8. Playlist
Chức năng này chỉ dành cho người dùng đã đăng nhập vào ứng dụng. Người dùng
có thể tạo mới một Playlist và đặt tên cho Playlist, sau đó thêm các bài hát vào Playlist
mới này.
3.1.1.9. Upload và Download
-
Chức năng Download cho phép người dùng tải bài hát từ website về thiết bị để
nghe offline bài hát đó.
-
Đối với chức năng Upload, người dùng phải đăng nhập vào website để sử dụng.
Chức năng này cho phép người dùng upload bài hát mới từ thiết bị của người
dùng.
3.1.2. Yêu cầu phi chức năng
-
Yêu cầu về giao diện: Giao diện thân thiện, bố cục hợp lý, màu sắc phù hợp, cân
đối, trực quan, dễ dàng thao tác.
-
Yêu cầu về tính bảo mật: Phải đảm bảo an tồn dữ liệu người dùng, ngăn chặn
các tấn cơng từ bên ngồi, kiểm sốt vận hành hệ thống, giảm thiểu tối đa mức độ
13
