SỬ DỤNG SPOTIFY để xây DỰNG ỨNG DỤNG QUẢN lý âm NHẠC SE121 l21

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: SỬ DỤNG SPOTIFY ĐỂ XÂY DỰNG ỨNG DỤNG QUẢN LÝ ÂM NHẠC SE121.L21 Giáo viên hướng dẫn: ThS Mai Trọng Khang Sinh viên thực hiện: Đoàn Quang Nhật – 15520577 Tp Hồ Chí Minh, tháng 6/2021 NHẬN XÉT (của giảng viên hướng dẫn) ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… LỜI CẢM ƠN Lời em xin chân thành gửi lời cảm ơn đến trường Đại học Công Nghệ Thông Tin tạo điều kiện cho em có mơi trường học tập thật tốt, xin cảm ơn tất thầy cô hết lòng quan tâm, dạy dỗ trang bị cho chúng em kiến thức quý báu, cần thiết cho việc làm đồ án công việc tương lai Em xin chân thành cảm ơn thầy Mai Trọng Khang tận tình hướng dẫn, bảo giúp đỡ chúng em trình tìm hiểu, triển khai thực đề tài Trong thời gian học tập với cô, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập tinh thần làm việc, thái độ nghiên cứu nghiêm túc, hiệu quả, điều cần thiết cho em trình học tập làm việc sau Em chân thành cảm ơn thầy cô trường Đại học Cơng Nghệ Thơng Tin nói chung thầy Khoa Cơng Nghệ Phần Mềm nói riêng trang bị cho em kiến thức quý báu thời gian vừa qua Mặc dù em cố gắng hoàn thành đồ án phạm vi khả cho phép tránh khỏi sai sót Em mong bạn cảm thơng tận tình bảo Tp Hồ Chí Minh, ngày 28 tháng 06 năm 2021 MỤC LỤC LỜI CẢM ƠN .3 Tổng quan đề tài .4 1.1 Giới thiệu đề tài 1.2 Mục tiêu đề tài 1.3 Công cụ sử dụng Giới thiệu Spotify 2.1 Spotify gì? .4 2.2 Spotify web api 2.2.1 Giới thiệu chung 2.2.2 Authorization 2.2.3 Authorization Code Flow 2.2.4 Các tính Thiết kế giao diện 12 3.1 Màn hình đăng nhập .12 3.2 Màn hình .13 3.3 Màn hình tìm kiếm 14 Tổng quan đề tài 1.1 Giới thiệu đề tài Hiện nay, âm nhạc phần thiếu sống, âm nhạc giúp giải tỏa căng thẳng, kích thích sáng tạo, kết nối người với Thời buổi cơng nghệ số, có nhiều nhà cung cấp dịch vụ âm nhạc Zingmp3, Apple Music… Spotify số Spotify cung cấp dịch vụ âm nhạc dựa trí tuệ nhân tạo AI, giúp người dùng tạo playlist dựa sở thích âm nhạc người dùng, gợi ý hát liên quan, làm cho trải nghiệm người dùng tốt Đồng thời cung cấp nhạc quyền, chất lượng âm nhạc cao Nhận thấy mạnh mẽ đến từ việc áp dụng AI vào âm nhạc Spotify, nên em định lựa chọn đề tài để làm đồ án cho môn học 1.2 Mục tiêu đề tài Xây dựng ứng dụng giúp người dùng quản lý playlist chơi nhạc theo playlist Giúp người dùng dễ dàng tìm kiếm chơi hát u thích 1.3 Cơng cụ sử dụng - Visual Studio Code: IDE xây dựng phần mềm - ReactJS: Xây dựng giao diện website - NodeJs: Xây dựng backend - Bootstrap: Built-in styles Giới thiệu Spotify 2.1 Spotify gì? Spotify dịch vụ phát trực tiếp nhạc, podcast video kỹ thuật số cho phép bạn truy cập hàng triệu hát nội dung khác từ nghệ sĩ khắp giới Các chức phát nhạc hồn tồn miễn phí, bạn chọn nâng cấp premium Bạn làm theo cách khác:  Chọn nội dung bạn muốn nghe cách Duyệt tìm Tìm kiếm  Nhận đề xuất từ tính cá nhân hóa, Discover Weeky, Radar Phát hành, Daily Mix  Xây dựng sưu tập âm nhạc  Xem bạn bè, nghệ sĩ người tiếng nghe  Tạo đài Radio riêng bạn 2.2 Spotify web api 2.2.1 Giới thiệu chung Dựa nguyên tắc REST, endpoint Spotify Web API trả liệu dạng JSON thông tin nghệ sĩ, album, nhạc trực tiếp từ Spotify Data Catalogue Data resources truy cập thông qua tiêu chuẩn HTTPS định dạng UTF-8 tới API endpoint Web API sử dụng phương thức sau: GET, POST, PUT, DELETE 2.2.2 Authorization Để ứng dụng fetch sử dụng liệu Spotify, cần phải cấp quyền cho ứng dụng mình: Ứng dụng đăng kí với Spotify theo cách: - App Authorization: Spotify cho phép ứng dụng bạn truy cập Spotify Platform (API, SDK Widget) - User Authorization: Spotify, người dùng, cấp cho ứng dụng bạn quyền truy cập sửa đổi liệu người dùng Scope: Định nghĩa phạm vi truy cập vào endpoint cụ thể API 2.2.3 Authorization Code Flow 1.Ứng dụng gửi request cho dịch vụ Spotify Accounts GET https://accounts.spotify.com/authorize Query parameter bao gồm: client_id, response_type, redirect_uri, state, scope 2.Spotify return access refresh token 3.Sử dụng access token để truy cập Spotify Web API, Spotify trả request data 4.Yêu cầu refresh access token, Spotify trả access token Nếu yêu cầu thành công JSON mà Spotify trả có dạng sau: { "body": { "name": "Golpe Maestro", "popularity": 42, "preview_url": "https://p.scdn.co/mp3preview/4ac44a56e3a4b7b354c1273d7550bbad38c51f5d", "track_number": 1, "type": "track", "uri": "spotify:track:3Qm86XLflmIXVm1wcwkgDK" }, "headers": { "date": "Fri, 27 Feb 2015 09:25:48 GMT", "content-type": "application/json; charset=utf-8", "cache-control": "public, max-age=7200" }, "statusCode": 200 } 2.2.4 Các tính Fetch music metadata  Albums, artists, and tracks  Audio features and analysis for tracks  Albums for a specific artist  Top tracks for a specific artist  Artists similar to a specific artist Profiles  User's emails, product type, display name, birthdate, image Search  Albums, artists, tracks, and playlists Playlist manipulation  Get a user's playlists  Create playlists  Change playlist details  Add tracks to a playlist  Remove tracks from a playlist  Replace tracks in a playlist  Reorder tracks in a playlist Your Music library  Add, remove, and get tracks and albums that are in the signed in user's Your Music library  Check if a track or album is in the signed in user's Your Music library Personalization  Get a user’s top artists and tracks based on calculated affinity Browse  Get New Releases  Get Featured Playlists  Get a List of Categories  Get a Category  Get a Category's Playlists  Get recommendations based on seeds  Get available genre seeds Player  Get a User's Available Devices  Get Information About The User's Current Playback State  Get Current User's Recently Played Tracks  Get the User's Currently Playing Track  Pause a User's Playback  Seek To Position In Currently Playing Track  Set Repeat Mode On User’s Playback  Set Volume For User's Playback  Skip User’s Playback To Next Track  Skip User’s Playback To Previous Track  Start/Resume a User's Playback  Toggle Shuffle For User’s Playback  Transfer a User's Playback Follow  Follow and unfollow users  Follow and unfollow artists  Check if the logged in user follows a user or artist  Follow a playlist  Unfollow a playlist  Get followed artists  Check if users are following a Playlist Player  Add an Item to the User's Playback Queue  Get a user's available devices  Get information about the user's current playback  Get current user’s recently played tracks  Transfer a user's playback  Resume a user's playback  Skip a user's playback to next track  Skip a user's playback to previous track  Set a user's shuffle mode  Set a user's repeat mode  Set volume  Seek playback to a given position Thiết kế giao diện Danh sách trang chương trình: 3.1 Màn hình đăng nhập Sau nhấn đăng nhập 3.2 Màn hình 3.3 Màn hình tìm kiếm Play Hiển thị Lyrics ... Authorization Để ứng dụng fetch sử dụng liệu Spotify, cần phải cấp quyền cho ứng dụng mình: Ứng dụng đăng kí với Spotify theo cách: - App Authorization: Spotify cho phép ứng dụng bạn truy cập Spotify. .. cấp nhạc quyền, chất lượng âm nhạc cao Nhận thấy mạnh mẽ đến từ việc áp dụng AI vào âm nhạc Spotify, nên em định lựa chọn đề tài để làm đồ án cho môn học 1.2 Mục tiêu đề tài Xây dựng ứng dụng. .. người dùng quản lý playlist chơi nhạc theo playlist Giúp người dùng dễ dàng tìm kiếm chơi hát u thích 1.3 Cơng cụ sử dụng - Visual Studio Code: IDE xây dựng phần mềm - ReactJS: Xây dựng giao diện