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

ĐỒ ÁN 1

ĐỀ TÀI: WEBSITE BÁN VÀ CUNG CẤP CÁC DỊCH VỤ
VỀ THÚ CƯNG – TÍCH HỢP CHATBOT
SE121.M21

Giảng viên hướng dẫn:
Cơ HUỲNH HỒ THỊ MỘNG TRINH
Sinh viên thực hiện:
NGUYỄN CAO CƯỜNG –MSSV: 19521298
ĐINH VIỆT HÀO–MSSV: 19521475
Thành phố Hồ Chí Minh, tháng 6 năm 2022


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

ĐỒ ÁN 1

ĐỀ TÀI: WEBSITE BÁN VÀ CUNG CẤP CÁC DỊCH VỤ
VỀ THÚ CƯNG – TÍCH HỢP CHATBOT
SE121.M21

Giảng viên hướng dẫn:

Cơ HUỲNH HỒ THỊ MỘNG TRINH
Sinh viên thực hiện:
NGUYỄN CAO CƯỜNG –MSSV: 19521298
ĐINH VIỆT HÀO–MSSV: 19521475

Thành phố Hồ Chí Minh, tháng 6 năm 2022


Lời cảm ơn
Đồ án 1 là môn đầu tiên đặt tiền đề cho việc xây dựng khóa luận tốt nghiệp. Đây là
mơn học có nhiều thử thách, địi hỏi người học phải dành nhiều thời gian, công sức để
nghiên cứu, tìm tịi và xây dựng. Đồng thời, đây cũng là cơ hội để sinh viên thực hành
những gì đã học trong suốt những năm đại học và học hỏi thêm nhiều kiến thức, kinh
nghiệm và kỹ năng mới phục vụ cho công việc sau này. Cho nên đây được xem là thử thách
và cũng là cơ hội để sinh viên được rèn luyện, hoàn thiện bản thân bằng những kĩ năng tích
lũy được trong suốt q trình làm đồ án.
Để có thể đi đến đoạn cuối của hành trình là cả sự nỗ lực, cố gắng và kiên trì. Đồng
hành cùng sinh viên vượt qua thử thách này là sự có mặt và giúp đỡ của những người thầy
tận tâm trong cơng việc.
Nhóm xin chân thành cảm ơn cơ Huỳnh Hồ Thị Mộng Trinh đã tận tình giúp đỡ
nhóm em hồn thành đồ án 1 của mình. Chính nhờ những sự góp ý, động viên của cơ đã
giúp đồ án của nhóm được hồn thiện và chun nghiệp nhiều hơn. Bên cạnh đó, nhóm đã
học hỏi được rất nhiều kiến thức, kinh nghiệm và bài học thú vị trong quá trình làm khố
luận, đó sẽ là những hành trang hữu ích cho nhóm sau này.
Nhóm cũng xin chân thành cảm ơn các anh chị, bạn bè đã giúp đỡ nhóm trong quá
trình thực hiện đồ án. Nhờ mọi người mà nhóm có nhiều góc nhìn khác nhau về đề tài đang
làm, từ đó giúp hồn thiện đồ án của nhóm.
Một lần nữa, nhóm xin chân thành cảm ơn cơ và mọi người.



NHẬN XÉT
(Của giáo viên hướng dẫn)
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………



MỤC LỤC
Lời cảm ơn

3

CHƯƠNG I: GIỚI THIỆU CHUNG
1. Đề tài
2. Lý do chọn đề tài
3. Tóm tắt đề tài
4. Mục tiêu đề tài
5. Phương pháp nghiên cứu
6. Ý nghĩa và hướng của đề tài
6.1. Về mặt tài liệu
6.2. Về mặt sản phẩm

1

CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN
1. ReactJS
1.1. Giới thiệu
1.2. Lý do sử dụng
2. NestJS
2.1. Giới thiệu

3

CHƯƠNG III: PHÂN TÍCH HỆ THỐNG
1. Yêu cầu phần mềm
1.1. Yêu cầu nghiệp vụ
1.2 Yêu cầu chất lượng

