Tìm hiểu công nghệ react xây dựng website thương mại điện tử (báo cáo cuối kì đồ án 1)

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

BÁO CÁO ĐỒ ÁN 1
TÌM HIỂU REACTJS VÀ XÂY DỰNG ỨNG DỤNG
THƯƠNG MẠI ĐIỆN TỬ LUXY WINE

Nhóm thực hiện: Nhóm 2
Dương Hiển Thế

19522252

Nguyễn Tấn Thành

19522239

Gvhd: Th.S Huỳnh Tuấn Anh
TP. Hồ Chí Minh, 15 tháng 6 năm 2022

1


LỜI CẢM ƠN
Trong quá trình học tập, nghiên cứu và phát triền đề tài “Tìm hiểu cơng nghệ React
xây dựng website thương mại điện tử” chúng em đã nhận được sự giúp đỡ, chỉ bảo nhiệt
tình của thầy để hồn thành đồ án này.
Chúng em xin bày tỏ sự biết ơn đặc biệt đến Thầy Huỳnh Tuấn Anh, người đã trực
tiếp hướng dẫn, giúp đỡ về kiến thức, tài liệu và phương pháp để chúng em hoàn thành đề
tài này.
Chúng em xin chân thành cảm ơn vì những thời gian quý báu thầy đã dành ra để

kiểm tra, đưa ra các ý kiến nhận xét và đóng góp rất nhiều vào những tính năng, hướng
phát triển mới hơn cho đề tài.Hi vọng với sự chỉ báo và góp ý từ thầy, nhóm đề tài có thể
tiếp túc phát triển để ứng dụng ngày càng được mở rộng và phục vụ được tốt hơn cho
người dùng.
Mặc dù đã có nhiều cố gắng trong suốt quá trình thực hiện đề tài, song có thể cịn có
những mặt hạn chế, thiếu sót. Chúng em rất mong nhận được ý kiến đóng góp và sự chỉ
dẫn của thầy và các bạn để đề tài của chúng em được hoàn thiện hơn.
Chúng em xin trân trọng cảm ơn!
TP. Hồ Chí Minh, ngày 10 tháng 6 năm 2022

2


LỜI MỞ ĐẦU
Các công nghệ hiện tại để phát triển nên một ứng dụng web đang trong quá trình
lớn mạnh, nhiều công cụ hỗ trợ rất tốt trong việc phát triển các ứng dụng trên nền tảng
Web. Nổi bật trong số đó là ReactJS. Báo cáo cho đồ án 1 này cũng chính là những gì mà
tụi em đã tìm hiểu về ReactJS trong thời gian vừa qua.
Trong 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. Chính vì vậy, nhiều doanh nghiệp đã phát
triển website của mình thành những siêu thị hàng hoá trên Internet, giúp người mua có
thêm nhiều lựa chọn cũng như tìm kiếm thơng tin hay so sánh giá cả. Những website ấy
rất đa dạng lĩnh vực và sản phẩm, và một trong những xu hướng đang phát triển và có
nhu cầu lớn chính là kinh doanh quà lưu niệm.
Nắm bắt nhu cầu đó, Website Luxy Wine được chúng em thực hiện nhằm giải
quyết nhu cầu kinh doanh những sản phẩm lưu niệm ở khắp mọi vùng miền trên đất
nước, tạo cơ hội cho người mua được sở hữu những món quà lưu niệm độc lạ, hiếm thấy
để biến chúng thành những món quà ý nghĩa cho người thân của mình. Bên cạnh đó,
website còn là nơi chia sẻ những trải nghiệm sản phẩm mới lạ được người dùng đăng tải

để chia sẻ với mọi người.
Các cơng việc chính mà website hỗ trợ là: Xem và đặt hàng sản phẩm, xem cái bài
blog, quản lý đơn hàng, quản lý blog, quản lý sản phẩm và quản lý voucher giảm giá của
cửa hàng.

3


