Phát triển mở rộng hệ thống bán hàng thời trang dùng flutter và angular

ĐẠ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

NGUYỄN TRUNG HIẾU-NGUYỄN HỮU MẠNH QUÂN

KHÓA LUẬN TỐT NGHIỆP
PHÁT TRIỂN MỞ RỘNG HỆ THỐNG BÁN HÀNG THỜI
TRANG DÙNG FLUTTER VÀ ANGULAR

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

NGUYỄN TRUNG HIẾU – 17520480
NGUYỄN HỮU MẠNH QUÂN – 17520938

KHÓA LUẬN TỐT NGHIỆP
PHÁT TRIỂN MỞ RỘNG HỆ THỐNG BÁN HÀNG THỜI
TRANG DÙNG FLUTTER VÀ ANGULAR
KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN
NGUYỄN THỊ THANH TRÚC

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 ............................. của Hiệu trưởng Trường Đại học Công nghệ thông tin.
1. ............................................... – Chủ tịch
2. ............................................... – Thư ký
3. ............................................... – Ủy viên
4. ............................................... – Ủy viên
ĐHQG TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC
CƠNG NGHỆ THƠNG TIN
CỘNG HỊA XÃ HỘI CHỦ NGHĨA
VIỆT NAM Độc lập – Tự do – Hạnh TP. HCM, ngày ....... tháng ........
năm .........
phúc

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:
PHÁT TRIỂN MỞ RỘNG HỆ THỐNG BÁN HÀNG THỜI TRANG DÙNG
FLUTTER VÀ ANGULAR
Cán bộ hướng dẫn:
Nhóm SV thực hiện:
Nguyễn Thị Thanh Trúc
Nguyễn Trung Hiếu 17520480
Nguyễn Hữu Mạnh Quân 17520938 Nguyễn Hà Giang
Đánh giá Khóa luận
1. Về cuốn báo cáo:
Số trang .............. Số bảng số

liệu .............. Số tài liệu tham
khảo ..............

Số chương ............... Số hình
vẽ

...............

phẩm ...............

Sản


Một số nhận xét về hình thức cuốn báo cáo:
............................................................................................................................
.......... ......................................................................................................................
................ ................................................................................................................
...................... 2. Về nội dung nghiên cứu:
............................................................................................................................
.......... .................................................................................................................
..................... ......................................................................................................
................................
3. Về chương trình ứng dụng:
............................................................................................................................
.......... ......................................................................................................................
................ ................................................................................................................
...................... 4. Về thái độ làm việc của sinh viên:
............................................................................................................................
.......... .................................................................................................................
..................... ......................................................................................................

................................
Đánh giá chung: Khóa luận đạt/khơng đạt u cầu của một khóa luận tốt
nghiệp kỹ sư/ cử nhân, xếp loại Giỏi/ Khá/ Trung bình.
Điểm từng sinh viên:
Nguyễn Trung Hiếu: ......................./10
Nguyễn Hữu Mạnh Quân: ......................./10


Người nhận xét
(Ký tên và ghi rõ họ tên)
ĐHQG TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC
CƠNG NGHỆ THƠNG TIN
CỘNG HỊA XÃ HỘI CHỦ NGHĨA
VIỆT NAM Độc lập – Tự do – Hạnh TP. HCM, ngày ....... tháng ........
năm .........
phúc

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:
PHÁT TRIỂN MỞ RỘNG HỆ THỐNG BÁN HÀNG THỜI TRANG DÙNG
FLUTTER VÀ ANGULAR
phẩm ...............
Nhóm SV thực hiện:
Nguyễn

Trung

Hiếu

17520480

Nguyễn Hữu Mạnh Quân 17520938
Đánh giá Khóa luận
1. Về cuốn báo cáo:
Số trang .............. Số bảng số
liệu .............. Số tài liệu tham
khảo ..............
Cán bộ phản biện:

Số chương ............... Số hình
vẽ

...............

Sản


Một số nhận xét về hình thức cuốn báo cáo:
.............................................................................................................
......................... ........................................................................................
.............................................. ...................................................................
................................................................... 2. Về nội dung nghiên cứu:
.............................................................................................................
......................... ...................................................................................
................................................... .........................................................
.............................................................................
3. Về chương trình ứng dụng:
.............................................................................................................

