Đồ án môn học nhập môn ứng dụng di động xây dựng ứng dụng media player

Bottom dialog hiển thị khi nhấn vào icon option của mỗi videobài hát trong màn hình chi tiết playlist ...18 Hình 2.16... Mô tả tính năng - Màn hình Overview là màn hình mặc định của ứng

ĐẠI HỌC QUỐC GIA TP.HCM

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN MÔN HỌC NHẬP MÔN ỨNG DỤNG DI ĐỘNG

(Lớp SE114.M22.PMCL)

Nhóm 1XÂY DỰNG ỨNG DỤNG MEDIA PLAYER

SINH VIÊN THỰC HIỆN:

Hà Phi Hùng – 20520526

Lê Quang Trung – 20520333Phạm Nhựt Danh – 20520151

Nguyễn Quang Vũ – 20520352

Phạm Trương Hải Đoàn – 20520046

GIẢNG VIÊN HƯỚNG DẪN:

ThS Nguyễn Tấn Toàn

Tp.HCM, tháng 06 năm 2022

ĐẠI HỌC QUỐC GIA TP.HCM

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN MÔN HỌC NHẬP MÔN ỨNG DỤNG DI ĐỘNG

(Lớp SE114.M22.PMCL)

Nhóm 1XÂY DỰNG ỨNG DỤNG MEDIA PLAYER

SINH VIÊN THỰC HIỆN:

Hà Phi Hùng – 20520526

Lê Quang Trung – 20520333Phạm Nhựt Danh – 20520151

Nguyễn Quang Vũ – 20520352

Phạm Trương Hải Đoàn – 20520046

GIẢNG VIÊN HƯỚNG DẪN:

ThS Nguyễn Tấn Toàn

Tp.HCM, tháng 06 năm 202

BẢNG PHÂN CÔNG THỰC HIỆN ĐỒ ÁN MÔN HỌC

4 Viết báo cáo

1 Xử lý tính năng thư viện nhạc

2 Xử lý tính năng đa ngôn ngữ

3 Xử lý tính năng cài đặt thiết lập

4 Viết báo cáo

2 Xử lý tính năng danh sách yêu thích

3 Xử lý tính năng danh sách xem sau

4 Viết báo cáo

1 Thiết kế giao diện

3 Xử lý tính năng thống kê số lượt phát

4 Viết báo cáo

PHẠM NHỰT DANH NGUYỄN QUANG VŨ

SV thực hiện 5

(Ký tên)

PHẠM TRƯƠNG HẢI ĐOÀN

LỜI CẢM ƠN

Trong thời đại số như hiện nay, lĩnh vực công nghệ thông tin không ngừngphát triển và mang lại những tiện lợi trong đời sống hàng ngày Một ví dụ điển hìnhcho những tiện ích ấy là các phần mềm, ứng dụng với giao diện dễ tương tác vànhiều tính năng mang lại sự thuận tiện cho người dùng

Là sinh viên ngành Kỹ thuật phần mềm, trong đồ án môn Nhập môn ứng

dụng di động, nhóm quyết định chọn đề tài: XÂY DỤNG ỨNG DỤNG MEDIA

PLAYER, qua đó vận dụng cũng như củng cố các kiến thức và kỹ năng đã được

học

Nhóm xin gửi lời cảm ơn chân thành đến Thầy Nguyễn Tấn Toàn đã tận tìnhgiảng dạy, hướng dẫn, tạo cho nhóm một nền tảng kiến thức vững chắc để thực hiện

đề tài, đồng thời giúp đỡ, góp ý để nhóm ngày một hoàn thiện ứng dụng

Nhóm cũng xin gửi lời cảm ơn đến các bạn học trong lớp SE114.M22.PMCL

đã chuẩn bị kĩ lưỡng các buổi seminar và giúp nhóm có được nhiều kiến thức cầnthiết cho việc thực hiện đồ án

Do hạn chế về kiến thức và thời gian, đồ án của nhóm vẫn còn nhiều điểmcần cải thiện Nhóm rất mong nhận được góp ý của thầy và các bạn để đồ án củanhóm ngày được hoàn thiện

NHÓM SINH VIÊN THỰC HIỆN

Hà Phi Hùng

Lê Quang Trung Phạm Nhựt Danh Nguyễn Quang Vũ Phạm Trương Hải Đoàn

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Tp.HCM, ngày … tháng … năm 2022

GVHD

ThS Nguyễn Tấn Toàn

MỤC LỤC

