Hiện nay, trong khi đời sống con người đang ngày càng được nâng cao cùng với sự phát triển mạnh mẽ của internet, công nghệ thông tin thì nhu cầu giải trí của người dùng trên các thiết bị di động ngày càng tăng cao. Vì thế cho nên việc xây dựng ứng dụng giải trí trên các thiết bị di động sẽ mang lại nhiều lợi ích cho người dùng, ví dụ như: tiện lợi và dễ sử dụng, tăng cường trải nghiệm cá nhân hoá,… Với mục đích đi sâu tìm hiểu về thực tế xây dựng một ứng dụng di động giải trí, em đã đăng ký đề tài nghiên cứu “Xây dựng ứng dụng nghe nhạc”. Em đã tìm hiểu, nghiên cứu cùng với sự giúp đỡ của thầy Nguyễn Trọng Phúc, em đã hoàn thành bản báo cáo này. Bài báo cáo được thực hiện trong thời gian 4 tháng (từ 1/2 đến 1/6). Trong nghiên cứu này em tập trung tìm hiểu về các công nghệ xây dựng, tìm hiểu, phân tích, thiết kế và xây dựng cơ sở dữ liệu phục vụ nghiệp vụ cần có. Tuy nhiên, do đây là lần đầu tiên tiếp xúc với việc tìm hiểu công việc thực tế và hạn chế về nhận thức nên không thể tránh khỏi những thiếu sót trong quá trình tìm hiểu và xây dựng ứng nên rất mong được sự đóng góp của các thầy, cô giáo để bài báo cáo của em được hoàn thiện hơn! Nội dung của đề tài sẽ gồm 3 chương: Chương 1: Giới thiệu Trong chương này em sẽ bình bày về sự phát triển của ứng dụng di động tại Việt Nam , đưa ra mục tiêu, nhiệm vụ, nội dung và giới hạn phạm vi của đề tài. Chương 2: Công nghệ sử dụng Ở chương này em sẽ trình bày tất cả nội dung về các công nghệ đã sử dụng để xây dựng ứng dụng. Chương 3: Phân tích thiết kế Ở chương này em tập trung chủ yếu vào thiết kế hệ thống, đặc tả các chức năng chính, đưa ra biểu đồ usecase và đặc tả từng chức năng cụ thể, phân tích chức năng chính. phân tích thiết kế CSDL, đăc tả các thực thể, nêu bộ khóa duy nhất của các thực thể, nêu các quan hệ, các ràng buộc.10 Chương 4: Kết quả Trong chương này em xin trình bày môi trường cài đặt cần thiết để ứng dụng hoạt động. Tiếp theo là đến các hình ảnh các kết quả ứng dụng mà em đã xây dựng với từng các module cụ thể. Kết luận Cuối cùng em xin kết luận những kết quả đạt được, những hạn chế và hướng phát triển của đề tài.
GIỚI THIỆU
Sự phát triển của ứng dụng di động tại Việt Nam hiện nay
Sự phát triển về ứng dụng di động tại Việt Nam đã đạt được những bước tiến đáng kể trong những năm gần đây Dưới đây là một số điểm nổi bật về sự phát triển này:
- Tăng trưởng người dùng: Số lượng người dùng điện thoại di động tại Việt Nam đã tăng đáng kể Theo dữ liệu thống kê, Việt Nam có hơn 70 triệu người dùng smartphone, chiếm tỷ lệ cao trong dân số Điều này tạo điều kiện thuận lợi cho sự phát triển của ứng dụng di động, vì có một thị trường tiềm năng lớn
- Ứng dụng di động đa ngành: Sự phát triển của ứng dụng di động không chỉ tập trung vào một lĩnh vực duy nhất Có sự đa dạng về ngành nghề và lĩnh vực sử dụng ứng dụng, từ ứng dụng mạng xã hội, giao thông, mua sắm, ngân hàng, y tế, giáo dục đến giải trí và nhiều lĩnh vực khác Điều này phản ánh sự phát triển đa chiều của ứng dụng di động tại Việt Nam
- Tính đổi mới công nghệ: Sự phát triển của công nghệ di động và các nền tảng phát triển ứng dụng như Android và iOS đã tạo điều kiện thuận lợi cho các nhà phát triển ứng dụng tại Việt Nam Việt Nam có nhiều nhà phát triển và công ty công nghệ đang chú trọng nghiên cứu và phát triển ứng dụng di động, ứng dụng công nghệ mới như trí tuệ nhân tạo (AI), thực tế ảo (VR) và thực tế tăng cường (AR), Internet of Things (IoT) và blockchain
- Sự tăng trưởng của công ty khởi nghiệp công nghệ: Việt Nam đã chứng kiến sự phát triển mạnh mẽ của các công ty khởi nghiệp công nghệ trong lĩnh vực ứng dụng di động Các công ty nhỏ và trung bình đang tạo ra các ứng dụng đột phá và tiên phong trong nhiều lĩnh vực khác nhau, đồng thời thu hút sự đầu tư từ các nhà đầu tư trong và ngoài nước
- Sự tăng cường cơ sở hạ tầng: Mạng di động và cơ sở hạ tầng viễn thông tại Việt Nam đang được nâng cấp và mở rộng Sự phát triển này giúp tăng tốc độ và khả năng tiếp cận internet, tạo điều kiện thuận lợi cho người dùng và ứng dụng di động
12 Tổng quan, sự phát triển về ứng dụng di động tại Việt Nam đã đạt được những bước tiến đáng kể, với sự đa dạng ngành nghề, tính đổi mới công nghệ và tăng trưởng của các công ty khởi nghiệp công nghệ Việt Nam có tiềm năng để trở thành một trung tâm phát triển ứng dụng di động đáng chú ý trong khu vực.
Mục tiêu, nhiệm vụ của đề tài
- Ứng dụng đáp ứng nhu cầu của người dùng (giao diện đẹp, bố cục hợp lý, có đầy đủ chức năng người dùng mong muốn, thuận tiện, dễ dàng sử dụng, …) Ngoài ra còn có website quản trị để quản lý ứng dụng
- Đề tài đảm bảo các chức năng cơ bản:
▪ Quản lý bài hát: xem, thêm, sửa, xoá
▪ Quản lý thể loại nhạc: xem, thêm, sửa, xoá
▪ Quản lý album, playlist: xem, thêm, sửa, xoá
▪ Quản lý người dùng: xem, sửa
▪ Đăng ký, đăng nhập, quản lý tài khoản thông tin cá nhân
▪ Quản lý thư viện cá nhân
Nhiệm vụ: Tìm hiểu các công nghệ liên quan, khảo sát nghiệp vụ của đề tài để xây dựng hệ thống.
Nội dung và phạm vi của đề tài
Nội dung: Đề tài này tập trung nghiên cứu xây dựng một ứng dụng nghe nhạc Ứng dụng cho phép người dùng truy cập vào kho nhạc cá nhân, quản lý các danh sách nhạc, album và ca sĩ yêu thích Ứng dụng cũng thường xuyên giới thiệu thêm những ca khúc, album ở trang chủ, tránh cảm giác nhàm chán cho người dùng Ngoài ra hệ thống còn cung cấp website quản trị để quản lý ứng dụng
Phạm vi: không có tải về để có thể nghe offline
CƠ SỞ LÝ THUYẾT
Microsoft NET Core
.NET Core là một nền tảng phát triển đa mục đích, mã nguồn mở được duy trì bởi Microsoft và cộng đồng NET trên GitHub Đó là nền tảng chéo (hỗ trợ Windows, macOS và Linux) và có thể được sử dụng để xây dựng các ứng dụng thiết bị, đám mây và IoT
Hình 2.1 Tổng quan về Net
2.1.2 Đặc điểm và thành phần
- Đặc điểm của NET Core:
+ Đa nền tảng: Chạy trên các hệ điều hành Windows, macOS và Linux
+ Nhất quán trên các kiến trúc: có thể chạy mã nguồn của bạn với cùng một hành vi trên nhiều kiến trúc hệ thống, bao gồm x64, x86 và ARM
+ Các công cụ dòng lệnh: Bao gồm các công cụ dòng lệnh dễ sử dụng, có thể được sử dụng để phát triển cục bộ và trong các tình huống tích hợp liên tục + Triển khai linh hoạt: có thể cài đặt song song (cài đặt toàn người dùng hoặc toàn hệ thống) Có thể được sử dụng với các container Docker
14 + Tương thích: NET Core tương thích với NET Framework, Xamarin và Mono, thông qua NET Standard
+ Nguồn mở: Nền tảng NET Core là nguồn mở, sử dụng giấy phép MIT và Apache 2 .NET Core là một dự án NET Foundation
+ Được hỗ trợ bởi Microsoft: NET Core được Microsoft hỗ trợ, theo Hỗ trợ NET Core
- Thành phần của NET Core:
+ NET Core runtime: cung cấp một hệ thống kiểu, tải lắp ráp, trình thu gom rác, interop gốc và các dịch vụ cơ bản khác Các thư viện khung NET Core cung cấp các kiểu dữ liệu nguyên thủy, các kiểu thành phần ứng dụng và các tiện ích cơ bản
+ ASP.NET Core runtime: cung cấp khung để xây dựng các ứng dụng kết nối internet , điện toán đám mây hiện đại, chẳng hạn như ứng dụng web, ứng dụng IoT và phụ trợ di động
+ NET Core SDK và trình biên dịch ngôn ngữ (Roslyn và F #) cho phép trải nghiệm nhà phát triển NET Core
+ Dotnet command, được sử dụng để khởi chạy các ứng dụng NET Core và các lệnh CLI Nó chọn thời gian chạy và lưu trữ thời gian chạy, cung cấp chính sách tải lắp ráp và khởi chạy các ứng dụng và công cụ.
Tổng quan về ASP.NET Core Web API
ASP.NET Core Web API là một framework phát triển ứng dụng web dựa trên nền tảng ASP.NET Core của Microsoft Nó cho phép bạn xây dựng các dịch vụ web RESTful đơn giản và mạnh mẽ, cung cấp các API để tương tác với các ứng dụng khác thông qua giao thức HTTP
Hình 2.2 Kiến trúc của ASP.NET Core Web Api
2.2.2 Một số khái niệm và tính năng chính của ASP.NET Core Web API:
- Routing: ASP.NET Core Web API cung cấp hệ thống routing mạnh mẽ để xác định các endpoint API và xử lý các yêu cầu từ client Bạn có thể xác định các tuyến đường (routes) dựa trên URL, phương thức HTTP, tham số và các ràng buộc khác
- Controllers: Controllers trong ASP.NET Core Web API chịu trách nhiệm xử lý yêu cầu từ client và trả về kết quả tương ứng Bạn có thể xây dựng các controller để định nghĩa các hành động (actions) tương ứng với các phương thức HTTP như GET, POST, PUT, DELETE
- Model Binding: ASP.NET Core Web API hỗ trợ model binding, cho phép ràng buộc dữ liệu từ yêu cầu HTTP vào các tham số của action trong controller Model binding giúp giảm thiểu việc xử lý dữ liệu đầu vào và giúp bạn truy cập dễ dàng vào các giá trị được gửi từ client
- Content Negotiation: ASP.NET Core Web API hỗ trợ content negotiation để trả về các kiểu dữ liệu khác nhau như JSON, XML, hoặc các kiểu phương tiện khác dựa trên yêu cầu từ client Điều này cho phép ứng dụng của bạn hỗ trợ đa dạng các loại định dạng dữ liệu
- Middleware: ASP.NET Core Web API sử dụng middleware để xử lý các yêu cầu và gửi trả kết quả Middleware có thể được sử dụng để thực hiện các chức năng như xác thực, ghi log, nén dữ liệu, hoặc các chức năng tùy chỉnh khác
- Dependency Injection: ASP.NET Core Web API tích hợp sẵn Dependency Injection (DI), giúp tách biệt logic ứng dụng và dễ dàng kiểm thử các phụ thuộc Bạn có thể đăng ký các dịch vụ và sử dụng chúng trong các controller hoặc các thành phần khác của ứng dụng
- Testting: ASP.NET Core Web API hỗ trợ việc kiểm thử dễ dàng Bạn có thể viết các unit test và integration test cho các action trong controller bằng cách sử dụng các framework như xUnit, NUnit, hoặc MSTest
ASP.NET Core Web API cung cấp một cách hiệu quả để xây dựng các dịch vụ web API mạnh mẽ và có khả năng mở rộng Nó được phát triển dựa trên nền tảng NET Core, cho phép triển khai ứng dụng trên nhiều nền tảng như Windows, Linux và macOS
Tổng quan về Flutter
Flutter là một framework mã nguồn mở phát triển bởi Google, được sử dụng để xây dựng các ứng dụng di động đa nền tảng Nó cho phép lập trình viên sử dụng một ngôn ngữ duy nhất (Dart) để tạo giao diện người dùng tương tác cho cả iOS và Android
Hình 2.3 Tổng quan về Flutter
Hình 2.4 Đặc điểm của Flutter
- Ngôn ngữ Dart: ASP.NET Core Web API sử dụng middleware để xử lý các yêu cầu và gửi trả kết quả Middleware có thể được sử dụng để thực hiện các chức năng như xác thực, ghi log, nén dữ liệu, hoặc các chức năng tùy chỉnh khác
- Giao diện người dùng tương tác: Flutter sử dụng một cấu trúc giao diện người dùng riêng gọi là "widgets" để xây dựng giao diện người dùng Widget là các thành phần độc lập có thể tương tác và tái sử dụng được Sự kết hợp của Dart và widgets giúp tạo ra các ứng dụng có giao diện nhanh, mượt và tương tác tốt
- Đa nền tảng: Với Flutter, bạn chỉ cần viết một lần và triển khai được trên nhiều nền tảng khác nhau, bao gồm cả iOS và Android Điều này giảm thiểu công sức và thời gian phát triển, giúp lập trình viên tiết kiệm được tài nguyên
- Tương thích cao: Flutter tương thích với các hệ điều hành hiện đại như iOS và Android
Nó cung cấp một tập hợp các widget và công cụ phát triển để xây dựng giao diện người dùng tương thích với các phiên bản hệ điều hành và các thiết bị khác nhau
- Cộng đồng và tài liệu phong phú: Flutter có một cộng đồng phát triển đông đảo, với rất nhiều tài liệu, thư viện và công cụ hỗ trợ Điều này giúp lập trình viên tìm hiểu và giải quyết các vấn đề phát triển một cách dễ dàng
Flutter đã nhận được sự chú ý và sự phát triển nhanh chóng từ cộng đồng phát triển ứng dụng di động Nó đã được sử dụng để xây dựng nhiều ứng dụng nổi tiếng và thành công trên cả iOS và Android.
Tổng quan về ReactJS
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook để xây dựng giao diện người dùng hiện đại cho ứng dụng web Nó cho phép các nhà phát triển xây dựng các thành phần UI động và tương tác một cách dễ dàng và hiệu quả
Hình 2.5 Tổng quan về ReactJS
- ReactJS sử dụng mô hình "Component-Based Architecture" (kiến trúc dựa trên thành phần) để phân chia giao diện người dùng thành các thành phần độc lập, có khả năng tái sử dụng và quản lý riêng biệt Các thành phần này được xây dựng bằng cách sử dụng JSX (JavaScript XML), một cú pháp mở rộng của JavaScript cho phép viết mã HTML tương tự như XML trong JavaScript
- ReactJS sử dụng Virtual DOM (DOM ảo) để cải thiện hiệu suất Thay vì thao tác trực tiếp với DOM, ReactJS tạo một bản sao ảo của DOM, gọi là Virtual DOM, và thực hiện các thay đổi trên bản sao này Sau đó, React so sánh Virtual DOM với DOM thực tế và
19 chỉ cập nhật những phần thay đổi thực sự lên DOM Quá trình này giúp giảm tải cho trình duyệt và cải thiện hiệu suất ứng dụng
- ReactJS cung cấp cách tiếp cận dễ dàng để quản lý trạng thái (state) của ứng dụng Với React, bạn có thể tạo ra các thành phần có trạng thái (stateful components) và quản lý các trạng thái này thông qua các phương thức như setState() Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện người dùng tương ứng mà không cần phải làm mới toàn bộ trang
- ReactJS cũng hỗ trợ việc tạo ra ứng dụng đa trang (single-page applications) thông qua React Router React Router cho phép bạn xác định các tuyến đường (routes) và điều hướng giữa các thành phần dựa trên URL
- ReactJS đã trở thành một trong những công nghệ phổ biến nhất cho phát triển giao diện người dùng trong cộng đồng phát triển web Nó được sử dụng rộng rãi trong việc xây dựng ứng dụng web đơn trang, ứng dụng di động thông qua React Native, và cả trong lĩnh vực phát triển desktop thông qua Electron
Material-UI là một thư viện UI cho ReactJS, được xây dựng dựa trên nguyên tắc thiết kế Material Design của Google Nó cung cấp các thành phần UI chuẩn, đẹp mắt và dễ sử dụng để xây dựng giao diện người dùng trong ứng dụng web Đặc điểm:
- Material-UI cung cấp nhiều thành phần UI phong phú như nút (button), hộp thoại (dialog), bảng (table), thanh trượt (slider), biểu đồ (chart), thanh điều hướng (navbar), các mẫu màu sắc và nhiều hơn nữa Tất cả các thành phần đều được thiết kế để tuân thủ theo hướng dẫn thiết kế Material Design, mang lại trải nghiệm người dùng thân thiện và trực quan
- Với Material-UI, bạn có thể tùy chỉnh giao diện người dùng theo ý muốn thông qua các thuộc tính và props của các thành phần Bạn có thể thay đổi màu sắc, kích thước, hình dạng và các thuộc tính khác của các thành phần để phù hợp với phong cách và yêu cầu của ứng dụng của mình
- Material-UI cũng hỗ trợ các tính năng như responsive design (thiết kế đáp ứng), RTL (Right-to-Left) và hỗ trợ cho việc tạo giao diện đa ngôn ngữ
- Một lợi thế lớn của Material-UI là cộng đồng lớn và sự hỗ trợ năng động từ cộng đồng phát triển Thư viện này được duy trì và cập nhật thường xuyên, và có nhiều tài liệu và ví dụ sẵn có để hỗ trợ việc sử dụng và tùy chỉnh
- Với sự kết hợp giữa ReactJS và Material-UI, bạn có thể nhanh chóng xây dựng các giao diện người dùng hiện đại và hấp dẫn trong ứng dụng web của mình mà không cần phải bận tâm về việc thiết kế UI từ đầu.
PHÂN TÍCH THIẾT KẾ
Các tác nhân và mô tả
Dưới đây là quá trình phân tích các tác nhân của hệ thống cùng các chức năng ứng với các tác nhân đó trong các quy trình nghiệp vụ
Các tác nhân của hệ thống được mô tả dưới bảng sau:
Bảng 3.1 Các tác nhân của hệ thống
STT Tên tác nhân Mô tả
1 Người dùng Người dùng có nhu cầu sử dụng ứng dụng để nghe nhạc Đăng ký, đăng nhập vào hệ thống để sử dụng đầy đủ chức năng
2 Quản trị viên Người quản lý hệ thống
3.1.2 Các chức năng liên quan đến tác nhân của hệ thống
+ Đăng ký, đăng nhập, đăng xuất
+ Xem bài hát, ca sĩ, thể loại, album, playlist
+ Yêu thích bài hát, ca sĩ, thể loại, album, playlist
+ Tìm kiếm theo từ khoá hoặc theo thể loại
+ Quản lý playlist cá nhân
+ Quản lý thư viện cá nhân
+ Quản lý danh sách hàng đợi
Xây dựng biểu đồ Usecase
3.2.1 Biểu đồ Usecase tổng quát
Hình 3.1 Biểu đồ Usecase tổng quát
Hình 3.2 Biểu đồ Usecase đăng ký
3.2.2.2 Mô tả Usecase Đăng ký
Bảng 3.2 Đặc tả ca sử dụng đăng ký
Usecase: Quản lý Đăng ký
Mục đích: Usecase cho phép người dùng đăng ký vào hệ thống
Mô tả: Người dùng đăng ký để có thể đăng nhập và bắt đầu sử dụng hệ thống
Tác nhân: Người dùng Điều kiện trước: Thiết bị có kết nối Internet
Luồng sự kiện chính (Basic flows)
1 Người dùng: chọn mục đăng ký
2 Hệ thống: hiển thị form đăng ký
3 Người dùng: nhập các thông tin cá nhân vào form và nhấn
4 Hệ thống: nếu thống tin hợp lệ thì thông báo đăng ký thành công và chuyển sang màn hình đăng nhập Nếu thông tin không hợp lệ thì hệ thống sẽ báo lỗi
Không Điều kiện sau: Nếu ca sử dụng thành công, người dùng sẽ được chuyển sang màn hình đăng nhập Nếu không thì người dùng vẫn ở màn hình đăng ký
Hình 3.3 Biểu đồ Usecase đăng nhập
3.2.3.2 Mô tả Usecase Đăng nhập
Bảng 3.3 Đặc tả ca sử dụng đăng nhập
Usecase: Quản lý Đăng nhập
Mục đích: Usecase cho phép người dùng đăng nhập vào hệ thống
Mô tả: Người dùng đăng nhập để bắt đầu sử dụng hệ thống
26 Điều kiện trước: Thiết bị có kết nối Internet
Luồng sự kiện chính (Basic flows)
1 Tác nhân: vào trang đăng nhập
2 Hệ thống: hiển thị giao diện đăng nhập
3 Tác nhân: nhập các thông tin đăng vào form và nhấn “Đăng nhập”
4 Hệ thống: kiểm tra thông tin đăng nhập, nếu thống tin hợp lệ thì thông báo đăng nhập thành công và chuyển sang màn hình chính Nếu thông tin không hợp lệ thì hệ thống sẽ báo lỗi
Không Điều kiện sau: Nếu ca sử dụng thành công, người dùng sẽ được chuyển sang màn hình chính Nếu không thì người dùng vẫn ở màn hình đăng nhập
3.2.4 Usecase Quản lý Playlist cá nhân
Hình 3.4 Biểu đồ Usecase quản lý playlist cá nhân
3.2.4.2 Mô tả Usecase Quản lý Playlist cá nhân
Bảng 3.4 Đặc tả ca sử dụng quản lý playlist cá nhân
Usecase: Quản lý Playlist cá nhân
Mục đích: Usecase cho phép người dùng quản lý các Playlist của cá nhân họ
Mô tả: Người dùng tạo playlist, đặt tên, thêm các bài hát mà họ muốn, hệ thống sẽ lưu lại playlist đó Họ có thể thêm, xoá bài hát ra khỏi playlist, xoá playlist, tạo thêm những playlist khác
Tác nhân: Người dùng Điều kiện trước: - Thiết bị có kết nối internet
- Người dùng đã đăng nhập vào hệ thống
Luồng sự kiện chính (Basic flows)
1 Người dùng: Chọn tạo playlist
2 Hệ thống: Trả ra cửa sổ đặt tên playlist
3 Người dùng: Đặt tên cho playlist và nhấn nút tạo
4 Hệ thống: Chuyển sang màn hình chi tiết playlist và cho phép người dùng thêm bài hát vào playlist
5 Người dùng: Người dùng có thể thêm và xoá bài hát trong playlist ở màn hình này
6 Người dùng: Nhấn nút sửa playlist
7 Hệ thống: Hiện ra cửa sổ chi tiết playlist và cho phép người dùng sửa thông tin
9 Hệ thống: kiểm tra thông tin đã nhập Nếu thành công, thông tin sẽ được cập nhật Nếu không thì báo lỗi
10 Người dùng: chọn “Xoá” playlist
11 Hệ thống: hiện thị cửa sổ thông báo
12 Người dùng: Người dùng chọn “Đồng ý”
13 Hệ thống: xoá dữ liệu trên hệ thống, đóng cửa sổ và làm mới dữ liệu
3a Người dùng: nhấn nút “huỷ”
4a Hệ thống: đóng cửa sổ
8a Người dùng: nhấn nút “huỷ”
9a Hệ thống: đóng cửa sổ
12a Người dùng: nhấn nút “huỷ”
13a Hệ thống: đóng cửa sổ Điều kiện sau: Nếu ca sử dụng thành công, dữ liệu về playlist sẽ thay đổi
Hình 3.5 Biểu đồ Usecase yêu thích
3.2.5.2 Mô tả Usecase Yêu thích
Bảng 3.5 Đặc tả ca sử dụng yêu thích
Mục đích: Usecase cho phép người dùng thêm bài hát, ca sĩ, album, playlist vào danh sách yêu thích Họ có thể thêm và xoá những thành phần trong đó
Mô tả: Khách hàng chọn yêu thích bài hát, ca sĩ, album, playlist Hệ thống sẽ lưu lại danh sách yêu thích đó Người dùng có thể sửa, xoá danh sách yêu thích
Tác nhân: Người dùng Điều kiện trước: - Thiết bị có kết nối với internet
- Người dùng đã đăng nhập trên hệ thống
Luồng sự kiện chính (Basic flows)
1 Người dùng: chọn bài hát, ca sĩ, album, playlist mà người dùng yêu thích
2 Hệ thống: thêm bài hát, ca sĩ, album, playlist vào danh sách yêu thích
3 Người dùng: xem danh sách yêu thích
4 Hệ thống: hiển thị tất cả bài hát, album, playlist người dùng đã yêu thích
5 Người dùng: tìm kiếm trong danh sách yêu thích bằng từ khoá
6 Hệ thống: kiểm tra từ khoá Nếu có dữ liệu sẽ làm mới danh sách yêu thích Nếu không có dữ liệu sẽ hiển thị không có dữ liệu
7 Người dùng: chọn xoá bài hát, ca sĩ, album, playlist ra khỏi danh sách
8 Hệ thống: hiển thị cửa sổ thông báo
10 Hệ thống: xoá dữ liệu trên hệ thống Đóng cửa sổ thông báo và làm mới dữ liệu
10a Hệ thống đóng cửa sổ thông báo Điều kiện sau: Nếu ca sử dụng thành công, dữ liệu về danh sách yêu thích sẽ thay đổi
Hình 3.6 Biểu đồ Usecase tìm kiếm
3.2.6.2 Mô tả Usecase Tìm kiếm
Bảng 3.6 Đặc tả ca sử dụng tìm kiếm
Mục đích: Usecase cho phép Người dùng tìm kiếm bài hát, ca sĩ, thể loại, album, playlist
Mô tả: Người dùng có thể tìm kiếm bài hát, ca sĩ, thể loại, album, playlist theo từ khoá
Tác nhân: Người dùng Điều kiện trước: - Thiết bị có kết nối internet
- Người dùng đã đăng nhập vào hệ thống
Luồng sự kiện 1 Người dùng: vào trang tìm kiếm
32 chính (Basic flows) 2 Hệ thống: hiện thị giao diện tìm kiếm
3 Người dùng: nhập từ khoá vào ô tìm kiếm
4 Hệ thống: kiểm tra dữ liệu Nếu có dữ liệu thì hiển thị ra kết quả tìm kiếm Nếu không có dữ liệu thì hiển thị không tìm thấy dữ liệu
5 Người dùng: bấm nút “xoá” lịch sử tìm kiếm
6 Hệ thống: xoá lịch sử tìm kiếm
Không Điều kiện sau: Nếu ca sử dụng thành công, người dùng có được kết quả mà mình cần tìm
3.2.7 Usecase Quản lý hàng đợi
Hình 3.7 Biểu đồ Usecase quản lý hàng đợi
3.2.7.2 Mô tả Usecase Quản lý hàng đợi
Bảng 3.7 Đặc tả ca sử dụng quản lý hàng đợi
Usecase: Quản lý hàng đợi
Mục đích: Usecase cho Người dùng quản lý hàng đợi nghe nhạc
Mô tả: Người dùng có thể thêm, xoá bài hát ra khỏi danh sách hàng đợi
Tác nhân: Người dùng Điều kiện trước: - Thiết bị có kết nối internet
- Người dùng đã đăng nhập vào hệ thống
Luồng sự kiện 1 Người dùng: thêm bài hát vào hàng đợi
34 chính (Basic flows) 2 Hệ thống: hiện thị thông báo đã thêm thành công
3 Người dùng: chọn xem chi tiết hàng đợi
4 Hệ thống: hiện thị danh sách hàng đợi
5 Người dùng: sắp xếp hàng đợi, xoá bài hát ra khỏi hàng đợi
6 Hệ thống: làm mới dữ liệu
Không Điều kiện sau: Nếu ca sử dụng thành công, người dùng nhận được danh sách hàng đợi theo ý muốn
3.2.8 Usecase Admin Quản lý Bài hát, Ca sĩ, Thể loại, Album, Playlist
Hình 3.8 Biểu đồ usecase quản lý bài hát, ca sĩ, thể loại, album, playlist
3.2.8.2 Mô tả Usecase Admin Quản lý Bài hát, Ca sĩ, Thể loại, Album, Playlist
Bảng 3.8 Đặc tả ca sử dụng admin quản lý bài hát, ca sĩ, thể loại, album, playlist
Usecase: Admin Quản lý Bài hát, Ca sĩ, Thể loại, Album, Playlist
Mục đích: Usecase cho phép Quản trị viên quản lý bài hát, ca sĩ, thể loại, album, playlist
Mô tả: Người dùng có thể xem, sửa, xoá bài hát, ca sĩ, thể loại, album, playlist
Tác nhân: Quản trị viên
36 Điều kiện trước: - Thiết bị có kết nối internet
- Quản trị viên đã đăng nhập vào hệ thống
Luồng sự kiện chính (Basic flows)
1 Hệ thống: hiển thị giao diện quản lý
2 Người dùng: xem danh sách dữ liệu, tìm kiếm theo từ khoá
3 Hệ thống: hệ thống kiếm tra dữ liệu theo từ khoá mà người dùng nhập Nếu có thì hiển thị dữ liệu, nếu không thì hiện thị không tìm thấy kết quả
4 Người dùng: nhấn nút thêm (sửa)
5 Hệ thống: hiện thị form thêm (sửa)
6 Người dùng: nhập dữ liệu vào form, nhấn “ Đồng ý”
7 Hệ thống: kiểm tra dữ liệu Nếu hợp lệ thì đưa ra thông báo thành công và làm mới dữ liệu Nếu không hợp lệ thì thông báo lỗi
8 Người dùng: nhấn nút “xoá”
9 Hệ thống: hiển thị cửa sổ thông báo
10 Người dùng: nhấn nút “Đồng ý”
11 Hệ thống: xoá dữ liệu trên hệ thống Đóng cửa sổ thông báo và làm mới dữ liệu
7a Hệ thống: đóng form nhập dữ liệu
11a Hệ thống: đóng cửa sổ thông báo Điều kiện sau: Nếu ca sử dụng thành công, Quản trị viên có thể quản lý được bài hát, ca sĩ, thể loại, album, playlist
Biểu đồ hành động
3.3.1 Biểu đồ hành động chức năng thêm bài hát vào Playlist
Hình 3.9 Biểu đồ chức năng thêm bài hát vào playlist
3.3.2 Biểu đồ hành động chức năng tìm kiếm theo từ khoá
Hình 3.10 Biểu đồ chức năng tìm kiếm theo từ khoá
KẾT QUẢ
Môi trường cài đặt
- Chương trình được cài đặt trên Visual Studio Code (Frontend), Visual Studio (Backend)
- Chương trình được thiết kế về mặt giao diện là bắt mắt, bố cục tương đối hợp lý, thuận tiện cho việc sử dụng Các chức năng, hộp thoại được bố trí khá linh hoạt, dễ dàng thao tác để đạt được kết quả là tối đa.
Giao diện người dùng
Hình 4.1 Giao diện trang mở đầu
Hình 4.2 Giao diện trang đăng ký
Hình 4.3 Giao diện trang đăng nhập và quên mật khẩu
Hình 4.4 Giao diện trang chủ và lịch sử xem
Hình 4.5 Giao diện trang phát nhạc và hàng đợi
Hình 4.6 Giao diện trang thư viện cá nhân
Hình 4.7 Giao diện trang tìm kiếm
Hình 4.8 Giao diện trang thông tin cá nhân