......................... ........................................................................................
.............................................. ...................................................................
................................................................... 4. Về thái độ làm việc của
sinh viên:
.............................................................................................................
......................... ...................................................................................
................................................... .........................................................
.............................................................................
Đánh giá chung: Khóa luận đạt/khơng đạt u cầu của một khóa
luận tốt nghiệp kỹ sư/ cử nhân, xếp loại Giỏi/ Khá/ Trung bình.
Điểm từng sinh viên:
Nguyễn Trung Hiếu: ......................./10
Nguyễn Hữu Mạnh Quân: ......................./10


Người nhận xét
(Ký tên và ghi rõ họ tên)


Catalog
LỜI CẢM ƠN .......................................................................................................................................... 8
ĐỀ CƯƠNG CHI TIẾT ............................................................................................................................ 9
TÓM TẮT KHOÁ LUẬN ...................................................................................................................... 19
CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI .................................................................................................... 20
CHƯƠNG 2: CƠ SỞ KIẾN THỨC VÀ CÔNG NGHỆ SỬ DỤNG ...................................................... 24
5 điều mô tả ngắn về Flutter:................................................................................................................... 25
1.Firebase là gì? ...................................................................................................................................... 46
2.Những dịch vụ nổi bật của Firebase .................................................................................................... 47
CHƯƠNG 3: PHÂN TÍCH BÀI TỐN ................................................................................................. 51
CHƯƠNG 4: GIAO DIỆN ỨNG DỤNG ............................................................................................... 86

1. Màn hình giới thiệu ứng dụng ............................................................................................................ 86
2. Màn hình đăng nhập. .......................................................................................................................... 87
3. Màn hình đăng ký ............................................................................................................................... 88
4. Đăng ký, đăng nhập bằng nhận diện khn mặt ................................................................................. 89
5. Màn hình xem tin tức.......................................................................................................................... 90
6. Màn hình tạo chat với admin .............................................................................................................. 91
7. Màn hình danh sách các vấn đề .......................................................................................................... 93
8. Màn hình danh sách vấn đề chat ......................................................................................................... 93
9. Màn hình tạo mới các item quần áo .................................................................................................... 94
10. Màn hình danh sách các item ........................................................................................................... 95
11. Màn hình danh sách item chi tiết ...................................................................................................... 97
12. Màn hình tủ đồ ................................................................................................................................. 97
13. Màn hình người dùng ....................................................................................................................... 98
14. Màn hình thơng tin người dùng ........................................................................................................ 99
15. Camera AR ..................................................................................................................................... 100
16. Màn hình đặt hàng .......................................................................................................................... 101
17. Màn hình đơn hàng ......................................................................................................................... 102
18. Màn hình giảm giá .......................................................................................................................... 103
19. Danh sách đơn hàng ....................................................................................................................... 104
CHƯƠNG 5: KẾT LUẬN .................................................................................................................... 114
TÀI LIỆU THAM KHẢO .................................................................................................................... 115

LỜI CẢM ƠN
Sau hơn 4 năm học tập và rèn luyện tại Trường Đại Học Công Nghệ
Thông Tin, được sự chỉ bảo và giảng dạy nhiệt tình của q thầy cơ, đặc
biệt q thầy cơ trong khoa Công Nghệ Phần Mềm, chúng em đã nhận
được vô vàng kiến thức bổ ích về lý thuyết và thực hành trong thời gian
qua.
Đặc biệt, em xin gửi lời cảm ơn và lịng biết ơn sâu sắc nhất tới cơ
Nguyễn Thị Thanh Trúc. Cơ đã tận tình giúp nhóm chúng em hồn

thành tốt báo cáo khóa luận của trong suốt quá trình thực hiện đề tài.


Trong thời gian thực hiện đề tài, em đã vận dụng những kiến thức nền
tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những
kiến thức mới. Từ đó, em vận dụng tối đa những gì đã thu thập được để
hồn thành một báo cáo khóa luận tốt nhất.
Cảm ơn giảng viên phản biện và các thầy cô trong hội đồng chấm luận
văn đã cho chúng em những lời nhận xét, góp ý thật sự quý báu và bổ ích
giúp cho luận văn của chúng em trở nên hoàn thiện hơn.
Mặc dù đã rất cố gắng, tuy nhiên vì khả năng giới hạn nên vẫn
khơng tránh khỏi những sai sót, em rất mong nhận được sự thơng cảm và
góp ý chân tình từ q thầy cô và các . Một lần nữa xin được chân thành
cảm ơn mọi người.
Em xin chân thành cảm ơn quý Thầy Cơ!
Tp. Hồ Chí Minh, ngày tháng năm
Nguyễn Trung Hiếu
Nguyễn Hữu Mạnh Quân

ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI: Phát triển mở rộng ứng dụng bán hàng thời trang
dùng flutter và Angular.
Cán bộ hướng dẫn: ThS. Nguyễn Thị Thanh Trúc - TS. Nguyễn Hà
Giang