CHƯƠNG 1: TỔNG QUAN ỨNG DỤNG 1

1.1 Giới thiệu bài toán 1

1.2 Các tính năng chính của ứng dụng 1

1.3 Sơ đồ Use Case 2

CHƯƠNG 2: GIAO DIỆN VÀ CÁCH DÙNG 3

2.1 Màn hình Overview 3

2.1.1.Thiết kế giao diện 3

2.1.2.Mô tả tính năng 3

2.2 Màn hình Music Library 3

2.2.1.Mô tả tính năng 3

2.2.2.Tab Song 4

2.2.2.1 Thiết kế giao diện 4

2.2.2.2 Mô tả tính năng 4

2.2.3.Tab Albums 5

2.2.3.1 Thiết kế giao diện 6

2.2.3.2 Mô tả tính năng 6

2.2.4.Tab Artists 7

2.2.4.1 Thiết kế giao diện 7

2.2.4.2 Mô tả tính năng 7

2.3 Màn hình Video Library 8

2.3.1.Thiết kế giao diện 8

2.3.2.Mô tả tính năng 8

2.4 Màn hình Music Player 10

2.4.1.Thiết kế giao diện 10

2.4.2.Mô tả tính năng 10

2.5 Màn hình Video Player 12

2.5.1.Thiết kế giao diện 12

2.5.2.Mô tả tính năng 13

2.6 Tính năng Playlist (danh sách phát) 13

2.6.1.Màn hình danh sách playlist 13

2.6.1.1 Thiết kế giao diện 14

2.6.1.2 Mô tả tính năng 15

2.6.2.Màn hình chi tiết Playlist 16

2.6.2.1 Thiết kế giao diện 16

2.6.2.2 Mô tả tính năng 18

2.7 Màn hình Watch Later (Danh sách xem sau) 20

2.7.1.Thiết kế giao diện 20

2.7.2.Mô tả tính năng 20

2.8 Màn hình Favorite (Danh sách yêu thích) 21

2.8.1.Thiết kế giao diện 21

2.8.2.Mô tả tính năng 22

2.9 Màn hình Setting 22

2.9.1.Thiết kế giao diện 22

2.9.2.Mô tả tính năng 23

CHƯƠNG 3: CÁC VẤN ĐỀ GẶP PHẢI VÀ CÁCH GIẢI QUYẾT 24

3.1 Phát nhạc trong nền và điều khiển qua thông báo, Google Assistant bằng

kiến trúc media Client-Server 24

3.1.1.Sơ lược 24

3.1.2.Tóm tắt về Client-Server Architecture cho ứng dụng audio media 24

3.1.3.Tóm tắt cách áp dụng trong ứng dụng này 26

3.2 Load nhiều dữ liệu mà không làm đứng ứng dụng bằng RxJava 27

3.2.1.Sơ lược 27

3.2.2.Tóm tắt về RxJava 28

3.2.3.Ví dụ áp dụng vào ứng dụng này 29

3.3 Đảm bảo có sự phân tách giữa UI và xử lý dữ liệu bằng kiến trúc MVVM 30 3.3.1.Sơ lược 30

3.3.2.Kiến trúc MVVM trong lập trình Android 31

3.3.3.Áp dụng kiến trúc MVVM vào ứng dụng 32

KẾT LUẬN 35

 Ưu điểm của đồ án 35

 Hạn chế của đồ án 35

 Hướng phát triển của đồ án 35

TÀI LIỆU THAM KHẢO 36

MỤC LỤC HÌNH ẢN

Hình 1.1 Sơ đồ Use Case 2

Hình 2.1 Màn hình Overview 3

Hình 2.2 Giao diện Tab Song của màn hình Music Library 4

Hình 2.3 Giao diện Tab Albums của màn hình Music Library 6

Hình 2.4 Giao diện Tab Artists của màn hình Music Library 7

Hình 2.5 Màn hình Video Library và các lựa chọn trên app bar 8

Hình 2.6 Bottom dialog được hiển thị khi nhấn vào icon option của mỗi video 9

Hình 2.7 Màn hình Music Player 10

Hình 2.8 Context menu trong màn hình Music player 11

Hình 2.9 Giao diện của Music Player trong các dạng hiển thị khác 12

Hình 2.10 Màn hình Video Player 13

Hình 2.11 Màn hình danh sách playlist 14

Hình 2.12 Bottom dialog hiện lên khi thêm mới playlist 14

Hình 2.13 Bottom dialog hiện lên khi chọn icon option của mỗi playlist 15

