Xây dựng ứng dụng di động karaoke app

ĐẠI HỌC QUỐC GIA TP 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 ĐỒ ÁN CUỐI KÌ Môn học: ĐỒ ÁN Giảng viên hướng dẫn : Ths Huỳnh Tuấn Anh Nhóm sinh viên thực hiện: Nguyễn Lê Thành – 18521410 Trần Quốc Thịnh 18521451 – TP.Hồ Chí Minh, tháng 12 năm 2021 LỜI CẢM ƠN Trong thời gian nghiên cứu thực đồ án môn học nhập môn ứng dụng di động, để đạt kết hôm nay, chúng em nhận hỗ trợ hướng dẫn nhiệt tình từ giảng viên hướng dẫn Qua báo cáo đồ án môn học này, chúng em xin bày tỏ lòng biết ơn chân thành đến giảng viên hướng dẫn Th.S Huỳnh Tuấn Anh Đồng thời, chúng em xin chân thành gửi lời cảm ơn đến tất quý thầy cô giảng viên trường Đại học Công nghệ thông tin – ĐHQG TP.Hồ Chí Minh, giảng dạy hướng dẫn tận tình chúng em thời gian học tập trường TP Hồ Chí Minh, ngày 23 tháng 12 năm 2021 Nhóm sinh viên thực i MỤC LỤC CHƯƠNG I: GIỚI THIỆU ĐỀ TÀI 1 GIỚI THIỆU TRAVEL APP MỤC TIÊU ĐỀ TÀI 2.1 Mục tiêu 2.2 Yêu cầu 2.3 Đối tượng sử dụng PHƯƠNG HƯỚNG PHÁT TRIỂN 3.1 Quy trình phát triển 3.2 Công nghệ sử dụng 3.2.a Công nghệ sử dụng 3.2.b Phần mềm hỗ trợ 3.3 Chức CHƯƠNG II: PHÂN TÍCH YÊU CẦU 10 SƠ ĐỒ USECASE 10 MÔ TẢ CHI TIẾT 11 2.1 Đăng nhập 11 2.2 Đăng kí 12 2.3 Đăng xuất 13 2.4 Thay đổi thông tin .13 2.5 Tải hát 14 2.6 Tìm kiếm hát 15 2.7 Tạo beat nhạc từ file mp3 15 2.8 Xem thông tin hát 16 2.9 Hát karaoke 16 2.10 Chỉnh tone hát 17 2.11 Ghi âm giọng hát 17 2.12 Thêm hát vào danh sáng yêu thích 18 2.13 Tạo danh sách hát 18 CHƯƠNG III: THIẾT KẾ CHI TIẾT 21 THIẾT KẾ CƠ SỞ DỮ LIỆU .21 1.1 Danh sách bảng 21 1.2 1.3 Sơ đồ liệu .21 Mô tả bảng 21 1.3.a 1.3.b NguoiDung 21 1.3.c 1.3.d LoaiHoatDong 22 1.3.e KhachSan 23 DiaDiem 22 HoatDong 22 ii 1.3.f LoaiKhachSan 23 THIẾT KẾ GIAO DIỆN 24 2.1 Danh sách hình 24 2.2 Mơ tả hình 25 2.2.a Màn hình đăng nhập 25 2.2.b 2.2.c Màn hình đăng ký 26 Màn hình thơng tin cá nhân người dùng 28 2.2.d Màn hình trang chủ 29 2.2.e Màn hình hiển thị danh sách địa điểm 31 2.2.f Màn hình chi tiết địa điểm 33 2.2.g 2.2.h Màn hình chi tiết hoạt động 34 2.2.i Màn hình chi tết khách sạn 38 2.2.j Màn hình dẫn đường (Map) 40 Màn hình hiển thị danh sách khách sạn 36 CHƯƠNG IV: CÀI ĐẶT VÀ KIỂM THỬ 41 CHƯƠNG V: KẾT LUẬN VÀ HƯỚNG MỞ RỘNG 42 KẾT LUẬN 42 1.1 Kết đạt 42 1.2 Ưu điểm 42 1.3 Nhược điểm 42 HƯỚNG MỞ RỘNG 42 CHƯƠNG VI: TÀI LIỆU THAM KHẢO 43 iii CHƯƠNG I: GIỚI THIỆU ĐỀ TÀI Giới Thiệu Karaoke App: Hiện nay, vào thời đại công nghệ 4.0, ứng dụng công nghệ thông tin xem yếu tố quan trọng mang tính định hoạt động tổ chức doanh nghiệp, công ty nhà nước Bên cạnh phát triển nhanh chóng trang web, việc tạo ứng dụng di động ngày gia tăng nhu cầu sử dụng người dùng tính tiện dụng Có thể thấy rằng, ca hát đề tài chưa hết nóng tính thiết yếu có sống người Hiện thư viện hát sử dụng để hát karaoke phải dùng tới thiết bị cần thiết hát karaoke Hiểu vấn đề đó, nhóm định tạo ứng dụng di động Karaoke App để đáp ứng nhu cầu hát karaoke beat từ hát có lời để thuận tiện cho người dùng Mục tiêu đề tài 2.1 Mục tiêu: Giúp người dùng sử dụng smartphone nghe nhạc, hát karaoke điện thoại di động Ngồi ứng dụng cịn có chức tách lời âm nhạc từ hát từ giúp người dùng hát karaoke với hát Mục tiêu tương lại: app cung cấp thư viện hát lớn chức riêng biệt giúp cho người dùng sử dụng phần sống 2.2 Yêu cầu: Tính tiện dụng: Ứng dụng thân thiện với người dùng, dễ sử dụng, biểu tượng mang tính ý nghĩa dễ hiểu Thiết kế đại hợp thời khơng gây khó chịu cho người dùng Tính đắn: Ứng dụng chạy không bị lỗi không sai bị sai lệch thơng số Tính thích nghi: Ứng dụng chạy hệ điều hành Android IOS, chạy thiết bị phần cứng thiết kế kiến trúc khác Tính tiến hóa: Ứng dụng dễ dàng cập nhật, nâng cấp phát triển sau mà không ảnh hưởng đến trải nghiệm người dùng 2.3 Đối tượng sử dụng: - Ứng dụng sử dụng cho người sỡ hữu thiết bị di động - Người có nhu cầu nghe nhạc, hát karaoke, tách lời âm nhạc hát - Nhà cung cấp dịch vụ âm nhạc muốn quảng bá dịch vụ Phương hướng phát triển: iv 3.1 Quy trình phát triển: Nhóm phát triển ứng dụng tuân theo quy chuẩn thiết kế ứng dụng Nhóm thực bước sau: STT Thời gian Công việc 06/09/2021 – 09/09/2021 Tiến hành thu thập thông tin, khảo sát yêu cầu người dùng 10/09/2021 – 14/09/2021 Tiến hành nghiên cứu ứng dụng có sẵn để nắm chức trải nghiệm người dùng 15/09/2021 – 20/09/2021 Tiến hành vẽ Usecase Diagram để mô hình hố u cầu người dùng 21/09/2021 – 25/09/2021 Tiến hành vẽ Activity Diagram để mơ hình hố tương tác thành phần hệ thống 26/09/2021 – 30/10/2021 Tiến hành thiết kế sỡ liệu 31/10/2020 – 01/11/2020 Tiến hành lựa công nghệ phù hợp để phát triển ứng dụng Nhóm lựa chọn Flutter, sử dụng ngôn ngữ Dart sở liệu Firebase 02/11/2020 – 05/11/2020 Tiến hành thiết kế Prototype 05/11/2020 – 03/12/2021 Tiến hành phát triển ứng dụng 04/12/2021 – 08/12/2021 Kiểm tra lỗi tồn đọng phát triển thêm chức chưa thực 10 09/12/2021 – 12/12/2021 Tiến hành cài đặt kiểm thử 11 12/12/2021 – 20/12/2021 Viết báo cáo hồn thành đồ án 3.2 Cơng nghệ sử dụng: 3.2.a Công nghệ sử dụng - Ngôn ngữ Dart v Dart ngơn ngữ lập trình đa mục đích ban đầu phát triển Google sau Ecma (ECMA-408) phê chuẩn làm tiêu chuẩn Nó sử dụng để xây dựng ứng dụng web, server, máy tính để bàn thiết bị di động Dart ngôn ngữ hướng đối tượng, xác định theo lớp, với chế garbage- collected, sử dụng cú pháp kiểu C để dịch mã tùy ý sang JavaScript Nó hỗ trợ interface, mixin, abstract, generic, static typing sound type (2 cuối hiểu type-safe) Dart ngôn ngữ mã nguồn mở miễn phí, phát triển GitHub - Flutter Flutter tảng phát triển ứng dụng đa tảng cho iOS Android Google phát triển Flutter sử dụng ngôn ngữ DART Google phát triển flutter sử dụng để tạo ứng dụng native cho Google Flutter phát triển nhằm giải toán thường gặp mobile Fast Development Native Performance Nếu React Native đảm bảo Fast Development code native đảm bảo Native Performance Flutter làm điều - Firebase vi Firebase dịch vụ sở liệu thời gian thực cung cấp Google hoạt động tảng đám mây Nó giúp lập trình phát triển nhanh ứng dụng di động cách đơn giản hóa thao tác với sở liệu - mockapi MockAPI dùng để mô sever trả liệu dạng JSON vii 3.2.b Phần mềm hỗ trợ: - Visual studio code Visual Studio Code (VS Code hay VSC) trình soạn thảo mã nguồn phổ biến sử dụng lập trình viên Nhanh, nhẹ, hỗ trợ đa tảng, nhiều tính mã nguồn mở ưu điểm vượt trội khiến VS Code ngày ứng dụng rộng rãi - Android studio viii Android Studio IDE thức phát triển ứng dụng Android, dựa IntelliJ IDEA Ngoài khả đáng mong đợi từ IntelliJ, Android Studio cung cấp: o Hệ thống Gradle-based linh hoạt o Xây dựng biến thể tạo nhiều tệp APK o Code mẫu template để hỗ trợ tính app thông thường o Chỉnh sửa bố cục đa dạng với khả kéo thả theme o Công cụ lint giúp nắm bắt hiệu suất, khả sử dụng, phiên tương thích vấn đề khác o ProGuard ứng dụng ký app-signing o Hỗ trợ tích hợp Google Cloud Platform, cho phép dễ dàng tích hợp Google Cloud Messaging App Engine - Xcode Xcode cơng cụ giúp nhóm phát triển ứng dụng hệ điều hành IOS Xcode có tích hợp máy ảo dành riêng cho hệ sinh thái IOS - postman ix 2.2.6 Màn hình hát karaoke Giao diện Mơ tả cách sử dụng xử lý hình Ở hình có: • Phần đầu: Chứa thơng tin hát gồm: o Tên hát o Tên nghệ sĩ • Phần nội dung: Nội dung chi tiết hát: xxxiv o Lời hát: Màu chữ hiển thị theo thời gian phát nhạc o Điều khiển hát Nút giọng sĩ: Phát âm ca sĩ lúc hát Nút tone: Thay đổi tone beat Nút bắt đầu lại: Quay thời gian Nút màu đỏ: Ghi âm lại lúc hát Nút stick: Hồn tất hát, lưu thơng tin vào sở liệu xxxv 2.2.7 Màn hình thư viện Giao diện Mô tả cách sử dụng xử lý hình Ở hình có: • Phần đầu: Chứa tiêu đề trang • Phần nội dung: Nội dung chi tiết hát: o Thanh điều hướng hình xxxvi Playlist and Album: Chuyển hướng sang hình playlist Uploaded beat: Chuyển sang hình tạo beat Love track: Chuyển sang hình hát yêu thích o Album thường nghe Chứa danh sách album thường nghe • Hình ảnh album • Tên album Nút see more recently player: Chuyển sang hình playlist o Lịch sử nghe nhạc Chứa danh sách nhạc nghe người dung • Tên nghệ sĩ • Tên hát • Thời gian phát nhạc • Hình ảnh đại diện • Phần dưới: Chứa định hướng o Hình ảnh ngơi nhà: Chuyển đến hình trang chủ o Hình ảnh kính lúp: Chuyển đến hình tìm kiếm o Hình ảnh đám mây: Chuyển đến hình tạo beat o Hình ảnh kệ sách: Chuyển đến hình thư viện xxxvii 2.2.8 Màn hình playlist Giao diện Mô tả cách sử dụng xử lý hình Ở hình có: • Phần đầu: Chứa tiêu đề trang • Phần nội dung: Danh sách album/playlist o Hình ảnh đại diện o Tên nghệ sĩ xxxviii o Tên album/playlist o Số hát có album/playlist • Phần dưới: Chứa định hướng o Hình ảnh ngơi nhà: Chuyển đến hình trang chủ o Hình ảnh kính lúp: Chuyển đến hình tìm kiếm o Hình ảnh đám mây: Chuyển đến hình tạo beat o Hình ảnh kệ sách: Chuyển đến hình thư viện Khi người dùng nhấn vào album/playlist: Chuyển sang hình chi tiết album/playlist xxxix 2.2.9 Màn hình hát u thích Giao diện Mô tả cách sử dụng xử lý hình Ở hình này, thấy ứng dụng chia làm phần chính: • Phần đầu: Chứa tiêu đề trang • Phần nội dung: Danh sách hát yêu thích người dùng o Hình ảnh đại diện o Tên nghệ sĩ xl o Tên hát o Thời gian phát nhạc • Phần dưới: Chứa định hướng o Hình ảnh ngơi nhà: Chuyển đến hình trang chủ o Hình ảnh kính lúp: Chuyển đến hình tìm kiếm o Hình ảnh đám mây: Chuyển đến hình tạo beat o Hình ảnh kệ sách: Chuyển đến hình thư viện Khi người dùng nhấn vào hát: Chuyển sang hình chi tiết hát xli xlii 2.2.10.Màn hình tạo beat Giao diện Mô tả cách sử dụng xử lý hình Ở hình này, thấy ứng dụng chia làm phần chính: • Phần đầu: Chứa tiêu đề trang • Phần nội dung: o Button thêm file để tạo beat o Lưu ý người dùng xliii • Phần dưới: Chứa định hướng o Hình ảnh ngơi nhà: Chuyển đến hình trang chủ o Hình ảnh kính lúp: Chuyển đến hình tìm kiếm o Hình ảnh đám mây: Chuyển đến hình tạo beat o Hình ảnh kệ sách: Chuyển đến hình thư viện 2.2.11.Màn hình kết tạo beat Giao diện xliv Mơ tả cách sử dụng xử lý hình Ở hình có: • Phần đầu: Chứa tiêu đề trang • Phần nội dung: Nội dung kết tạo beat o Âm hát: Chứa file âm hát, nghe o Lời hát: Chứa lời hát sau tạo beat o Nút continue: Chuyển sang hình kết tạo beat thứ Ở hình có: • Phần đầu: Chứa tiêu đề trang • Phần nội dung: Nội dung kết tạo beat o Hình ảnh đại diện cho hát o Tiêu đề hát o Thể loại hát o Mô tả chi tiết thông tin hát o Nút save: Lưu thông tin hát vào sở liệu, thông báo kết cho người dùng Phần dưới: Chứa định hướng • Hình ảnh ngơi nhà: Chuyển đến hình trang chủ • Hình ảnh kính lúp: Chuyển đến hình tìm kiếm • Hình ảnh đám mây: Chuyển đến hình tạo beat • Hình ảnh kệ sách: Chuyển đến hình thư viện xlv CHƯƠNG IV: CÀI ĐẶT VÀ KIỂM THỬ - Môi trường cài đặt: Android Studio, Visual Studio Code; - Ngôn ngữ phát triển: Dart/Flutter; - Cơ sở liệu: Firebase; - Google API: Google MAP API, Geolocator API, Map for Android, Map for IOS - Thử nghiệm: Nhóm tiến hành cài đặt số thiết bị di động kết cho thấy ứng dụng chạy hai hệ điều hành Android IOS Tuy nhiên số thiết bị chạy phiên Android IOS cũ khơng thể chạy ứng dụng xlvi CHƯƠNG V: KẾT LUẬN VÀ HƯỚNG MỞ RỘNG Kết luận 1.1 Kết đạt o Khi hoàn thành đồ án kết thúc mơn học, nhóm tìm hiểu hoàn thành ứng dụng tương đối hoàn chỉnh với chức đáp ứng nhu cầu người dùng Ứng dụng phát triển theo quy chuẩn 1.2 Ưu điểm o Ứng dụng nhẹ chạy nhanh, chạy Android IOS Ứng dụng không bị rơi vào trạng thái treo thực loading liệu thực tác vụ nặng o Giao diện bắt mắt, thân thiện khơng gây khó chịu cho trải nghiệm sử dụng người dùng o Hiển thị rõ thông tin địa điểm để người dùng dễ dàng hiểu o Tính đường tương đối hồn chỉnh 1.3 Nhược điểm o Còn thiếu số chức không đủ thời gian để phát triển o Các hát cịn chưa đa dạng, bao gồm hát có sẵn dư liệu nhóm chưa kịp tổ chức crawl dư liệu o Khơng chạy thiết bị chạy hệ điều hành cũ Hướng mở rộng o Mở rộng phát triển ứng dụng với hệ thống hát đa dạng o Tối ưu hố tính năng, giao diện để nâng cao trải nghiệm người dùng o Hỗ trợ tương thích ứng dụng chạy hệ điều hành cũ xlvii CHƯƠNG VI: TÀI LIỆU THAM KHẢO [1] Tài liệu Flutter: https://flutter.dev/docs [2] Tài liệu Android Studio: https://developer.android.com [3] Tài liệu Firebase: https://firebase.google.com [4] MVP Architecture: https://ducmanhphan.github.io/2019-08-05-MVP-architectural-pattern/ [5] Ứng dụng tham khảo: Nhaccuatui, Zingmp3, Itune [6] Các cơng cụ tìm kiếm hướng dẫn: Google, Youtube, Stackoverflow, … [7] Thư viện API : https://pub.dev/ xlviii ... để hát karaoke phải dùng tới thiết bị cần thiết hát karaoke Hiểu vấn đề đó, nhóm định tạo ứng dụng di động Karaoke App để đáp ứng nhu cầu hát karaoke beat từ hát có lời để thuận tiện cho người... hiểu hoàn thành ứng dụng tương đối hoàn chỉnh với chức đáp ứng nhu cầu người dùng Ứng dụng phát triển theo quy chuẩn 1.2 Ưu điểm o Ứng dụng nhẹ chạy nhanh, chạy Android IOS Ứng dụng không bị rơi... người dùng sử dụng smartphone nghe nhạc, hát karaoke điện thoại di động Ngồi ứng dụng cịn có chức tách lời âm nhạc từ hát từ giúp người dùng hát karaoke với hát Mục tiêu tương lại: app cung cấp