Khóa luận tốt nghiệp Kỹ thuật phần mềm: Ứng dụng công nghệ thực tế ảo trong xây dựng hệ thống kinh doanh đồ nội thất

Do đó, việc áp dụng công nghệ thực tế tăng cường để tái tạo lại môi trường, giúp khách hàng có cái nhìn trực quan về sản phẩm cũng như giải quyết được các vấn đề của cửa hàng nội thất..

ĐẠI HỌC QUOC GIA TP HO CHÍ MINH

TRUONG DAI HOC CONG NGHE THONG TIN

KHOA CONG NGHE PHAN MEM

HUYNH QUOC TRUNG

LE QUOC PHUONG

KHOA LUAN TOT NGHIEP

THÁT

APPLYING VIRTUAL REALITY TECHNOLOGY IN BUILDING

A FURNITURE BUSINESS SYSTEM

KY SU NGANH KY THUAT PHAN MEM

TP HO CHÍ MINH, 2021

ĐẠI HỌC QUOC GIA TP HO CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHAN MEM

HUYNH QUOC TRUNG - 17520184

LE QUOC PHUONG - 17520134

KHOA LUAN TOT NGHIEP

UNG DUNG CONG NGHE THUC TE TANG CUONG

TRONG XAY DUNG HE THONG KINH DOANH DO NOI

THAT

APPLYING VIRTUAL REALITY TECHNOLOGY IN BUILDING

A FURNITURE BUSINESS SYSTEM

KY SU NGANH KY THUAT PHAN MEM

GIANG VIEN HUONG DAN

ThS HUYNH HO THI MONG TRINH

TP HO CHÍ MINH, 2021

THÔNG TIN HỘI ĐÒNG CHÁM KHÓA LUẬN TÓT NGHIỆP

Hội đồng cham khóa luận tốt nghiệp, thành lập theo Quyết định số

TigầY của Hiệu trưởng Trường Đại học Công nghệ Thông tin.

HH — Chủ tịch.

Qe cece cece cess sete — Thu ký.

3 ellie, sce — Uy vién

4 // 6 đề <‹6@ềẻ Ö \ — Ủy viên

LỜI CÁM ƠN

Đề có thé hoàn thành khóa luận một cách hoàn chỉnh, nhóm em đã

nhận được rất nhiều sự hướng dẫn nhiệt tình của quý Thầy Cô Vì vậy,

nhóm xin phép được gửi những lời cảm ơn chân thành nhất

Đầu tiên, nhóm em xin chân thành cảm ơn và bày tỏ lòng biết ơn sâusắc nhất đến ThS Huỳnh Hồ Thị Mộng Trinh, cô đã tận tình chi bảo,

hướng dẫn, truyền đạt những kinh nghiệm, kiến thức chuyên môn và các

tài liệu liên quan dé nhóm có thé hoàn thanh khóa luận tốt nhất Nhóm xin

gởi đến cô những lời tri ân nhất đối với những điều mà cô đã dành cho

nhóm.

Nhóm cũng xin chân thành cảm ơn toàn thé quý thầy cô trong khoaCông Nghệ Phần Mềm và toàn thé quý thầy cô của Trường Đại Hoc

Công Nghệ Thông Tin TP.HCM Quý thầy cô đã luôn tận tình truyền đạt

những kiến thức, kinh nghiệm quý báu cũng như tạo mọi điều kiện thuận

lợi nhất cho nhóm trong suốt quá trình học tập tại trường và đặc biệt hơn

là trong suốt quá trình thực hiện khóa luận này

Sau cùng, nhóm xin kính chúc toàn thể quý thầy cô trong khoaCông Nghệ Phần Mềm, ThS Huỳnh Hồ Thị Mộng Trinh luôn dồi dao

sức khỏe, sự nhiệt huyết và thành công trong cuộc sông cũng như trong

sứ mệnh truyền đạt kiến thức cho các thế hệ trẻ mai sau.

TP Hô Chi Minh, ngày 30 tháng 06 năm 2021

Sinh viên 1 Sinh viên 2

Huỳnh Quốc Trung Lê Quốc Phương

MỤC LỤC

TOM TAT KHOA LUAN 01157 1N90 2Chương 1 TÔNG QUAN -52- 52 E2SEEEEEEEE121121121121 1111111111 c0 4

2.1 Công nghệ thực tế ảo tăng cường - Augmented Reality 12

2.1.1 Phan cứng -.-2-Sc< tk SE 21212111111 122.1.2 Ứng dụng của thực tế ảo tăng cường ¿ -¿©c«+ccc+cxescxee 12

2.2 AlRCOI HH HT HH 13

"6a 15 2.4 ReactJS va Re€duxX - - 5 HH TH TH HH Hư 16

“5a Ồ - 16 2.4.2 0 17

2.5.1 _ Giới thiệu tông quan 2¿-5+©2+2E++Ex+erxrsrxrrreerxesrxee 192.5.2 Ur điểm của Firebase c.ccccccccscscessssssesssssscsesecsecesesessecseensassesteeeeeaves 202.5.3 Nhược điểm của Firebase -s- set EESESEEEEEESEEEEEkekrrrrkrkerrrx 21Chương 3 | PHAN TÍCH THIET KE UNG DỤNG ¿2-5 sec s2 22

4.1 Thu thập và xử lý dữ liệu 2: + ©5¿22++ExtEEtEEESEEEEEerkerkrrrxerkerrrres 55

4.1.1 Thu thập dữ liệu -2+2E+EE+EEE+EEEEEEEErErrrrkerkerreee 55

4.1.2 Xử lý dữ liệu - cc.2cccrerkrrkrrrrerrerrerrves 56

4.2 Xây dựng Ứng dỤng - -c 1v vn 1H ng ng TH ng rvrt 60

4.2.1 Ứng dụng Android -¿-++2c++2x++cx+rxrrrrerkesrxrrrxes 60

4.2.2 Ung dung Website -cc 2s tt E211 1121 exeyee 67

4.3 Triển Khai eccccccssscssesssssessessecssssssssecsecsussusssecsessussusssessessusasseseesessuseuseseeseess 73

4.3.1 Ung dụng ARFurnitureStore c.ccccccscescsssessessessesssessessesseessesseeseesees 73

