ĐỒ án tìm HIỂU về NODEJS và REACTJS và xây DỰNG WEBSITE QUẢN lý bán GIÀY (đồ án SE121 l21 PMCL)

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 VỀ NODEJS VÀ REACTJS
VÀ XÂY DỰNG WEBSITE QUẢN LÝ BÁN GIÀY

Giảng viên hướng dẫn:
Thái Thuỵ Hàn Uyển
Nhóm thực hiện:
Trần Duy Khánh

18520075

Nguyễn Hữu Trí

18521528

TPHCM, tháng 4 năm 2021

1


Nợi dung
CHƯƠNG 1: THƠNG TIN CHUNG

9

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

2.1.
Giới thiệu về React JS
2.1.1. Khái niệm
2.1.2. Kiến thức
2.1.3. Ưu điểm:
2.1.4. Nhược điểm:
2.1.5. Redux
2.2.
Giới thiệu về NodeJS
2.2.1. Đặc điểm của Node.js:
2.2.2. Các thành phần quan trọng trong Node.js:
2.2.3. Ưu điểm:
2.2.4. Nhược điểm:
2.3.
Xây dựng cơ sở dữ liệu
2.3.1. Cơ sở dữ liệu MySql
2.3.2. Hệ quản trị cơ sở dữ liệu FireBase

10
10
10
15
16
17
18
19
19
21
21
22

22
22
23

CHƯƠNG 3: PHÁT BIỂU BÀI TOÁN
3.1 Khảo sát hiện trạng
3.1.1 Phát biểu bài toán
3.1.2 Khảo sát
3.2 Yêu cầu hệ thống
3.2.1 Sơ đồ tổ chức hệ thống
3.2.2 Chức năng nhiệm vụ của từng bộ phận
3.2.2.1 Chủ cửa hàng
3.2.2.2 Bộ phận bán hàng
3.2.2.3 Bộ phận kế toán
3.2.2.4 Bộ phận kho
3.3 Danh sách các yêu cầu
3.4 Danh sách các biểu mẫu
3.4.1 Biểu mẫu 1 và quy định 1
3.4.2 Biểu mẫu 2 và quy định 2
3.4.3 Biểu mẫu 3 và quy định 3
3.4.4 Biểu mẫu 4 và quy định 4
3.4.5 Biểu mẫu 5 và quy định 5
3.4.6 Biểu mẫu 6 và quy định 6
2.8.7 Biểu mẫu 7 và quy định 7
2.8.8 Biểu mẫu 8
2.8.9 Biểu mẫu 9
2.8.10 Biểu mẫu 10

24
24

24
25
30
30
31
31
31
32
32
41
41
41
42
43
43
44
45
46
46
47
47

CHƯƠNG 4: MƠ HÌNH USECASE

48

2


Mơ hình Usecase tổng qt

Danh sách các Actor
Danh sách các Usecase
Đặc tả Usecase
4.4.1. Đặc tả use case "Đăng nhập"
4.4.2. Đặc tả use case "Đăng xuất"
4.4.3. Đặc tả use case "Thay đổi mật khẩu"
4.4.4. Đặc tả use case "Quản lý nhập hàng"
4.4.4.1. Quản lý nhập hàng
4.4.4.2. Lập phiếu nhập hàng
4.4.4.3. Sửa phiếu nhập hàng
4.4.4.4. Xóa phiếu bán hàng
4.4.5. Đặc tả use case "Quản lý nhập kho"
4.4.5.1. Quản lý nhập kho
4.4.5.2. Lập phiếu nhập kho
4.4.5.3. Xóa phiếu nhập kho
4.4.5.4. Sửa phiếu nhập kho
4.4.6. Đặc tả use case "Quản lý nhà cung cấp"
4.4.6.1. Quản lý nhà cung cấp
4.4.6.2. Thêm nhà cung cấp
4.4.6.3. Xóa nhà cung cấp
4.4.6.4. Sửa nhà cung cấp
4.4.7. Đặc tả use case "Quản lý người dùng"
4.4.7.1. Quản lý người dùng
4.4.7.2. Thêm người dùng
4.4.7.3. Xóa người dùng
4.4.7.4. Sửa thơng tin người dung
4.4.8. Đặc tả use case "Quản lý giỏ hàng"
4.4.8.1. Quản lý giỏ hang
4.4.8.2. Thêm giỏ hàng
4.4.8.3. Xóa giỏ hàng