MỤC LỤC
LỜI CẢM ƠN .................................................................................................................... 2
LỜI MỞ ĐẦU .................................................................................................................... 3
A.
Tìm hiểu công nghệ ............................................... Error! Bookmark not defined.
1. ReactJS là gì ................................................................................................................. 5
2. Hệ sinh thái của React .................................................................................................. 5
3. Đặc trưng cơ bản của ReactJS...................................................................................... 6
4. Lý do nên chọn reactjs ................................................................................................. 6
5. Tương lai phát triển của ReactJS ................................................................................. 7
B. Sử dụng ReactJS để xây dựng ứng dụng thương mại điện tử .................................. 8
I. Chương 1: Tổng Quan .................................................................................................. 8
1. Thông tin chung ........................................................................................................... 2
1.1. Tên đề tài ............................................................................................................... 8
1.2 Nền tảng ứng dụng .................................................................................................. 8
1.3 Công nghệ ............................................................................................................... 8
1.4 Nhân sự ................................................................................................................... 8
II. Chương 2: Cơ sở lý thuyết ........................................................................................... 8
1. Front end .................................................................................................................... 8
2. Back end .................................................................................................................... 8
3. Database .................................................................................................................... 9
4. Storage ....................................................................................................................... 9

III. Chương 3: Phân tích và thiết kế hệ thống .............................................................. 10
1. Danh sách tính năng ................................................................................................ 10
2. Sơ đồ Use Case ........................................................................................................ 11
3. Sơ đồ liên kết màn hình (Site map) ......................................................................... 37
4. Sơ đồ hoạt động ....................................................................................................... 38
5. Cơ sở dữ liệu ........................................................................................................... 45
6. Kiến trúc hệ thống ................................................................................................... 50
7. Giao diện ................................................................................................................. 53
IV. Chương 4: Tổng kết .................................................................................................. 84
1. Kết quả đạt được...................................................................................................... 84
2. Hạn chế .................................................................................................................... 85
3. Hướng phát triển ...................................................................................................... 85
4. Cách cài đặt ............................................................................................................. 85
5. Bảng phân công công việc....................................................................................... 86

4


A. TÌM HIỂU CƠNG NGHỆ
1. ReactJS là gì

React (Hay ReactJS, React.js) là một thư viện Javascript mã nguồn mở để xây dựng
các thành phần giao diện có thể tái sử dụng. Nó được tạo ra bởi Jordan Walke, một kỹ sư
phần mềm tại Facebook. Người bị ảnh hưởng bởi XHP (Một nền tảng thành phần HTML
cho PHP). React lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm
2011, sau đó được triển khai cho Instagram.com năm 2012. Nó được mở mã nguồn
(open-sourced) tại JSConf US tháng 5 năm 2013.
Mã nguồn của React được mở trên GitHub:
/>Hiện nay, thư viện này nhận được rất nhiều sự quan tâm đến từ cộng đồng. Nó đang
được bảo trì (maintain) bởi Facebook và Instagram, cũng với sự đóng góp của cộng đồng

các lập trình viên giỏi trên Thế giới.
2. Hệ sinh thái của React
React JS thường được mô tả như là một thư viện JavaScript. Đôi khi là cả một
framework JavaScript. Vậy cụ thể nó là gì? Hay là cả hai?
Nhóm chuyên môn ở Skillcrush định nghĩa React JS là một thư viện JavaScript,
không phải một framework.
Sự khác biệt giữa thư viện JavaScript (như React) và các framework JavaScript
(như Angular) là: Các developer sẽ áp dụng code trong thư viện vào một lệnh cụ thể, rồi
yêu cầu nó. Đối với framework, nó tạo một khung sắp xếp trang web hay ứng dụng. Rồi
sau đó cung cấp các khu vực dành riêng cho framework code.
Để dễ hiểu hơn, hãy tưởng tượng code từ thư viện JavaScript là đồ nội thất, trang trí
cho một căn nhà đã được xây. Cịn framework chính là một bản mẫu mà ta dựa vào để
xây dựng căn nhà.
React JS thường bị nhầm là một framework vì hệ sinh thái mạnh mẽ, cùng khả năng
mở rộng lớn. Do đó người ta xem nó như một thư viện JavaScript rất linh hoạt. Nên nhớ,
khi sử dụng React JS để build website hay UI ứng dụng web, ta có thể truy cập vào:
5


