TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINXÂY DỰNG WEBSITE NGHE NHẠC VỚI TÍNH NĂNG ĐỀ XUẤT BÀI HÁT Tên đề tài tiếng Anh: BUILDING AN MUSIC WEBSITE WITH RECOMMENDATION Cán bộ hướng dẫn: ThS.. o
GIỚI THIỆU ĐỀ TÀI
Tên đề tài
- Xây dựng website nghe nhạc với tính năng đề xuất bài hát.
- Building an Music website with recommendation.
Lí do chọn đề tài
Trong bối cảnh xã hội ngày càng phát triển, nhu cầu giải trí của con người cũng tăng cao Theo số liệu thống kê tại Việt Nam, có khoảng 75% người dân nghe nhạc hàng ngày, trong đó khoảng 20% nghe nhạc hơn 1 giờ mỗi ngày, cho thấy thói quen giải trí qua âm nhạc ngày càng phổ biến và đóng vai trò quan trọng trong đời sống hàng ngày.
Em mong muốn xây dựng một website nghe nhạc trực tuyến đáp ứng nhu cầu giải trí và thư giãn của mọi người Trang web sẽ cho phép người dùng chia sẻ sở thích âm nhạc cá nhân, đồng thời tích hợp chức năng trò chuyện thoại để tăng tính tương tác và gắn kết Mục tiêu của tôi là tạo ra nền tảng nghe nhạc cộng đồng linh hoạt, tiện lợi, kết hợp giữa nghe nhạc, chia sẻ sở thích và trò chuyện trực tuyến để nâng cao trải nghiệm người dùng.
Mô tả sản phẩm
- Ứng dụng nghe nhạc với tinh năng đề xuất bài hát cho người dùng.
- Triển khai trên môi trường web.
Chức năng chính
- Quản lý tài khoản: Đăng nhập, đăng ký, đổi mật khẩu, thông tin tài khoản.
- Trình phát nhạc với đầy đủ tính năng cơ bản.
- Quản lý danh sách phát, danh sách yêu thích.
- Tìm kiếm bài hát, ca sĩ.
- Truy cập danh sách bài hát, ca sĩ, thể loại.
- Quản lý danh sách yêu thích.
- Lọc danh sách bài hát theo ngày phát hành, lượt nghe
- Nhận danh sách đề xuất theo bài hát hiện tại.
- Nhận danh sách bài hát theo danh sách yêu thích.
- Quản lý tài khoản người dùng, bài hát, ca sĩ (Quản trị viên)
Công nghệ sử dụng
- Figma: lên bản thiết kế giao diện.
- HTML, CSS, JavaScript với thư viện ReactJS: cài đặt front-end.
- Node.js với framework ExpressJS: cài đặt back-end.
- Python: cài đặt tính năng đề xuất bài hát.
- MongoDB: cơ sở dữ liệu.
- Github: quản lý mã nguồn.
Thông tin người thực hiện đề tài
STT Tên thành viên Mã sinh viên Email
1 Lương Mạnh Hùng 19520098 19520098@gm.uit.edu.vn
Bảng 1.1 Thông tin thành viên nhóm
CƠ SỞ LÝ THUYẾT
HTML
HTML, viết tắt của Hyper Text Markup Language, là ngôn ngữ đánh dấu siêu văn bản quan trọng trong việc xây dựng và cấu trúc các trang web hoặc ứng dụng HTML giúp người dùng dễ dàng phân chia nội dung thành các đoạn văn, heading, liên kết, blockquotes và các phần khác, từ đó tạo ra các trang web trực quan, dễ hiểu và dễ truy cập Việc hiểu rõ HTML đóng vai trò thiết yếu trong phát triển web và tối ưu hóa trải nghiệm người dùng.
HTML được xem như bộ khung căn bản của một trang web, giúp định hình cấu trúc nội dung trên mạng Thẻ HTML cung cấp các thành phần cần thiết để trình duyệt hiểu và hiển thị nội dung một cách rõ ràng và logic Nhờ vào HTML, các phần tử như tiêu đề, đoạn văn, hình ảnh và liên kết được tổ chức một cách hợp lý, tạo nền tảng cho trải nghiệm người dùng hiệu quả.
HTML được tạo ra năm 1991 bởi nhà vật lý học Tim Berners-Lee tại CERN, Thụy Sĩ, nhằm phát triển siêu văn bản và siêu liên kết (hypertext) trên Internet Hypertext cho phép người dùng truy cập thông tin nhanh chóng qua các liên kết Hiện tại, HTML đã trở thành chuẩn chuẩn mực cho website, được tổ chức W3C (World Wide Web Consortium) quản lý và phát triển.
Hình 2.1 Ngôn ngữ HTML
CSS
- CSS là viết tắt của cụm từ Cascading Style Sheets.
CSS rất quan trọng trong việc định dạng phong cách cho các phần tử HTML, giúp trang web trở nên hấp dẫn hơn Hiểu đơn giản, HTML tạo ra cấu trúc chính của trang, còn CSS đảm nhận việc trang trí và làm đẹp cho giao diện Kết hợp giữa HTML và CSS sẽ mang tới một website có thiết kế đẹp mắt, chuyên nghiệp và thu hút người dùng.
CSS lần đầu tiên được đề xuất bởi Hoàng Wium Lie vào ngày 10 tháng 10 năm 1994 khi ông làm việc cùng Tim Berners-Lee tại CERN Nhiều ngôn ngữ định kiểu khác cho web đã được đề xuất cùng lúc, và quá trình thảo luận trong cộng đồng cũng như sự đồng thuận của W3C đã dẫn đến việc phát hành chuẩn CSS1 vào năm 1996 Đặc biệt, đề xuất của Bert Bos, người trở thành đồng tác giả của CSS1, có ảnh hưởng đáng kể và ông được coi là đồng sáng tạo của CSS.
CSS đã phát triển qua nhiều phiên bản, như CSS2, CSS2.1, CSS3 và mới nhất là CSS4, giúp nâng cao khả năng thiết kế web Sự phân chia thành các môđun riêng biệt dựa trên các môđun của CSS3 giúp việc cập nhật và mở rộng dễ dàng hơn Các phiên bản CSS này liên tục được cải tiến để đáp ứng các yêu cầu ngày càng cao của lập trình web hiện đại.
- Dưới đây là một đoạn mã CSS đơn giản để thiết lập màu chữ và kích thước chữ cho thẻ
Hình 2.2 Cấu trúc CSS cơ bản
JavaScript
JavaScript là ngôn ngữ lập trình thông dịch phổ biến được sử dụng cả phía máy khách và máy chủ, giúp tạo ra các trang web động và chuyên nghiệp Ngôn ngữ này được hỗ trợ rộng rãi bởi hầu hết các trình duyệt web, đảm bảo tính khả dụng và tương thích cao JavaScript đóng vai trò quan trọng trong việc phát triển các ứng dụng web hiện đại, nâng cao trải nghiệm người dùng.
Chrome, Firefox, Safari, Internet Explorer, Edge, Opera, Hầu hết các trình duyệt di động cho điện thoại thông minh đều hỗ trợ JavaScript.
JavaScript chủ yếu được sử dụng để nâng cao trải nghiệm người dùng trên các website, bao gồm các chức năng như tự động cập nhật trang web, cải thiện giao diện người dùng với menu và hộp thoại, cũng như tạo các hiệu ứng animations, đồ họa 2D và 3D, bản đồ tương tác và trình phát video Chế độ sử dụng JavaScript trong trình duyệt gọi là JavaScript phía máy khách, giúp website trở nên năng động và tương tác hơn.
JavaScript đã trải qua quá trình phát triển bắt đầu từ năm 1995, khi phiên bản đầu tiên mang tên Mocha được ra mắt, sau đó đổi thành LiveScript vào tháng 9 cùng năm và cuối cùng chính thức gọi là JavaScript vào tháng 12 năm 1995 Năm 1996, JavaScript được gửi đến ECMA International để hoàn thiện thành tiêu chuẩn kỹ thuật, và vào tháng 6 năm 1997, ECMA-262, đặc tính kỹ thuật chính thức đầu tiên cho ngôn ngữ này, được phát hành Phiên bản mới nhất của JavaScript tính đến thời điểm hiện tại là ECMAScript 2017, được phát hành vào tháng 6 năm 2017.
- Cách hoạt động của JavaScript:
Hình 2.3 Phương thức hoạt động của JavaScript
When a web browser loads a web page, the HTML parser begins parsing the HTML code and creating the DOM Whenever it encounters a CSS directive or JavaScript, whether inline or externally loaded, it delegates processing to the CSS parser or JavaScript engine as needed, ensuring proper rendering and functionality.
JavaScript engine tải các tệp JavaScript bên ngoài và mã inline nhưng không chạy ngay lập tức, đợi HTML và CSS được phân tích hoàn tất Khi đó, JavaScript thực thi theo thứ tự xuất hiện trên trang web, gồm xác định biến và hàm, gọi hàm, và kích hoạt trình xử lý sự kiện Các hoạt động này giúp cập nhật DOM bởi JavaScript và hiển thị kết quả ngay lập tức trên trình duyệt.
Thư viện ReactJS
React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI), giúp cải thiện hiệu suất phản hồi của trang web Nhờ phương pháp render mới, React mang lại trải nghiệm người dùng mượt mà và nhanh chóng khi nhập liệu Với khả năng tối ưu hóa tốc độ, React trở thành lựa chọn hàng đầu cho các nhà phát triển web xây dựng giao diện tương tác và hiện đại.
Components của công cụ này do Facebook phát triển và được ra mắt dưới dạng mã nguồn mở vào năm 2013, nhanh chóng thu hút sự chú ý của cộng đồng lập trình viên Với khả năng tối ưu và linh hoạt, React đã vượt qua các đối thủ cạnh tranh chính như Angular và Bootstrap, hai thư viện JavaScript phổ biến nhất thời điểm đó, trở thành lựa chọn hàng đầu cho phát triển giao diện người dùng hiện đại.
- Cách React hoạt động: Code HTML bằng Javascript
Hình 2.4 Một đoạn code trong trong ứng dụng sử dụng React
React là thư viện GUI nguồn mở của JavaScript đặc biệt tập trung vào xây dựng giao diện người dùng hiệu quả Được phân loại theo mô hình MVC kiểu “V” (View), React giúp phát triển các thành phần UI một cách tối ưu và trực quan, nâng cao trải nghiệm người dùng.
Là lập trình viên JavaScript, bạn dễ dàng nắm bắt các kiến thức cơ bản về React, giúp việc phát triển các ứng dụng web trở nên đơn giản và nhanh chóng Chỉ trong vài ngày, bạn có thể bắt đầu xây dựng các ứng dụng dựa trên nền tảng React, mở rộng kỹ năng lập trình Front-end của mình.
Các thành phần trong dự án được đóng gói theo từng phần riêng, dễ dàng trong việc quản lý cũng như tái sử dụng code.
Hình 2.5 Một vài file components trong ứng dụng
Hiệu suất tốt hơn với Virtual DOM:
React cải thiện hiệu quả quá trình cập nhật DOM (Document Object Model), giúp giảm thiểu thất vọng trong các dự án web phức tạp Nhờ vào việc sử dụng virtual DOM, React cho phép tối ưu hóa quá trình cập nhật giao diện, từ đó nâng cao hiệu suất và trải nghiệm người dùng Điều này giúp các nhà phát triển tránh khỏi những vấn đề phổ biến liên quan đến xử lý DOM trực tiếp, đảm bảo ứng dụng web hoạt động m smoothly hơn.
Công cụ này giúp bạn xây dựng các virtual DOMs và lưu trữ chúng trong bộ nhớ một cách hiệu quả Nhờ đó, khi có sự thay đổi trong DOM thực tế, virtual DOM sẽ phản ứng ngay lập tức, tối ưu hóa hiệu suất xử lý và cập nhật giao diện người dùng nhanh chóng.
Hệ thống này sẽ ngăn DOM thực tế để buộc các bản cập nhật được liên tục Do đó, tốc độ của ứng dụng sẽ không bị gián đoạn.
NodeJS
NodeJS là môi trường runtime chạy JavaScript đa nền tảng và mã nguồn mở, phù hợp để phát triển các ứng dụng web ngoài trình duyệt của khách hàng Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS nổi bật với mô hình hướng sự kiện (event-driven) không đồng bộ, giúp tối ưu hóa hiệu suất cho các ứng dụng dữ liệu lớn Nền tảng này là giải pháp hoàn hảo cho các ứng dụng yêu cầu xử lý dữ liệu nhanh và hiệu quả, góp phần thúc đẩy phát triển web hiện đại.
- NodeJS là một nền tảng (platform) chứ không phải một web framework như một số người thường nhầm lẫn.
Node.js không phải là một ngôn ngữ lập trình mà là môi trường runtime để chạy JavaScript ngoài trình duyệt Để học và sử dụng Node.js hiệu quả, người dùng cần có kiến thức về các giao thức mạng, JavaScript và kỹ thuật lập trình phù hợp Điều này giúp xây dựng các ứng dụng backend mạnh mẽ, tối ưu hiệu suất và mở rộng quy mô dễ dàng hơn Hiểu rõ về Node.js sẽ giúp bạn phát triển các dự án phần mềm linh hoạt, đáp ứng được yêu cầu của thị trường công nghệ ngày càng phát triển.
Node.JS là một nền tảng lập trình phổ biến có thể được sử dụng cho cả phát triển frontend và backend nhờ vào các framework như Express.js và Meteor.js Trong dự án này, nhóm đã chọn sử dụng Node.JS để xây dựng phần backend, sử dụng framework Express để tối ưu hóa hiệu suất và khả năng mở rộng của ứng dụng.
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.
Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình đa lõi trong các phần cứng cấp server hiện nay.
Khó thao tác với cơ sử dữ liệu quan hệ.
Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác.
Cần có kiến thức tốt về JavaScript.
Không phù hợp với các tác vụ đòi hỏi nhiều CPU.
ExpressJS
Express.js, hay còn gọi là Express js hoặc Express.js, là một framework mã nguồn mở miễn phí dành cho Node.js, giúp việc thiết kế và xây dựng các ứng dụng web trở nên đơn giản và nhanh chóng Với khả năng tối ưu hóa quá trình phát triển web, Express.js đã trở thành lựa chọn hàng đầu cho các lập trình viên yêu thích sự linh hoạt và hiệu quả Framework này hỗ trợ xây dựng các ứng dụng web hiệu quả, mở rộng dễ dàng và phù hợp với nhiều quy mô dự án khác nhau, giúp tiết kiệm thời gian và công sức phát triển.
Express.js là một khuôn khổ của Node.js giúp xây dựng ứng dụng web và API dễ dàng hơn nhờ vào việc sử dụng ngôn ngữ lập trình Javascript Việc này giúp các lập trình viên và nhà phát triển tiết kiệm thời gian và công sức trong quá trình phát triển Vì Express.js đã có nhiều mã code mẫu sẵn, người dùng có thể dễ dàng ứng dụng và tùy biến theo nhu cầu dự án của mình.
Express.js giúp giảm thiểu công đoạn lập trình phức tạp khi xây dựng API hiệu quả trong Node.js Nhờ vào framework này, việc phát triển API trở nên dễ dàng hơn và tiết kiệm thời gian Ngoài ra, Express.js còn cung cấp nhiều tính năng mới, nâng cao hiệu suất và khả năng mở rộng của ứng dụng Đây là giải pháp lý tưởng cho các nhà phát triển muốn tối ưu hoá quá trình xây dựng API trong Node.js.
Router là công cụ chính được sử dụng trong dự án của nhóm em, giúp phân chia API theo từng đối tượng một cách dễ dàng và hiệu quả Việc áp dụng Router không chỉ tối ưu hóa quá trình định tuyến mà còn nâng cao khả năng xử lý dữ liệu, đảm bảo hệ thống hoạt động linh hoạt và dễ mở rộng trong quá trình phát triển.
Hình 2.6 Một đoạn code gọi router từ các tệp định tuyến được định nghĩa
Hình 2.7 Một đoạn code sử dụng phương thức định tuyến
MongoDB
MongoDB là một database hướng tài liệu (document-oriented), thuộc loại NoSQL, giúp tránh cấu trúc bảng cố định của relational database để phù hợp với các tài liệu dạng JSON với schema linh hoạt gọi là BSON MongoDB lưu trữ dữ liệu dưới dạng Document JSON, cho phép mỗi collection có kích thước và các document khác nhau, giúp tối ưu hoá tốc độ truy vấn dữ liệu nhanh chóng.
Hình 2.8 Một đoạn code đối tượng tài khoản trong cơ sở dữ liệu
- Các hàm truy vấn dữ liệu được định nghĩa sẵn trong thư viện mongoose, việc truy cập cũng như xử lý được thực hiện rất dễ dàng.
Hình 2.9 Một đoạn code gọi hàm xử lý cơ sở dữ liệu
Python
Python là một ngôn ngữ lập trình thông dịch (interpreted), hướng đối tượng (object-oriented) và có ngữ nghĩa động (dynamic semantics), phù hợp cho phát triển phần mềm linh hoạt và dễ mở rộng Python hỗ trợ các module và gói (packages), khuyến khích lập trình module hóa và tái sử dụng mã hiệu quả Trình thông dịch Python cùng thư viện chuẩn mở rộng đều có sẵn dưới dạng mã nguồn hoặc nhị phân miễn phí, phù hợp với nhiều nền tảng khác nhau và dễ dàng phân phối.
- Các lợi ích của Python
Python giúp tăng năng suất làm việc của các nhà phát triển nhờ khả năng viết mã ngắn gọn hơn so với các ngôn ngữ lập trình khác Nhờ giảm số dòng mã cần thiết, Python giúp tiết kiệm thời gian và nâng cao hiệu quả phát triển phần mềm Điều này làm cho Python trở thành lựa chọn phổ biến của nhiều nhà phát triển trong các dự án phần mềm hiện đại.
Python có một thư viện tiêu chuẩn phong phú, chứa nhiều đoạn mã tái sử dụng được cho đa dạng tác vụ Điều này giúp các nhà phát triển giảm thiểu công sức viết mã mới từ đầu, nâng cao hiệu quả và tiết kiệm thời gian trong quá trình lập trình.
Các nhà phát triển có thể dễ dàng sử dụng Python với các ngôn ngữ lập trình phổ biến khác như Java, C và C++.
Trên Internet hiện có nhiều tài nguyên hữu ích để học Python, bao gồm các video hướng dẫn, tài liệu chi tiết và các hướng dẫn dành cho nhà phát triển Những nguồn này giúp bạn dễ dàng tiếp cận kiến thức lập trình Python một cách dễ dàng và hiệu quả.
Python có thể được sử dụng trên nhiều hệ điều hành máy tính khác nhau, chẳng hạn như Windows, macOS, Linux và Unix.
Hình 2.10 Ngôn ngữ Python
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Mô hình hệ thống
Hình 3.10 Mô hình hệ thống
Trang web được xây dựng dựa trên mô hình MERN (MongoDB – Express – ReactJS - NodeJS) và một webserver Python:
- ReactJS: Cài đặt Front-End.
- MongoDB: Cơ sở dữ liệu.
- NodeJS và ExpressJs: Cài đặt Back-End.
- Python và Django: Cặt đặt tính năng đề xuất bài hát.
Sơ đồ Use-case
Hình 3.11 Sơ đồ use-case tổng quát
Danh sách các use-case
STT Tên use-case Ý nghĩa / Ghi chú
1 Đăng nhập Đăng nhập vào hệ thống
2 Đăng ký Đăng ký tài khoản mới
3 Đăng xuất Đăng xuất khỏi hệ thống
4 Đổi mật khẩu Đổi mật khẩu
5 Quản lý thông tin cá nhân Xem / chỉnh sửa thông tin cá nhân
6 Quản lý danh sách phát Thêm, xoá, sửa danh sách phát
7 Tìm kiếm bài hát, ca sĩ Tìm kiếm bài hát, ca sĩ theo tên
8 Quản lý danh sách yêu thích Thêm xoá bài hát trong danh sách yêu thích
9 Nghe nhạc Thực hiện các chức năng của trình phát nhạc: play, next, back…
10 Nhận danh sách nhạc đề xuất Nhận danh sách nhạc đề xuất theo danh sách yêu thích
11 Nhận đề xuất theo bài hát hiện tại
Nhận danh sách nhạc đề xuất theo theo bài hát hiện tại
12 Quản lý tài khoản người dùng, danh sách bài hát, ca sĩ
Xem thông tin người dùng, vô hiệu hoá người dùng
Xem xoá sửa danh sách bài hát, ca sĩ
Bảng 3.2 Danh sách các use-case chính
Đặc tả use-case
Tên chức năng Đăng nhập
Tóm tắt Chức năng đăng nhập vào hệ thống
Dòng sự kiện chính 1 Hệ thống hiển thị form đăng nhập
2 Người dùng nhập tài khoản và mật khẩu (cả 2 trường này đều bắt buộc nhập) và nhấn “Đăng nhập”
3 Hệ thống kiểm tra thông tin đăng nhập
Thông tin đăng nhập sai:
Nếu tài khoản không tồn tại: Hệ thống hiển thị thông báo tài khoản không tồn tại
Nếu tài khoản tồn tại nhưng sai mật khẩu: Hệ thống hiển thị thông báo sai mật khẩu.
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: không có
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng đăng nhập thành công vào hệ thống và được điều hướng tới trang chủ, nơi họ có thể sử dụng các quyền và chức năng mà hệ thống cung cấp Tuy nhiên, điểm mở rộng không được cấp phát trong quá trình này, đảm bảo an toàn và kiểm soát truy cập hiệu quả.
Bảng 3.3 Đặc tả use-case Đăng nhập
Tên chức năng Đăng ký
Tóm tắt Chức năng đăng ký tài khoản
1 Hệ thống hiển thị form đăng ký
2 Người dùng nhập các thông tin địa chỉ E-mail, tên đăng nhập, mật khẩu, xác nhận mật khẩu (các trường này đều bắt buộc nhập) và nhấn “Đăng ký”
3 Hệ thống thực hiện kiểm tra thông tin
Nếu tên tài khoản đã tồn tại, hệ thống hiển thị thông báo tên tài khoản đã tồn tại
Nếu mật khẩu không khớp, hệ thống báo mật khẩu không khớp.
Trạng thái hệ thống trước Điều kiện: không có khi thực thiện use-case
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng đăng ký thành công và chuyển đến form đăng nhập Điểm mở rộng Không có
Bảng 3.4 Đặc tả use-case Đăng ký
Tên chức năng Đăng xuất
Tóm tắt Chức năng đăng xuất tài khoản
1 Trong mục tài khoản, người dùng bấm vào nút
2 Hệ thống thực hiện việc đăng xuất tài khoản hiện tại
3 Tải lại trang với trạng thái không đăng nhập Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case
Người dùng đăng xuất khỏi hệ thống và được điều hướng đến trang đăng nhập Điểm mở rộng Không có
Bảng 3.5 Đặc tả use-case Đăng xuất
3.4.4 Use-case “Đổi mật khẩu”
Tên chức năng Đổi mật khẩu
Tóm tắt Chức năng đổi mật khẩu
Dòng sự kiện chính 1 Người dùng bấm vào biểu tượng tài khoản bên góc phải màn hình.
2 Chọn quản lý tài khoản
3 Nhập mật khẩu hiện tại và mật khẩu mới, xác nhận mật khẩu mới rồi bấm đổi mật khẩu
4 Hệ thống thông báo đổi mật khẩu thành công Dòng sự kiện khác
Mật khẩu không khớp Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case Mật khẩu được thay đổi Điểm mở rộng Không có
Bảng 3.6 Đặc tả use-case Đổi mật khẩu
3.4.5 Use-case “Quản lý thông tin cá nhân”
Tên chức năng Quản lý thông tin cá nhân
Tóm tắt Xem, sửa thông tin cá nhân
1 Người dùng bấm vào avatar góc phải màn hình
2 Chọn thông tin tài khoản
3 Chọn mục cần chỉnh sửa và thay đổi
4 Bấm lưu để xác nhận thay đổi thông tin
Dòng sự kiện khác Thông tin không hợp lệ
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: Đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case Thông tin tài khoản thay đổi Điểm mở rộng Không có
Bảng 3.7 Đặc tả use-case Quản lý thông tin cá nhân
3.4.6 Use-case “Quản lý danh sách phát”
Tên chức năng Quản lý danh sách phát
Tóm tắt Quản lý danh sách phát
1 Người dùng bấm vào avatar góc phải màn hình
2 Chọn quản lý danh sách phát
3 Chọn danh sách phát cần thay đổi và tiến hành điều chỉnh
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: Đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case Danh sách phát thay đổi Điểm mở rộng Không có
Bảng 3.8 Đặc tả use-case Quản lý danh sách phát
3.4.7 Use-case “Tìm kiếm bài hát, ca sĩ”
Tên chức năng Tìm kiếm bài hát, ca sĩ
Tóm tắt Tìm kiếm bài hát, ca sĩ theo tên
1 Người dùng chọn thanh tìm kiếm và nhập tên cần tìm
2 Hệ thống hiển thị danh sách theo từ khoá
3 Người dùng có thể tuỳ chọn trong danh sách kết quả hoặc nhấn Enter để đến trang tìm kiếm
Dòng sự kiện khác Không có
Trạng thái hệ thống trước Không có khi thực thiện use-case
Trạng thái hệ thống sau khi thực hiện use-case Không có Điểm mở rộng Không có
Bảng 3.9 Đặc tả use-case “Tìm kiếm bài hát, ca sĩ”
3.4.8 Use-case “Quản lý danh sách yêu thích”
Tên chức năng Quản lý danh sách yêu thích
Tóm tắt Quản lý danh sách yêu thích
1 Tại mỗi bài hát đều có mục thêm, xoá vào danh sách yêu thích Người dùng tiến hành chọn để thêm, xoá vào danh sách yêu thích
2 Người dùng nhấn vào avatar góc trái màn hình, chọn quản lý danh sách phát, chọn danh sách yêu thích.
3 Hệ thống hiển thị danh sách các bài hát có trong danh sách Người dùng có thể tuỳ chọn để xoá khỏi danh sách
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: Đã đăng nhập tài khoản
Trạng thái hệ thống sau khi thực hiện use-case Danh sách bài hát yêu thích thay đổi Điểm mở rộng Không có
Bảng 3.10: Đặc tả use-case Quản lý danh sách yêu thích
Tên chức năng Nghe nhạc
Tóm tắt Thực hiện các chức năng có trong trình phát nhạc
Dòng sự kiện chính 1 Người dùng bấm vào các chức năng trong trình phát nhạc: Dừng/phát, lặp, trộn, tua…
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Không có
Trạng thái hệ thống sau khi thực hiện use-case Trình phát nhạc thay đổi trạng thái theo tuỳ chọn Điểm mở rộng Không có
Bảng 3.11 Đặc tả use-case “Nghe nhạc”
3.4.10 Use-case “Nhận danh sách nhạc đề xuất”
Tên chức năng Nhận danh sách nhạc đề xuất
Tóm tắt Nhận danh sách nhạc đề xuất theo danh sách yêu thích
1 Người dùng chọn mục “Nhạc dành cho bạn” tại trang chủ
2 Hệ thống tiến hành phân tích theo danh sách bài hát yêu thích của người dùng
3 Người dùng nhận được danh sách bài hát đề xuất
Dòng sự kiện khác Không có
Trạng thái hệ thống trước Điều kiện: Đã đăng nhập tài khoản, danh sách yêu khi thực thiện use-case thích không rỗng.
Trạng thái hệ thống sau khi thực hiện use-case Không có Điểm mở rộng Không có
Bảng 3.12 Đặc tả use-case “Nhận danh sách nhạc đề xuẩt”
3.4.11 Use-case “Nhận đề xuất theo bài hát hiện tại”
Tên chức năng Nhận đề xuất theo bài hát hiện tại
Tóm tắt Nhận danh sách nhạc đề xuất theo bài hát đang phát
1 Người dùng mở danh sách phát hiện tại trong trình phát nhạc
2 Hệ thống tiến hành phân tích theo bài hát hiện đang phát
3 Người dùng nhận được danh sách bài hát đề xuất bên dưới danh sách đang phát
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Không có
Trạng thái hệ thống sau khi thực hiện use-case Không có Điểm mở rộng Không có
Bảng 3.13 Đặc tả use-case “Nhận đề xuất theo bài hát hiện tại”
3.4.12 Use-case “Quản lý danh sách tài khoản, bài hát, ca sĩ”
Tên chức năng Quản lý danh sách tài khoản, bài hát, ca sĩ
Tóm tắt Quản lý danh sách tài khoản, bài hát, ca sĩ (Dành cho quản trị viên)
1 Quản trị viên chọn vào avatar góc phải màn hình, chọn quản lý dữ liệu
2 Hệ thống hiển thị các danh sách tài khoản, bài hát, ca sĩ.
3 Quản trị viên tiến hành thêm, xoá, sửa dữ liệu.
Dòng sự kiện khác Không có
Trạng thái hệ thống trước khi thực thiện use-case Điều kiện: Đăng nhập tài khoản quản trị viên
Trạng thái hệ thống sau khi thực hiện use-case Không có Điểm mở rộng Không có
Bảng 3.14 Đặc tả use-case “Nhận đề xuất theo bài hát hiện tại”
THIẾT KẾ DỮ LIỆU
Sơ đồ logic
Hình 4.12 Sơ đồ logic dữ liệu
STT Tên bảng dữ liệu Diễn giải
1 Account Thông tin tài khoản người dùng
2 Song Thông tin bài hát
3 Genre Thông tin thể loại nhạc
4 Artist Thông tin ca sĩ
5 Playlist Thông tin danh sách phát
Bảng 4.15 Mô tả các bảng dữ liệu
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 _id ObjectID Khóa chính, không null, Tạo tự động Id tài khoản
2 email string Không null, định dạng đúng email,
Tên đăng nhập không trùng
3 password string Không null Mật khẩu
4 name string Không null Tên hiển thị
Phân quyền của tài khoản, 0 là quản trị viên
6 isDisable boolean Không null Trạng thái tài khoản
7 favouriteList ObjectId Không null Id trong bảng
8 accountImage string Không Đường dẫn tới avatar của tài khoản
Bảng 4.16 Chi tiết bảng Account
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 _id ObjectId Khóa chính, không null, Tạo tự động Mã tài khoản
2 songName string Không null Tên bài hát
3 songImage string Không Đường dẫn tới hình của bài hát
4 songLink string Không null Đường dẫn tới file bài hát
Danh sách Id của ca sĩ ứng với bảng Artist
Danh sách Id của ca sĩ ứng với bảng Genre
7 releaseDate number Không Ngày phát hành bài hát
8 playTime number Mặc định = 0 Số lần được nghe của bài hát
Bảng 4.17 Chi tiết bảng Song
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 _id ObjectId Không null, mã chính, tạo tự động Id ca sĩ
2 artistName string Không null Tên ca sĩ
3 artistImage number Không null Đường dẫn tới hình ca sĩ
4 artistLink number Không null, tạo tự động Đường dẫn tới trang bài hát của nghệ sĩ
Bảng 4.18 Chi tiết bảng Artist
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
1 _id ObjectId Không null, mã chính, tạo tự động Id thể loại nhạc
2 genreName string Không null Tên thể loại nhạc
Bảng 4.19 Chi tiết bảng Genre
STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú
Không null, mã chính, tạo tự động null
Id người tạo danh sách ứng với bảng Account
3 playlistName string Không null Tên danh sách phát
4 playlistImage String Không null Đường dẫn tới ảnh của danh sách phát
5 playlistSong array Không Danh sách Id bài hát ứng với bảng Song
Bảng 4.20 Chi tiết bảng Playlist
THIẾT KẾ GIAO DIỆN
Danh sách màn hình
STT Tên màn hình Ý nghĩa / Ghi chú
1 Đăng nhập Đăng nhập vào hệ thống
2 Đăng ký Đăng ký tài khoản mới
3 Trang chủ Trang chủ của website, chứa các danh mục nhạc
4 Bài hát Hiển thị danh sách bài hát, lọc theo các danh mục
5 Thể loại Hiển thị thể loại, danh sách bài hát theo thể loại
6 Ca sĩ Hiển thị danh sách ca sĩ
7 Chi tiết ca sĩ Hiển thị các bài hát của ca sĩ đã chọn
8 Thông tin cá nhân Hiển thị thông tin cá nhân, chỉnh sửa thông tin, mật khẩu
9 Chi tiết kết quả tìm kiếm Hiển thị các kết quả tìm kiếm
10 Quản lý Quản lý danh sách tài khoản, ca sĩ, bài hát
11 Trình phát nhạc Hiển thị trình phát nhạc, các tính năng của trình phát nhạc
12 Danh sách phát hiện tại
Hiển thị danh sách phát hiện tại, tiếp theo và đề xuất
13 Nhạc dành cho bạn Hiển thị danh sách nhạc đề xuất dựa theo danh sách yêu thích
Bảng 5.21 Danh sách màn hình
Chi tiết màn hình
Hình 5.13 Hình ảnh màn hình “Đăng nhập”
Màn hình dùng để đăng nhập vào hệ thống, với các thành phần cơ bản của một trang đăng nhập thường thấy:
Ô password để nhập Mật khẩu.
Nút Đăng nhập giúp người dùng truy cập hệ thống, với ba trường hợp phản hồi khác nhau Khi hệ thống phát hiện trường thông tin để trống, sẽ hiển thị thông báo yêu cầu nhập đầy đủ thông tin để đăng nhập Nếu nhập sai địa chỉ Email, hệ thống sẽ thông báo rằng tài khoản không tồn tại, ngăn chặn truy cập trái phép Trong trường hợp mật khẩu nhập sai, hệ thống sẽ cảnh báo về sai mật khẩu, đảm bảo bảo mật và hướng dẫn người dùng kiểm tra lại thông tin.
Nút Tạo tài khoản: hệ thống sẽ điều hướng đến trang Đăng ký khi người dùng bấm vào nút này.
Ô nhớ tên đăng nhập: để lưu tên tài khoản cho lần sau.
Ô quên mật khẩu: dùng để lấy lại mật khẩu
Hình 5.14 Hình ảnh màn hình “Đăng ký”
Màn hình dùng để đăng ký tài khoản mới, với các thành phần cơ bản của một trang đăng ký thường thấy:
Ô text để nhập thông tin: email
Các ô password để nhập Mật khẩu và nhập lại để xác nhận.
Nút Đăng ký là thành phần quan trọng trong quá trình đăng ký tài khoản Khi người dùng nhấn nút đăng ký, hệ thống sẽ kiểm tra tính hợp lệ của thông tin nhập vào Nếu thông tin để trống hoặc không đúng, hệ thống sẽ hiển thị lỗi đăng ký không thành công, đặc biệt là khi mật khẩu không khớp Ngược lại, nếu tất cả thông tin đều đầy đủ và mật khẩu khớp, hệ thống sẽ tự động đăng nhập người dùng và chuyển đến trang đăng nhập để hoàn tất quá trình đăng ký.
Nút Đăng nhập: hệ thống sẽ điều hướng đến trang Đăng nhập khi người dùng bấm vào nút này.
Hình 5.15 Hình ảnh màn hình “Trang chủ”
Phía trên cùng là phần header của website, bao gồm các thành phần:
Thanh tìm kiếm: để người dùng nhập từ khoá để tìm kiếm.
Trang chủ : khi nhấn vào sẽ điều hướng đến Trang chủ nếu đang ở trang khác.
Bài hát: đi đến trang danh sách bài hát.
Thể loại: đi đến trang thể loại.
Hình đại diện tài khoản: nhấn vào để mở ra menu tuỳ chọn.
Di chuyển chuột vào bài hát để hiển thị các tuỳ chọn như thêm vào danh sách phát, thêm vào danh sách yêu thích, phát bài hát.
Hình 5.16 Hình ảnh màn hình “Bài hát”
Màn hình danh sách Bài hát có thể lọc theo các tuỳ chọn.
Màn hình này bao gồm các phần chính:
Danh sách các bài hát được hiển thị theo bộ lọc.
Bộ lọc tìm kiếm theo lượt nghe, ngày phát hành.
Di chuyển trỏ chuột vào bài hát để phát, thêm vào danh sách phát…
Hình 5.17 Hình ảnh màn hình “Thể loại”
Phần trên hiển thị danh sách các thể loại, nhấn vào để chọn thể loại mong muốn để lọc Có tuỳ chọn bỏ chọn tất cả thể loại.
Hình 5.18 Hình ảnh màn hình “Ca sĩ”
Màn hình hiển thị danh sách các ca sĩ với tên và hình ảnh.
Nhấn vào để được đi đến trang các bài hát của ca sĩ đó
5.2.7 Màn hình “Chi tiết ca sĩ”
Hình 5.19 Hình ảnh màn hình “Chi tiết ca sĩ”
Phần trên màn hình là hình ảnh và tên ca sĩ, phần dưới là danh sách các bài hát của ca sĩ đó
5.2.8 Màn hình “Thông tin cá nhân”
Hình 5.20 Hình ảnh màn hình “Thông tin cá nhân”
Màn hình này bao gồm hai mục chính là đổi thông tin và đổi mật khẩu. Đối với thông tin có hai mục có thể đổi là:
Ảnh đại diện: click vào ảnh để chọn file cần đổi
Tên hiển thị: click vào và nhập tên cần đổi.
Bấm nút “Lưu thay đổi” để xác nhận đổi. Đổi mật khẩu:
Nhập vào các ô tương ứng.
Bấm nút “Đổi mật khẩu” để xác nhận đổi.
5.2.9 Màn hình “Chi tiết kết quả tìm kiếm”
Hình 5.21 Hình ảnh màn hình “Chi tiết kết quả tìm kiếm”
Khi người dùng nhấn Enter sau khi nhập từ khóa tìm kiếm, màn hình "Chi tiết kết quả tìm kiếm" sẽ hiện thị Màn hình này hiển thị danh sách các bài hát và ca sĩ phù hợp với từ khóa tìm kiếm của người dùng, giúp dễ dàng tìm thấy nội dung mong muốn.
Hình 5.22 Hình ảnh màn hình “Quản lý”
Màn hình “Quản lý bài hát” giúp quản trị viên thêm, xoá, chỉnh sửa danh sách bài hát của hệ thông Màn hình này bao gồm các thành phần:
Phía bên trái checkbox lựa chọn bài hát cho việc xoá hàng loại.
Kế bên là thông tin các bài hát.
Phía bên phải là tuỳ chọn sửa, xoá bài hát.
Nút hình nốt nhạc để tuỳ chọn thêm bài hát vào hệ thống.
Màn hình quản lý ca sĩ và tài khoản cũng tương tự
5.2.11 Màn hình “Trình phát nhạc”
Hình 5.23 Hình ảnh màn hình “Trình phát nhạc”
Màn hình “Trình phát nhạc” luôn hiển thị ở phần dưới cùng website với các phần:
Phía bên trái thông tin bài hát đang phát.
Phần giữa của giao diện gồm các nút điều khiển quan trọng như trộn danh sách phát, quay lại, dừng hoặc phát nhạc, và chuyển bài tiếp theo hoặc lặp lại Ngoài ra, còn hiển thị thời gian phát nhạc chính xác cùng thanh đo tiến trình để người dùng dễ dàng theo dõi và kiểm soát luồng nghe nhạc Bạn có thể nhấn vào thanh tiến trình để tua đến đoạn mong muốn một cách nhanh chóng và thuận tiện.
Tiếp theo là thanh âm lượng: Bấm vào biếu tượng loa để tắt/bật tiếng Bấm vào thanh đo để tăng/giảm âm lượng.
Cuối cùng là nút bấm để mở/đóng danh sách đang phát.
5.2.12 Màn hình “Danh sách phát hiện tại”
Hình 5.24 Hình ảnh màn hình “Danh sách phát hiện tại”
Màn hình “Danh sách phát hiện tại” gồm ba phần chính:
Phần trên cùng là danh sách các bài đã và đang phát với màu tối, xanh để phân
Phần giữa là danh sách các bài phát tiếp theo.
Phần dưới cùng là danh sách các bài hát được đề xuất dựa theo bài nhạc đang phát hiện tại.
Di chuyển chuột vào các bài hát để hiển thị các tùy chọn như thêm vào hoặc xóa khỏi danh sách đang phát và danh sách yêu thích Tính năng này giúp người dùng dễ dàng quản lý các bài hát ưa thích và tạo danh sách phát cá nhân một cách nhanh chóng và tiện lợi Việc hiển thị các tùy chọn này khi di chuột mang lại trải nghiệm người dùng thân thiện, giúp thao tác trở nên dễ dàng hơn trong quá trình thưởng thức âm nhạc trực tuyến.
5.2.13 Màn hình “Nhạc dành cho bạn”
Hình 5.25 Hình ảnh màn hình “Nhạc dành cho bạn”
Màn hình "Nhạc dành cho bạn" hiển thị các bài hát được cá nhân hóa dựa trên danh sách yêu thích của người dùng, giúp tăng trải nghiệm nghe nhạc phù hợp Tương tự các màn hình hiển thị khác, chế độ này lọc và đề xuất bài hát dựa trên sở thích cá nhân, mang lại sự tiện ích và dễ dàng khám phá âm nhạc mới Đây là tính năng tối ưu hóa trải nghiệm nghe nhạc, giúp người dùng nhanh chóng tiếp cận những ca khúc yêu thích và phù hợp nhất với sở thích của mình.
TÍNH NĂNG ĐỀ XUẤT BÀI HÁT
Giới thiệu về tính năng đề xuất
Với sự phát triển nhanh chóng của con người và công nghệ hiện nay, nhu cầu nâng cao trải nghiệm người dùng trở thành yếu tố hàng đầu trong quá trình phát triển ứng dụng Các hệ thống đề xuất, gợi ý (Recommendation System) ngày càng được xây dựng phổ biến nhằm tối ưu hóa trải nghiệm người dùng và giữ vững lợi thế cạnh tranh trong thị trường đông đảo các sản phẩm công nghệ.
Hệ thống đề xuất gồm có 2 loại chính:
Phương pháp lọc cộng tác (Collaborative Filtering) dựa trên ý tưởng sử dụng dữ liệu về thói quen và sở thích của người dùng để đưa ra các đề xuất phù hợp cho người dùng khác Nhờ đó, hệ thống có thể xác định mối quan hệ giữa các người dùng và xây dựng các gợi ý chính xác hơn theo từng nhu cầu cá nhân Đây là một trong những kỹ thuật phổ biến trong các hệ thống đề xuất hiện đại, giúp nâng cao trải nghiệm người dùng hiệu quả.
Hệ thống dựa trên nội dung (Content-based systems) sử dụng dữ liệu từ phẩm để đề xuất các sản phẩm tương tự, thay vì dựa trên hành vi của người dùng Phương pháp này chỉ cần biết một số nhãn hoặc từ khóa mà người dùng đã tương tác trước đó để xác định các sản phẩm phù hợp Điều này giúp hệ thống cung cấp đề xuất cá nhân hóa dựa trên đặc điểm của sản phẩm, tăng khả năng phù hợp và trải nghiệm người dùng.
Trong đề tài của mình, tôi đã áp dụng phương pháp hệ thống đề xuất dựa trên nội dung (Content-based systems), dựa trên các yếu tố như thể loại âm nhạc và ca sĩ để đề xuất các bài hát tương tự phù hợp với sở thích của người dùng Phương pháp này giúp cá nhân hóa trải nghiệm nghe nhạc, nâng cao sự hài lòng của người dùng thông qua các đề xuất chính xác và phù hợp.
Mỗi bài hát đăng tải lên website đều đi kèm với các thông tin cơ bản gồm tên bài hát, danh sách thể loại, và danh sách ca sĩ Các dữ liệu này được tổng hợp vào một file CSV có cấu trúc rõ ràng, giúp dễ dàng quản lý và truy xuất thông tin Việc tổ chức dữ liệu theo cách này tối ưu hóa khả năng tìm kiếm và phân loại bài hát dựa trên các yếu tố như tên bài hát, thể loại và ca sĩ Đây là bước quan trọng trong việc xây dựng hệ thống dữ liệu âm nhạc hiệu quả và chuyên nghiệp.
Hình 6.26 Hình ảnh file dữ liệu
Sau khi có được file dữ liệu, ta tiến hành xây dựng ma trận TF-IDF với công thức
Term Frequency (TF) là chỉ số đo lường tần suất xuất hiện của một từ trong một đoạn văn bản, giúp xác định từ khóa chính trong nội dung Đối với các đoạn văn dài hơn, những từ khóa có xu hướng xuất hiện nhiều hơn so với đoạn ngắn, do đó phương pháp chuẩn hóa bằng cách chia tần suất cho độ dài của đoạn văn thường được sử dụng để đảm bảo tính khách quan trong phân tích TF được tính bằng công thức cụ thể, giúp tối ưu hóa quá trình xác định từ khóa quan trọng trong nội dung, nâng cao hiệu quả SEO.
Trong phân tích dữ liệu âm nhạc, chúng tôi sử dụng các ký hiệu như t để đại diện cho thể loại hoặc ca sĩ, và d để tượng trưng cho từng bài hát Hàm f(t,d) thể hiện tần suất xuất hiện của thể loại hoặc ca sĩ t trong bài hát d Tổng số từ trong đoạn văn bản dữ liệu của file được biểu thị là T, giúp đo lường mức độ phổ biến của các thể loại hoặc ca sĩ trong toàn bộ tập dữ liệu Phương pháp này cho phép phân tích chính xác về mức độ ảnh hưởng và xu hướng âm nhạc dựa trên tần suất xuất hiện của các thể loại và ca sĩ trong danh mục dữ liệu lớn.
IDF (Inverse Document Frequency) là phương pháp đo lường mức độ quan trọng của một từ trong tập hợp các tài liệu Trong quá trình tính TF, tất cả các từ đều được xem xét như nhau; tuy nhiên, các từ phổ biến như "is", "of", "that" xuất hiện nhiều trong ngôn ngữ nhưng lại ít mang ý nghĩa đặc biệt Chính vì vậy, chúng ta cần sử dụng IDF để giảm trọng số của các từ phổ biến này, đồng thời tăng tầm quan trọng của những từ hiếm hơn nhưng mang ý nghĩa quan trọng trong từng đoạn văn bản.
(trong đó N là tổng số đoạn văn bản; tập |{t \in D : t \in d}| là số văn bản chứa từ t).
TF-IDF được tính bởi:
Sau khi lập ma trận bằng hàm TfidfVectorizer của Python ta có được trọng số của các thể loại, ca sĩ như sau:
Hình 6.27 Hình ảnh ma trận TF-IDF
Chúng tôi sử dụng phương pháp tính độ tương đồng giữa các vector trong ma trận bằng hàm cosine_similarity để đo lường mức độ tương đồng giữa các đề xuất Dựa trên kết quả này, hệ thống sẽ tạo ra danh sách đề xuất phù hợp và chính xác hơn cho người dùng Quá trình này giúp cải thiện trải nghiệm người dùng bằng cách đề xuất những nội dung liên quan, phù hợp với sở thích và nhu cầu của họ.
Hình 6.28 Hình ảnh ma trận độ tương đồng
Tiến hành thử đưa vào một bài hàt để nhận về danh sách bài hát tương tự.
Hình 6.29 Hình ảnh kết quả trả về của truy vấn đề xuất
KẾT LUẬN
Ưu điểm
Ứng dụng được xây dựng dựa trên công nghệ ReactJS, giúp phát triển một SPA (Single Page Application) tối ưu Nhờ đó, việc tải lại trang được hạn chế tối đa, góp phần nâng cao tốc độ phản hồi và mang lại trải nghiệm người dùng mượt mà hơn.
Giao diện tối giản, thân thiện và dễ sử dụng
Thiết kế tương đối đẹp mắt.
Đáp ứng được các chức năng cơ bản của một website nghe nhạc.
Hệ thống chia tách riêng biệt Client và Server, dễ dàng phát triển, bảo trì và nâng cấp.
Hạn chế
Lần đầu tiên học và sử dụng Python, ReactJS khiến tôi mất nhiều thời gian để tìm hiểu, xử lý lỗi và phát triển dự án Thuật toán đề xuất còn đang trong giai đoạn sơ khai, cần hoàn thiện hơn để nâng cao hiệu quả.
Hiện tại website có trải nghiệm tốt nhất trên các thiết bị máy tính, chưa tương thích giao diện với các màn hình nhỏ.
Website còn khá đơn giản.
Hướng phát triển
Trong tương lai, em mong muốn phát triển tiếp sản phẩm đồ án này:
Cải thiện hệ thống đề xuất.
Thêm tính năng nghe nhạc chung, voice chat, text chat.
Phát triển thành mạng xã hội âm nhạc, …
Nâng cao bảo mật cho trang web.