4.4.8.4. Sửa giỏ hàng
4.4.9. Đặc tả use case "Quản lý sản phẩm"
4.4.9.1. Quản lý sản phẩm
4.4.9.2. Thêm sản phẩm mới
4.4.9.3. Xóa sản phẩm
4.4.9.4. Sửa thơng tin sản phẩm
4.4.9.5. Tìm kiếm sản phẩm
4.4.10. Đặc tả use case "Báo cáo bán hàng"
4.4.11. Đặc tả use case "Báo cáo lợi nhuận"
4.4.12. Đặc tả use case "Thay đổi quy định"
4.4.12.1. Thay đổi quy định
4.4.12.2. Thay đổi số lượng tồn tối thiểu
4.4.12.3. Thay đổi tỷ lệ lợi nhuận
4.4.13. Đặc tả use case "Lập phiếu chi"
4.4.14. Đặc tả use case "Quản lý bán hàng"

4.1.
4.2.
4.3.
4.4.

3

48
49
49
53
53
54
54

55
55
56
58
59
60
60
61
63
64
65
65
67
68
69
70
70
71
73
73
75
75
76
77
78
80
80
81
82
83

85
86
87
88
88
89
90
92
93


4.4.14.1.
4.4.14.2.
4.4.14.3.
4.4.14.4.

Quản lý bán hàng
Thêm phiếu bán hàng
Xóa phiếu bán hàng
Sửa phiếu bán hàng

93
94
95
96

CHƯƠNG 5: PHÂN TÍCH
5.1.
Sơ đồ lớp ( mức phân tích)
5.2.

Danh sách lớp đối tượng và quan hệ
5.3.
Mơ tả chi tiết của từng lớp đối tượng
5.1.1 PhieuNhapKho
5.1.2 ChiTietPhieuNhapKho
5.1.3 PhieuDatHang
5.1.4 ChiTietPhieuDatHang
5.1.5 PhieuChi
5.1.6 NhaCungCap
5.1.7 HangSanXuat
5.1.8 NguoiDung
5.1.9 ChucVu
5.1.10 PhanQuyen
5.1.11 Quyen
5.1.12 PhieuBanHang
5.1.13 ChiTietPhieuBanHang
5.1.14 GioHang
5.1.15 ChiTietGioHang
5.1.16 BaoCaoLoiNhuan
5.1.17 ChiTietBaoCaoLoiNhuan
5.1.18 BaoCaoBanHang
5.1.19 ChiTietBaoCaoBanHang
5.1.20 Giay
5.1.21 ChiTietGiay
5.1.22 Size
5.1.23 Mau

99
99
100

101
101
101
102
103
104
105
106
107
108
108
109
109
110
111
112
113
114
114
115
116
117
118
119

CHƯƠNG 6: THIẾT KẾ CƠ SỞ DỮ LIỆU
6.1.
Sơ đồ lớp ( mức phân tích)
6.2.
Danh Sách Bảng

6.3.
Mơ tả chi tiết của từng lớp đối tượng
6.1.1 PhieuNhapKho
6.1.2 ChiTietPhieuNhapKho
6.1.3 PhieuDatHang
6.1.4 ChiTietPhieuDatHang
6.1.5 PhieuChi
6.1.6 NhaCungCap
6.1.7 HangSanXuat
6.1.8 NguoiDung
6.1.9 ChucVu

120
120
121
122
122
122
122
123
123
124
124
124
125

4


6.1.10

6.1.11
6.1.12
6.1.13
6.1.14
6.1.15
6.1.16
6.1.17
6.1.18
6.1.19
6.1.20
6.1.21
6.1.22
6.1.23

PhanQuyen
Quyen
PhieuBanHang
ChiTietPhieuBanHang
GioHang
ChiTietGioHang
BaoCaoLoiNhuan
ChiTietBaoCaoLoiNhuan
BaoCaoBanHang
ChiTietBaoCaoBanHang
Giay
ChiTietGiay
Size
Mau

125

126
126
126
127
127
127
128
128
129
129
129
130
130