2. Use-case
2.1 Sơ đồ Use-case mức tổng quát
2.2 Danh sách các actor
2.3 Danh sách Use-case
2.4 Đặc tả Use-case
2.4.1 Đặc tả Use-case “Tạo tài khoản khách hàng”
2.4.2 Đặc tả Use-case “Đăng nhập khách hàng”
2.4.3 Đặc tả Use-case “Đăng nhập admin”
2.4.4 Đặc tả Use-case “Thay đổi thông tin”
2.4.5 Đặc tả Use-case “Tạo thú cưng”
2.4.6 Đặc tả Use-case “Sửa thú cưng”
2.4.8 Đặc tả Use-case “Tạo sản phẩm”
2.4.9 Đặc tả Use-case “Sửa sản phẩm”
2.4.11 Đặc tả Use-case “Tạo dịch vụ”

6

1
1
1
2
2
2
2
2

3
3
4
4

4

6
6
6
7
7
8
8
9
9
10
12
12
14
15
16
17
18


2.4.12 Đặc tả Use-case “Sửa dịch vụ”
2.4.14 Đặc tả Use-case “Đặt lịch”
2.4.15 Đặc tả Use-case “Xem thông tin đơn hàng”
2.4.16 Đặc tả Use-case “Chỉnh sửa đơn hàng”
2.4.17 Đặc tả Use-case “Đặt đơn hàng”
2.4.18 Đặc tả Use-case “Tra cứu đơn hàng”
2.4.19 Đặc tả Use-case “ChatBot”
2.4.20 Đặc tả Use-case “Quản lý nhân viên”
2.4.21 Đặc tả Use-case “Quản lý khách hàng”

2.5. Activity Diagram:
2.5.1 Đăng nhập
2.5.2 Đăng ký
2.5.3 Đăng xuất
2.5.4 Chỉnh sửa hồ sơ
2.5.5 Thú cưng
2.5.6 Sản phẩm
2.5.7 Dịch vụ
2.5.8 ChatBot
CHƯƠNG IV: THIẾT KẾ DỮ LIỆU
1. Sơ đồ logic hoàn chỉnh
2. Danh sách các bảng dữ liệu trong sơ đồ logic
3. Mô tả từng bảng dữ liệu
3.1 Bảng “address”:
3.2 Bảng “admin_user”:
3.3 Bảng “breed”
3.4 Bảng “cart”:
3.5 Bảng “category”:
3.6 Bảng “customer”:
3.7 Bảng “employee”:
3.8 Bảng “employee_to_service”:
3.9 Bảng “order”:
3.10 Bảng “pet”:
3.11 Bảng “pet_cart_item”:
3.12 Bảng “pet_order_item”:
3.13 Bảng “pet_photo”:
3.14 Bảng “pet_type”:
3.15 Bảng “product”:

19

20
21
22
23
24
24
25
26
27
27
27
28
29
30
30
32
33
34
34
34
36
36
36
37
37
37
38
38
39
39

40
40
41
41
41
42


3.16 Bảng “product_cart_item”:
3.17 Bảng “product_order_item”:
3.18 Bảng “product_photo”:
3.19 Bảng “reservation”:
3.20 Bảng “service”:
3.21 Bảng “service_order_item”:
3.22 Bảng “service_photo”:
3.23 Bảng “sub_category”:

42

CHƯƠNG V: THIẾT KẾ GIAO DIỆN
1. Sơ đồ liên kết màn hình
2.Danh sách màn hình
3.Mơ tả các màn hình
3.1 Màn hình đăng nhập Admin
3.2 Màn hình tổng quan Admin
3.3 Màn hình thú cưng Admin
3.4 Màn hình thêm thú cưng
3.5 Màn hình loại thú cưng Admin
3.6 Màn hình thêm loại thú cưng
3.7 Màn hình sửa loại thú cưng

3.8 Màn hình giống thú cưng Admin
3.9 Màn hình thêm giống
3.10 Màn hình sửa giống
3.11 Màn hình chi tiết thú cưng Admin
3.12 Màn hình sửa thú cưng
3.13 Màn hình sản phẩm Admin
3.14 Màn hình thêm sản phẩm
3.15 Màn hình danh mục Admin
3.16 Màn hình thêm danh mục
3.17 Màn hình sửa danh mục
3.18 Màn hình danh mục phụ Admin
3.19 Màn hình thêm danh mục phụ
3.20 Màn hình sửa danh mục phụ
3.21 Màn hình sản phẩm chi tiết Admin
3.22 Màn hình sửa sản phẩm
3.23 Màn hình dịch vụ Admin
3.24 Màn hình thêm dịch vụ
3.25 Màn hình đặt lịch Admin

