Báo cáo xây dựng Ứng dụng nghe nhạc trên thiết bị di Động mới và chuẩn nhất

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.

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI KHOA CÔNG NGHỆ THÔNG TIN

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

LỜI CẢM ƠN

Quãng thời gian 4 năm học tập và rèn luyện tại Trường Đại học Giao Thông Vận Tải, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý Thầy Cô và bạn bè Với lòng biết ơn sâu sắc và chân thành nhất, em xin gửi đến quý Thầy Cô ở Khoa Khoa Công nghệ thông tin – Trường Đại học Giao Thông Vận Tải đã cùng với tri thức và tâm huyết của mình để truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập tại trường

Đặc biệt hơn, em cảm ơn thầy Nguyễn Trọng Phúc - là người trực tiếp hướng dẫn, tạo điều kiện và giúp đỡ em trong suốt quá trình thực hiện đồ án tốt nghiệp

Em xin chân thành cảm ơn các anh chị trong Công ty Cổ phần Công nghệ Sway Holdings đã luôn quan tâm, giúp đỡ em trong quá trình làm đồ án

Mặc dù trong quá trình thực hiện đề tài em đã rất cố gắng nhưng do trình độ còn hạn chế về kiến thức, công nghệ cũng như nghiệp vụ nên trong quá trình thực hiện đề tài còn có sự thiếu sót Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các quý thầy cô để em có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn công tác thực tế sau này

Em xin chân thành cảm ơn!

Hà Nội, ngày 26 tháng 5 năm 2023

Sinh viên thực hiện

Đại

Đỗ Phúc Đại

MỤC LỤC

Lời nói đầu 9

CHƯƠNG 1 GIỚI THIỆU 11

1.1 Sự phát triển của ứng dụng di động tại Việt Nam hiện nay 11

1.2 Mục tiêu, nhiệm vụ của đề tài 12

1.3 Nội dung và phạm vi của đề tài 12

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 13

2.1 Microsoft NET Core 13

2.5 Hệ quản trị cơ sở dữ liệu MySQL 20

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ 22

3.1 Các tác nhân và mô tả 22

3.1.1 Các tác nhân 22

3.1.2 Các chức năng liên quan đến tác nhân của hệ thống 22

3.2 Xây dựng biểu đồ Usecase 23

3.2.1 Biểu đồ Usecase tổng quát 23

3.2.7 Usecase Quản lý hàng đợi 33

3.2.8 Usecase Admin Quản lý Bài hát, Ca sĩ, Thể loại, Album, Playlist 35

3.3 Biểu đồ hành động 37

3.3.1 Biểu đồ hành động chức năng thêm bài hát vào Playlist 37

3.3.2 Biểu đồ hành động chức năng tìm kiếm theo từ khoá 38

3.4 Phân tích thiết kế cơ sở dữ liệu 39

3.4.1 Mô hình thực thể liên kết 39

3.4.2 Mô hình quan hệ 44

3.4.3 Thiết kế cơ sở dữ liệu 45

CHƯƠNG 4 KẾT QUẢ 51

4.1 Môi trường cài đặt 51

4.2 Giao diện người dùng 51

4.3 Giao diện quản trị 56

KẾT LUẬN 60

TÀI LIỆU THAM KHẢO 61

Bảng 3.16 Thiết kế bảng bài hát – thể loại 47

Bảng 3.17 Thiết kế bảng bài hát - playlist 48

Bảng 3.18 Thiết kế bảng lịch sử xem album của người dùng 48

Bảng 3.19 Thiết kế bảng lịch sử xem ca sĩ của người dùng 48

Bảng 3.20 Thiết kế bange lịch sử xem playlist của người dùng 48

Bảng 3.21 Thiết kế bảng lịch sử xem bài hát của người dùng 49

Bảng 3.22 Thiết kế bảng người dùng thích album 49

Bảng 3.23 Thiết kế bảng người dùng thích ca sĩ 49

Bảng 3.24 Thiết kế bảng người dùng thích playlist 50

Bảng 3.25 Thiết kế bảng người dùng thích bài hát 50

Hình 2.6 Hệ quản trị cơ sở dữ liệu MySQL 20

Hình 3.1 Biểu đồ Usecase tổng quát 23

Hình 3.2 Biểu đồ Usecase đăng ký 24

Hình 3.3 Biểu đồ Usecase đăng nhập 25

Hình 3.4 Biểu đồ Usecase quản lý playlist cá nhân 27

Hình 3.5 Biểu đồ Usecase yêu thích 29

Hình 3.6 Biểu đồ Usecase tìm kiếm 31

Hình 3.7 Biểu đồ Usecase quản lý hàng đợi 33

Hình 3.8 Biểu đồ usecase quản lý bài hát, ca sĩ, thể loại, album, playlist 35

Hình 3.9 Biểu đồ chức năng thêm bài hát vào playlist 37

Hình 3.10 Biểu đồ chức năng tìm kiếm theo từ khoá 38

Hình 3.17 Liên kết giữa thực thể bài hát và thực thể album 42

Hình 3.18 Liên kết giữa thực thể bài hát và thực thể ca sĩ 42

Hình 3.19 Liên kết giữa thực thể bài hát và thực thể thể loại 42

Hình 3.20 Liên kết giữa thực thể bài hát và thực thể playlist 42

Hình 3.21 Liên kết giữa thực thể ca sĩ và thực thể album 42

Hình 3.22 Liên kết giữa thực thể người dùng và thực thể bài hát 42