CHƯƠNG 7: THIẾT KẾ KIẾN TRÚC
7.1 Kiến trúc hệ thống
7.2 Mô tả chi tiết hệ thống
7.2.1 Mô hinh MVC

130
130
130
130

CHƯƠNG 8: THIẾT KẾ MÀN HÌNH
8.1.
Danh sách màn hình
8.2.
Mơ tả các màn hình
8.2.1 Màn hình đăng nhập

8.2.2 Trang quản trị
8.2.3 Danh sách phiếu bán hàng
8.2.4 Lập phiếu bán hàng
8.2.5 Danh sách phiếu đặt hàng
8.2.6 Lập phiếu đặt hàng
8.2.7 Danh sách phiếu chi
8.2.8 Lập phiếu chi
8.2.9 Danh sách phiếu nhập kho
8.2.10 Lập phiếu nhập kho
8.2.11 Danh sách sản phẩm
8.2.12 Thêm/sửa sản phẩm
8.2.13. Danh sách hãng sản xuất
8.2.14. Thêm/Sửa hãng sản xuất
8.2.15. Danh sách nhà cung cấp
8.2.16. Thêm/sửa nhà cung cấp
8.2.17. Danh sách người dùng
8.2.18. Danh sách giỏ hàng

131
131
133
133
135
137
139
143
145
147
149
150

153
155
157
160
162
164
166
167
170

CHƯƠNG 9: THỬ NGHIỆM VÀ ĐÁNH GIÁ
9.1 Môi trường và thử nghiệm
9.2 Kết quả thử nghiệm
9.3 Đánh giá sản phẩm

171
171
171
173

5


CHƯƠNG 10: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
10.1 Kết luận
10.2 Hướng phát triển
10.3 Tài liệu tham khảo

6

173
173
173
173


Nhận xét của giảng viên
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………

7


LỜI CẢM ƠN
Đầu tiên, chúng em xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô
Trường Đại học Công nghệ Thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô
khoaCông nghệ phần mềm đã giúp cho chúng em có những kiến thức cơ bản làm nền

tảng để thực hiện đề tài này.
Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới cô
Thái Thuỵ Hàn Uyển (giảng viên hướng dẫn đồ án mã nguồn mở) là người đã trực tiếp
đứng lớp hướng dẫn tận tình, sửa chữa và đóng góp nhiều ý kiến q báo chúng em hồn
thành tốt báo cáo của mình.
Trong thời gian một học kỳ thực hiện đề tài, nhóm chúng 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ừ đó, nhóm vận dụng tối đa những gì đã thu thập được để hoàn thành
một báo cáo đồ án tốt nhất. Tuy nhiên, trong quá trình thực hiện, vẫn khơng tránh khỏi
những thiếu sót. Chính vì vậy, nhóm chúng em rất mong nhận được những sự góp ý từ
phía các Thầy Cơ nhằm hồn thiện những kiến thức mà nhóm đã học tập và là hành
trang để chúng em thực hiện tiếp các đề tài khác trong tương lai.
Xin chân thành cảm ơn quý Thầy Cô!

8


CHƯƠNG 1: THÔNG TIN CHUNG
1.1

Tên đề tài: Quản Lý Bán Giày

1.2

Môi trường phát triển ứng dụng : NodeJs và ReactJs
-

Hệ điều hành: Microsoft Windows.

-

Hệ quản trị cơ sở dữ liệu: MongoDB.

-

Cơng cụ phân tích thiết kế: Draw.io

-

Cơng cụ xây dựng ứng dụng: Visual Studio Code

1.3

Thơng tin nhóm
MSSV

Họ và tên

1

18520075

Trần Duy Khánh



2

18521528

Nguyễn Hữu Trí



ST

Điện thoại

Email

T

9


CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1. Giới thiệu về React JS
-

React JS là thư viện Javascript được xây dựng bởi các kỹ sư của Facebook, đang
được rất nhiều công ty nổi tiếng sử dụng để phát triển các sản phẩm của họ như
Yahoo, Airbnb và tất nhiên là trong nội tại Facebook, Instagram. Nó phù hợp với
các dự án lớn có tính mở rộng hơn là các dự án nhỏ.

• Đặc tính của React JS
-