Snippet của React code và các thành phần (như các block của React code, dùng để
tạo các phần cụ thể của giao diện người dùng).
Có thể sử dụng JSX để trực tiếp tác động vào DOM.
Một Virtual DOM, giúp cải thiện đáng kể hiệu năng website.
Nhưng trên hết, React JS có mã nguồn mở, nên ai cũng có thể tải xuống và sửa đổi
miễn phí. Do đó, kích thước thư viện React có thể tăng theo cấp số nhân với vơ vàn các
tiện ích, add-on khác nhau.
3. Đặc trưng cơ bản của ReactJS
Nếu như trước kia muốn thay đổi một thành phần nào đó trên web địi hỏi chúng ta
phải thực hiện thao tác với DOM. Tuy nhiên với ReactJS được phát triển cơng nghệ
Virtual DOM thì vấn đề được giải quyết tốt. Virtual DOM là công nghệ khi sử dụng giúp

ứng dụng có khả năng hoạt động ổn định và mượt mà ngay cả khi cần thay đổi thành
phần của website liên tục với một trang web lớn, có nhiều thành phần phức tạp.
Đối với ReactJS còn sử dụng một dạng cú pháp mở rộng dành riêng cho Javascript
sở hữu tên gọi là JSM. Nhờ có JSM thì thay bằng việc phải viết cú pháp cho Javascript vô
cùng phức tạp thì lúc này cú pháp sẽ trở nên gọn gàng, đơn giản hơn rất nhiều. Nó giúp
cơng việc phát triển web của mỗi chúng ta được thực hiện thuận lợi, hiệu quả với độ
chính xác cao hơn.
4. Lý do nên chọn reactjs
Dễ dàng để học
Từ những đánh giá, nhận xét của cộng đồng có thể thấy ReactJS khá dễ dàng để tìm
hiểu, tiếp cận và học tập. Với nguồn tài liệu phong phú, đầy đủ cùng những hướng dẫn
chi tiết thì làm quen, hay học thành thạo là điều mà mỗi chúng ta có thể đạt được khi thực
sự đam mê, yêu thích và dành thời gian để nghiên cứu.
Từ tài liệu được cung cấp thì tìm hiểu, thực hành theo khơng q khó khăn. Trong
điều kiện đã có sẵn nền tảng về Javascript thì việc bắt đầu có thể thực hiện chỉ sau vài
ngày ngắn ngủi tìm hiểu và nắm bắt các kiến thức liên quan.
Tái sử dụng nhiều thành phần

6


Đặc trưng nổi bật của ReactJS khi dùng chính là việc tập trung vào giải quyết tầng
view nên thành phần giúp tạo ra ứng dụng chính là component. Đồng thời mỗi chức năng
của ReactJS sẽ được phân chia ra thành từng component khác nhau để sử dụng hiệu quả.
chính điều này tạo điều kiện cho chúng ta có thể tái sử dụng, cũng tránh được tình trạng
lặp code có khả năng xuất hiện.
Nhiều công cụ hỗ trợ
Một ưu điểm nổi bật, một lợi ích khơng thể bỏ qua khi sử dụng ReactJS chính là
việc nó có rất nhiều cơng cụ hỗ trợ khác nhau. Từ công cụ kiểm tra tối ưu ứng dụng, hay
công cụ debug,… khi được sử dụng hợp lý giúp quá trình phát triển web, hay ứng dụng