4.3.2 Website ARFurnitureSfOT€ - - cc 1111112 ng ven, 73

4.3.3 Cơ sở dit liệu FIrebase c5 11111132211 111 1118851111111 xe 73

Chương 5 KET LUẬN 2- 22 222EESEEE2EEEEEEEEEEEEEEEEkrrkerkrrex 74

5.1 Kết quả đạt đưỢC - 5c St T11 2112121 1121111211211211 21.11111111 74

5.2 Thuận lợi, khó khăn và hướng phát triỂn . - ¿+52 75

2" ôn 75

5.2.2 "tSl0i 00 00a 75

5.2.3 _ Hướng phát triển - ¿2© E211 EEEEEEEEkrrkrree 76

TÀI LIEU THAM KHẢO - - St EkSESEEEEEEEEEEEEESEEEEEESEEEEEESEEEEEETkrkrrrrkrkee 77

DANH MỤC HÌNH ẢNH

Hình 1-1 Houzz - Ứng dụng trang trí nội thất 2-2-2 s+x++£++£xerxe+Ezrsersees 5

Hình 1-2 Ứng dụng RoomPlannIer - + 2£ 5£ +22E++2E++EE++Ex+2Exezx+erxezrxezrxee 6 Hình 1-3 Ung dụng Homesty]er - 2-22 + ©2++2+£+EE+2EE+EEE+EEESEE++Exerxrerxeerxrrrxee 7

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 - 2-2 5222 £+£x+2£xzrxrrxeeree 14 Hình 2-3 ARCore đo đạc, phát hiện mặt phăng trong thé giới thực .- 15

Hinh 2-4 Logo Unity 21177 44äA1 15

Hinh 2-5 Logo ReactsS occ 16

Hình 2-6 Sự khác nhau giữa không sử dung và sử dung Redux - 18 Hình 2-7 Logo của FIrebasS€ -c + 11H HH HH nh 19

Hình 2-8 Các nhóm sản phẩm của Firebase 2-2 52+ £££x++£x+zxzxersz 20 Hình 3-1 Sơ đồ Use Case - 2-52 StSE22EE2EEEEEEEE225121117121121121171211 1111 cre 23 Hình 3-2 Sơ đồ thiết kế lỚp -. - 2-52 2+SE2SE+E2E£EEEEEEEEEEE2EE2E12112121 2121212 xe 31 Hình 3-3 Sơ đồ các màn hình trên ứng dụng android 2 2 2 s2 zs+zs2 s2 36 Hình 3-4 Sơ đồ màn hình ứng dụng website 2 ¿©+¿+++x++zx++zxzxeerse 37

Hình 3-5 Màn hình đăng nhập, đăng ký - + + vs eksekeeerrerserske 38

Hình 3-6 Màn hình quét không ø1a1 - <3 E33 E 33+ EEEESEereseeereeeereere 39 Hình 3-7 Màn hình bố trí nội thất - -2¿¿222++cttEEkkrrrtrkirrrtriirrriid 40

Hình 3-8 Màn hình danh mục sản phẩm ¿2 2 +2 + ££+E£+E£E+zEerxerxrrsxez 41

Hình 3-9 Màn hình chi tiết sản phẩm - 52 2SE£SE£2E22EE+EEvEECEEErrrerxerrcrke 42

Hình 3-10 Màn hình g1ỏ hàng - 5 2 + 3kg HH rưệt 44

Hình 3-11 Màn hình danh sách sản phâm yêu thích - 2 ¿5+2 s2 45

Hình 3-12 Màn hình theo dõi đơn hàng - 5: 5 5c 322 * 32+ E+veEseerreereerseerres 46

Hình 3-13 Màn hình quản lý danh sách danh mục .- -««++-<++se++sss+ 47 Hình 3-14 Màn hình thêm mới danh mục - - - - - <5 5522 + +22 **‡££++++>##eeeceezz+ 48

Hình 3-15 Màn hình quản lý sản phẩm - 2 2 + S2S£+E£+EE+£EtzE+zEerxerxeres 49 Hình 3-16 Màn hình thêm mới sản pham -2- 22 +¿2++2+++£x+2zxzx+srsz 50

Hình 3-17 Kiến trúc tổng thé -2-©2¿+2£+SE+EE£EE22EE2EEEE121121127171711211 21c, 51

