Giới thiệu Đề tài
Đề bài: Ứng dụng web phát nhạc / streaming nhạc (Music Streaming Web App).
Xây dựng một hệ thống nghe nhạc trực tuyến cho phép người dùng thực hiện các chức năng cốt lõi như tìm kiếm, phát nhạc, tạo playlist, theo dõi nghệ sĩ, và quản lý thư viện cá nhân. Dự án này bao gồm việc thiết kế hệ thống từ sơ đồ use case, CSDL cho đến việc tạo một prototype giao diện người dùng và mô phỏng hoạt động.
1. Sơ đồ Use Case
Sơ đồ Use Case mô tả các tương tác giữa các tác nhân (Actors) và hệ thống, bao gồm các chức năng chính dành cho người dùng và quản trị viên.
1.1. Use Case - User (Người dùng)
Mô tả chi tiết các Use Case:
📝 1. Đăng ký tài khoản (Register Account)
Brief Description: Người dùng mới tạo tài khoản để sử dụng các tính năng cá nhân hóa của hệ thống.
Pre-condition: Người dùng chưa có tài khoản và chưa đăng nhập.
Post-condition: Tài khoản mới được tạo thành công, người dùng có thể đăng nhập.
Basic Flow:
- Người dùng chọn chức năng "Đăng ký tài khoản".
- Hệ thống yêu cầu nhập thông tin cá nhân và thông tin đăng nhập.
- Người dùng nhập đầy đủ và chính xác.
- Hệ thống xác nhận và tạo tài khoản.
Alternate Flow:
- Thông tin không hợp lệ: Hệ thống báo lỗi và yêu cầu nhập lại.
- Email đã tồn tại: Hệ thống báo lỗi và yêu cầu sử dụng email khác.
Relationships:
<<include>>Đăng nhập hệ thống: Sau khi đăng ký thành công, người dùng thường được chuyển đến màn hình đăng nhập.<<include>>Đăng tài khoản mạng xã hội: Cho phép người dùng đăng ký nhanh chóng bằng tài khoản mạng xã hội.
🔐 2. Đăng nhập hệ thống (Login System)
Brief Description: Người dùng đã có tài khoản truy cập vào hệ thống để sử dụng các tính năng.
Pre-condition: Người dùng đã có tài khoản hợp lệ.
Post-condition: Người dùng đăng nhập thành công và có quyền truy cập vào các tính năng cá nhân.
Basic Flow:
- Người dùng chọn chức năng "Đăng nhập".
- Hệ thống yêu cầu nhập tên người dùng/email và mật khẩu.
- Người dùng nhập thông tin và xác nhận.
- Hệ thống xác thực thông tin và cấp quyền truy cập.
Alternate Flow:
- Sai thông tin: Hệ thống báo lỗi và yêu cầu nhập lại.
- Tài khoản bị khóa: Hệ thống thông báo tài khoản bị khóa và hướng dẫn liên hệ hỗ trợ.
🎵 3. Phát nhạc (Play Music)
Brief Description: Người dùng nghe một bài hát đã chọn từ danh sách, album, hoặc playlist.
Pre-condition: Một bài hát đã được chọn.
Post-condition: Bài hát đang được phát trên trình phát nhạc.
Basic Flow:
- Người dùng chọn một bài hát để phát.
- Hệ thống tải dữ liệu bài hát và bắt đầu phát.
Alternate Flow:
- Lỗi không phát được: Hệ thống báo lỗi nếu tệp bài hát không tồn tại hoặc có lỗi.
Relationships:
<<include>>Phát/Tạm dừng nhạc<<include>>Chuyển bài hát<<include>>Phát nhạc ngẫu nhiên<<include>>Lặp lại bài hát
🔍 4. Search and Discovery (Tìm kiếm & Khám phá)
Brief Description: Người dùng tìm kiếm nội dung (bài hát, nghệ sĩ,...) hoặc khám phá các nội dung được đề xuất.
Pre-condition: Không có.
Post-condition: Danh sách kết quả tìm kiếm hoặc các đề xuất được hiển thị.
Basic Flow:
- Người dùng nhập từ khóa tìm kiếm hoặc truy cập trang khám phá.
- Hệ thống truy vấn cơ sở dữ liệu và hiển thị kết quả.
Alternate Flow:
- Không có kết quả: Hệ thống hiển thị thông báo "Không tìm thấy kết quả nào phù hợp".
Relationships:
<<include>>Tìm kiếm theo sở thích<<include>>Khám phá các đề xuất
📚 5. Quản lý thư viện cá nhân (Manage Personal Library)
Brief Description: Người dùng quản lý các nội dung cá nhân như playlist, bài hát yêu thích, và danh sách nghệ sĩ/album theo dõi.
Pre-condition: Người dùng đã đăng nhập.
Post-condition: Thư viện cá nhân được cập nhật.
Basic Flow:
- Người dùng truy cập thư viện cá nhân.
- Người dùng chọn một chức năng quản lý.
- Hệ thống thực hiện tác vụ được yêu cầu.
Alternate Flow:
- Thêm bài hát đã tồn tại vào playlist: Hệ thống hiển thị thông báo lỗi và không thêm bài hát.
Relationships:
<<include>>Tạo Playlist<<include>>Thêm/Xóa Bài hát khỏi Playlist<<include>>Sửa/Xóa Playlist<<include>>Chia sẻ Playlist<<include>>Yêu thích bài hát<<include>>Theo dõi nghệ sĩ/album
📊 Tóm tắt Use Cases - User
- Đăng ký & Đăng nhập: Quản lý tài khoản người dùng
- Phát nhạc: Các chức năng điều khiển trình phát cơ bản
- Tìm kiếm & Khám phá: Khám phá nội dung mới và tìm kiếm
- Quản lý thư viện: Tạo và quản lý playlist, yêu thích bài hát, theo dõi nghệ sĩ
- Các chức năng khác: Xem lịch sử nghe nhạc, nhận thông báo, xem lời bài hát, báo cáo bài hát
1.2. Use Case - Admin (Quản trị viên)
Mô tả chi tiết các Use Case:
👥 1. Quản lý người dùng (Manage User)
Brief Description: Admin có thể thực hiện các thao tác quản lý liên quan đến tài khoản người dùng, bao gồm xem thông tin, thêm/xóa tài khoản và phân quyền.
Pre-condition: Admin đã đăng nhập thành công vào hệ thống.
Post-condition: Thông tin người dùng được cập nhật, tài khoản được thêm/xóa hoặc quyền được thay đổi.
Basic Flow:
- Admin truy cập trang "Quản lý người dùng".
- Hệ thống hiển thị danh sách người dùng.
- Admin chọn một hành động:
- Thêm tài khoản quản trị: Hệ thống hiển thị form, Admin nhập thông tin và xác nhận.
- Xóa tài khoản: Admin chọn tài khoản và xác nhận xóa.
- Xem thông tin người dùng: Hệ thống hiển thị chi tiết thông tin.
- Sửa thông tin người dùng: Admin cập nhật thông tin và xác nhận.
Alternate Flow:
- Xóa không thành công: Hệ thống hiển thị thông báo lỗi nếu tài khoản không tồn tại hoặc có ràng buộc dữ liệu.
- Thông tin không hợp lệ: Hệ thống báo lỗi nếu Admin nhập sai định dạng khi thêm tài khoản.
Relationships:
<<include>>Thêm tài khoản quản trị<<include>>Xóa tài khoản<<include>>Xem thông tin người dùng<<include>>Sửa thông tin người dùng
📁 2. Quản lý tệp tin (Manage File)
Brief Description: Admin quản lý các tệp tin và đường dẫn liên quan đến nội dung âm nhạc.
Pre-condition: Admin đã đăng nhập thành công.
Post-condition: Tệp demo được tải lên hoặc đường dẫn được cập nhật.
Basic Flow:
- Admin truy cập trang "Quản lý tệp tin".
- Hệ thống cung cấp các tùy chọn:
- Tải lên các tệp demo: Admin chọn tệp từ máy tính và tải lên.
- Quản lý đường dẫn: Admin nhập hoặc sửa đường dẫn streaming cho bài hát.
Alternate Flow:
- Lỗi tải tệp: Hệ thống hiển thị thông báo lỗi nếu tệp không đúng định dạng hoặc vượt quá kích thước cho phép.
- Đường dẫn không hợp lệ: Hệ thống cảnh báo nếu đường dẫn streaming không đúng định dạng.
Relationships:
<<include>>Tải lên các tệp demo<<include>>Quản lý đường dẫn
🎤 3. Quản lý nghệ sĩ (Manage Artist)
Brief Description: Admin thực hiện các thao tác thêm, sửa, xóa và xem thông tin nghệ sĩ.
Pre-condition: Admin đã đăng nhập thành công.
Post-condition: Thông tin nghệ sĩ được cập nhật trong cơ sở dữ liệu.
Basic Flow:
- Admin truy cập trang "Quản lý nghệ sĩ".
- Hệ thống hiển thị danh sách nghệ sĩ.
- Admin chọn một hành động: Thêm nghệ sĩ, Xóa nghệ sĩ, Sửa thông tin nghệ sĩ, Xem thông tin nghệ sĩ.
- Hệ thống thực hiện hành động và cập nhật dữ liệu.
Alternate Flow:
- Xóa nghệ sĩ có bài hát/album: Hệ thống yêu cầu xác nhận trước khi xóa để tránh mất dữ liệu liên quan hoặc từ chối xóa nếu có ràng buộc.
- Thông tin trùng lặp: Hệ thống báo lỗi nếu tên nghệ sĩ đã tồn tại.
Relationships:
<<include>>Thêm nghệ sĩ<<include>>Xóa nghệ sĩ<<include>>Sửa thông tin nghệ sĩ<<include>>Xem thông tin nghệ sĩ
💿 4. Quản lý album (Manage Album)
Brief Description: Admin quản lý thông tin của các album, bao gồm thêm, sửa, xóa và xem chi tiết.
Pre-condition: Admin đã đăng nhập thành công.
Post-condition: Thông tin album được cập nhật trong hệ thống.
Basic Flow:
- Admin truy cập trang "Quản lý album".
- Hệ thống hiển thị danh sách album.
- Admin thực hiện các thao tác: Thêm album, Xóa album, Sửa thông tin album, Xem thông tin album.
- Hệ thống xử lý yêu cầu và cập nhật dữ liệu.
Alternate Flow:
- Xóa album có chứa bài hát: Hệ thống yêu cầu xác nhận hoặc yêu cầu xóa các bài hát trước.
- Thông tin không đầy đủ: Hệ thống báo lỗi nếu thiếu thông tin bắt buộc khi thêm/sửa album.
Relationships:
<<include>>Thêm album<<include>>Xóa album<<include>>Sửa thông tin album<<include>>Xem thông tin album
🎵 5. Quản lý bài hát (Manage Track)
Brief Description: Admin quản lý thông tin của các bài hát, bao gồm metadata, tệp audio và các thuộc tính liên quan.
Pre-condition: Admin đã đăng nhập thành công.
Post-condition: Thông tin bài hát được cập nhật trong cơ sở dữ liệu.
Basic Flow:
- Admin truy cập trang "Quản lý bài hát".
- Hệ thống hiển thị danh sách bài hát.
- Admin thực hiện các thao tác: Thêm bài hát, Xóa bài hát, Sửa thông tin bài hát, Xem thông tin bài hát.
- Hệ thống xử lý và lưu thay đổi.
Alternate Flow:
- Xóa bài hát có trong playlist người dùng: Hệ thống cảnh báo và yêu cầu xác nhận.
- Tệp audio không hợp lệ: Hệ thống báo lỗi nếu định dạng hoặc chất lượng audio không đạt yêu cầu.
Relationships:
<<include>>Thêm bài hát<<include>>Xóa bài hát<<include>>Sửa thông tin bài hát<<include>>Xem thông tin bài hát
🎼 6. Quản lý thể loại (Manage Genre)
Brief Description: Admin quản lý các thể loại nhạc trong hệ thống.
Pre-condition: Admin đã đăng nhập thành công.
Post-condition: Thể loại nhạc được thêm, sửa hoặc xóa trong hệ thống.
Basic Flow:
- Admin truy cập trang "Quản lý thể loại".
- Hệ thống hiển thị danh sách thể loại.
- Admin thực hiện các thao tác: Thêm thể loại, Xóa thể loại, Sửa thông tin thể loại.
- Hệ thống cập nhật danh sách thể loại.
Alternate Flow:
- Xóa thể loại có bài hát: Hệ thống từ chối xóa hoặc yêu cầu gán lại thể loại cho các bài hát.
- Thể loại trùng lặp: Hệ thống báo lỗi nếu tên thể loại đã tồn tại.
Relationships:
<<include>>Thêm thể loại<<include>>Xóa thể loại<<include>>Sửa thông tin thể loại
📊 7. Giám sát hệ thống (Monitor System)
Brief Description: Admin giám sát hoạt động của hệ thống, bao gồm cả log đăng nhập và các hoạt động quan trọng khác.
Pre-condition: Admin đã đăng nhập thành công.
Post-condition: Không có thay đổi trên hệ thống, chỉ có hành động xem và phân tích dữ liệu.
Basic Flow:
- Admin truy cập trang "Giám sát hệ thống".
- Hệ thống hiển thị các log hoạt động:
- Log đăng nhập của người dùng và admin
- Hoạt động thêm/xóa/sửa dữ liệu
- Thống kê truy cập và lưu lượng
- Cảnh báo lỗi hệ thống
- Admin xem và phân tích thông tin.
Alternate Flow:
- Lọc log theo tiêu chí: Admin có thể lọc log theo ngày, loại hoạt động, người dùng.
- Xuất báo cáo: Admin có thể xuất log ra file để lưu trữ hoặc phân tích.
Relationships:
<<include>>Log đăng nhập
💾 8. Quản lý cơ sở dữ liệu (Manage Database)
Brief Description: Admin thực hiện các tác vụ quản lý cơ sở dữ liệu như sao lưu và phục hồi dữ liệu, đảm bảo tính toàn vẹn và khả năng phục hồi của hệ thống.
Pre-condition: Admin đã đăng nhập thành công và có quyền truy cập vào chức năng này.
Post-condition: Cơ sở dữ liệu được sao lưu hoặc phục hồi thành công.
Basic Flow:
- Admin truy cập trang "Quản lý cơ sở dữ liệu".
- Admin chọn tác vụ:
- Sao lưu dữ liệu: Hệ thống tạo bản sao lưu toàn bộ cơ sở dữ liệu và lưu vào vị trí đã cấu hình.
- Phục hồi dữ liệu: Admin chọn bản sao lưu và hệ thống khôi phục dữ liệu từ bản sao đó.
- Hệ thống thực hiện tác vụ được yêu cầu.
- Hệ thống thông báo kết quả (thành công hoặc thất bại).
Alternate Flow:
- Phục hồi không thành công: Hệ thống báo lỗi nếu tệp sao lưu bị hỏng, không tương thích hoặc không tìm thấy.
- Không đủ dung lượng: Hệ thống báo lỗi nếu không đủ dung lượng để tạo bản sao lưu.
- Sao lưu tự động: Hệ thống có thể được cấu hình để tự động sao lưu theo lịch.
Relationships:
<<include>>Sao lưu dữ liệu<<include>>Phục hồi dữ liệu
📊 Tóm tắt Use Cases - Admin
- Quản lý người dùng: Thêm, xóa, sửa, xem thông tin tài khoản và phân quyền
- Quản lý nội dung: Quản lý bài hát, nghệ sĩ, album và thể loại
- Quản lý tệp tin: Tải lên tệp demo, quản lý đường dẫn streaming
- Giám sát hệ thống: Theo dõi log đăng nhập và hoạt động của hệ thống
- Quản lý CSDL: Sao lưu và phục hồi dữ liệu để đảm bảo tính toàn vẹn
🔒 Lưu ý bảo mật
- Phân quyền: Các chức năng admin chỉ dành cho người dùng có quyền quản trị
- Log audit: Mọi thao tác của admin đều được ghi log để kiểm tra
- Xác thực 2 lớp: Các thao tác quan trọng (xóa, phục hồi DB) cần xác nhận thêm
- Backup: Tự động sao lưu định kỳ để phòng tránh mất dữ liệu
1.3. Use Case - Audio CDN/Player (Hệ thống bên ngoài)
Mô tả chi tiết các Use Case:
🎧 1. Cung cấp luồng phát nhạc (Provide Music Stream)
Brief Description: Actor này cung cấp luồng dữ liệu âm thanh cho ứng dụng web để phát nhạc. Luồng dữ liệu được truyền tải theo các giao thức streaming như HLS hoặc DASH.
Pre-condition:
- Hệ thống ứng dụng web đã gửi yêu cầu phát nhạc.
- Tệp âm thanh của bài hát tồn tại trên máy chủ CDN.
Post-condition:
- Luồng dữ liệu âm thanh được gửi về ứng dụng web.
Basic Flow:
- Ứng dụng web nhận yêu cầu phát nhạc từ người dùng.
- Ứng dụng web gửi yêu cầu tới Audio CDN để lấy luồng dữ liệu của bài hát.
- Audio CDN phản hồi bằng cách gửi luồng dữ liệu về cho trình phát nhạc.
Alternate Flow:
- Lỗi không tìm thấy tệp: Audio CDN trả về lỗi nếu tệp âm thanh không tồn tại hoặc đường dẫn không hợp lệ.
⚙️ 2. Xử lý trình phát (Handle Player)
Brief Description: Actor này xử lý các chức năng cốt lõi của trình phát nhạc, bao gồm tải dữ liệu và thực hiện các lệnh điều khiển từ người dùng.
Pre-condition:
- Một bài hát đã được chọn để phát.
- Tệp âm thanh từ CDN đã sẵn sàng để tải về.
Post-condition:
- Trình phát đã tải và phát bài hát thành công.
Basic Flow:
- Người dùng yêu cầu phát nhạc.
- Hệ thống gửi yêu cầu đến trình phát (Player).
- Trình phát thực hiện hai luồng chức năng:
<<extend>>Tải từ CDN: Tải luồng dữ liệu âm thanh từ Audio CDN.<<extend>>Xử lý các lệnh điều khiển: Thực hiện các lệnh như phát, tạm dừng, tua... do người dùng gửi đến.
- Bài hát bắt đầu phát trên trình phát.
Alternate Flow:
- Lỗi kết nối: Trình phát không thể tải dữ liệu từ CDN, hiển thị thông báo lỗi.
📊 Tóm tắt Use Cases - Audio CDN/Player
- Cung cấp luồng phát nhạc: Truyền tải dữ liệu âm thanh từ CDN đến ứng dụng web qua các giao thức streaming (HLS/DASH)
- Xử lý trình phát: Quản lý việc tải dữ liệu từ CDN và thực thi các lệnh điều khiển phát nhạc
- Các chức năng mở rộng: Tải từ CDN, Xử lý các lệnh điều khiển (Play, Pause, Skip, Shuffle, Repeat)
- Xử lý lỗi: Thông báo khi tệp không tồn tại hoặc lỗi kết nối
💡 Lưu ý kỹ thuật
- Giao thức streaming: HLS (HTTP Live Streaming) hoặc DASH (Dynamic Adaptive Streaming over HTTP)
- Buffering: Tự động tải trước dữ liệu để đảm bảo phát nhạc mượt mà
- Adaptive Bitrate: Điều chỉnh chất lượng âm thanh dựa trên băng thông mạng
- Caching: Lưu cache các bài hát đã phát để giảm tải cho CDN
Tóm tắt các Actor chính:
👤 User (Người dùng):
Người dùng cuối của ứng dụng - có thể nghe nhạc, tìm kiếm, tạo playlist, theo dõi nghệ sĩ, quản lý thư viện cá nhân.
🛡️ Admin (Quản trị viên):
Quản trị viên hệ thống - quản lý toàn bộ nội dung (bài hát, nghệ sĩ, album, thể loại), người dùng, và giám sát hệ thống.
🎵 Audio CDN/Player (Hệ thống ngoài):
Hệ thống bên ngoài cung cấp và xử lý luồng phát nhạc, tải từ CDN và điều khiển trình phát.
2. Sơ đồ Tuần tự (Sequence Diagram)
Sơ đồ tuần tự mô tả chi tiết các tương tác giữa các đối tượng trong hệ thống theo thời gian, cho thấy thứ tự các thông điệp được trao đổi giữa các thành phần. Dưới đây là 4 kịch bản chính của ứng dụng.
2.1. Kịch bản: Ghi lại lịch sử phát nhạc (Record Play History)
📝 Mô tả:
Kịch bản này mô tả quá trình ghi lại lịch sử nghe nhạc của người dùng. Hệ thống tự động theo dõi thời gian phát và chỉ ghi nhận vào lịch sử khi bài hát được phát trên 30 giây hoặc người dùng chuyển bài.
🔄 Luồng hoạt động:
- User → Player: Người dùng nhấn phát bài hát
- Player: Thời gian bắt đầu được ghi nhận (Time starts ticking)
- Player (loop): Vòng lặp kiểm tra thời gian phát (check currentTime)
- Điều kiện dừng: currentTime >= 30s HOẶC User nhấn next
- Player → WebApp: Gửi thông tin scrobble(trackId, position, device)
- WebApp → PlayHistoryService: Gọi record(userId, trackId, position, device)
- PlayHistoryService → DB: Lưu bản ghi lịch sử phát
- DB → PlayHistoryService: Trả về kết quả thành công
- PlayHistoryService → WebApp: Xác nhận thành công
- Note: Không có phản hồi trực tiếp cho User, quá trình chạy nền
💡 Điểm đặc biệt:
- Ngưỡng 30 giây: Đảm bảo chỉ ghi nhận khi người dùng thực sự nghe nhạc
- Chạy nền: Không làm gián đoạn trải nghiệm người dùng
- Ghi nhận vị trí: Lưu thời điểm tại vị trí nào người dùng ngừng nghe
- Theo dõi thiết bị: Biết được người dùng nghe từ thiết bị nào
2.2. Kịch bản: Theo dõi nghệ sĩ (Follow Artist)
📝 Mô tả:
Kịch bản này mô tả quá trình người dùng theo dõi một nghệ sĩ. Hệ thống kiểm tra trạng thái theo dõi hiện tại và thực hiện hành động phù hợp (follow hoặc thông báo đã follow).
🔄 Luồng hoạt động:
- User → WebApp: Nhấn nút "Theo dõi nghệ sĩ" - followArtist(artistId)
- WebApp → FollowService: Gửi yêu cầu follow(userId, artistId)
- FollowService → DB: Kiểm tra xem đã theo dõi chưa - check if already following
- DB → FollowService: Trả về kết quả kiểm tra
- Alt [Not following yet]: Nếu chưa theo dõi:
- FollowService → DB: Tạo bản ghi mới - create new follow record(userId, artistId, timestamp)
- DB → FollowService: Xác nhận thành công
- FollowService → WebApp: return success
- WebApp → User: Hiển thị "Đã theo dõi!"
- Alt [Already following]: Nếu đã theo dõi rồi:
- FollowService → WebApp: return error: "Bạn đã theo dõi nghệ sĩ này."
- WebApp → User: Hiển thị thông báo "Bạn đã theo dõi nghệ sĩ này."
💡 Điểm đặc biệt:
- Kiểm tra trùng lặp: Ngăn chặn theo dõi một nghệ sĩ nhiều lần
- Timestamp: Ghi lại thời điểm bắt đầu theo dõi
- Phản hồi rõ ràng: Người dùng luôn biết trạng thái hành động của mình
- Alt frame: Xử lý 2 tình huống khác nhau một cách rõ ràng
2.3. Kịch bản: Thêm bài hát vào Playlist
📝 Mô tả:
Kịch bản này mô tả quá trình thêm một bài hát vào playlist. Hệ thống kiểm tra xem bài hát đã tồn tại trong playlist chưa, nếu chưa thì thêm vào và cập nhật thứ tự sắp xếp (sortOrder).
🔄 Luồng hoạt động:
- User → WebApp: Chọn thêm bài hát vào playlist - addTrack(playlistId, trackId)
- WebApp → PlaylistService: Gửi yêu cầu thêm - addTrack(playlistId, trackId)
- PlaylistService → TrackService: Kiểm tra bài hát có tồn tại trong playlist không - kiểm tra trùng(playlistId, trackId)
- TrackService → DB: Truy vấn database để kiểm tra
- DB → TrackService: Trả về kết quả
- TrackService → PlaylistService: Nếu chưa tồn tại, tiếp tục
- PlaylistService → TrackService: Cập nhật sortOrder (thứ tự sắp xếp)
- TrackService → DB: Lưu bản ghi mới với sortOrder
- DB → TrackService: Xác nhận thành công - return success
- TrackService → PlaylistService: return success
- PlaylistService → WebApp: return success
- WebApp → User: Hiển thị thông báo thành công và cập nhật giao diện
💡 Điểm đặc biệt:
- Kiểm tra trùng lặp: Đảm bảo mỗi bài hát chỉ xuất hiện 1 lần trong playlist
- SortOrder: Quản lý thứ tự các bài hát trong playlist
- Tách service: PlaylistService và TrackService làm việc độc lập, dễ bảo trì
- Transaction: Các bước kiểm tra và thêm được thực hiện tuần tự
⚠️ Trường hợp ngoại lệ:
- Bài hát đã tồn tại: Hệ thống hiển thị thông báo "Bài hát đã có trong playlist" và không thêm
- Playlist không tồn tại: Trả về lỗi "Playlist không tìm thấy"
- Track không tồn tại: Trả về lỗi "Bài hát không tồn tại"
2.4. Kịch bản: Phát một bài hát (Play Track)
📝 Mô tả:
Kịch bản này mô tả toàn bộ quy trình phát nhạc từ khi người dùng chọn bài hát cho đến khi nhạc được phát. Bao gồm việc lấy metadata, khởi tạo stream từ CDN, và bắt đầu phát nhạc.
🔄 Luồng hoạt động:
- User → WebApp: Chọn bài hát để phát - selectTrack(trackId)
- WebApp → Player: Yêu cầu lấy thông tin bài hát - getTrackMeta(trackId)
- Player → TrackService: Truy vấn metadata và URL audio
- TrackService → Player: Trả về metadata và AudioURL
- Player → WebApp: Gửi lại metadata và AudioURL để hiển thị
- WebApp → Player: Khởi tạo stream - initStream(AudioURL)
- Player → TrackService: Yêu cầu audio stream từ CDN
- TrackService → AudioCDN: Request audio stream với AudioURL
- AudioCDN → TrackService: Cung cấp audio stream
- TrackService → Player: Stream được truyền về Player
- Player: Bắt đầu phát nhạc - play() (self-call)
- Player → WebApp: Liên tục gửi thông tin vị trí phát - scrobble(trackId, position)
- WebApp → User: Cập nhật giao diện trình phát (progress bar, time, ...)
💡 Điểm đặc biệt:
- Metadata riêng biệt: Lấy thông tin bài hát trước khi tải audio
- Streaming: Audio được stream từ CDN, không tải toàn bộ file
- Scrobble liên tục: Cập nhật vị trí phát theo thời gian thực
- Tách layer: Player, TrackService, và AudioCDN làm việc độc lập
- Self-call play(): Player tự quản lý việc phát nhạc
🎵 Các thành phần tham gia:
- User: Người dùng cuối
- WebApp: Giao diện web, xử lý tương tác người dùng
- Player: Trình phát nhạc (HTML5 Audio hoặc Web Audio API)
- TrackService: Backend service quản lý thông tin bài hát
- AudioCDN: CDN cung cấp file audio (external system)
⚠️ Trường hợp ngoại lệ:
- Track không tồn tại: TrackService trả về lỗi 404
- Audio không tải được: AudioCDN timeout hoặc lỗi mạng
- Format không hỗ trợ: Browser không hỗ trợ codec audio
- Quyền truy cập: User không có quyền nghe bài hát (premium only)
📊 Tóm tắt các Sequence Diagram
🎵 Phát nhạc (Play Track)
Quy trình phức tạp nhất, liên quan đến nhiều thành phần: Player, TrackService, AudioCDN. Bao gồm cả việc streaming và cập nhật realtime.
📝 Ghi lịch sử (Record History)
Chạy nền, không gián đoạn UX. Chỉ ghi nhận khi phát >= 30s. Quan trọng cho tính năng thống kê và đề xuất.
👤 Theo dõi nghệ sĩ (Follow Artist)
Minh họa rõ ràng việc xử lý điều kiện (Alt frame). Kiểm tra trùng lặp và phản hồi phù hợp với từng tình huống.
➕ Thêm vào Playlist
Thể hiện sự phối hợp giữa PlaylistService và TrackService. Quản lý sortOrder để sắp xếp bài hát.
💻 Lưu ý kỹ thuật chung
Kiến trúc:
- Client-Server architecture
- Service-oriented design
- Separation of concerns
- RESTful API communication
Công nghệ:
- WebSocket cho realtime updates
- CDN cho audio streaming
- Database transactions
- Async/await patterns
Best Practices:
- Validation ở nhiều layer
- Error handling đầy đủ
- Logging và monitoring
- Optimistic UI updates
Performance:
- Caching metadata
- Lazy loading audio
- Database indexing
- CDN cho static assets
3. Sơ đồ Thực thể–Kết hợp (Entity-Relationship Diagram)
Sơ đồ ER thể hiện các thực thể chính trong hệ thống, các thuộc tính của chúng và mối quan hệ giữa các thực thể. Đây là bước quan trọng trong việc thiết kế cơ sở dữ liệu logic trước khi chuyển sang thiết kế vật lý.
📌 Ký hiệu trong sơ đồ ER
Khóa & Ràng buộc:
- PK (Primary Key): Khóa chính 🔑
- FK (Foreign Key): Khóa ngoại
- UQ (Unique): Ràng buộc duy nhất
Quan hệ (Cardinality):
- 1-1: Một-đến-một
- 1-N: Một-đến-nhiều
- N-N: Nhiều-đến-nhiều
🗂️ Phân tích chi tiết các thực thể
👤 1. User (Người dùng)
Khóa & Ràng buộc:
- PK:
UserID🔑 - Định danh duy nhất cho mỗi người dùng - UQ:
Email- Mỗi email chỉ được đăng ký một lần
Thuộc tính:
Username,Password,EmailFullName,DateOfBirth,GenderRole(User/Admin),CreatedAt
Quan hệ:
- → Playlist: 1-N (Một người dùng có thể tạo nhiều playlist)
- → Track: N-N qua
Like(Thích nhiều bài hát) - → Artist: N-N qua
Follow(Theo dõi nhiều nghệ sĩ) - → PlayHistory: 1-N (Có nhiều lịch sử phát nhạc)
🎤 2. Artist (Nghệ sĩ)
Khóa:
- PK:
ArtistID🔑
Thuộc tính:
Name,Bio,ImageURLCountry,DebutYear
Quan hệ:
- → Album: 1-N (Một nghệ sĩ có thể có nhiều album)
- → User: N-N qua
Follow(Được nhiều người theo dõi)
💿 3. Album
Khóa:
- PK:
AlbumID🔑 - FK:
ArtistID(Tham chiếu đếnArtist.ArtistID)
Thuộc tính:
Title,ReleaseDate,CoverImageURLTotalTracks,Type(Album/Single/EP)
Quan hệ:
- → Artist: N-1 (Mỗi album thuộc về một nghệ sĩ)
- → Track: 1-N (Một album chứa nhiều bài hát)
🎵 4. Track (Bài hát)
Khóa:
- PK:
TrackID🔑 - FK:
AlbumID(Nullable - bài hát có thể là single không thuộc album nào) - FK:
GenreID(Tham chiếu đếnGenre.GenreID)
Thuộc tính:
Title,Duration,AudioURLLyrics,ReleaseDate,PlayCountTrackNumber(số thứ tự trong album)
Quan hệ:
- → Album: N-1 (Tùy chọn - có thể thuộc hoặc không thuộc album)
- → Genre: N-1 (Mỗi bài hát thuộc một thể loại)
- → User: N-N qua
Like(Được nhiều người thích) - → Playlist: N-N qua
PlaylistTrack(Nằm trong nhiều playlist) - → PlayHistory: 1-N (Có nhiều lượt nghe)
🎼 5. Genre (Thể loại)
Khóa & Ràng buộc:
- PK:
GenreID🔑 - UQ:
Name- Tên thể loại là duy nhất
Thuộc tính:
Name(Pop, Rock, Jazz, Hip-Hop, ...)Description
Quan hệ:
- → Track: 1-N (Một thể loại có nhiều bài hát)
📚 6. Playlist
Khóa:
- PK:
PlaylistID🔑 - FK:
OwnerUserID(Tham chiếu đếnUser.UserID)
Thuộc tính:
Name,Description,CoverImageURLIsPublic(công khai hay riêng tư)CreatedAt,UpdatedAt
Quan hệ:
- → User: N-1 (Mỗi playlist thuộc về một người dùng)
- → Track: N-N qua
PlaylistTrack(Chứa nhiều bài hát)
🔗 7. PlaylistTrack (Bảng trung gian)
Khóa:
- PK: (
PlaylistID,TrackID) 🔑 - Khóa chính phức hợp - FK:
PlaylistID→Playlist.PlaylistID - FK:
TrackID→Track.TrackID
Thuộc tính:
SortOrder- Thứ tự bài hát trong playlistAddedAt- Thời điểm thêm vào playlist
Mục đích:
Phá vỡ mối quan hệ N-N giữa Playlist và Track. Đảm bảo một bài hát chỉ xuất hiện một lần trong mỗi playlist.
❤️ 8. Like (Bảng trung gian)
Khóa:
- PK: (
UserID,TrackID) 🔑 - Khóa chính phức hợp - FK:
UserID→User.UserID - FK:
TrackID→Track.TrackID
Thuộc tính:
LikedAt- Thời điểm thích bài hát
Mục đích:
Phá vỡ mối quan hệ N-N giữa User và Track. Đảm bảo một người dùng chỉ "like" một bài hát một lần.
👥 9. Follow (Bảng trung gian)
Khóa:
- PK: (
UserID,ArtistID) 🔑 - Khóa chính phức hợp - FK:
UserID→User.UserID - FK:
ArtistID→Artist.ArtistID
Thuộc tính:
FollowedAt- Thời điểm bắt đầu theo dõi
Mục đích:
Phá vỡ mối quan hệ N-N giữa User và Artist. Đảm bảo một người dùng chỉ "follow" một nghệ sĩ một lần.
📊 10. PlayHistory (Lịch sử phát nhạc)
Khóa:
- PK:
HistoryID🔑 - FK:
UserID→User.UserID - FK:
TrackID→Track.TrackID
Thuộc tính:
PlayedAt- Thời điểm phát nhạcDuration- Thời lượng nghe (để xác định nghe >= 30s)Device- Thiết bị sử dụng (Web, Mobile, Desktop)Position- Vị trí dừng lại khi ngừng nghe
Quan hệ:
- → User: N-1 (Mỗi lịch sử thuộc về một người dùng)
- → Track: N-1 (Mỗi lịch sử tương ứng với một bài hát)
🔗 Tóm tắt các mối quan hệ chính
| Thực thể 1 | Quan hệ | Thực thể 2 | Ghi chú |
|---|---|---|---|
| User | 1 - N | Playlist | Một user tạo nhiều playlist |
| User | N - N | Track | Qua bảng Like |
| User | N - N | Artist | Qua bảng Follow |
| Artist | 1 - N | Album | Một nghệ sĩ có nhiều album |
| Album | 1 - N | Track | Một album chứa nhiều bài hát |
| Genre | 1 - N | Track | Một thể loại có nhiều bài hát |
| Playlist | N - N | Track | Qua bảng PlaylistTrack |
| User | 1 - N | PlayHistory | Một user có nhiều lịch sử |
| Track | 1 - N | PlayHistory | Một track có nhiều lượt nghe |
💡 Lưu ý thiết kế quan trọng
1. Bảng trung gian (Junction Tables):
Các bảng PlaylistTrack, Like, và Follow được sử dụng để phá vỡ mối quan hệ N-N, giúp chuẩn hóa dữ liệu và tránh trùng lặp.
2. Khóa chính phức hợp:
Các bảng trung gian sử dụng khóa chính phức hợp để đảm bảo không có bản ghi trùng lặp (ví dụ: một user chỉ like một track một lần).
3. Nullable Foreign Key:
Track.AlbumID có thể NULL vì một bài hát có thể là single không thuộc album nào.
4. Timestamp fields:
Hầu hết các bảng có các trường timestamp (CreatedAt, UpdatedAt, PlayedAt, ...) để theo dõi lịch sử thay đổi.
5. Quy tắc nghiệp vụ:
- Lịch sử chỉ được ghi nhận khi người dùng nghe bài hát đủ 30 giây
- Email phải là duy nhất trong hệ thống
- Tên thể loại (Genre) phải là duy nhất
- Mỗi bài hát chỉ xuất hiện một lần trong một playlist
4. Sơ đồ Cơ sở dữ liệu (ERD)
Sơ đồ ERD là thiết kế logic/vật lý của cơ sở dữ liệu, chuyển đổi từ sơ đồ ER sang các bảng cụ thể với kiểu dữ liệu, khóa chính, khóa ngoại và các ràng buộc.
📚 Tài liệu chi tiết Database Schema
Chi tiết đầy đủ về cấu trúc bảng, kiểu dữ liệu, và ràng buộc được trình bày trong tài liệu riêng.
Xem chi tiết Database Schema →📋 Tóm tắt
5. Thiết kế Giao diện (Prototype)
Giao diện người dùng được thiết kế dựa trên wireframe và mockup, tập trung vào trải nghiệm người dùng (UX/UI). Prototype được tạo trên Figma và triển khai thành bản HTML/CSS/JS tĩnh để demo.
🎨 Design System
Bảng màu (Color Palette)
#1DB954
Primary Green
#121212
Background
#181818
Surface
#282828
Card
#b3b3b3
Text Secondary
📝 Typography
Font Family
Inter, -apple-system, system-ui
Heading 1
32px / Bold / Line-height: 1.2
Heading 2
24px / Bold / Line-height: 1.3
Body Text
16px / Regular / Line-height: 1.5
Small Text
14px / Regular / Line-height: 1.4
🧩 UI Components
Buttons
Card Component
Playlist Name
By Artist Name
📏 Spacing & Grid
📱 Các màn hình chính
.png)
Home Screen
A. Màn hình Home/Discover
Hiển thị các playlist đề xuất, bài hát trending, và albums mới phát hành.
.png)
Lịch sử phát nhạc
B. Player Mini & Trang chi tiết bài hát
Trình phát nhạc với điều khiển đầy đủ, hiển thị thông tin bài hát và lyrics.
.png)
Search Screen
C. Màn hình Tìm kiếm
Tìm kiếm bài hát, nghệ sĩ, album với bộ lọc và gợi ý tự động.
.png)
Playlist Detail
D. Màn hình chi tiết Playlist
Hiển thị danh sách bài hát trong playlist với các tùy chọn quản lý.
.png)
Trang admin
E. Trang admin
Khung CRUD cơ bản.
.png)
Library Screen
F. Thư viện cá nhân
Tất cả playlists, bài hát yêu thích và nghệ sĩ theo dõi.
🔄 User Flow chính
1 Luồng nghe nhạc cơ bản
2 Tạo và quản lý Playlist
3 Tìm kiếm nội dung
✨ Nguyên tắc Thiết kế UX/UI
🎯 User-Centered Design
- Ưu tiên trải nghiệm người dùng
- Navigation đơn giản và trực quan
- Feedback rõ ràng cho mọi hành động
⚡ Performance First
- Lazy loading cho images
- Smooth animations (60fps)
- Optimize cho mobile devices
♿ Accessibility
- WCAG 2.1 Level AA compliance
- Keyboard navigation support
- Screen reader friendly
📱 Responsive Design
- Mobile-first approach
- Breakpoints: 320px, 768px, 1024px, 1440px
- Touch-friendly interface
6. Kịch bản Kiểm thử (Test Cases)
Các kịch bản kiểm thử được thiết kế để xác minh tất cả các quy tắc nghiệp vụ và chức năng của hệ thống. Test cases bao gồm các luồng cơ bản, luồng thay thế và các trường hợp biên.
📋 Tổng quan Test Cases
🎯 Quy tắc Nghiệp vụ Cốt lõi
Unique Playlist Constraint
Một bài hát chỉ có thể xuất hiện một lần trong mỗi playlist
30-Second History Threshold
Lịch sử chỉ được ghi nhận khi nghe >= 30 giây HOẶC nhấn next sau >= 30 giây
Like Toggle System
Không thể like trùng lặp, chỉ toggle giữa like/unlike
Vietnamese Search (Diacritics)
Tìm kiếm hoạt động với hoặc không có dấu thanh tiếng Việt
Drag-Drop Ordering
Thứ tự playlist có thể được sắp xếp lại bằng drag-drop
Data Persistence
Tất cả thay đổi được lưu vào LocalStorage
📝 Chi tiết Test Cases theo Nhóm
1 Unique Playlist Constraint Testing
TC-001: Add Duplicate Track to Playlist
NegativeObjective: Verify that the system prevents adding the same track twice to a playlist
Steps: Navigate to playlist → Click "Add Track" → Select Track ID "1" (already in playlist) → Click "Add"
Expected: ❌ Error notification: "Track already exists in this playlist" (Red, 3s duration)
Result: Track is NOT added, playlist count unchanged
TC-002: Add Different Tracks to Playlist
PositiveObjective: Verify that different tracks can be added successfully
Steps: Add Track ID "2" → Add Track ID "3" → Verify playlist updates
Expected: ✅ Success notification for each: "Track added to playlist" (Green)
Result: Both tracks appear, playlist count increases by 2
2 Like/Unlike Testing (3 test cases)
TC-003: Like Track for First Time
PositiveObjective: Verify that user can like a track successfully
Steps: Find track → Click heart icon → Verify state change
Expected: ✅ Heart icon fills with color, success message appears
Result: Track added to "Liked Songs", count increases
📊 Các nhóm Test Cases khác
🎵 Listening History Testing
TC-006 đến TC-009: Kiểm tra quy tắc 30 giây
🔍 Search Functionality
TC-010 đến TC-013: Tìm kiếm có/không dấu
🎨 Drag & Drop Testing
TC-014 đến TC-017: Sắp xếp playlist
💾 Data Persistence
TC-018 đến TC-022: LocalStorage sync
🛠️ Công cụ & Phương pháp Kiểm thử
Manual Testing
Kiểm thử thủ công trên Chrome DevTools
Automated Testing
Jest + Testing Library (dự kiến)
Cross-browser Testing
Chrome, Firefox, Safari, Edge
7. Demo Mô phỏng (Interactive Prototype)
Phần demo mô phỏng giúp người dùng trải nghiệm các tính năng chính của ứng dụng thông qua giao diện tương tác. Dưới đây là các demo chức năng được xây dựng.
🎯 Tính năng Demo
Phát nhạc
Play, pause, next, previous với audio player đầy đủ
Quản lý Playlist
Tạo mới, chỉnh sửa, xóa và sắp xếp playlist
Tìm kiếm
Tìm kiếm bài hát, nghệ sĩ, album theo thời gian thực
Yêu thích
Like/Unlike bài hát, lưu vào thư viện
Lịch sử
Theo dõi lịch sử nghe nhạc (quy tắc 30s)
Lưu trữ
LocalStorage - dữ liệu được lưu tự động
📸 Hướng dẫn sử dụng Demo
Khám phá Trang chủ (Home)
Xem các playlist đề xuất, bài hát mới phát hành và các nghệ sĩ nổi bật. Click vào bất kỳ bài hát nào để phát nhạc.
Tìm kiếm Nội dung
Sử dụng thanh tìm kiếm ở đầu trang hoặc chuyển đến tab Search. Thử tìm với/không dấu để test tính năng tìm kiếm tiếng Việt.
Tạo & Quản lý Playlist
Vào thư viện (Library), nhấn "Create Playlist". Thêm bài hát bằng cách kéo thả (drag-drop) hoặc click nút "Add to Playlist".
Kiểm tra Test Cases
Thử thêm bài hát trùng vào playlist (TC-001), nghe nhạc dưới/trên 30s (TC-006-009), và các test case khác từ phần 6.
Kiểm tra Responsive
Thay đổi kích thước trình duyệt hoặc mở DevTools (F12) → Device Toolbar (Ctrl+Shift+M) để test trên mobile/tablet.
⚙️ Thông tin Kỹ thuật Demo
🛠️ Công nghệ sử dụng
- HTML5 + CSS3 (Flexbox, Grid)
- Vanilla JavaScript (ES6+)
- Web Audio API (cho audio player)
- LocalStorage API (lưu trữ data)
- Drag & Drop API (sắp xếp playlist)
📊 Data & Assets
- Sample tracks: 20+ bài hát demo
- Mock data: JSON format
- Images: Optimized (WebP/PNG)
- Audio files: MP3 (trong folder "Seed âm thanh")
🎥 Video Demo Hướng dẫn
Xem video hướng dẫn chi tiết về cách sử dụng ứng dụng và các tính năng chính:
📺 Video tham khảo về các tính năng và cách sử dụng tương tự
8. Tài nguyên & Liên kết
📁 Tài nguyên Dự án
🔗 Liên kết Ngoài
💻 Tech Stack & Tools
👤 Thông tin Sinh viên
Họ và tên: Phùng Anh Lực
MSSV: N23DCPT033
Lớp: D23CQPTUD01-N
Học kỳ: 2025-2026
Môn học: Nhập môn Công nghệ Phần mềm
Loại báo cáo: Đồ án Giữa kỳ
© 2025 Music Streaming App Project - All Rights Reserved