Thời gian thực hiện: Từ ngày 06/09/2021 đến ngày 25/12/2021
Sinh viên thực hiện:
1. Nguyễn Hữu Mạnh Quân

17520938

2. Nguyễn Trung Hiếu

17520480


Nội dung đề tài: (Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương
pháp thực hiện, kết quả mong đợi của đề tài)
1. Mục tiêu đề tài
1.1.

Bối cảnh chọn đề tài
- Ngành cơng nghiệp thời trang đang chuyển mình mạnh mẽ trong

kỷ nguyên số, nhất là khi cuộc cách mạng cơng nghệ 4.0 nổ ra. Trong đó
ngành thương mại điện tử có lẽ phát triển hơn cả. Đa số các hệ thống mua
bán thời trang hiện nay cho phép chúng ta xem các mặt hàng thời trang
sau đó chọn mua chúng và thanh tốn. Yếu tố an tồn và trực quan khi sử
dụng hệ thống đang dần được chú trọng và đầu tư nhiều hơn. Nói đến bảo
mật an tồn thì bảo mật bằng nhận diện khn mặt được biết đến hơn cả.
Và hệ thống sẽ trực quan hơn nếu có tính tương tác bản thân với các mặt
hàng thời trang thông qua camera(thực tế ảo) sẽ mới mẻ thu hút hơn.
Trong tương lai nếu tích hợp được các tính năng này sẽ giúp ứng dụng trở
nên thú vị hữu ích và tăng doanh thu nhiều hơn cho doanh nghiệp cũng
như độ trải nghiệm của người dùng.
1. Nhận diện bằng khn mặt là gì?
- Nhận diện khn mặt (hay còn gọi là Facial Recognition) là 1
phương thức sử dụng cơng nghệ thơng tin để tìm ra danh tính con người
thông qua khuôn mặt của họ.

- Để nắm rõ cách thức hoạt động của công nghệ này, sao chúng ta
không liên hệ đến thực tiễn? Ngồi đời thực, mỡi khi chúng ta gặp ai đó,
khn mặt của họ được ghi nhớ lại thông qua 1 số đặc điểm như màu mắt,
chiều dài sống mũi,… Tương tự, Facial recognition phân tích hình ảnh, và
lưu trữ các đặc điểm này dưới dạng tốn học, để đối chiếu lại với các
khn mặt khác.


- Ngày nay, nhận diện khuôn mặt được sử dụng rất rộng rãi, trong
các trường đại học, công ty lớn, bởi mức độ an tồn mà chúng mang lại.
Chính vì thế, nhóm em quyết định áp dụng cơng nghệ này trong khóa
luận, nhằm nâng độ bảo mật thơng tin của ứng dụng, đồng thời cung cấp
người dùng 1 phương thức đăng nhập thay thế phòng khi họ quên tên tài
khoản của mình.
2. Thực tế ảo là gì?
- Cơng nghệ thực tế ảo tăng cường AR là sự kết hợp của thế giới
thật với thông tin ảo, công nghệ AR sẽ bổ sung những chi tiết ảo được tạo
bởi máy tính, điện thoại thông minh vào thế giới thực để tăng cường sự
trải nghiệm.
- Với việc ứng dụng thực tế ảo tăng cường vào thời trang khách
hàng dễ dàng lựa chọn các kiểu trang phục trong kho hàng của ứng dụng
và khơng tốn nhiều thời gian để vào phịng thử đồ. Họ cũng có thể tự phối
trang phục với nhau một cách nhanh chóng mang lại cho khách hàng trải
nghiệm mua sắm thú vị.
Lợi ích của áp dụng thực tế ảo
*Kích thích độ nhận thức
- Thời trang thực tế ảo có thể tăng khả năng nhận biết, thu hút
khách hàng online
*Giúp tăng tương tác và trải nghiệm
- Sử dụng thực tế ảo trong thời trang để gia tăng cảm nhận của

người dùng. Theo thống kê của Retail Perceptions thì có khoảng 55%
người mua hàng đồng ý rằng công nghệ AR giúp việc mua sắm vui và
hứng khởi hơn. Sự tương tác của khách hàng chính là tăng thời gian một
người mua ở lại cửa hàng và để làm được điều đó thì các doanh nghiệp
thời trang cần đưa ra những trải nghiệm đáng nhớ. Một cửa hàng thời
trang thu hút khách hàng thành công sẽ khiến họ quay trở lại cửa hàng và