46

43
43
43
44
44
45
45

46

46
52
52
53
53
55
56
57
58
59
60
61
61
62
62
63
64
65
66
66
67
68
69
69
70
71
72


3.26 Màn hình chi tiết dịch vụ

3.27 Màn hình sửa dịch vụ
3.28 Màn hình đơn hàng
3.29 Màn hình chi tiết đơn hàng
3.30 Màn hình khách hàng
3.31 Màn hình thêm khách hàng
3.32 Màn hình sửa khách hàng
3.33 Màn hình vơ hiệu hóa khách hàng
3.34 Màn hình kích hoạt khách hàng
3.35 Màn hình nhân viên
3.36 Màn hình thêm nhân viên
3.37 Màn hình sửa nhân viên
3.38 Màn hình người dùng
3.39 Màn hình thêm người dùng
3.40 Màn hình sửa người dùng
3.41 Màn hình kích hoạt người dùng
3.42 Màn hình vơ hiệu người dùng
3.43 Màn hình thay đổi thơng tin cá nhân
3.44 Màn hình thay đổi mật khẩu
3.45 Màn hình trang chủ khách hàng
3.46 Màn hình thú cưng khách hàng
3.47 Màn hình chi tiết thú cưng khách hàng
3.48 Màn hình sản phẩm khách hàng
3.49 Màn hình chi tiết sản phẩm khách hàng
3.50 Màn hình dịch vụ khách hàng
3.51 Màn hình đặt dịch vụ khách hàng
3.52 Màn hình liên hệ khách hàng
3.53 Màn hình 404 khách hàng
3.54 Màn hình giỏ hàng khách hàng
3.55 Màn hình đơn hàng khách hàng
3.56 Màn hình danh sách đơn hàng khách hàng

3.57 Màn hình đăng nhập khách hàng
3.58 Màn hình đăng ký khách hàng
CHƯƠNG VI: TỔNG KẾT
1. Độ hoàn thiện chức năng
2. Kết quả đạt được và hướng phát triển
2.1. Kết quả đạt được

72
73
73
74
74
75
76
77
77
78
79
80
81
82
83
84
84
85
86
87
90
91
92

92
93
94
95
96
96
97
98
98
100
105
105
106
106


2.2. Hướng phát triển

107

BẢNG PHÂN CÔNG CÔNG VIỆC

108

TÀI LIỆU THAM KHẢO

109

Danh mục hình ảnh
Hình 1: Giới thiệu về React

Hình 2: Giới thiệu về NestJs
Hình 3: Sơ đồ usecase mức tổng quát
Hình 4: Activity diagram đăng nhập
Hình 5: Activity diagram đăng ký
Hình 6: Activity diagram đăng xuất
Hình 7: Activity diagram chỉnh sửa hồ sơ
Hình 8: Activity diagram thú cưng
Hình 9: Activity diagram sản phẩm
Hình 10: Activity diagram dịch vụ
Hình 11: Activity diagram Chatbot
Hình 12: Activity diagram sơ đồ dữ liệu tổng quát
Hình 13:Sơ đồ liên kết màn hình tổng quát
Hình 14: Màn hình đăng nhập Admin
Hình 15:Màn hình tổng quan Admin
Hình 16:Màn hình thú cưng Admin
Hình 17: Màn hình thêm thú cưng
Hình 18: Màn hình loại thú cưng Admin
Hình 19: Màn hình thêm loại thú cưng
Hình 20: Màn hình sửa loại thú cưng
Hình 21: Màn hình giống thú cưng Admin
Hình 22: Màn hình thêm giống
Hình 23: Màn hình sửa giống
Hình 24: Màn hình chi tiết thú cưng Admin
Hình 25: Màn hình sửa thú cưng
Hình 26: Màn hình sản phẩm Admin
Hình 27: Màn hình thêm sản phẩm
Hình 28: Màn hình danh mục Admin
Hình 29: Màn hình thêm danh mục

3

5
8
26
27
27
28
29
30
31
32
32
44
49
50
50
52
53
54
55
56
57
58
58
59
59
60
61
61