Hình 2.14 Màn hình chi tiết playlist 17

Hình 2.15 Bottom dialog hiển thị khi nhấn vào icon option của mỗi video(bài hát) trong màn hình chi tiết playlist 18

Hình 2.16 Màn hình Watch Later 20

Hình 2.17 Màn hình Favorite 22

Hình 2.18 Màn hình Setting 23

Hình 3.1 Sơ đồ kiến trúc media Client-Server 25

Hình 3.2 Sơ đồ dùng RxJava để load dữ liệu từ MediaStore 29

Hình 3.3 Sơ đồ kiến trúc MVVM 30

Hình 3.4 Kiến trúc MVVM trong Android 32Hình 3.5 Lớp Playlist là một lớp Entity đại diện cho một playlist 33Hình 3.6 Lớp PlaylistDao gắn các phương thức với các câu truy vấn SQL 33Hình 3.7 Lớp AppRoomDatabase – kế thừa từ RoomDatabase và là database chungcủa ứng dụng 33Hình 3.8 Lớp PlaylistRepository để liên kết đến Room database và các nguồn dữ liệu khác (nếu có) 34Hình 3.9 Lớp PlaylistViewModel kế thừa từ lớp AndroidViewModel 34Hình 3.10 Sử dụng PlaylistViewModel bên trong PlaylistFragment 34

CHƯƠNG 1:

TỔNG QUAN ỨNG DỤNG

1.1 Giới thiệu bài toán

- Với việc ngành công nghệ thông tin không ngừng phát triển mang lại nhiềulại lợi ích cho xã hội và trở thành một phần không nhỏ trong cuộc sống hiệnđại, các nhu cầu của con người cũng ngày một phong phú Trong đó, nhucầu xem video, nghe nhạc, hay tương tác với các loại hình media vốn dĩ làmột phần không thể thiếu đối với bất kỳ ai sử dụng điện thoại thông minh

- Để đáp ứng nhu cầu nói trên, đã có nhiều ứng dụng ra đời như VLC MediaPlayer, MX Player… và thông qua đề tài này, nhóm cũng đã tự xây dựngnên ứng dụng Muvid – một ứng dụng media player với các tính năng mạnhmẽ

1.2 Các tính năng chính của ứng dụng

- Phát nhạc cùng với các điều khiển như tạm dừng, tua, lặp lại, ngẫu nhiên,phát bài sau/trước Hỗ trợ phát trong nền và điều khiển thông qua thông báohoặc Google Assistant

- Phát video cùng với các điều khiển như tạm dừng, tua, lặp lại, ngẫu nhiên,phát video sau/trước, chỉnh tốc độ phát Hỗ trợ phát trong chế độ Picture-in-Picture.

- Xem các video, nhạc, album, nghệ sĩ đang có trên máy

- Lập và phát theo danh sách phát (playlist)

- Lưu các bài hát, video yêu thích hoặc muốn xem sau

- Ghi nhận lịch sử phát để tua lại vị trí đã xem gần đây nhất và hiển thị cácvideo, bài hát được phát gần đây và phát nhiều nhất

- Hỗ trợ đa ngôn ngữ (Anh, Việt)

1.3 Sơ đồ Use Case

Hình 1.1 Sơ đồ Use Case

CHƯƠNG 2:

GIAO DIỆN VÀ CÁCH DÙNG2.1 Màn hình Overview

2.1.1 Thiết kế giao diện

Hình 2.1 Màn hình Overview

2.1.2 Mô tả tính năng

- Màn hình Overview là màn hình mặc định của ứng dụng, với vaitrò hiển thị lịch sử phát của video và bài hát gồm: các video, bài hátđược phát gần đây và các video, bài hát được phát nhiều lần nhất

- Đồng thời có một option trên app bar để xóa lịch sử phát

2.2 Màn hình Music Library

2.2.1 Mô tả tính năng

- Màn hình Music Library hiển thị các bài hát có trong thiết bị, đồngthời các bài hát còn có thể được gom nhóm theo album, nghệ sĩ.Tính năng được thực hiện thông qua việc chia màn hình MusicLibrary thành 3 trang tab khác nhau:

+ Tab Song: Hiển thị tất cả các bài hát.

+ Tab Albums: Hiển thị theo các album.

+ Tab Artists: Hiển thị heo các nghệ sĩ

2.2.2 Tab Song

2.2.2.1 Thiết kế giao diện

