XÂY DỰNG ỨNG DỤNG BÁN HÀNG TRÊN nền TẢNG DI ĐỘNG

ĐẠ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
XÂY DỰNG ỨNG DỤNG BÁN HÀNG
TRÊN NỀN TẢNG DI ĐỘNG

Sinh viên thực hiện:
Châu Quốc Thắng - 18521385
Ngô Hiếu Tín – 18521498
Giảng viên hướng dẫn:
ThS. Huỳnh Tuấn Anh

TP. HỒ CHÍ MINH, 2021


MỤC LỤC


CHƯƠNG 1.
TỔNG QUAN ĐỀ TÀI
1.1.Giới thiệu đề tài
Thời đại công nghệ số 4.0, cùng với sự phát triển như vũ bão của Internet, xu
hướng kinh doanh trực tuyến hay bán hàng online đã đem lại hiệu quả kinh tế cho
rất nhiều ngành nghề kinh doanh tại Việt Nam. Các ứng dụng TMDT trên nền tảng
di động ngày càng phổ biến và nhiều người dùng có thể kể đến như Shopee, Tiki,
… đã mang lại sự tiện lợi và nhanh chóng cho người mua hàng. Ứng dụng của
hàng bán laptop ra đời để nắm bắt xu thế hiện nay đó là mua hàng và thanh toán
trực tuyến.

1.2.Lý do chọn đề tài

Nắm bắt yêu cầu này nhóm đã lên kế hoạch xây dựng một ứng dụng quản lý cửa
hàng và ứng dụng bán laptop, trưng bày sản phẩm nhằm đáp ứng những nghiệp
vụ cơ bản của các cửa hàng, đáp ứng nhu cầu tiện lợi cho khách hàng, khách hàng
có thể xem các mặt hàng trước trên ứng dụng, xem đánh giá, review và sau đó
quyết định tiến hành đặt hàng và thanh tốn trực tiếp.

1.3.Mục tiêu
Xây dựng mợt ứng dụng mua bán laptop trực tuyến với các chức năng sau đây:
-

-

Về phía người dùng:
+ Tìm kiếm, lọc các sản phẩm
+ Xem đánh giá, chi tiết sản phẩm
+ Đọc các bài viết giới thiệu sản phẩm
+ Đặt hàng và thanh toán trong ứng dụng
Về phía chủ cửa hàng:
+ Quản lí sản phẩm
+ Quản lí xuất nhập kho
+ Quản lí các khuyến mãi
+ Quản lí đơn hàng
+ Quản lí nhân viên và phân quyền
+ Quản lí tài khoản người dùng

1.4.Phương pháp thực hiện
Thực hiện đề tài theo các bước:
3

-

Phân tích đề tài.

-

Tham khảo các ứng dụng tương tự hiện có trên thị trường.

-

Nghiên cứu các công nghệ để áp dụng.

-

Phát triển ứng dụng.

-

Đưa cho một số người dùng sử dụng thử để lấy ý kiến phản hồi.

-

Kiểm thử và hồn thiện ứng dụng.

Những cơng nghệ được sử dụng:
o Front-end:
● Flutter
o Back-end:
● NodeJS/NestJS
● MongoDB

1.5.Ý nghĩa thực tiễn
Tạo ra một ứng dụng lớn dành cho các chuỗi cửa hàng dịch vụ bán lẻ phụ kiện,
máy tính – laptop , người dùng có thể đặt hàng online thông qua ứng dụng.
1.6. Kết quả dự kiến
o Nắm được các kiến thức Flutter, NestJS
o Hiểu rõ về các khái niệm, cách thức hoạt động của Repository Pattern
o Áp dụng tất cả kiến thức và nghiệp vụ tìm hiểu được xây dựng ứng dụng
thương mại điện tử với các tính năng chính:
● Xem các sản phẩm, chi tiết sản phẩm
● Thêm sản phẩm vào giỏ hàng
● Đặt hàng
● Quản lý cửa hàng
● Báo cáo thống kê

4


CHƯƠNG 2.
TÌM HIỂU CÁC CƠNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI
2.1. Framework Nestjs
2.1.1. Giới thiệu

Hình 1: Biểu tượng NestJS
Nest (NestJS) là một framework để xây dựng các ứng dụng server-side bằng
Node.js hiệu quả, và dể mở rộng. Nó sử dụng ngôi ngữ bậc cao của javascrip
là TypeScript (nhưng vẫn cho phép các nhà phát triển sử dụng JavaScript
thuần túy) và kết hợp các tính chất của OOP (Lập trình hướng đối tượng), FP
(Lập trình chức năng) và FRP (Lập trình phản ứng chức năng).
Về bản chất Nest sử dụng các framework máy chủ HTTP mạnh mẽ như là