giới thiệu với nhiều người bạn khác nữa.
*Chuyển đổi thành hành động
- Doanh thu là điều cần thiết có mỡi nhà kinh doanh và việc tăng
doanh thu luôn là nhiệm vụ mà các nhà bán lẻ đặt ra theo từng thời điểm.
Ứng dụng thực tế ảo trong thời trang có thể giúp các cửa hàng tăng doanh
thu bán hàng của mình. Từ những trải nghiệm mà khách hàng có được, tất
cả sẽ được chuyển đổi thành một thông tin giá trị nào đó để khách hàng
lựa chọn.
- Nắm bắt được tâm lý đó tụi em chọn đề tài phát triển hệ thống bán
hàng thời trang trên nền tảng di động sử dụng flutter (áp dụng đăng nhập
nhận diện khuôn mặt, camera thực tế ảo) dành cho khách hàng mua quần
áo và Angular cho nền tảng web dành cho admin để hiện thực hoá sự mở
rộng.
- Theo tụi em khảo sát trên thị trường hiện nay đã có các hệ thống
bán hàng thời trang: Tiki, shopee, Lazada… và đã có các ứng dụng phòng
thử đồ AR (UNIQLO AR FITTING ROOM). Đồ án của tụi em sẽ mở
rộng phát triển bằng cách kết hợp chúng lại, có thể cho người dùng thao
tác trực tiếp với các item bằng hình ảnh của chính mình thơng qua
camera. Một điểm nữa trên thị trường hiện nay chưa có ứng dụng mua
bán nào được tích hợp camera ảo và nhận diện khuôn mặt khi đăng nhập.
Mục tiêu

1.2.

- Hệ thống có đầy đủ các nghiệp vụ tính năng của một ứng dụng
mua bán thương mại
- Giúp cho những người dùng mua sắm trực tuyến an toàn tiện lợi và
trải nghiệm mới mẻ thú vị hơn( giảm thiểu khả năng khơng hài lịng khi
nhận hàng)
2.

Phạm vi nghiên cứu


- Nhóm chúng em hướng tới một ứng dụng mang giá trị trực quan
chỉ đơn thuần là một ứng dụng với tính chất xem các mặt hàng thời trang
và mua hàng, vì thế phạm vi người dùng mà nhóm em hướng tới chắc
chắn sẽ là hơn 90 triệu người dân Việt Nam – những người có thiết bị
điện tử như Smart phone, laptop… có kết nối với Internet, trong đó sẽ
chia ra làm hai nhóm đối tượng: Nhóm sử dụng ứng dụng (người dùng) và
nhóm các cửa hàng thời trang khai thác dịch vụ mua bán (admin) (tập
trung vào nhóm doanh nghiệp vừa và nhỏ, kinh doanh theo hình thức bán
lẻ)
3. Đối tượng nghiên cứu

- Phần mềm sử dụng: Android studio, Visual studio code.
- Công nghệ sử dụng: Flutter, Angular, Tensorflow lite, Google
machine learning kit, Momo sdk.
- Dịch vụ backend: Firebase.
- Nền tảng triển khai hệ thống: Web, Android, IOS
- Ngôn ngữ cài đặt: Dart, typescript, html, css.
4. Phương pháp thực hiện

- Chúng em sẽ thực hiện đề tài bằng cách tạo ra 1 ứng dụng mua bán
thời trang bình thường nhưng có thêm tính năng đăng ký, đăng nhập bằng
nhận diện khn mặt để tăng tính bảo mật, tính năng camera thử đồ
(người dùng sẽ sử dụng camera sau của thiết bị công nghệ đang mua hàng
chụp ảnh bản thân sau đó kéo thả các item thời trang mình đã chọn ướm
vào cơ thể của mình) từ đó có thể ra quyết định mua chúng hay khơng.
- Các tính năng của ứng dụng di động.
+ Đăng ký, đăng nhập bằng nhận diện khuôn mặt
+ Xem tin tức thời trang.
+ Xem quần áo thời trang.