Hình 2.2 Giao diện Tab Song của màn hình Music Library

2.2.2.2 Mô tả tính năng

- Người dùng có thể tìm kiếm bài hát bằng cách nhập tên bài

hát cần tìm vào thanh search nằm trên thanh app bar

- Danh sách bài hát có hai chế đô ‚ hiển thị List (Danh sách) và

Grid (Lưới) Để chọn chế đô ‚ hiển thị theo ý muốn, ngườidùng nhấp vào icon trên thanh app bar, chọn Show as và⋮chọn chế đô ‚ hiển thị List (Danh sách) hoặc Grid (Lưới) tuỳtheo mong muốn

- Ứng dụng đã cung cấp các lựa chọn tiêu chí sắp xếp Danh

sách bài hát là theo Title (Tựa đề), Duration (Thời lượng),Time added (Thời gian thêm) của bài hát Để có thể sắp xếpDanh sách bài hát theo thứ tự, người dùng nhấp vào icon ⋮trên thanh app bar, chọn Sort by (Sắp xếp theo) và chọn tiêuchí , thứ tự sắp xếp mà người dùng muốn

- Để xem chi tiết của một bài hát, người dùng nhấp vào icon

⋮ nằm phía bên phải tên bài hát mà người dùng muốn xemchi tiết Sau khi nhấp, một hộp thoại nằm dưới cùng sẽ hiệnlên và chọn Detail (Chi tiết) trong hộp thoại đó

- Nếu người dùng muốn thêm bài hát đó vào Playlist thì chọn

Add to Playlist (Thêm vào Playlist) nằm trên hộp thoại hiệnsau khi nhấp vào icon nằm phía bên phải tên bài hát Một⋮hộp thoại khác chứa Danh sách các Playlist sẽ xuất hiện đểngười dùng chọn Playlist mà mình muốn thêm bài hát vào

- Tương tự như cách để xem chi tiết bài hát người dùng có thể

thêm bài hát vào Danh sách Favorite (Yêu thích) và Listenlater (Nghe sau) bằng cách chọn Favorite (Yêu thích) vàListen later (Nghe sau) có trên hộp thoại xuất hiện sau khinhấp vào nằm phía bên phải tên bài hát.⋮

2.2.3 Tab Albums

2.2.3.1 Thiết kế giao diện

Hình 2.3 Giao diện Tab Albums của màn hình Music Library

2.2.3.2 Mô tả tính năng

- Các thao tác tìm kiếm, thay đổi chế đô ‚ hiển thị, sắp xếp của

Tab Albums được thực hiện giống như ở Tab Song

- Khác với Tab Song, để xem chi tiết của album, người dùng

cần nhấp vào album mà mình muốn để chuyển sang mànhình chi tiết album

- … màn hình chi tiết album, người dùng có thể biết được các

thông tin như số bài hát, Thời lượng, ngày ra mắt, các bài hát

của album Để phát hết tất cả bài hát của album, người dùngnhấp vào icon có trên màn hình này Ngoài ra, người dùng▶cũng có thể xem chi tiết bài hát, thêm bài hát vào Playlist,Favorite (Yêu thích), Listen later (Nghe sau) bằng các thaotác tương tự như với Tab Song.

2.2.4 Tab Artists

2.2.4.1 Thiết kế giao diện

Hình 2.4 Giao diện Tab Artists của màn hình Music Library

2.2.4.2 Mô tả tính năng

- Tab Artists có các thao tác tương tự như Tab Albums.

2.3 Màn hình Video Library

2.3.1 Thiết kế giao diện

Hình 2.5 Màn hình Video Library và các lựa chọn trên app bar

2.3.2 Mô tả tính năng

- Màn hình Video Library hiển thị video có trong thiết bị, đồng thờithông qua các lựa trên thanh app bar, người dùng có thể tìm kiếmvideo, thay đổi trạng thái hiển thị (lưới hoặc danh sách), và sắp xếpvideo theo tên hoặc thời lượng Cách thao tác tương tự như với mànhình Music Library

- Khi người dùng nhấn vào icon option (icon ) bên cạnh mỗi⋮video, ứng dụng sẽ hiển một bảng bottom dialog gồm các lựa chọn:

xem thông tin chi tiết của video, thêm video vào playlist, thêmvideo vào danh sách yêu thích, thêm video vào danh sách xem sau.Cách thao tác tương tự như với màn hình Music Library.

Hình 2.6 Bottom dialog được hiển thị khi nhấn vào icon option của mỗi video