Express (mặc định) và có thể tùy chọn cấu hình để sử dụng Fastify.
Nest cung cấp một tầng trừu tượng trên các framework Node.js phổ biến này
(Express / Fastify), nhưng cũng hỗ trợ API của họ trực tiếp cho nhà phát triển.
Điều này cho phép các nhà phát triển tự do sử dụng vô số các mô-đun của bên
thứ ba có sẵn cho nền tảng cơ bản. Có thể hiểu là tất cả các package mà

5


chúng ta cài thêm khi sử dụng Express / Fastify đều có thể tích hợp dể dàng
vào Nestjs.

2.1.2. Triết lý
Trong những năm gần đây, nhờ có Node.js, JavaScript đã trở thành ngôn
ngữ chung cho cả Frontend và Backend. Điều này đã tạo ra các dự án tuyệt
vời như Angular, React và Vue, giúp cải thiện năng suất của nhà phát triển
và cho phép tạo ra các ứng dụng frontend nhanh, có thể mở rộng. Tuy
nhiên, trong khi có rất nhiều thư viện, công cụ tuyệt vời tồn tại cho Node,
nhưng không có thư viện nào giải quyết hiệu quả vấn đề chính là kiến trúc.
Có hiểu là chưa có 1 mô hình phát triển dự án backend cố định như như
RubyOnRails.
Nest cung cấp một kiến trúc ứng dụng vượt trội cho phép các nhà phát triển
và các nhóm tạo ra các ứng dụng có thể kiểm tra cao, có thể mở rộng và dễ
bảo trì.
NestJS tương thích với cả Typescript và Javascript thuần, default là
Typescript.
Design Pattern xuyên suốt NestJS là Dependency Injection, và cú pháp của
NestJS rất giống Angular. Nên nếu bạn đã có kiến thức về Angular thì việc
bắt đầu với NesJS sẽ khá dễ dàng.
NestJS có rất nhiều module hỗ trợ bạn, từ việc hot reload, logger cho đến

GraphQL, Websocket rồi cqrs pattern, microservices,... Bạn chỉ cần NestJS
để làm tất cả mọi thứ.
Module microservices của NestJS hỗ trợ đủ loại kết nối: RabbitMQ, gRPC,
Kafka, Redis,... đây là một trong những điều mình rất thích, mình chỉ cần
tập trung vào code cho phần business, còn infra thì NestJS đã implement
sẵn chỉ việc dùng.
2.2.

MongoDB

2.2.1. Giới thiệu

6


