Website nghe nhạc trực tuyến

Điều này cũng là bởi vì các website nghe nhạc không đáp ứng đủ nhu cầu giải trí của người dùng, bởi vậy đòi hỏi một website cho phép thực hiện việc đáp ứng nhu cầu giải trí của mọi người

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

-🙚🙘🕮🙚🙘 -

BÁO CÁO ĐỒ ÁN MÔN HỌC

ĐỒ ÁN 1

Đề tài: Website Nghe nhạc trực tuyến

Giảng viên hướng dẫn:

ThS Thái Thụy Hàn Uyển

Nhóm thực hiện:

19521220 Trần Thế Anh

19521737 Đoàn Ngọc Lãm

TP HCM, tháng 6 năm 2022

Lời cảm ơn

Lời đầu tiên, nhóm thực hiện đồ án xin gửi lời cảm ơn chân thành đến ThS.Thái Thụy Hàn Uyển,

đã hỗ trợ những thông tin cần thiết, giải đáp thắc mắc và góp ý cho các thành viên trong suốt quá trình thực hiện đề tài

Đồng thời, chúng em cũng muốn cảm ơn các anh chị khóa trên, bạn bè trong khoa đã chia sẻ những kinh nghiệm quý báu về môn học, đóng góp ý kiến để nhóm hoàn thành tốt đề tài

Vì điều kiện thời gian cũng như kiến thức còn hạn chế nên không thể tránh khỏi những thiếu sót Chính vì vậy, nhóm chúng em rất mong nhận được những đóng góp nhằm hoàn thiện hơn kiến thức còn thiếu của mình

Chân thành cảm ơn!

TP Hồ Chí Minh, ngày 18 tháng 06 năm 2022

Nhóm thực hiện

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

Mục lục

2.1.3 Cách thức hoạt động của JavaScript trên trang web 10

3.2 Phân tích 12

Danh mục hình ảnh

Hình 3-1: Màn hình Trang chủ 13

Hình 3-2: Màn hình Danh sách yêu thích 14

Hình 3-3: Màn hình lịch sử 14

Hình 3-4: Màn hình Download 15

Hình 3-5: Màn hình Tìm kiếm 15

Hình 3-6: Màn hình Nghe nhạc 16

Hình 3-7: Màn hình Feedback 17

Hình 3-8: Màn hình Setting 17

Danh mục bảng biểu

Bảng 3-1: Khảo sát website nghe nhạc tương tự 12 Bảng 3-2: Danh sách UseCase 13

Chương 1 Tổng quan

Nhằm phục vụ nhu cầu ngày càng cao của con người, hoạt động giải trí ngày càng phát triển mạnh mẽ trong xu hướng hội nhập ngày nay Trong thực tế, đa số giới trẻ ngày nay thường hay dành thời gian để lướt facebook, xem tiktok, sử dụng youtube để nghe nhạc thay vì website dành cho âm nhạc

Điều này cũng là bởi vì các website nghe nhạc không đáp ứng đủ nhu cầu giải trí của người dùng, bởi vậy đòi hỏi một website cho phép thực hiện việc đáp ứng nhu cầu giải trí của mọi người được tốt hơn Với việc website hướng đến có đủ các chức năng cần thiết để nghe nhạc, dữ liệu âm nhạc luôn được cập nhật và làm mới theo xu hướng giúp giới trẻ (độ tuổi nhóm hướng đến)

Nhằm phục vụ nhu cầu giải trí của giới trẻ, mang lại tính linh hoạt, đa dạng và tiện dụng khi giải trí, chúng em quyết định tìm hiểu về cách tổ chức thiết kế Trang web nghe nhạc online với những nội dung chính sau:

• Nghe nhạc

• Lặp nhạc

• Phát ngẫu nhiên

• Tăng giảm âm lượng

• Thêm, xóa, sửa list nhạc

Ngày nay, ứng dụng Công nghệ Thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức cũng như các công ty, cửa hàng; nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ

Việc xây dựng các website nghe nhạc trực tuyến để phục vụ cho các nhu cầu giải trí của các tổ chức, công ty thậm chí các cá nhân ngày nay không lấy gì làm xa lạ Quản lý là một trong những công việc tương đối phức tạp, tốn nhiều thời gian và công sức Bên

cạnh đó, khi cuộc sống của mỗi người dân đang từng bước được nâng cao thì nhu cầu

về mua sắm, vui chơi giải trí ngày càng được chú trọng Chính vì vậy, tin học hóa trong lĩnh vực giải trí online là một yêu cầu tất yếu và cần thiết

Nhằm tạo môi trường đơn giản, thoải mái, thuận lợi cho mục đích giải trí, thư giản của người dùng, website hướng đến sự thân thiện, dễ thao tác, nhóm em quyết định tìm hiểu

và thực hiện xây dựng website nghe nhạc trực tuyến với đủ các chức năng cơ bản phục

vụ cho như cầu nghe nhạc của người dùng

Phần mềm hướng tới đối tượng là học sinh, sinh viên, các tầng lớp công nhân, nhân viên văn phòng

Chương 2 Cơ sở lý thuyết

Qua sự trải nghiệm, cũng như tìm hiểm các website với mục đích tương tự: MP3, Spotify, …, thì nhóm chúng quyết định xây dựng website – là website nghe nhạc trực tuyến Website được xây dựng dựa trên ngôn ngữ lập trình JavaScript, HTML, CSS dưới sự hỗ trợ của các thư viện

về lập trình web như ReactJS và sử dụng API của bên thứ 3 để lấy dữ liệu

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động

JavaScript được phát tiển bởi Brendan Eich tại hãng truyền thông Netscape với tên đầu tiên là Mocha Sau đó, đổi tên thành LiveScript và cuối cùng là JavaSript được sử dụng phổ biến tới thời điểm bây giờ

Phiên bản mới nhất của JavaScript là ECMAScript (là phiên bản chuẩn hóa của JavaScript) Với ECMAScript 2 phát hành năm 1998 và ECMAScript 3 được ra mắt năm 1999 và hoạt động mạnh mẽ trên mọi trình duyệt và các thiết bị khác nhau

Năm 2016, JavaScript đạt kỷ lục đến 92% website sử dụng và được đánh giá từ một ngôn ngữ lập trình riêng trở thành công cụ quan trọng nhất trên các bộ công cụ lập trình web của các lập trình viên Nếu bạn sử dụng internet khi truy cập vào các website, có thể nhìn thấy các hiệu ứng slide ảnh chuyển động, menu sổ xuống… đều được tạo nên

từ JavaScript

JavaScript thường sẽ được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file js riêng JavaScript là ngôn ngữ từ phía client nên script sẽ được tải về máy client khi truy cập và được xử lý tại đó Thay vì tải về máy server và sau khi xử lý xong mới phản hồi kết quả đến client

Với hiện nay, thì các trình duyệt Internet cũng có thể hỗ trợ bạn tắt/mở JavaScript Lúc

đó bạn có thể thấy được nếu một trang web không có JavaScript thì sẽ như thế nào? Từ

đó bạn có thể hình dung dễ dàng hơn về cách JavaScript hoạt động

API là cách viết tắt của Application Programming Interface, nghĩa là giao diện lập trình ứng dụng Nó là tập các định nghĩa về phương thức, giao thức, công cụ xây dựng phần mềm ứng dụng Nhờ có API, các lập trình viên có thể dễ dàng xây dựng các chương trình máy tính API cũng cung cấp phương thức để ứng dụng từ xa yêu cầu dịch vụ đến

hệ thống cung cấp dịch vụ, giúp trao đổi dữ liệu giữa các hệ thống

API có 3 loại: Công khai, riêng tư và đối tác API công khai (hay API mở) có thể truy cập công khai đối với bất kỳ nhà phát triển nào Sử dụng các API công khai đi kèm với một số hạn chế và chúng có thể miễn phí hoặc mang tính thương mại Các API riêng tư