của chúng ta được thực hiện đạt kết quả cao, nhanh chóng và đơn giản hơn.
Cợng đồng người dùng đơng đảo
Tốc độ phát triển mạnh mẽ, được hoàn thiện cao cùng với độ phổ biến được khẳng
định thì ReactJS giúp người dùng dễ dàng tìm kiếm được sự hỗ trợ khi cần thiết. Đồng
thời việc tìm kiếm thơng tin để giải đáp cho những thắc mắc của người dùng cũng trở nên
đơn giản hơn rất nhiều. Sở hữu cộng đồng phát triển đơng đảo, mạnh mẽ với thư viện
được hồn thiện tốt, tối ưu tối đa để sử dụng sẽ hỗ trợ cho người dùng khi ứng dụng
ReactJS tốt hơn.
5. Tương lai phát triển của ReactJS
Facebook và nhóm phát triển ReactJS đã thể hiện những cam kết nâng cao hiệu quả
hơn nữa cho ReactJS. Đây là điều rất quan trọng khi các đối thủ như VueJS đang thể hiện
tham vọng bám đuổi sát sao. Và những mong đợi dưới đây hy vọng sẽ được ReactJS cải
tiến ở các phiên bản tiếp theo:
Cộng đồng ReactJS trông đợi phương pháp render mới. Ví dụ, ReactJS team có thể
xây dựng thêm cú pháp phân đoạn vào JSX mà không cần key.
Các Developer cũng trơng đợi phát triển quy trình xử lý lỗi. Trước đây, khi lỗi
runtime xuất hiện trong lúc render, ReactJS xử lý khá vụng về. Developer phải refresh
trang như thông thường. Ở phiên bản hiện tại, các lỗi vẫn sẽ đưa vô các component hoặc
lifecycle method. Mặc dù điều này giúp ngăn render các data lỗi, nhưng không phải là ý
tưởng tốt cho UX.
7


Tăng cường server-side rendering. Mặc dù ReactJS phiên bản mới nhất đã tăng
cường điều này, có cải tiến về tốc độ và lý tưởng cho streaming, nhưng vẫn cịn mang
tính quảng bá là chủ yếu, chưa mang lại hiệu quả thực sự.

B. SỬ DỤNG REACTJS ĐỂ XÂY DỰNG ỨNG DỤNG THƯƠNG MẠI ĐIỆN
TỬ LUXY WINE
I. Chương 1: Tổng Quan

1. Tên đề tài
Website bán rượu trực tuyến Luxy Wine
2. Nền tảng ứng dụng
Web
3. Công nghệ
Front-end: ReactJS
Back-end: NodeJS & ExpressJS
Database: Mongodb
Storage: Firebase storage
4. Nhân sự
STT Họ và tên
1
Dương Hiển Thế
2
Nguyễn Tấn Thành

MSSV
19522252
19522239

II. Chương 2: Cơ sở lý thuyết
1. Front end
ReactJS: Như đã giới thiệu trước đó, ReactJS là một thư viện có rất nhiều ưu điểm cho
việc lập trình ứng dụng Web
2. Back end
• NodeJS:
NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8
Engine. Nó được xây dựng để chạy trên server.

8