Hình 7: Biểu tượng MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc
NoSql và được hàng triệu người sử dụng.
MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu
trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên
truy vấn sẽ rất nhanh.
Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ
(như MySQL hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với
MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng
So với RDBMS thì trong MongoDB collection ứng với table, còn document
sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong
RDBMS.
Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ
liệu lưu trữ không cần tuân theo một cấu trúc nhất định.
Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh

thông qua ngôn ngữ truy vấn MongoDB
2.2.2. Ứng dụng vào đề tài
Sử dụng MongoDB làm hệ quản trị CSDL nhiệm vụ lữu trữ thông tin.
2.3.

Repository Pattern

2.3.1. Giới thiệu
Thông thường thì các phần truy xuất, giao tiếp với database năm rải rác ở
trong code, khi bạn muốn thực hiện một thao tác lên database thì phải tìm
trong code cũng như tìm các thuộc tính trong bảng để xử lý. Điều này gây
lãng phí thời gian và công sức rất nhiều.
7


Với Repository design pattern, thì việc thay đổi ở code sẽ không ảnh hưởng
quá nhiều công sức chúng ra chỉnh sửa.
Một vài lí do ta nên sử dụng Repository Pattern:
-

Một duy nhất để thay đổi quyền truy cập dữ liệu cũng như xử lý dữ
liệu.

-

Một người duy nhất chịu trách nhiệm cho việc ánh xạ các bảng thành
đối tượng.

-

Tăng tính bảo mật và rõ ràng ràng buộc cho code.

-

Rất dễ dàng để thay thế một Repository với một implementation giả
cho việc testing, vì vậy bạn không cần chuẩn bị một cơ sở dữ liệu có
sẵn.

Hình 9: Mô hình Repository Pattern
2.3.2. Ứng dụng vào đề tài
Repository Pattern là lớp trung gian giữa tầng Business Logic và Data
Access, giúp cho việc truy cập dữ liệu chặt chẽ hơn và bảo mật hơn.
Repository đóng vai trong là một lớp kết nối giữa tầng Business và Model của
ứng dụng.
2.4.

Flutter
8


2.4.1. Giới thiệu

Hình 10: Biểu tượng Flutter
Có rất nhiều framework hỗ trợ phát triển một ứng dụng mobile. Android cung cấp
một framework cơ bản dựa trên ngôn ngữ lập trình Java hoặc Kotlin còn iOS thì
cung cấp framework dựa trên Objective-C / Swift
Tuy nhiên hầu hết các ứng dụng hiện nay, đều hỗ trợ cả 2 nền tảng Android và
iOS, do đó cùng lúc phát triển 2 dự án khác nhau với 2 framework khác nhau là
một công việc phức tạp và lãng phí thời gian công sức. Do đó người ta đã phát
triển các framework lập trình đa nền tảng để giải quyết vấn đề này. Một

framework rất phổ biến hiện nay là React Native được phát triển bới Facebook
đang được sử dụng rất rộng rãi. Tuy nhiên React Native vẫn thông qua các API
của các framework gốc như Android hay iOS do đó bị hạn chế và tốc độ kém.
Như một sự phát triển của tương lai, Flutter được phát triển bới chính Google, đơn
vị sở hữu Android như một đối trọng trực tiếp với React Native. Thay vì gọi các
API của framework gốc, Flutter tạo ra giao diện trực tiếp từ API của hệ điều hành.
Nhờ đó ứng dụng sẽ chạy nhanh hơn, mượt mà hơn và đẹp hơn.
Flutter cung cấp rất nhiều widgets (UI) là các thành phần đồ hoạ được thiết kế
riêng. Những đối tượng đồ hoạ này được tối ưu phù hợp với môi trường mobile và
dễ dàng trong việc thiết kế như HTML.
Cụ thể, ứng dụng Flutter sẽ sử dụng các widget riêng. Flutter widgets cung cấp các
animations (hiệu ứng) và gestures (thao tác) riêng. Ứng dụng được phát triển dựa
trên logic của reactive programming. Mỗi Widget sẽ có rất nhiều trạng thái. Bằng
cách thay đổi trạng thái của widget, Flutter sẽ tự động (reactive programming) so
9


sánh trạng thái của widget (cũ và mới) để tạo ra những thay đổi cần thiết thay vì
khởi tạo lại cả đối tượng.
2.4.2. Ứng dụng vào đề tài
Sử dụng Flutter để xây dựng ứng dụng di động cho người dùng, hoạt động
trên cả 2 nền tảng Android và iOS.
2.5.

Getx state management

2.5.1. Giới thiệu
Theo Flutter, State là những thông tin có thể được đọc một cách đồng bộ khi
Widget được xây dựng và có thể thay đởi trong suốt vịng đời của Widget. Đối
tượng State được tạo ra bởi Flutter framework. Để thay đổi Widget, bạn cần cập

nhật trạng thái của đối tượng bằng hàm setState(), hàm này nằm trong các Stateful
Widget. Hàm setState() cài đặt thuộc tính của đối tượng State và cập nhật giao
diện người dùng. Mặc dù Flutter đã cung cấp các phương thức và widget cho việc
quản lí state (InheritedWidget) nhưng đối với một dự án lớn thì việc áp dụng cách
quản lí state này rất rắc rối và phức tạp, code sẽ có nhiều boilerplate. Vì vậy để
giải quyết việc này, cộng đồng sử dụng Flutter đã cho ra đời nhiều thư viện quản lí
state khác nhau như Provider, BloC, Riverpod, nhưng thư viện phổ biến và dễ sử
dụng nhất là Getx.
Ngoài khả năng quản lí state, Getx còn cung cấp các API khác cho việc quản lí
route (navigation), quản lí dependency. Sử dụng Observable design pattern, Getx
giúp Flutter chạy nhanh hơn, lắng nghe các thay đổi giá trị của Widget và chỉ
rebuild lại những widget đó.
2.5.2. Ứng dụng vào đề tài
Sử dụng Getx để quản lí state cho ứng dụng, giảm thiểu số lượng boilerplate code
và giúp ứng dụng hoạt động mượt mà hơn.
2.6.

Firebase Authentication
10


2.6.1. Giới thiệu

Hình 12: Biểu tượng Firebase
Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud. Kèm
theo đó là hệ thống máy chủ cực kỳ mạnh mẽ của Google. Chức năng chính là
giúp người dùng lập trình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở
dữ liệu.
Hoạt động nổi bật của Firebase là xây dựng các bước xác thực người dùng
(authentication) bằng Email, Facebook, Twitter, GitHub, Google. Đồng thời cũng

xác thực nặc danh cho các ứng dụng. Hoạt động xác thực có thể giúp thông tin cá
nhân của người sử dụng được an tồn và đảm bảo khơng bị đánh cắp tài khoản
2.6.2. Ứng dụng vào đề tài
Sử dụng Authentication để quản lí tài khoản của người dùng và nhân viên

11


CHƯƠNG 3.
ĐẶC TẢ YÊU CẦU
3.1. Danh sách actor
Khách hàng: Là người sử dụng ứng dụng để tìm kiếm sản phẩm, xem đánh giá và đặt
hàng
Quản lí: Là người quản lí, cấp quyền cho các nhân viên, quản lí xuất nhận kho và quản lí
tài khoản người dùng.
Nhân viên: Là người có nhiệm vụ tiếp nhận và xử lí các đơn hàng, trả lời thắc mắc của
khách hàng, quản lí nội dung bài viết giới thiệu sản phẩm.

12


3.2. Sơ đồ Usecase
3.2.1 Quản lí và nhân viên

13


3.2.2 Người dùng

14

3.3. Đặc tả use case
3.3.1. Quản lí đơn hàng
Tên usecase

Quản lí đơn hàng

Mô tả

Quản lí và nhân viên muốn xem thông tin các đơn hàng

Actor

Quản lí, nhân viên

Tiền điều kiện

Có tài khoản đã được cấp quyền

Hậu điều kiện
Luồng sự kiện
chính

1. Ấn vào mục quản lí đơn hàng
2. Hệ thống hiển thị trang thông tin đơn hàng, bao gồm
tình trạng đơn hàng, các đơn hàng mới đặt,…
3. Chọn các thao tác như xem, thêm, xóa, sửa
hoặc cập nhật tình trạng đơn hàng
4. Sau khi chỉnh sửa, nhấn lưu hệ thống sẽ trả về thông báo

chỉnh sửa thành công

Luồng sự kiện
phụ

Không có

15


3.3.2. Quản lí sản phẩm
Tên usecase

Quản lí sản phẩm

Mô tả

Quản lí và nhân viên muốn chỉnh sửa các sản phẩm
đang bán

Actor

Quản lí và nhân viên

Tiền điều kiện

Có tài khoản được cấp quyền

Hậu điều kiện
Luồng

chính

sự

kiện

1. Ấn vào mục quản lí sản phẩm
2. Chọn các hành động xem chi tiết, thêm, xóa, sửa
sản phẩm
3. Ấn nút lưu
4. Sau khi chỉnh sửa, hệ thống sẽ trả về thông báo
chỉnh sửa thành công

Luồng sự kiện phụ

Không có

16


3.3.3. Quản lí kho
Quản lí kho

Tên usecase

Quản lí và nhân viên muốn xem tình trạng kho hàng, số
lượng

Mô tả

sản phẩm hiện đang có.

Actor

Quản lí và nhân viên

Tiền điều kiện

Có tài khoản được cấp quyền

Hậu điều kiện

Không có

Luồng
chính

sự

kiện

1. Ấn vào mục quản lí kho
2. Chọn các hành động xem chi tiết, thêm, xóa, sửa số
lượng
sản phẩm
3. Ấn nút lưu
4. Sau khi chỉnh sửa, hệ thống sẽ trả về thông báo
chỉnh sửa thành công

Luồng sự kiện phụ

Không có

17


3.3.4. Thống kê
Tên usecase

Quản lí và nhân viên muốn xem thống kê, bao gồm doanh thu theo
tháng, quý, năm, mặt hàng bán chạy, thống kê đơn hàng, thống kê
lượng khách hàng truy cập

Mô tả

Quản lí và nhân viên

Actor
Tiền
kiện

điều

Hậu
kiện

điều

Luồng
sự

kiện chính

Luồng
kiện phụ

Thống kê

sự

Có tài khoản được cấp quyền

1. Ấn vào mục thống kê
2. Chọn các hành động xem các thống kê theo bộ lọc
3. Hệ thống trả về kết quả thống kê
Không có

18


3.3.5. Quản lí nhân viên
Tên usecase
Mô tả

Quản lí nhân viên
Quản lí muốn chỉnh sửa thông tin nhân viên và các quyền truy
cập hệ thống của nhân viên đó

Actor

Quản lí

Tiền điều kiện

Có tài khoản được cấp quyền quản lí

Hậu điều kiện
Luồng sự kiện
chính

1. Ấn vào mục quản lí nhân viên
2. Chọn các hành động xem chi tiết, thêm, xóa, sửa
nhân viên, hoặc chỉnh sửa các quyền truy cập hệ thống của
nhân viên đó
3. Ấn nút lưu
4. Hệ thống sẽ trả về thông báo chỉnh sửa thành công

Luồng sự kiện
phụ

Không có

19


3.3.6. Quản lí khuyến mãi
Tên usecase
Mô tả

Quản lí khuyến mãi
Quản lí và nhân viên muốn thêm khuyến mãi cho sản phẩm, hoặc

thêm mã coupon, freeship

Actor

Quản lí và nhân viên

Tiền điều kiện

Có tài khoản được cấp quyền

Hậu điều kiện
Luồng sự kiện
chính

Luồng sự kiện
phụ

1. Ấn vào mục quản lí khuyến mãi
Chọn sản phẩm cần chỉnh sửa khuyến mãi, nhập thông tin
Khuyến mãi, hoặc chỉnh sửa mã coupon, freeship
2. Ấn nút lưu
3. Hệ thống sẽ trả về thông báo chỉnh sửa thành công
Không có

20


3.3.7. Quản lí banner
Quản lí banner

Tên usecase

Quản lí và nhân viên muốn chỉnh sửa các banner hiện trên
app

Mô tả
Actor

Quản lí và nhân viên

Tiền điều kiện

Có tài khoản được cấp quyền

Hậu điều kiện
Luồng
chính

sự

kiện

1. Ấn vào mục quản lí banner
2. Chọn các hành động xem chi tiết, thêm, xóa, sửa
banner
3. Ấn nút lưu
4. Sau khi chỉnh sửa, nhấn lưu hệ thống sẽ trả về thông báo
chỉnh sửa thành công

Luồng sự kiện phụ

Không có

21


3.3.8. Quản lí bài viết
Quản lí bài viết

Tên usecase

Quản lí và nhân viên muốn chỉnh sửa hoặc thêm các bài viết
quảng cáo sản phẩm

Mô tả

Actor

Quản lí và nhân viên

Tiền điều kiện

Có tài khoản được cấp quyền

Hậu điều kiện

Không có

Luồng
chính

sự

kiện

1. Ấn vào mục quản lí bài viết
2. Chọn các hành động xem chi tiết, thêm, xóa, sửa
bài viết
3. Ấn nút lưu
4. Sau khi chỉnh sửa, nhấn lưu hệ thống sẽ trả về thông báo
chỉnh sửa thành công

Luồng sự kiện phụ

Không có

22


3.3.9 Đăng kí
Tên usecase

Đăng ký

Mô tả

Người dùng mong muốn đăng ký tài khoản

Actor

Người dùng ứng dụng

Tiền điều kiện

Không có

Hậu điều kiện

Người dùng đăng nhập và thông báo đăng ký thành công

Luồng sự kiện chính

1. Người dùng nhập thông của người dùng
2. Nếu sai thực hiện bước 1
3. Ứng dụng tự động đăng nhập và thông báo
thành công

Luồng sự kiện phụ

1. Nếu đăng nhập bằng các mạng xã hội thì tự
động đăng nhập nếu đã đăng ký tài khoản
hoặc tự động đăng ký tài khoản khi chưa có
tài khoản

23


3.9.10.Đăng nhập
Tên usecase

Đăng nhập

Mô tả

Người dùng đăng nhập vào ứng dụng

Actor

Người dùng

Tiền điều kiện

Người dùng đã đăng kí tài khoản

Hậu điều kiện

Kiểm tra thông tin hợp lệ

Luồng
chính

sự

kiện

Luồng sự kiện phụ

1.
2.
3.

4.
5.

Người dùng nhấn vào nút đăng nhập
App chuyển sang màn hình đăng nhập
Người dùng nhập email và mật khẩu
Hệ thống kiểm tra thông tin đăng nhập
Thông báo đăng nhập thành công, trở về
Màn hình trước đó

1. Người dùng nhập sai email hoặc mật khẩu
2. Hệ thống thông báo, yêu cầu nhập lại hoặc

đăng kí tài khoản mới

24


3.3.11. Quản lí tài khoản
Tên usecase

Quản lí tài khoản

Mô tả

Người dùng muốn chỉnh sửa thông tin cá nhân

Actor

Người dùng

Tiền điều kiện

Người dùng đã đăng nhập.

Hậu điều kiện

Kiểm tra thông tin hợp lệ

Luồng sự kiện
chính

Luồng sự kiện phụ

6. Người dùng nhấn icon vào quản lí tài khoản
7. App chuyển sang giao diện quản lí tài khoản
8. Người dùng nhập thông tin chỉnh sửa
9. Kiểm tra dữ liệu và cho nhập lại nếu sai
10. Người dùng hồn tất
11. Thơng báo thành cơng

Khơng có

25