Tư tưởng React JS là xây dựng lên các components có tính tái sử dụng, dễ dàng
cho việc chia nhỏ vấn đề, testing. Nó giúp chúng ta dễ dàng quản lý, mở rộng hệ
thống, điều này nếu là Angular JS thì địi hỏi cấu trúc, cách viết code phải thật tối

ưu.

-

React JS luôn giữ các components ở trạng thái stateless (nhiều nhất có thể) khiến ta
dễ dàng quản lý bởi nó chẳng khác gì một trang static HTML. Bản thân các
components này khơng có trạng thái (state) nó nhận đầu vào từ bên ngồi và chỉ
hiện thị ra dựa vào các đầu vào đó, điêu này lý giải tại sao nó lại mang tính tái sử
dụng (reuse) và dễ dàng cho việc test.
2.1.1. Khái niệm

• Component
-

React được xây dựng xung quanh các component, chứ không dùng template như
các framework khác. Ta có thể tạo ra một component bằng cách extend Component
như sau

10


Hình 2.1 Mợt component trong React
-

Phương thức quan trọng nhất là render, phương thức này được trigger khi
component đã sẵn sàng để được render lên trên page.

-

Trong hàm đó, bạn sẽ trả về một mô tả cho việc bạn muốn React render cái gì lên

trên page. Như trong ví dụ ở trên, đơn giản mình muốn render 1 thẻ h1 chứa lời chào
và tên.

-

Hàm render chính là mơ tả cụ thể của UI tại bất cứ thời điểm nào. Vì thế nếu dữ liệu
thay đổi, React sẽ take care việc update UI với dữ liệu tương ứng. Các bạn có thể
hiểu đơn giản là, khi dữ liệu thay đổi, React sẽ tự động gọi hàm render để update lại
UI.

• Multiple Components
-

Nếu muốn lồng nhiều component vào nhau, ta sẽ làm điều này trong lệnh return của
phương thức render.

Hình 2.2 Component lồng nhau

11


• Prop
-

Props ở đây chính là properties của một component, chúng ta có thể thay đổi props
của component bằng cách truyền dữ liệu từ bên ngồi vào. Props có thể là 1 object,
funtion, string, number...

Hình 2.3 Phương thức Prop
-

Chú ý: Khi một props được truyền vào component thì nó là bất biến tức là dữ liệu
của nó khơng được thay đổi kiểu như một "pure" function.

-

Ví dụ về “pure” function và “not pure” function

Ta xét function như dưới:

Hình 2.4 Pure Function

12


-

Function được gọi là "pure" vì nó khơng làm thay đổi giá trị đầu vào của nó và ln
trả về một kết quả tương tự cho các đầu vào như nhau.

Ta xét function thứ 2 như hình dưới

Hình 2.5 Not Pure Function
-

Ở đây function trên đã thay đổi chính giá trị sum đầu vào của nó và điều này khiến
nó không là "pure" function

 Tất cả các component của react phải hoạt đợng như "pure" function

• State
Một component trong React có 2 cách để lấy thơng tin props và state. Không như props,
state của 1 component không được truyền từ bên ngoài vào. Một component sẽ tự quyết
định state của chính nó. Để tạo ra state cho component, ta sẽ phải khai báo nó trong hàm
constructor

13


Hình 2.6 Phương thức State
-

Sự giống và khác nhau giữa Prop và State
o Giống:
▪ Props và state đều là plain JS objects
▪ Props và state đều trigger render update khi thay đổi
o Khác:
Prop

State

Can get initial value from parent Component?

Yes

Yes

Can be changed by parent Component?

Yes

No

Can set default values inside Component?*

Yes

Yes

Can change inside Component?

No

Yes

Can change in child Components?

Yes

No

14


2.1.2. Kiến thức
-

React JS là một framework đơn nhất, nhưng để xây dựng được ứng dụng hoàn chỉnh,
chúng ta cần nhiều thứ hơn nữa. Đây là một số kiến thức khi muốn nghiên cứu React:

• Javascript:
-

Ngơn ngữ xây dựng nên React, yêu cầu mức độ trung bình: các khái niệm “object”,
“prototype”, “callback” là bắt buộc, nếu bạn chưa biết gì, tôi nghĩ bạn nên đọc tài
liệu tại đây và thực hành trong ít nhất 3 tuần trước khi quay lại để bắt đầu.

• Npm:
-

