XÂY DỰNG ỨNG DỤNG REACT NATIVEVÀ ÁP DỤNG FIREBASE VÀO ỨNG DỤNG DI ĐỘNG

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 CUỐI KỲ ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG REACT NATIVE VÀ ÁP DỤNG FIREBASE VÀO ỨNG DỤNG DI ĐỘNG Giảng viên hướng dẫn: Ths Thái Thụy Hàn Uyển Sinh viên thực hiện: Nguyễn Khánh Duy 17520295 Lê Thị Hà 17520417 Năm học 2007 - 2008 NHẬN XÉT (Của giáo viên hướng dẫn) - LỜI CẢM ƠN Lời đầu tiên, nhóm tác giả xin chân thành cảm ơn q thầy khoa Cơng nghệ Phần mềm, trường Đại Học Công Nghệ Thông Tin, ĐHQG TP.HCM, tận tình hướng dẫn nhóm suốt thời gian qua Những kiến thức mà thầy cô truyền đạt tảng quan trọng để nhóm hồn thành đề tài Nhóm tác giả xin gửi lời cảm ơn chân thành lòng biết ơn sâu sắc đến cô Thái Thụy Hàn Uyển, cảm ơn cô tận tình hướng dẫn tạo điều kiện tốt cho nhóm hồn thành đề tài Những lời động viên, góp ý chân tình động lực q báu để nhóm vượt qua khó khăn tìm hiểu thực đề tài Trong thời gian thực đề tài, nhóm tác giả cố gắng vận dụng kiến thức tảng học, kết hợp học hỏi tìm hiểu cơng nghệ để ứng dụng xây dựng đề tài môn học Tuy nhiên trình thực hiện, kiến thức kinh nghiệm cịn nhiều hạn chế, khó tránh khỏi thiếu sót Chính vậy, nhóm tác giả mong nhận góp ý từ q thầy để nhóm hồn thiện thêm kiến thức mà nhóm học tập, làm hành trang q báu cho nhóm cơng việc sau Xin chân thành cảm ơn quý thầy ! Nhóm tác giả MỤC LỤC CHƯƠNG I: GIỚI THIỆU TỔNG QUAN 1.1Thơng tin, đánh giá nhóm MSSV 16520295 Họ tên Nguyễn Khánh Duy 17520417 Lê Thị Hà MSSV 16520295 17520417 Họ tên Nguyễn Khánh Duy Lê Thị Hà Email 16520295@gm.uit.edu.v n 17520417@gm.uit.edu.v n Tỷ lệ % công việc giao 60% 40% Vai trị Trưởng nhóm Thành viên Tỷ lệ % cơng việc hồn thành tốt 100% 100% Nhận xét 1.2Tổng quan đề tài 1.2.1 Bài toán Trong giới, mà công nghệ ngày phát triển, sử dụng ứng dụng ngồi hỗ trợ đủ tính cần thiết,ta mong đợi ứng dụng di động trở nên thơng minh - thích nghi với hoạt động người dùng làm hài lòng tính đáng kinh ngạc Đó lí việc áp dụng học máy trở thành phần quan trọng việc phát triển ứng dụng di động Các developer ngày dựa vào học máy để nâng cao trải nghiệm người dùng ứng dụng Và với mơ hình học máy tinh vi, họ cung cấp tính mạnh mẽ để làm hài lòng người dùng họ Nhưng khơng có chun mơn học máy sao? Làm để bắt đầu? Chính lí đó, Google I/O 2018, Google mắt công cụ phát triển phần mềm (SDK) có tên ML Kit Beta tích hợp vào Firebase Nó cung cấp cơng nghệ học máy google nhiều năm nghiên cứu cho mobile developer, cho phép họ tích hợp số mơ hình học máy vào ứng dụng cách dễ dàng Đồ án 1.2.2 Phạm vi nghiên cứu Trong đồ án lần này, nhóm chủ yếu tập trung vào nghiên firebase ML kit google hổ trợ cho thiết bị mobile mà yếu tảng Android Với phiên thử nghiệm thiết bị ảo (trong phạm vi nghiên cứu thức lưu trữ thiết bị) thiết bị thật (trong phạm vi nghiên cứu thức truy xuất liệu thông qua quét thông tin camera) đến kết luận thành công việc ứng dụng firebase vào mơi trường thực tế Bên cạnh đó, đề tài tập trung nghiên cứu vào cách thuật tốn xử lý thơng tin truy xuất nghiên cứu liên kết thuật toán khác chức khác nhau, qua dẫn đến chức hồn chỉnh sử dụng môi trường thật tế Thông tin thiết bị thử nghiệm đề tài lần này: bao gồm thiết bị: • • • • Realmi C1 Sony XZ1 Samsung Galaxy J7 Pixel 3a XL API 27 1.2.3 Nội dung nghiên cứu Trong việc nghiên cứu chức mà ML kit hổ trợ lần này, nhóm định hướng đến chức năng: • • Text recognition (nhân dạng văn bản) Barcode scanning (quét mã vạch) 1.2.4 Kết hướng tới Với đề tài này, nhóm chúng có mục tiêu chính: Đối với lập trình viên: mang đến hứng thú ứng dụng machine learning lên thiết bị di động, khuyến khích cộng đồng phát triển ứng dụng thơng minh tốn chi phí hơn, qua thúc đẩy phát triển cơng nghệ • Đối với người dùng: mang đến tiện lợi việc trao đổi, lưu trữ thông tin quan trọng như: thông tin liên lạc, tài liệu quan trọng cách nhanh chóng tự động, thơng qua mang đến trải nghiệm thoải mái chuyên nghiệp cho người dùng xã hội cơng nghệ • Đồ án CHƯƠNG II: TÌM HIỂU VỀ FIREBASE ML 1.Giới thiệu: Firebase Machine Learning SDK di động mang đến kiến thức chuyên môn máy học Google cho ứng dụng Android iOS gói mạnh mẽ dễ sử dụng Cho dù bạn người có kinh nghiệm học máy, bạn thực chức bạn cần vài dòng mã Khơng cần phải có kiến thức sâu mạng lưới thần kinh tối ưu hóa mơ hình để bắt đầu Mặt khác, bạn nhà phát triển ML có kinh nghiệm, Firebase ML cung cấp API tiện lợi giúp bạn sử dụng mơ hình TensorFlow Lite tùy chỉnh ứng dụng di động 2.Các chức chính: Host and deploy custom models Đồ án Sử dụng mơ hình TensorFlow Lite riêng bạn để suy luận thiết bị Chỉ cần triển khai mơ hình bạn lên Firebase (Lưu trữ triển khai chúng tơi chăm sóc việc lưu trữ phục vụ cho ứng dụng mơ hình tùy chỉnh) bạn Firebase tự động phục vụ phiên mơ hình cho người dùng bạn, cho phép bạn thường xuyên cập nhật chúng mà đẩy phiên ứng dụng cho người dùng Automatically train models (Tự động đào tạo mơ hình) Production-ready for common use cases (Sẵn sàng sản xuất cho trường hợp sử dụng phổ biến) Đồ án Khi bạn sử dụng Firebase ML với Remote Config , bạn phân phối mơ hình khác cho phân khúc người dùng khác với Thử nghiệm A / B , bạn chạy thử nghiệm để tìm mơ hình hoạt động tốt (xem hướng dẫn iOS Android ) Với Firebase ML AutoML Vision Edge, bạn dễ dàng huấn luyện mơ hình ghi nhãn hình ảnh TensorFlow Lite riêng mình, bạn sử dụng ứng dụng để nhận khái niệm ảnh Tải lên liệu đào tạo, hình ảnh nhãn riêng bạn nhãn hiệu riêng bạn sử dụng chúng để đào tạo mơ hình tùy chỉnh đám mây Firebase ML kèm với API sẵn sàng sử dụng cho trường hợp sử dụng di động phổ biến: nhận dạng văn bản, ghi nhãn hình ảnh xác định mốc Chỉ cần truyền liệu đến thư viện Firebase ML cung cấp cho bạn thông tin bạn cần Các API tận dụng sức mạnh công nghệ máy học Google Cloud Platform để cung cấp cho bạn mức độ xác cao Firebase ML có API hoạt động đám mây thiết bị Khi mô tả API ML API đám mây API thiết bị, google vào máy sử dụng mô hình ML để khám phá thơng tin chi tiết liệu cung cấp Trong Firebase ML, điều xảy Google Cloud thiết bị di động người dùng Các API nhận dạng văn bản, ghi nhãn hình ảnh API nhận dạng mốc thực suy luận đám mây Những mơ hình có sức mạnh tính tốn nhớ khả dụng so với mơ hình thiết bị tương đương, kết là, thực suy luận với độ xác độ xác cao so với mơ hình thiết bị Mặt khác, yêu cầu API yêu cầu chuyến mạng, điều khiến chúng không phù hợp với ứng dụng thời gian thực độ trễ thấp xử lý video API mơ hình tùy chỉnh AutoML Vision Edge đối phó với mơ hình ML chạy thiết bị Các mơ hình sử dụng sản xuất tính mơ hình TensorFlow Lite , tối ưu hóa để chạy thiết bị di động Ưu điểm lớn mơ hình chúng không yêu cầu kết nối mạng chạy nhanh, đủ nhanh để xử lý khung hình video thời gian thực Firebase ML cung cấp hai khả xung quanh mẫu tùy chỉnh thiết bị: Custom model deployment: mơ hình tùy chỉnh triển khai đến thiết bị người dùng cách tải chúng từ trang google Ứng dụng hỗ trợ Firebase bạn tải mô hình thiết bị theo yêu cầu Điều cho phép bạn giữ kích thước cài đặt ban đầu ứng dụng bạn nhỏ bạn trao đổi mơ hình ML mà khơng phải xuất lại ứng dụng AutoML Vision Edge: Dịch vụ giúp bạn tạo mơ hình phân loại hình ảnh tùy chỉnh thiết bị riêng bạn với giao diện web dễ sử dụng Sau đó, bạn lưu trữ liền mạch mơ hình bạn tạo với dịch vụ đề cập Bộ ML kit sẵn có cho di động Firebase ML Kit thư viện cho phép bạn sử dụng dễ dàng với mã rút gọn, sử dụng loạt mơ hình linh hoạt, xác cao ứng dụng Android IOS Hầu hết models mà cung cấp sử dụng local lẫn Google Cloud Đồ án Hiện tại, mơ hình Firebase ML Kit giới hạn cho tác vụ liên quan đến tầm nhìn-của máy tính, chẳng hạn nhận dạng ký tự quang học, quét mã vạch phát đối tượng Khả Production-ready for common use cases On-device or in the cloud Deploy custom models ML Kit kèm với API sẵn sàng sử dụng cho trường hợp sử dụng di động phổ biến: nhận dạng văn bản, phát khuôn mặt, xác định mốc, quét mã vạch, dán nhãn hình ảnh xác định ngơn ngữ văn Chỉ cần truyền liệu đến thư viện ML Kit cung cấp cho bạn thơng tin bạn cần Lựa chọn API ML Kit chạy thiết bị đám mây API thiết bị chúng tơi xử lý liệu bạn cách nhanh chóng hoạt động khơng có kết nối mạng Mặt khác, API dựa đám mây chúng tôi, tận dụng sức mạnh công nghệ máy học Google Cloud Platform để cung cấp cho bạn mức độ xác cao Nếu API ML Kit không bao gồm trường hợp sử dụng bạn, bạn ln mang mơ hình TensorFlow Lite riêng bạn Chỉ cần tải mơ hình bạn lên Firebase chúng tơi chăm sóc việc lưu trữ phục vụ cho ứng dụng bạn ML Kit hoạt động lớp API cho mơ hình tùy chỉnh bạn, giúp cho việc chạy sử dụng đơn giản ML Kit giúp dễ dàng áp dụng kỹ thuật ML ứng dụng bạn cách mang công nghệ ML Google, chẳng hạn API Google Cloud Vision , TensorFlow Lite API Mạng thần kinh Android SDK Cho dù bạn cần sức mạnh xử lý dựa đám mây, khả thời gian thực mơ hình thiết bị tối ưu hóa cho thiết bị di động hay tính linh hoạt mơ hình TensorFlow Lite tùy chỉnh, ML Kit thực với vài dịng mã Các tính ML kit hổ trợ: Đồ án 10 Đặc tả Use Case “Search Code” − − − − − − Tên Usecase: Tạo Note Actor : Người dùng Mơ tả: Tìm kiếm thơng tin code sản phẩm Tiền điều kiện: không Hậu điều kiện: không Luồng kiện chính: + Người dùng chọn tính tìm kiếm code + Sau người dùng chọn, hệ thống chuyển đến giao diện browser tự động tìm kiếm code vừa lấy google Đồ án 43 Đặc tả Use Case “Quét văn bản” − − − − − − Tên Usecase: Quét văn Actor : Người dùng Mô tả: Quet thông tin document dạng phẳng Tiền điều kiện: không Hậu điều kiện: không Luồng kiện chính: + Người dùng chọn tính quét vản + Sau người dùng chọn tính này, hệ thông mở camera bắt đầu quét thông tin văn Sau quét hiển thị cho người dùng Ngồi cịn cung cấp thêm tính mở rộng lưu lại dạng ghi chia sẻ đoạn thơng tin vừa qt Đồ án 44 Đặc tả Use Case “Lưu ghi chú” − − − − − − Tên Usecase: Lưu ghi Actor : Người dùng Mô tả: Lưu thông tin vừa quét vào thiết bị Tiền điều kiện: không Hậu điều kiện: khơng Luồng kiện chính: + Người dùng nhập tiêu đề chọn tính lưu ghi + Sau người dùng chọn tính này, hệ thống lưu lại thông tin vừa quét với tiêu đề người dùng nhập lưu vào thiết bị Đồ án 45 Đặc tả Use Case “Chia sẻ thông tin ghi chú” − − − − − − Tên Usecase: chia sẻ thông tin ghi Actor : Người dùng Mô tả: chia sẻ thông tin vừa quét với người khác qua mạng xã hội Tiền điều kiện: khơng Hậu điều kiện: khơng Luồng kiện chính: + Người dùng chọn tính chia sẻ sau quét thông tin văn + Sau người dùng chọn tính này, hệ thống đưa người dùng đến giao diện mạng xã hội zalo với thông tin muốn chia sẻ điền sẵn Đồ án 46 2.4 Thiết kế giao diện hệ thống Đồ án 47 a) Giao diện hình giới thiệu Đây hình giới thiệu ứng dụng, bật với card hiển thị chức mà người dùng hướng đến Sau người dùng ấn “Start” để bắt đầu Đồ án 48 b) Giao diện hình HOME SCREEN Đây giao diện home, với chức người dùng tùy chọn “Note” tạo lưu trữ thơng tin để sử dụng sau có nhu cầu “CardScanning” quét số điện thoại từ Business Card lưu số vào danh bạ gọi nhanh đến số điện thoại có nhu cầu • “Barcode Scanning” qt xuất thơng tin mã hóa từ dạng barcode qr code • • Đồ án 49 • c) “Text Recogniziton” quét thông tin văn xuất liệu sau thêm tùy chọn lưu lại có cầu Giao diện chức “Note” Đây giao diện chức “Note”, người dùng thêm, xóa, sửa mục “Create a todo” xem lại danh sách “Note” tạo mục “List ToDo” Bên cạnh đó, danh sách “Note” tùy chọn tính “Text Recognition” lưu d) Giao diện chức “Card Scanning” kết Tồn q trình qt , phát lưu số điện thoại vào danh bạ cho người dùng Đồ án 50 Sau quét số điện thoại thẻ, có tùy chọn cho người dùng: lưu vào danh bạ gọi điện ngay, giao diện trình quét chọn chức “Cell Phone”: Một tùy chọn “Add to contact”, hình quét danh thiếp, sau giao diện trình lưu số liên lạc vào điện thoại ứng dụng: Đồ án 51 e) Giao diện chức “Barcode Sacnning” kết Ứng dụng cung cấp chức quét thông tin mã hóa dạng Barcode/QRcode, sau cho phép người dùng truy xuất thơng tin theo nhu cầu riêng cá nhân họ Đồ án 52 Đồ án 53 f) Giao diện chức “Text Recognition” kết Đối với chức “Text Recognition”, sau truy xuất liệu cần thiết, người dùng tùy chọn thêm vào “Note” để lưu lại thông tin quan trọng sử dụng cần thiết Sau giao diện chức này: Các áp dụng firebase Trong trình phát triển ứng dụng này, nhóm tập trung vào tính “Text Recognition” “Barcode scaninning” để tạo chức cho ứng dụng Với tính năng, nhóm tham khảo cách thức hoạt động firebase nghiên cứu áp dụng ngơn ngữ Flutter Đồng thời nghiên cứu tạo ứng dụng giao diện, để giúp áp dụng không bị “thô” Và tập trung xây dựng chức trở nên tự động hóa tự nhiên hóa, đóng góp cho trải nghiệm người dùng sống ngày Đồ án 54 Đóng góp nhóm Với tính “Text Recognition” nhóm tạo thêm API để tạo note chia sẻ nội dung vừa quét cho người khác, tạo tự động tiện dụng so với phương pháp thủ công copy-paste Với tính “Barcode scanning” nhóm tạo thêm API để phân loại nội dung vừa quét Ví dụ đường link, nhóm cung cấp chức đến link browser, cịn mã code sản phẩm, nhóm cung cấp tính search thơng tin sản phẩm google, nhằm cung cấp thơng tin sát thực cho người dùng Đồ án 55 CHƯƠNG IV: THỬ NGHIỆM VÀ ĐÁNH GIÁ Môi trường thử nghiệm: Nhóm thử nghiệm sản phẩm chủ yếu hệ điều hành Android cho thiết bị di động Danh sách thử nghiệm sau: ST T Tên thiết bị Phiên Android Realme C1 Android 8.1 Samsung galaxy J7 pro Android 7.1 Sonny Xperia XZ1 Android 8.0 Google Pixel 3A XL Android 9.0 a Kết thử nghiệm: Ứng dụng tương thích tốt với phiên andoid từ 7.0 trở lên có tượng giật lag máy có cấu hình phiên android q thấp • Đây thử nghiệm chạy thiết bị, phong sử dụng điện tốn đám mây • Ứng dụng xảy tượng tràn số máy có tỉ lệ hình q cũ q • b Đánh giá kết Về bản, nhóm em tự đánh giá vận dụng kiến thức Machine Learning vào ứng dụng, giúp hổ trợ tốt cho người sử dụng thao tác ngày cánh tự động nhanh chóng, qua thúc đẩy công nghệ phát triển nâng cao trải nghiệm người dùng Tuy nhiên, firebase ML kit thử nghiệm ứng dụng xây dựng tảng Flutter đà phát triển, số tính hổ trợ cho kết không mong đợi Đó điều hạn chế khiến ứng dụng cịn chưa đạt mong đợi Đồ án 56 CHƯƠNG V: KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN a Kết đạt Nhóm ứng dụng thành cơng kiến thức firebase xây dựng thành công sản phẩm riêng cho Sản phẩm nhóm cung cấp tính tự động, cho phép người dùng tiết kiệm thời gian công sức xã hội đại gấp rút Về phía cộng đồng developer, nhóm truyền tải hứng thú việc áp dụng kiến thức Machine Learning vào dự án, thúc đẩy q trình đại hóa thời đại cơng nghệ phát triển Góp phần vào xây dựng công nghiệp 4.0 lên văn minh nhân loại b Hướng phát triển Trong tương lai, nhóm tập trung ứng dụng thêm tính khác, sau: • • • Quet văn đa ngơn ngữ, sau cung cấp tùy chọn dịch sang tiếng việt Ap dụng triệt để thông tin quét (phân loại text,… ) Sử dụng nhiều thuật toán chuyên sâu để quét nhiều nội dung Và nâng cao trải nghiệm người dùng cách thoải mái khoa học CHƯƠNG VI: TÀI LIỆU THAM KHẢO Chúng em thao khảo tài liệu số trang web sau đây: https://developers.google.com/ml-kit https://firebase.google.com/docs/ml-kit https://stackoverflow.com/ Xin chân thành cám ơn tác giả giúp nhóm em hồn thành đề tài - HẾT - Đồ án 57 ... để nhóm hồn thành đề tài Nhóm tác giả xin gửi lời cảm ơn chân thành lòng biết ơn sâu sắc đến cô Thái Thụy Hàn Uyển, cảm ơn cô tận tình hướng dẫn tạo điều kiện tốt cho nhóm hồn thành đề tài Những... ảnh bật Phân loại thô Phân loại đối tượng thành danh mục rộng mà bạn sử dụng để lọc đối tượng bạn không quan tâm Các danh mục sau hỗ trợ: hàng gia dụng, hàng thời trang, thực phẩm, thực vật địa... 16520295@gm.uit.edu.v n 17520417@gm.uit.edu.v n Tỷ lệ % công việc giao 60% 40% Vai trị Trưởng nhóm Thành viên Tỷ lệ % cơng việc hồn thành tốt 100% 100% Nhận xét 1.2Tổng quan đề tài 1.2.1 Bài toán Trong giới, mà công