Javascript là một ngơn ngữ hướng sự kiện, do đó bất cứ điều gì xảy ra trên
server đều tạo ra một sự kiện non-blocking, do vậy nên 1 website sử dụng
NodeJS có thể đáp ứng được việc truy cập cùng lúc một lượng user cực kì lớn.
• ExpressJS
Expressjs hay cịn được viết là Express js, Express.js. Đây là một framework mã
nguồn mở miễn phí cho Node.js. Express.js được sử dụng trong thiết kế và xây
dựng các ứng dụng web một cách đơn giản và nhanh chóng.
Vì Express js chỉ u cầu ngơn ngữ lập trình Javascript nên việc xây dựng các
ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát
triển. Expressjs cũng là một khn khổ của Node.js do đó hầu hết các mã code
đã được viết sẵn cho các lập trình viên có thể làm việc.
Nhờ có Expressjs mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web,
nhiều web hoặc kết hợp. Do có dung lượng khá nhẹ, Expressjs giúp cho việc tổ
chức các ứng dụng web thành một kiến trúc MVC có tổ chức hơn. Để có thể sử
dụng được mã nguồn này, chúng ta cần phải biết về Javascript và HTML.
Expressjs cũng là một phần của công nghệ giúp quản lý các ứng dụng web một
cách dễ dàng hơn hay còn được gọi là ngăn xếp phần mềm MEAN. Nhờ có thư
viện Javascript của Express js đã giúp cho các nhà lập trình xây dựng nên các
ứng dụng web hiệu quả và nhanh chóng hơn. Expressjs cũng được sử dụng để
nâng cao các chức năng của Node.js.
3. Database
MongoDB: là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở đa nền tảng
viết bằng C++. Bản ghi trong MongoDB được lưu trữ dạng một dữ liệu văn bản
(Document), là một cấu trúc dữ liệu bao gồm các cặp giá trị và trường tương tự
như các đối tượng JSON.
4. Storage
Firebase Storage là dịch vụ được xây dựng cho mục đích lưu trữ và quản lý các
nội dung mà người dùng ứng dụng tạo ra như ảnh, videos hay dữ liệu dạng file.

9


Firebase Storage cung cấp các API cho việc uploads và download các file từ
app của bạn một cách bảo mật và bạn không cần quan tâm đến chất lượng
đường truyền mạng.
Firebase Storage được xây dựng trên nền tảng Google Cloud Platform nên có
nhiều lợi thế.

III. Chương 3: Phân tích và thiết kế hệ thống
1. Danh sách tính năng
Stt Tên tính năng
1

Đăng nhập

2

Đăng ký

3

Đổi mật khẩu

4

Quên mật khẩu

5

Đăng xuất

6

Xem thông tin cá nhân

7

Chỉnh sửa thông tin cá nhân

8

Xem chi tiết đơn hàng

9

Xem lịch sử mua hàng

10

Xem sản phẩm rượu

11

Xem sản phẩm đặc biệt

12

Xem sản phẩm phụ kiện

13

Xem tin tức

14

Xem chi tiết tin tức

15

Xem chi tiết sản phẩm

16

Xem giỏ hàng

17

Thêm sản phẩm vào giỏ hàng

18

Sửa sản phẩm trong gió hàng

19

Xóa sản phẩm trong giỏ hàng

20

Tiến hành đặt hàng

Use case
Xác thực người dùng

Quản lý thông tin cá nhân

Xem sản phẩm, tin tức

Quản lý giỏ hàng

Mua hàng

10


21

Thanh tốn

22

Thêm sản phẩm

23

Sửa sản phẩm

24

Xóa sản phẩm

25

Thêm tài khoản

26

Sửa tài khoản

27

Xóa tài khoản

28

Thêm đơn hàng

29

Sửa đơn hàng

30

Xóa đơn hàng

31

Thêm tin tức

32

Sửa tin tức

33

Xóa tin tức

34

Thêm voucher

35

Sửa voucher

36

Xóa voucher

37

Sửa banner

Quản lý banner

38

Thống kê

Thống kê

Quản lý sản phẩm

Quản lý tài khoản

Quản lý đơn hàng

Quản lý tin tức

Quản lý khuyến mãi

2. Sơ đồ Use Case
2.1 Danh sách các actor:
STT

Ý nghĩa/Ghi chú

Tên Actor

1

Khách

Khách hàng, người dùng chưa đăng ký tài khoản

2

Người dùng

Khách hàng, người dùng đã đăng ký tài khoản

3

Quản trị viên

Người quản trị, quản lý trang web, quản lý cửa hàng

11


12


2.2 Usecase xác thực người dùng
2.2.1 Usecase đăng ký tài khoản

13


Đăng ký tài khoản

Tên yêu cầu
Mô tả

Đăng ký tài khoản người dùng