Cơng cụ quản lý package của Node.js và là phương pháp phổ biến nhất để các lập
trình viên front-end và các nhà thiết kế chia sẻ mã nguồn Javascript. Nó bao gồm
một hệ thống quản lý module gọi là CommonJS và cho phép bạn cài đặt bất cứ công
cụ command-line nào được viết bằng Javascript.

-

Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái của React
đều được triển khai như là thành các module CommonJS và có thể cài đặt thơng
qua npm.

• JavaScript “bundlers”
-

Hay cịn gọi là các cơng cụ đóng gói JavaScript. Vì một vài lí do kĩ thuật mà
module CommonJS (ví dụ, các thư viện trên npm) khơng thể sử dụng native trên
trình duyệt. Bạn cần có một “cơng cụ đóng gói” Javascript để “đóng gói” các
modules này thành các files .js mà có thể include được trên trang web qua
thẻ <script>.

• ES6:
-

Là phiên bản mới nhất của Javascript, vì cịn q mới nên chưa được hỗ trợ trên các
trình duyệt, nhưng các cơng cụ đóng gói sẽ thực hiện phiên dịch với cấu hình đúng
để có thể sử dụng được trên trình duyệt.

• Routing

15


-

“Các ứng dụng single-page” trở nên khá rầm rộ ngày nay. Đây là những trang web
mà chỉ thực hiện khởi tạo một lần, và khi người dùng ấn vào một đường dẫn hay nút
ấn thì Javascript trên trang web sẽ thực thi mà trang web không cần phải reload lại.
Việc quản lý địa chỉ trên thanh địa chỉ được thực hiện bởi router.

-

Router được sử dụng phổ biến nhất trong hệ sinh thái React là react-router. Nếu như
bạn đang xây dựng một ứng dụng single-page, hãy sử dụng nó trừ khi bạn có lý do
mà khơng thể sử dụng.

• Server Rendering
-

Server rendering thường được gọi là “toàn bộ” hay “đồng bộ” JS. Điều đó có nghĩa
là bạn có thể lấy bất cứ React components nào và render chúng thành HTML tĩnh

trên server. Điều này cải thiện được tốc độ ban đầu vì người dùng khơng cần phải
chờ JS thực hiện download để có thể thấy được UI ban đầu, và React có thể tái sử
dụng HTML đã được render phía server, vì vậy mà khơng cần xử lý ở phía client.

-

Chỉ cần sử dụng server rendering khi ta thấy việc render ban đầu trở nên quá chậm
hoặc muốn cải thiện thứ hạng tìm kiếm. Mặc dù Google bây giờ đã thực hiện index
các nội dung render phía client, nhưng tại thời điểm tháng một 2016, mỗi khi được
lấy ra đo lường thì thấy rõ thứ hạng bị ảnh hướng đi xuống, có khả năng là do vi
phạm về tốc độ render phía client.

-

Việc render phía server vẫn cần nhiều cơng cụ để làm cho nó trở nên chính xác. Vì
việc này mặc định được hỗ trợ trong các React components mà khơng cần quan tâm
tới việc render phía server, chúng ta nên xây dựng ứng dụng trước và quan tâm tới
việc render phía server sau. Ta sẽ khơng cần thiết phải viết lại tất cả các components
để xử lý việc đó.
2.1.3. Ưu điểm:

-

Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các
component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều.
Reactjs cũng tính tốn những thay đổi nào cần cập nhật len DOM và chỉ thực hiện
chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí.
Chúng ta có thể viết một ví dụ đơn giản về ReactJS như sau.

16

-

Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung 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.

-

Nó có 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ề.

-

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 hồn tồ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.1.4. Nhược điểm:

-

Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là một
MVC framework như những framework khác. Đây chỉ là thư viện của Facebook
giúp render ra phần view. Vì thế React sẽ khơng có phần Model và Controller, mà
phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2-way binding hay là
Ajax

-

Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình
lại.

17


-

React khá nặng nếu so với các framework khác React có kích thước tương tương
với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một
framework hồn chỉnh

-

Khó tiếp cận cho người mới học Web
2.1.5. Redux

-

Redux là 1 tool dùng để quản lý state cho các ứng dụng Javascript. Nó giúp bạn viết
các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau
(client, server, and native) và dễ dàng để test. Redux ra đời lấy cảm hứng từ tư tưởng
của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết
hợp với React.

