TỔNG QUAN
Lý do chọn đề tài
Âm nhạc hiện nay là nguồn giải trí thiết yếu và có ảnh hưởng lớn đến sự phát triển của con người Nó không chỉ phản ánh trí tuệ và tư tưởng mà còn tác động mạnh mẽ đến cảm xúc Âm nhạc đóng vai trò quan trọng trong việc mang lại hạnh phúc, giúp xua tan nỗi đau và mang đến niềm vui, sự tươi trẻ Thưởng thức những ca khúc yêu thích mang lại cảm giác thư giãn và nhiều trải nghiệm thú vị cho con người.
Mục tiêu đề tài
- Xây dựng website nghe nhạc trực tuyến đáp ứng những tính năng như nghe nhạc, đăng tải bài hát, tạo danh sách bài hát,
- Xây dựng giao diện dễ nhìn, dễ sử dụng cho người dùng.
Phạm vi
Đề tài tập trung xây dựng website với các chức năng chính như sau:
- Quản lý danh sách các bài hát
- Hiển thị danh sách các bài hát được nghe nhiều nhất trong ngày
- Hiển thị danh sách các bài hát được nghe và yêu thích nhiều nhất theo từng thể loại
- Hiển thị danh sách bài hát từ người dùng đang theo dõi
Đối tượng sử dụng
- Những người có sở thích nghe nhạc
- Những người có mong muốn chia sẻ, đăng tải bài hát yêu thích
- Những người có mong muốn chia sẻ bài hát tự sáng tác.
Phương pháp thực hiện
- Tìm hiểu, nghiên cứu các website nghe nhạc trực tuyến trên thị trường, các tính năng hiện có, các hạn chế,
- Phân tích các chức năng cần thực hiện
- Phân tích, đặc tả phần mềm
- Thiết kế kiến trúc phần mềm và cơ sở dữ liệu
- Phát triển các chức năng
- Thiết kế giao diện cho website
- Kiểm tra và sửa lỗi
Kết quả mong đợi
Ứng dụng có thể đáp ứng được các nhu cầu:
- Yêu cầu chức năng: Đáp ứng được các yêu cầu đề ra
- Giao diện đơn giản, dễ hiểu, dễ sử dụng
- Hiệu năng: ít lỗi, tốc độ xử lý nhanh
KIẾN THỨC NỀN TẢNG
Công cụ quản lý và phát triển
Visual Studio Code (VS Code) là một ứng dụng biên tập và soạn thảo mã nguồn, hỗ trợ nhanh chóng trong việc xây dựng và thiết kế website Trình soạn thảo này hoạt động mượt mà trên các nền tảng như Windows, macOS và Linux, đồng thời tương thích với các thiết bị máy tính có cấu hình tầm trung, giúp người dùng dễ dàng sử dụng.
Visual Studio Code cung cấp nhiều chức năng Debug mạnh mẽ, tích hợp Git và hỗ trợ Syntax Highlighting Nổi bật với tính năng tự hoàn thành mã thông minh, Snippets và khả năng cải tiến mã nguồn, nó cho phép lập trình viên tùy chỉnh Theme, phím tắt và nhiều tùy chọn khác Mặc dù là một trình soạn thảo nhẹ, Visual Studio Code vẫn sở hữu những tính năng mạnh mẽ.
Visual Studio Code là một ứng dụng phổ biến được nhiều người trong ngành IT tìm kiếm và sử dụng Nó không ngừng cải tiến và cung cấp nhiều tiện ích đa dạng, giúp lập trình viên làm việc hiệu quả hơn Một số ưu điểm nổi bật của Visual Studio Code bao gồm tính năng mở rộng linh hoạt, giao diện thân thiện và khả năng hỗ trợ nhiều ngôn ngữ lập trình khác nhau.
• Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như HTML, CSS, JavaScript, C++,…
• Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung
• Các tiện ích mở rộng rất đa dạng và phong phú
• Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc xử lý vòng lặp (Debug),…
• Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống
Visual Studio Code là một trong những trình biên tập mã nguồn phổ biến nhất hiện nay, nổi bật với nhiều ưu điểm so với các phần mềm khác Mặc dù phiên bản miễn phí không cung cấp nhiều tính năng nâng cao, nhưng Visual Studio Code vẫn đáp ứng hầu hết các nhu cầu cơ bản của lập trình viên.
Visual Studio là phần mềm lập trình hệ thống do Microsoft phát triển, với nhiều phiên bản khác nhau kể từ khi ra mắt Sự đa dạng này cho phép người dùng lựa chọn phiên bản phù hợp với máy tính và cấu hình của mình.
Visual Studio cho phép người dùng tùy chỉnh giao diện chính của máy theo nhu cầu sử dụng Một số tính năng nổi bật của phần mềm này bao gồm khả năng lập trình đa ngôn ngữ, hỗ trợ gỡ lỗi mạnh mẽ, và tích hợp với các công cụ phát triển khác.
Visual Studio là một IDE nổi bật với trình soạn thảo mã hỗ trợ tô sáng cú pháp và tính năng hoàn thiện mã thông minh thông qua IntelliSense, giúp lập trình viên dễ dàng làm việc với hàm, biến, phương pháp và các cấu trúc ngôn ngữ như truy vấn và vòng điều khiển.
Trình biên tập mã Visual Studio cho phép người dùng cài đặt dấu trang trong mã, giúp điều hướng nhanh chóng và dễ dàng hơn Nó hỗ trợ các tính năng như thu hẹp khối mã lệnh và tìm kiếm nâng cao, cải thiện hiệu suất làm việc.
Visual Studio cung cấp tính năng biên dịch nền, cho phép phần mềm biên dịch mã khi người dùng đang viết, nhằm cung cấp phản hồi tức thì về cú pháp và lỗi biên dịch, với các lỗi được đánh dấu bằng gạch gợn sóng màu đỏ.
Visual Studio cung cấp một trình gỡ lỗi mạnh mẽ, cho phép lập trình viên thực hiện gỡ lỗi ở cả cấp máy và cấp mã nguồn Tính năng này hỗ trợ các mã quản lý tương tự như ngôn ngữ máy, giúp gỡ lỗi hiệu quả cho các ứng dụng được phát triển bằng các ngôn ngữ mà Visual Studio hỗ trợ.
Git là hệ thống quản lý phiên bản phân tán phổ biến nhất hiện nay, thuộc loại Distributed Version Control System (DVCS) Việc sử dụng Git mang lại cho lập trình viên một kho lưu trữ toàn diện, chứa đầy đủ lịch sử thay đổi của hệ thống.
Git là một hệ thống quản lý phiên bản (VCS) với những điểm khác biệt so với các VCS truyền thống Điểm nổi bật nhất của Git là phương pháp đọc và lưu trữ dữ liệu, mang lại hiệu suất và tính linh hoạt cao hơn cho người dùng.
Hệ thống lưu trữ thông tin chủ yếu hoạt động bằng cách thay đổi dựa trên file và lưu trữ dữ liệu dưới dạng danh sách Những hệ thống này có khả năng tổng hợp, cập nhật thông tin và lưu trữ chúng thành một tập hợp danh sách, với các file có thể thay đổi theo thời gian.
Git hoạt động và lưu trữ thông tin theo cách khác biệt, coi thông tin như một tập hợp các snapshot Mỗi snapshot là một bản ghi toàn bộ nội dung của file tại một thời điểm cụ thể.
Khi sử dụng Git, mỗi lệnh sẽ tạo ra một snapshot của thông tin tại thời điểm đó Để tối ưu hóa hiệu suất, Git chỉ lưu trữ các tệp đã thay đổi, còn những tệp không thay đổi sẽ được liên kết với phiên bản đã lưu trữ trước đó.
Công nghệ sử dụng
Vue.js là một framework mã nguồn mở của JavaScript, nổi bật trong việc phát triển giao diện web tương tác Được biết đến với khả năng đơn giản hóa quy trình phát triển web, Vue.js tập trung vào lớp hiển thị và có thể dễ dàng tích hợp vào các dự án lớn để phát triển front-end mà không gặp khó khăn.
Cài đặt Vue.js rất đơn giản, cho phép các nhà phát triển dễ dàng tạo ra giao diện web tương tác trong thời gian ngắn Được phát triển bởi Evan You, cựu lập trình viên của Google, phiên bản đầu tiên của Vue.js ra mắt vào tháng 2 năm 2014 Đến nay, Vue.js đã thu hút được 64.828 sao trên Github, khẳng định sự phổ biến của nó trong cộng đồng lập trình.
Plugin hiển thị phổ âm thanh cho Vue.js được xây dựng dựa trên HTML5 Web Audio API, tương thích với tất cả các trình duyệt hỗ trợ API này Nó cung cấp nhiều component Vue giúp trực quan hóa các thành phần HTML liên quan đến âm thanh.
JavaScript là ngôn ngữ lập trình quan trọng được sử dụng để tạo ra các trang web tương tác, từ việc làm mới bảng tin trên mạng xã hội đến việc hiển thị hình ảnh động và bản đồ tương tác Với vai trò là ngôn ngữ kịch bản phía client, JavaScript đóng góp vào việc nâng cao trải nghiệm người dùng trên Internet Khi duyệt web, người dùng có thể nhận thấy các hiệu ứng của JavaScript qua quảng cáo quay vòng, menu thả xuống và sự thay đổi màu sắc của các phần tử trên trang.
Trước đây, các trang web chủ yếu mang hình thức tĩnh, giống như các trang trong một cuốn sách, với bố cục cố định và không đáp ứng đủ nhu cầu của người dùng như các trang web hiện đại Tuy nhiên, với sự phát triển của Javascript, công nghệ này đã trở thành một công cụ quan trọng cho các trình duyệt, giúp các ứng dụng web trở nên linh hoạt hơn Nhờ có Javascript, trình duyệt có khả năng phản hồi tương tác của người dùng và thay đổi bố cục nội dung trên trang web một cách linh hoạt.
Khi ngôn ngữ Javascript phát triển, các nhà phát triển đã tạo ra nhiều thư viện và khung lập trình, cho phép sử dụng ngôn ngữ này không chỉ trong trình duyệt mà còn ở cả phía máy chủ Hiện nay, lập trình viên có thể áp dụng Javascript cho cả phát triển ứng dụng phía khách và phía server.
Fuse.js là một công cụ mạnh mẽ cho việc tìm kiếm trong các đối tượng và mảng Khi bạn cung cấp dữ liệu JSON cùng với một hoặc nhiều từ khóa, Fuse.js sẽ trả về kết quả gần nhất với các từ khóa đó.
LocalForage là một thư viện Javascript mã nguồn mở, giúp đơn giản hóa việc giao tiếp với cơ sở dữ liệu trên trình duyệt, đặc biệt là với IndexedDB Thư viện này mang lại sự tiện lợi và hiệu quả trong việc lưu trữ dữ liệu, giúp các nhà phát triển dễ dàng quản lý và truy xuất thông tin.
• API gần giống với localStorage bao gồm: setItem(), getItem(), removeItem(), clear() và thêm một số API khác nữa
• Hỗ trợ ES6 Promise API
• Hỗ trợ sử dụng IndexedDB và Web SQL Tuy nhiên, nếu browser không hỗ trợ thì LocalForage sẽ quay về sử dụng localStorage
• Hỗ trợ trên nhiều trình duyệt khác nhau như: Chrome, Firefox, IE, và Safari (bao gồm cả Safari Mobile)
2.2.6 .NET Core và ASP.NET Core
.NET Core là phiên bản mới của NET Framework [12] Nó là một nền tảng miễn phí và mã nguồn mở được phát triển, duy trì bởi Microsoft
.NET Core là một framework đa nền tảng, hỗ trợ chạy trên Windows, Mac OS và Linux Framework này được sử dụng để phát triển ứng dụng cho nhiều loại thiết bị, bao gồm mobile, desktop, web, cloud, máy học tập và game.
Mặc dù NET Core được xem là phiên bản kế thừa của NET Framework, nhưng thực tế nó đã được viết lại hoàn toàn, mang lại những lợi ích nổi bật như hiệu suất nhanh, nhẹ và khả năng hoạt động trên nhiều nền tảng khác nhau.
ASP.NET Core là một framework mới được phát triển lại từ đầu, nhằm tối ưu hóa cho nền tảng NET Core.
Nó được thiết kế để tối ưu hóa hiệu suất cho các ứng dụng dựa trên đám mây, bao gồm ứng dụng web, Internet of Things và backend cho điện thoại di động.
Entity Framework ra đời để hỗ trợ tương tác giữa các ứng dụng trên nền tảng NET và cơ sở dữ liệu quan hệ Nó là công cụ giúp ánh xạ các đối tượng trong ứng dụng với các bảng trong cơ sở dữ liệu, tạo điều kiện thuận lợi cho việc quản lý dữ liệu.
Entity Framework là công cụ hỗ trợ các nhà phát triển Web tương tác với cơ sở dữ liệu quan hệ theo cách hướng đối tượng, giúp giảm thiểu mã nguồn so với các ứng dụng truyền thống Lợi ích lớn nhất của Entity Framework là giúp lập trình viên tiết kiệm thời gian và công sức trong việc truy cập và tương tác với cơ sở dữ liệu.
Hiện nay, Entity Framework là một framework mạnh để phát triển ứng dụng Web với sự hỗ trợ đông đảo của cộng đồng người dùng
PostgreSQL is an advanced, open-source object-relational database management system designed for general-purpose use.
PostgreSQL được phát triển dựa trên POSTGRES 4.2 tại phòng khoa học máy tính Berkeley, Đại học California
THIẾT KẾ ỨNG DỤNG
Phân tích yêu cầu hệ thống
3.1.1 Phân tích yêu cầu chức năng
3.1.1.1 Yêu cầu về lưu trữ
Tính năng lưu trữ đóng vai trò quan trọng trong hệ thống, ảnh hưởng trực tiếp đến các chức năng của nó Để đảm bảo hệ thống hoạt động hiệu quả và đáp ứng yêu cầu, việc lưu trữ thông tin là cần thiết.
Chức năng quản lý bài hát, danh sách, thông tin nghệ sĩ và thông tin người dùng yêu cầu kết nối internet để cập nhật dữ liệu mới nhất ngay lập tức Điều này đảm bảo khả năng xử lý theo thời gian thực, phù hợp cho nhiều người cùng truy cập và sử dụng các chức năng quản lý.
Dữ liệu sẽ được cập nhật và đồng bộ trực tiếp từ server mà không cần lưu trữ tại local Do đó, kích thước và khối lượng dữ liệu trả về sẽ phụ thuộc vào tình trạng ổn định của kết nối internet để đảm bảo trải nghiệm người dùng tốt nhất.
3.1.1.2 Yêu cầu về tính năng
Yêu cầu chức năng của website có thể bao gồm các tính năng sau:
• Quản lý bài hát: Người dùng có thể thêm, xóa, sửa các bài hát; thêm, xóa sửa phụ đề do người dùng quản lý
• Quản lý danh sách bài hát: Người dùng có thể thêm, xóa, sửa danh sách; ngoài ra còn có thể thêm, xóa các bài hát ra khỏi danh sách
• Quản lý thông tin nghệ sĩ: Tất cả người dùng website đều cần phải đăng nhập để thêm, sửa thông tin người dùng
• Quản lý thông tin người dùng: Người dùng có thể sửa thông tin do người dùng quản lý
3.1.2 Phân tích yêu cầu phi chức năng
Hệ thống cần đảm bảo hiệu suất cao để xử lý dữ liệu và đáp ứng yêu cầu từ người dùng một cách nhanh chóng và hiệu quả.
Hệ thống cần đảm bảo khả dụng cao, luôn sẵn sàng phục vụ người dùng bằng cách duy trì và cập nhật thường xuyên Việc sao lưu dữ liệu định kỳ và lập kế hoạch khôi phục khi có sự cố xảy ra là rất quan trọng để bảo vệ thông tin và duy trì hoạt động liên tục.
- Độ tin cậy: Hệ thống cần đảm bảo tính tin cậy cao bằng cách tránh các lỗi hoặc sự cố không mong muốn
Hệ thống cần thiết kế một giao diện người dùng thân thiện và dễ sử dụng, giúp người dùng dễ dàng tương tác và sử dụng hiệu quả.
- Mở rộng: Hệ thống cần có khả năng mở rộng để đáp ứng được sự tăng trưởng và mở rộng của dữ liệu và số lượng người dùng
3.1.3 Phân tích yêu cầu người dùng
3.1.3.1 Mô hình use case toàn bộ hệ thống
Hình 3.1 Mô hình use case toàn b ộ hệ thống
Bảng 3.1 Bảng mô tả các actor của website
Người dùng cần một website để quản lý bài hát, danh sách bài hát, thông tin nghệ sĩ, và thực hiện các hoạt động như nghe, tải bài hát cũng như theo dõi người dùng.
3.1.3.3 Danh sách các use case
Bảng 3.2 Bảng danh sách và mô tả các use case của website
STT ID Tên Mô tả
1 UC001 Sign in Người dùng sử dụng email để đăng nhập tài khoản
2 UC002 Sign up Người dùng sử dụng email để đăng ký tài khoản, đồng thời cần điền thêm tên hiển thị sử dụng trong website
Người dùng sử dụng email để đổi mật khẩu
Người dùng có thể xem thông tin cá nhân của mình qua mục "Thông tin người dùng", bao gồm ảnh đại diện, tên hiển thị, email, danh sách bài hát do người dùng quản lý và một mục mô tả.
Người dùng có thể cập nhật và chỉnh sửa thông tin cá nhân của mình, bao gồm ảnh đại diện, tên hiển thị, email, mật khẩu và mục mô tả.
Người dùng theo dõi hay bỏ theo dõi người dùng khác
Người dùng chỉ cần nhập từ khóa vào ô tìm kiếm và nhấn “Enter” hoặc nút tìm kiếm, sau đó website sẽ cung cấp kết quả phù hợp với từ khóa đã nhập.
8 UC008 Search by genre Người dùng tìm kiếm bằng cách chọn thể loại bên ô tìm kiếm, kết quả trả về tương ứng với thể loại đã chọn
9 UC009 Play track Người dùng nhấp chuột vào bải hát tương ứng, website gửi yều cầu về server, và trả lại stream và bắt đầu bật bài hát
10 UC010 Rate Người dùng bấm vào biểu tượng
“Like”, giao diện nút bấm sẽ đổi màu theo giá trị mặc định; đồng thời gửi yêu cầu về server để cập nhật giá trị cho bài hát đó
11 UC011 Download Người dùng bấm vào biểu tượng
“Download”, website gửi yều cầu về server để tải bài hát về địa điểm lưu trữ trên máy người dùng
12 UC012 Add to playlist Người dùng bấm vào biểu tượng
“Add”, website hiển thị giao diện bao
39 gồm danh sách các danh sách bài hát, ô và nút thêm danh sách
Trong giao diện thêm danh sách, người dùng có thể nhập tên danh sách muốn tạo Server sẽ phản hồi trạng thái dựa trên việc danh sách đó đã tồn tại hay chưa, đồng thời sẽ làm mới danh sách hiện có.
Người dùng có thể chỉnh sửa danh sách phát bằng cách nhấn vào biểu tượng “Edit”, sau đó điều chỉnh tên danh sách theo ý muốn Sau khi cập nhật, danh sách các bài hát sẽ được làm mới tự động.
Để xóa một bài hát khỏi danh sách, người dùng chỉ cần nhấn vào biểu tượng “Remove” bên cạnh tên bài hát Sau khi nhấn, website sẽ gửi yêu cầu đến server để cập nhật danh sách bài hát và sau đó sẽ tự động làm mới danh sách hiển thị.
Khi người dùng nhấn vào biểu tượng “Xóa” để xóa danh sách phát, website sẽ gửi yêu cầu tới server nhằm loại bỏ danh sách khỏi cơ sở dữ liệu Sau đó, hệ thống sẽ làm mới danh sách và hiển thị trạng thái cập nhật cho người dùng.
17 UC017 Upload track Người dùng bấm vào nút “Upload
40 track”, website hiển thị giao diện để tạo bài hát
18 UC018 Choose a genre Trong giao diện tạo bài hát, có trường thể loại để người dùng chọn thể loại cho bài hát, giá trị mặc định là
Trong giao diện tạo bài hát, người dùng bấm vào biểu tượng “Link”, website hiển thị danh sách các nghệ sĩ
Trong giao diện tìm kiếm nghệ sĩ, người dùng có thể nhập từ khóa vào trường tên và nhấn nút “Enter” hoặc biểu tượng tìm kiếm để nhận kết quả tương ứng.
Phân tích thiết kế hệ thống
Hình 3.2 Biểu đồ tuần tự chức năng “Sign in”
Hình 3.3 Biểu đồ tuần tự chức năng “Sign up”
Hình 3.4 Biểu đồ tuần tự chức năng “Change password”
Hình 3.5 Biểu đồ tuần tự chức năng “Search tracks”
Hình 3.6 Biểu đồ tuần tự chức năng “Search artist”
75 Hình 3.7 Biểu đồ tuần tự chức năng “Rate”
Hình 3.8 Biểu đồ tuần tự chức năng “Download”
Hình 3.9 Biểu đồ tuần tự chức năng “Add to playlist”
Hình 3.10 Biểu đồ tuần tự chức năng “Create playlist”
Hình 3.11 Biểu đồ tuần tự chức năng “Edit playlist”
Hỉnh 3.12 Biểu đồ tuần tự chức năng “Delete playlist”
Hỉnh 3.13 Biểu đồ tuần tự chức năng “Remove track”
Hỉnh 3.14 Biểu đồ tuần tự chức năng “Edit information”
Hỉnh 3.15 Biểu đồ tuần tự chức năng “Follow/unfollow user”
Hỉnh 3.16 Biểu đồ tuần tự chức năng “Create artist’s biography”
Hình 3.17 Biểu đồ tuần tự chức năng “Upload track”
79 Hỉnh 3.18 Biểu đồ tuần tự chức năng “Edit track”
Hình 3.19 Biểu đồ tuần tự chức năng “Delete track”
80 Hỉnh 3.20 Biểu đồ tuần tự chức năng “Create captions” và “Edit captions”
Hỉnh 3.21 Biểu đồ tuần tự chức năng “Generate captions”
3.2.2 Thiết kế cơ sở dữ liệu
3.2.2.1 Lược đồ cơ sở dữ liệu
Hỉnh 3.22 Lược đồ cơ sở dữ liệu [21]
3.2.2.2 Mô tả các bảng dữ liệu
Bảng 3.29 Danh sách các thuộc tính “Member”
Mô tả: Lưu thông tin người dùng
STT Tên Kiểu dữ liệu Ràng buộc Ý nghĩa
1 member_id serial primary ID người dùng
2 email text not null Địa chỉ email người dùng
3 password text not null Mật khẩu người dùng được mã hóa
4 display_name text not null Tên hiển thị của người dùng
5 biography text not null Mô tả của người dùng
6 avatar text not null Địa chỉ ảnh đại diện của người dùng
7 following_ids integer[] ID của những người dùng đang theo dõi
8 date_created timestamp not null Thời gian đối tượng được khởi tạo
Bảng 3.30 Danh sách các thuộc tính “Memberstats”
Mô tả: Lưu thông tin của người dùng tương tác với bài hát
STT Tên Kiểu dữ liệu Ràng buộc Ý nghĩa
1 member_id serial primary ID người dùng
2 track_id serial primary ID bài hát
3 genre_id serial foreign ID thể loại
4 view_counts_total integer not null Lượt xem của người dùng
5 rating integer not null Điểm đánh giá
6 date_created timestamp not null Thời gian đối tượng được khởi tạo
Bảng 3.31 Danh sách các thuộc tính “Genre”
Mô tả: Lưu thông tin thể loại bài hát
STT Tên Kiểu dữ liệu Ràng buộc Ý nghĩa
1 genre_id serial primary ID thể loại
2 genre_name text not null Tên thể loại
3 date_created timestamp not null Thời gian đối tượng được khởi tạo
Bảng 3.32 Danh sách các thuộc tính “ArtistInfo”
Mô tả: Lưu thông tin nghệ sĩ
STT Tên Kiểu dữ liệu Ràng buộc Ý nghĩa
1 artistinfo_id serial primary ID nghệ sĩ
2 artist_name text not null Tên nghệ sĩ
3 description text not null Mô tả
4 main_site_address text not null Đường dẫn chính tới website của nghệ sĩ
5 avatar text not null Đường dẫn tới ảnh đại diện
6 date_created timestamp not null Thời gian đối tượng được khởi tạo
Bảng 3.33 Danh sách các thuộc tính “Playlist”
Mô tả: Lưu thông tin danh sách bài hát
STT Tên Kiểu dữ liệu Ràng buộc Ý nghĩa
1 playlist_id serial primary ID danh sách
2 member_id serial foreign ID người dùng
3 name text not null Tên danh sách
4 tracks_ids integer[] ID các bài hát
5 date_created timestamp not null Thời gian đối tượng được khởi tạo
Bảng 3.34 Danh sách các thuộc tính “Track”
Mô tả: Lưu thông tin bài hát
STT Tên Kiểu dữ liệu
1 track_id serial primary ID bài hát
2 member_id serial foreign ID người dùng
3 genre_id serial foreign ID thể loại
4 artistinfo_id serial foreign ID nghệ sĩ
5 track_name text not null Tên bài hát
6 artist_name text not null Tên nghệ sĩ
7 description text not null Mô tả
8 url text not null Đường dẫn tới file bài hát
9 thumbnail text not null Đường dẫn tới thumbnail
11 view_counts_per_day integer not null Lượt xem mỗi ngày
12 has_captions boolean not null Cờ kiểm tra phụ đề
13 captions_length integer not null Độ dài phụ đề
14 date_created timestamp not null Thời gian đối tượng được khởi tạo
Bảng 3.35 Danh sách các thuộc tính “ClosedCaption”
Mô tả: Lưu thông tin phụ đề
STT Tên Kiểu dữ liệu Ràng buộc Ý nghĩa
1 caption_id serial primary ID phụ đề
2 track_id serial foreign ID bài hát
3 captions jsonb not null Danh sách các phụ đề
4 date_created timestamp not null Thời gian đối tượng được khởi tạo
3.2.3 Thiết kế kiến trúc hệ thống
Hình 3.23 Sơ đồ kiến trúc tổng thể
Azure App Services: Azure App Service là một dịch vụ dựa trên HTTP để lưu trữ các ứng dụng web, API REST và mobile back-end
Azure Cognitive Services: Azure Cognitive Services bao gồm một bộ các
API ứng dụng trí tuệ nhân tạo thông minh, cho phép lập trình viên tạo ra được
88 những ứng thông minh hơn một cách dễ dàng Azure Cognitive Services được dùng để nhận diện giọng nói
Azure WebJobs: Webjobs là một tính năng của Azure cho phép người dùng chạy một ứng dụng song song với Web Service, App Service
Azure Blob Storage: Azure Blob Storage là một dịch vụ hay đơn giản là một công cụ cho phép lưu trữ dữ liệu không cấu trúc trên cloud
ElephantSQL: ElephantSQL là một DBaaS cho phép người dùng lưu trữ dữ liệu có cấu trúc trên đám mây ElephantSQL mặc định sử dụng PostgreSQL
Hình 3.24 Sơ đồ kiến trúc website
Vue.js là một framework mã nguồn mở của Javascript, nổi bật trong việc phát triển giao diện web tương tác Được ưa chuộng nhờ khả năng đơn giản hóa quy trình phát triển web, Vue.js đã trở thành một trong những lựa chọn hàng đầu cho các lập trình viên.
Vue Router là bộ định tuyến chính thức cho Vue.js, cho phép tích hợp sâu với framework này, giúp việc xây dựng các ứng dụng đơn trang (SPAs) trở nên dễ dàng và hiệu quả hơn.
Javascript: Javascript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác
LocalForage là thư viện Javascript mã nguồn mở, giúp đơn giản hóa và tiện lợi hóa việc giao tiếp với cơ sở dữ liệu trên trình duyệt, đặc biệt là với IndexedDB.