+ Camera thử quần áo.
+ Lưu các item quần áo yêu thích
+ Chọn mua các mặt hàng thời trang
+ Thanh tốn điện tử.
+ Chat với admin.
- Ngồi ra chúng em cịn tạo ra 1 website có thể quản lí chỉnh sửa
hoặc thêm các mặt hàng thời trang cũng như quản lí các đơn hàng cho
admin.
Các phương pháp thực tiễn:
- Khảo sát thị trường bên ngoài, bám sát yêu cầu đề tài, trao đổi
hằng tuần với giảng viên hướng dẫn. Dự định đi theo các giai đoạn sau:
- Khảo sát, nghiên cứu đề tài và cơng nghệ
- Phân tích thiết kế hệ thống, thiết kế giao diện, database
- Xây dựng ứng dụng di động trên nền tảng android và ứng dụng
web
- Kiểm thử, sửa lỡi và deploy ứng dụng
- Hồn thiện báo cáo và chuẩn bị cho buổi phản biện và bảo vệ Sử

dụng Github để quản lý code, Google Sheets để quản lý tài liệu và công
việc.
5. Kết quả mong đợi

Đối với ứng dụng

5.1.

- Hoàn thành đầy đủ được các nghiệp vụ tính năng đăng ký đăng
nhập sử dụng nhận diện khuôn mặt, xem quần áo, xem tin tức thời trang,
thao tác với camera, chat với admin và cuối cùng là mua bán điện tử trực
tuyến.
- Xử lí tính năng thao tác chọn quần áo bằng Camera(Flutter) ở mức
chấp nhận được.


- Tốc độ chạy của ứng dụng là ngay lập tức, khơng bị delay.
- Có nhiều kinh nghiệm hơn trong việc xử lí các hình ảnh , thiết kế
ứng dụng thông qua Dart/Flutter. Thiết kế Web của admin thao tác đơn
giản chính sát hiệu quả. Cách xử lý Database thơng qua Firebase.
- Phân chia công việc giữa các thành viên rõ ràng đạt hiệu quả tốt
Các tiêu chí khác

5.2.

- Tính bảo mật: Ứng dụng có tính bảo mật cao khi sử dụng đăng
nhập bằng cách nhận diện khn mặt.
- Tính thẩm mỹ trực quan: ứng dụng có giao diện đẹp đồng thời trải
nghiệm thực tế ảo trực quan dễ sử dụng, tâm lý thoải mái cuốn hút khách
hàng.

- Tính thuận tiện, nhanh chóng : Người dùng khơng những chọn
được các item thích hợp và ưng ý mà cịn thanh tốn nhanh chóng thuận
tiện thơng qua tính năng thanh tốn điện tử của ứng dụng. Chat trực tiếp
với admin nếu có vấn đề cần giải đáp.


Kế hoạch thực hiện:(Mô tả kế hoạch làm việc và phân công công việc
cho từng sinh viên tham gia)
Giai đoạn

Thời gian

Mô tả công việc

Phân
công

1.

Khảo
sát,

nghiên cứu

(Tuần 1-2)

- Lựa chọn đề tài

Cả

6/9/2021

- Khảo sát ứng dụng tương

nhóm

– 19/9/2021

tự
Lựa chọn cơng nghệ và tìm
hiểu, nghiên cứu những lý
thuyết, thuật tốn, phương
pháp liên quan

2. Phân tích
thiết kế hệ
thống và chuẩn
bị xây dựng

(Tuần 3-5) - Phân tích, xác định, đặc tả Cả
20/9/2021

chức năng

– 3/10/2021 - Vẽ các lưu đồ, các luồng
xử lý

ứng dụng

nhóm

Quân

- Vẽ sơ đồ thiết kế CSDL
- Thiết kế UI cho app

Hiếu

- Xây dựng kiến trúc
chương trình
3. Xây dựng

(Tuần 6-11) - Xây dựng ứng dụng ở nền Cả

ứng dụng

4/10/2021 – tảng Flutter và ngôn sử
7/11/2021

dụng ngôn ngữ Dart.
-Xây dựng web (API) cho
admin ở nền tảng Angular

nhóm


- Xây dựng database bằng

Hiếu

Firebase

- Xây dựng tầng Model cho
ứng dụng
- Xây dựng View và

Quân

Layout cho từng chức năng
của ứng dụng
- Phát triển hoàn thiện các
chức năng của ứng dụng
4. Kiểm thử,

(Tuần 12-

- Thực hiện kiểm thử các

sửa lỗi và

14)

deploy ứng

8/11/2021 –

dụng

21/11/2021

5. Hoàn thiện

(Tuần 15-

- Hoàn thiện báo cáo,

Cả

báo cáo và

16)

chuẩn bị slide, nội dung

nhóm

(Tuần 15-16)

22/11/2021- demo.

22/11/2021 – -