-

Hầu hết các lib như React, Angular, etc được built theo một cách sao cho các
components đến việc quản lý nội bộ các state của chúng mà không cần bất kỳ một
thư viện or tool nào từ bên ngồi.

-

Nó sẽ hoạt động tốt với các ứng dụng có ít components nhưng khi ứng dụng trở lên
lớn hơn thì việc quản lý states được chia sẻ qua các components sẽ biến thành các
công việc lặt nhặt.

-

Trong một app nơi data được chia sẻ thông qua các components, rất dễ nhầm lẫn để
chúng ta có thể thực sự biết nơi mà một state đang live. Một sự lý tưởng là data
trong một component nên live trong chỉ một component. Vì vậy việc share data
thơng qua các components anh em sẽ trở nên khó khăn hơn.

-

Ví dụ, trong react để share data thông qua các components anh em, một state phải
live trong component cha. Một method để update chính state này sẽ được cung cấp
bởi chính component cha này và pass như props đến các components con.

• Actions
-

Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app đến
Redux store. Những data này có thể là từ sự tương tác của user vs app, API calls
hoặc cũng có thể là từ form submission.

• Reducers

18


-

Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực hiện
một action và trả về một state mới. Những states này được lưu như những objects
và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một
action được gửi đến store.

• Store
-

Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux

nào. Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng ký
các listeners thông qua helper methods.

2.2. Giới thiệu về NodeJS
-

Node.js là một nền tảng dựa vào Chrome Javascript runtime để xây dựng các ứng
dụng nhanh, có độ lớn. Node.js sử dụng các phần phát sinh các sự kiện
(eventdriven), mơ hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả
cho các ứng dụng về dữ liệu thời gian thực chạy trên các thiết bị phân tán.

-

NodeJs là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía Server
và các ứng dụng liên quan đến mạng. Ứng dụng Node.js được viết bằng Javascript
và có thể chạy trong mơi trường Node.js trên hệ điều hành Window, Linux...

-

Node.js cũng cung cấp cho chúng ta các module Javascript đa dạng, có thể đơn giản
hóa sự phát triển của các ứng dụng web sử dụng Node.js với các phần mở rộng.
2.2.1. Đặc điểm của Node.js:

-

Dưới đây là vài đặc điểm quan trọng biến Node.js trở thành sự lựa chọn hàng đầu
trong phát triển phần mềm:

-

Không đồng bộ và Phát sinh sự kiện (Event Driven): Tất các các APIs của thư viện
Node.js đều không đồng bộ, nghĩa là khơng blocking (khóa). Nó rất cần thiết vì
Node.js không bao giờ đợi một API trả về dự liệu. Server chuyển sang một API sau
khi gọi nó và có cơ chế thông báo về Sự kiện của Node.js giúp Server nhận được
phản hồi từ các API gọi trước đó.

19


-

Node cho phép bạn thực hiện các giao thức mạng ở cấp độ thấp một cách dễ dàng.
Chẳng hạn như Node có module HTTP cho phép xây dựng một webserver chỉ với
vài dịng code, tuy nhiên vì thế mà bạn sẽ phải học nhiều 10 thứ hơn như học về các
header của một gói tin HTTP, khơng như PHP vốn chỉ là một module mở rộng của
một webserver có sẵn (như Apache hay NginX…) – tức là PHP dễ dùng hơn Node
nhưng lại không cho phép coder thực hiện các cơng việc ở cấp độ thấp. Tuy nhiên
vì NodeJS là một framework mã nguồn mở, do đó trên mạng cũng có một số thư
viện hỗ trợ viết webserver nhanh hơn và dễ hơn cho coder.

-

Các tiến trình đơn giản nhưng hiệu năng cao: Node.js sử dụng một mơ hình luồng
đơn (single - thread) với các sự kiện lặp. Các cơ chế sự kiện giúp Server trả lại các
phản hồi với một cách khơng khóa và tạo cho Server hiệu quả cao ngược lại với các
cách truyền thống tạo ra một số lượng luồng hữu hạn để quản lý request. Nodejs sử
dụng các chương trình đơn luồng và các chương trình này cung cấp các dịch vụ cho
số lượng request nhiều hơn so với các Server truyền thống như Apache HTTP
Server.