21

1 Bìa artwork của từng bài hát, đặt phía trên là animation sóng

âm đồng bộ với bài hát, audio

2 Tiêu đề của bài hát và nghệ sĩ trình bày.

3 Thanh mô tả thời lượng bài hát, kéo thả thanh trượt (slider)

để điều khiển mốc thời gian của bài hát mà người dùngmuốn

4 Icon option mở ra Context menu bao gồm 4 chức năng :

Playlist, Add to favorite, Listen later và Add to playlist:

Playlist: Chọn để quay trở về màn hình playlist chứa

bài hát đó, nếu bài hát chưa được thêm playlist nàohoặc không được phát từ playlist, xuất hiện thông báo

“You are not playing from a playlist” (Bạn đangkhông phát nhạc từ một playlist)

Add to favorite: Chọn để thêm bài hát vào danh sách

5 Thanh điều khiển phát nhạc bao gồm các thành phần (từ tráiqua phải): nút lặp bài hát, nút phát bài hát trước, nút phát/tạm dừng, nút phát bài hát tiếp theo, nút phát ngẫu nhiên:

 Nút lặp bài hát: chọn để lặp bài hát đang phát.

 Nút phát bài hát trước: chọn để phát bài hát trước

bài hát đang phát

 Nút phát/tạm dừng: Chọn để tạm dừng bài hát, chọn

tiếp để tiếp tục phát

 Nút phát bài hát tiếp theo: chọn để phát bài hát tiếp

theo bài hát đang phát

 Nút phát ngẫu nhiên: chọn để phát bài hát ngẫu

Hình 2.10 Màn hình Video Player

2.5.2 Mô tả tính ng

- Màn hình Video Player được sử dụng khi người dùng phát mộtvideo, trên màn hình gồm một số thành phần và chức năng:

1 Vùng chứa video đang phát

2 Thanh điều khiển phát video bao gồm các thành phần (từ tráiqua phải): nút phát video trước, nút quay lại 5 giây, nút phát/tạm dừng, nút tua thêm 5 giây, nút phát video tiếp theo

3 Thanh mô tả thời lượng phát video

4 Cài đặt cho màn hình Video Player bao gồm: Speed (tốc độphát), Audio (âm thanh)



 Speed: Chọn một trong 6 tốc độ phát có sẵn từ 0.25x

đến 1.5x cho video đang phát



 Audio: Chọn track audio để phát.

2.6 Tính năng Playlist (danh sách phát)

43

21

Hình 2.13 Bottom dialog hiện lên khi chọn icon option của mỗi playlist

2.6.1.2 Mô tả tính năng

- Màn hình này hiển thị các playlist (danh sách phát) dùng để

tạo playlist phù hợp với yêu cầu sử dụng

- Có thể thêm, xóa, sửa playlist:

 Thêm: dùng để tạo playlist mới với tên từ người dùng

nhập vào và loại playlist (có thể là bài hát hoặcvideo) Khi nhấn vào nút Create Playlist, hộp thoạitạo playlist sẽ hiện ra Người dùng nhập tên playlistcần tạo và loại playlist và bấm nút CREATE để tạo

 Xóa: dùng để xóa playlist được chọn Khi nhấn icon

⋮ ứng với playlist cần xóa Sau đó sẽ hiện hộp thoạixác nhận

 Sửa: dùng để đổi tên playlist được chọn Khi nhấn

vào icon ứng với playlist cần sửa ⋮

- Xem chi tiết playlist được chọn: khi bấm vào playlist tươngứng cần xem Ta có thể xem các bài hát (video) trong playlistđó

- Sắp xếp danh sách các playlist theo tên hoặc số lượng: đểtiện theo dõi các playlist, ở đây có thể sắp xếp theo tên hoặc

số lượng tăng dần hoặc giảm dần Khi bấm vào icon ở⋮app bar sẽ hiện ra các cách sắp xếp, ta chọn theo nhu cầu

- Tìm kiếm theo tên playlist: dùng để tìm kiếm playlist theotên Khi bấm vào biểu tượng tìm kiếm ở thanh app bar vànhập thông tin tìm kiếm phù hợp sẽ có được playlist cần tìm

- Phát tuần tự playlist: dùng để phát bài hát (video) theo thứ tự

đã được sắp xếp trước Khi bấm vào icon ở playlist tương⋮ứng được chọn và bấm nút Play All

2.6.2 Màn hình chi tiết Playlist

2.6.2.1 Thiết kế giao diện