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 1
ĐỀ 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 đầu tiên 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 mọi đ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 cả thầy cô đã hết lòng quan tâm, dạy dỗ và trang bị cho chúng em
những kiến thức quý báu, cần thiết cho việc làm đồ án này cũng như công việc
trong 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, chỉ
bảo và giúp đỡ chúng em trong quá trình tìm hiểu, triển khai và thực hiện đề tài
này. 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 được tinh thần làm việc, thái độ nghiên cứu nghiêm túc, hiệu
quả, đây là những điều rất cần thiết cho em trong quá trình học tập và làm việc sau
này.
Em cũng chân thành cảm ơn những thầy cơ trường Đại học Cơng Nghệ
Thơng Tin nói chung và các thầy cô trong Khoa Công Nghệ Phần Mềm nói riêng
đã trang bị cho em những kiến thức quý báu trong thời gian vừa qua.
Mặc dù em đã cố gắng hoàn thành đồ án này trong phạm vi khả năng cho
phép nhưng vẫn không thể tránh khỏi những sai sót. Em mong cơ và các bạn cảm
thơng và tận tình chỉ 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
1. Tổng quan đề tài.........................................................................................................................................4
1.1. Giới thiệu đề tài...................................................................................................................................4
1.2. Mục tiêu đề tài.....................................................................................................................................4
1.3. Công cụ sử dụng..................................................................................................................................4
2. Giới thiệu về Spotify...................................................................................................................................4
2.1. Spotify là gì?.........................................................................................................................................4

2.2. Spotify web api....................................................................................................................................5
2.2.1. Giới thiệu chung...........................................................................................................................5
2.2.2. Authorization................................................................................................................................6
2.2.3. Authorization Code Flow............................................................................................................8
2.2.4. Các tính năng................................................................................................................................9
3. Thiết kế giao diện.....................................................................................................................................12
3.1. Màn hình đăng nhập.........................................................................................................................12
3.2. Màn hình chính.................................................................................................................................13
3.3. Màn hình tìm kiếm............................................................................................................................14

1. Tổng quan đề tài
1.1. Giới thiệu đề tài
Hiện nay, âm nhạc là một phần không thể thiếu trong cuộc 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 mọi người với nhau.
Thời buổi cơng nghệ số, có rất nhiều nhà cung cấp các dịch vụ âm nhạc như
Zingmp3, Apple Music… và Spotify là một trong số đó. Spotify cung cấp các dịch
vụ âm nhạc dựa trên trí tuệ nhân tạo AI, giúp người dùng có thể tạo ra các playlist
dựa trên sở thích âm nhạc của người dùng, gợi ý những bài hát liên quan, làm cho
trải nghiệm người dùng tốt hơn. Đồng thời cung cấp những bản nhạc bản quyền,
chất lượng âm nhạc cao
Nhận thấy sự mạnh mẽ đến từ việc áp dụng AI vào âm nhạc của Spotify, nên
em đã quyết định lựa chọn đề tài này để làm đồ án cho môn học này.


1.2. Mục tiêu đề tài
Xây dựng một ứng dụng giúp người dùng quản lý những playlist của mình
và chơi nhạc theo những playlist đó
Giúp người dùng dễ dàng tìm kiếm và chơi những bà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

2. Giới thiệu về Spotify
2.1. Spotify là gì?
Spotify là dịch vụ phát trực tiếp nhạc, podcast và video kỹ thuật số cho phép
bạn truy cập hàng triệu bài hát và các nội dung khác từ các nghệ sĩ trên khắp thế
giới.
Các chức năng cơ bản như phát nhạc hồn tồn miễn phí, nhưng bạn
cũng có thể chọn nâng cấp premium. Bạn cũng có thể làm theo cách khác:
 Chọn nội dung bạn muốn nghe bằng cách Duyệt tìm và Tìm kiếm.
 Nhận các đề xuất từ các tính năng cá nhân hóa, như Discover Weeky, Radar
Phát hành, và Daily Mix.
 Xây dựng bộ sưu tập âm nhạc.
 Xem bạn bè, nghệ sĩ và những người nổi tiếng đang nghe những gì.
 Tạo các đài Radio của riêng bạn.


2.2. Spotify web api
2.2.1. Giới thiệu chung

Dựa trên nguyên tắc REST, endpoint của Spotify Web API sẽ trả về dữ liệu
dạng JSON thông tin về nghệ sĩ, album, và các bản nhạc trực tiếp từ Spotify Data
Catalogue

Data resources được truy cập thông qua các tiêu chuẩn HTTPS ở định dạng
UTF-8 tới một API endpoint. Web API sử dụng các phương thức sau: GET, POST,
PUT, DELETE

2.2.2. Authorization
Để ứng dụng có thể fetch và sử dụng dữ liệu của Spotify, chúng ta cần phải
cấp quyền cho ứng dụng của mình:


Ứng dụng có thể đăng kí với Spotify theo 2 cách:
- App Authorization: Spotify cho phép ứng dụng của bạn truy cập Spotify
Platform (API, SDK và Widget)
- User Authorization: Spotify, cũng như người dùng, cấp cho ứng dụng của
bạn quyền truy cập hoặc sửa đổi dữ liệu của chính người dùng
Scope: Định nghĩa phạm vi truy cập vào các endpoint cụ thể của API


2.2.3. Authorization Code Flow

1.Ứng dụng gửi request cho dịch vụ Spotify Accounts
GET />Query parameter bao gồm: client_id, response_type, redirect_uri, state, scope
2.Spotify return access và refresh token
3.Sử dụng access token để truy cập Spotify Web API, Spotify sẽ trả về request data
4.Yêu cầu một refresh access token, Spotify sẽ trả về một access token mới
Nếu yêu cầu thành công JSON mà Spotify trả về sẽ có dạng như sau:

{
"body": {
"name": "Golpe Maestro",
"popularity": 42,
"preview_url":
" />"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 năng
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

3. Thiết kế giao diện
Danh sách các trang của chương trình:


3.1. Màn hình đăng nhập

Sau khi nhấn đăng nhập


3.2. Màn hình chính


3.3. Màn hình tìm kiếm

Play và Hiển thị Lyrics