Hình 3-18 Kiến trúc ReactJS clienI 2-5: se Set Set +E+E+E+EvESESEEEEEEEErEerrrerrrerrsee 52Hình 3-19 Kiến trúc ReactJS clienn( - - St k+St+E‡EE+EEEESEEEEEEEEEEEkrkerkerrkererrrre 53Hình 3-20 Kiến trúc tầng Firebase - + 5¿22++2EE22EE22E2EE 22121122122 crkecrkv 54Hình 4-1 Định dạng phô biến nhất của mô hình 3D - 2-2 5¿+s2s++c++ 55

Hình 4-2 Các mô hình 3D đi kèm theo file apk - ¿55+ s+<*s+scs+e+sersss 56

Hình 4-3 Phương pháp sử dung Addressable dé cung cấp mô hình 3D 57Hình 4-4 Tích hợp model-viewer vào ứng dụng website xem sản pham 59

Hình 4-5 Các khóa hoc AR trên Udemyy - 5 55 2 1E vn trên 60 Hình 4-6 Cau hình cho phiên làm việc của AR COre 2 2555 s+zs+£szse2 61

Hình 4-7 Ứng dụng đặt các mô hình đơn giản -2- 22 +¿©+2+++zx+zx+zx+zrxz 62

Hình 4-8 Thiết kế màn hình ứng dụng AR Furniture Store trên Figma 63

Hình 4-9 Màn hình trang trí nội thất - ¿- 2 + 2£ E+EE+EE+EE+EE+E£E£EerEerkerxrrsxee 65

Hình 4-18 Man hình quản lý - - <6 5 11211191191 HH ng 72

DANH MỤC BANG

Bang 1-1 Bang so sánh chức năng giữa các ứng dụng trang trí nội thất 9

Bang 3-1 Danh sách yêu cầu của hệ thống - 2-2-2222 E+£E+tEzEzrxerxerex 22

Bảng 3-2 Danh sách USe Case - G11 1911131119111 91111911 1v HH ng kg 23 Bang 3-3 Đặc tả chức nang đăng nhập - - - 5 5 1H ng rưệt 24 Bảng 3-4 Dac tả chức năng khởi tạo không ø1an 5 5< s + s+ssexseeseeers 25

Bảng 3-5 Đặc tả chức năng bố trí nội thất -: + 5¿22++2++2x+zzxezrxerxesres 26

Bang 3-6 Đặc tả chức năng xóa sản phẩm trong không gian - 5 5+ 27 Bảng 3-7 Đặc tả chức năng xem danh mục, thông tin sản phâm 28

Bang 3-8 Đặc tả chức năng đặt mua sản phẩm - 2-2 2 2+ +xe£x+£xezxzrszse2 29Bảng 3-9 Đặc tả chức năng quản lý danh mục sản phẩm .: -: 5+ 29Bảng 3-10 Danh sách ÏỚp s5 1 E1 E1 TT TH TH ng 3l

Bang 3-11 Danh sách thuộc tính lớp USER «+ «6+ sveeeeeesereersersee 32

Bang 3-12 Danh sách thuộc tính lớp PRODUCT” 5 «<< £+£+sc+se+se+sxs 32 Bảng 3-13 Danh sách thuộc tính lớp CATEGORY - ¿5 + £+c+se+sssessee 33

Bang 3-14 Danh sách thuộc tính lớp CA ÏTẺ - 55 *S< + EsseeEseeeeserseeers 33 Bang 3-15 Danh sách thuộc tính lớp BRANCH - 5 5+ S<£+sc+se+ssserske 34

Bảng 3-16 Danh sách thuộc tính lớp TRANSFER - Sàn 34 Bang 3-17 Danh sách thuộc tính lớp ORDETR - 5 55555 *++*k+seeeeseesesers 34 Bang 3-18 Danh sách thuộc tính lớp RA TING - - cccxsssessessssrske 35 Bảng 3-19 Danh sách màn Binh - - - <6 + E21 1311189113911 11 911 811 re 37Bang 3-20 Bảng thành phan giao diện màn hình đăng nhập - 39Bang 3-21 Bảng thành phần giao diện quét không gian 5-5 5552522 40Bang 3-22 Bảng thành phan giao diện bố trí nội thất -¿- ¿s52 41

Bang 3-23 Bảng thành phan màn hình danh mục sản phâm . : 42

Bang 3-24 Bảng thành phần màn hình chi tiết sản phẩm 2- 5552552 43

Bảng 3-25 Bảng thành phần màn hình giỏ hàng - 2-2 2 2+ £x+£x+z+z£+s+2 44

Bang 3-26 Bảng thành phần màn hình sản phẩm yêu thích - 5-52 s2 45Bang 3-27 Bảng thành phần màn hình theo dõi đơn hàng 5- 5552 52 46

Bảng 3-28 Bảng thành phan màn hình quản lý danh sách danh mục 47Bảng 3-29 Bảng thành phan màn hình thêm mới danh mục - 2-5 49Bảng 3-30 Bảng thành phan màn hình quản lý sản phâm 2: 252 50Bảng 3-31 Bảng thành phần màn hình thêm mới sản phâm - 51

Bang 3-32 Bang mô tả kiến trúc ReactJS client 5- 2 252+secxezxezxerxerszsez 52

Bang 3-33 Bảng mô tả kiến trúc Unify - ¿5° +Sx+EE+EE+E£+E£E£Eerkerkerxersrree 53Bảng 3-34 Bảng mô tả kiến trúc tầng Firebase -2¿- 5: ©5++cxz+cxcezxrrxesree 54

DANH MỤC TỪ VIET TAT

Từ viết tắt Tiếng Việt Tiếng Anh

TÓM TAT KHÓA LUẬN

Với sự phát triển không ngừng trong thời đại 4.0, nhu cầu về công

nghệ của con người ngày càng được nâng cao hơn Xu hướng công nghệ hiện

nay là tạo ra các môi trường ảo dé tăng cường tính trải nghiệm trực quan trong

thế giới thực Công nghệ này đang được sử dụng rộng rãi trong nhiều lĩnh vực

như giải trí, thương mại, giáo dục, Với điểm mạnh là tăng cường tính trảinghiệm thực tế người dùng, công nghệ thực tế tăng cường này có thể áp dụngvào lĩnh vực trang trí nội thất Ở các cửa hàng nội thất, việc trang trí nội thất

có sẵn sẽ tốn nhiều diện tích, không gian Bên cạnh đó, khách hàng không có

được cái nhìn cụ thể về sản phẩm sẽ được trang trí như thế nào trong khônggian của mình Do đó, việc áp dụng công nghệ thực tế tăng cường để tái tạo lại

môi trường, giúp khách hàng có cái nhìn trực quan về sản phẩm cũng như giải

quyết được các vấn đề của cửa hàng nội thất

Sau khi hoàn thành đề tài khóa luận, em thu được kết quả:

- _ Kiến thức về triển khai phan mềm

- Kién thức về công nghệ thực tế tăng cường

- _ Kiến thức về ứng dụng thương mại điện tử

MỞ DAU

Ngày nay, công nghệ dang phát triển bùng nổ, chúng ta ngày càng thích

ứng với những công nghệ mới, những kỹ thuật mới Đặc biệt các lĩnh vực liên quan tới môi trường ảo đang được các doanh nghiệp trong nước và nước ngoài

quan tâm phát triển Với điểm mạnh giúp tăng tính trải nghiệm thực tế cho

người dùng, công nghệ thực tế tăng cường đã mang lại nhiều ý tưởng cho cácdoanh nghiệp liên quan đến lĩnh vực thiết kế nói chung và các cửa hàng nội thấtnói riêng Đối với các doanh nghiệp nội thất, việc trưng bày các sản phẩm của

họ tốn rất nhiều chi phí về mặt bằng cũng như nhân lực Ngoài ra, khách hàngcũng không thé có cái nhìn trực quan về sản phẩm trong không gian của họ nên

sé có trường hợp mua sản phâm nhưng lại không ưng ý về sau.

Với công nghệ thực tế tăng cường, khách hàng cũng như doanh nghiệp cóthể giải quyết được các van đề của cả hai bên Những đồ nội thất sẽ được môphỏng bang môi trường ảo trong thé giới thực một cách chi tiết và chân that, qua

đó giúp cho khách hàng có cái nhìn trực quan về sản phâm họ sắp mua, cũng

như doanh nghiệp giảm chi phí trưng bày sản pham và nhân lực

Công nghệ thực tế tăng cường là công nghệ mới, chưa phô biến tại nước

ta và chưa được làm quen tìm hiểu Vì thế việc tạo ra một hệ thống thực tế tăngcường cũng đặt ra nhiều thách thức và khó khăn Người dùng muốn sử dụngđược hệ thong can phải sử dung các thiết bị hỗ trợ thực tế tăng cường Trên thịtrường hiện nay, các thiết bị công nghệ hỗ trợ thực tế tăng cường ngày càngnhiêu, mở ra những tiêm năng mới cho công nghệ này.

Nội dung thực hiện:

- Xây dựng ứng dụng hệ thống kinh doanh đồ dùng nội that

- _ Xây dụng ứng dụng di động các chức năng thực tế tăng cường, hỗ trợ khách

hàng trang trí các đồ dùng nội thất vào trong không gian thực tế của kháchhàng

- _ Xây dựng các chức năng cơ bản của thương mại điện tử

- _ Xây dựng website quản lý cửa hàng cho doanh nghiệp nội thất

Bồ cục báo cáo gồm có 5 chương chính:

- _ Chương 1: Tổng quan

- _ Chương 2: Tổng quang về công nghệ

- _ Chương 3: Phân tích thiết kế ứng dụng

- _ Chương 4: Xây dựng ứng dụng

- Chương 5: Tổng kết

Chương 1 TONG QUAN

1.1 Đặt van đề

Hiện nay, nhu cầu trang trí nội thất ngày càng tăng cao, nhưng thực tế kháchhàng hầu như không có cái nhìn trực quan về tính hợp lý khi trang trí các sản phâmvào trong không gian của mình Do đó, khách hàng có thể có những sự lựa chọn sai

và tốn thời gian dé trang trí đồ dùng Nhận thấy được van dé đó, nhóm em đã đưa ra

ý tưởng thực hiện ứng dụng hệ thống kinh doanh đồ dùng nội thất sử dụng côngnghệ thực tế ảo tăng cường Theo đó, ứng dụng sẽ là một ứng dụng trang trí nội thất

vào trong không gian của người dùng.

Ứng dụng sẽ được áp dụng công nghệ thực tế ảo tăng cường dé tăng tính trảinghiệm cho người dùng, nhằm mô phỏng lại toàn bộ không gian thực tế của người

dùng sau khi trang trí đồ dùng nội thất Những đồ nội thất, không gian và ánh sáng

cũng sẽ được tối ưu dé mang lại cho người dùng cái nhìn tốt nhất về sản phan nộithất Từ đó, người dùng sẽ nhận thấy được tính hợp lý của các đồ dùng nội thất và

sẽ giảm tránh việc lựa chon sai sản phâm, tôn thời gian mua hàng.

Sau khi trang trí cho không gian, nêu người dùng thích thú với các đồ dùngnội thất, người dùng có thể đặt mua hoặc liên hệ với cửa hàng nội thất qua các chứcnăng thương mại điện tử Đây được xem là cầu nối giữa người mua hàng, cửa hangkinh doanh đồ nội thất Bên cạnh đó, đối với các cửa hàng bán đồ nội thất, sảnphẩm sẽ giúp giảm bớt chi phí về nhân lực quản lý, không gian mặt bằng,

1.2 Các ứng dụng tương tự

Hiện nay, trên thị trường trong nước và ngoài nước có nhiều ứng dụng cung

cấp chức năng trang trí và đặt mua sản phẩm nội thất Giúp tăng tính trải nghiệm

cho người dùng trong việc sắp xếp bồ trí đồ dùng cũng như đặt mua dé dang Người

dùng có thé tương tác trực tiếp trên ứng dung dé có thé có cái nhìn tong quan về sản

pham nội thất khi được bồ trí vào không gian của minh Các ứng dụng đều có các

chức năng tương đối đủ dé đem lại cho khách hàng những trải nghiệm tốt nhất Mà

trong đó ta có thể kế đến như: Houzz, IKEA Place, Room Planner, Homestyler

1.2.1 Houzz

Houzz là một trong những ứng dụng phổ biến trong thiết kế nội thất VớiHouzz, người dùng có thê xem các sản phâm nội thất để làm ý tưởng cho khônggian của mình Ngoài ra người dùng còn có thể mua sắm các đồ dùng và thử nóvào không gian thông qua công nghệ thực tế tăng cường Bên cạnh đó người dùng

có thé tìm đọc các thông tin, mẹo trong việc sắp xếp không gian và nhận tư van,nhận xét từ những thiết kế của mình

Người dùng duyệt ảnh theo phòng, phong cách và vị trí, đồng thời đánh dấu

các ảnh trong bộ sưu tập cá nhân mà trang web Người dùng có thể nhấp vào

hình ảnh để tìm hiểu thêm về nhà thiết kế, đặt câu hỏi và tìm hiểu về các sảnphẩm được gắn thẻ trong ảnh

Ngoài các chức năng xem sản phâm trong môi trường thực tê ảo, Houzz còn

có các chức năng cơ bản của thương mại điện tử như đặt mua hàng, đánh giá sản

phẩm, "

1.2.2 Room Planner

Ung dung Room Planner là công cụ thiết kế nha và nội that trực tuyến chophép người thiết kế không gian xung quanh, trang trí đồ nội thất và biểu diễn

công trình trong môi trường 3D.

Room Planner có 2 chức năng chính là biểu diễn thiết kế trong không giandưới góc nhìn 2D và 3D, cho phép người dùng di chuyên trong không gian 3D

Với thiết kế sàn ở góc nhìn 3D thì ảnh được lưu sẽ là ảnh 360 Những tiếntrình thiết kế cũng sẽ được lưu lại Ảnh hướng nhìn 2D sẽ là ảnh được chụp từ

trên xuống Ứng dụng sẽ cho phép người dùng di chuyên trong không gian 3D

Khi có ảnh 360 được chụp, ứng dụng sẽ cho phép người dùng xem ảnh với kiểu

nhìn 360.

Tuy nhiên, hiện tại với tài khoản miễn phí, người dùng chỉ có thé thực hiện

một vài chức năng cơ bản Dé sử dụng toàn bộ chức năng, người dùng phải tốnphi dé được nâng cấp tài khoản

1.2.3 Ung dụng HomeStyler

Ứng dụng Homestyler là ứng dụng giúp cho người dùng thiết kế và trang trí

căn phòng của mình Với Homestyle, người dùng có thể chụp ảnh không gian détạo một phòng ảo Sau đó người dùng có thé bố trí các đồ nội thất vào không gian

đã tạo.

Ngoài ra Homestyler còn hỗ trợ chức năng sử dụng công nghệ thực tế ảotăng cường, giúp cho người dùng có thé xem sản phẩm tông quan nhất có thé

Các chức năng chính của Homestyler như:

- Pat mô hình 3D chất lượng cao của các sản phẩm nội thất thực trong

phòng của bạn

- _ Xóa các vật thé hiện có dé thử các ý tưởng mới

- Treo đẻn chiêu sáng từ trân nhà của ban

- Hình dung các kết hợp sản phẩm khác nhau

- Xem cách mô hình thực tế của thảm, tranh, gương và thực tế hơn trong

không gian của bạn.

1.2.4 Van đề của các phần mềm hiện tại

Công nghệ thực tế ảo tăng cường yêu cầu thiết bị phù hợp, hỗ trợ tính năng

này Do đó có thể phần mềm sẽ không thích ứng trên một số thiết bị không hỗ trợ

tính năng này Tuy nhiên công nghệ này đang phát triển, và hầu hết các thiết bị

mới đã dân dân có hồ trợ tính năng này.

Dé đáp ứng được tính chân thật nhất về các sản phẩm nội thất, yêu cầu phanmềm phải xử lý tốt các phần như ánh sáng, môi trường và không gian Từ nhữnghiệu ứng này sẽ mang lại cho người dùng trải nghiệm thực tế hơn về sản phẩm.Việc cải thiện chất lượng đồ họa trong môi trường thực tế ảo tăng cường sẽ tác

động đến những mô hình nội thất

Sau khi trang trí xong không gian của mình, việc đặt mua các sản phẩm là

nhu cầu tiếp theo của khách hàng Việc hỗ trợ các tính năng về thương mại điện

tử sẽ đáp ứng được nhu cầu của khách hàng cũng như đem lại lợi ích cho doanhnghiệp kinh doanh nội thất

1.2.5 Hướng giải quyết van đề

Xây dựng ứng dụng có chức năng thực tế ảo tăng cường hỗ trợ việc trang trí

không gian của người dùng, nhằm giúp mô phỏng cho người dùng có cái nhìn

trực quan hơn về các đỗ nội thất mà doanh nghiệp đang kinh doanh

Phát triển tính năng thương mại điện tử kết hợp với công nghệ thực tế ảotăng cường nhằm đáp ứng được nhu cầu của khách hàng cũng như doanh nghiệp

Thiết kế môi trường ảo tốt nhất, cải thiện phần mềm nhăm giúp cho ngườidùng có những trải nghiệm về không gian cũng như đồ họa thực tế nhất có thé

Xây dựng phần mềm quản lý dành cho doanh nghiệp, nhằm giúp doanhnghiệp có thê quản lý được thông tin của các cửa hàng cũng như khách hàng

1.2.6 Tóm lược

Sau khi sử dụng các ứng dụng tương tự trên thị trường hiện nay, ta có thể

đưa ra bảng so sánh tông quan các chức năng hiện có của các ứng dụng như sau:

Bang 1-1 Bảng so sánh chức năng giữa các ứng dụng trang trí nội that

Houzz | RoomPlanner | Homestyler | ARFurnitureStore

Xem mô hình

„ w v v v san pham 3D

ảo tăng cường và các chức năng thương mại điện tử Do đó, việc ứng dụng công

nghệ thực tế ảo vào hệ thống kinh doanh nội thất sẽ mang lại cho người dùng trảinghiệm tốt nhất Bên cạnh đó, việc kết hợp này giúp giải quyết được các vấn đề

cho khách hàng cũng như doanh nghiệp.

1.3 Mục tiêu

Từ bảng so sánh các chức năng ở trên nhóm em đưa ra đê xuât xây dựng hệ

thống kinh doanh đồ dùng nội thất với các chức năng như:

- Xem đồ dùng nội thất dưới dang 3D.

- Tích hợp công nghệ thực tế ảo tăng cường vào việc trang trí đồ dùng nội

thất

- _ Đặt mua sản phẩm

- _ Nhận xét đánh giá sản phẩm

- Quan lý sản phâm và cửa hàng

- _ Và các chức năng thương mại điện tử cơ bản khác.

1.4 Pham vi ứng dụng

Sản phẩm phần mềm hệ thống kinh doanh đồ dùng nội that bao gồm 2 ứng

dụng chạy trên 2 môi trường chính là Android và Website.

Đối với ứng dụng Android, sản phâm hướng tới người dùng là những khách

hàng có nhu câu mua và trải nghiệm thực tê việc trang trí đô dùng nội thât.

Đối với ứng dụng website, sản phâm là nơi để khách hàng tham khảo thông tincủa đồ dùng nội thất và cũng là kênh dé cho cửa hàng có thé quảng bá sản phẩm cửahàng đang kinh doanh Bên cạnh đó, sản phẩm còn có những chức năng liên quan

đến quản lý bán hàng dành cho nhân viên cửa hàng

Hệ thống được cung cấp thông tin đồ nội that, trang trí nội thất như bàn, ghế,sofa, giường hay các chậu cây nhỏ, Hệ thống sử dụng bộ cơ sở dữ liệu được cửahàng cung cap Cụ thé là thông tin về những đồ nội thất mà cửa hàng đang kinhdoanh gồm: mô hình ba chiều, kích thước, vật liệu Dữ liệu về mô hình ba chiều sẽđược thêm trực tiếp vào website quản tri, và dữ liệu này sẽ được đồng bộ với trên cả

ứng dụng website và ứng dụng di động.

Các chức năng chính và thao tác của phần mềm đều được thực hiện trong môi

trường thực tế ảo tăng cường Người dùng sẽ có cái nhìn trực quan hơn trong việc

bố trí các đồ dùng nội thất vào không gian mà không cần phải str dụng đồ dùng thật

Các chức năng thương mại cho phép khách hàng dễ dàng đặt mua các sản phẩm trực tiếp trên ứng dụng mà không cần phải trực tiếp vào của hàng Với sự

phát triển mạnh mẽ của ngành thương mại điện tử, sự kết hợp này sẽ mang lại nhiều

10

tiềm năng cũng như sự phát triển cho các doanh nghiệp kinh doanh đồ dùng nội

thất

lãi

Chương 2 TONG QUAN CÔNG NGHỆ

2.1 Công nghệ thực tế ảo tăng cường - Augmented Reality

Thực tế ảo tăng cường (Augment Reality) là góc nhìn trực tiếp hay gián tiếp

về môi trường vật lý, thực tế nơi mà các yếu tố được tăng cường bởi những thôngtin nhận thức do máy tính tao ra trên nhiều phương thức cảm quan bao gồm thị giác,thính giác, xúc giác và khứu giác.

Giá trị chính của thức tế tăng cường là nó đưa ra các thành phần của thế giới

số vào nhận thức của con người về thế giới thật thông qua việc tích hợp cảm giác

nhập vai Các hệ thống AR đầu tiên cung cấp những trải nghiệm nhập vai đầu tiên

được phát minh vào năm 1990.

hỗ trợ được nền tảng AR Sau đó sử dụng các thuật toán và công nghệ khác dikèm để tái lập hình ảnh của vật thể vào không gian thực Ví dụ, khi tạo ra mộtchiếc ghế ảo, thiết bị cần tính toán sao cho đặt chiếc ghế đó vào không gian thật(nhà ở, văn phòng) sao cho chuẩn xác nhất theo kích thước thực tế

2.1.2 Ứng dụng của thực tế ảo tăng cường

Ngày nay, công nghệ thực tế ảo đang được ứng dụng rộng rãi trong nhiềulĩnh vực như: Kinh doanh, dạy học, nghiên cứu, trò chơi giải trí, Chăng hạn

12

như trong lĩnh vực giáo dục, dé nang cao chat lượng đào tạo, hiện nay rất nhiều

nhà phát triển, điển hình trong đó là Microsoft đã ứng dụng công nghệ thực tế ảo

tăng cường vào giảng dạy Công nghệ thực tế ảo sẽ tái hiện chân thật các mô

hình như: Máy móc, chi tiết cơ khí, các bộ phận cấu tạo cơ thê người và rất nhiềuthứ khác vào trong không gian thực tế

Hình 2-1 Ứng dung công nghệ thực tế ảo tăng cường vào giáo dục

2.2 ARCore

ARCore cung cấp SDK cho nhiều môi trường phát triển pho biến nhất CácSDK này cung cấp các API gốc cho tất cả các tính năng AR cần thiết do chính

Google phát triển, bao gồm 3 công nghệ chính hỗ trợ cho nhà phát triển:

- Theo dõi chuyền động: điện thoại của chúng ta có thé biết nó đang ở đâu

trong thế giới thực

- Phat hiện môi trường: khả năng nhận diện các mặt phẳng như mặt bàn, mặt

đất, tuong, trong thế giới thực thông qua camera

- Điều chỉnh ánh sáng: có thé phát hiện được cường độ ánh sáng qua lens

cua camera và điêu chỉnh ánh sáng phù hợp với mau ảo.

13

Theo dõi chuyển động của ARCore dựa trên 2 thông tin: thông tin hình ảnh từ

bị

Hình 2-2 Ứng dung ARCore vào sản phẩm

Môi trường thực tế ảo tăng cường được kết hợp với hình ảnh trong thế giới

thực thu được từ máy ảnh của thiết bị với nội dung ảo, chăng hạn như các đối tượng

3D hoặc thông tin kỹ thuật sé

Khi điện thoại di chuyên khắp môi trường xung quanh, ARCore sẽ theo dõi

vị trí của điện thoại so với thế giới xung quanh Quá trình này được gọi là COM hay

Hình 2-3 ARCore đo đạc, phát hiện mặt phăng trong thế giới thực

Bằng cách căn chỉnh vị trí và hướng của camera ảo hiển thị nội dung 3D đúngvới vi trí và hướng của camera trên thiết bị, ARCore hiển thị nội dung ảo từ gócnhìn chính xác Hình ảnh ảo đó được phủ lên trên hình ảnh camera của thiết bị, làmcho nội dung ảo xuất hiện như một phần của thế giới thực

2.3 Unity

Unity là một game engine chuyên phát trién các trò chơi điện tử trên PC,

console, android, iOS, và là một trong những engine cho phép ứng dụng ARCore mạnh mẽ nhât ở thời điêm hiện tại.

<4 unity

Hình 2-4 Logo Unity

15

Mặc du Unity không được dùng với mục đích chính là làm phần mềm, nhưng

với sự hỗ trợ mạnh mẽ về AR cũng như có kiến thức nền tảng về engine này nhất,Unity là một lựa chọn hợp lý dé thực hiện khóa luận có ứng dung AR

đơn giản với hơn 1,300 developer và hơn 94,000 trang web đang sử dụng

ReactJS.

Sức mạnh của ReactJS xuất phat từ việc tập trung vào các thành phan riêng

lẻ Chính vi vậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phépmột developer có thé phân tách giao diện người dùng phức tạp thành các thànhphần đơn giản hơn

Đặc điêm nôi bật của ReactJS:

- ReactJS tạo ra cho chính nó các phần tử DOM ảo — React tạo ra một bộ nhớ

cache câu trúc dữ liệu trong bộ nhớ, tính toán sự khác biệt kêt quả và sau đó

16

cập nhật DOM được hiển thị của trình duyệt một cách hiệu quả Giúp cảithiện hiệu suất trên sản phẩm

- _ Giúp việc viết các đoạn code Javascript dễ dàng hon: ReactJS sử dụng cú

pháp đặc biệt là JSX cho phép ta có code HTML trong code Javascript

- _ Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dé dàng

sửa lỗi và bảo trì

Nhược điểm:

- ReactJS là thư viện ở tang UI không phải MVC framework, chỉ giúp tạo ra

phần view Do đó muốn tích hợp vào framework MVC phải cấu hình lại vàkết hợp với nhiều công cụ khác

- - Không phù hợp với SEO

- _ Khó tiếp cận cho người mới

2.4.2 Redux

Redux là công cụ quản lý trạng thái cho các ứng dụng Javascript được lấy

cảm hứng từ kiến trúc Flux của Facebook Giúp quản lý các trạng thái một cáchnhất quán va dé dang kiêm thử

Redux thường là được dùng thường xuyên với React Tuy nhiên hoàn toàn

có thê sử dụng với các framework khác như Angular, Angular, Backbone, Falcor,

Deku

17

Không sử dụng Redux Sử dung Redux

2 =/

-O Component thay đỗi

Hình 2-6 Sự khác nhau giữa không sử dụng va sử dung Redux

Redux được xây dựng dựa trên 3 nguyên lý:

- Nguồn dữ liệu duy nhất: State của toàn bộ ứng được chứa trongStore

duy nhất

- Trang thái chỉ được phép đọc: Cách duy nhất dé thay đồi trạng thái của

ứng dung là phát một Action (là một đối tượng mô tả hành động xảy ra)

- Thay đổi chỉ bằng hàm thuần túy: Dé chỉ ra cách mà trạng thái được

biến đồi bởi action chúng ta dùng gọi là Reducer

Quá trình xử lý của Redux trải qua các bước chính sau:

I Tầng view yêu cầu 1 Action Action Creator tạo ra một Action yêu

cầu đã định dạng trước và gửi lại

2 Action được gửi tự động

3 Store nhận Action sau đó gửi vào State hiện tại va Action cho Root

Reducer.

4 Root Reducer chia State ra thành nhiều phan và gửi cho từng

subreducers biết cách xử ly chúng

18

5 Subreducers tạo ra 1 bản copy từ phần nhận được và thay đổi trên

ban copy Sau đó gửi lại ban copy cho Root Reducer

6 Khi tat ca subreducers trả về các phan, Root Reducer ghép chúng lai

tạo thành một State và gửi lai cho Store Store thay thé State cũ bang

State mỚI.

7 Store giao tiếp với tang view layer binding là có State mới

8 Tầng view layer binding báo Store gửi State mới

9 Tang view layer binding kich hoat render view

2.5 Firebase

2.5.1 Gidi thiệu tong quan

Firebase là một nền tảng cơ sở dữ liệu đám mây do Google phát triển dé tạocác ứng dụng website và di động Ban đầu nó là một công ty độc lập được thànhlập vào năm 2011 Vào năm 2014, Google đã mua lại nên tảng này và hiện nó làsản phẩm chủ lực của họ dé phát triển ứng dụng Chức năng chính là giúp cho

người lập trình đơn giản hóa các thao tác với cơ sở đữ liệu.

y Firebase

Hinh 2-7 Logo cua FirebaseFirebase cung cấp cho chúng ta 2 nhóm sản phẩm chính tập trung vào 2 đối

tượng là:

- Phát triển và kiểm thử các ứng dụng được thiết kế

- Phan tích dữ liệu và tôi ưu hóa trải nghiệm đôi với người dùng.

19

Hình 2-8 Các nhóm sản phẩm của FirebaseCác chức năng chính của FirebaseCloud bao gồm:

- Kha năng truy van cơ sở dữ liệu nhanh chóng và mạnh mẽ

- iOS, Android và SDK web có quyền truy cập dữ liệu ngoại tuyến

- _ Đồng bộ hóa đữ liệu thời gian thực

- Sao chép dữ liệu tự động, da vùng với tính nhất quán mạnh mẽ

- SDK máy chu Node, Python, Go và Java

Firebase hướng đến su đơn giản va dé sử dung luôn là ưu tiên hang đầu,

trong khi van đảm bảo rang Cloud Firestore có thé mở rộng quy mô dé cung cấptài nguyên cho cả những ứng dụng lớn nhất

2.5.2 Uu điểm của Firebase

So với các hệ cơ sở dữ liệu khác đang hiện hành, Firebase có những ưu

điêm nôi bật sau:

- Dong bộ hóa dữ liệu giữa các thiết bị trong thời gian thực: SDK

Android, iOS va Javascript của Firebase được đồng bộ hóa dữ liệu với

ứng dụng gần như ngay lập tức Điều này giúp cho chúng ta có thê dễ

20

dàng xây dựng các ứng dung Realtime, tự động đồng bộ hóa đữ liệu

trên các thiết bị và xây dựng các tính năng tương tác thời gian thực

Sử dụng bộ sưu tập và tài liệu để cầu trúc và truy vấn dit liệu: Mô

hình đữ liệu này quen thuộc và trực quan đối với nhiều nhà phát triển.Các truy vấn chia tỷ lệ với kích thước của tập kết quả chứ không phải

kích thước của tập dtr liệu, vì vậy ta sẽ nhận được hiệu suất tương tự

khi tìm nap 1 kết quả từ tập hợp cơ sở dữ liệu có kích thước 100 hoặc

100.000.000.

Cho pháp truy cập dữ liệu ngoại tuyến thông qua cơ sở dữ liệu mạnh

mẽ trên thiết bị: Cơ sở đữ liệu cục bộ này có nghĩa là ứng dụng của sẽhoạt động trơn tru, ngay cả khi người dùng mắt kết nối Chế độ ngoạituyến này khả dụng trên Website, iOS và Android

2.5.3 Nhược điểm của Firebase

Bên cạnh những ưu điêm trên, việc sử dụng Firebase vần còn những hạn

chê sau:

Người dùng không có quyên truy cập mã nguồn: Trong quá trình pháttriển ứng dụng, nhà phát triển có thé muốn thay đổi những tinh năngcủa nó, việc không thé truy cập mã nguồn khiến việc này trở nên khókhăn.

Chỉ hoạt động với cơ sở dit liệu NoSQL: Firebase sử dụng Json va hầu

như không có tính năng SQL mặc dù đã có những cải tiến đáng kể trênCloud Tuy nhiên, cơ sở dữ liệu của Firebase vẫn không thể sử dụng

cơ sở dữ liệu quan hệ.

Truy vấn chậm: Mặc dù đã có những phát triển trên Cloud Firestore,

Firebase vẫn có những hạn chế về kích thước API, kích thước tài liệu,

hạn chê kết nôi đông thời và truy vân với hiệu suât chậm.

21

Chương 3 PHAN TÍCH THIẾT KE UNG DỤNG

3.1 Phân tích

3.1.1 Danh sách yêu cầu của hệ thống

Dựa vào các yêu câu và quy trình nghiệp vụ của các doanh nghiệp nội thât.

Nhóm đã đưa ra danh sách thê hiện các nghiệp vụ mà hệ thong cần có:

Bảng 3-1 Danh sách yêu cầu của hệ thống

STT Tên yêu cầu Ghi chú

Được xây dựng trên nền tảng

I1 | Đăng nhập, đăng ky

Android và website

Được xây dựng trên nên tảng

2 | Khởi tạo không gian Android Khởi tạo không gian

xung quanh dé bố trí nội that

Được xây dựng trên nên tảng

3 | Bố trí nội thất Android Sử dụng các vat thé 3D

do doanh nghiệp cung cấp

> Được xây dựng trên nền tang

4 | Dat mua nội that :

Android và website

Xem danh sách, thông tin nội | Được xây dựng trên nên tảng

5

thât Android và website

Được xây dựng trên nền tảng

website dành cho doanh nghiệp

6_ | Quản ly

quản lý danh mục, sản phâm, các

đơn đặt hang,

22

Hình 3-1 Sơ dé Use case

Bang 3-2 Danh sach Use case

STT Tén Usecase Ghi cha

Cho phép người dùng đăng nhập

1 Đăng nhập, đăng ký l

đăng ký vào hệ thông

Khởi tạo không gian xung quanh dé

2 Khởi tạo không gian , ca

-bô trí nội thât Người dùng sử dụng

23

thiết bị di động quét môi trường xung

quanh dé khởi tạo không gian

Xem danh sách, thông tin nội

Cho phép người dùng xem danh sách

5 thất và thông tin các sản phâm doanh

nghiệp đang kinh doanh Nghiệp vụ này xây dụng dành cho

6 Quản lý doanh nghiệp với các chức năng như:

Quản lý danh mục, sản phâm, người

dùng, đơn hang, chi nhánh,

Các bảng từ 3-3 đến 3-9 đặc tả các chức năng của hệ thống:

Bảng 3-3 Đặc tả chức năng đăng nhập

Đăng nhập

Tên Use case Dang nhap

M6 ta Đăng nhập tài khoản của người dùng

Điêu kiện trước xử ly Hệ thống khởi động thành công

khâu và hiền thị lại trang đăng nhập

Các bước thực hiện

1 Khởi động hệ thống, hiển thi màn hình đăng

nhập cho người dùng.

2 Khách hàng nhập tên người dùng và mật khâu

3 Click chon “Đăng nhập”

4 Hiền thị kết quả đăng nhập Nếu thành công sẽ

chuyên vào màn hình khởi tạo không gian

Yêu cầu nhập lại thông tin đăng nhập

Yêu câu đặc biệt

Phi chức năng

Ghi chú và vân đê Thực hiện trên nền tảng di động và website

Bảng 3-4 Đặc tả chức năng khởi tạo không gian

Khởi tạo không gian

Tên Use case Khởi tạo không gian

Mô tả

Khởi tạo không gian xung quanh đê bô trí nội that

Người dùng sử dụng thiết bị di động quét môi trường

xung quanh đề khởi tạo không gian

Điều kiện trước xử lý Người dùng đã đăng nhập thành công

Sau xử lý

25

Các bước thực hiện

1 Sau khi đăng nhập thành công, hệ thong

chuyên đến chức năng khởi tạo không gian

2 Người dùng di chuyển xung quanh không gian

để thiết bị có thể nhận biết được môi trường

xung quanh

3 Nếu quét môi trường thành công, người dùng

có thê thực hiện chức năng bồ trí nội thất Nếu

quét môi trường không thành công, yêu cầu

người dùng quét lại.

Dòng sự kiện chính

Hiền thị màn hình cameraNgười dùng di chuyển camera dé quét không gianKết thúc khởi tạo không gian

Mô tả

Nghiệp vụ này cho phép người dùng bé trí các vậtphẩm nội thất vào không gian đã được khởi tạo

Người dùng có thé thêm, xóa, thay đối vị trí các đồ

dùng nội thất trong không gian của mình

Điều kiện trước xử lý Người dùng đã khởi tạo không gian thành công

Sau xử lý

Hiển thị các vật phâm 3D đã được đặt trong không

gian

26

Các bước thực hiện

1 Sau khi quét không gian thành công, người

dùng chọn mở danh sách sản pham

2 Chọn sản phâm muốn bố trí vào không gian

3 Nhân đặt sản phẩm vào không gian

4 Di chuyền, xoay chọn vị trí mong muốn bố trí

5 Nhấn đặt

Dòng sự kiện chính

Chọn mở danh sách sản phẩmChọn sản phẩm mong muốn

Di chuyển lựa chọn vị trí đặt đồNhấn đặt

Dòng sự kiện khác

Yêu câu đặc biệt

Phi chức năng

Ghi chú và vân đê Thực hiện trên nền tảng di động

Bảng 3-6 Đặc tả chức năng xóa sản phẩm trong không gian

Xóa sản phẩm trong không gianTên Use case Xóa sản phẩm trong không gian

Mô tả

Cho phép người dùng có thê xóa bỏ các sản phâm

không mong muôn ra khỏi không gian Người thực hiện Người dùng

Điêu kiện trước xử lý Sản phâm đã được đặt vào trong không gian

27

Nhân xóa Dòng sự kiện khác

Yêu câu đặc biệt

Phi chức năng

Ghi chú và vân đê Thực hiện trên nền tang di động

Bảng 3-7 Đặc tả chức năng xem danh mục, thông tin sản phẩm

Xem danh sách, thông tin sản phẩm

Tên Use case Xem danh sách, thông tin sản phẩm

Mô tả

Cho phép người dùng xem danh sách và thông tin các

sản phẩm doanh nghiép đang kinh doanh

Người thực hiện Người dùng

Dòng sự kiện khác

Phi chức năng

Ghi chú và vân đê

Thể hiện thông tin của danh mục và sản phẩm Thực

hiện trên nên tảng di động và website

28