được sử dụng riêng trong một công ty hoặc tổ chức API đối tác chỉ có sẵn cho các đối tác kinh doanh cụ thể, được sử dụng thường xuyên nhất để tạo điều kiện tích hợp phần mềm giữa hai doanh nghiệp khác nhau

Các nhà phát triển tạo API dưới dạng sản phẩm có thể phục vụ những nhà phát triển khác Mục đích là làm cho các quy trình phát triển web phức tạp trở nên dễ dàng, hiệu quả và nhanh chóng hơn cho những nhà phát triển hoặc doanh nghiệp tiêu dùng

Hầu hết các doanh nghiệp hiện phụ thuộc vào API của bên thứ ba để giải quyết vấn đề

và phục vụ khách hàng của mình tốt hơn Tuy nhiên, việc sử dụng API không phức tạp như nhiều người nghĩ Bạn có thể coi nó như một giải pháp của bên thứ ba, cung cấp cho bạn một phản hồi cụ thể dưới dạng dữ liệu, khi bạn thực hiện một yêu cầu HTTP

cụ thể

Sử dụng API giống như đặt hàng tại một nhà hàng pizza Bạn không thể vào bếp để nói với họ những gì bạn muốn Bạn cần một người phục vụ nhận đơn đặt hàng của bạn và giao nó cho nhà bếp, sau đó quay lại với chiếc pizza bạn muốn

Bạn có thể xem một API là thứ liên kết giữa bạn và nhà bếp Trong trường hợp này, bạn

là khách hàng đang lui tới nhà hàng cung cấp người phục vụ (API) Sau đó, người phục

vụ sẽ phản hồi với lựa chọn pizza của bạn (dữ liệu) Trong một API thực, ứng dụng web

là client yêu cầu sử dụng nội dung của nhà cung cấp thông qua API, bằng cách thực hiện các yêu cầu HTTP endpoint

Chương 3 Khảo sát và phân tích hệ thống

• Website nghe nhạc tương tự: Zingmp3, Spotify

• Đối tượng nghiên cứu: các chức năng cần có của một website nghe nhạc như là phát nhạc, tải nhạc, tìm kiếm

Zing

MP3

Giao diện bố trí hợp lý, dễ nhìn

Nhiều tình năng hỗ trợ nghe nhạc, tạo

list nhạc, đề xuất nhạc, theo dõi ca sĩ

Nhiều tính năng nâng cao xem lời bài

hát trong thời gian thực, chế độ cửa sổ

Spotify Các chức năng gần như hoàn thiện

Các tính năng chính gồm: hỗ trợ nghe

nhạc, tạo list nhạc, theo dõi ca sĩ,

Hỗ trợ nhiều yêu cầu nghiệp vụ nâng

cao

Lyric, kết nối thiết bị khác

Giao diện phù hợp, dễ nhìn

Cần đăng nhập để nghe nhạc

và thực hiện các tác vụ khác

Bảng 3-1: Khảo sát website nghe nhạc tương tự

• Ngôn ngữ lập trình: JavaScript

• Thư viên: React, Material UI

• Mô hình phát triển phần mềm: Mô hình thác nước

• Cơ sở dữ liệu: Call Youtube API để lấy dữ liệu

Xây dựng một website nghe nhạc trực tuyến đơn giản, thân thiện, dễ nhìn, người dùng phổ thông dễ dàng sử dụng, cho phép người dùng nghe nhạc, tải nhạc; tìm kiếm thông tin về bài hát, về ca, nhạc sĩ hot nhấ; chia sẽ bài hát; thiết lập thời gian dừng; thay đổi theme; bài hát yêu thích

3.2.2 Danh sách Use case

1 Nghe nhạc Nghe được bài hát, thực hiện các tác vụ đối với bài hát như:

phát, dừng, tua nhạc, chuyển bài, lặp bài, nghe ngẫu nhiên

2 Tìm kiếm bài hát Tìm kiếm bài hát gần giống với nội dung được tìm kiếm

3 Chia sẽ bài hát Chia sẽ đường dẫn bài hát hiện tại cho người khác qua các nền

tảng như: facebook, twitter,