Hình 30: Màn hình sửa danh mục
Hình 31: Màn hình danh mục phụ Admin
Hình 32: Màn hình thêm danh mục phụ
Hình 33: Màn hình sửa danh mục phụ
Hình 34 Màn hình sản phẩm chi tiết Admin
Hình 35 Màn hình sửa sản phẩm
Hình 36: Màn hình dịch vụ Admin
Hình 37 Màn hình thêm dịch vụ
Hình 38: Màn hình đặt lịch Admin
Hình 39: Màn hình chi tiết dịch vụ
Hình 40:Màn hình sửa dịch vụ
Hình 41 Màn hình đơn hàng
Hình 42 Màn hình chi tiết đơn hàng
Hình 43 Màn hình khách hàng
Hình 44 Màn hình thêm khách hàng
Hình 45 Màn hình sửa khách hàng
Hình 46 Màn hình vơ hiệu hóa khách hàng
Hình 47 Màn hình kích hoạt khách hàng
Hình 48 Màn hình nhân viên
Hình 49 Màn hình thêm nhân viên
Hình 50 Màn hình sửa nhân viên
Hình 51 Màn hình người dùng
Hình 52 Màn hình thêm người dùng
Hình 53 Màn hình sửa người dùng
Hình 54 Màn hình kích hoạt người dùng
Hình 55 Màn hình vơ hiệu người dùng
Hình 56 Màn hình thay đổi thơng tin cá nhân
Hình 57 Màn hình thay đổi mật khẩu
Hình 58 Màn hình trang chủ khách hàng
Hình 59 Màn hình thú cưng khách hàng

Hình 60 Màn hình chi tiết thú cưng khách hàng
Hình 61 Màn hình sản phẩm khách hàng
Hình 62 Màn hình chi tiết sản phẩm khách hàng
Hình 63 Màn hình dịch vụ khách hàng
Hình 64 Màn hình đặt dịch vụ khách hàng
Hình 65 Màn hình liên hệ khách hàng
Hình 66 Màn hình 404 khách hàng

62
63
64
65
66
66
67
68
68
69
70
70
71
71
72
73
74
74
75
76
77
78

79
80
81
81
82
83
84
87
88
88
89
90
90
91
92


Hình 67 Màn hình giỏ hàng khách hàng
Hình 68 Màn hình đơn hàng khách hàng
Hình 69 Màn hình danh sách đơn hàng khách hàng
Hình 70 Màn hình đăng nhập khách hàng
Hình 71 Màn hình đăng ký khách hàng

92
93
94
94
96

Danh mục bảng

Bảng 1: Danh sách các actor
Bảng 2: Danh sách use-case
Bảng 3: Đặc tả use-case tạo tài khoản
Bảng 4: Đặc tả use-case đăng nhập khách hàng
Bảng 5: Đặc tả use-case đăng nhập admin
Bảng 6: Đặc tả use-case thay đổi thông tin
Bảng 7: Đặc tả use-case tạo thú cưng
Bảng 8: Đặc tả use-case sửa thú cưng
Bảng 9: Đặc tả use-case tạo sản phẩm
Bảng 10: Đặc tả use-case sửa sản phẩm
Bảng 12: Đặc tả use-case tạo dịch vụ
Bảng 14: Đặc tả use-case sửa dịch vụ
Bảng 15: Đặc tả use-case đặt lịch
Bảng 16: Đặc tả use-case xem thông tin đơn hàng
Bảng 17: Đặc tả use-case chỉ sửa đơn hàng
Bảng 18: Đặc tả use-case đặt đơn hàng
Bảng 19: Đặc tả use-case tra cứu đơn hàng
Bảng 20: Đặc tả use-case Chatbot
Bảng 21: Đặc tả use-case quản lý nhân viên
Bảng 22: Đặc tả use-case quản lý khách hàng
Bảng 23: Danh sách bảng dữ liệu tổng quất
Bảng 24: Bảng dữ liệu address
Bảng 25: Bảng dữ liệu admin_user
Bảng 26: Bảng dữ liệu breed
Bảng 27: Bảng dữ liệu cart
Bảng 28: Bảng dữ liệu category
Bảng 29: Bảng dữ liệu customer
Bảng 30: Bảng dữ liệu employee
Bảng 31: Bảng dữ liệu employee_to_service
Bảng 31: Bảng dữ liệu order