Tác nhân

Khách

Điều kiện trước

Chưa đăng nhập

Điều kiện sau

Trạng thái hệ thống sau khi đăng kí tài khoản

Ngoại lệ

Khơng có
1. Truy cập vào đường dẫn /dang-ky

Luồng xử lý chính

2. Người dùng điền các thông tin: email, mật khẩu, xác
nhận mật khẩu, họ và tên, giới tính, ngày sinh.
3. Hệ thống xác nhận các trường dữ liệu hợp lệ
4. Hệ thống thêm 1 document vào database
5. Ứng dụng thông báo đăng ký thành công, chuyển
người dùng đến trang đăng nhập
Luồng xử lý phụ

I.

Thơng tin đăng ký khơng chính xác: Tài khoản đã tồn tại
14

1. Hệ thống thông báo tài khoản đã tồn tại
2. Hệ thống yêu cầu nhập lại thông tin đăng ký
2.2.2 Usecase đăng nhập

Đăng nhập

Tên yêu cầu
Mô tả

Đăng nhập tài khoản để sử dụng

Tác nhân

Người dùng, Quản trị viên

Điều kiện trước

Chưa đăng nhập

Điều kiện sau

Đăng nhập thành cơng

Ngoại lệ

Khơng có

Luồng xử lý chính

1. Truy cập vào đường dẫn /dang-nhap
2. Người dùng điền các thông tin: email, mật khẩu
3. Hệ thống xác nhận có trường dữ liệu hợp lệ
4. Thơng báo đăng nhập thành công, chuyển đến
trang chủ

Luồng xử lý phụ

1. Hệ thống thơng báo nếu có lỗi

2.2.3 Usecase qn mật khẩu

15


Tên yêu cầu
Mô tả

Quên mật khẩu
Quên mật khẩu để lấy lại mật khẩu bằng cách xác nhận mã bí
mật được gửi tới email đăng ký tài khoản ban đầu

Tác nhân

Người dùng, Quản trị viên

Điều kiện trước

Chưa đăng nhập

Điều kiện sau

Đặt lại mật khẩu người dùng

Ngoại lệ

Khơng có
1. Truy cập vào đường dẫn /quen-mat-khau

Luồng xử lý chính

2. Người dùng nhập email
3. Nhấn nút gửi mã
4. Hệ thống gửi email chứa mã xác nhận đến cho
người dùng
5. Người dùng xác nhận mã trong màn hình tiếp theo
6. Hệ thống xác nhận mật mã
7. Người dùng nhập mật khẩu và xác nhận mật khẩu
mới
Luồng xử lý phụ

I.

Mã bí mật khơng chính xác q 3 lần
16


1. Hệ thống từ chối việc đặt lại mật khẩu
2.2.4 Đổi mật khẩu

Đăng nhập

Tên yêu cầu
Mô tả

Người dùng đổi mật khẩu theo nhu cầu sử dụng

Tác nhân

Người dùng, Quản trị viên

Điều kiện trước

Đã đăng nhập

Điều kiện sau

Thông tin mật khẩu trong database được thay đổi

Ngoại lệ

Khơng có

Luồng xử lý chính

1. Người dùng đã đăng nhập vào hệ thống
2. Chọn vào ảnh đại diện trên thanh header
3. Chọn đổi mật khẩu
4. Điền mật khẩu hiện tại, mật khẩu mới, xác nhận mật
khẩu mới

5. Ấn xác nhận
17


6. Ứng dụng thông báo đổi mật khẩu thành công
Luồng xử lý phụ

Hệ thống thơng báo nếu có lỗi

2.3 Usecase quản lý thông tin cá nhân

Tên yêu cầu
Mô tả

Quản lý thông tin cá nhân
Người dùng quản lý thông cá nhân, xem, sửa thông tin cá
nhân, lịch sử mua hàng, chi tiết đơn hàng

Tác nhân

Người dùng, Quản trị viên

Điều kiện trước

