ĐỒ Á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 1
ĐỀ 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
2

MỤC LỤC
BẢNG TIẾN ĐỘ............................................................................................................................ 4


CHƯƠNG MỞ ĐẦU......................................................................................................................
5

CHƯƠNG

I:

NGHIÊN

CỨU

SPOTIFY....................................................................................... 6

1.1 Khám phá Spotify api ........................................................................................................6 1.1.1
Spotify api có những chức năng gì? .....................................................................................................6 1.1.2 Chi
tiết các chức năng của Spotify api .................................................................................................6

1.2 Tài khoản Spotify Developer............................................................................................10 1.2.1
Tài khoản Spotify Developer là gì? ....................................................................................................10 1.2.2 Cách
tạo tài khoản Spotify Developer................................................................................................10

1.3 Các nền 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

3


BẢNG TIẾN ĐỘ
Số ngày
để hồn
thành

Tiến
độ
cơng
việc
(%)

Tìm hiểu sơ bộ

2

100

Tìm hiểu cơng nghệ liên quan

7

100

Viết báo cáo

14

100

Tải Spotify, đăng ký premium

1

100

Trải nghiệm ứng dụng

3

100

Thiết lập môi trường

1

100

Module liên kết Spotify api

3

100

Module network

2

100

Module redux

5

100

Module navigation

2

100

Module hook

2

100

Module login

3

100

Module home

2

100

Module search

2

100

Module helper

1

100

Module favorites

2

100

Module explore

1

100

Module artist-details

4

100

Module playlist-details

2

100

Công việc

Tạo project

Ghi chú


Module src/components

17

Module player

100
50

Module model

16

100

Kiểm thử

2

90

Điều
khiển từ
điện thoại

4

CHƯƠNG MỞ ĐẦU
Spotify là gì?
- Spotify là một ứng dụng quản lý âm nhạc trực tuyến, cho phép người dùng nghe nhạc
trên nhiều nên tảng như điện thoại, máy tính, và trên nhiều hệ điều hành như
Windows, Android, iOS,...

Spotify for Developer là gì?
- Spotify for Developer là bộ tài liệu do Spotify cung cấp cho các lập trình viên để họ
tạo ra ứng dụng nghe nhạc bởi chính họ.
- Spotify for Developer bao gồm:
o Tài liệu liên quan đến hướng dẫn sử dụng, các lệnh, hàm để kết nối api. o
Mã định danh tài khoản và mã bí mật.
o Các ghi chú.
o Một diễn đàn cộng đồng dành cho các nhà phát triển.

Mục đích của đồ án?
- Nghiên cứu về cách hoạt động của Spotify.
- Sử dụng Spotify api để xây dựng ứng dụng quản lý âm nhạc gồm các chức năng: o

Hiển thị trang chủ thay theo từng 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ị các bài hát được yêu thích, các bài hát được tải xuống,...


5

CHƯƠNG I: NGHIÊN CỨU SPOTIFY
1.1 Khám phá Spotify api
1.1.1 Spotify api có những chức năng gì?
- Spotify api có các chức năng:
o Audio Features & Analysis: Giúp người dùng lấy được các thơng tin của một
bài nhạc, ví dụ như: năng lượng, khả năng nhảy, tâm trạng, thuộc tính, bối
cảnh, phân đoạn,...
o Playback: Cho phép các lập trình viên chơi nhạc từ Spotify trực tiếp trên ứng
dụng của họ trên các nền tảng web, mobile.
o Recommendations: Tùy biến và sử dụng nguồn lực của Spotify để khuyến nghị
những bài nhạc dựa trên sở thích của người dùng.
o Search: Tìm kiếm các bản nhạc dựa theo tên, tác giả, album,...
o Playlist: Quản lý danh sách phát của người dùng ngay trên ứng dụng. o
Metadata: Truy cập thông tin của bất kỳ bài nhạc, nghệ sĩ, album,... o Curated
content: Phát những bài nhạc được dành riêng cho từng thị trường. o User taste:
Lấy dữ liệu về thị hiếu nghe nhạc của người dùng trên Spotify.

1.1.2 Chi tiết các chức năng của Spotify api
- Lấy thông tin Album:

- Lấy thông tin nghệ sĩ:

- Duyệt các bài hát:

6


- Lấy
thông tin seri dài tập:

- Lấy danh sách bài hát người dùng theo dõi:

7

- Lấy thông tin từ thư viện của người dùng:


- Lấy thông tin nghệ sĩ và bài nhạc được người dùng nghe nhiều nhất:

8

- Trình phát nhạc:


- Tìm kiếm:

- Thơng tin người dùng:

9

