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 Đề 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 năm 2022 Lời cảm ơn Lời đầu tiên, nhóm thực đồ á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ợ thông tin cần thiết, giải đáp thắc mắc góp ý cho thành viên suốt trình thực đề tài Đồng thời, chúng em muốn cảm ơn anh chị khóa trên, bạn bè khoa chia sẻ kinh nghiệm quý báu mơn học, đóng góp ý kiến để nhóm hồn thành tốt đề tài Vì điều kiện thời gian kiến thức cịn hạn chế nên khơng thể tránh khỏi thiếu sót Chính vậy, nhóm chúng em mong nhận đóng góp nhằm hồn thiện kiến thức cịn thiếu Chân thành cảm ơn! TP Hồ Chí Minh, ngày 18 tháng 06 năm 2022 Nhóm thực NHẬN XÉT CỦA GIẢNG VIÊN Mục lục Lời cảm ơn NHẬN XÉT CỦA GIẢNG VIÊN Mục lục Danh mục hình ảnh Danh mục bảng biểu Chương 1.1 Tổng quan Lý chọn đề tài 1.1.1 Nhu cầu thực tế 1.1.2 Hiện trạng tin học 1.2 Mục tiêu 1.3 Phạm vi Chương 2.1 Cơ sở lý thuyết Ngơn ngữ lập trình JavaScript 9 2.1.1 JavaScript gì? 2.1.2 Lịch sử phát triển JavaScript 2.1.3 Cách thức hoạt động JavaScript trang web 2.2 API 10 10 2.2.1 API gì? 10 2.2.2 API hoạt động nào? 11 Khảo sát phân tích hệ thống 12 Chương 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 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.1 Kết 18 4.1.1 Kết 18 4.1.2 Điểm đặc sắc đề 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 Tổng quan Lý chọn đề tài 1.1.1 Nhu cầu thực tế Nhằm phục vụ nhu cầu ngày cao người, hoạt động giải trí ngày phát triển mạnh mẽ xu hướng hội nhập ngày Trong thực tế, đa số giới trẻ ngày thường hay dành thời gian để lướt facebook, xem tiktok, sử dụng youtube để nghe nhạc thay website dành cho âm nhạc Điều website nghe nhạc khơng đáp ứng đủ nhu cầu giải trí người dùng, địi hỏi website cho phép thực việc đáp ứng nhu cầu giải trí người tốt Với việc website hướng đến có đủ chức cần thiết để nghe nhạc, liệu âm nhạc cập nhật làm 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í giới trẻ, mang lại tính linh hoạt, đa dạng tiện dụng giải trí, chúng em định tìm hiểu cách tổ chức thiết kế Trang web nghe nhạc online với nội dung 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 việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức cơng ty, cửa hàng; đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc xây dựng website nghe nhạc trực tuyến để phục vụ cho nhu cầu giải trí tổ chức, cơng ty chí cá nhân ngày khơng lấy làm xa lạ Quản lý công việc tương đối phức tạp, tốn nhiều thời gian cơng sức Bên cạnh đó, sống người dân bước nâng cao nhu cầu mua sắm, vui chơi giải trí ngày trọng Chính vậy, tin học hóa lĩnh vực giải trí online yêu cầu tất yếu 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 người dùng, website hướng đến thân thiện, dễ thao tác, nhóm em định tìm hiểu thực xây dựng website nghe nhạc trực tuyến với đủ chức phục vụ cho cầu nghe nhạc người dùng 1.3 Phạm vi Phần mềm hướng tới đối tượng học sinh, sinh viên, tầng lớp công nhân, nhân viên văn phòng Chương Cơ sở lý thuyết Qua trải nghiệm, tìm hiểm website với mục đích tương tự: MP3, Spotify, …, nhóm chúng định xây dựng website – website nghe nhạc trực tuyến Website xây dựng dựa ngôn ngữ lập trình JavaScript, HTML, CSS hỗ trợ thư viện lập trình web ReactJS sử dụng API bên thứ để lấy liệu 2.1 Ngơn ngữ lập trình JavaScript 2.1.1 JavaScript gì? JavaScript ngơn ngữ lập trình website phổ biến nay, tích hợp nhúng vào HTML giúp website trở nên sống động JavaScript đóng vai trò phần trang web, thực thi cho phép Client-side script từ phía người dùng phía máy chủ (Nodejs) tạo trang web động 2.1.2 Lịch sử phát triển JavaScript JavaScript phát tiển Brendan Eich hãng truyền thông Netscape với tên Mocha Sau đó, đổi tên thành LiveScript cuối JavaSript sử dụng phổ biến tới thời điểm Phiên JavaScript ECMAScript (là phiên chuẩn hóa JavaScript) Với ECMAScript phát hành năm 1998 ECMAScript mắt năm 1999 hoạt động mạnh mẽ trình duyệt thiết bị khác Năm 2016, JavaScript đạt kỷ lục đến 92% website sử dụng đánh giá từ ngôn ngữ lập trình riêng trở thành cơng cụ quan trọng cơng cụ lập trình web lập trình viên Nếu bạn sử dụng internet truy cập vào website, nhìn thấy hiệu ứng slide ảnh chuyển động, menu sổ xuống… tạo nên từ JavaScript 2.1.3 Cách thức hoạt động JavaScript trang web JavaScript thường nhúng trực tiếp vào trang web tham chiếu qua file js riêng JavaScript ngơn ngữ từ phía client nên script tải máy client truy cập xử lý Thay tải máy server sau xử lý xong phản hồi kết đến client Với nay, trình duyệt Internet hỗ trợ bạn tắt/mở JavaScript Lúc bạn thấy trang web khơng có JavaScript nào? Từ bạn hình dung dễ dàng cách JavaScript hoạt động 2.2 API 2.2.1 API gì? API cách viết tắt Application Programming Interface, nghĩa giao diện lập trình ứng dụng Nó tập định nghĩa phương thức, giao thức, cơng cụ xây dựng phần mềm ứng dụng Nhờ có API, lập trình viên dễ dàng xây dựng chương trình máy tính API 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 liệu hệ thống API có loại: Công khai, riêng tư đối tác API công khai (hay API mở) truy cập cơng khai nhà phát triển Sử dụng API công khai kèm với số hạn chế chúng miễn phí mang tính thương mại Các API riêng tư sử dụng riêng công ty tổ chức API đối tác có sẵn cho đối tác kinh doanh cụ thể, sử dụng thường xuyên để tạo điều kiện tích hợp phần mềm hai doanh nghiệp khác 2.2.2 API hoạt động nào? Các nhà phát triển tạo API dạng sản phẩm phục vụ nhà phát triển khác Mục đích làm cho quy trình phát triển web phức tạp trở nên dễ dàng, hiệu nhanh chóng cho nhà phát triển doanh nghiệp tiêu dùng Hầu hết doanh nghiệp phụ thuộc vào API bên thứ ba để giải vấn đề phục vụ khách hàng tốt Tuy nhiên, việc sử dụng API không phức tạp nhiều người nghĩ Bạn coi giải pháp bên thứ ba, cung cấp cho bạn phản hồi cụ thể dạng liệu, bạn thực yêu cầu HTTP cụ thể Sử dụng API giống đặt hàng nhà hàng pizza Bạn khơng thể vào bếp để nói với họ bạn muốn Bạn cần người phục vụ nhận đơn đặt hàng bạn giao cho nhà bếp, sau quay lại với pizza bạn muốn Bạn xem API thứ liên kết bạn nhà bếp Trong trường hợp này, bạn khách hàng lui tới nhà hàng cung cấp người phục vụ (API) Sau đó, người phục vụ phản hồi với lựa chọn pizza bạn (dữ liệu) Trong API thực, ứng dụng web client yêu cầu sử dụng nội dung nhà cung cấp thông qua API, cách thực yêu cầu HTTP endpoint Chương 3.1 Khảo sát 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: chức cần có website nghe nhạc 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 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 cao xem lời hát thời gian thực, chế độ cửa sổ Spotify Các chức gần hồn thiện Các tí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 thự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ở liệu: Call Youtube API để lấy liệu 3.2 Phân tích 3.2.1 Yêu cầu chất lượng Xây dựng 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 hát, ca, nhạc sĩ hot nhấ; chia hát; thiết lập thời gian dừng; thay đổi theme; hát yêu thích 3.2.2 Danh sách Use case STT Tên Use-case Nghe nhạc Ý nghĩa/Ghi Nghe hát, thực tác vụ 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 hát Tìm kiếm hát gần giống với nội dung tìm kiếm Chia hát Chia đường dẫn hát cho người khác qua tảng như: facebook, twitter, Hẹn 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 u thích Hình 3-2: Màn hình Danh sách 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.1 Tổng kết Kết 4.1.1 Kết • Nhóm thực số chức đặt kỳ đề tài • Giao diện đơn giản, thân thiện, dễ sử dụng • Thực việc kiểm thử 4.1.2 • • • • Điểm đặc sắc đề tài Tạo điều kiện dễ dàng cho việc bảo trì, mở rộng tương lai Tìm kiếm hát dựa youtube API Có tính hẹn 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 kết đạt làm bài, đồ án nhóm cịn số hạn chế sau: • Chưa tạo server sở liệu riêng cho website mà dùng youtube api để lấy liệu • Chưa triển khai thực số chức đề • Vẫn cịn số lỗi chưa khắc phục 4.3 Hướng phát triển • Hồn việc lỗi chức có • Xây dựng thêm mốt số chức chưa triển khai: o Cá nhân hóa chức người dùng (playlist cho user) o Quản lý nhạc theo ca sĩ, chủ đề, hát yêu thích o Đăng nhập, đăng ký google, facebook, o Phát video, xem lyrics • Xây dựng hệ thống sở liệu riêng cho website TÀI LIỆU THAM KHẢO Hà Nguyễn, “API hoạt động 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 gì? Kiến thức chi tiết JavaScript 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 ... để nghe nhạc thay website dành cho âm nhạc Điều website nghe nhạc khơng đáp ứng đủ nhu cầu giải trí người dùng, đòi hỏi website cho phép thực việc đáp ứng nhu cầu giải trí người tốt Với việc website. .. 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: chức cần có website nghe nhạc phát nhạc, tải nhạc, tìm kiếm Website Ưu điểm Zing MP3 Giao diện... lượng Xây dựng 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 hát, ca, nhạc sĩ hot