6/12/2021

nhóm

- Chuẩn bị danh sách các

Hoàn thiện báo

câu hỏi cho phản biện và

cáo, chuẩn bị

bảo vệ

slide, nội dung
demo Cả nhóm
chuẩn bị phản

Cả

- Tiếp thu và sửa chữa báo
cáo cũng như sản phẩm

biện và bảo vệ

Xác nhận của CBHD

TP. HCM, ngày 06 tháng 09 năm 2021


(Ký tên và ghi rõ họ tên)

Sinh viên
(Ký tên và ghi rõ họ tên)

Nguyễn Thị Thanh Trúc

Nguyễn Hữu

Nguyễn Trung Hiếu

Mạnh Qn

TĨM TẮT KHỐ LUẬN
Trong xu hướng của thời đại hiện nay, việc áp dụng khoa học công
nghệ vào tất cả các ngành nghề, các lĩnh vực là một trong những công
việc thiết thực và cần làm để đạt được hiệu quả làm việc cũng như chất
lượng hàng hóa. Đặc biệt với sự phát triển bùng nổ của thiết bị di động thì
ngày càng cần có thêm nhiều ứng dụng di động để đáp ứng cho những
nhu cầu cũng như nhiều mục đích khác của con người. Áp dụng vào thực
tiễn trong nhu cầu làm đẹp mà cụ thể là nhu cầu thời trang ăn mặc ngày
càng được chú trọng đến, trong khoá luận tốt nghiệp tụi em chọn đề tài
“Phát triển mở rộng hệ thống bán hàng thời trang dùng Flutter và
Angular”.
Đa số các hệ thống mua bán thời trang hiện nay cho phép chúng ta
xem các mặt hàng thời trang sau đó chọn mua chúng và thanh tốn. Yếu
tố an toàn và trực quan khi sử dụng hệ thống đang dần được quan tâm từ
khách hàng và các doanh nghiệp chú trọng, đầu tư nhiều hơn. Mục tiêu
của khóa luận là một hệ thống bán hàng cung cấp cho người dùng mua
quần áo những tiện ích an tồn tiện lợi cũng như những trải nghiệm mới


mẻ thú vị. Điển hình như đang nhập bằng nhận diện khuôn mặt và camera
thử đồ ảo.
Giải pháp lựa chọn kết hợp các công nghệ để hiện thực gồm SDK ứng
dụng di động Flutter, ứng dụng web Angular + Firebase và một số nền
tảng như Google Machine learning kit. Nội dung đề tài được chia thành:
-

Chương 1: Giới thiệu tổng quan: Giới thiệu bối cảnh, lý do thực

hiện đề tài cũng như các giải pháp hiện tại cho vấn đề liên quan. Từ đó
rút ra hướng tiếp cận thực hiện đề tài.
-

Chương 2: Cơ sở kiến thức và công nghệ sử dụng: Trình bày sơ

lược về lý thuyết, thuật tốn, kỹ thuật lập trình cũng như cách cài đặt ứng
dụng của các công nghệ được sử dụng như: Flutter, Angular, Firebase,
Google Machine learning kit,...
-

Chương 3: Nghiên cứu thực nghiệm: Phân tích, xác định yêu cầu

người dùng và hệ thống. Phân tích và thiết kế hệ thống đáp ứng được yêu
cầu đã đề ra.
Chương 4: Kết luận: Nêu đánh giá toàn bộ đề tài, trình bày những
kết quả đạt được, thuận lợi, khó khăn cũng như ưu nhược điểm của đề tài.
-

Chương 5: Hướng phát triển: Đề xuất hướng phát triển trong
tương lai.
-

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI
1.1. Giới thiệu đề tài:
- Ngành công nghiệp thời trang đang chuyển mạnh mẽ trong kỷ
nguyên số, nhất là khi cuộc cách mạng công nghệ 4.0 nổ ra. Trong đó
ngành thương mại điện tử có lẽ phát triển hơn cả. Cùng với xu thế phát
triển công nghệ trên thế giới, thương mại điện tử (TMĐT) ở Việt Nam

đang tăng trưởng mạnh mẽ. Việt Nam là nước duy nhất ở Đông Nam Á


