ĐỒ ÁN NGHIÊN CỨU SPOTIFY VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ ÂM NHẠC

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 CUỐI KỲ MÔN: ĐỒ ÁN ĐỀ TÀI: NGHIÊN CỨU SPOTIFY VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ ÂM NHẠC Lớp: SE121.L11.PMCL Giảng viên hướng dẫn: Mai Trọng Khang Sinh viên thực hiện: Nguyễn Đức Minh Nguyên – 17520823 MỤC LỤC BẢNG TIẾN ĐỘ CHƯƠNG MỞ ĐẦU CHƯƠNG I: NGHIÊN CỨU SPOTIFY 1.1 Khám phá Spotify api 1.1.1 Spotify api có chức gì? .6 1.1.2 Chi tiết chức Spotify api 1.2 Tài khoản Spotify Developer 10 1.2.1 Tài khoản Spotify Developer gì? 10 1.2.2 Cách tạo tài khoản Spotify Developer 10 1.3 Các tảng hỗ trợ 11 CHƯƠNG II: PHÂN TÍCH 13 2.1 Luồng Authorization 13 2.2 Thiết kế ứng dụng 14 CHƯƠNG III: CÀI ĐẶT 16 3.1 Công nghệ sử dụng 16 3.2 Thiết lập môi trường 16 CHƯƠNG IV: TRIỂN KHAI ĐỒ ÁN 18 4.1 Màn hình Login .18 4.2 Màn hình Home .19 4.3 Màn hình Album 20 4.4 Màn hình Search 21 4.5 Màn hình Favorites 22 4.6 Player .23 CHƯƠNG V: KẾT LUẬN 24 TÀI LIỆU THAM KHẢO 25 BẢNG TIẾN ĐỘ Số ngày để hoàn thành Tiến độ cơng việc (%) Tìm hiểu sơ 100 Tìm hiểu công nghệ liên quan 100 Viết báo cáo 14 100 Tải Spotify, đăng ký premium 100 Trải nghiệm ứng dụng 100 Thiết lập môi trường 100 Module liên kết Spotify api 100 Module network 100 Module redux 100 Module navigation 100 Module hook 100 Module login 100 Module home 100 Module search 100 Module helper 100 Module favorites 100 Module explore 100 Module artist-details 100 Module playlist-details 100 Công việc Tạo project Ghi Module src/components 17 Module player 100 50 Module model 16 100 Kiểm thử 90 Điều khiển từ điện thoại CHƯƠNG MỞ ĐẦU Spotify gì? - Spotify ứng dụng quản lý âm nhạc trực tuyến, cho phép người dùng nghe nhạc nhiều nên tảng điện thoại, máy tính, nhiều hệ điều hành Windows, Android, iOS, Spotify for Developer gì? - Spotify for Developer tài liệu Spotify cung cấp cho lập trình viên để họ tạo ứng dụng nghe nhạc họ - Spotify for Developer bao gồm: o Tài liệu liên quan đến hướng dẫn sử dụng, lệnh, hàm để kết nối api o Mã định danh tài khoản mã bí mật o Các ghi o Một diễn đàn cộng đồng dành cho nhà phát triển Mục đích đồ án? - Nghiên cứu cách hoạt động Spotify - Sử dụng Spotify api để xây dựng ứng dụng quản lý âm nhạc gồm chức năng: o Hiển thị trang chủ thay theo tài khoản o Tìm kiếm nhạc, tên album, tên tác giả, o Thư viện để hiển thị hát yêu thích, hát tải xuống, CHƯƠNG I: NGHIÊN CỨU SPOTIFY 1.1 Khám phá Spotify api 1.1.1 Spotify api có chức gì? - Spotify api có chức năng: o Audio Features & Analysis: Giúp người dùng lấy thông tin nhạc, ví dụ như: lượng, khả nhảy, tâm trạng, thuộc tính, bối cảnh, phân đoạn, o Playback: Cho phép lập trình viên chơi nhạc từ Spotify trực tiếp ứng dụng họ tảng web, mobile o Recommendations: Tùy biến sử dụng nguồn lực Spotify để khuyến nghị nhạc dựa sở thích người dùng o Search: Tìm kiếm nhạc dựa theo tên, tác giả, album, o Playlist: Quản lý danh sách phát người dùng ứng dụng o Metadata: Truy cập thông tin nhạc, nghệ sĩ, album, o Curated content: Phát nhạc dành riêng cho thị trường o User taste: Lấy liệu thị hiếu nghe nhạc người dùng Spotify 1.1.2 Chi tiết chức Spotify api - Lấy thông tin Album: - Lấy thông tin nghệ sĩ: - Duyệt hát: - Lấy thông tin seri dài tập: - Lấy danh sách hát người dùng theo dõi: - Lấy thông tin từ thư viện người dùng: - Lấy thông tin nghệ sĩ nhạc người dùng nghe nhiều nhất: - Trình phát nhạc: - Tìm kiếm: - Thơng tin người dùng: - Các chương trình: - Bài nhạc: 1.2 Tài khoản Spotify Developer 1.2.1 Tài khoản Spotify Developer gì? - Spotify cung cấp cho lập trình viên tài khoản lập trình viên kèm với tài khoản Spotify - Tài khoản Spotify Developer bao gồm nhiều ứng dụng, ứng dụng có ClientID Client Secret riêng 1.2.2 Cách tạo tài khoản Spotify Developer - Bước 1: Vào trang developer.spotify.com/dashboard/ - Bước 2: Đăng nhập tạo tài khoản Spotify - Bước 3: Nhấn vào “Create an app”, nhập tên App, mơ tả App, tích vào chấp nhận điều khoản, nhấn Create 10 1.3 Các tảng hỗ trợ - Spotify for Developer hỗ trợ nhiều tảng khác nhau, phù hợp với nhiều lập trình viên - Bao gồm: - Spotify cịn giúp lập trình viên phân loại tảng theo chức năng: 11 CHƯƠNG II: PHÂN TÍCH 12 2.1 Luồng Authorization Đối với tảng nào, Spotify api xác minh tài khoản người dùng theo luồng sau: 2.2 Thiết kế ứng dụng Đồ án Quản lý âm nhạc thiết kế với giao diện sau 13 14 15 CHƯƠNG III: CÀI ĐẶT 3.1 Công nghệ sử dụng Các công nghệ, ngơn ngữ lập trình sử dụng đồ án: - React Native (RN) CLI v0.63 sử dụng Redux - OpenJDK8 - Java Development Kit (JDK) 3.2 Thiết lập môi trường Để thực project, trước tiên cần phải có Node, giao diện command line cho RN, JDK, Android Studio - Nhà phát triển RN khuyên người dùng cài đặt RN Java SE Development Kit (JDK) thông qua Chocolatey o Chạy Command Prompt quyền admin o Gõ lệnh: choco install -y nodejs.install openjdk8 - Thiết lập môi trường phát triển Android: o Khi cài đặt Android Studio, đảm bảo ô sau đánh dấu: ▪ Android SDK ▪ Android SDK Platform ▪ Android Virtual Device ▪ Performance (Intel HAXM) o Cài đặt Android SDK: ▪ Mở Android Studio, click vào “Configure” chọn “SDK Manager” ▪ Chọn tab “SDK Platform”, đánh dấu vào ô “Show Package Details” ▪ Mở rộng mục “Android 10 (Q)” ▪ Đánh dấu ô: “Android SDK Platform 29”, “Intel x86 Atom_64 System Image” “Google APIs Intel x86 Atom System Image” ▪ Chọn tab “SDK Tools”, đánh dấu vào ô “Show Package Details” ▪ Mở rộng mục “Android SDK Build-Tools” đánh dấu ô “29.0.2” ▪ Nhấn Apply o Cài đặt biến môi trường: ▪ Mở Windows Control Panel / User Accounts / User Accounts ▪ Click vào Change my environment variables ▪ Click vào New 16 ▪ Nhập trường hình bên ▪ Restart máy ▪ Mở PowerShell ▪ Copy dán vào PowerShell Get-ChildItem -Path Env:\ ▪ Kiểm tra xem ANDROID_HOME thêm vào chưa o Thêm platform-tools Path ▪ Mở Windows Control Panel / User Accounts / User Accounts ▪ Click vào Change my environment variables ▪ Chọn biến Path ▪ Click vào Edit ▪ Click New thêm đường dẫn đến platform-tools vào danh sách o Giao diện Command Line React Native ▪ RN tích hợp sẵn giao diện Command Line Thay cài đặt phiên CLI cụ thể, người dùng khuyên nên sử dụng phiên cung cấp Node.js ▪ Khi dùng lệnh “npx react-native ”, phiên ổn định CLI tải xuống thực thi thời điểm chạy lệnh 17 CHƯƠNG IV: TRIỂN KHAI ĐỒ ÁN 4.1 Màn hình Login Mơ tả: Khi vừa cài app, hết hạn đăng nhập, app mở WebView dẫn đến trang đăng nhập Spotify, người dùng đăng nhập tạo tài khoản nhấn Login 18 4.2 Màn hình Home Mơ tả: Khi người dùng đăng nhập thành cơng, app điều hướng người dùng đến hình Home Tại đây, hệ thống lấy liệu thông tin người dùng để hiển thị lên hình Home Album Playlist mà người dùng nghe, đề xuất cho người dùng hát có nội dung, cảm xúc tương tự 19 4.3 Màn hình Album Mơ tả: Khi người dùng nhấn vào Album hay Playlist hình Home, người dùng điều hướng đến hình Album Tại đây, hệ thống hiển thị tồn thơng tin Album, Playlist đó, hình ảnh, tên Album, Playlist,tác giả, hát chứa Màn hình khơng tương tác 20 4.4 Màn hình Search Mơ tả: Khi người dùng nhấn vào biểu tượng tìm kiếm (hình kính lúp) điều hướng đến hình Search Tại đây, hệ thống đề xuất sẵn loạt album, playlist đủ thể loại để người dùng chọn lựa, người dùng nhấn vào chúng điều hướng đến hình Album Nếu người dùng nhấn vào tìm kiếm gõ tên hát nghệ sĩ, playlist, hệ thống trả kết mà người dùng mong muốn Ví dụ hình 21 4.5 Màn hình Favorites Mơ tả: Khi người dùng nhấn vào biểu tương u thích (hình trái tim), hệ thống điều hướng đến hình Favorites Tại hình này, tất hát mà người dùng nhấn u thích trước hiển thị lên 22 4.6 Player Mô tả: Player hiển thị tên hát tên nghệ sĩ mà phát thiết bị khác người dùng, điện thoại, máy tính Đi kèm hai năng: Play/Pause, Skip hát cho phép người dùng điều khiển trình phát nhạc từ xa 23 CHƯƠNG V: KẾT LUẬN Spotify API mở cho nhà phát triển hội để truy cập kho liệu khổng lồ Spotify, từ họ phát triển thành phần mềm tuyệt vời Noon Pacific, RunKeeper, Klarafy, Setify,… Những khó khăn gặp phải thực đồ án: - Mất nhiều thời gian tìm hiểu React Native công nghệ liên quan Nghiên cứu công nghệ Redux Hook - Ít tài liệu liên quan đến việc sử dụng Spotify API với React Native - Chưa tìm cách sử dụng API liên quan đến phát nhạc trực tiếp ứng dụng nên chưa thể phát nhạc người dùng nhấn vào nhạc hiển thị Do thời gian kiến thức có hạn nên em đồ án có nhiều thiếu sót Các chức chưa hoàn thiện sớm hoàn thành tương lai 24 TÀI LIỆU THAM KHẢO https://developer.spotify.com/discover/ https://developer.spotify.com/dashboard/ https://viblo.asia/p/su-dung-redux-voi-react-hook-trong-react-native gDVK2mPw5Lj https://www.youtube.com/c/hinodi/playlists https://github.com/ https://stackoverflow.com/ 25