8
9
10
11
12
13
14
15
16
17
18
19
19
20
22
22
23
24
24
25
34
34
35
35
36
36
36
37
37

38


Bảng 31: Bảng dữ liệu pet
Bảng 32: Bảng dữ liệu pet_cart_item
Bảng 33: Bảng dữ liệu pet_order_item
Bảng 34: Bảng dữ liệu pet_photo
Bảng 35: Bảng dữ liệu pet_type
Bảng 36: Bảng dữ liệu product
Bảng 37: Bảng dữ liệu product_cart_item
Bảng 38: Bảng dữ liệu product_order_item
Bảng 39: Bảng dữ liệu product_photo
Bảng 40: Bảng dữ liệu reservation
Bảng 41: Bảng dữ liệu service
Bảng 42: Bảng dữ liệu service_order_item
Bảng 43: Bảng dữ liệu service_photo
Bảng 44: Bảng dữ liệu sub_category
Bảng 45: Bảng danh mục màn hình
Bảng 46: Bảng phân công công việc

38
39
39
40
40
40
41
41
42
42

42
43
43
43
49
104


CHƯƠNG I: GIỚI THIỆU CHUNG
1. Đề tài
- Tên đề tài: Xây dựng website cung cấp các dịch vụ về thú cưng - tích hợp
ChatBot.
- Cơng nghệ sử dụng: ReactJs, Nestjs.
- Cơ sở dữ liệu sử dụng: Firebase Storage, MySQL.
2. Lý do chọn đề tài
Hiện nay, chúng ta đang sống trong một xã hội ngày càng phát triển, điều này làm
cho việc tiếp cận công nghệ thông tin ngày căng tang, cùng với việc ngày càng có nhiều
người muốn sở hữu cho mình thú cưng dẫn đến các vấn đề về bán và cung cấp các dịch vụ
cho thú cưng ngày một nhiều sau mỗi năm. Với phát triển của thời đại cơng nghệ 4.0 thì
việc quản lý, lưu trữ, bán,… thú cưng theo cách cổ điển đang gây ra rất nhiều bất lợi và tốn
nhiều thời gian và công sức. Và khi sự bùng nổ các dịch vụ trên Internet ở nước ta ngày
càng lớn, thì việc có sự xuất hiện một website bán và cung cấp các dịch vụ về thú cưng để
giúp giảm thiểu thời gian và công sức của chủ cửa hàng cũng như giúp chủ cửa hàng, khách
hàng có thể theo dõi, truy xuất nhanh chóng, chính xác thơng tin, tình trạng đơn hàng, thú
cưng một cách dễ dàng là một việc rất cần thiết và khả thi vào lúc này.
Dựa theo khảo sát thực trạng, thì có thế nhận thấy rằng tồn tại những cơng việc tốn
rất nhiều thời gian nhưng vẫn lặp đi lặp lại như: Tiếp nhận tin nhắn mua hàng, phân chia
các loại thú cưng, tổng kết thống kê doanh thu, kiểm tra thú cưng tồn kho, … Thơng
thường thì những cơng việc này chỉ dừng lại ở mức độ dùng Excel hay một số công cụ
khác để thực thi và lưu trữ. Vì vậy việc xây dựng lên một website bán và cung cấp các

dịch vụ về thú cưng là một vấn đề cực kì cần thiết.
3. Tóm tắt đề tài
Những phần mềm thú cưng trên thị trường hiện nay mặc dù có những tính năng rất
tiện ích tuy nhiên chúng vẫn còn rất phức tạp đối với một số người khơng hồn tồn rành
về cơng nghệ. Bên cạnh đó, cịn có vẫn có những tính năng hồn tồn khơng cần thiết tại
một số nơi nhất định, đồng thời giao diện thiết kễ đã cũ, lạc hậu.
Do đó, chúng tơi đã tiến hành thu thập những ý kiến người dùng để từ đó xây dựng một
phần mềm có giao diện dễ sử dụng hơn và những tính năng phù hợp hơn.