-

Không đệm: Ứng dụng Node.js không lưu trữ các dữ liệu buffer.

-

Có giấy phép: Node.js được phát hành dựa vào MIT License.

-

Có trình CLI (giao diện dịng lệnh).

-

Chạy theo mơ hình REPL(Read Eval Print Loop) : hiểu nôm na là: Đọc - Đánh giá
- In - Lặp nó biểu diễn mơi trường máy tính như màn hình console trong Linux shell
nơi bạn có thể gõ các dịng lệnh và hệ thống sẽ trả về các kết quả. Node.js cũng có
mơi trường REPL. Nó để thực hiện các tác vụ mong muốn.

-

Có các hàm quản lý tiến trình.

-

Có các đối tượng hỗ trợ làm việc với dữ liệu nhị phân.

-

Hỗ trợ TCP và UDP.

-

Hỗ trợ hân giải DNS.

-

Hỗ trợ HTTP và HTTPS.

-

Có thể truy cập file và thư mục

20


2.2.2. Các thành phần quan trọng trong Node.js:
-

Lược đồ dưới đây mô tả các thành phần quan trọng của Node.js

2.2.3. Ưu điểm:
-

Đặc điểm nổi bật của Node.js là nó nhận và xử lý nhiều kết nối chỉ với một singlethread. Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải
tạo thread mới cho mỗi truy vấn giống PHP. Ngoài ra, tận dụng ưu điểm non-

21

blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của server mà
không tạo ra độ trễ như PHP
-

JSON APIs Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình
kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng
JSON.

-

Ứng dụng trên 1 trang( Single page Application). Với khả năng xử lý nhiều
Request/s đồng thời thời gian phản hồi nhanh.

-

Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động. Tức là NodeJS có
thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt
mức tối đa nhất và tuyệt vời nhất.

-

Streamming Data (Luồng dữ liệu). Các web thông thường gửi HTTP request và
nhận phản hồi lại (Luồng dữ liệu). Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn,
NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt
động cho các luồng dữ liệu khác.

-

Ứng dụng Web thời gian thực Với sự ra đời của các ứng dụng di động và HTML 5
nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time

applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter,…
2.2.4. Nhược điểm:

-

Ứng dụng nặng, tốn tài nguyên. NodeJS được viết bằng C++ và Javascript, nên phải
thơng qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn một chút.

2.3. Xây dựng cơ sở dữ liệu
2.3.1. Cơ sở dữ liệu MySql
-

MySQL là hệ quản trị dữ liệu miễn phí, được tích hợp sử dụng chung với Apache,
PHP. Chính yếu tố phát triển trong cộng đồng mã nguồn mở nên MySQL đã qua rất
nhiều sự hỗ trợ của những lập trình viên u thích mã nguồn mở. MySQL cũng có

22


cùng một cách truy xuất và mã lệnh tương tự với ngơn ngữ SQL. Nhưng MySQL
khơng bao qt tồn bộ những câu truy vấn cao cấp như SQL. Về bản chất MySQL
chỉ đáp ứng việc truy xuất đơn giản trong q trình vận hành của website nhưng hầu
hết có thể giải quyết các bài toán trong PHP.
-

MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ
điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ và tính
bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet.
MySQL miễn phí hồn tồn cho nên bạn có thể tải về MySQL từ trang chủ. MySQL
là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng

ngơn ngữ truy vấn có cấu trúc (SQL). MySQL đang được sử dụng cho nhiều công
việc kinh doanh từ nhỏ tới lớn:

-

MySQL là mã ngồn mở vì thế sử dụng khơng mất phí.

-

MySQL sử dụng form chuẩn của ngôn ngữ dữ liệu nổi tiếng là SQL.

-

MySQL làm việc trên nhiều Hệ điều hành và với nhiều ngôn ngữ như PHP, PERL,
C, C++, Java, …

-

MySQL làm việc nhanh với các tập dữ liệu lớn.

-

MySQL hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơn nữa trong
một bảng. Kích cỡ file mặc định được giới hạn cho một bảng là 4 GB (Gigabyte ),
nhưng bạn có thể tăng kích cỡ này (nếu hệ điều hành của bạn có thể xử lý nó) để đạt
tới giới hạn lý thuyết là 8 TB ( Terabyte ).

