CƠ SỞ LÝ THUYẾT
Ngôn ngữ Javascript
JavaScript là một ngôn ngữ lập trình web phổ biến, được tích hợp vào HTML để làm cho website trở nên sống động hơn Nó cho phép thực hiện các script phía client, tương tự như trên máy chủ với NodeJS, giúp tạo ra những website động.
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, hệ thống sẽ xử lý tự động, giúp bạn không cần tải dữ liệu về máy chủ và chờ đợi kết quả trước khi phản hồi đến khách hàng Ưu điểm này tiết kiệm thời gian và nâng cao hiệu suất làm việc.
- Chương trình rất dễ học
- 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ó thể sử dụng Javascript để kiểm tra các input một cách hiệu quả, thay vì phải thực hiện kiểm tra thủ công qua việc truy xuất cơ sở dữ liệu.
Giao diện của ứng dụng rất phong phú, bao gồm nhiều thành phần như tính năng kéo và thả (Drag and Drop) cùng với thanh trượt (Slider), mang đến cho người dùng một trải nghiệm giao diện phong phú và đầy đủ tính năng.
- 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 toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file
ReactJS
ReactJS là thư viện JavaScript phổ biến để phát triển giao diện người dùng, hiện đang được khoảng 1300 lập trình viên và hơn 94000 trang web sử dụng Thư viện này bao gồm nhiều mã nguồn JavaScript, giúp tối ưu hóa quá trình xây dựng ứng dụng web.
Facebook là "cha đẻ" của ReactJS, một thư viện JavaScript được thiết kế để giúp các website hoạt động mượt mà và nhanh chóng ReactJS nổi bật với khả năng mở rộng cao và tính đơn giản trong việc triển khai.
ReactJS tập trung vào việc phân tách các thành phần giao diện người dùng, giúp các nhà phát triển dễ dàng chuyển đổi các ứng dụng phức tạp thành những phần mềm đơn giản hơn Một điểm nổi bật của ReactJS là khả năng render dữ liệu không chỉ trên server mà còn trên client, mang lại hiệu suất tối ưu và trải nghiệm người dùng mượt mà.
ReactJS mang lại hiệu suất tối ưu nhờ vào việc sử dụng DOM ảo, nơi các component tồn tại và hoạt động Bằng cách tính toán chính xác những thay đổi cần cập nhật lên DOM, ReactJS chỉ thực hiện những thao tác cần thiết, giúp giảm thiểu chi phí và nâng cao hiệu suất làm việc.
ReactJS đơn giản hóa việc viết mã JavaScript nhờ vào cú pháp JSX (JavaScript mở rộng), cho phép kết hợp mã HTML và JavaScript một cách dễ dàng Người dùng có thể chèn HTML trực tiếp vào hàm render mà không cần phải nối chuỗi, mang lại sự tiện lợi và linh hoạt Tính năng này của ReactJS chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML thông qua bộ biến đổi JSX.
Render tầng server giúp tối ưu SEO và thời gian tải trang cho các ứng dụng đơn trang Khi mọi thứ được xây dựng và hiển thị ở client, người dùng phải chờ đợi trang khởi tạo, dẫn đến trải nghiệm chậm ReactJS, với khả năng render cả trên trình duyệt và thông qua các chuỗi HTML từ server, mang lại giải pháp hiệu quả cho vấn đề này.
- 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 hoà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
ReactJS chỉ đảm nhiệm vai trò của tầng View, không phải là một framework MVC như các framework khác Đây là thư viện của Facebook chuyên giúp render phần view Do đó, React không bao gồm Model và Controller, và cần kết hợp với các thư viện khác để hoàn thiện chức năng Ngoài ra, React cũng không hỗ trợ 2-way binding hay Ajax.
React có kích thước khoảng 35KB, tương đương với 39KB của Angular, khiến nó trở nên nặng nề hơn so với một số framework khác Tuy nhiên, Angular là một framework hoàn chỉnh, điều này cho thấy sự khác biệt trong cách thiết kế và tính năng giữa hai công nghệ này.
NodeJS
NodeJS là môi trường runtime mã nguồn mở, chạy JavaScript đa nền tảng, cho phép phát triển ứng dụng web bên ngoài trình duyệt Được sáng lập bởi Ryan Dahl vào năm 2009, NodeJS là giải pháp lý tưởng cho các ứng dụng yêu cầu xử lý nhiều dữ liệu nhờ vào mô hình không đồng bộ và hướng sự kiện.
Các đặc tính của NodeJS:
Lập trình hướng sự kiện và không đồng bộ trong NodeJS cho phép các API hoạt động mà không bị chặn, nghĩa là server không bao giờ chờ đợi phản hồi từ một API trước khi tiếp tục với API tiếp theo Điều này giúp tối ưu hóa hiệu suất của server, vì nó có thể xử lý nhiều yêu cầu cùng lúc Cơ chế thông báo của Events trong NodeJS đảm bảo rằng server vẫn nhận được phản hồi từ các API đã gọi trước đó mà không làm gián đoạn quá trình xử lý.
- 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
NodeJS sử dụng mô hình đơn luồng với vòng lặp sự kiện, cho phép máy chủ phản hồi không chặn (non-blocking) và mở rộng hiệu quả hơn Cơ chế này giúp nâng cao khả năng xử lý đồng thời, tạo điều kiện cho việc phát triển ứng dụng quy mô lớn.
NodeJS là một nền tảng đơn luồng cho phép xử lý nhiều yêu cầu đồng thời, vượt trội hơn so với các máy chủ truyền thống như Apache HTTP Server, vốn bị giới hạn bởi số lượng thread Điều này giúp NodeJS phục vụ một lượng lớn yêu cầu một cách hiệu quả hơn.
Các ứng dụng NodeJS không sử dụng bộ nhớ tạm (buffer) để lưu trữ dữ liệu, mà thay vào đó, chúng xuất dữ liệu theo từng khối một cách trực tiếp.
- 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
- Cần có kiến thức tốt về Javascript
NodeJS có những hạn chế khi được sử dụng để phát triển các ứng dụng nặng và tốn tài nguyên Do NodeJS được xây dựng trên nền tảng C++ và JavaScript, quá trình biên dịch thông qua NodeJS có thể mất thêm thời gian.
- 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
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 yêu cầu quá nhiều mã code sẵn"
Redux Toolkit không giải quyết mọi tình huống, nhưng giống như create-react-app, nó cung cấp các công cụ giúp đơn giản hóa quá trình thiết lập và xử lý các trường hợp sử dụng phổ biến, cùng với những tiện ích hữu ích để người dùng có thể tối ưu hóa mã ứng dụng của mình.
Bộ công cụ Redux Toolkit tích hợp khả năng tìm nạp và lưu trữ dữ liệu mạnh mẽ gọi là "Truy vấn RTK", được cung cấp như một tập hợp các điểm đầu vào riêng biệt Mặc dù tính năng này là tùy chọn, nhưng nó giúp loại bỏ nhu cầu viết tay logic tìm nạp dữ liệu.
Các công cụ này mang lại lợi ích cho mọi người dùng Redux, từ những người mới bắt đầu thiết lập dự án đầu tiên đến những người có kinh nghiệm muốn tối ưu hóa ứng dụng hiện tại Bộ công cụ Redux giúp cải thiện chất lượng mã Redux của bạn.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Phân tích yêu cầu
Người dùng có thể đăng ký tài khoản mới trên website bằng cách cung cấp Email và Password Sau khi điền đầy đủ thông tin, tài khoản sẽ được tạo thành công, cho phép người dùng đăng nhập vào trang web.
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
Chức năng này bao gồm các tính năng như xem danh sách phát, điều chỉnh âm lượng, phát bài hát tiếp theo hoặc trước đó, nghe nhạc ngẫu nhiên, lặp lại một bài hát và lặp lại toàn bộ danh sách phá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
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
Người dùng có thể thay đổi theme của website với một số mẫu theme có sẵn
Người dùng có thể xem lại lịch sử các bài hát đã nghe gần đây
Chức năng này chỉ dành cho người dùng đã đăng nhập, cho phép họ tạo mới một Playlist, đặt tên cho nó và thêm các bài hát vào Playlist đó.
- 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 đó
Để sử dụng chức năng Upload, người dùng cần đăng nhập vào website Chức năng này cho phép người dùng tải lên bài hát mới từ thiết bị của mình.
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
Để đảm bảo tính bảo mật, cần phải bảo vệ an toàn dữ liệu người dùng, ngăn chặn các cuộc tấn công từ bên ngoài, kiểm soát hoạt động của hệ thống và giảm thiểu tối đa các rủi ro.
14 rủi ro, rò rỉ thông tin như các chức năng xác thực người dùng (đăng nhập, đăng ký, quên mật khẩu)
- Yêu cầu về tính tiện dụng: Website dễ sử dụng, tiện lợi trong việc tìm kiếm và chia sẻ
- Yêu cầu về tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượng lớn dữ liệu, tránh xảy ra lỗi ngoại lệ
- Yêu cầu về tính tương thích: Website có thể chạy ổn định và tương thích với nhiều nền tảng trình duyệt khác nhau.
Sơ đồ use case
Bảng 3.1 Bảng danh sách Actor
STT Tên Actor Ý nghĩa/Ghi chú
1 Người dùng chưa đăng nhập Người dùng chưa đăng nhập vào website, có thể sử dụng một số chức năng chính như: Nghe nhạc, Tìm kiếm, Đăng ký,…
3.2.2 Sơ đồ use case tổng quát
Hình 3.1 Sơ đồ use case tổng quát
STT Tên use case Ý nghĩa
1 Tìm kiếm bài hát/nghệ sĩ Người dùng tìm kiếm bài hát/nghệ sĩ mong muốn
2 Nghe nhạc Người dùng nghe các bài hát trên website
3 Yêu thích bài hát Người dùng chọn yêu thích một bài hát để thêm bài hát đó vào thư viện
4 Đăng nhập Người dùng đăng nhập vào website
5 Đăng ký Người dùng đăng ký tài khoản mới để sử dụng website
6 Thay đổi theme Người dùng thay đổi theme của website
7 Đăng tải bài hát Người dùng đăng tải bài hát mới lên website
3.2.4.1 Đặc tả use case Đăng nhập
Hình 3.2 Sơ đồ use case Đăng nhập
Bảng 3.3 Đặc tả usecase Đăng nhập
Tên use case Đăng nhập Đối tượng tham gia Người dùng
Người dùng đăng nhập vào hệ thống để truy cập các chức năng như nghe nhạc, lưu bài hát yêu thích và tạo danh sách phát cá nhân.
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 kiểm tra thông tin đăng nhập:
+ Nếu thông tin đúng và hợp lệ, cho phép người dùng đăng nhập vào hệ thống
+ Nếu thông tin sai, thông báo đăng nhập không thành công và yêu cầu người dùng kiểm tra lại thông tin
Sự kiện kích hoạt Người dùng chọn đăng nhập
Mục tiêu Giúp người dùng đăng nhập được vào hệ thống
Tiền điều kiện - Người dùng phải có tài khoản
- Người dùng phải kết nối Internet
Hậu điều kiện Không có
Tần suất sử dụng Cao
3.2.4.2 Đặc tả use case Đăng ký
Hình 3.3 Sơ đồ use case Đăng ký
Bảng 3.4 Đặc tả usecase Đăng ký
Tên use case Đăng ký Đối tượng tham gia
Mô tả Cho phép người dùng đăng ký tài khoản mới để sử dụng một số chức năng đặc biệt
Luồng sự kiện 1 Người dùng điều hướng đến trang đăng ký
2 Hệ thống hiển thị form đăng ký cho người dùng gồm các thông tin: Email, mật khẩu
3 Người dùng nhập đầy đủ các thông tin đăng ký
4 Hệ thống kiểm tra thông tin đăng ký:
+ Nếu hợp lệ, thôn báo tạo tài khoản thành công và cho người dùng tiến hành đăng nhập bằng tài khoản đã đăng ký
+ Nếu không, thông báo lỗi ra cho người dùng
Sự kiện kích hoạt Người dùng chọn đăng ký
Mục tiêu Giúp người dùng đăng ký tài khoản mới
Tiền điều kiện Người dùng phải kết nối Internet
Hậu điều kiện Không có
Tần suất sử dụng Cao
3.2.4.3 Đặc tả use case Nghe nhạc
Hình 3.3 Sơ đồ use case Nghe nhạc
Bảng 3.5 Đặc tả usecase Nghe nhạc
Tên use case Nghe nhạc Đối tượng tham gia Người dùng
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
Người dùng có thể lựa chọn bài hát muốn nghe bằng hai cách: Thứ nhất, họ có thể trực tiếp chọn bài hát từ danh sách được đề xuất trên trang chủ Thứ hai, người dùng cũng có thể nhập tên bài hát vào ô tìm kiếm trên thanh điều hướng để tìm kiếm bài hát mong muốn.
- 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 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
- Hệ thống sẽ lưu bài hát được yêu thích vào thư viện của người dùng
Sự kiện kích hoạt Người dùng tìm kiếm và chọn một bài hát
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 Người dùng phải đăng nhập
Hậu điều kiện Không có
Tần suất sử dụng Cao
3.2.4.4 Đặc tả use case Đăng tải bài hát
Hình 3.4 Sơ đồ use case Đăng tải bài hát
Bảng 3.6 Đặc tả usecase Đăng tải bài hát
Tên use case Đăng tải bài hát Đối tượng tham gia Người dùng đã đăng nhập
Mô tả Người dùng được quyền thêm bài hát vào hệ thông thông qua trang web
Luồng sự kiện 1 Người dùng đăng nhập vào hệ thống bằng tài khoản
2 Người dùng chọn chức năng thêm bài hát trong trang quản lý (Dashboard) sau đó hệ thống sẽ hiển thị biểu mẫu: a Nhập thông tin bài hát: Tên bài hát, Tên nghệ sĩ, Tên thế loại, Link Youtube (nếu có) b Đăng tải nhạc dưới dạng file mp3 c Đăng tải poster cho bài hát
3 Người dùng còn có thể xóa bài hát đã thêm thông qua chức năng xóa bài hát trong trang quản lý (Dashboard)
Sự kiện kích hoạt Người dùng chọn nút đăng tải bài hát
Mục tiêu Giúp người dùng đăng tải bài hát yêu thích lên hệ thống, tăng sự đa dạng về bài hát cho trang web
Tiền điều kiện - Người dùng phải có tài khoản
- Người dùng phải kết nối Internet
Hậu điều kiện Không có
Tần suất sử dụng Cao
3.2.4.5 Đặc tả use case Tạo danh sách phát nhạc
Hình 3.5 Sơ đồ use case Tạo danh sách phát nhạc
Bảng 3.7 Đặc tả usecase tạo danh sách phát nhạc
Tên use case Tạo danh sách phát nhạc Đối tượng tham gia Người dùng đã đăng nhập
Mô tả Người dùng có thể lưu các bài hát thành một danh sách phát
Luồng sự kiện 1 Người dùng nhấn nút tùy chọn trên bài hát
2 Hệ thống hiển thị danh sách các tính năng tùy chọn
3 Người dùng chọn vào nút “Thêm vào danh sách phát”
4 Người dùng chọn danh sách phát đã có hoặc thêm vào danh sách phát mới
- Nếu người dùng chọn thêm vào danh sách phát mới:
+ Hệ thống sẽ tự tạo một danh sách phát
+ Người dùng tự đặt tên cho danh sách phát đó hoặc hệ thống sẽ đặt tên tự động
+ Hệ thống sẽ lưu bài hát vào danh sách phát vừa được tạo
5 Người dùng sử dụng chức năng mong muốn đối với danh sách phát
- Xóa bài hát: hệ thống sẽ xóa bài hát ra khỏi danh sách phát
- Xóa danh sách phát: hệ thống xóa danh sách phát và tất cả bài hát có trong danh sách phát đó
Sự kiện kích hoạt Người dùng chọnbài hát và chọn nút thêm vào danh sách phát
Mục tiêu Giúp người dùng có thể tạo một danh sách các bài nhạc theo mong muốn
Tiền điều kiện Người dùng phải đăng nhập
Hậu điều kiện Không có
Tần suất sử dụng Trung bình
3.2.4.5 Đặc tả use case Đăng xuất
Bảng 3.8 Đặc tả usecase đăng xuất
Tên use case Đăng xuất Đối tượng tham gia Người dùng đã đăng nhập
Mô tả Người dùng đăng xuất khỏi hệ thống
Luồng sự kiện 1 Người dùng nhấn nút đăng xuất
2 Hệ thống hiển thị form cho người dùng xác nhận đăng xuất
- Nếu người dùng xác nhận thì tài khoản được đăng xuất khỏi hệ thống và quay trở về trang chủ
- Nếu người dùng không xác nhận thì đóng form và thực hiện các thao tác tiếp theo của người dùng
Sự kiện kích hoạt Người dùng chọn đăng xuất
Mục tiêu Giúp người dùng đăng xuất tài khoản khỏi hệ thống
Tiền điều kiện Người dùng phải đăng nhập vào hệ thống
Hậu điều kiện Không có
Tần suất sử dụng Thấp
Sơ đồ hoạt động
Bảng 3.9 Sơ đồ hoạt động
1 Sơ đồ hoạt động đăng ký tài khoản
2 Sơ đồ hoạt động đăng nhập
3 Sơ đồ hoạt động nghe nhạc
4 Sơ đồ hoạt động tạo playlist
5 Sơ đồ hoạt động thêm nhạc vào playlist
6 Sơ đồ hoạt động xem Top 100
7 Sơ đồ hoạt động xem chi tiết ca sĩ
8 Sơ đồ hoạt động xem thông tin bài hát
9 Sơ đồ hoạt động tìm kiếm bài hát
3.3.1 Danh sách các sơ đồ
3.3.2 Chi tiết các sơ đồ
3.3.2.1 Sơ đồ hoạt động Đăng ký tài khoản
Hình 3.6 Sơ đồ hoạt động Đăng ký tài khoản
3.3.2.2 Sơ đồ hoạt động Đăng nhập tài khoản
Hình 3.7 Sơ đồ hoạt động Đăng nhập tài khoản
3.3.2.3 Sơ đồ hoạt động Nghe nhạc
Hình 3.8 Sơ đồ hoạt động Nghe nhạc
3.3.2.4 Sơ đồ hoạt động Tạo playlist
Hình 3.9 Sơ đồ hoạt động Tạo playlist
3.3.2.5 Sơ đồ hoạt động Thêm bài hát vào playlist
Hình 3.10 Sơ đồ hoạt động Thêm bài hát vào playlist
3.3.2.6 Sơ đồ hoạt động Xem Top 100
Hình 3.11 Sơ đồ hoạt động Xem Top 100
3.3.2.7 Sơ đồ hoạt động Xem thông tin nghệ sĩ
Hình 3.12 Sơ đồ hoạt động Xem thông tin nghệ sĩ
3.3.2.8 Sơ đồ hoạt động Xem thông tin bài hát
Hình 3.13 Sơ đồ hoạt động Xem thông tin bài hát
3.3.2.9 Sơ đồ hoạt động Tìm kiếm
Hình 3.14 Sơ đồ hoạt động Tìm kiếm
Thiết kế dữ liệu
3.3.1 Sơ đồ thiết kế dữ liệu
Hình 3.15 Sơ đồ thiết kế dữ liệu
3.3.2 Danh sách các bảng dữ liệu
Bảng 3.9 Danh sách các bảng dữ liệu
1 account Lưu trữ danh sách tài khoản người dùng
2 music Lưu trữ danh sách các bài hát
3 list_music Lưu trữ playlist các bài hát
4 array_music Lưu trữ mảng các bài h
5 play_history Lưu trữ danh sách các bài hát đã nghe gần đây
6 favorite Lưu trữ danh sách các bài hát đã yêu thích
Bảng 3.10 Chi tiết bảng “account”
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectId Bắt buộc duy nhất
2 user_name String Bắt buộc Tên người dùng
3 email String Bắt buộc duy nhất
4 image String Bắt buộc Ảnh đại diện của người dùng
5 password String Bắt buộc Mật khẩu của người dùng
Bảng 3.11 Chi tiết bảng “music”
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectID Bắt buộc duy nhất
2 music_name String Bắt buộc Tên bài hát
3 singer_name String Bắt buộc Tên ca sĩ
4 src_music String Bắt buộc Link nhạc
5 link_mv String Bắt buộc Link video ca nhạc
6 image String Bắt buộc Hình ảnh của bài hát
7 duration Number Bắt buộc Thời lượng bài hát
8 view Number Bắt buộc Lượt xem/nghe
9 favorite Number Bắt buộc Lượt yêu thích
10 account_favorite Array Bắt buộc Tài khoản đã thêm vào yêu thích
Bảng 3.12 Chi tiết bảng “list_music”
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectId Bắt buộc duy nhất Mã playlist
2 id_account String Bắt buộc Mã tài khoản
3 name_list String Bắt buộc Tên playlist
4 image_list String Bắt buộc Hình ảnh của playlist
5 array_music Object Bắt buộc Danh sách bài hát
Bảng 3.13 Chi tiết bảng “array_music”
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectId Bắt buộc duy nhất Mã mảng bài hát
2 id_account String Bắt buộc Mã tài khoản
3 id_music String Bắt buộc Mã bài hát
4 music Object Bắt buộc Bài hát
5 id_list String Bắt buộc Mã danh sách phát
Bảng 3.14 Chi tiết bảng “play_history”
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectId Bắt buộc duy nhất Mã lịch sử phát
2 id_account String Bắt buộc Mã tài khoản
3 id_music String Bắt buộc Mã bài hát
4 music Object Bắt buộc Bài hát
Bảng 3.15 Chi tiết bảng “favortie”
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectId Bắt buộc duy nhất Mã bài hát yêu thích
2 id_account String Bắt buộc Mã tài khoản
3 id_music String Bắt buộc Mã bài hát
4 music Object Bắt buộc Bài hát
XÂY DỰNG ỨNG DỤNG
Danh sách màn hình
Bảng 4.16 Danh sách các màn hình chính
STT Tên màn hình Ý nghĩa/Ghi chú
1 Trang chủ Hiển thị màn hình chính của website để người dùng sử dụng
2 Cá nhân Hiển thị danh sách nghệ sĩ và bài hát yêu thích của người dùng
3 Top100 Hiển thị danh sách 100 bài hát hot nhất hiện tại
4 Album Hiển thị các bài hát trong album
5 Nghệ sĩ Hiển thị thông tin và các bài hát nổi bật của nghệ sĩ
6 Thay đổi theme Cho phép người dùng chọn theme mới cho website
7 Nhạc mới Hiển thị danh sách các bài hát mới ra mắt
8 Đăng nhập Cho phép người dùng đăng nhập vào website bằng tài khoản đã đăng ký
9 Đăng ký Cho phép người dùng đăng ký tài khoản mới để sử dụng website
10 Bài hát đã nghe Hiển thị danh sách các bài hát người dùng đã nghe
11 Đã tải lên Hiển thị danh sách các bài hát mà người dùng đã tải lên
Chi tiết màn hình
Hình 4.1 Màn hình “Trang chủ”
Màn hình “Trang chủ” có thể chia thành 4 thành phần chính: Sidebar, Header, Player bar và phần nội dung
Sidebar được cố định bên trái website, hiển thị logo và các nút điều hướng đến các trang như Cá Nhân, Khám Phá, Radio, Nhạc Mới và Top 100 Người dùng có thể dễ dàng chuyển đến trang tương ứng bằng cách nhấn vào nút.
- Header được cố định ở phía trên cùng của website, chứa thanh tìm kiếm, các nút
Người dùng có thể thay đổi theme, cài đặt và ảnh đại diện trên website Nếu chưa đăng nhập, nút “Đăng nhập” sẽ hiển thị Khi nhấn vào nút “Cài đặt”, người dùng có thể chọn các tùy chọn như “Giới thiệu”, “Liên hệ” và “Thỏa thuận sử dụng” Bằng cách nhấn vào ảnh đại diện, hai tùy chọn sẽ xuất hiện: “Tải lên” để upload bài hát và “Đăng xuất” để rời khỏi tài khoản.
- Player bar được cố định ở phía dưới cùng của website, chứa thông tin bài hát đang được chọn phát (Tên bài hát, ca sĩ)
Nội dung bao gồm một slider giới thiệu xu hướng âm nhạc hiện tại, cùng với các danh mục chính như Trending, Nghệ sĩ thịnh hành và Album Cuối trang, có mục đối tác âm nhạc và các tùy chọn điều hướng đến thông tin trên website.
Hình 4.2 Màn hình “Cá nhân”
Màn hình "Cá nhân" cung cấp danh sách các bài hát mà người dùng đã yêu thích, kèm theo thông tin về các nghệ sĩ thể hiện những bài hát này.
- Màn hình “Top 100” hiển thị danh sách 100 bài hát hot nhất dựa trên lượt yêu thích bài hát
- Người dùng có thể nhấn vào nút có biểu tượng Play để phát toàn bộ bài hát hoặc chọn phát một bài hát bất kì trong danh sách
Màn hình "Album" cung cấp thông tin chi tiết về album, bao gồm hình ảnh, tên album, thời điểm cập nhật, số lượng yêu thích và danh sách các bài hát có trong album.
- Người dùng có thể nhấn vào một bài hát để phát bài hát đó hoặc nhấn vào nút
“Phát ngẫu nhiên” để phát toàn bộ bài hát trong album theo thứ tự ngẫu nhiên
Hình 4.5 Màn hình “Nghệ sĩ”
Màn hình “Nghệ sĩ” cung cấp thông tin cơ bản về nghệ sĩ, bao gồm tên, hình ảnh, số lượng người theo dõi và các bài hát nổi bật của họ.
- Người dùng có thể nhấn vào nút có biểu tượng Play để phát tất cả bài hát của nghệ sĩ hoặc chọn phát một bài hát bất kì
Người dùng có thể nhấn vào “Tất cả” để xem toàn bộ danh sách bài hát của nghệ sĩ khi số lượng bài hát quá nhiều và không hiển thị hết trên màn hình.
4.2.6 Màn hình “Thay đổi theme”
Hình 4.6 Màn hình “Thay đổi theme”
- Màn hình “Thay đổi theme” hiển thị một số mẫu theme có sẵn mà người dùng có thể áp dụng cho website
- Khi người dùng trỏ chuột vào một mẫu theme bất kì sẽ xuất hiện 2 tùy chọn là
Người dùng có thể chọn "Áp dụng" để ngay lập tức áp dụng mẫu theme cho website, hoặc chọn "Xem trước" để xem thử giao diện của mẫu theme đó trước khi quyết định.
Hình 4.7 Màn hình “Đăng nhập”
Trên màn hình “Đăng nhập”, người dùng chỉ cần nhập Email và Password vào các ô tương ứng, sau đó nhấn nút “Đăng Nhập” để truy cập vào website, và sẽ được chuyển hướng đến màn hình “Trang chủ”.
Nếu bạn chưa có tài khoản để đăng nhập, hãy nhấn vào “Đăng Kí” để được chuyển đến màn hình “Đăng kí” và tạo tài khoản mới.
Hình 4.8 Màn hình “Đăng kí”
- Ở màn hình “Đăng kí”, người dùng có thể nhấn vào “Đăng Nhập” để quay về màn hình “Đăng nhập”
Người dùng cần nhập Username, mật khẩu, xác nhận mật khẩu và Email vào các ô tương ứng trước khi nhấn nút “Đăng Kí” để tạo tài khoản mới Sau khi hoàn tất việc tạo tài khoản, người dùng sẽ được chuyển đến màn hình “Đăng nhập” để sử dụng tài khoản vừa tạo và thực hiện bước đăng nhập vào website.
Hình 4.9 Màn hình “Tìm kiếm”
Khi người dùng nhập thông tin tìm kiếm như tên nghệ sĩ hoặc tên bài hát vào ô tìm kiếm, ô này sẽ mở rộng và hiển thị thông tin liên quan đến bài hát cùng với tên nghệ sĩ sở hữu nó.
Tại giao diện kết quả tìm kiếm, người dùng có thể phát bài hát đã tìm thấy hoặc chọn một nghệ sĩ để xem thông tin chi tiết về nghệ sĩ đó.
Hình 4.10 Màn hình “Nhạc mới”
- Màn hình “Nhạc mới” hiển thị danh sách các bài hát vừa được phát hành gần đây
- Người dùng có thể nhấn vào nút có biểu tượng Play để phát toàn bộ bài hát hoặc chọn phát một bài hát bất kì trong danh sách.