4. Mục tiêu đề tài
- Xây dựng website dịch vụ thú cưng có tính năng: Đăng nhập, đăng ký, quản lý
danh mục thú cưng, sản phẩm, dịch vụ, quản lý giỏ hàng, quản lý đơn hàng, quản lý tài
khoản, thống kê doanh thu, mặt hàng, chatbot hỗ trợ,...
- Tìm hiểu được cơng nghệ thích hợp xây dựng ứng dụng.
- Hồn thành được báo cáo môn học.
5. Phương pháp nghiên cứu
- Nghiên cứu các ứng dụng có sẵn trên thị trường, nhận xét được ưu khuyết điểm
của các ứng dụng đó.
- Nghiên cứu các tài liệu đặc tả về các phần mềm tương tự như quản lý bán hàng,
chat app, ...
- Tìm hiểu các cơng nghệ mới trên thị trường, nhận xét và chọn ra phần mềm thích
hợp nhất.
6. Ý nghĩa và hướng của đề tài
6.1. Về mặt tài liệu
- Sử dụng nguồn tài liệu tham khảo ReactJs, NestJs, Firebase.
- Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mơ hình thiết kế giao diện.
6.2. Về mặt sản phẩm
- Tạo ra ứng dụng Website cung cấp các dịch vụ về thú cưng, tích hợp
Chatbot.

- Xử lý các vấn đề về hiệu suất của ứng dụng 1 cách hiệu quả.
- Chức năng phù hợp với tình hình thực tế và dễ sử dụng.


CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN
1. ReactJS
1.1. Giới thiệu
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.
Về cơ bản, việc xây dựng một ứng dụng MVC phía client với giàng buộc dữ
liệu 2 chiều (2 way data-binding) là khá đơn giản. Tuy nhiên nếu dự án ngày càng
mở rộng, nhiều tính năng hơn, làm cho việc bảo trì dự án gặp khó khăn, đồng thời
hiệu
năng
cũng
bị
giảm.
Bạn cũng có thể giải quyết vấn đề đó bằng các thư viện khác như Backbone.js
hay Angular.js, tuy nhiên bạn sẽ thấy các hạn chế của chúng khi dự án của bạn ngày
càng lớn.
React ra đời sau AngularJS, nó sinh ra để dành cho các ứng dụng lớn dễ dàng
quản lý và mở rộng. Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và
dễ dàng mở rộng.

Hình 1: Giới thiệu về React


Tính năng nổi bật của React:
- Sử dụng JSX, trích dẫn HTML để render các subcomponent.
- Single-way data flow (Luồng dữ liệu một chiều)
- Virtual Dom nên khi state thay đổi chúng ta không cần thao tác trực tiếp với DOM.
- Hiệu năng nhanh với những ứng dụng có dữ liệu thay đổi liên tục.


1.2. Lý do sử dụng
Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp
đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và
Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà không
cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn
HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.
Nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng
dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng
hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual
DOM như thể bạn đang xem cây DOM thông thường.
Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang
là tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều
thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị
lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dung vơ hiệu hóa Javascript
thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngồi trình
duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả
về. Bạn có thể tham khảo cách render side servering tại đây.
Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao
diện vì virtual DOM được cài đặt hoàn toàn bằng JS.
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
cho bảo trì và sửa lỗi.

2. NestJS

2.1. Giới thiệu
Nest (NestJS) là một framework để xây dựng ứng dụng NodeJS phía máy
chủ hiệu quả và có thể mở rộng, được cải tiến từ JavaScript, được xây dựng và hỗ
trợ đầy đủ TypeScript (nhưng vẫn cho phép nhà phát triển viết bằng JavaScript
thuần) và kết hợp các yếu tố của OOP (Lập trình hướng đối tượng), FP (Lập trình
hàm) và FRP (Lập trình phản ứng hàm).
Nest cung cấp mức độ trừu tượng cao hơn các Node.js frameworks phổ biến
(Express/Fastify), nhưng cũng hiển thị trực tiếp các APIs của họ cho các 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ố mơ-đun của bên thứ
ba có sẵn cho nền tảng cơ bản.


Hình 2: Giới thiệu về NestJs

Tính năng nổi bật của NestJs:
NestJS là một dự án mà tác giả muốn wapper lại mã nguồn, tối ưu và sắp
xếp mã nguồn dựa trên NodeJS và ExpressJS. Nhờ đó mà mã nguồn dự án của bạn
gọn gàng hơn, dễ bảo trì và tốc độ phát triển, xây dựng ứng dụng cũng nhanh hơn.