-

MySQL là có thể điều chỉnh. Giấy phép GPL mã nguồn mở cho phép lập trình viên

sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể của họ.
2.3.2. Hệ quản trị cơ sở dữ liệu FireBase

• Khái niệm
-

Google firebase là gì: Đó là một dịch vụ cơ sở dữ liệu thời gian thực hoạt động trên
nền tảng đám mây được cung cấp bởi Google nhằm giúp các lập trình phát triển
nhanh các ứng dụng và trang web, bao gồm các API đơn giản và mạnh mẽ mà không
cần backend hay server.

23


-

Google FireBase bao gồm việc:
o Lưu trữ dữ liệu thời gian thực.
o Xác thực người dùng
o Firebase hosting tới cơ sở dữ liệu.

• Ưu điểm
-

Triển khai ứng dụng cực nhanh: Firebase cung cấp cho bạn khá nhiều các API, hỗ
trợ đa nền tảng giúp bạn tiết kiệm thời gian quản lý cũng như đồng bộ dữ liệu cung
cấp hosting, hỗ trợ xác thực người dùng thì việc triển khai ứng dụng sẽ giảm được
rất nhiều thời gian phát triển.

-

Bảo mật: Với việc sử dụng các kết nối thông qua giao thức bảo mật SSL hoạt động
trên nền tảng cloud đồng thời cho phép phân quyền người dùng database bằng cú
pháp javascipt cũng nâng cao hơn nhiều độ bảo mật cho ứng dụng của bạn.

-

Sự ổn định: Firebase hoạt động dựa trên nền tảng cloud cung cấp bởi Google do đó
hãy yên tập về việc một ngày đẹp trời nào đó server ngừng hoạt động hay như DDOS
hoặc là tốc độ kết nối như rùa bò. Một điều đáng lưu ý nữa đó là do hoạt động trên
nền tảng Cloud vì vậy việc nâng cấp hay bảo trì server cũng diễn ra rất đơn giản mà
không cần phải dừng server.

CHƯƠNG 3: PHÁT BIỂU BÀI TOÁN
3.1 Khảo sát hiện trạng
3.1.1 Phát biểu bài toán
Cùng với sự phát triển của mạng internet, các xu hướng thời trang ngày càng được phổ
biến cũng như nhu cầu mua bán các mặt hàng thời trang ngày càng tăng cao, một trong
số đó là những đơi giày – một phụ kiện thời trang thiết yếu trong cuộc sống hàng ngày.
Đặt ra nhu cầu cho các cửa hàng bán giày về một công cụ quản giúp đỡ quản lý cửa
hàng. Vì vậy phần mềm Quản Lý Bán Giày ra đời nhằm giải quyết các nhu cầu:
-

Tích hợp bán giày online và quản lý cửa hàng vào một phần mềm chung.

24


-

Tăng tốc độ xử lý các nghiệp vụ nhờ sự giúp đỡ của phần mềm.

-

Tăng tính chính xác và bảo mật của các tài liệu so với phương pháp lập và lưu trữ
truyền thống.
3.1.2 Khảo sát
- Tên phương pháp: Phỏng vấn và nghiên cứu qua thực tế.
- Đối tượng khảo sát:
● Cửa hàng: Shop giày Hải Lâm
o Địa chỉ: Số 43, Nguyễn Văn Ni, Tổ 10, Khu Phố 2, Thị trấn
Củ Chi, Huyện Củ Chi, Tp. Hồ Chí Minh
o Chủ cửa hàng: Cô Nguyễn Thị Hải
o Các nhân viên trong cửa hàng
● Các bạn sinh viên trường Đại học Công nghệ thông tin
● Website bán hàng online:
o
o
o

-

Bảng câu hỏi.

Loại

ST

câu hỏi

T

Hiện

1

trang tổ
chức

2

Câu hỏi

Trả lời

Cửa hàng của anh gồm những

Gồm anh và 2 nhân viên bán

chức vụ nào?

hàng, 1 nhân viên kế tốn.

Mỗi vị trí đảm nhiệm những
nhiệm vụ gì?

- Anh là chủ cửa hàng, đảm nhận
việc nhập hàng, quản lí thu chi,
quản lí kho và có thể bán hàng.

25