Hình 3.23 Liên kết giữa thực thể người dùng và thực thể ca sĩ 43

Hình 3.24 Liên kết giữa thực thể người dùng và thực thể album 43

Hình 3.25 Liên kết giữa thực thể người dùng và thực thể album 43

Hình 3.26 Mô hình quan hệ 44

Hình 4.1 Giao diện trang mở đầu 51

Hình 4.2 Giao diện trang đăng ký 52

Hình 4.3 Giao diện trang đăng nhập và quên mật khẩu 52

Hình 4.4 Giao diện trang chủ và lịch sử xem 53

Hình 4.5 Giao diện trang phát nhạc và hàng đợi 53

Hình 4.6 Giao diện trang thư viện cá nhân 54

Hình 4.7 Giao diện trang tìm kiếm 54

Hình 4.8 Giao diện trang thông tin cá nhân 55

Hình 4.9 Giao diện xem danh sách bài hát 56

Hình 4.10 Giao diện thêm bài hát mới 56

Hình 4.11 Giao diện sửa bài hát 57

Hình 4.12 Giao diện xoá bài hát 57

Hình 4.13 Giao diện xem ca sĩ 58

Hình 4.14 Giao diện thêm ca sĩ 58

Hình 4.15 Giao diện sửa ca sĩ 59

Hình 4.16 Giao diện xoá ca sĩ 59

Lời nói đầu

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

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

CHƯƠNG 1 GIỚI THIỆU

Chương đầu tiên sẽ nói về sự phát triển về ứng dụng di động tại Việt Nam hiện nay và tổng quan về đề tài

1.1 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

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

1.2 Mục tiêu, nhiệm vụ của đề tài

Mục tiêu:

- Ứ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: + Dành cho quản trị:

▪ 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

1.3 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

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

Chương này sẽ trình bày tất cả các công nghệ sử dụng cho việc xây dựng ứng dụng, website quản trị, lưu trữ dữ liệu

2.1 Microsoft NET Core

2.1.1 Khái niệm

.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

+ 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ụ

2.2 Tổng quan về ASP.NET Core Web API

2.2.1 Khái niệm

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

Hình 2.3 Tổng quan về Flutter

2.3.2 Đặc điểm chính

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

2.4 Tổng quan về ReactJS

2.4.1 Khái niệm

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

2.4.2 Đặc điểm chính

- 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à

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

2.4.3 Material-UI

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

2.5 Hệ quản trị cơ sở dữ liệu MySQL

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server Với RDBMS là viết tắt của Relational Database

Management System MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu Mỗi cơ sở dữ liệu có thể có nhiều bảng quan hệ chứa dữ liệu MySQL cũng có cùng một cách truy xuất

và mã lệnh tương tự với ngôn ngữ SQL

Hình 2.6 Hệ quản trị cơ sở dữ liệu MySQL

Những đặc điểm của hệ quản trị cơ sở dữ liệu MySQL

- Hệ quản trị cơ sở dữ liệu MySQL chính là một trong những phần mềm quản trị CSDL dạng server based, hệ gần giống với SQL server of Microsoft

- MySQL là phần mềm quản lý dữ liệu thông qua CSDL Và mỗi một CSDL đều có bảng quan hệ chứa dữ liệu riêng biệt

- MySQL có cơ chế quản lý sử dụng riêng giúp cho mỗi người sử dụng đều có thể quản lý cùng lúc một hay nhiều CSDL khác nhau Và mỗi người dùng đều có 1 username và

password để truy nhập và truy xuất đến CSDL Khi truy vấn đến CSDL của MySQL, bạn phải cung cấp tài khoản và mật khẩu có quyền sử dụng cơ sở dữ liệu đó

- MySQL tương thích tốt với môi trường PHP, giúp hệ thống hoạt động mạnh mẽ

Ưu điểm

- MySQL là CSDL có tốc độ khá cao, ổn định và khá dễ sử dụng có thể hoạt động được trên khá nhiều hệ điều hành

- MySQL hỗ trợ rất nhiều ngôn ngữ lập trình

- Độ bảo mật cao: MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên Internet khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp cao

- Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ từ một hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp

- Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và hơn thế nữa nó có thể được mở rộng nếu cần thiết

- Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc rất hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ

Trong chương này, em sẽ trình bày các nội dung liên quan đến xây dựng hệ thống, xây dựng biểu đồ usecase, phân tích các chức năng, xây dựng cơ sở dữ liệu phục vụ cho các quy trình nghiệp vụ

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

+ 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 + Quản lý tài khoản

- Quản trị viên:

+ Đăng nhập, đăng xuất + Quản lý bài hát

+ Quản lý ca sĩ + Quản lý thể loại + Quản lý album + Quản lý playlist + Quản lý người dùng

3.2 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

3.2.2 Usecase Đăng ký

3.2.2.1 Biểu đồ

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 “Đăng ký”

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

Luồng sự kiện phụ (Alternative

Flows):

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ý

3.2.3 Usecase Đăng nhập

3.2.3.1 Biểu đồ

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

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 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

Luồng sự kiện phụ (Alternative

Flows):

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

3.2.4.1 Biểu đồ

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

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

Luồng sự kiện phụ (Alternative

Flows):

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

3.2.5 Usecase Yêu thích

3.2.5.1 Biểu đồ

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

Usecase: 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 9 Người dùng: chọn “Đồng ý”

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

Luồng sự kiện phụ (Alternative

Flows):

9a Người dùng chọn “Huỷ”

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