ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI XÂY DỰNG ỨNG DỤNG NGHE NHẠC

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG - - ĐỒ ÁN CƠ SỞ ĐỀ TÀI XÂY DỰNG ỨNG DỤNG NGHE NHẠC Giảng Viên Hướng Dẫn: TS Nguyễn Đức Hiển Sinh Viên Thực Hiện: Trương Đình Vinh - 18IT2 Đà Nẵng, tháng năm 2020 Đồ án sở TS.Nguyễn Đức Hiển ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI XÂY DỰNG ỨNG DỤNG NGHE NHẠC Đà Nẵng, tháng năm 2020 Đồ án sở TS.Nguyễn Đức Hiển MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc tạo phát triển ứng dụng điện thoại để phục vụ cho nhu cầu riêng tổ chức, cơng ty chí cá nhân, ngày nay, khơng lấy làm xa lạ Với vài thao tác đơn giản, người tải cài đặt điện thoại ứng dụng liên quan đến lĩnh vực mà quan tâm, là: âm nhạc, video, mạng xã hội….v.v Đối với cơng ty, doanh nghiệp việc tạo phát triển ứng dụng điện thoại thông minh điều cần thiết để phát triển Thông qua ứng dụng này, thông tin họ sản phẩm, dịch vụ mới công ty đến với người quan tâm, đến với khách hàng họ cách nhanh chóng kịp thời, tránh phiền hà mà phương thức giao tiếp truyền thống thường gặp phải Vì em định chọn đề tài: “XÂY DỰNG ỨNG DỤNG NGHE NHẠC” đề thực hiện đồ án sở Đồ án sở TS.Nguyễn Đức Hiển Nhận Xét Của GVHD …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… ………………………………………… Đồ án sở TS.Nguyễn Đức Hiển MỤC LỤC Trang Chương Giới thiệu 1.1 Tên dự án 1.2 Sinh viên thực 1.3 Bối cảnh thực hiện: 1.4 Mục tiêu dự án 1.5 Phương pháp thực hiện: 1.6 Kế hoạch thực hiện: Chương Nghiên Cứu Thiết Kế .3 2.1 Ngôn ngữ công cụ lập trình sử dụng: .3 2.1.1 Android Studio: 2.1.2 Visual Studio Code (VS Code hay VSC): 2.1.3 XamPP: .3 2.1.4 Java (Android): 2.1.5 PHP (Hypertext Preprocessor): 2.1.6 Restful API: 2.2 Phân tích, tham khảo ứng dụng, mơ hình mẫu: .5 2.2.1 Một số ứng dụng có: .5 2.2.2 Đúc kết: .6 2.3 Phân tích thiết kệ hệ thống website: .6 2.3.1 Các actor phân tích chức năng: .6 2.3.2 Sơ đờ phân tích thiết kế hệ thống: .7 2.4 Cơ sở liệu: 2.4.1 Mơ tả số bảng hệ thống: .7 Đồ án sở TS.Nguyễn Đức Hiển 2.4.2 Cơ sở liệu: Chương Xây dựng Back-end Restful API 3.1 Xây dựng web back-end: 3.1.1 Mục đích: 3.1.2 Thiết kế trang web: .9 3.1.3 Một vài hình ảnh web back-end: Chương Xây dựng ứng dụng android 12 4.1 Mục tiêu phân tích: 12 4.2 Xây dựng: .12 4.2.1 Sử dụng thư viện retrofit android: 12 4.2.2 Cấu trúc thư mục android: 12 4.3 Sản phẩm ứng dụng nghe nhạc .14 4.3.1 Giao diện hình Đăng nhập – Đăng ký: 14 4.3.2 Giao diện (Main Activity): 14 4.3.3 Giao diện tất cả album tất cả playlist: 15 4.3.4 Giao diện hát album: 16 4.3.5 Giao diện hát playlist 17 4.3.6 Giao diện phần nghe nhạc: 18 Kết luận 19 Danh mục tài liệu tham khảo 19 Đồ án sở TS.Nguyễn Đức Hiển DANH MỤC HÌNH ẢNH Trang Hình 2-1 Giao diện ứng dụng Zingmp3 .5 Hình 2-2 Sơ đồ Use-case mơ tả chức hệ thống Hình 2-3 Cơ sở liệu cho backend ứng dụng Hình 3-4 Giao diện trang quản lí người dùng Hình 3-5 Trang quản lí hát 10 Hình 3-6 Trang quản lí playlist .10 Hình 3-7 Trang quản lí album 11 Hình 4-8 Android app - Giao diện đăng nhập đăng ký 14 Hình 4-9 Android app - Giao diện hình chính .15 Hình 4-10 Android app - Giao diện tất cả album tất cả playlist 15 Hình 4-11 Android app - Giao diện hát album 16 Hình 4-12 Android app - Giao diện hát playlist 17 Hình 4-13 Android app - Giao diện phần nghe nhạc 18 DANH MỤC CÁC BẢNG Trang Bảng 2-1 Cấu trúc bảng – Users .7 Bảng 2-2 Cấu trúc bảng hát- Song .7 Đồ án sở TS.Nguyễn Đức Hiển Chương Giới thiệu 1.1 Tên dự án Ứng dụng nghe nhạc cho điện thoại 1.2 Sinh viên thực  Trương Đình Vinh - 18IT117 1.3 Bối cảnh thực hiện: Cùng với sự phát triển khơng ngừng kỹ thuật máy tính mạng internet, công nghệ thông tin ngày chinh phục đỉnh cao Mạng internet sản phẩm có giá trị lớn lao ngày trở nên công cụ thiếu lĩnh vực sống Với internet, chúng ta thực hiện nhiều công việc với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Chính điều này, thúc đầy sự khai sinh phát triển thương mại điện tử phủ điện từ khắp thể giới, làm biến đối đáng kể mặt văn hóa, nâng cao chẩt lượng sống người Trong năm gần đây, CNTT phát triển mạnh nên việc ứng dụng tin học đời sống ngày quan tâm Vì em định chọn đề tài: “XÂY DỰNG ỨNG DỤNG NGHE NHẠC” đề thực hiện đồ án sở 1.4 Mục tiêu dự án Xây dựng back-end API service hoàn chỉnh Xây dựng ứng dụng hoàn chỉnh sử dụng android từ phiên bản android 7.0 trở lên 1.5 Phương pháp thực hiện: Tìm hiểu ứng dụng có sẵn (Zingmp3, nhaccuatui) Phân tích giao diện, chức bật Từ đó, dựa vào chức lên kế hoạch từ đầu, đúc kết, đưa chức năng, u cầu hồn chỉnh cho ứng dụng Đờ án sở – Ứng dụng nghe nhạc cho điện thoại android 1|Page Sử dụng công cụ Visual Studio Code , Xampp, để tạo web server back-end kiểm thử localhost Sau hoàn chỉnh đưa lên internet Sử dụng phần mềm Android Studio để tạo ứng dụng hoàn chỉnh chạy thiết bị di động dựa vào API trả từ back-end web server đưa lên internet 1.6 Kế hoạch thực hiện: Thời gian Tuần thứ (Từ ngày 11/5 ngày 17/5) Tuần thứ hai (Từ ngày 18/5 ngày 24/5 ) Tuần thứ ba (Từ ngày25/5 ngày 31/5 ) Tuần thứ tư (Từ ngày 1/6 ngày 7/6 ) Tuần thứ năm (Từ ngày 8/6 ngày 14/6 ) Tuần thứ sáu (Từ ngày 15/6 ngày 21/6 ) Tuần thứ bảy (Từ ngày 22/6 ngày 28/6 ) Tuần thứ tám (Từ ngày 28/6 ngày 5/7 ) Nội dung thực Xây dựng đề cương, tìm hiểu cơng nghệ sử dụng backend restful api, tìm hiểu ứng dụng sẵn có (mp3Zing, nhaccuatui,…) đến Xây dựng sở liệu cho back-end ứng dụng Phân tích thiết kế hệ thống đến Xây dựng web service restful api (Trả liệu gửi dạng Json) đến Xây dựng web service restful api (Trả liệu gửi dạng Json) đến Xây dựng giao diện ứng dụng cho thiết bị android Lập trình di động, tiếp tục xây dựng giao diện người dùng, đến phát triển chức bản (đăng ký, đăng nhập cho người dùng, nghe nhạc like hát, tạo album ) Lập trình di động, tiếp tục xây dựng hoàn thiện giao diện đến ứng dụng, hoàn thành chức cần thiết, thêm chức tìm kiếm Tiếp tục xây dựng, hồn thành chức năng, kiểm thử, phát đến hiện sửa lỗi (nếu có) cả ở web service, api ứng dụng android Thực hiện báo cáo word, slide tiếng anh, kiểm tra, Các tuần lại kiểm thử ứng dụng để phát hiện, sửa lỗi… Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 2|Page Chương Nghiên Cứu Thiết Kế 2.1 Ngơn ngữ cơng cụ lập trình sử dụng: 2.1.1 Android Studio: Android Studio phầm mềm bao gồm công cụ khác dùng để phát triển ứng dụng chạy thiết bị sử dụng hệ điều hành Android loại điện thoại smartphone, tablet Android Studio đóng gói với code editor, debugger, công cụ performance tool hệ thống build/deploy (trong có trình giả lập simulator để giả lập môi trường thiết bị điện thoại tablet máy tính) cho phép lập trình viên nhanh chóng phát triển ứng dụng từ đơn giản tới phức tạp 2.1.2 Visual Studio Code (VS Code hay VSC): Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển bởi Microsoft Nó xem sự kết hợp hoàn hảo IDE Code Editor Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thông minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác 2.1.3 XamPP: Xampp mã nguồn mở máy chủ web đa phát triển bởi Apache Friends, bao gồm chủ yếu Apache HTTP Server, MariaDB database, interpreters dành cho đối tượng sử dụng ngôn ngữ PHP Perl Xampp viết tắt Cross-Platform (đa tảng-X), Apache (A), MariaDB (M), PHP (P) Perl (P) Nó phân bố Apache nhẹ đơn giản, khiến lập trình viên dễ dàng tạo máy chủ web local để kiểm tra triển khai trang web Tất cả thứ cần cho phát triển trang web - Apache (ứng dụng máy chủ), Cơ sở liệu (MariaDB) ngơn ngữ lập trình (PHP) gói gọn tệp Xampp đa tảng chạy tốt cả Linux, Windows Mac Hầu hết việc triển khai máy chủ web thực tế sử dụng thành phần XAMPP nên dễ dàng để chuyển từ máy chủ local sang máy chủ online 2.1.4 Java (Android): Java ngơn ngữ thức để phát triển Android Đây ngơn ngữ có sự hỗ trợ nhiều từ Google Nó ngôn ngữ mà hầu hết ứng dụng Play Store xây dựng Nó ngơn ngữ thức Android Hệ điều hành Android Google sử dụng Java sở cho tất cả ứng dụng Android Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 3|Page 2.2 Phân tích, tham khảo ứng dụng, mơ hình mẫu: 2.2.1 Một sớ ứng dụng có: ZingMP3: Hình 2-1 Giao diện ứng dụng Zingmp3  Giao diện:  Giao diện đẹp, bắt mắt  Dễ nhìn, rõ ràng, dễ sử dụng  Không phức tạp  Chức năng:  Xem danh sách hát  Tìm kiếm hát theo tên hát, tên ca sĩ  Tương tác (yêu thích hát)  Album ca sĩ  Playlist hát Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 5|Page  Nghe nhạc 2.2.2 Đúc kết:  Về giao diện:  Phải đơn giản, ưa nhìn, bắt mắt, dễ sử dụng  Không nhiều thông tin layout  Tương thích tốt với back-end api trả  Chức cần có:  Danh sách hát  Tim kiếm hát theo tên hát  Người dùng u thích hát (Like)  Nghe nhạc  Album ca sĩ  Playlist hát  Quản trị viên có xem, thêm, sửa đổi, xóa hát (Admin) 2.3 Phân tích thiết kệ hệ thống website: 2.3.1 Các actor phân tích chức năng: Các actor chức năng:  Administrator(admin):  Đăng nhập quyền admin  Xem, thêm, sửa, xóa thơng tin hát  Xem, sửa , xóa thơng tin người dùng  Người sử dụng (Users):  Tạo tài khồn, đăng nhập  Nghe nhạc  Tìm kiếm hát Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 6|Page 2.3.2 Sơ đồ phân tích thiết kế hệ thớng: Hình 2-2 Sơ đồ Use-case mô tả chức hệ thống 2.4 Cơ sở liệu: 2.4.1 Mô tả số bảng chính hệ thống: 2.4.1.1 Bảng User: Tên iduser Gmail Password fullname Kiểu char varchar varchar varchar Độ dài 50 30 30 Mô tả ID người dùng (User ID) Gmail người dùng Mặt người dùng Họ tên người dùng Bảng 2-1 Cấu trúc bảng – Users 2.4.1.2 Bảng hát (Song): Tên Idbaihat Idalbum Idplaylist Hinhbaihat Tenbaihat Tencasi Linkbahat Luotthich Kiểu Char Char Char Varchar Varchar Varchar Varchar int Độ dài 100 Mô tả ID hát ID album ID playlist Ảnh hát Tên hát Tên ca sĩ Link hát Lượt thích hát Bảng 2-2 Cấu trúc bảng hát- Song Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 7|Page 2.4.2 Cơ sở liệu: Hình 2-3 Cơ sở liệu cho backend ứng dụng Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 8|Page Chương Xây dựng Back-end Restful API 3.1 Xây dựng web back-end: 3.1.1 Mục đích: • Thiết kế giao diện dành cho quản trị viên (admin) với chức  Thêm, sửa , xóa hát  Sửa thơng tin, xóa người dùng  Quản lí album  Quản lí playlist 3.1.2 Thiết kế trang web: • Xây dựng trang:  Quản lí danh sách người dùng • Sửa thơng tin  Quản lí hát • Thêm hát  Quản lí album • Thêm album  Quản lí playlist • Thêm playlist 3.1.3 Một vài hình ảnh web back-end: Hình 3-4 Giao diện trang quản lí người dùng  Trang quản lí người dùng bao gờm: - Nút sửa, cập nhập thông tin - Form để thêm sửa thông tin người dùng Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 9|Page Hình 3-5 Trang quản lí hát  Trang quản lí hát bao gờm: - Bảng thống kê danh sách hát hiện có - Form để upload hát Hình 3-6 Trang quản lí playlist  Trang quản lí playlist bao gờm: - Bảng thống kê danh sách playlist hiện có - Form để upload playlist Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 10 | P a g e Hình 3-7 Trang quản lí album  Trang quản lí album bao gờm: - Bảng thống kê danh sách album hiện có - Form để upload album Đờ án sở – Ứng dụng nghe nhạc cho điện thoại android 11 | P a g e Chương Xây dựng ứng dụng android 4.1 Mục tiêu phân tích: - Xây dựng sản phẩm ứng dụng android hoàn chỉnh cho người dùng Sản phẩm dành cho người dùng không dành cho quản trị viên thực hiện thao tác quản lí hệ thống Ứng dụng có nhiều chức đa dạng dễ sử dụng Ứng dụng sử dụng restful api để thực hiện tác vụ lấy thông tin từ sở liệu 4.2 Xây dựng: 4.2.1 Sử dụng thư viện retrofit android:  Cài đặt Retrofit Gson cho dự án (project) android: - Đưa implementation sau vào file build.gradle (app) project: implementation implementation implementation implementation implementation - 'com.squareup.retrofit2:retrofit:2.9.0' 'com.squareup.retrofit2:converter-gson:2.4.0' 'com.squareup.retrofit2:adapter-rxjava2:2.9.0' 'com.squareup.okhttp3:logging-interceptor:4.7.2' 'com.google.code.gson:gson:2.8.5' Các implementation bao gồm:  Thư viện Retrofit  Thư viện Gson  Thư viện okhttp3 4.2.2 Cấu trúc thư mục android: 4.2.2.1 Các Activity (7 Activities): - Đăng nhập : LoginActivity Đăng ký: RegisterActivity Màn hình chính: MainActivity Danh sách tất cả album: DanhsachtatcaalbumActivity Danh sách tất cả playlist: DanhsachtatcaplaylistActivity Danh sách hát: DanhsachbaihatActivity Play nhạc: PlaynhacActivity 4.2.2.2 Adapter package (11 Adapters): - Chứa lớp adapter (Adapter Class) Recycler View: Bao gồm: o AlbumAdapter – Danh sách album ngày o AllAlbumAdapter - Danh sách tất cả album o BaihathotAdapter – Danh sách hát yêu thích o BannerAdapter – Quảng cáo o DanhsachbaihatAdapter – Danh sách hát o DanhsahcacplaylistAdapter – Danh sách playlist o MainviewpagerAdapter o PlaylistAdapter – Danh sách playlist ngày Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 12 | P a g e o PlaynhacAdapter – Danh sách hát hình nghe nhạc o SearchAdapter – Tìm kiếm hát o ViewPagerplaylistnhac 4.2.2.3 Fragment package (9 Fragments): - Các Fragment hỗ trợ cho điều hướng dưới MainActivity (Fragment_trang_chu ,Fragment_tim_kiem Fragment_canhan ) Các Fragment hỗ trợ cho PlaynhacActivity.(Fragment_play_danhsach_bai_hat Fragment_dia_nhac) Fragment hỗ trợ cho DanhsachtatcaalbumActivity: Fragment_album_hot Fragment hỗ trợ cho DanhsachtatcaplaylistActivity:Fragmentplaylist Fragment hỗ trợ cho BannerAdapter:Fragment_Banner 4.2.2.4 Model package (4 Models): - Các model chịu trách nhiệm lưu trữ thơng tin, xử lí thơng tin trả đưa lên Một số model như:  Album: Thông tin album  Baihat:Thông tin hát  Playlist:Thông tin playlist  QuangCao:thông tin quảng cáo 4.2.2.5 APIRetrofitclient package: - Chứa đổi tượng Retrofit (RetrofitClient) Thực hiện request đến serve 4.2.2.6 APIServices package (11 Services) : 4.2.2.7 Thư mục resources (res folder): • Anim folder: animation (Hoạt hình động) • Drawble folder: hình ảnh, icon cho giao diện • Layout folder: giao diện activity, item recycler view • Menu folder: giao diện menu • Values folder: giá trị màu sắc, phong cách biến string lưu trữ Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 13 | P a g e 4.3 Sản phẩm ứng dụng nghe nhạc - - 4.3.1 Giao diện hình Đăng nhập – Đăng ký: Ở giao diện đăng nhập, người dùng cần nhập vào email mật tài khoản họ có tài khoản, hệ thống kiểm tra xem tài khoản mật có hợp lệ hay khơng, hợp lệ chuyển vào hình chính, thất bại in thơng báo Trong trường hợp người dùng chưa có tài khoản hệ thống, cần nhấp vào nút “đăng ký” chuyển đến giao diện đăng ký tài khoản Tại người dùng cần nhập điền đầy đủ thông tin cần thiết chọn đăng ký Hệ thống thông báo thành công hay khơng, thành cơng chuyển đến giao diện đăng nhập để đăng nhập lại, thất bại hệ thống đưa thơng báo Hình 4-8 Android app - Giao diện đăng nhập đăng ký - 4.3.2 Giao diện chính (Main Activity): Giao diện bao gờm Fragment FragmentTrangchu, FragmentTimkiem FragmentCanhan Giao diện FragmentTrangchu chứa recycler view thông tin hát hot, album, playlist Người dùng nhấp chọn vào mục để xem chi tiết album playlist nhấp chọn hát phần hát hot để nghe Giao diện Fragmentcanhan hiện tên người dùng Giao diện FragmentTimkiem có icon tìm kiếm người dùng nhấn vào icon nhập từ khóa muốn tìm hệ thống tự động nhận diện hiện thị kết quả Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 14 | P a g e Hình 4-9 Android app - Giao diện hình chính 4.3.3 Giao diện tất cả album tất cả playlist: Hình 4-10 Android app - Giao diện tất cả album tất cả playlist - Giao diện tất cả album gồm recyclerview hiển thị tất cả album hiện có Giao diện tất cả playlist gồm recyclerview hiển thị tất cả playlist hiện có Đờ án sở – Ứng dụng nghe nhạc cho điện thoại android 15 | P a g e 4.3.4 Giao diện hát album: Hình 4-11 Android app - Giao diện hát album - Giao diện hát album hiển thị tất cả hát có album Đờ án sở – Ứng dụng nghe nhạc cho điện thoại android 16 | P a g e 4.3.5 Giao diện hát playlist Hình 4-12 Android app - Giao diện hát playlist - Giao diện hát playlist hiển thị tất cả hát có playlist Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 17 | P a g e 4.3.6 Giao diện phần nghe nhạc: Hình 4-13 Android app - Giao diện phần nghe nhạc - Giao diện phần nghe nhạc gồm recyclerview hiện thị danh sách nhạc phía dưới gờm nút nhấn để chuyển tới lùi pause play nhạc Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 18 | P a g e Kết luận Kết quả đạt được: • Xây dựng back-end API service hoàn chỉnh Xây dựng ứng dụng hoàn chỉnh sử dụng android từ phiên bản android 7.0 trở lên Hướng phát triển tương lai: • Cố gắng nghiên cứu xây dựng thêm nhiều chức như: người dùng tự tạo album mình, người dùng tự upload nhạc, • Danh mục tài liệu tham khảo Tham khảo theo cách làm app nghe nhạc Khoa phạm • https://www.youtube.com/watch?v=guyiAs10gk&list=PLzrVYRai0riTMwAVJxP2hk9VTMK4yKEkC Tham khảo cách Restful API • https://www.youtube.com/watch? v=2EJ03wM0erI&list=PLS1QulWo1RIYWjdoEC1WbT8W3XGGWVXfW Tham khảo cách xây dựng app android • https://developer.android.com/ Đồ án sở – Ứng dụng nghe nhạc cho điện thoại android 19 | P a g e