có tăng trưởng TMĐT 2 con số (với 35,4 triệu người dùng và tạo ra
doanh thu hơn 2,7 tỷ USD trong năm 2019). Bán lẻ trực tuyến không chỉ
đơn giản là việc đưa sản phẩm lên mạng, nó cịn là sự tương tác giữa
người bán và người mua, với những chiến lược bán hàng hiệu quả.
Đa số các hệ thống mua bán thời trang hiện nay cho phép chúng ta
xem các mặt hàng thời trang sau đó chọn mua chúng và thanh toán. Khoá
luận này nghiên cứu phát tiển mở rộng thực trạng ứng dụng các nghiệp vụ
thương mại điện tử trong bán lẻ trực tuyến, đưa ra một số đề xuất nhằm
tăng cường ứng dụng các ứng dụng công nghệ thông tin trong thương mại
điện tử và quản lý bán hàng trong bán lẻ trực tuyến. Cụ thể ở đây yếu tố
an toàn và trực quan khi sử dụng hệ thống thương mại đang dần nhận sự
quan tâm của khách hàng được các doanh nghiệp chú trọng và đầu tư
nhiều hơn. Nói đến bảo mật an tồn thì bảo mật bằng nhận diện khuôn
mặt được biết đến hơn cả. Và hệ thống sẽ trực quan hơn nếu có tính
tương tác bản thân với các mặt hàng thời trang thông qua camera(thực tế
ảo) sẽ mới mẻ thu hút hơn. Trong tương lai nếu tích hợp được các tính
năng này sẽ giúp ứng dụng trở nên thú vị hữu ích và tăng doanh thu nhiều
hơn cho doanh nghiệp cũng như độ trải nghiệm của người dùng.
1.2.Lí do chọn đề tài:
- Ngày nay, nhận diện khuôn mặt được sử dụng rất rộng rãi, trong
các trường đại học, công ty lớn, bởi mức độ an tồn mà chúng mang lại.
Chính vì thế, nhóm em quyết định áp dụng cơng nghệ này trong khóa
luận, nhằm nâng bao độ bảo mật thông tin của ứng dụng, đồng thời cung
cấp người dùng 1 phương thức đăng nhập thay thế phòng khi họ quên tên
tài khoản của mình.
- Bên cạnh đó với việc ứng dụng thực tế ảo tăng cường vào thời
trang khách hàng dễ dàng lựa chọn các kiểu trang phục trong kho hàng

của ứng dụng và không tốn nhiều thời gian để vào phịng thử đồ. Họ cũng
có thể tự phối trang phục với nhau một cách nhanh chóng mang lại cho
khách hàng trải nghiệm mua sắm thú vị.
- Nắm bắt được tâm lý đổi mới đó tụi em chọn đề tài phát triển hệ
thống bán hàng thời trang trên nền tảng di động sử dụng flutter (áp dụng
đăng nhập nhận diện khuôn mặt, camera thực tế ảo) và nền tảng Web
dùng Angular để hiện thực hoá sự mở rộng.

1.3. Mục Tiêu
- Hệ thống có đầy đủ các nghiệp vụ tính năng của một ứng dụng
mua bán thương mại.
- Giúp cho những người dùng mua sắm trực tuyến an toàn tiện lợi và
trải nghiệm mới mẻ thú vị hơn( giảm thiểu khả năng khơng hài lịng khi
nhận hàng).
1.4. Phạm vi nghiên cứu
- Nhóm chúng em hướng tới một ứng dụng mang giá trị an toàn tiện
lợi và trực quan chỉ đơn thuần là một ứng dụng với tính chất xem các mặt
hàng thời trang và mua hàng, vì thế phạm vi người dùng mà nhóm em
hướng tới chắc chắn sẽ là hơn 90 triệu người dân Việt Nam – những
người có thiết bị điện tử như Smart phone, laptop…có kết nối với
Internet.
Tuy nhiên, khi đi vào cụ thể, thì sẽ là những người dùng thuộc phân
khúc trẻ khoảng tuổi từ 18 trở lên đến 30 tuổi. - Theo VIRAC Giới trẻ
trong độ tuổi 25-34 tuổi là nhóm đối tượng chi tiêu nhiều nhất cho thời
trang. Điều này là dễ hiểu bởi người trẻ tuổi ln dành mối quan tâm cho
vẻ ngồi và chịu đầu tư chăm sóc vẻ ngồi nhất. Bên cạnh đó, đây cịn là

