Khóa luận Phát triển app ứng dụng công nghệ thực tế tăng cường hỗ trợ trẻ em tìm hiểu về phương tiện giao thông nhằm tạo ra một ứng dụng công nghệ thực tế tăng cường AR (Augmented Reality) trên nền tảng Flutter, giúp trẻ em tìm hiểu về phương tiện giao thông và nâng cao nhận thức về an toàn giao thông. Khóa luận tập trung vào nghiên cứu và phát triển tính năng AR để tạo ra các hình ảnh và âm thanh của các phương tiện giao thông khác nhau, và cho phép trẻ em tương tác với chúng bằng cách chạm vào màn hình hoặc di chuyển thiết bị. Ứng dụng cũng cung cấp các nội dung giáo dục về các quy tắc và quy tắc an toàn giao thông. Ứng dụng sẽ có tính tương tác và sinh động để thu hút sự quan tâm và thích thú của trẻ em. Kết quả của khóa luận là một app ứng dụng công nghệ thực tế tăng cường AR hoàn chỉnh, chất lượng và hữu ích cho trẻ em trong việc nâng cao nhận thức về an toàn giao thông và tìm hiểu về phương tiện giao thông.
ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TRỊNH QUỐC TUẤN PHÁT TRIỂN APP ỨNG DỤNG CÔNG NGHỆ THỰC TẾ TĂNG CƯỜNG HỖ TRỢ TRẺ EM TÌM HIỂU VỀ PHƯƠNG TIỆN GIAO THƠNG KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Cơng nghệ Kỹ thuật Điện tử - Viễn thông HÀ NỘI - 2023 ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TRỊNH QUỐC TUẤN PHÁT TRIỂN APP ỨNG DỤNG CÔNG NGHỆ THỰC TẾ TĂNG CƯỜNG HỖ TRỢ TRẺ EM TÌM HIỂU VỀ PHƯƠNG TIỆN GIAO THƠNG KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Cơng nghệ Kỹ thuật Điện tử - Viễn thông Cán hướng dẫn: TS Nguyễn Kiêm Hùng HÀ NỘI – 2023 VIETNAM NATIONAL UNIVERSITY, HANOI UNIVERSITY OF ENGINEERING AND TECHNOLOGY TRINH QUOC TUAN DEVELOPMENT OF AN AUGMENTED REALITY APPLICATION TO ENHANCE SUPPORT FOR CHILDREN TO LEARN ABOUT TRANSPORTATION Major: Electronics and Telecommunications Engineering Supervisor: Dr Nguyen Kiem Hung HANOI - 2023 TĨM TẮT Tóm tắt: Khóa luận "Phát triển app ứng dụng cơng nghệ thực tế tăng cường hỗ trợ trẻ em tìm hiểu phương tiện giao thông" nhằm tạo ứng dụng công nghệ thực tế tăng cường AR (Augmented Reality) tảng Flutter, giúp trẻ em tìm hiểu phương tiện giao thông nâng cao nhận thức an tồn giao thơng Khóa luận tập trung vào nghiên cứu phát triển tính AR để tạo hình ảnh âm phương tiện giao thông khác nhau, cho phép trẻ em tương tác với chúng cách chạm vào hình di chuyển thiết bị Ứng dụng cung cấp nội dung giáo dục quy tắc quy tắc an tồn giao thơng Ứng dụng có tính tương tác sinh động để thu hút quan tâm thích thú trẻ em Kết khóa luận app ứng dụng công nghệ thực tế tăng cường AR hồn chỉnh, chất lượng hữu ích cho trẻ em việc nâng cao nhận thức an tồn giao thơng tìm hiểu phương tiện giao thơng Từ khóa: Flutter, phương tiện giao thơng, an tồn giao thơng, giáo dục, trẻ em, AR i ABSTRACT Abstract: The thesis "Development of an augmented reality application to enhance support for children to learn about transportation" aims to create an augmented reality (AR) application on the Flutter platform to help children learn about transportation and improve their awareness of traffic safety The thesis focuses on researching and developing AR features to create images and sounds of various transportation vehicles and allows children to interact with them by touching the screen or moving the device The application also provides educational content about traffic rules and safety regulations The application will be interactive and lively to attract the attention and interest of children The result of the thesis is a complete, high-quality, and useful AR application for children to enhance their awareness of traffic safety and learn about transportation vehicles Keyword: Flutter, transportation vehicles, traffic safety, children, augmented reality ii LỜI CẢM ƠN Trước bắt đầu, em muốn bày tỏ lòng biết ơn chân thành đến TS Nguyễn Kiêm Hùng, người hướng dẫn em suốt trình thực khóa luận tốt nghiệp với tinh thần tận tâm cung cấp tài liệu tham khảo hữu ích Em muốn gửi lời cảm ơn đến giáo viên công tác khoa Điện tử - Viễn thông cán Phòng đào tạo Đại học Trường Đại học Công nghệ, người tạo điều kiện tốt để em học tập nghiên cứu khóa luận tốt nghiệp Em xin bày tỏ lịng biết ơn đến gia đình người bạn thân thiết, người ủng hộ động viên em thời điểm khó khăn để hồn thành tốt khóa luận Trong q trình thực khóa luận tốt nghiệp, em nhận thấy cịn thiếu sót Vì vậy, em mong nhận bảo góp ý tận tình từ phía thầy để em hồn thiện khóa luận tốt nghiệp cách tốt Em xin chân thành cảm ơn! Hà Nội, ngày tháng năm 2023 iii LỜI CAM ĐOAN Em xin cam đoan khóa luận “Phát triển app ứng dụng cơng nghệ thực tế tăng cường hỗ trợ trẻ em tìm hiểu phương tiện giao thơng” em hồn tồn thực hướng dẫn giám sát TS Nguyễn Kiêm Hùng Tất nội dung tham khảo nghiên cứu trích dẫn nguồn gốc rõ ràng mục tài liệu tham khảo Nếu phát gian lận nào, em xin chịu trách nhiệm trước Hội đồng kết khóa luận Hà Nội, ngày tháng năm 2023 Tác giả iv MỤC LỤC TÓM TẮT i LỜI CẢM ƠN .iii LỜI CAM ĐOAN iv MỤC LỤC v DANH MỤC HÌNH ẢNH vii DANH MỤC BẢNG viii Chương 1: Giới thiệu 1.1 Giới thiệu chung đề tài 1.2 Lý chọn đề tài 1.3 Mục đích mục tiêu khóa luận 1.4 Phạm vi nghiên cứu 1.5 Kết mong đợi Chương 2: Cơ sở lý thuyết 2.1 Môi trường phát triển 2.2.1 Android Studio 2.2.2 Git 2.2.3 Visual Studio Code 2.2 Giới thiệu Flutter 2.2.1 Tổng quan Flutter 2.2.2 Ưu điểm 2.2.3 Nhược điểm 2.2.4 Kiến trúc Flutter 2.2.5 Widget 2.2.6 Trạng thái (State) 2.2.7 Vòng đời stateful widget 2.2.8 Khái niệm Widget tree Element tree v 2.2.9 Các widget quan trọng 10 2.2.10 Package 11 2.3 Giới thiệu ngôn ngữ Dart 12 2.3.1 Kiểu liệu 13 2.3.2 Các biến hàm (function) 15 2.3.3 Toán tử (operators) 15 2.4.4 Lập trình hướng đối tượng 16 2.4 Công nghệ ARCore 18 2.5 Nguyên lý nhận diện ảnh 19 2.5.1 Điểm đặc trưng 19 2.5.2 Ghép nối 22 2.5.3 Phân bố điểm đặc trưng 22 2.5.4 Áp dụng thực tế 23 CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 25 3.1 Mơ hình user flow 25 3.2 Chi tiết danh sách giao diện 26 3.2.1 Màn hình chào mừng 26 3.2.2 Màn hình 27 3.2.3 Màn hình chi tiết phương tiện 28 3.2.4 Màn hình thực tế tăng cường 29 3.2.5 Yêu thích 30 3.2.6 Tin tức 31 3.2.7 Cài đặt chung 32 3.3 Kết thử nghiệm đánh giá 33 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 36 4.1 Kết đạt 36 4.2 Hướng phát triển 36 TÀI LIỆU THAM KHẢO 38 vi DANH MỤC HÌNH ẢNH Hình 2.1: Kiến trúc Flutter Hình 2.2: Minh hoạ widget chương trình Flutter Hình 2.3: Hệ thống state Hình 2.4: Vịng đời stateful widget Hình 2.5: Widget tree, Element tree, Render tree 10 Hình 2.6: Mơ tả biến Null 13 Hình 2.7: Minh hoạ thêm phần tử vào mảng 14 Hình 2.8: Ví dụ mơ tính chất kế thừa 18 Hình 2.9: Các vùng đặc trưng chọn 19 Hình 2.10: Mơ tả Vùng 20 Hình 2.11: Mơ tả vùng 20 Hình 2.12: Mơ tả vùng 21 Hình 2.13: Mơ tả vùng 21 Hình 2.14: Mơ tả vị trí đặc trưng khác 22 Hình 2.15: Mô tả điểm đặc trưng khác 22 Hình 2.16: Mơ tả so sánh hai đối tượng đặc trưng 23 Hình 2.17: Mơ tả sai lệch hai đối tượng 23 Hình 2.18: Mơ tả điểm ảnh 24 Hình 3.1: Mơ tả mơ hình user flow 25 Hình 3.2: Mơ tả hình chào mừng 26 Hình 3.3: Mơ tả hình 27 Hình 3.4: Mơ tả hình chi tiết phương tiện 28 Hình 3.5: Mơ tả hình thực tế tăng cường 29 Hình 3.6: Mơ tả hình mục u thích 30 Hình 3.7: Mơ tả hình tin tức 31 Hình 3.8: Mơ tả hình cài đặt chung 32 Hình 3.9: Thử nghiệm thực tế tăng cường 34 vii CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 3.1 Mơ hình user flow Hình 3.1: Mơ tả mơ hình user flow 25 3.2 Chi tiết danh sách giao diện 3.2.1 Màn hình chào mừng Hình 3.2: Mơ tả hình chào mừng Mơ tả: Giới thiệu app với hiệu tuyên truyền Điều hướng tương tác người dùng: Bảng 3.1: Chú thích giao diện hình chào mừng STT Ý nghĩa Chuyển đến hình ứng dụng 26 3.2.2 Màn hình Hình 3.3: Mơ tả hình Mơ tả: Giao diện cung cấp danh sách phân loại cho loại phương tiện xếp chuyên mục Điều hướng tương tác người dùng: Bảng 3.2: Chú thích giao diện hình Ý nghĩa STT Tiêu đề chào mừng Tranh ảnh liên quan đề tài, chuyển hướng đến trang tin tức Phân loại phương tiện 27 Danh sách phương tiện liệt kê, chuyển đến hình cho tiết phương tiện Chuyển đến hình u thích, tin tức cài đặt 3.2.3 Màn hình chi tiết phương tiện Hình 3.4: Mơ tả hình chi tiết phương tiện Mơ tả: Giao diện giới thiệu đối tượng phương tiện với thông tin nơi xuất xứ, loại xe, vùng hoạt động, tải trọng 28 Điều hướng tương tác người dùng: Bảng 3.3: Chú thích giao diện hình chi tiết phương tiện Ý nghĩa STT Chuyển hình trước Thêm vào danh mục u thích Mở rộng phần sơ lược tiểu sử Chuyển tới hình thực tế tăng cường 3.2.4 Màn hình thực tế tăng cường Hình 3.5: Mơ tả hình thực tế tăng cường 29 Mơ tả: Hình 3D phóng dựa mục tiêu ảnh 2D, kèm với đoạn văn giới thiệu nút bấm (khi bấm vào phát giới thiệu giọng nói) Điều hướng tương tác người dùng: Bảng 3.4: Chú thích giao diện hình thực tế tăng cường Ý nghĩa STT Phát đoạn giới thiệu ghi lại giọng nói 3.2.5 u thích Hình 3.6: Mơ tả hình mục u thích 30 Mơ tả: Màn hình lưu trữ đối tượng phương tiện thêm vào phần yêu thích Điều hướng tương tác người dùng: Bảng 3.5: Chú thích giao diện hình u thích Ý nghĩa STT Chuyển hình trước Hướng đến hình chi tiết phương tiện 3.2.6 Tin tức Hình 3.7: Mơ tả hình tin tức 31 Mơ tả: Màn hình tổng hợp trang báo chuẩn bị sẵn, có liên quan đến chủ đề đề tài Điều hướng tương tác người dùng: Bảng 3.6: Chú thích giao diện hình tin tức Ý nghĩa STT Hướng đến trang báo tương ứng 3.2.7 Cài đặt chung Hình 3.8: Mơ tả hình cài đặt chung 32 Mô tả: Tổng quan cài đặt app tuỳ chỉnh chế độ tối Điều hướng tương tác người dùng: Bảng 3.7: Chú thích giao diện hình cài đặt chung Ý nghĩa STT Chuyển hình trước Giới thiệu ứng dụng Tuỳ chỉnh chế độ sáng tối Chính sách ứng dụng Hỗ trợ 3.3 Kết thử nghiệm đánh giá Tiến hành thực nghiệm thực tế: 33 Hình 3.9: Thử nghiệm thực tế tăng cường Dựa phần trên, đánh giá kết thử nghiệm sau: Phân bố đặc trưng: Kết thử nghiệm cho thấy phân bố điểm đặc trưng ảnh tốt Có số vùng trống nhỏ tổng thể phân bố điểm Cụ thể hơn, chia hình ảnh thành vùng trừ điểm số cho vùng trống Tính độc nhất: Ứng dụng tính tốn giống điểm đặc trưng phát Kích thước hình ảnh: Ảnh xử lý với độ phân giải tốt tỷ lệ khung hình hợp lý 34 Tổng thể, kết thử nghiệm tốt Tuy nhiên, để đánh giá xác hơn, nên xem xét thêm yếu tố khác tốc độ xử lý, độ xác kết quả, tính ổn định cơng cụ 35 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt Qua q trình thực khóa luận, thu số kết sau Về mặt kiến thức: ● Nắm kiến thức tổng quan, ưu nhược điểm, kiến trúc Flutter ● Nắm khái niệm cách sử dụng widget Flutter ● Tìm hiểu mơ hình, thư viện thường sử dụng áp dụng vào ứng dụng minh hoạ ● Có nhiều kiến thức cơng nghệ AR phát triển ứng dụng tảng Flutter ● Nắm kỹ thuật để triển khai tính AR ứng dụng di động, từ việc xử lý hình ảnh đến hiển thị đối tượng 3D hình Về mặt sản phẩm: ● Đã phát triển thành công ứng dụng di động sử dụng công nghệ AR để giáo dục trẻ em phương tiện giao thơng an tồn giao thơng ● Ứng dụng có tính tương tác giúp trẻ em học tập cách thú vị hiệu 4.2 Hướng phát triển Để phát triển nâng cao chất lượng ứng dụng, em đưa số hướng phát triển sau: ● Bổ sung thêm nội dung giáo dục: Ngoài giáo dục phương tiện giao thơng, bổ sung thêm nội dung giáo dục khác để giúp trẻ em học tập nhiều đa dạng ● Phát triển phiên cho hệ điều hành khác: Hiện tại, ứng dụng hỗ trợ hệ điều hành Android Trong tương lai, phát triển phiên cho hệ điều hành khác iOS để phục vụ nhiều người dùng ● Tích hợp chức đánh giá phản hồi: Tính giúp người dùng đóng góp ý kiến đánh giá ứng dụng, từ giúp tác giả cải thiện nâng cao chất lượng sản phẩm 36 ● Tăng cường tính tương tác: Có thể bổ sung thêm tính tương tác thêm âm thanh, phát triển trị chơi liên quan đến an tồn giao thơng để thu hút trẻ em ● Áp dụng công nghệ mới: Với phát triển cơng nghệ AR, áp dụng công nghệ để phát triển cải thiện chất lượng ứng dụng 37 TÀI LIỆU THAM KHẢO Tài liệu tiếng Anh [1] Android Developers, “Documentation” [Online] Available: [2] [3] https://developer.android.com/docs Git SCM, “Documentation” [Online] Available: https://git-scm.com/doc Visual Studio Code, “Documentation for Visual Studio Code” [Online] [4] Available: https://code.visualstudio.com/docs Flutter developers, “Flutter documentation” [Online] Available: [5] https://flutter.dev/docs Shirsh Shukla, “Flutter Forward 2023: What’s new in version 3.7” [Online] Available: https://medium.com/@shirsh94/flutter-forward-2023- [6] whats-new-in-version-3-7-e0aea0ed45 Dart, “Dart programming language” [Online] Available: https://dart.dev/guides [7] Google Developers, “Overview of ARCore and supported development [8] [9] environments” [Online] Available: https://developers.google.com/ar/develop HiuKim Yuen, “How to Choose a Good Target Image for Tracking in AR - Part 1” [Online] Available: https://www.mindar.org/how-to-choose-agood-target-image-for-tracking-in-ar-part-1/ HiuKim Yuen, “How to Choose a Good Target Image for Tracking in AR - Part 2” [Online] Available: https://www.mindar.org/how-to-choose-agood-target-image-for-tracking-in-ar-part-2/ Tài liệu tiếng Việt [10] Gambaru, “Flutter gì? Cách cấu trúc dự án Flutter” [Online] Available: https://gambaru.io/en/blog/flutter-la-gi-cau-truc-du-an-flutter [11] Nguyen Ngoc Son C, “Giới thiệu ARCore” [Online] Available: https://viblo.asia/p/gioi-thieu-ve-arcore-924lJD0YKPM 38 39