CHƯƠNG III: PHÂN TÍCH HỆ THỐNG
1. Yêu cầu phần mềm
1.1. Yêu cầu nghiệp vụ
Đảm bảo được các chức năng cần phải có đối với website cung cấp các dịch
vụ về thú cưng - tích hợp ChatBot.
Chia làm 3 danh mục bán hàng chính là thú cưng, sản phẩm, dịch vụ:
● Thú cưng: Với mỗi loại thú cưng chỉ có duy nhất một con, nên số
lượng chỉ được tính tối đa là một.
● Sản phẩm: Gồm các danh mục sản phẩm, sản phẩm phụ, số
lượng hàng tồn kho.

● Dịch vụ: Bao gồm chọn nhân viên làm dịch vụ, đặt lịch hẹn.
1.2 Yêu cầu chất lượng
Yêu cầu về tính hiệu quả, đúng đắn:
● Đảm bảo tính tồn vẹn dữ liệu.
● Các thơng báo phản hồi ngay lập tức khi người dùng thao tác.
● Các thơng số được tính tốn, cập nhật và hiển thị ngay lập tức.
Yêu cầu về bảo mật: Các dữ liệu quan trọng như mật khẩu được mã hóa.
Yêu cầu về tương thích: Tương thích trên nhiều thiết bị.


2. Use-case
2.1 Sơ đồ Use-case mức tổng quát


Hình 3: Sơ đồ usecase mức tổng quát

2.2 Danh sách các actor
STT

Ý nghĩa / ghi chú

Tên Actor

1

Người dùng

Khách hàng, người sử dụng

2


Admin

Người quản lý

Bảng 1: Danh sách các actor

2.3 Danh sách Use-case
STT

Ý nghĩa / ghi chú

Tên Usecase

1

Tạo tài khoản khách hàng

Tạo tài khoản cá nhân cho app

2

Đăng nhập khách hàng

Đăng nhập vào ứng dụng

3

Đăng nhập admin


Đăng nhập tài khoản admin

4

Thay đổi thông tin

Thay đổi thông tin tài khoản cá nhân

5

Tạo thú cưng

Tạo thú cưng

6

Sửa thú cưng

Cập nhật thú cưng

8

Tạo sản phẩm

Tạo sản phẩm

9

Sửa sản phẩm


Cập nhật sản phẩm

10

Tạo dịch vụ

Thêm mới dịch vụ

11

Sửa dịch vụ

Cập nhật dịch vụ

12

Đặt lịch

Đặt lịch hẹn

13

Xem thông tin đơn hàng

Xem thông tin đơn hàng


14

Chỉnh sửa đơn hàng


Chỉnh sửa đơn hàng

15

Đặt đơn hàng

Đặt đơn hàng

16

Tra cứu đơn hàng

Tra cứu theo tên, số điện thoại, link

17

ChatBot

Chatbot hỗ trợ

18

Quản lý nhân viên

Thêm xóa sửa nhân viên

19

Quản lý khách hàng


Chỉnh sửa, vơ hiệu hóa tài khoản

Bảng 2: Danh sách use-case

2.4 Đặc tả Use-case
2.4.1 Đặc tả Use-case “Tạo tài khoản khách hàng”
Mô tả
Tác nhân

Người dùng tạo tài khoản mới để sử dụng website.
Người dùng
Hành vi của tác nhân

Hành vi của hệ thống

1 - Người dùng mở trang
web.
2 - Chọn vào nút Đăng ký tài
khoản.
Luồng chính

3 - Điền đầy đủ thông tin cá
nhân được yêu cầu.
4 - Nhấn vào nút Đăng ký.
5 - Phần mềm kiểm tra thông tin tài
khoản.
6 - Nếu thông tin hợp lệ, hiện thông báo
tạo tài khoản thành công, tự động đăng



nhập vào ứng dụng.

Thông tin điền vào bị thiếu hoặc sai cú pháp:
1 - Phần mềm hiện thông báo lỗi thông tin
2 - Người dùng nhập lại thông tin bị sai hoặc thiếu
Luồng thay thế

3 - Tiếp tục thực hiện bước 4 ở dịng sự kiện chính
Số điện thoại/email sử dụng đã được đăng ký:
1 - Phần mềm báo Tài khoản đã được đăng ký
2 - Người dùng nhập lại thông tin tài khoản khác
3 - Tiếp tục thực hiện bước 4 ở dịng sự kiện chính