Đã đăng nhập

Điều kiện sau

Thực hiện thành công hành động

Ngoại lệ

Không có

18


Luồng xử lý chính

I.

Xem thơng tin cá nhân, lịch sử mua hàng
1. Chọn vào ảnh đại diện trên thanh header
2. Chọn xem thông tin tài khoản
3. Hệ thống trả về dữ liệu thông tin tài khoản

II.

Chỉnh sửa thông tin cá nhân
1. Chọn vào ảnh đại diện trên thanh header
2. Chọn xem thông tin tài khoản
3. Hệ thống trả về dữ liệu thông tin tài khoản
4. Người dùng thay đổi thông tin ở trong các
khung input
5. Người dùng ấn cập nhật
6. Hệ thống kiểm tra dữ liệu, thực hiện thay đổi
csdl nếu dữ liệu hợp lệ

III.

Xem chi tiết đơn hàng
1. Chọn vào ảnh đại diện trên thanh header
2. Chọn xem thông tin tài khoản
3. Hệ thống trả về dữ liệu thông tin tài khoản
4. Người dùng ấn vào 1 dòng trong bảng lịch sử
mua hàng
5. Hệ thống trả về dữ liệu chi tiết của đơn hàng
vừa chọn

Luồng xử lý phụ

Hệ thống thơng báo nếu có lỗi

19


2.4 Xem sản phẩm, tin tức

Tên yêu cầu
Mô tả

Xem sản phẩm, tin tức
Người dùng truy cập vào các trang Rượu, combo khuyến
mãi, phụ kiện, tin tức để xem các thông tin những sản phẩm,
tin tức. Chọn vào 1 sản phẩm/tin tức để xem thơng tin chi tiết
của nó

Tác nhân

Khách, Người dùng, Quản trị viên

Điều kiện trước

Khống có

Điều kiện sau

Xem được thơng tin sản phẩm/ tin tức

Ngoại lệ

Khơng có

Luồng xử lý chính

I.

Xem các sản phẩm/tin tức có trong cửa hàng
1. Vào giao diện chính của ứng dụng
2. Chọn vào các tab Rượu/ Combo sản phẩm đặc
biệt/ Phụ kiện/ Tin tức để xem danh sách các
sản phẩm
3. Hệ thống trả về danh sách

II.

Lọc sản phẩm rượu/ combo khuyến mãi

20

1. Truy cập vào giao diện của tab rượu/ combo
khuyến mãi
2. Chọn các bộ lọc để lọc ra các sản phẩm cần tìm
3. Hệ thống trả về các sản phẩm như đã lọc
III.

Xem chi tiết sản phẩm/ tin tức
1. Truy cập vào các trang danh sách sản phẩm/tin
tức
2. Chọn vào 1 sản phẩm/ tin tức
3. Hệ thống trả về dữ liệu chi tiết của các sản
phẩm/ tin tức.

Luồng xử lý phụ

Hệ thống thông báo nếu xảy ra lỗi

2.5 Quản lý giỏ hàng

Tên yêu cầu
Mô tả

Quản lý giỏ hàng
Người dùng điều chỉnh các sản phẩm có trong giỏ hàng trước
khi thực hiện đặt hàng

Tác nhân

Khách, Người dùng, Quản trị viên

21


Điều kiện trước

Khơng có

Điều kiện sau

Điều chỉnh giỏ hàng thành cơng

Ngoại lệ

Khơng có

Luồng xử lý chính

I.

Thêm sản phẩm vào giỏ hàng từ màn hình danh
sách sản phẩm
1. Người dùng truy cập vào trang danh sách các
sản phẩm rượu/ combo khuyến mãi/ phụ kiện
2. Hệ thống trả về danh sách các sản phẩm
3. Người dùng di chuột lên thẻ sản phẩm
4. Người dùng ấn vào nút biểu tượng giỏ hàng
5. Hệ thống thực hiện lưu thông tin giỏ hàng vào
csdl nếu đã đăng nhập, nếu chưa đăng nhập
thực hiện lưu vào cookies