nhóm tuổi nhanh chóng nắm bắt xu hướng mới và có hành vi tiêu dùng
chịu nhiều chi phối từ các phương tiện truyền thơng, người nổi tiếng.
Trong đó tỷ lệ chi tiêu cho thời trang của nữ giới tại Việt Nam nhỉnh hơn
nam giới một chút, đạt hơn 50% năm 2020. Đây chính là động lực về
nguồn cung người dùng ứng dụng của bọn em.
Trong đó sẽ chia ra làm hai nhóm đối tượng:
+ Nhóm người dùng sử dụng ứng dụng di động(Android/IOS)
(người dùng) là những khách hàng mua các mặt hàng thời trang.
+ Nhóm các cửa hàng thời trang khai thác dịch vụ mua bán (admin)
sử dụng ứng dụng Web (Angular+Firebase) là những nhóm doanh nghiệp
vừa và nhỏ, kinh doanh theo hình thức bán lẻ.
1.5. Đối tượng nghiên cứu:
- Phần mềm sử dụng: Android studio, Visual studio code
- Công nghệ sử dụng: Flutter, Angular, Tensorflow lite, Google
machine learning kit, Momo sdk
- Dịch vụ backend: firebase
- Nền tảng triển khai hệ thống: web, android, ios
- Ngôn ngữ cài đặt: Dart, typescript, html, css
1.6. Phương pháp thực hiện:
- Chúng em sẽ thực hiện đề tài bằng cách tạo ra 1 ứng dụng mua
bán thời trang bình thường nhưng có thêm tính năng đăng ký, đăng nhập
bằng nhận diện khuôn mặt để tăng tính bảo mật, tính năng camera thử đổ
(người dùng sẽ sử dụng camera sau của thiết bị công nghệ đang mua hàng
chụp ảnh bản thân sau đó kéo thả các item thời trang đã chọn ướm vào
cơ thể của ) từ đó có thể ra quyết định mua chúng hay khơng.
- Các tính năng của ứng dụng di động.


+ Đăng ký, đăng nhập bằng nhận diện khuôn mặt
+ Xem tin tức thời trang.

+ Xem quần áo thời trang.
+ Camera thử quần áo.
+ Lưu các item quần áo yêu thích
+ Chọn mua các mặt hàng thời trang
+ Thanh tốn điện tử.
+ Chat với admin.
- Ngồi ra chúng em cịn xây 1 website có thể quản lí chỉnh sửa
hoặc thêm các mặt hàng thời trang cũng như quản lí các đơn hàng cho
Admin.
Các phương pháp thực tiễn
- Khảo sát thị trường bên ngoài, bám sát yêu cầu đề tài, trao đổi
hằng tuần với giảng viên hướng dẫn. Dự định đi theo các giai đoạn sau:
- Khảo sát, nghiên cứu đề tài và cơng nghệ
- Phân tích thiết kế hệ thống, thiết kế giao diện, database
- Xây dựng ứng dụng di động trên nền tảng android và ứng dụng
web
- Kiểm thử, sửa lỡi và deploy ứng dụng
- Hồn thiện báo cáo và chuẩn bị cho buổi phản biện và bảo vệ Sử
dụng Github để quản lý code, Google Sheets để quản lý tài liệu và công
việc.

CHƯƠNG 2: CƠ SỞ KIẾN THỨC VÀ
CÔNG NGHỆ SỬ DỤNG

1.FLUTTER:


1. Định nghĩa

- Flutter được Google giới thiệu là một người mới trong thế giới

ứng dụng di động. Là một SDK mới của Google dành cho các thiết bị di
động giúp developers và designers xây dựng nhanh chóng ứng dụng dành
cho các thiết bị di động (Android, iOS). Flutter là dự án mã nguồn mở
đang trong giai đoạn thử nghiệm. Flutter bao gồm Reactive framework và
công nghệ hiển thị 2D (2D rendering engine)và các công cụ phát
trển(development tool). Các thành phần này làm việc cùng nhau giúp ta
thiết kế, xây dựng, test, debug ứng dụng. Khơng có gì ngạc nhiên khi
Flutter giúp các nhà phát triển tạo ra các ứng dụng native đẹp mắt và giúp
họ phát triển các ứng dụng đa nền tảng một cách dễ dàng.
5 điều mô tả ngắn về Flutter:
•

Ngơn ngữ Dart. Dart là gì? Đó là phản ứng của hầu hết các nhà phát
triển. Dart là ngơn ngữ thuần OOP, nó được sử dụng để xây dựng
các ứng dụng web, server, máy tính để bàn và thiết bị di động.

•

Các IDE được khuyến nghị với Flutter là Android Studio hoặc
Intellij Idea.

•

Flutter có cầu nối là Dart, kích thước ứng dụng lớn hơn, nhưng nó
hoạt động nhanh hơn nhiều. Không giống như React Native với cầu
nối là Javascript.