Ngoài ra chúng tôi còn tìm hiểu thêm về hệ thống quản lý các thông tin dữ liệu bài hát , nghệ sĩ lẫn người dùng của các ứng dụng nghe nhạc khác sau đó là bắt đầu lập trình, phát triển ứn
Trang 1ĐẠI HỌC QUOC GIA TP HO CHÍ MINH
TRUONG DAI HOC CONG NGHE THONG TIN KHOA KHOA HOC VA KY THUAT THONG TIN
LE HOANG LONG
PHAM NHAT DUONG
KHOA LUAN TOT NGHIEP
BUILDING A MUSIC STREAMING WEB APPLICATION
CU NHAN NGANH CONG NGHE THONG TIN
TP HO CHi MINH, 2022
Trang 2ĐẠI HỌC QUOC GIA TP HO CHÍ MINH
TRUONG DAI HOC CONG NGHE THONG TIN KHOA KHOA HOC VA KY THUAT THONG TIN
LE HOANG LONG
PHAM NHAT DUONG
KHOA LUAN TOT NGHIEP
BUILDING A MUSIC STREAMING WEB APPLICATION
CU NHAN NGANH CONG NGHE THONG TIN
GIANG VIEN HUONG DAN
ThS VO NGỌC TAN
TS NGUYEN GIA TUAN ANH
TP HO CHi MINH, 2022
Trang 3THONG TIN HỘI DONG CHAM KHÓA LUẬN TOT NGHIỆP
Hội đồng cham khóa luận tốt nghiệp, thành lập theo Quyết định só ngày của Hiệu trưởng Trường Đại học Công nghệ Thông tin.
Trang 4LỜI CẢM ƠN
Đề hoàn thành khóa luận tốt nghiệp này, chúng tôi xin gửi lời cảm ơn chân
thành nhất đến quý thầy cô của trường Đại học Công nghệ thông tin — Dai học Quốcgia Thành phố Hồ Chí Minh, bạn bè trong và ngoài trường, đã chỉ bảo, quan tâm,giúp đỡ tận tình trong suốt quá trình học tập ở trường nói chung và trong quá trìnhthực hiện dé tài nói riêng Nhờ đó chúng tôi đã có thêm nhiều kinh nghiệm dé xử lý
những khó khăn, thử thách và hoàn thành đề tài này
Chúng tôi xin gửi lời cảm ơn sâu sắc nhất đến Ths Võ Ngọc Tân, thầy làngười đã trực tiếp hướng dẫn, định hướng chuyên môn, quan tâm, giúp đỡ tận tình
và tạo mọi điều kiện thuận lợi trong quá trình thực hiện khóa luận
Trong thời gian làm khóa luận, ngoài những kiến thức đã học, chúng tôi đãđược học tập, tìm hiểu rất nhiều kiến thức mới, những trải nghiệm bồ ích Đồng thờiđược sự hướng dan tận tinh, cùng những góp ý của người thầy hướng dẫn — Võ NgocTân, chúng tôi đã tích lũy được nhiều kinh nghiệm cho bản thân, phục vụ cho côngviệc sau này ngoài ra còn có những lời khuyên rất hữu ích của Thầy Tô Quốc Huy
đã hướng dẫn chúng tôi rất nhiều nữa
Mặc dù chúng tôi đã có gang nỗ lực dé hoàn thành khóa luận tốt nghiệp của
mình, nhưng khó tránh khỏi sai sót, rất mong nhận được sự góp ý và chỉ bảo của quý
Thay Cô dé dé tài được tốt hơn
Lời cuối cùng chúng tôi muốn nói lời cảm ơn đến tất cả mọi người đã giúp đỡ
chúng tôi có được ngày hôm nay.
TP Hồ Chí Minh, tháng 6 năm 2022
Sinh viên thực hiện
Lê Hoàng Long — Phạm Nhật Dương
Trang 52.2.1.2 Lịch sử phát triển của Node JS - 2-22 x2x£+zxtzztrxezrerrserred 7
2.2.1.3 Ưu điểm và nhược điểm của Node J§ ¿- 5z cs+cvcx+eerxzeeresee 72.2.2 Tìm hiểu công nghệ React Js - ¿2 2 2SE+EE+£E£EE£EeEEzEerrerrerreee 8
2.2.2.2 Ưu điểm và nhược điểm của React Js ¿25s +xvzvEzeztzxszerrs 10CHUONG 3 PHAN TÍCH VA THIET KE HỆ THÓNG 2- 2 + secse¿ 12
3.1 Khảo sát hiện trạng - -.- cs k SH HT HH Hy 12
3.1.1 _ Tìm hiểu thông tỉn 2¿©5¿©5£+E£+E£EEEEEEEEEEEEEEEEEErkerkrrkrrkrree 123.1.2 _ Đánh giá hiện trạng và hướng giải quyẾt -cc<+cx+cxccxeee 12
Trang 63.2 Phân tích yêu cầu hệ thống - 2-22 +¿++++EE+2E++EE+2EEtEE+SExerkrerkrrkrervres 13
3.2.1 _ Phân tích yêu cầu người nghe nhạc - 2-2-2 2 + x£xezxezxzsecsz 13
3.2.2 Phân tích yêu cầu người quản tFị - 2 +2s++++z++zxzrxerxezrxeee 13
3.3 Thiết kế hệ thống ¿2 2 E+SE+EE+EEEEEEEEEE1211221211211712171 71211 14
3.3.1 Xác định các Actor và Use Case của hệ thống be aaeeeeeesaceecesenseeceeesaseeeess 14
3.3.2 Sơ đồ Use Case tổng quat cccccecccccsesssessesseessessessessessesssessesssesseessesseesses 15
3.3.3 Sơ dd Use Case chỉ tiéte ceecccsseeeescsssseesesssssnessssssneeseessnnesessssnes 16
3.3.4 DAC ta USCCASE 0 e 233.3.5 So đồ hoạt GON ccecceccescsseessssesssessessesseeseesessecsssssssessessessesseesessessessesseessees 33
3.3.7 Bang quan hệ trong hệ thống -+- 2+ ©2++£+£++£+2EEtEEerxrrrerrkeee 50
3.4 Mối liên kết giữa các quan NE - - + k2 ** 19v ng ng rưưn 54
CHƯƠNG 4 KÉT QUÁ XÂY DỰNG 2-7552 58
4.1 Trang Chủ son nh TH nh TH HH TH HH ngư 594.2 Trang tìm Ki6M o.eeccccccecccsscsssssssssssesseesessessessessessussessussusssssseseesseesessessessesseaess 594.3 Trang phòng nghe nhac - . - s6 + E1 E93 E1 E91 v1 ng 62 4.4 Trang bài hát yêu thích - - + - + + 1+3 k1 1119111911191 S91 HH HH ng 63
Trang 71 Sơ đồ Use Case tổng quất -:- + 2-5222 2 1212212212717 15
2 Sơ đồ Use Case Đăng nhập ¿22 2©5£+S2+EE£EE2EEEEEEEEEEEEEEEEEEErrrreee 16
3 Sơ đồ Use Case Nghe Nhạc :-©5c ©5222 E22E1211221271221271 2121211 re 17
4 Sơ đồ Use Case Tạo Danh Sách Phát cccccccvererrrerrrrrrrrree 18
5 Sơ đồ Use Case Theo Dõi Nghệ Sĩ 2-52 Ss+SEEEEEeEEeEErrkrrrrreee 19
6 Sơ đồ Use Case Tạo Phòng Nghe Nhạc Chung - 2 25252555: 20
7 Sơ đồ Use Case Tạo Bài Hát - - 2 SE +ESEESEEEEEESEEEESEEEESErrkrkrrrrrrreree 21
8 Sơ đồ Use Case Tạo i50 22
9 Sơ đồ hoạt động Đăng nhập ¿- 2-52 S£©S2+EEtEEE£EEtEEEvEErrrerrkrrrrrrkee 33
10 Sơ đồ hoạt động Đăng nhập của Quản Tri Viên . -«++<<++<+ 34
11 Sơ đồ hoạt động các chức năng của Quản Tri Viên - -« «<+s 35
12 Sơ đồ hoạt động Nghe Nhạc 222 22E2EE+EESEEEEEEEEEEErrkrrkerrerreee 36
13 So đồ hoạt động các chức năng tương tác với bài nhạc - 37
14 Sơ đồ hoạt động Chức năng theo dõi Nghệ Sĩ -2- 55225: 38
15 Sơ đồ hoạt động Tạo phòng nghe nhac chung .- - «+-s«+s++e<+s 39
16 Sơ đồ tuần tự đăng nhập 2-2¿©22+22+++EEE£EEEtEEEtEEErErkrrrkrerkrerkree 40
17 Sơ đồ tuần tự Đăng ký - 22 5Sc 22k EE2E10712211 7112110112111 xe Al
18 Sơ đồ tuần tự Quên mat khẩu -¿ 222cc 42
19 Sơ đồ tuần tự Quản tri viên đăng nhập 5 52555555 **+*c++sxssss 43
20 Sơ đồ tuần tự I0: 2 44
21 Sơ đồ tuần tự Tương tác bài nhạc -. 5 cv it 45
22 Sơ đồ tuần tự Tạo danh sách phát 2-2 2 2 + +£x+£xezxezxezrecreee 46
23 Sơ đồ tuần tự Theo dõi nghệ sĩ .- ¿2 2 2s E+£E+£EeEEezEerEerrerreee 41
24 Sơ đồ tuần tự chứ năng đăng tải bài hát của quản trị viên -. - 48
25 So đồ tuần tự Tạo phòng nghe nhạc - 2 2-2 2 +2 x+£E+£E+zEezxezzeee 49
Trang 826 Mỗi liên kết bảng yêu thích nhạc 2-22 s£©5£+x+£E£+£xt£x+vzxezrserxez 54
27 Mối liên kết giữa nghệ sĩ và bài nhạc - 2-2 5+ x+cxezxezEezxezreee 55
28 Mối liên kết bảng theo dõi nghệ sĩ -2- 2 2 2 E+£E££EeEEe£EerEerrerreee 56
29 Mỗi liên kết bảng yêu thích album -2- ¿2 +225++£x++z+zzxzzxzrsez 56
30 Bang quan hệ tạo danh sách phat - - <6 E+ + E+*kE*skEEseekseeeereeree 57
1 Giao diện trang chủ ứng dụng nghe nhac chung (Louis MusIc) 59
2 Giao diện trang tìm kiếm - ¿5£ 2+E£+EE2EE+EE2EEEEEEEEEEEEEEEEErrkerkerreee 60
3 Giao diện chỉ tiết album c::+cc+vvtttttxtrrrtrktrrrrrrtrrrrrrrtrrrrrrrrrrre 61
A Giao dién chi tiét nghé 8n d4 62
5 Giao diện tao phòng nghe nhac 0 eeeeseeeseeeseeeseeceseeesceceeeeeaeescessaeeeaeeeaee 63
6 Giao diện phòng nghe nhạc - -.- 6 2 2+ +21 ****E+*EE+EEEEEeeEeseesreeresererkre 63
7 Giao diện các tinh năng tùy chọn trên một bài hat -+ «++ 64
8 Giao diện trang bài hát yêu thích - +5 + 2+ k + E*vE+sEEsekssereeeskrskeee 64
9 Giao diện trang thư VIỆN - G6 11321113211 E E11 ESESEEEEEkrErksreerkrrrkre 66
Trang 91 Đặc tả Use Case Dang nhập - - + 2.131 * k9 ng re, 24
2 Đặc ta Use Case Nghe Nhạc - - HH HH HH ng rưy 26
3 Đặc tả Use Case Tạo Danh Sách Phát . - «<< << scccc<c<+>szzzxx 27
4 Đặc tả Use Case Theo Dõi Nghệ SĨ - G1 sHn ne, 28
5 Đặc ta Use Case Tạo Phòng Nghe Nhạc Chung - - «++-«<<++++ 29
6 Đặc tả Use Case Tạo Bài Hát . - <5 522 S233 **+*2 vvkesseeeeree 30
7 Đặc tả Use Case Tao Nghe Sĩ - LH HH ky 31
8 Đặc ta Use Case Tạo AlDbum - - - <5 << E3 3322 EE++Seekekkeeeeeeseeeezse 32
9 Bang quan hệ trong hệ thống 2 2 2 +2 E+EE+EE+EE£EE+EEtEEzErEerrerreee 53
Trang 10TÓM TẮT KHÓA LUẬN
Ngày nay, với sự phát triển của xã hội thì âm nhạc là một món ăn tinh thần khôngthê thiếu được trong cuộc sống Các ứng dụng nghe nhạc thường được sử dụng nhiều có
thé ké đến như Spotify, SoundClound, Zing Mp3.
Các ứng dụng này mang đến cho người dùng sự trải nghiệm tốt nhất như là: chấtlượng âm thanh, bài hát độc quyén, Vì thé ứng dụng của họ thu hút được rất nhiều
người sử dụng.
Trong bối cảnh đại dịch Covid-19 hiện nay thì các ứng dụng kết nối online đã trở
nên không còn quá xa lạ với người dùng Bên cạnh đó các dịch vụ giải trí về âm nhạc và
trò chuyện cũng trở thành tâm điểm được chú ý Do đó chúng tôi cho răng các dịch vụ
nghe nhạc trực tuyến rất có tiềm năng phát triển trong tương lai.
Hiện nay có rất nhiều công nghệ có thé sử dụng dé tạo ra các ứng dụng web hapdẫn với thời gian ngắn mà van đạt hiệu quả cao Trong đó thì nổi bật nhất vẫn là React]s
— một framework được rất nhiều người đùng yêu thích Do đó, ở dé tài khóa luận này,chúng tôi quyết định xây dựng ứng dụng web dựa trên công nghệ này
Trang 11CHƯƠNG1 GIỚI THIỆU
1.1 Ly do chọn đề tài
Trong xã hội hiện đại thời nay, có rất nhiều ứng dụng, trang web về âm nhạc phổbiến như: Spotify, Soundcloud, Zingmp3, đang được sử dụng rộng rãi Tuy nhiên,chức năng nghe nhạc đơn thuần đã quá phô biến
Do tình hình Covid đã xảy ra trong những năm gần đây khiến mọi người đều phảicách ly tại gia Khi ấy rất nhiều người phải làm việc và học tập trực tuyến, đồng thời,
những ứng dụng như: Facebook, Youtube, có số lượng người truy cập tăng vọt và các
ứng dụng nghe nhạc cũng không ngoại lệ, chúng được xem như một trong những công
Cụ giải trí tốt nhất cho mọi người sau một ngày làm việc, học tập mệt mỏi Thông thường,
moi người sẽ nghe những bài hát yêu thích của họ theo một cách cá nhân và chỉ có thé
sử dung các trang mạng xã hội dé có thể chia sé cho nhau Sau khi khai thác yếu tô này,
chúng tôi đã đặt ra câu hỏi: “Tại sao chúng ta không cùng nhau nghe nhạc với bạn bè,
người thân hoặc những người chưa từng quen biết có thê cùng nhau trò chuyện trong khi
nghe nhac?” Từ day chúng tôi đã lên ý tưởng và quyết định thiết kế ứng dụng nghe nhạc
chung nhằm kết nỗi mọi người lại với nhau
1.2 Đối tượng nghiên cứu và phục vu:
Đối tượng nghiên cứu:
> Thư viện Javascript mã nguồn mở React (hay React JS, Reactjs)
Trang 12> Những người dùng mong muốn giao lưu trò chuyện thông qua việc có cùng sở
Nhắn tin qua mạng xã hội:
Phần lớn mọi người trò chuyện cùng nhau qua các nền tảng mạng xã hội và đồngthời đây là một cách thường thấy khi họ muốn chia sẻ sở thích mà bản thân cảm thấy thú
vị với bạn bẻ, người thân Nhưng đối với việc nghe nhạc thì các nền tảng mạng xã hội
thường không phải là một lựa chọn hữu ích vì không đáp ứng được đầy đủ nội dung sovới các ứng dụng nghe nhạc.
Qua hai khảo sát trên, chúng tôi đã tham khảo và kết hợp vào ứng dụng nghe nhạc
chung, có thé tích hợp chức năng nghe nhạc chung đồng thời trò chuyện trực tiếp dé giúp
mọi người có những trải nghiệm mới lạ và tiện lợi.
Trang 13nhắn tin Và cuối cùng là vạch ra thời gian biểu, các giai đoạn phát triển cụ thé cho từng
chức năng của hệ thống Ngoài ra chúng tôi còn tìm hiểu thêm về hệ thống quản lý các
thông tin dữ liệu bài hát , nghệ sĩ lẫn người dùng của các ứng dụng nghe nhạc khác sau
đó là bắt đầu lập trình, phát triển ứng dụng theo những chức năng đã phân tích trước đó.Thiết kế giao diện và xem trải nghiệm của người dùng , kiểm tra thử hệ thống, trải nghiệm
hệ thống và đưa ra bản phát hành chính thức cho hệ thống
1.5 Mô tả bài toán
Những công việc cần xử lý:
> Ứng dụng cần phải có hệ thống đăng nhập, đăng ký tài khoản cho người dùng
> Ứng dụng sẽ đề xuất các bài hát đang thịnh hành trong và ngoài nước dé người
dùng dễ đàng tiếp cận, bên cạnh đó chức năng tìm kiếm bài hát hỗ trợ người dùngtìm kiếm theo sở thích cá nhân
> Thêm bài hát vào danh sách phát nhac (playlist) và yêu thích bài hat (liked songs)
giúp người dùng lưu lại bài hát yêu thích.
> Tích hợp tính năng trò chuyện (chat) trong phòng nghe nhạc chung dé người dùng
có thê cùng nghe nhạc và trò chuyện cùng nhau.
Trang 14CHƯƠNG 2 CƠ SỞ LÝ THUYÉT
2.1 Tong quan về hệ thống nghe nhạc chung
Hệ thống nghe nhạc chung là một hệ thống giúp người dùng có thé nghe nhạc vàtương tác trò chuyện cùng người khác thông qua phòng nghe nhạc, điều này sẽ đem lạimột trải nghiệm mới cho người dùng.
Hệ thống mang màu sắc đơn giản, không quá màu mè, phù hợp với mọi người dùng.
Tuy nhiên cũng còn vài hạn chế nhỏ so với các hệ thống nghe nhạc phô biến
Hiện tại hệ thống còn khá mới mẻ và chưa được thương mại hóa Spotify là một
trong những ứng dụng đi đầu cũng đã có ý tưởng thiết kế chức năng nghe nhạc chung
nhưng chưa chính thức ra mắt và vẫn còn đang trong quá trình thử nghiệm Tuy nhiên
họ vẫn chưa tích hợp tính năng nhắn tin trò chuyện và còn là một ứng dụng thu phí
*
¢ Một số chức năng chính của hệ thống quản lý nghe nhạc chung:
“ Chức năng tìm kiếm bài hát theo tên bài hát mong muốn
= Chức năng đăng kí và đăng nhập vào hệ thống nghe nhạc để tạo tài khoản
“ Chức năng hiên thị bài hát mà minh đã yêu thích hoặc nghe gần đây
= Chức năng năng tạo phòng nghe nhạc dé cùng nhau trò chuyện và nghe nhạc
Trang 152.2 Tìm hiểu công nghệ Node JS, React JS.
2.2.1 Tống quan về công nghệ Node JS
2.2.1.1 Node JS là gì?
NodeJs là nền tảng xây dựng dựa trên trên V8 J avascript engine — là một Javascript
engine NodeJs được thiết kế với mục dich là dé xây dựng các ứng dụng mạng có kha năng mở rộng Ngoài ra NodeJs còn là một mã nguồn mở hoàn toàn miễn phí được sử
dụng phổ biến bởi rat nhiều lập trình viên trên toàn thé giới
NodeJS có thé chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window chotới Linux, OS X nên đó cũng là một lợi thé NodeJS cung cấp các thư viện phong phú ở
dang Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở
mức thấp nhất
Khi chúng ta nói đến Node1s thì phải nghĩ ngay đến Realtime và đây chính là khảnăng xử lí giao tiếp từ client tới máy chủ trong thời gian thực Đề hình dung dễ hơn vềRealtime có thể nhắc tới Facebook, là khi chúng ta like hoặc comment trên một bài đăngnào đó thì mọi phản hồi của chủ bài viết hoặc có các comment khác sẽ lập tức thông báophản hồi cho chúng ta
> Framework ExpressJs
Đây là một framework mã nguồn mở miễn phi cho Node.js Express.js được sử
dụng trong thiết kế và xây dựng các ứng dụng web hoặc di động một cách đơn giản vànhanh chóng Express js chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng cácứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát trién
Express cung cấp thêm về các tinh năng dé lập trình tốt hơn chứ không làm giảmtốc độ của NodeJs Và hơn hết, các Framework nỗi tiếng của NodeJs hiện nay đều sử
dụng ExpressJs như một core function.
Trang 16> MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là cơ sở dữ liệu thuộc
NoSql và được hàng triệu người sử dung MongoDB là một database hướng tài liệu
(document) và các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảngnên truy vân rât nhanh
Tôc độ truy vân của MongoDB nhanh hơn hăn so với các hệ quản trị cơ sở dữ
liệu quan hệ.
> Socketio
Socketio không phải là một ngôn ngữ mà đơn giản chỉ là một công cụ ứng dụngrealtime nên nói phải được sử dụng kết hợp với ngôn ngữ khác như là: NodeJs Socketio
sẽ giúp các bên kết nối với nhau thông qua sever trung gian theo thời gian thực Thường
được sử dụng với các ứng dụng chat, game online,
2.2.1.2 Lich sử phát triển của Node JS
Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ
sở tại California, Hoa Kỳ NodeJS được phát triển bởi Ryan Dahl và có thé chạy trênnhiều hệ điều hành khác nhau: OS X, Microsoft Windows, Linux
2.2.1.3 Uu điểm và nhược điểm của Node JS.
* Uu điểm của Node JS :
1 NodeJs được xây dựng bằng nền tang V8 Javascript Engine nên khi chạychương trinh sẽ rất nhanh và không tốn thời gian
2 NodeJs sử dung mô hình một luồng duy nhất với các sự kiện lặp Nhưng
cơ chế tổ chức sự kiện giúp máy chủ đáp ứng không bị chặn và có khả năng mở
rộng cao nên hoàn toản trái ngược với các máy chủ truyên thông.
Trang 173 Với khả năng xử lý nhiều phản hồi đồng thời thời gian phản hồi nhanh.Các ứng dụng không muốn nó tải lại trang, gồm rất nhiều request từ người dùngcần sự hoạt động nhanh dé thé hiện sự chuyên nghiệp thì NodeJS sẽ là sự lựa chọntốt.
4 NodeJS có thé xử lý hàng nghìn tiến trình (gọi tắt là process) và trả ra 1luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất.
5 Các web thông thường gửi HTTP request và nhận phản hồi lại (Luồng dữliệu) NodeJS sẽ xây dựng các Proxy phân vùng các luồng dit liệu dé đảm bảo tối
đa hoạt động cho các luồng đữ liệu khác
6 Ứng dụng Web thời gian thực với sự ra đời của các ứng dụng di động
và HTML5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian
thực (real-time applications) như các ứng dung chat, các dịch vụ mạng xã hội
như Facebook, Twitter, Instagram
s* Nhược điểm của Node JS :
1 Ung dụng nặng khá tốn tài nguyên Nếu có ý định sử dụng Nodejs cho các ứng dụng tốn nhiều tài nguyên như encoding video, convert file, thì sẽ
gây khá nhiều phiền toái nên tốt nhất xem xét kỹ lưỡng.
2 NodeJS và ngôn ngữ khác như PHP, Ruby, Python NET thì việc cuốicùng là phát triển các App Web NodeJS chỉ mới sơ khai như các ngôn ngữ lậptrình khác.
2.2.2 Tìm hiểu công nghệ React Js
2.2.2.1 Giới thiệu Framework React Js?
> Framework React Js
Trang 18React Js là một thư viện cua javascript, được viết bởi đội ngũ kỹ sư Facebook và
ta có thé dé dàng tìm được source code trên Github!.
React Js giúp hỗ trợ, phát triển giao điện người dùng với xu hướng sử dụng SPA(Single Page Application) Ngoài ra ReacJs còn giúp tái sử dụng code nhằm tiết kiệmthời gian trong quá trình phát triển cũng như giảm thiểu các rủi ro trong quá trình codingbăng cách đưa ra các khái niệm về JSX và Virtual DOM
e VềJSX: hay còn gọi là Javascript XML có tác dụng hỗ trợ hỗ trợ biên dịch cú
pháp mã HTML sang Javascript Bằng cách này, các lập trình viên có thê dễdàng thiết kế giao diện theo mã HTML một cách nhanh chóng thay vì phảiviết trực tiếp bằng javascript
e Về Virtual DOM: là một DOM ảo có đầy đủ thông tin của DOM Khi người
dùng sử dụng các tính năng của trang web yêu cầu phải tải lại trang thì DOM
ảo này sẽ tính toán sự thay đổi và cập nhật thành phan thay đổi đó mà khôngcần phải cập nhật lại cả cây DOM giúp tối ưu hóa việc re-render lại cây DOMthật.
Trang 19Material UI là công cụ mạnh mẽ và hiệu quả nhất đề xây dựng một ứng dụng web bằng
cách thêm các thiét kê và hoạt ảnh có san.
Material UI đem đến một giao diện hoàn toàn mới với những button, textfield,toogle được design theo một phong cách mới lạ thay vì sử dụng Boostrap.
giúp chúng ta dễ dàng tích hợp vào các trang web và ứng dụng di động.
2.2.2.2 Ưu điểm và nhược điểm của React Js
* Ưu điểm của React Js:
©
©
Giúp xây dựng giao diện nhanh và hạn chế lỗi trong quá trình coding
Có khả năng mở rộng tốt cũng như tái sử dụng các component Chúng tachỉ cần phải xây dựng ban đầu và có thể sử dụng lại các component đó kể
cả cho các dự án sau.
Có hiệu suất cao, khi khối lượng DOM lớn thì ReactJs vẫn có thẻ render
ra giao diện rất mượt
Sử dụng SPA (single page application) nên tạo ra sự thoải mái cho người
dùng: không yêu cầu tải lại trang khi chuyền trang.
Do được phát triển bởi một tập đoàn lớn như Facebook, nên ReactJs có
tính 6n định khá cao cũng như có cộng đồng hỗ trợ lớn:
10
Trang 20e_ Các mã code trong ngôn ngữ này có thé đơn giản hóa quá trình xử
lý dữ liệu.
e Do là ngôn ngữ được yêu thích cũng như phô biến nhất hiện nay
nên nhu cầu về việc làm với vị trí React Developer rất lớn
e©_ Mang đến cho người dùng những trải nghiệm thú vị nhất
Nhược điểm của React Js:
Dưới đây là một số nhược điểm vẫn còn tồn đọng trong React Js:
o Do chỉ là view library nên chỉ có thé giúp ta render ra phan giao diện nên
sẽ không có model hay controller như các mô hình MVC mà phải kết hợp
với các thư viện khác.
o Do sử dung SPA nên nếu tối ưu code không tốt thì trong lần tải trang đầu
sẽ tốn nhiều tài nguyên cũng như thời gian
11
Trang 21CHUONG3 PHAN TÍCH VA THIET KE HỆ THONG
3.1 Khao sat hién trang
Khi thiết kế một ứng dung hoàn chỉnh với đầy đủ chức năng thì việc khảo sát hiệntrạng là điều thiết yêu Đơn giản vì dự án phải cần đầy đủ thông tin về trải nghiệmngười dùng nếu không sẽ gây rất nhiều khó khăn trong việc quản lý ứng dụng
3.1.1 Tim hiểu thông tin
Qua quá trình khảo sát các ứng dụng nghe nhạc thì chúng tôi tìm hiểu được mộtvài thông tin:
Hầu như các ứng dụng luôn cho phép người dùng đăng nhập, đăng kí tài khoảntrước khi bắt đầu truy cập vào ứng dụng Luôn luôn cập nhập ưu tiên các bài hát mới
và thịnh hành đề người dùng có thể tiếp cận ngoài ra luôn biết cách đánh vào tâm língười dùng khi bắt họ phải trả phí để có thê nghe nhạc với chất lượng tốt nhất hoặcnghe nhưng album của những nghệ sĩ thế giới nồi tiếng Ngoài ra đều có tính năngthêm bài nhạc yêu thích và tạo danh sách nhạc dé người dùng dé dàng nghe lại
Giao diện thì đều hướng đến hệ thống đơn giản, dễ sử dung Các tính năng đềuhién thị rõ ràng giúp người dùng dễ thao tác
Về quản trị viên: Do tính bảo mật nên việc tiếp cận khảo sát là không thé Vì théchúng tôi đã khảo sát một vài video và bài viết trên youtube và google dé thực hiện.Xét về cơ bản thì quản trị viên sẽ có quyền quan lý tat cả các dit liệu về người dùng,
bai hát, nghệ sĩ,
3.1.2 Đánh giá hiện trạng và hướng giải quyết
Hầu hết các ứng dụng nghe nhạc đều có thể đáp ứng đủ các nhu cầu nghe nhạc cơ
bản của người dùng Tuy nhiên nếu chỉ có nghe nhạc đơn thuần thì người dùng
thường sẽ lựa chọn những ứng dụng nghe nhạc phổ biến Vì thé dé có thé giải quyết
12
Trang 22van dé này chúng tôi đã xây dựng thêm tính năng nghe nhạc chung tích hợp trò
chuyện.
3.2 Phân tích yêu cầu hệ thống
3.2.1 Phan tích yêu cầu người nghe nhạc
Giao diện sử dụng cần phải dé sử dụng và trực quan ngay từ lần đầu tiếp xúc Bồcục sắp xếp phải đẹp mắt, phối màu phù hợp với nhu cầu giới trẻ hiện nay, tránh xài các
gam màu nôi và màu mè gây rôi mắt cho người nghe nhạc.
Trọng tâm thiết kế cần được tập trung vào chức năng quản lý bài nhạc, ngườidùng đối với quản trị viên Nghe nhạc và tạo phòng nghe nhạc chung đối với người nghenhạc.
Các tính năng cần tập trung cao nhất ở các chức năng chính: Đăng ký và đăngnhập tài khoản, nghe nhạc, lưu bài hát và nghệ sĩ yêu thích vào thư viện, tạo phòng nghe nhạc chung.
Các thao tác trên hệ thông cân được tôi giản, hạn chê tôi đa các việc người dùng
cần phải điều hướng đề sử dụng một chức năng nào đó.
3.2.2 Phân tích yêu cầu người quản trị
Người quản trị là người dùng cao nhất của hệ thống, có khả năng quản lý danh sáchngười nghe nhạc, quản lý danh sách bài nhạc, quản lý danh sách nghệ sĩ.
Người quản trị có thể kiểm tra được các thông tin cơ bản của người dùng, các thông
kê, báo cáo về kết quả đạt được
Ngoài ra, những chức năng khác như đăng bài hát, thêm bài hát, xóa bài hát cũng do
người quản trị thực hiện.
13
Trang 233.3 Thiết kế hệ thống
3.3.1 Xác định các Actor và Use Case của hệ thống
“+ Người nghe nhac
Các Use Case chính: Đăng nhập, Đăng ký, Nghe nhạc, Tạo danh sách phát,
Tạo phòng nghe nhạc chung, Theo dõi nghệ sĩ và các chức năng cơ bản khác như nghe nhạc, yêu thích bài hát.
s* Quan trị viên:
Các Use Case chính: Quan lý người dùng, Quản lý quyền truy cập, Tra cứu
thông tin, đăng tai bài nhạc, album.
14
Trang 243.3.2 Sơ đồ Use Case tống quát
Tìm kiếm bai nhạc,
nghệ sĩ mong muôn
Yêu thích lưu bai hát
vảo thư viện
Trang 253.3.3 Sơ đồ Use Case chỉ tiết
> Use Case Đăng nhập
Dat van dé:
- Người nghe nhạc có thé nghe nhạc trực tuyến va sử dung các chức năng
khác bằng cách tạo tài khoản mới vào hệ thống hoặc đăng nhập (nếu đã
đăng kí).
Phân tích yêu cầu:
- Cho phép người nghe có thé tạo tài khoản dé sử dung các chức năng
Đăng nhập bang tải ấ os
khoản đã duoc dang ký =inciude>: Điền mật khâu
Người nghe nhạc
<<extend>>
Bing nhập bang tài Lay lại mat khẩu
khoan admin Quản tri viễn
Hình 3 2 Sơ đô Use Case Đăng nhập
16
Trang 26> Use Case Nghe Nhạc
Dat van dé:
- Người nghe nhạc có thé nghe nhạc trực tuyến và lưu trữ các bài hát yêu
thích sau khi đăng nhập vào hệ thống
Phân tích yêu cầu:
- Cho phép người nghe nhạc có thê tìm kiếm bài hát và chọn bài hát
Tim kiém bai hat
Nghe bai hat <include> Chọn bài hát <exfend>>
`4
<<extend>>
h
Người nghe nhac
Đưa bài hát vào thư mục yêu thích <include>> Yêu thích bài hát
17
Trang 27> Use Case Tạo Danh Sách Phát
Người nghe nhạc có thé xóa các bài hát ra khỏi danh sách phát đồng
thời có thê xóa cả danh sách phát vừa tạo
Chọn bài hát muốn
thêm vào danh sách
<<include>>
Xóa danh sách phát Tạo danh sách phát
nhạc nhạc
Trang 28> Use Case Theo Doi Nghệ Sĩ
Dat van dé:
- Người nghe nhạc có thé theo dõi nghệ sĩ yêu thích
Phân tích yêu cầu:
- Người nghe nhạc có thé xem các bài hát thuộc về nghệ sĩ đó
Đăng nhập bang tai
Theo dõi nghệ sĩ khoản đã duoc đăng ky:<incluldligs==>
Người nghe
nhạc
Hình 3 5 Sơ đô Use Case Theo Dõi Nghệ Si
19
Trang 29> Use Case Tao Phòng Nghe Nhạc Chung
Dat van dé:
- Người nghe nhac có thé tao ra một phòng nghe nhac chung dé nghe
nhạc cùng người khác.
Phân tích yêu cầu:
- Cho phép người nghe nhac tao phòng nghe nhac chung với các chức
năng cơ bản là chọn danh sách nhạc muốn nghe và nghe nhạc chung
exeng tham gia vao phong
Tao phong nghe nhac
Trang 30> Use Case Tạo Bài Hát
Đặt vấn đề:
- Quan trị viên có quyền đăng tải, xóa bài hát cũng như chỉnh sửa b6 sung
thông tin về bài hát
Phân tích yêu cầu:
- Cho phép quản trị viên đăng tải bai hát mới lên ứng dụng thông qua trang
quản ly (dashboard) bao gồm nhập thông tin bài hát và thông tin nghệ si.
- Cho phép quản trị viên xóa bai hát ra khỏi trang web.
Chon nghệ sĩ của bai
Nhap thông tin bai hat hải dé
<<include=>
Đăng tai bai hat moi Xủa cac bai nhạc
Quan tri vién
Đăng file nhạc mp3
Hình 3 7 Sơ đô Use Case Tạo Bài Hat
21
Trang 31> Use Case Tạo Nghệ sĩ
Đặt vấn đề:
- Quan trị viên có quyền tạo nghệ sĩ mới
Phân tích yêu cầu:
- Cho phép quản trị viên nhập thông tin va đăng tải hình anh của nghệ sĩ.
- Cho phép quản trị viên xóa nghệ sĩ.
Nhập thông tin nghệ sĩ
Tao nghệ si mới Xa các nghệ sĩ đỗ
Hình 3 8 Sơ đô Use Case Tạo Nghệ sĩ
22
Trang 323.3.4 Đặc ta usecase
> Use Case Dang nhap
Đối tượng tham
gia
Quản trị viên, người nghe nhạc
sử dụng các chức năng nghe nhạc, yêu thích, theo dõi nghệ sĩ và bài hát, tạo danh sách phát nhạc, tạo phòng nghe nhạc chung
Luông sự kiện 1 Người dùng điều hướng đến trang đăng nhập.
2 Hệ thống hiển thị form đăng nhập cho người dùng
3 Người dùng nhập các thông tin đăng nhập bằng các thông
tin đã đăng ký trước đó.
4 Hệ thống ghi nhận hoạt động đăng nhập thành công
4a Hệ thống xác nhận đăng nhập không thành công
và thông báo lỗi ra cho người dùng
4b Nếu quên mật khẩu thực hiện luồng DI
- Luông DI: Quên mật khẩu
+ Người dùng chọn vào nút quên mật khâu trong
trường hợp quên mật khẩu đã đăng ký trước đó
+ Hệ thống hiển thi form cho phép người dùng nhập
vào email đã đăng ký tài khoản trước đó.
+ Nếu email đã được đăng ký, thực hiện luồng D1-1+ Nếu email chưa được đăng ky, thông báo lỗi cho
người dùng.
- Luéng DI-1: Email cấp lại mật khâu
+ Hệ thống gửi email cấp lại mật khâu đến người dùng
23
Trang 33+ Người dùng vào hộp thư và xác nhận đường dẫn đếntrang cấp lại mật khẩu.
+ Người dùng tiên hành nhập mật khâu mới và xác nhậnmật khâu mới cho tài khoản
Sự kiện kích hoạt Người dùng chọn đăng nhập
Tiên điêu kiện - Nguoi dùng phải có tài khoản.
- _ Người dùng phải kết nối internet
Tân suât sử dụng Cao
Bang 3 I Đặc tả Use Case Đăng nhập
24
Trang 34> Use Case Nghe nhạc:
Tén Usecase Nghe nhac
Đối tượng tham Người nghe nhạc
gia
Mô tả Người nghe nhạc sau khi đã đăng nhập có thê tiên hành nghe nhạc
hoặc tìm kiếm những bài hát yêu thích
Luông sự kiện 1 Người dùng lựa chọn bài hát muốn nghe:
2.a Nguoi dùng chọn trực tiếp bài hát được đề xuất
trên trang chủ.
2.b | Người dùng nhập tên bài hát vào mục tìm kiếm tại
thanh điều hướng
2.b 1 Hệ thống tìm kiếm bài hát và trả về kết quả
tìm kiếm cho người dùng
2.b 2 Người dùng chọn bài hát muốn nghe
2 Hệ thống phát bài hát
3 Trong khi nghe nhạc, người dùng có thé chọn chức năng yêu
thích bài hát.
4 Bài hát lưu vào thư viện của người dùng.
Mục tiêu Giúp người dùng có thể nghe, tìm kiếm, yêu thích và lưu lại bài
nhạc vào thư viện của người dùng
Tiên điêu kiện - Nguoi dùng phải đăng nhập.
- Nguoi dùng phải kết nối internet
25
Trang 35Tan suat sử dụng Cao
Bảng 3 2 Đặc tả Use Case Nghe Nhạc.
> Use Case Tạo Danh Sách Phát
Tên Usecase Tạo danh sách phát
Đối tượng tham Người nghe nhạc
gia
Mô tả Người nghe nhạc có thê lưu bài hát thành một danh sách phát
on On F
Người dùng chon chức năng tao mới danh sách phát
trong thư viện.
Người dùng nhập tên danh sách phát và bam tao
Hệ thống tạo danh sách phát theo tên người dùng đã
nhập.
Người dùng nhấn nút tùy chọn trên bài hát.
Hệ thống hiển thị danh sách các tính năng tùy chọn
Người dùng chọn vào nút “thêm vào danh sách phát” Người dùng chọn vào danh sách phát đã tạo.
Bài hát được lưu vào danh sách phát.
8a Người dùng có thé xóa danh sách phát
8.a | Người dùng chọn vào nút xóa danh sách
Trang 36Sự kiện kích hoạt Người dùng đưa bài hát vào danh sách phát tự tạo
mong muôn.
Tiên điêu kiện - Nguoi dùng phải đăng nhập.
- Nguoi dùng phải kết nối internet
Tan suat sử dụng Trung bình
Bảng 3 3 Đặc ta Use Case Tạo Danh Sách Phát.
>» Use Case Theo Dõi Nghệ sĩ
Tén Usecase Theo dõi nghệ sĩ
Đối tượng tham Người nghe nhạc
gia
Mô tả Người nghe nhạc có thé theo dõi nghệ sĩ mà mình yêu thích
Luông sự kiện 1 Người dùng chọn vào một nghệ sĩ tại trang chủ.
1.a Người dùng nhập nhập tên nghệ sĩ mình
muốn theo dõi trong ô tìm kiếm sau đó:
1.a.1 Hệ thống sẽ hiển thị kết quả tìm kiếm
1.a.2 Người dùng chọn vào nghệ sĩ.
2 Hệ thống đưa người dùng đến trang chỉ tiết nghệ si
3 Người dùng chon nút yêu thích nghệ sĩ.
4 Nghệ sĩ yêu thích được lưu trong thư viện của người
dùng.
27
Trang 375 Người dùng có thê xem những bài hát và album của nghệ
sĩ đó.
Sự kiện kích hoạt Người dùng tìm kiêm nghệ sĩ hoặc chọn nghệ sĩ trên trang chủ
và nhân nút theo dõi
yêu thích
Tiên điêu kiện - Nguoi dùng phải đăng nhập.
- Người dùng phải kết nối internet
Tân suât sử dụng Cao
Bang 3 4 Đặc ta Use Case Theo Dõi Nghệ Sĩ
> Use Case Tạo Phòng Nghe Nhạc Chung
Đối tượng tham Người nghe nhạc
gia
Mô tả Người nghe nhạc có thé tạo phòng nghe nhạc chung dé nghe
nhạc, giao lưu trò chuyện với người khác.
Luông sự kiện 1 Người dùng chọn vào nút tạo phòng có sẵn ở trên thanh
công cụ giao diện ứng dụng.
2 Người dùng nhập tên phòng muốn tạo và chọn nút tao
phòng.
28
Trang 383 Hệ thống tạo phòng theo tên người dùng đã nhập vả hiển
thị lên giao diện người dùng.
4 Người dùng chọn phòng nghe nhạc muốn vào
5 Hệ thống chuyền người dùng đến trang phòng nghe
nhạc.
6 Nếu muốn rời khỏi phòng nghe nhạc người dùng chọn
vào nút “Leave room” dé kết thúc
7 Hệ thống sẽ nhận thông tin và đưa người dùng quay trở
lại giao diện trang tạo phòng nghe nhạc.
Sự kiện kích hoạt Người dùng chọn chức năng tạo phòng nghe nhạc
trò chuyện, giao lưu cùng người khác
Tiên điêu kiện - Nguoi dùng phải đăng nhập.
- _ Người dùng phải kết nối internet
Tân suât sử dụng Trung bình
Bang 3 5 Đặc ta Use Case Tạo Phòng Nghe Nhạc Chung.
29
Trang 39> Use Case Tạo Bài Hát
Đối tượng tham
gia
Quản trị viên
trang web (Dashboard)
Luông sự kiện 1 Quản trị viên chọn chức năng thêm bai hát trong trang
quản lý (Dashboard).
Hệ thống sẽ hiển thị biểu mau
Quản trị viên chọn nghệ sĩ và album của bài hát.
Quản trị viên nhập thông tin bài hát.
Cu ốc G2 Quản trị viên đăng tải nhạc dưới dạng file mp3 và hình
ảnh của bài nhạc.
6 Quản trị viên có thé xóa bài nhạc đã được tạo:
6.a Quan tri viên chọn vào nút xóa bài nhạc.
6.a.1 Hệ thống xóa bài nhạc.
Sự kiện kích hoạt Quản lý chọn nút thêm bài hát trong trang quản lý (Dashboard)
Mục tiêu Giúp người dùng có thê tiếp cận được nhiều bài hát với đa dạng
thé loại và quản trị viên có thé dé dàng kiêm soát dữ liệu hơn
- Nguoi dùng phải đăng nhập.
- Người dùng phải kết nối internet
Tân suât sử dụng Cao
Bang 3 6 Đặc ta Use Case Tạo Bai Hat.
30