KHÓA LUẬN tốt NGHIỆP tìm HIỂU FLUTTER và xây DỰNG ỨNG DỤNG MINH HOẠ

ĐẠ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 DƯƠNG PHƯỚC HẢI THỌ ĐỖ THÀNH THẮNG KHÓA LUẬN TỐT NGHIỆP TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ Flutter research and build illustrative application KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2020 ĐẠ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 DƯƠNG PHƯỚC HẢI THỌ – 15520851 ĐỖ THÀNH THẮNG – 15520787 KHĨA LUẬN TỐT NGHIỆP TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ Flutter research and build illustrative application KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN TS HUỲNH NGỌC TÍN THS NGUYỄN CƠNG HOAN TP HỒ CHÍ MINH, 2020 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ……………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày tháng năm 2020 NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP CỦA CÁN BỘ HƯỚNG DẪN Tên khóa luận: TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ Cán hướng dẫn: Nhóm SV thực hiện: Dương Phước Hải Thọ 15520851 TS Huỳnh Ngọc Tín Đỗ Thành Thắng 15520787 ThS Nguyễn Cơng Hoan Đánh giá Khóa luận Về báo cáo: Số trang Số chương Số bảng số liệu Số hình vẽ Sản phẩm Số tài liệu tham khảo Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Đánh giá chung: ……………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Điểm sinh viên: Dương Phước Hải Thọ: … /10 Đỗ Thành Thắng: … /10 Người nhận xét (Ký tên ghi rõ họ tên) ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày … tháng … năm 2020 NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP CỦA CÁN BỘ PHẢN BIỆN Tên khóa luận: TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ Nhóm SV thực hiện: Cán phản biện: Dương Phước Hải Thọ 15520851 Đỗ Thành Thắng 15520787 …………………… Đánh giá Khóa luận Về báo cáo Số trang Số chương Số bảng số liệu Số hình vẽ Sản phẩm Số tài liệu tham khảo Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Đánh giá chung:……………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Điểm sinh viên: Dương Phước Hải Thọ: … /10 Đỗ Thành Thắng: … /10 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Lời nhóm em xin chân thành cảm ơn Thầy (Cô) trường Đại học Công Nghệ Thông Tin đặc biệt Thầy (Cô) Khoa Cơng Nghệ Phần Mềm tận tình dạy, truyền đạt kiến thức quý báu suốt thời gian học tập trường Tiếp xin chân thành cảm ơn sâu sắc đến TS Huỳnh Ngọc Tín ThS Nguyễn Công Hoan bảo hướng dẫn nhóm em suốt q trình thực đề tài Bên cạnh đó, xin cảm ơn người thân, bạn bè giúp đỡ, động viên để nhóm có thêm động lực học tập suốt thời gian qua Cuối cùng, dù cố gắng hoàn thành đề tài với tất nỗ lực, khố luận khơng tránh khỏi thiếu sót, nhóm chúng em mong nhận được ý kiến đóng góp chân thành từ quý thầy cô bạn Chúc quý thầy cô có nhiều sức khỏe thành cơng sống Trân trọng cảm ơn! Tp Hồ Chí Minh, tháng 07 năm 2020 Nhóm thực Dương Phước Hải Thọ Đỗ Thành Thắng ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT Tên đề tài tiếng việt: Tìm hiểu Fultter xây dựng ứng dụng minh hoạ Tên đề tài tiếng anh: Flutter Reseach And Build Illustrative Application Cán hướng dẫn: TS Huỳnh Ngọc Tín ThS Nguyễn Cơng Hoan Thời gian thực hiện: Từ ngày 16/03/2020 đến ngày 11/07/2020 Sinh viên thực hiện: Dương Phước Hải Thọ – 15520851 Đỗ Thành Thắng – 15520787 Nội dung đề tài: • Mục tiêu: - Tìm hiểu tổng quan Flutter, lịch sử phát triển, ưu nhược điểm, so sánh Flutter với đối thủ - Tìm hiểu ngôn ngữ Dart: cú pháp, kiểu liệu thường dùng, lập trình bất động bộ, kỹ thuật lập trình, … - Tìm hiểu kỹ thuật lập trình với Flutter - Tìm hiểu cơng nghệ phù hợp kết hợp với Flutter để xây dựng ứng dụng tảng Android iOS • Đới tượng: - Các công cụ thư viện Flutter - Các công nghệ phù hợp hỗ trợ xây dựng ứng dụng minh họa - Những cá nhân có nhu cầu cập nhật tin tức, giải trí • Phương pháp thực - Làm việc nhóm hai thành viên, lên kế hoạch thực bằng cách trao đổi trực tiếp gián tiếp qua kênh chat online - Tham khảo ứng dụng tương tự - Tham khảo ý kiến giảng viên hướng dẫn để đạt kết tốt - Thu thập phản hồi người dùng để hồn thiện ứng dụng • Kết mong đợi - Hiểu được kiến thức liên quan đến Flutter - Biết cách sử dụng công cụ hỗ trợ lập trình đa tảng với Flutter - Biết được kỹ thuật lập trình với Flutter - Biết cách sử dụng công nghệ hỗ trợ để xây dựng ứng dụng minh họa - Có khả dùng Flutter để xây dựng ứng dụng đa tảng - Hoàn thành ứng dụng tổng hợp tin tức, bảng xếp hạng hát đáp ứng nhu cầu cập nhật tin tức giải trí người dùng với giao diện trực quan, hoạt động tốt hai tảng Android iOS Chia sẻ viết Lưu viết Thay đổi kích thước chữ Cho phép người dùng tăng giảm kích thước chữ phù hợp cho việc đọc viết Thay đổi màu chữ Cho phép người dùng chọn màu chữ phù hợp cho việc đọc viết Thay đổi màu Cho phép người dùng chọn màu phù hợp cho việc đọc viết Phục hồi mặc định Giao diện đọc viết được phục hồi mặc định Danh sách gợi ý Khi kết thúc viết có danh sách gợi ý viết liên quan chuyên mục để người dùng đọc tiếp Bảng 4.8 Chú thích giao diện nội dung bảng tin 62 4.5.4 Giao diện lịch sử tin xem Hình 4.26 Giao diện lịch sử tin xem Mơ tả Giao diện lịch sử tin xem cung cấp cho người dùng danh sách viết mà người dùng xem gần đây, đồng thời cho phép người dùng xoá lịch sử tin xem Điều hướng và tương tác người dùng STT Ý nghĩa 63 Danh sách viết người xem Giúp người dùng xem lại viết mà xem gần Xoá lịch sử viết xem Khi người dùng chọn vào ứng dụng xoá toàn lịch sử viết người dùng xem Bảng 4.9 Chú thích giao diện lịch sử tin xem 4.5.5 Giao diện tin lưu Hình 4.27 Giao diện tin lưu 64 Mô tả Giao diện tin lưu cung cấp cho người dùng danh sách viết mà người dùng lưu, đồng thời cho phép người dùng xoá viết khỏi đanh sách lưu Điều hướng và tương tác người dùng STT Ý nghĩa Danh sách viết mà người dùng lưu Xoá viết khỏi danh sách lưu kéo viết sang trái Mở hình cài đặt Mở hình tin lưu Mở hình nhạc u thích Chuyển đến hình bảng tin, nhạc, lưu Bảng 4.10 Chú thích giao diện tin lưu 65 4.5.6 Giao diện bảng xếp hạng bài hát Hình 4.28 Giao diện bảng xếp hạng hát Mô tả Giao diện bảng xếp hạng hát cung cấp cho người dùng danh sách hát thịnh hành từng bảng xếp hạng Điều hướng và tương tác người dùng Ý nghĩa STT Mở hình cài đặt 66 Danh sách bảng xếp hạng âm nhạc theo quốc gia Danh sách hát tương ứng vời bảng xếp hạng Chuyển đến hình bảng tin, nhạc, lưu Bảng 4.11 Chú thích giao diện bảng xếp hạng hát 4.5.7 Giao diện chơi bài hát Hình 4.29 Giao diện chơi hát 67 Mô tả Giao diện chơi hát cung cấp cho người dùng chức việc nghe nhạc (dừng, phát, chuyển bài, seek), chức tải, chia sẻ, yêu thích hát, thay đổi chất lượng nghe, chế độ lắp, chế độ nghe ngẫu nhiên hẹn tắt hát Điều hướng và tương tác người dùng Ý nghĩa STT Bài hát trước Bài hát Chơi/ tạm ngừng Thay đổi chế độ nghe ngẫu nhiên Thay đổi chế độ nghe lặp Cho phép người dùng kéo phát vị trí Thay đổi chất lượng hát Tải hát máy Chia sẻ hát 10 Yêu thích hát 11 Hẹn tắt hát 12 Trở hình danh sách bảng xếp hạng Bảng 4.12 Chú thích giao diện chơi hát 68 4.5.8 Giao diện nhạc yêu thích Hình 4.30 Giao diện nhạc u thích Mơ tả Giao diện nhạc yêu thích cung cấp cho người dùng danh sách hát mà người dùng yêu thích, đồng thời cho phép người dùng xoá hát khỏi đanh sách yêu thích 69 Điều hướng và tương tác người dùng Ý nghĩa STT Danh sách hát người dùng yêu thích Cho phép người dùng xố hát khỏi danh sách u thích kéo hát sang trái Chuyển đến hình bảng tin, nhạc, lưu Mở hình tin lưu Mở hình nhạc u thích Mở hình cài đặt Bảng 4.13 Chú thích giao diện nhạc u thích 70 4.5.9 Giao diện cài đặt Hình 4.31 Giao diện cài đặt Mô tả Giao diện cài đặt cho phép người dùng thay đổi chế độ chế độ tối, chế độ đọc tin nhanh, cho phép người dùng lọc chuyên mục viết phù hợp với sở thích Điều hướng và tương tác người dùng Ý nghĩa STT Bật, tắt chế độ tối 71 Bật, tắt chế độ đọc nhanh Chuyển đến hình lịch sử tin xem Lọc chuyên mục Cho phép người dùng hiển chuyên mục viết mà người dùng quan tâm Bảng 4.14 Chú thích giao diện cài đặt 72 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết đạt được 5.1 Qua q trình thực khố luận, nhóm thu được số kết sau: - Về mặt kiến thức: • Nắm được kiến thức tổng quan, ưu nhược điểm, kiến trúc Flutter • Nắm được khái niệm cách sử dụng widget Flutter • Tìm hiểu được mơ hình, thư viện thường được sử dụng áp dụng vào ứng dụng minh hoạ • Tìm hiểu được nhiều cơng nghệ để áp dụng vào việc xây dựng ứng dụng minh hoạ - Về mặt sản phẩm: Hoàn thành được ứng dụng minh hoạ chức bật: • Cập nhật liên tục thơng tin từ nhiều đầu báo uy tín • Cung cấp giao diện đọc tin tức với nhiều tuỳ chỉnh • Phát nội dung viết • Cập nhật liên tục bảng xếp hạng hát thịnh hành • Chức ứng dụng nghe nhạc • Cập nhật tin nóng, bảng xếp hạng hát gửi thông báo cho người dùng • Chia sẻ lưu viết hát • Cung cấp giao diện trực quan, thân thiện người dùng với nhiều tuỳ chỉnh hoạt động tốt nhiều thiết bị, nhiều tảng khác 5.2 Hướng phát triển Nhóm dự định tương lai hoàn thiện phát triển thêm chức cho ứng dụng với nội dung sau: - Hiển thị giao diện điều khiển nhạc thông báo hình khố - Tối ưu tốc độ cho chức phát nội dung viết 73 - Thêm chức đăng nhập - Thêm chức liên quan đến video vào ứng dụng 74 TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt [1] Long25vn, “Dart Flutter, không?”, 2019 [Online] Available: https://gist.github.com/long25vn/f5de9acecf101e7ddb96445131285789 Tài liệu tiếng Anh [2] A A Rahmadi, “Python Simple Crawling Using Beautifulsoup”, 2017 [Online] Available: https://medium.com/milooproject/python-simple-crawlingusing-beautifulsoup-8247657c2de5 [3] A Bharadwaj, “Python | Build a REST API using Flask” [Online] Available: https://www.geeksforgeeks.org/python-build-a-rest-api-using-flask/ [4] felangel, “Bloc Architecture” [Online] Available: https://bloclibrary.dev/#/architecture [5] Flutter, “Flutter for Developers (Mobile World Congress ‘19)” (08/03/2019) [Online Video] Available: https://www.youtube.com/watch?v=ai5lnhaGm8U [6] Flutter developers, “Flutter documentation” [Online] Available: https://flutter.dev/docs [7] Google Firebase, “Firebase Cloud Messaging Documentation” [Online] Available: https://firebase.google.com/docs/cloud-messaging [8] iteo, “Why Choose Flutter? Pros & Cons”, 2019 [Online] Available: https://medium.com/@iteo/why-choose-flutter-pros-cons-46cd12881d14 [9] Microsoft, “Azure documentation” [Online] Available: https://docs.microsoft.com/en-us/azure/?product=featured 75 [10] M L Napoli, Beginning Flutter: A Hands On Guide to App Development, England: Wrox Press, 2019 [11] M Rešetár, “Flutter Bloc Library Tutorial (1.0.0 and Up) – Reactive State Management Crash Course” (26/10/2019) [Online Video] Available: https://resocoder.com/2019/10/26/flutter-bloc-library-tutorial-1-0-0-stable-reactivestate-management/ [12] R Payne, Beginning App Development with Flutter: Create Cross-Platform Mobile Apps, New York, USA: Apress, 2019 [13] S Jagtap, “Flutter vs React Native: A Developer’s Perspective”, 2018 [Online] Available: https://nevercode.io/blog/flutter-vs-react-native-a-developersperspective/ [14] T Sneath, “Flutter Spring 2020 Update”, 2020 [Online] Available: https://medium.com/flutter/flutter-spring-2020-update-f723d898d7af [15] T Sneath, “Two Months of #FlutterGoodNewsWednesday”, 2020 [Online] Available: https://medium.com/flutter/two-months-of-fluttergoodnewswednesdaya12e60bab782 76 ... KHỐ LUẬN Khóa luận đề tài ? ?Tìm hiểu Flutter xây dựng ứng dụng minh họa” bao gồm nội dung sau: - Tìm hiểu Flutter: • Tìm hiểu tổng quan Flutter, ưu nhược điểm, so sánh với đối thủ • Tìm hiểu. .. • Tìm hiểu cách xây dựng UI với Flutter • Tìm hiểu kỹ thuật lập trình với Flutter • Tìm hiểu thư viện cơng cụ Flutter - Tìm hiểu cơng nghệ khác hỗ trợ xây dựng ứng dụng minh họa - Thiết kế xây. .. dụng minh họa - Xây dựng ứng dụng minh hoạ hoạt động tốt hai tảng Android iOS 1.2.2 Phạm vi đề tài Đề tài ? ?Tìm hiểu Flutter xây dựng ứng dụng họa” gồm hai nội dung với phạm vi sau: - Tìm hiểu:

Định dạng
Số trang	97
Dung lượng	3,83 MB