Tài liệu Website nghe nhạc trực tuyến

ĐẠ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 Lời cảm ơn 2 NHẬN XÉT CỦA GIẢNG VIÊN 3 Mục lục 4 Danh mục hình ảnh 6 Danh mục bảng biểu 7 Chương 1. 8 1.1. Tổng quan Lý do chọn đề tài 8 1.1.1. Nhu cầu thực tế 8 1.1.2. Hiện trạng tin học 8 1.2. Mục tiêu 9 1.3. Phạm vi 9 Chương 2. 2.1. Cơ sở lý thuyết Ngôn ngữ lập trình JavaScript 9 9 2.1.1. JavaScript là gì? 9 2.1.2. Lịch sử phát triển của JavaScript 9 2.1.3. Cách thức hoạt động của JavaScript trên trang web 2.2. API 10 10 2.2.1. API là gì? 10 2.2.2. API hoạt động như thế nào? 11 Khảo sát và phân tích hệ thống 12 Chương 3. 3.1. Khảo sát 12 3.1.1. Đối tượng nghiên cứu 12 3.1.2. Lựa chọn giải pháp công nghệ 12 3.2. Phân tích 12 3.2.1. Yêu cầu chất lượng 12 3.2.2. Danh sách Use case 13 3.3. Thiết kế giao diện 13 3.3.1. Màn hình Trang chủ 13 3.3.2. Màn hình danh sách yêu thích 14 3.3.3. Màn hình Lịch sử 14 3.3.4. Màn hình download 15 3.3.5. Màn hình Tìm kiếm 15 3.3.6. Màn hình Nghe nhạc 16 3.3.7. Màn hình Feedback 17 3.3.8. Màn hình setting 17 Tổng kết 18 Chương 4. 4.1. Kết quả 18 4.1.1. Kết quả 18 4.1.2. Điểm đặc sắc của đề tài 18 4.2. Hạn chế 18 4.3. Hướng phát triển 18 TÀI LIỆU THAM KHẢO 19 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. 1.1. Tổng quan Lý do chọn đề tài 1.1.1. Nhu cầu thực tế 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 1.1.2. Hiện trạng tin họ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. 1.2. Mục tiêu 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 1.3. Phạm vi 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. 2.1. Ngôn ngữ lập trình JavaScript 2.1.1. JavaScript là gì? 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. 2.1.2. Lịch sử phát triển của JavaScript 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. 2.1.3. Cách thức hoạt động của JavaScript trên trang web 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. 2.2. API 2.2.1. API là gì? 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. 2.2.2. API hoạt động như thế nào? 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. 3.1. Khảo sát và phân tích hệ thống Khảo sát 3.1.1. Đối tượng nghiên cứu • 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.... Website Ưu điể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. Nhược điểm 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ự 3.1.2. • • • • Lựa chọn giải pháp công nghệ 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 3.2. Phân tích 3.2.1. Yêu cầu chất lượng 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 STT Tên Use-case 1 Nghe nhạc 2 3 4 Ý nghĩa/Ghi chú 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. 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 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,.. Hẹn giờ dừng phát Thiết lập thời gian ngừng phát nhạc nhạc Bảng 3-2: Danh sách UseCase 3.3. Thiết kế giao diện 3.3.1. Màn hình Trang chủ 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 3.3.3. Màn hình Lịch sử 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 3.3.5. Màn hình Tìm kiếm 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 3.3.8. Màn hình setting Hình 3-8: Màn hình Setting Chương 4. 4.1. Tổng kết Kết quả 4.1.1. Kết quả • 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ử 4.1.2. • • • • Điểm đặc sắc của đề tài 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 4.2. Hạn chế 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 4.3. Hướng phát triển • 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. 2. 3. 4. 5. 6. 7. 8. 9. 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 Trang web Spotify, [Trực tuyến]. Địa chỉ: [https://open.spotify.com]. Truy cập lần cuối: 18/06/2022 Trang web Zingmp3, [Trực tuyến]. Địa chỉ: [https://zingmp3.vn]. Truy cập lần cuối: 18/06/2022 Hưng Nguyễn, “JavaScript là gì? Kiến thức chi tiết về JavaScript cơ bản”, [Trực tuyến]. Địa chỉ: [https://vietnix.vn/javascript-lagi/?gclid=Cj0KCQjwzLCVBhD3ARIsAPKYTcRXtTZj9m9rOswLIlDQTZMEXFzIdk yPSOWEod7TfYPzcJ7Swe8Fxv8aAh2lEALw_wcB]. Truy cập lần cuối: 18/06/2022 Trang web JavaScript, [Trực tuyến]. Địa chỉ: [https://www.javascript.com]. Truy cập lần cuối: 18/06/2022 Trang web W3School, [Trực tuyến]. Địa chỉ: [https://www.w3schools.com/js/]. Truy cập lần cuối: 18/06/2022. 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 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 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