Điều kiện trước

Điều kiện sau

Thiết bị phải có kết nối mạng.
Kết nối thành cơng với database.
Thành công:

Thất bại:

- Thông tin tài khoản khách

CSDL không thay đổi

hàng mới được lưu vào
CSDL

- Lưu lại thông tin đăng nhập
cho lần đăng nhập kế tiếp

Bảng 3: Đặc tả use-case tạo tài khoản

2.4.2 Đặc tả Use-case “Đăng nhập khách hàng”
Mô tả
Tác nhân

Người dùng đăng nhập vào website.
Người dùng
Hành vi của tác nhân

Luồng chính

1 - Người dùng mở ứng dụng
lên

Hành vi của hệ thống


2 - Chọn cách thức đăng nhập
(Đăng nhập tài khoản cũ,
Đăng nhập tài khoản khác)
3 - Nếu hình thức đăng nhập là Tài
khoản cũ, phần mềm kiểm tra
thông tin về người dùng trong hệ
thống
4 - Nếu thông tin hợp lệ, chuyển
tiếp vào trang chủ của ứng dụng

Người dùng chọn hình thức đăng nhập tài khoản khác:
1 - Người dùng nhập thông tin về tài khoản và mật khẩu
2 - Nhấn vào nút Đăng nhập
3 - Phần mềm kiểm tra thông tin người dùng có trong hệ thống
Luồng thay thế

4 - Tiếp tục bước 4 ở dịng sự kiện chính
Thơng tin đăng nhập không hợp lệ:
1 - Phần mềm hiện thông báo lỗi
2 - Người dùng đăng nhập lại bằng thông tin khác
3 - Tiếp tục thực hiện bước 3 ở dòng sự kiện phụ: đăng nhập bằng
tài khoản

Điều kiện trước
Điều kiện sau

Thiết bị phải có kết nối mạng.
Kết nối thành công với database.
Không đổi

Bảng 4: Đặc tả use-case đăng nhập khách hàng


2.4.3 Đặc tả Use-case “Đăng nhập admin”
Admin người quản lý của cửa hàng

Mô tả
Tác nhân

Người quản lý

Hành vi của tác nhân

Hành vi của hệ thống

1 - Người dùng thực hiện
Usecase đăng nhập vào hệ
Luồng chính

thống
2 - Vào trang của quản lý để
quản lý cửa hàng
4 - Hệ thống hiển thị thông báo đã
đăng nhập thành công

Luồng thay thế
Điều kiện trước
Điều kiện sau

Khơng
Thiết bị phải có kết nối mạng.
Kết nối thành công với database.
Không.

Bảng 5: Đặc tả use-case đăng nhập admin

2.4.4 Đặc tả Use-case “Thay đổi thơng tin”

Mơ tả
Tác nhân
Luồng chính


Người dùng muốn thay đổi thông tin cá nhân.
Người dùng, người quản lý
Hành vi của tác nhân

Hành vi của hệ thống


1 - Người dùng thực hiện
Usecase Đăng nhập
2 - Người dùng mở tab Trang
cá nhân lên
3 - Người dùng chọn nút
Thay đổi thông tin
4 - Nhập thông tin mới của
bản thân
5 - Bấm nút Lưu
6 - Phần mềm kiểm tra thông tin
mới cập nhật
7 - Nếu thông tin hợp lệ, phần
mềm hiện thông báo Xác nhận
thay đổi hay không?
8 - Người dùng bấm xác nhận
thay đổi.
9. phần mềm hiển thị thông báo đã
thay đổi thành công.
10 - Trở về màn hình Thơng tin cá
nhân.
Thơng tin thay đổi khơng hợp lệ:
1 - Phần mềm trở về màn hình thay đổi thơng tin cá nhân

2 - Người dùng nhập lại thông tin không hợp lệ
Luồng thay thế

3 - Tiếp tục thực hiện bước 5 ở dịng sự kiện chính
Khơng xác nhận thay đổi thông tin cá nhân:
1 - Phần mềm trở về màn hình thay đổi thơng tin cá nhân
2 - Người dùng nhập lại thông tin mới hoặc Hủy bỏ thay đổi