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

ĐẠ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 XÂY DỰNG ỨNG DỤNG MEDIA PLAYER SINH VIÊN THỰC HIỆN: Hà Phi Hùng – 20520526 Lê Quang Trung – 20520333 Phạ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 XÂY DỰNG ỨNG DỤNG MEDIA PLAYER SINH VIÊN THỰC HIỆN: Hà Phi Hùng – 20520526 Lê Quang Trung – 20520333 Phạ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 Họ tên SV1: HÀ PHI HÙNG Họ tên SV2: LÊ QUANG TRUNG MSSV: 20520526 MSSV: 20520333 Xử lý tính phát nhạc Xử lý tính thư viện nhạc Xử lý tính phát video Xử lý tính đa ngơn ngữ Chỉnh sửa, tích hợp tính Xử lý tính cài đặt thiết lập Viết báo cáo Họ tên SV3: PHẠM NHỰT DANH Viết báo cáo Họ tên SV4: NGUYỄN QUANG VŨ MSSV: 20520151 Xử lý tính danh sách phát MSSV: 20520352 Thiết kế giao diện Xử lý tính danh sách yêu thích Làm slide Xử lý tính danh sách xem sau Viết báo cáo Viết báo cáo Họ tên SV5: PHẠM TRƯƠNG HẢI ĐOÀN MSSV: 20520046 Xử lý tính thư viện video Xử lý tính lưu lịch sử phát Xử lý tính thống kê số lượt phát Viết báo cáo SV thực SV thực (Ký tên) (Ký tên) HÀ PHI HÙNG LÊ QUANG TRUNG SV thực SV thực (Ký tên) (Ký tên) PHẠM NHỰT DANH SV thực (Ký tên) PHẠM TRƯƠNG HẢI ĐOÀN NGUYỄN QUANG VŨ LỜI CẢM ƠN Trong thời đại số nay, lĩnh vực công nghệ thông tin không ngừng phát triển mang lại tiện lợi đời sống hàng ngày Một ví dụ điển hình cho tiện ích phần mềm, ứng dụng với giao diện dễ tương tác nhiều tính mang lại thuận tiện cho người dùng Là sinh viên ngành Kỹ thuật phần mềm, đồ án mơn Nhập mơn ứng dụng di động, nhóm định chọn đề tài: XÂY DỤNG ỨNG DỤNG MEDIA PLAYER, qua vận dụng củng cố kiến thức kỹ 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ình giảng dạy, hướng dẫn, tạo cho nhóm tảng kiến thức vững để thực đề tài, đồng thời giúp đỡ, góp ý để nhóm ngày hồn thiện ứng dụng Nhóm xin gửi lời cảm ơn đến bạn học lớp SE114.M22.PMCL chuẩn bị kĩ lưỡng buổi seminar giúp nhóm có nhiều kiến thức cần thiết cho việc thực đồ án Do hạn chế kiến thức thời gian, đồ án nhóm cịn nhiều điểm cần cải thiện Nhóm mong nhận góp ý thầy bạn để đồ án nhóm ngày hồ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 Giới thiệu toán 1.2 Các tính ứng dụng .1 1.3 Sơ đồ Use Case CHƯƠNG 2: GIAO DIỆN VÀ CÁCH DÙNG 2.1 Màn hình Overview 2.1.1.Thiết kế giao diện .3 2.1.2.Mơ tả tính 2.2 Màn hình Music Library 2.2.1.Mơ tả tính 2.2.2.Tab Song 2.2.2.1 Thiết kế giao diện 2.2.2.2 Mô tả tính 2.2.3.Tab Albums 2.2.3.1 Thiết kế giao diện 2.2.3.2 Mơ tả tính 2.2.4.Tab Artists 2.2.4.1 Thiết kế giao diện 2.2.4.2 Mơ tả tính 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 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 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 13 2.6 Tính 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 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 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 20 2.8 Màn hình Favorite (Danh sách u thích) 21 2.8.1.Thiết kế giao diện .21 2.8.2.Mô tả tính 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 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 điều khiển qua thông báo, Google Assistant kiến trúc media Client-Server 24 3.1.1.Sơ lược 24 3.1.2.Tóm tắt Client-Server Architecture cho ứng dụng audio media 24 3.1.3.Tóm tắt cách áp dụng ứng dụng .26 3.2 Load nhiều liệu mà không làm đứng ứng dụng RxJava 27 3.2.1.Sơ lược 27 3.2.2.Tóm tắt RxJava 28 3.2.3.Ví dụ áp dụng vào ứng dụng 29 3.3 Đảm bảo có phân tách UI xử lý liệu kiến trúc MVVM 30 3.3.1.Sơ lược 30 3.3.2.Kiến trúc MVVM 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 đồ án 35  Hạn chế đồ án 35  Hướng phát triển đồ án 35 TÀI LIỆU THAM KHẢO 36 MỤC LỤC HÌNH ẢN Hình 1.1 Sơ đồ Use Case Hình 2.1 Màn hình Overview Hình 2.2 Giao diện Tab Song hình Music Library Hình 2.3 Giao diện Tab Albums hình Music Library Hình 2.4 Giao diện Tab Artists hình Music Library Hình 2.5 Màn hình Video Library lựa chọn app bar .8 Hình 2.6 Bottom dialog hiển thị nhấn vào icon option video .9 Hình 2.7 Màn hình Music Player 10 Hình 2.8 Context menu hình Music player 11 Hình 2.9 Giao diện Music Player 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 lên thêm playlist 14 Hình 2.13 Bottom dialog lên chọn icon option playlist .15 Hình 2.14 Màn hình chi tiết playlist .17 Hình 2.15 Bottom dialog hiển thị nhấn vào icon option video(bài hát) 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 liệu từ MediaStore 29 Hình 3.3 Sơ đồ kiến trúc MVVM 30 Hình 2.17 Màn hình Favorite 2.8.2 Mơ tả tính - Màn hình chi tiết hát (video) thêm vào mục Favorite Các hát video phân hai tab: Tab Video Tab Song Các thao tác cách xử lý tương tự với danh sách Watch Later 2.9 Màn hình Setting 2.9.1 Thiết kế giao diện Hình 2.18 Màn hình Setting 2.9.2 Mơ tả tính - Để chuyển tới hình Setting, người dùng cần nhấp vào Setting Màn hình More - Để thay đổi ngôn ngữ, người dùng nhấp vào Change Language Sau nhấp, hộp thoại chứa ngôn ngữ xuất để người dùng chọn - Người dùng bật/tắt tính phát từ vị trí cuối cách nhấp vào Resume last position - Để bật/tắt tính hiệu ứng âm thanh, Người dùng nhấp vào Display music visualizer CHƯƠNG 3: CÁC VẤN ĐỀ GẶP PHẢI VÀ CÁCH GIẢI QUYẾT 3.1 Phát nhạc điều khiển qua thông báo, Google Assistant kiến trúc media Client-Server 3.1.1 Sơ lược - Để ứng dụng phát nhạc tương tác với thành phần hệ thống thông báo hay Google Assistant, ta cần cài đặt kiến trúc media Client-Server Android Kiến trúc dùng MediaBrowserService, MediaSession, MediaBrowser MediaController để giúp ta phát nhạc tích hợp thơng tin, điều khiển phát vào hình điều khiển ứng dụng thành phần hệ thống thông báo, Google Assistant Việc phát nhạc diễn service đóng vai trò server Những nơi cần điều khiển phát hay lấy thông tin media liên lạc với service 3.1.2 Tóm tắt Client-Server Architecture cho ứng dụng audio media - Kiến trúc client-server gồm hai thành phần MediaBrowserService MediaBrowser:  MediaBrowserService service đặc biệt dùng để phát nhạc nhận yêu cầu điều khiển, lấy thơng tin từ bên ngồi Nó chứa trình player (Vd: MediaPlayer, ExoPlayer) để phát nhạc MediaSession MediaSession cầu nối player phần cịn lại hệ thống Nó liên lạc với player thơng qua callback Service đóng vai trị server cung cấp thông tin media khả điều khiển phát cho bên  MediaBrowser giúp ta kết nối tới MediaBrowserService Từ MediaBrowser ta khởi tạo MediaController Nó chứa phương thức callback để ta lấy thông tin media hay gửi yêu cầu điều khiển đến player MediaBrowser nằm activity chứa giao diện điều khiển nhạc, hệ thống thông báo Android, hay thiết bị khác đầu media xe Nó đóng vai trị client, gửi yêu cầu media đến server Hình 3.1 Sơ đồ kiến trúc media Client-Server - Khi ứng dụng muốn phát nhạc, chạy MediaBrowserService khởi tạo MediaSession Sau đó, activity điều khiển phát nhạc, thơng báo, Google Assistant,… tạo MediaBrowser dùng ID MediaSession để kết nối đến service Từ MediaBrowser ta tạo MediaController Lúc này, MediaSession liên tục lấy thông tin trạng thái phát mô tả media từ player gửi MediaController để activity lấy hiển thị thơng qua callback phương thức Ngồi ra, activity điều khiển phát cách gọi phương thức MediaController MediaController gửi lệnh đến MediaSession MediaSession gọi phương thức tương ứng player để điều khiển phát Vì player chạy service nên đóng activity ứng dụng, nhạc phát 3.1.3 Tóm tắt cách áp dụng ứng dụng - Ứng dụng dùng ExoPlayer làm trình player MediaSession liên kết với qua MediaSessionConnector ExoPlayer: public class MusicPlaybackService extends MediaBrowserServiceCompat { // Việc setup biến thành viên hỗ tr ợ đ ược l ược @Override public void onCreate() { super.onCreate(); player = new ExoPlayer.Builder(this).build(); mediaSession = new MediaSessionCompat(this, "MusicPlaybackService"); setSessionToken(mediaSession.getSessionToken()); mediaSession.setActive(true); MediaSessionConnector mediaSessionConnector = new MediaSessionConnector(mediaSession); // Việc setup lớp hỗ tr ợ lược mediaSessionConnector.setPlayer(player); } - Các activity cần điều khiển media thiết lập MediaBrowser, MediaController, callback liên quan sau: public class MusicPlayerActivity extends AppCompatActivity { private MediaBrowserCompat mediaBrowser; private final MediaBrowserCompat.ConnectionCallback connectionCallback = new MediaBrowserCompat.ConnectionCallback() { @Override public void onConnected() { // Bắt đầu setup MediaController sau k ết n ối thành công đến MediaBrowserService MediaSessionCompat.Token token = mediaBrowser.getSessionToken(); MediaControllerCompat mediaController = new MediaControllerCompat(MusicPlayerActivity.this, token); MediaControllerCompat setMediaController(MusicPlayerActivity.this, mediaController); getMediaControllerCompat().registerCallback( controllerCallback); } // Các callback yêu c ầu UI c ập nh ật thơng tin có thay đổi thông tin media private final MediaControllerCompat.Callback controllerCallback = new MediaControllerCompat.Callback() { // Việc setup callback lượt } @Override protected void onCreate(Bundle savedInstanceState) { mediaBrowser = new MediaBrowserCompat(this, new ComponentName(this, MusicPlaybackService.class), connectionCallback, null); } - Khi có MediaController, cần gọi phương thức để điều khiển player MediaBrowserService Ví dụ yêu cầu nhảy đến hát dùng MediaController nút next bấm: binding.musicPlayerSkipNextBtn.setOnClickListener( view -> getMediaController() getTransportControls() skipToNext() ); 3.2 Load nhiều liệu mà không làm đứng ứng dụng RxJava 3.2.1 Sơ lược - Việc đọc hay ghi liệu vào database, content provider,… tốn nhiều thời gian có nhiều liệu Nếu ta thực công việc thread với UI gây lỗi Application Not Responding (ANR) làm ứng dụng đứng lại (freeze) Điều bất tiện cho người dùng Để giải quyết, ta cần đọc ghi liệu thread khác thread UI thông báo kết thread UI xong Làm đảm bảo giao dịch liệu không làm chặn thread UI Kỹ thuật gọi lập trình bất đồng (Asynchronous Programming) cài đặt thư viện RxJava ứng dụng 3.2.2 Tóm tắt RxJava - RxJava thư viện để viết chương trình theo hướng kiện bất đồng dùng API Reactive Extensions Để dùng RxJava, ta tạo đối tượng gọi Observable Sequence Những đối tượng thực thi cơng việc (VD: Load liệu) thread thread khác thơng báo kết thực Observer RxJava hỗ trợ số lớp observable sequence Observable, Single, Flowable, Completable,… Một số observable sequence thường dùng:  Single: Trả giá trị chấm dứt (Thường dùng để đọc liệu lần từ content provider hay database)  Flowable: Trả giá trị giá trị xuất (Thường dùng để nhận liệu từ database có cập nhật)  Completable: Trả thơng điệp thành công hay thất bại (Thường dùng để thông báo thành cơng hay lỗi thêm, sửa, xóa liệu) - Để quan sát liệu từ đối tượng này, cần gọi hàm subscribe đưa callback chứa code lấy xử lý liệu trả Một điểm nhấn RxJava ta xử lý liệu trước trả thông qua operator flatMap, filter, map,… Ta nối operator lại để thực xử lý nghiệp vụ phức tạp - Ta yêu cầu observable sequence tạo xử lý liệu thread khác thông báo thread thơng qua scheduler io, computation,… Điều giúp ta xử lý liệu mà không làm chặn thread đứng UI Ta đặt thread để load xử lý liệu qua phương thức subscribeOn đặt thread để nhận liệu qua phương thức observeOn 3.2.3 Ví dụ áp dụng vào ứng dụng - Một ví dụ việc áp dụng RxJava vào ứng dụng load liệu album từ MediaStore Việc load liệu thực thread IO Single Khi load xong, Single trả observer liệu load thread observer gọi view để hiển thị liệu Hình 3.2 Sơ đồ dùng RxJava để load liệu từ MediaStore - Tạo Single load liệu album từ MediaStore nó: public Single getAlbums (String selection, String[] selectionArgs, String sortOrder) { return Single.fromCallable(() -> { List albums = new ArrayList(); // Việc load liệu vào albums từ MediaStore đ ược lượt return albums; }).subscribeOn(Schedulers.io()); - Load album từ ID public Single getAlbum(long id) { return getAlbums(MediaStore.Audio.Albums._ID + " = ?", new String[] { String.valueOf(id) }, MediaStore.Audio.Albums.DEFAULT_SORT_ORDER) map(i -> i.get(0)); } - Lấy liệu từ Single qua Observer cập nhật view tương ứng: getAlbum(albumId).observeOn( AndroidSchedulers.mainThread()) subscribe(album -> { binding.albumDetailsName.setText(album.getAlbumName()); binding.albumDetailsArtist.setText(album.getArtistName()); }); 3.3 Đảm bảo có phân tách UI xử lý liệu kiến trúc MVVM 3.3.1 Sơ lược - Kiến trúc MVVM (Model-View-ViewModel) kiến trúc phần mềm đề cao phân tách việc phát triển giao diện người dùng – thông qua ngôn ngữ markup XML, XAML thông qua module code GUI - việc phát triển logic xử lý nghiệp vụ để tránh việc giao diện bên phải phụ thuộc vào khối liệu định bên [ CITATION Wik22 \l 1033 ] Hình 3.3 Sơ đồ kiến trúc MVVM - Trong kiến trúc MVVM gồm phận: + View: Gồm thành phần liên quan đến giao diện hệ thống nhằm hiển thị thông tin tương tác với người dùng + Model: Gồm thân liệu thành phần liên quan đến xử lý liệu để thành phần thuộc View hiển thị lên giao diện + ViewModel: Là thành phần gắn kết View Model Khác với thành phần Presenter mơ hình MVP thành phần Controller mơ hình MVC, ViewModel hoạt động xoay quanh binder – công nghệ liên kết liệu khiến cho việc giao tiếp View ViewModel trở nên hoàn toàn tự động 3.3.2 Kiến trúc MVVM lập trình Android - Trong lập trình Android, thực hóa kiến trúc MVVM số thành phần thuộc Architecture Components Android – thành phần Android thiết kế nhằm giảm thiểu việc code khơng cần thiết, module hóa ứng dụng, hỗ trợ lập trình viên việc quản lý lifecycle nhiều yếu tố khác [ CITATION And \l 1033 ]: + View: Các Activity Fragment gồm đoạn code liên kết với ViewModel để lấy liệu + ViewModel: Lớp ViewModel LiveData Android xây dựng Trong lớp LiveData cho phép View “quan sát” thay đổi xảy liệu bên thông báo cho View quan sát + Model: Lớp Repository – cho phép quản lý nhiều nguồn liệu khác Thư viện Room database – đơn giản hóa việc quản lý sở liệu SQLite Các lớp DAO – gắn phương thức với câu truy vấn SQL Các lớp Entity đại diện cho bảng sở liệu Hình 3.4 Kiến trúc MVVM Android 3.3.3 Áp dụng kiến trúc MVVM vào ứng dụng - Đối với ứng dụng tại, nhóm áp dụng kiến trúc MVVM thông qua việc sử dụng thành phần Android, cụ thể ví dụ sau, việc quản lý playlist thực cách dễ dàng với thành phần kiến trúc MVVM: + Model: Tạo lớp xử lý liệu bao gồm lớp Playlist, lớp PlaylistDao, lớp AppRoomDatabase, lớp PlaylistRepository Hình 3.5 Lớp Playlist lớp Entity đại diện cho playlist Hình 3.6 Lớp PlaylistDao gắn phương thức với câu truy vấn SQL Hình 3.7 Lớp AppRoomDatabase – kế thừa từ RoomDatabase database chung ứng dụng Hình 3.8 Lớp PlaylistRepository để liên kết đến Room database nguồn liệu khác (nếu có) + ViewModel: Lớp PlaylistViewModel kế thừa từ lớp AndroidViewModel sử dụng LiveData Hình 3.9 Lớp PlaylistViewModel kế thừa từ lớp AndroidViewModel + View: Bên lớp PlaylistFragment sử dụng PlaylistViewModel để liệu thay đổi recyclerview hiển thị playlist update: Hình 3.10 Sử dụng PlaylistViewModel bên PlaylistFragment KẾT LUẬN  Ưu điểm đồ án - Giao diện đồng nhất, dễ dùng - Có đầy đủ tính ứng dụng media - Có tính tiện ích danh sách phát, lưu vị trí phát cuối, đa ngơn ngữ - Hiệu suất tốt có nhiều liệu  Hạn chế đồ án - Chưa hiển thị thể loại nhạc có máy - Chưa hỗ trợ phát stream - Chưa hỗ trợ đầy đủ chế độ tối xoay ngang hình  Hướng phát triển đồ án - Hỗ trợ phát stream nhạc video - Thêm tab hiển thị thể loại nhạc có hình thư viện nhạc - Hỗ trợ đầy đủ chế độ tối xoay hình TÀI LIỆU THAM KHẢO [1] Wikipedia, "Model–view–viewmodel," [Online] Available: https://en.wikipedia.org/wiki/Model%E2%80%93view [2] %E2%80%93viewmodel [Accessed 11 June 2022] Android, "Room, LiveData, and ViewModel," [Online] Available: https://google-developer-training.github.io/android-developer-fundamentalscourse-concepts-v2/unit-4-saving-user-data/lesson-10-storing-data-withroom/10-1-c-room-livedata-viewmodel/10-1-c-room-livedata- [3] viewmodel.html [Accessed 11 June 2022] Google, "Universal Android Music Player Sample," [Online] Available: [4] https://github.com/android/uamp Google, "Android Official Documentation," [Online] Available: [5] https://developer.android.com/docs [Accessed 13 June 2022] Google, "Audio app overview, Android Developers Documentation," [Online] Available: https://developer.android.com/guide/topics/media- [6] apps/audio-app/building-an-audio-app [Accessed 14 June 2022] "ExoPlayer Docs," [Online] Available: https://exoplayer.dev/ [Accessed 12 [7] June 2022] "RxJava: Reactive Extensions for the JVM," [Online] Available: https://github.com/ReactiveX/RxJava [Accessed 12 June 2022]