- 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 là gì?
- Spotify cung cấp cho các lập trình viên một tài khoản lập trình viên đi kèm với một tài
khoản Spotify.
- Tài khoản Spotify Developer có thể bao gồm nhiều ứng dụng, mỗi ứng dụng có một
ClientID và một 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 hoặc 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 2 ô chấp nhận
điều khoản, nhấn Create

10

1.3 Các nền tảng hỗ trợ
- Spotify for Developer hỗ trợ nhiều nền 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 nền tảng theo chức năng:

11


CHƯƠNG II: PHÂN TÍCH

12

2.1 Luồng Authorization

Đối với bất kỳ nền tảng nào, Spotify api đều 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 được thiết kế với giao diện như 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 được sử dụng trong đồ á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 hiện project, trước tiên cần phải có Node, giao diện command line cho
RN, JDK, và Android Studio.
- Nhà phát triển RN khuyên người dùng cài đặt RN và Java SE Development Kit

(JDK) thông qua Chocolatey
o Chạy Command Prompt dưới 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 các ô sau được đá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” và 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 các ô: “Android SDK Platform 29”, “Intel x86 Atom_64
System Image” và “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” và đánh dấu ô “29.0.2” ▪
Nhấn Apply
o Cài đặt các 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 các trường như hình bên dưới


▪ Restart máy
▪ Mở PowerShell

▪ Copy và dán vào PowerShell Get-ChildItem -Path Env:\
▪ Kiểm tra xem ANDROID_HOME được thêm vào chưa
o Thêm platform-tools và 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 và 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 vì cài đặt phiên bản
CLI cụ thể, người dùng được khuyên nên sử dụng phiên bản hiện tại
được cung cấp bởi Node.js.
▪ Khi dùng lệnh “npx react-native <command>”, phiên bản ổn định
hiện tại của CLI sẽ được tải xuống và thực thi tại 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, hoặc khi hết hạn đăng nhập, app sẽ mở một WebView dẫn đến
trang đăng nhập của Spotify, người dùng đăng nhập hoặc tạo tài khoản rồi 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 sẽ điều hướng người dùng đến
màn hình Home. Tại đây, hệ thống sẽ lấy dữ liệu về thông tin của người dùng để
hiển thị lên màn hình Home các Album hoặc Playlist mà người dùng đã từng nghe,
hoặc đề xuất cho người dùng những bài 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 bất kỳ trên màn hình Home,
người dùng sẽ được điều hướng đến màn hình Album. Tại đây, hệ thống sẽ hiển thị
tồn bộ thơng tin của Album, Playlist đó, như hình ảnh, tên Album, Playlist,tác giả,
các bài hát chứa trong nó. Màn hình này khơng tương tác đượ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) sẽ được điều
hướng đến màn hình Search. Tại đây, hệ thống sẽ đề xuất sẵn một loạt các album,
playlist đủ các thể loại để người dùng chọn lựa, khi người dùng nhấn vào chúng thì
sẽ được điều hướng đến màn hình Album. Nếu người dùng nhấn vào ơ tìm kiếm và
gõ tên bài hát hoặc nghệ sĩ, playlist, hệ thống sẽ trả về kết quả mà người dùng
mong muốn. Ví dụ như hình trên.

21

4.5 Màn hình Favorites

Mô tả: Khi người dùng nhấn vào biểu tương yêu thích (hình trái tim), hệ thống
điều hướng đến màn hình Favorites. Tại màn hình này, tất cả các bài hát mà người
dùng đã nhấn u thích trước đó sẽ được hiển thị lên.

22

4.6 Player


Mô tả: Player hiển thị tên bài hát và tên nghệ sĩ mà đang được phát trên
thiết bị khác của người dùng, như điện thoại, máy tính. Đi kèm là hai chứ
năng: Play/Pause, Skip bài 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ở ra cho các nhà phát triển cơ hội để truy cập và kho dữ liệu


khổng lồ của Spotify, từ đó họ có thể phát triển thành những phần mềm tuyệt vời
như Noon Pacific, RunKeeper, Klarafy, Setify,…
Những khó khăn gặp phải khi thực hiện đồ án:
- Mất nhiều thời gian tìm hiểu React Native và công nghệ liên quan Nghiên cứu công nghệ mới như Redux và 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
ra cách sử dụng API liên quan đến phát nhạc trực tiếp trên ứng dụng nên chưa
thể phát nhạc khi người dùng nhấn vào các bài nhạc được hiển thị

Do thời gian và kiến thức có hạn nên em đồ án có nhiều thiếu sót. Các chức
năng chưa được hồn thiện sẽ sớm được hoàn thành trong tương lai.

24

TÀI LIỆU THAM KHẢO
/>

/>
a/p/su-dung-redux-voi-react-hook-trong-react-native
gDVK2mPw5Lj
/>
/> />
25