II.

Thêm sản phẩm vào giỏ hàng từ màn hình chi tiết
sản phẩm
1. Người dùng truy cập vào trang chi tiết sản
phẩm rượu/combo khuyến mãi/ phụ kiện
2. Hệ thống trả về thông tin chi tiết sản phẩm
3. Người dùng ấn chọn số lượng, sau đó ấn vào
nút thêm vào giỏ hàng
4. Hệ thống thực hiện lưu thông tin giỏ hàng vào
csdl nếu đã đăng nhập, nếu chưa đăng nhập
thực hiện lưu vào cookies

III.

Xem giỏ hàng
1. Người dùng chọn vào icon giỏ hàng phía trên
thanh header
2. Hệ thống trả về danh sách sản phẩm trong csdl
và cookies

22


IV.

Chỉnh sửa/ Xóa sản phẩm khỏi giỏ hàng
1. Tại màn hình giỏ hàng, người dùng thay đổi
thơng tin số lượng sản phẩm/ xóa sản phẩm
2. Hệ thống ghi nhận thay đổi vào csdl và cookies

Luồng xử lý phụ

Hệ thống thông báo nếu xảy ra lỗi

2.6 Mua hàng

Tên yêu cầu
Mô tả

Mua hàng
Người dùng thực hiện đặt hàng, tiến hành các bước xác nhận
thông tin để mua sản phẩm

Tác nhân

Khách, Người dùng, Quản trị viên

Điều kiện trước

Đã đăng nhập

23


Điều kiện sau

Thực hiện thành cơng hành động

Ngoại lệ

Khơng có

Luồng xử lý chính

I.

Tiến hành đặt hàng từ giỏ hàng
1. Tại giỏ hàng, ấn vào nút tiến hành đặt hàng
2. Hệ thống yêu cầu người dùng nhập thông tin
cho đơn hàng mới gồm tồn bộ sản phẩm có
trong giỏ hàng
3. Người dùng nhập vào thông tin giao hàng
4. Người dùng chọn hình thức thanh tốn
5. Ấn nút đặt hàng
6. Hệ thống lưu lại 1 document về đơn hàng vừa
đặt

II.

Tiến hành đặt hàng từ trang chi tiết sản phẩm
1. Tại trang chi tiết sản phẩm, ấn mua ngay
2. Hệ thống yêu cầu người dùng nhập thông tin
cho đơn hàng mới cho sản phẩm vừa chọn
3. Người dùng nhập thông tin giao hàng
4. Người dùng chọn hình thức thanh tốn
5. Ấn nút đặt hàng
6. Hệ thống lưu lại 1 document về đơn hàng vừa
đặt

III.

Thanh toán đơn hàng bằng momo
Tại trang thực hiện đặt hàng, người dùng chọn vào
thanh toàn bằng momo
Hệ thống chuyển hướng sang màn hình chứa mã
QR momo để quét mã thanh toán
Người dùng thực hiện quét mã

24


Hệ thống lưu thêm đơn hàng với trạng thái đã xác
nhận, đã thanh toán
IV.

Áp dụng khuyến mãi cho đơn hàng
1. Tại trang đặt hàng, người

dùng nhập mã

khuyến mãi và ấn xác nhận
2. Hệ thống kiểm tra mã giảm giá, kiểm tra điều
kiện sử dụng mã.
Luồng xử lý phụ

Hệ thống thông báo nếu có lỗi

2.7 Quản lý sản phẩm

Tên u cầu
Mơ tả

Quản lý sản phẩm
Quản trị viên thực hiện các thao tác trên sản phẩm, thay đổi,
thêm, xóa.

Tác nhân

Quản trị viên

Điều kiện trước

Đã đăng nhập, truy cập vào giao diện quản lý với đường dẫn
/quan-ly

Điều kiện sau

Thực hiện thành công hành động

25