4 Hẹn giờ dừng phát

nhạc

Thiết lập thời gian ngừng phát nhạc

Bảng 3-2: Danh sách UseCase

Hình 3-1: Màn hình Trang chủ

3.3.2 Màn hình danh sách yêu thích

Hình 3-2: Màn hình Danh sách yêu thích

Hình 3-3: Màn hình lịch sử

3.3.4 Màn hình download

Hình 3-4: Màn hình Download

Hình 3-5: Màn hình Tìm kiếm

3.3.6 Màn hình Nghe nhạc

Hình 3-6: Màn hình Nghe nhạc

3.3.7 Màn hình Feedback

Hình 3-7: Màn hình Feedback

Hình 3-8: Màn hình Setting

Chương 4 Tổng kết

• Nhóm đã thực hiện được một số chức năng đặt ra trong kỳ này của đề tài

• Giao diện đơn giản, thân thiện, dễ sử dụng

• Thực hiện việc kiểm thử

• Tạo điều kiện dễ dàng hơn cho việc bảo trì, mở rộng trong tương lai

• Tìm kiếm bài hát dựa trên youtube API

• Có tính năng mới như hẹn giờ dừng phát nhạc

• Có responsive web design với thiết bị mobile

Bên cạnh những kết quả đạt được khi làm bài, đồ án của nhóm vẫn còn một số hạn chế sau:

• Chưa tạo được server cơ sở dữ liệu riêng cho website mà dùng youtube api để lấy dữ liệu

• Chưa triển khai thực hiện một số chức năng đề ra

• Vẫn còn một số lỗi chưa được khắc phục

• Hoàn hiện việc lỗi các chức năng hiện có

• Xây dựng thêm mốt số chức năng chưa được triển khai:

o Cá nhân hóa chức năng người dùng (playlist cho từng user)

o Quản lý nhạc theo ca sĩ, chủ đề, bài hát yêu thích

o Đăng nhập, đăng ký bằng google, facebook,

o Phát được video, xem được lyrics

• Xây dựng hệ thống cơ sở dữ liệu riêng cho website

TÀI LIỆU THAM KHẢO

1 Hà Nguyễn, “API hoạt động như thế nào? Cách tích hợp API vào ứng dụng”, 2021, [Trực tuyến] Địa chỉ: [https://quantrimang.com/api-hoat-dong-nhu-the-nao-176860] Truy cập lần cuối: 18/06/2022

2 Trang web Spotify, [Trực tuyến] Địa chỉ: [https://open.spotify.com] Truy cập lần cuối: 18/06/2022

3 Trang web Zingmp3, [Trực tuyến] Địa chỉ: [https://zingmp3.vn] Truy cập lần cuối: 18/06/2022

4 Hưng Nguyễn, “JavaScript là gì? Kiến thức chi tiết về JavaScript cơ bản”, [Trực tuyến]

[https://vietnix.vn/javascript-la-gi/?gclid=Cj0KCQjwzLCVBhD3ARIsAPKYTcRXtTZj9m9rOswLIlDQTZMEXFzIdk yPSOWEod7TfYPzcJ7Swe8Fxv8aAh2lEALw_wcB] Truy cập lần cuối: 18/06/2022

5 Trang web JavaScript, [Trực tuyến] Địa chỉ: [https://www.javascript.com] Truy cập lần cuối: 18/06/2022

6 Trang web W3School, [Trực tuyến] Địa chỉ: [https://www.w3schools.com/js/] Truy cập lần cuối: 18/06/2022

7 Trang web React A JavaScript library for building user interfaces, [Trục tuyến] Địa chỉ: [https://reactjs.org] Truy cập lần cuối 18/06/2002

8 Trang web MUI: The React component library you always wanted, [Trục tuyến] Địa chỉ: [https://mui.com] Truy cập lần cuối: 18/06/2022

9 Trang web API Reference | YouTube Data API | Google Developers, [Trục tuyến] Địa chỉ: [https://developers.google.com/youtube/v3/docs] Truy cập lần cuối: 18/06/2022