KHÓA LUẬN tốt NGHIỆP ỨNG DỤNG CÔNG NGHỆ THỰC tế TĂNG CƯỜNG TRONG xây DỰNG hệ THỐNG KINH DOANH đồ nội THẤT

ĐẠ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 HUỲNH QUỐC TRUNG LÊ QUỐC PHƯƠNG KHÓA LUẬN TỐT NGHIỆP ỨNG DỤNG CÔNG NGHỆ THỰC TẾ TĂNG CƯỜNG TRONG XÂY DỰNG HỆ THỐNG KINH DOANH ĐỒ NỘI THẤT APPLYING VIRTUAL REALITY TECHNOLOGY IN BUILDING A FURNITURE BUSINESS SYSTEM KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠ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 HUỲNH QUỐC TRUNG - 17520184 LÊ QUỐC PHƯƠNG - 17520134 KHĨA LUẬN TỐT NGHIỆP ỨNG DỤNG CƠNG NGHỆ THỰC TẾ TĂNG CƯỜNG TRONG XÂY DỰNG HỆ THỐNG KINH DOANH ĐỒ NỘI THẤT APPLYING VIRTUAL REALITY TECHNOLOGY IN BUILDING A FURNITURE BUSINESS SYSTEM KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ MINH, 2021 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 ………………………………………… – Chủ tịch ………………………………………… – Thư ký ………………………………………… – Ủy viên ………………………………………… – Ủy viên LỜI CẢM ƠN Để hồn thành khóa luận cách hồn chỉnh, nhóm em nhận nhiều hướng dẫn nhiệt tình q Thầy Cơ Vì vậy, nhóm xin phép gửi lời cảm ơn chân thành Đầu tiên, nhóm em xin chân thành cảm ơn bày tỏ lòng biết ơn sâu sắc đến ThS Huỳnh Hồ Thị Mộng Trinh, cô tận tình bảo, hướng dẫn, truyền đạt kinh nghiệm, kiến thức chuyên môn tài liệu liên quan để nhóm hồn khóa luận tốt Nhóm xin gởi đến lời tri ân điều mà cô dành cho nhóm Nhóm xin chân thành cảm ơn tồn thể quý thầy cô khoa Công Nghệ Phần Mềm tồn thể q thầy Trường Đại Học Công Nghệ Thông Tin TP.HCM Quý thầy cô tận tình truyền đạt kiến thức, kinh nghiệm quý báu tạo điều kiện thuận lợi cho nhóm suốt q trình học tập trường đặc biệt suốt trình thực khóa luận Sau cùng, nhóm xin kính chúc tồn thể q thầy khoa Cơng Nghệ Phần Mềm, ThS Huỳnh Hồ Thị Mộng Trinh dồi sức khỏe, nhiệt huyết thành công sống sứ mệnh truyền đạt kiến thức cho hệ trẻ mai sau TP Hồ Chí Minh, ngày 30 tháng 06 năm 2021 Sinh viên Huỳnh Quốc Trung Sinh viên Lê Quốc Phương MỤC LỤC TÓM TẮT KHÓA LUẬN MỞ ĐẦU .2 Chương TỔNG QUAN .4 1.1 Đặt vấn đề 1.2 Các ứng dụng tương tự 1.2.1 Houzz 1.2.2 Room Planner 1.2.3 Ứng dụng HomeStyler .7 1.2.4 Vấn đề phần mềm 1.2.5 Hướng giải vấn đề .8 1.2.6 Tóm lược .9 1.3 Mục tiêu 1.4 Phạm vi ứng dụng 10 Chương TỔNG QUAN CÔNG NGHỆ 12 2.1 Công nghệ thực tế ảo tăng cường - Augmented Reality .12 2.1.1 Phần cứng 12 2.1.2 Ứng dụng thực tế ảo tăng cường 12 2.2 ARCore 13 2.3 Unity 15 2.4 ReactJS Redux 16 2.4.1 ReactJS 16 2.4.2 Redux 17 2.5 Firebase 19 2.5.1 Giới thiệu tổng quan 19 2.5.2 Ưu điểm Firebase 20 2.5.3 Nhược điểm Firebase 21 Chương PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 22 3.1 Phân tích 22 3.1.1 Danh sách yêu cầu hệ thống .22 3.1.2 Đặc tả Use case 23 3.2 Thiết kế 31 3.2.1 Thiết kế lớp 31 3.2.2 Thiết kế giao diện 36 3.2.3 Thiết kế kiến trúc hệ thống 51 Chương XÂY DỰNG ỨNG DỤNG .55 4.1 Thu thập xử lý liệu 55 4.1.1 Thu thập liệu .55 4.1.2 Xử lý liệu 56 4.2 Xây dựng ứng dụng .60 4.2.1 Ứng dụng Android 60 4.2.2 Ứng dụng Website .67 4.3 Triển khai .73 4.3.1 Ứng dụng ARFurnitureStore .73 4.3.2 Website ARFurnitureStore 73 4.3.3 Cơ sở liệu Firebase .73 Chương KẾT LUẬN .74 5.1 Kết đạt 74 5.2 Thuận lợi, khó khăn hướng phát triển 75 5.2.1 Thuận lợi 75 5.2.2 Khó khăn thách thức 75 5.2.3 Hướng phát triển 76 TÀI LIỆU THAM KHẢO 77 DANH MỤC HÌNH ẢNH Hình 1-1 Houzz - Ứng dụng trang trí nội thất Hình 1-2 Ứng dụng RoomPlanner Hình 1-3 Ứng dụng Homestyler Hình 2-1 Ứng dụng cơng nghệ thực tế ảo tăng cường vào giáo dục 13 Hình 2-2 Ứng dụng ARCore vào sản phẩm 14 Hình 2-3 ARCore đo đạc, phát mặt phẳng giới thực 15 Hình 2-4 Logo Unity 15 Hình 2-5 Logo ReactJS .16 Hình 2-6 Sự khác không sử dụng sử dụng Redux .18 Hình 2-7 Logo Firebase 19 Hình 2-8 Các nhóm sản phẩm Firebase 20 Hình 3-1 Sơ đồ Use case 23 Hình 3-2 Sơ đồ thiết kế lớp .31 Hình 3-3 Sơ đồ hình ứng dụng android .36 Hình 3-4 Sơ đồ hình ứng dụng website .37 Hình 3-5 Màn hình đăng nhập, đăng ký 38 Hình 3-6 Màn hình qt khơng gian 39 Hình 3-7 Màn hình bố trí nội thất .40 Hình 3-8 Màn hình danh mục sản phẩm 41 Hình 3-9 Màn hình chi tiết sản phẩm 42 Hình 3-10 Màn hình giỏ hàng 44 Hình 3-11 Màn hình danh sách sản phẩm u thích 45 Hình 3-12 Màn hình theo dõi đơn hàng 46 Hình 3-13 Màn hình quản lý danh sách danh mục 47 Hình 3-14 Màn hình thêm danh mục 48 Hình 3-15 Màn hình quản lý sản phẩm .49 Hình 3-16 Màn hình thêm sản phẩm 50 Hình 3-17 Kiến trúc tổng 51 Hình 3-18 Kiến trúc ReactJS client 52 Hình 3-19 Kiến trúc ReactJS client 53 Hình 3-20 Kiến trúc tầng Firebase 54 Hình 4-1 Định dạng phổ biến mơ hình 3D 55 Hình 4-2 Các mơ hình 3D kèm theo file apk .56 Hình 4-3 Phương pháp sử dụng Addressable để cung cấp mơ hình 3D 57 Hình 4-4 Tích hợp model-viewer vào ứng dụng website xem sản phẩm 59 Hình 4-5 Các khóa học AR Udemy 60 Hình 4-6 Cấu hình cho phiên làm việc AR Core 61 Hình 4-7 Ứng dụng đặt mơ hình đơn giản 62 Hình 4-8 Thiết kế hình ứng dụng AR Furniture Store Figma 63 Hình 4-9 Màn hình trang trí nội thất 65 Hình 4-10 Xử lý va chạm 65 Hình 4-11 Mơ trang trí nội thất 66 Hình 4-12 Xử lý đổ bóng chân thực 67 Hình 4-13 Màn hình đăng nhập 68 Hình 4-14 Màn hình danh mục sản phẩm 69 Hình 4-15 Màn hình chi tiết sản phẩm 70 Hình 4-16 Màn hình giỏ hàng 71 Hình 4-17 Màn hình đặt mua hàng 72 Hình 4-18 Màn hình quản lý .72 DANH MỤC BẢNG Bảng 1-1 Bảng so sánh chức ứng dụng trang trí nội thất Bảng 3-1 Danh sách yêu cầu hệ thống .22 Bảng 3-2 Danh sách Use case 23 Bảng 3-3 Đặc tả chức đăng nhập 24 Bảng 3-4 Đặc tả chức khởi tạo không gian 25 Bảng 3-5 Đặc tả chức bố trí nội thất 26 Bảng 3-6 Đặc tả chức xóa sản phẩm không gian 27 Bảng 3-7 Đặc tả chức xem danh mục, thông tin sản phẩm 28 Bảng 3-8 Đặc tả chức đặt mua sản phẩm 29 Bảng 3-9 Đặc tả chức quản lý danh mục sản phẩm 29 Bảng 3-10 Danh sách lớp 31 Bảng 3-11 Danh sách thuộc tính lớp USER 32 Bảng 3-12 Danh sách thuộc tính lớp PRODUCT .32 Bảng 3-13 Danh sách thuộc tính lớp CATEGORY 33 Bảng 3-14 Danh sách thuộc tính lớp CART .33 Bảng 3-15 Danh sách thuộc tính lớp BRANCH .34 Bảng 3-16 Danh sách thuộc tính lớp TRANSFER 34 Bảng 3-17 Danh sách thuộc tính lớp ORDER 34 Bảng 3-18 Danh sách thuộc tính lớp RATING 35 Bảng 3-19 Danh sách hình 37 Bảng 3-20 Bảng thành phần giao diện hình đăng nhập 39 Bảng 3-21 Bảng thành phần giao diện quét không gian 40 Bảng 3-22 Bảng thành phần giao diện bố trí nội thất .41 Bảng 3-23 Bảng thành phần hình danh mục sản phẩm .42 Bảng 3-24 Bảng thành phần hình chi tiết sản phẩm 43 Bảng 3-25 Bảng thành phần hình giỏ hàng .44 Bảng 3-26 Bảng thành phần hình sản phẩm u thích 45 Bảng 3-27 Bảng thành phần hình theo dõi đơn hàng 46 Các hoạt động, bố cục animation UI, hầu hết cần phải viết thêm mã nguồn Trước thực UI Unity, để tránh việc thay đổi nhiều triển khai, sử dụng Figma để thiết kế toàn hình cho ứng dụng: Hình 4-8 Thiết kế hình ứng dụng AR Furniture Store Figma Và số hình mà nhóm thực q trình thiết kế hồn thiện phiên cuối ứng dụng: Trong trình này, đồng thời thêm cập nhật thư viện Firebase như: Firestore, Auth, để đồng hóa liệu có sở liệu Hiện thực số vấn đề nghiệp vụ bản: đăng ký, đăng nhập, xem sản phẩm, đánh giá, thêm vào giỏ hàng, 63 4.2.1.3 Xử lý tốn mơ hình 3D Như đề cập phần 4.1 Thu thập xử lý liệu, để cập nhật mơ hình ứng dụng khơng đơn giản, thơng thường cần phải: sử dụng Unity để thêm model vào kho tài nguyên, biến model thành gameObject, thêm components tương ứng, đóng gói vào file apk gửi lên server để thiết bị đồng mà không cần cập nhật file apk, AR Furniture Store giải vấn đề bị phụ thuộc vào Unity Engine, ứng dụng cập nhật model thiết bị mà không cần tất bước kể Phương pháp giải đề cập phần 4.1.2 Xử lý liệu Như bên nhà cung cấp nội thất không cần cung cấp mơ hình 3D thơng qua Unity Engine để tạo sản phẩm họ, khách hàng mua nội thất không cần cập nhập file apk để cập nhật lại mơ hình 3D, cần khởi động lại app, mơ hình 3D tự động cập nhật 4.2.1.4 Một số ưu điểm ứng dụng, tăng trải nghiệm người dùng Một số tính tăng trải nghiệm người dùng: - Khi người dùng chọn sản phẩm để đặt khơng gian, hình hiển thị giá tất sản phẩm, đồng thời người dùng chọn sản phẩm, hình hiển thị giá sản phẩm đó: 64 Hình 4-9 Màn hình trang trí nội thất - Xử lý va chạm: sản phẩm va chạm với vòng tròn màu đỏ, khơng vịng trịn màu xanh cho phép người dùng đặt vị trí chọn Hình 4-10 Xử lý va chạm 65 - Đồng thời, sản phẩm đặt lên nhau, đặt chậu lên bàn chẳng hạn Hình 4-11 Mơ trang trí nội thất - Mơ ánh sáng: mơ hình đặt khơng gian mô phản ứng với ánh sáng mơi trường khơng gian thực - Bóng: mơ bóng mơ hình mặt đất, mơ bóng mơ hình mơ hình khác 66 Hình 4-12 Xử lý đổ bóng chân thực 4.2.2 Ứng dụng Website Những chức website cho phép khách hàng xem sản phẩm, đánh giá, đặt mua hàng, chức quản lý cho người quản lý Ứng dụng website cho phép người dùng xem vật thể 3D không gian thực tế, không hỗ trợ chức bố trí xếp nhiều nội thất 4.2.2.1 Hiện thực hình đăng nhập Màn hình đăng nhập cho phép người dùng truy cập vào sở liệu thơng qua tài khoản Từ thơng tin này, người dùng tương tác với hệ thống 67 Hình 4-13 Màn hình đăng nhập Hiện hệ thống cung cấp phương thức đăng nhập: - Đăng nhập tài khoản email, mật - Đăng nhập liên kết tài khoản Google 4.2.2.2 Hiện thực hình danh mục sản phẩm Màn hình danh mục sản phẩm hiển thị sản phẩm danh mục thơng tin danh mục Giúp cho người dùng lựa chọn sản phẩm theo danh mục 68 Hình 4-14 Màn hình danh mục sản phẩm Thông tin sản phẩm danh mục hiển thị bao gồm hình ảnh, tên, mơ tả ngắn giá sản phẩm 4.2.2.3 Hiện thực hình chi tiết sản phẩm Màn hình chi tiết sản phẩm thể thơng tin chi tiết sản phẩm như: Hình ảnh sản phẩm, tên sản phẩm, mô tả ngắn, giá sản phẩm, mô tả chi tiết sản phẩm, lượt đánh giá, thông tin 3D sản phẩm,… Tại hình chi tiết, người dùng thêm sản phẩm vào giỏ hàng, xem thông tin chi tiết sản phẩm lượt đánh giá sản phẩm, 69 Hình 4-15 Màn hình chi tiết sản phẩm 4.2.2.4 Hiện thực hình giỏ hàng Màn hình giỏ hàng cung cấp thông tin giỏ hàng người dùng Tại người dùng tăng, giảm số lượng sản phẩm xóa giỏ hàng Từ hình giỏ hàng, người dùng chuyển sang hình tốn đặt hàng người dùng định mua hàng 70 Hình 4-16 Màn hình giỏ hàng 4.2.2.5 Hiện thực hình đặt mua hàng Tại hình đặt mua hàng, người dùng phải thực bước để hoàn tất đặt hàng: - Bước 1: Xem lại xác nhận danh sách sản phẩm giỏ hàng - Bước 2: Nhập thông tin nhận hàng kiểm tra thông tin vận chuyển - Bước 3: Xác nhận đặt hàng 71 Hình 4-17 Màn hình đặt mua hàng 4.2.2.6 Hiện thực hình quản lý Màn hình quản lý nơi dành cho quản trị trang web quản lý sở liệu như: Danh mục sản phẩm, sản phẩm, đơn đặt hàng, người dùng chi nhánh, Tại đây, quản trị viên cập nhật, thêm, xóa, sửa liệu hệ thống Hình 4-18 Màn hình quản lý 72 4.3 Triển khai 4.3.1 Ứng dụng ARFurnitureStore Ứng dụng triển khai sử dụng yêu cầu cấu hình điện thoại: 4.3.2 - Hỗ trợ Google Play Services cho AR - Ram: 3GB - Phiên Android: 8.0 trở lên - Bộ nhớ: Tối thiểu 100MB Website ARFurnitureStore Cấu hình Hosting: 4.3.3 - Bộ nhớ: 10GB - Băng thông: 1GB/ngày - I/O: 10GB/tháng Cơ sở liệu Firebase Cơ sở liệu triển khai hệ thống sở liệu Firebase với cấu hình chi tiết: - Giới hạn đọc: 50K/ngày - Giới hạn ghi: 20K/ngày 73 Chương KẾT LUẬN 5.1 Kết đạt Tìm hiểu ứng dụng kiến thức liên quan đến công nghệ thực tế ảo để xây dựng hệ thống phần mềm kinh doanh Hiểu rõ lý thuyết để vận dụng xây dựng hệ thống kinh doanh tảng android website Vận dụng kiến thức tìm hiểu sử dụng thành thạo cơng cụ thư viện Unity, ReactJS, ARCore Firebase,… Hiểu vận dụng quy trình phát triển hệ thống phần mềm từ bước ban đầu Qua quản lý phân chia cơng việc rõ ràng, tiết kiệm thời gian đảm bảo ứng dụng phát triển theo mục tiêu đề Nâng cao kỹ phát triển phần mềm, ứng dụng di động, sử dụng ngôn ngữ C# Unity thư viện ARCore để mang lại hiệu ứng chân thực ánh sáng môi trường thực tế ảo Giúp cho người dùng nhìn tổng quan mơi trường xung quanh Tìm hiểu vận dụng chức nghiệp vụ thương mại điện tử Từ kết hợp với công nghệ thực ảo để phát triển hệ thống kinh doanh đồ dùng nội thất Hiện thực chức đề giải vấn đề liên quan giúp cho người dùng có trải nghiệm công nghệ thực tế ảo Nhờ cơng nghệ thực tế ảo, người dùng tương tác với không gian thực thông qua thiết bị cơng nghệ, để từ mang đến nhìn tổng quan không gian xung quanh trang trí đồ dùng nội thất Bên cạnh đó, hệ thống giải vấn đề cho doanh nghiệp kinh doanh đồ dùng nội thất Giúp giảm chi phí kinh doanh như: chi phí mặt bằng, chi phí nhân công, khả tiếp cận với khách hàng tăng cao 74 Tìm hiểu Firebase để lưu trữ quản trị sở liệu Sử dụng triệt để Firebase để thay thể cho hệ sở liệu có sẵn Hệ thống sử dụng sở liệu FirebaseStore triển khai qua FirebaseHosting Firebase Qua đồng giúp giảm chi phí cho doanh nghiệp 5.2 Thuận lợi, khó khăn hướng phát triển 5.2.1 Thuận lợi Những thuận lợi trình thực hiện: - Nhờ có kiến thức tìm hiểu từ môn học trước nên việc tiếp cận đồ án nhanh chóng dễ dàng - ARCore đáp ứng đủ tính cần thiết để hồn thành mục tiêu yêu cầu đề 5.2.2 Các thành viên nhóm có khả tự học tìm hiểu nhanh Khó khăn thách thức Bên cạnh thuận lợi nhóm gặp nhiều khó khăn thách thức như: - Do tình hình dịch Covid-19 diễn trình thực ứng dụng nên đa phần nhóm làm việc từ xa Do phát sinh nhiều vấn đề tư tưởng q trình thực - Khó khăn thiết bị, để có trải nghiệm tốt mơi trường thực tế ảo cần phải có thiết bị phù hợp hỗ trợ công nghệ - Không đủ kinh phí mua thiết bị hỗ trợ tính ARCore - Khó khăn tài nguyên, mơ hình 3D đồ dùng nội thất chưa đồng phong phú - Việc xây dựng tối ưu mơ hình 3D khơng phải chun mơn nhóm nên cơng việc thường tốn nhiều thời gian 75 - Bản thân thư viện ARCore nhiều vấn đề (bugs), gây khó khăn cho việc thử nghiệm 5.2.3 Hướng phát triển Mặc dù hệ thống có chức thương mại điện tử, nhiên chức mức độ Trong tương lai nhóm tiếp tục phát triển chức mang lại trải nghiệm tốt cho người dùng mang lại nhiều lợi ích cho doanh nghiệp Nâng cấp cập nhật thêm tính trang trí nội thất, cho phép người dùng lưu thơng tin, chụp ảnh 360 khơng gian mình,… 76 TÀI LIỆU THAM KHẢO [1] S Blackman, Unity for Absolute Beginners, Apress, 2014S [2] P Mealy, Virtual & Augmented Reality for Dummies, For Dummies, 2018 [3] T J M Claudia tom Dieck, Augmented Reality and Virtual Reality: The Power of AR and VR for Business, Springer International Publishing, 2019 [4] J Linowes, Unity Virtual Reality Projects, Packt Publishing, 2015 [5] Adam Freeman, Pro React 16, 2019 [6] ARCore SDK for Unity Documents [7] Augmented reality design guidelines [8] ReactJS Official Documents 77 ... Xây dựng ứng dụng hệ thống kinh doanh đồ dùng nội thất - Xây dụng ứng dụng di động chức thực tế tăng cường, hỗ trợ khách hàng trang trí đồ dùng nội thất vào không gian thực tế khách hàng - Xây dựng. .. trang trí đồ dùng Nhận thấy vấn đề đó, nhóm em đưa ý tưởng thực ứng dụng hệ thống kinh doanh đồ dùng nội thất sử dụng công nghệ thực tế ảo tăng cường Theo đó, ứng dụng ứng dụng trang trí nội thất. .. HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM HUỲNH QUỐC TRUNG - 17520184 LÊ QUỐC PHƯƠNG - 17520134 KHĨA LUẬN TỐT NGHIỆP ỨNG DỤNG CƠNG NGHỆ THỰC TẾ TĂNG CƯỜNG TRONG XÂY DỰNG HỆ THỐNG KINH DOANH