Đồ án tìm hiểu reactjs và xây dựng web quản lý nhà hà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

BÁO CÁO ĐỒ ÁN 2
ĐỀ TÀI:
TÌM HIỂU REACTJS VÀ XÂY DỰNG WEB
QUẢN LÝ NHÀ HÀNG

Giảng viên hướng dẫn: ThS. Huỳnh Hồ Thị Mộng Trinh
Nhóm thực hiện:

19522167 – Trương Xn Tâm
19522025 – Võ Đơng Phú


MỤC LỤC

MỤC LỤC

2

LỜI CẢM ƠN

4

Chương 1 - TỔNG QUAN ĐỀ TÀI
1.1. Mơ tả bài tốn
1.2. u cầu đặt ra

5

5
6

Chương 2 - PHÂN TÍCH ĐẶC TẢ YÊU CẦU
2.1 Sơ đồ usecase
2.1.1 Use Case khách hàng
2.1.2 Use Case Admin
2.1.3 Danh sách các Actor
2.1.4 Danh sách các Use-case
2.1.5 Đặc tả Use-case
2.1.6 COMPONENT DIAGRAM, DEPLOYMENT
2.1.6.1 Component diagram
2.1.6.2 Deployment diagram

8
8
9
9
10
11
12
18
18
19

Chương 3 : THIẾT KẾ KIẾN TRÚC DỮ LIỆU
3.1 Kiến trúc tổng thể của hệ thống
3.2 Kiến trúc mơ hình
3.2.1 Cấu trúc mơ hình MVC
3.2.2 Mơ hình MVC trong ứng dụng Web

3.2.3 NodeJS
3.2.4 ReactJS
3.2.5 MongoDB

20
20
20
21
22
23
24
30

Chương 4 : THIẾT KẾ DỮ LIỆU
4.1 Sơ đồ logic
4.2 Mô tả chi tiết kiểu dữ liệu
4.2.1 Bảng user
4.2.2 Bảng AwersomeService

32
32
32
33
33
2


4.2.3 Bảng Table Type
4.2.4 Bảng Food
4.2.5 Bảng Booking

4.2.6 Bảng Image Gallery

34
34
35
36

Chương 5 - Thiết kế giao diện
5.1. Danh sách các màn hình
5.2. Mơ tả các màn hình
5.2.1. Màn hình Register
5.2.2. Màn hình Log in
5.2.3. Màn hình đổi mật khẩu
5.2.4 Màn hình Home
5.2.5 Màn hình List Table
5.2.6 Màn hình Contact Us
5.2.7 Màn hình Book Online
5.2.8 Màn hình Book món ăn
5.2.9. Màn hình quản lí tài khoản khách hàng
5.2.10. Màn hình thêm tài khoản khách hàng
5.2.11. Màn hình cập nhật tài khoản khách hàng
5.2.12. Màn hình quản lý món ăn
5.2.13. Màn hình thêm món ăn
5.2.14. Màn hình cập nhật thơng tin món ăn
5.2.15. Màn hình quản lý bàn ăn
5.2.16. Màn hình thêm bàn ăn
5.2.17. Màn hình cập nhật thơng tin bàn ăn
5.2.18. Màn hình quản lý đặt bàn
5.2.19. Màn hình chi tiết thông tin đặt bàn

37
37
38
38
40
42
43
48
50
50
51
53
53
54
55
56
56
57
58
58
59
60

CHƯƠNG 6: TỔNG KẾT
6.1 Công nghệ sử dụng
6.2 Mức độ hoàn thiện:
6.3.1 Kết quả đạt được:
6.3.2 Hướng phát triển:

61

61
61
62
62

CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC

63

3


CHƯƠNG 8: TÀI LIỆU THAM KHẢO

64

LỜI CẢM ƠN
Trong quá trình học tập, nghiên cứu và phát triển đề tài 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.
Nhóm em xin chân thành gửi lời cảm ơn đến cô Huỳnh Hồ Thị Mộng Trinh –
Giảng viên Khoa Công Nghệ Phần Mềm, Trường Đại học Công Nghệ Thông
Tin, Đại học Quốc gia Thành phố Hồ Chí Minh – giảng viên dạy hướng dẫn
mơn Đồ án 2, đã tận tình hướng dẫn và giúp đỡ về kiến thức, phương pháp cho
chúng em trong suốt q trình thực hiện và hồn thành đồ án.
Hi vọng với sự chỉ bảo và góp ý từ cơ, 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 khơng
thể tránh khỏi những hạn chế, thiếu sót. Chúng em mong rằng sẽ nhận được
những đóng góp và nhận xét chân thành từ cô, các bạn sinh viên và người dùng
trong quá trình sử dụng phần mềm để phần mềm ngày càng hồn thiện hơn

nữa. Mọi đóng góp xin vui lịng gửi về email: hoặc

Mỗi ý kiến đóng góp của cô và các bạn sẽ là một nguồn động lực to lớn đối với
4


chúng em để chúng em có thể cải thiện phần mềm tốt hơn và xây dựng những
phần mềm hữu ích đối với người dùng hơn nữa.
Chúng em xin trân trọng cảm ơn.

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

Chương 1 - TỔNG QUAN ĐỀ TÀI
1.1. Mô tả bài tốn
Trong thời buổi cơng nghệ thơng tin, và Internet bùng nổ như hiện nay, việc
triển khai và sử dụng website trong lĩnh vực quản lý nhà hàng khách sạn đã giúp
tối ưu hóa và giảm được nhân cơng cũng như các cơng việc phức tạp như tính tốn,
trích xuất và xử lý nhanh hơn giúp người dùng tiết kiệm thời gian và mang lại cho
họ cảm giác trải nghiệm tuyệt vời hơn.
Việc xây dựng website quản lý thông tin nhà hàng sẽ hỗ trợ truyền thông,
quảng bá thương hiệu. Trang web là nơi thể hiện những điều tốt đẹp diễn ra trong
nhà hàng, các hình ảnh video hay các tin tức sự kiện được cập nhật liên tục sẽ đem
nhà hàng gần gũi hơn với những người đang sử dụng cơng nghệ. Qua đó, nhà hàng
sẽ tăng số lượng thực khách và tạo ra lợi nhuận lớn, tăng cường mạng lưới khách
hàng qua tương tác online. Các dịch vụ đặt món ăn, đặt bàn, thanh tốn online sẽ
làm cho khách hàng cảm thấy hứng thú hơn cũng như tiết kiệm được rất nhiều thời
gian. Qua website khách hàng sẽ được nhân viên hệ thống tư vấn tận tình và nhanh
chóng. Thơng qua website việc quản lý nhà hàng sẽ dễ dàng và đạt được hiệu quả
cao. Các công cụ đo lường, biểu đồ phát triển sẽ giúp người quản lý kiểm soát
được tất cả mọi vấn đề trong nhà hàng. Ngồi ra xây dựng website quản lý thơng

5


tin nhà hàng sẽ tiết kiệm được khoảng chi phí, nguồn nhân lực. Như vậy, sẽ tăng
thêm tiềm lực cạnh tranh trong ngành.
Chính vì vậy nhóm em tìm hiểu để triển khai ứng dụng website quản lý
thông tin nhà hàng. Để tạo kết nối với khách hàng và dễ dàng trong quản lý thu chi,
quản lý nhân viên, quản lý các món ăn thức uống. Thúc đẩy sự phát triển của nhà
hàng, hiện đại trong việc quản lý.
Trong quá trình xây dựng ứng dụng website quản lý thông tin nhà hàng.
Nhóm chúng em đã triển khai lên AWS (amazon web services). Người dùng có thể
truy cập vào hệ thống bất kỳ ở đâu có internet để sử dụng các chức năng của nhà
hàng.

1.2. Yêu cầu đặt ra
- Một số yêu cầu nhóm đặt ra khi phát triển ứng dụng:
+ Tính tiện dụng: ứng dụng phải thân thiện với người dùng, dễ dàng tiếp cận
với mọi lứa tuổi
+ Tính đúng đắn: thông tin đưa lên phải được xác thực kĩ về độ chính xác, ứng
dụng chạy khơng lỗi
+ Tính thích nghi: ứng dụng chạy được trên nhiều nền tảng trình duyệt web
khác nhau
+ Tính tiến hố: ứng dụng phải dễ dàng phát triển thêm tính năng mà khơng
ảnh hưởng đến các tính năng đã phát triển trước đó
+ Tính bảo trì: ứng dụng có thể thay đổi một số chức năng hoặc cập nhật thêm
thông tin một cách tiện lợi nhất
+ Tính tương tác: tạo ra được một mơi trường tương tác tốt giữa hệ thống và
người dùng

6


7


Chương 2 - PHÂN TÍCH ĐẶC TẢ YÊU CẦU
2.1 Sơ đồ usecase

Hình 2.1 Sơ đồ usecase hệ thớng

8


2.1.1 Use Case khách hàng

Hình 2.1.1 Usecase khách hàng

2.1.2 Use Case Admin

9


Hình 2.1.2 Use Case Admin

2.1.3 Danh sách các Actor
Bảng 3. 1 Danh sách các Actor

STT

Tên Actor

1

Customer
hàng)

Ý nghĩa/Ghi chú
(khách khách vãng lai, hoặc khách hàng có thế order
món ăn ,đặt bàn, xem thông tin món ăn , danh
sách món ăn,,,

2

Admin

quản lý toàn bộ hệ thống

10


2.1.4 Danh sách các Use-case
Bảng 3. 2 Danh Sách các Use-case

ST

Tên Use-case

Ý nghĩa/Ghi chú

1

Đăng nhập

Đăng nhập vào hệ thống

2

Đăng xuất

Thoát khỏi hệ thống

3

Đăng ký tài khoản

Đăng ký tài khoản mới

4

Đổi mật khẩu

Đổi mật khẩu

5

Xem thông tin của cửa hàng

Xem thông tin món ăn thức uống, các

T

chương trình khuyến mãi, thơng tin,
giới thiệu website…
6

Xem menu món ăn

Xem menu các món ăn trong cửa hàng

7

Đặt bàn

Khách hàng nhập thông tin để đặt bàn

8

Đặt món

Khách hàng đặt món sau khi đặt bàn

9

Thêm tài khoản khách hàng

Admin thêm tài khoản khách hàng vào
hệ thống

10

Xóa tài khoản khách hàng

Admin xóa tài khoản khách hàng khỏi
hệ thống

11

Cập nhật tài khoản khách hàng

Admin cập nhật tài khoản của khách
hàng.

12

Thêm món ăn

Admin thêm món ăn vào hệ thống

13

Xóa món ăn

Admin xóa món ăn ra khỏi hệ thống.

14

Cập nhật thơng tin món ăn

Admin cập nhật thơng tin món ăn

15

Thêm bàn ăn

Admin thêm bàn ăn vào hệ thống

16

Xóa bàn ăn

Admin xóa bàn ăn ra khỏi hệ thống.

17

Cập nhật thơng tin bàn ăn

Admin cập nhật thông tin bàn ăn

11


18

Quản lý đặt bàn

Xem thông tin chi tiết khách hàng đặt
bàn

2.1.5 Đặc tả Use-case

Use-Case “Đăng nhập”
Bảng 3. 3 Use-case đăng nhập

Tóm tắt

- Use-case được sử dụng để đăng nhập vào hệ thống. Chỉ
khi đăng nhập được vào hệ thống thì người dùng mới
được cấp quyền sử dụng các chức năng nghiệp vụ của hệ
thống.
- Use-case bắt đầu khi hệ thống được kích hoạt và chưa
đăng nhập dưới quyền sử dụng của bất kỳ người dùng
nào. Hoặc khi người dùng chọn đăng xuất ra khỏi hệ
thống.

Dịng sự kiện chính

1. Người dùng nhập thông tin tài khoản đăng nhập, bao
gồm tên đăng nhập và mật khẩu đăng nhập.
2. Hệ thống kiểm tra thơng tin đăng nhập chính xác.
3. Hiển thị trang thơng tin quản lý cơng việc, quản lý chi
tiêu cá nhân.

Dịng sự kiện phụ

1. Hệ thống kiểm tra thông tin đăng nhập khơng chính
xác.
2. Hiển thị báo lỗi trên màn hình đăng nhập.

Các yêu cầu đặc biệt - Có kết nối internet
Tiền điều kiện

- Trạng thái chưa đăng nhập.

(pre-condition)

- Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện

- Hệ thống rơi vào một trong hai trạng thái:

(post-condition)

12


+ Đã đăng nhập: sẵn sàng làm việc với người dùng đã
đăng nhập.
+ Chưa đăng nhập: sẵn sàng cho người dùng đăng nhập
lại.
- Hệ thống sẵn sàng cho các thao tác từ người dùng.
Use-Case “Đăng xuất”
Bảng 3. 4 Use-case đăng xuất

Tóm tắt

- Use-case được sử dụng để đăng xuất ra khỏi hệ thống.
Sau khi đăng xuất, hệ thống sẽ kết thúc phiên làm việc
của người dùng, dữ liệu và phiên làm việc của người
dùng sẽ được xóa bỏ tại local.

- Use-case bắt đầu khi hệ thống đang ở trạng thái “Đã
đăng nhập” và người dùng muốn kết thúc phiên làm việc
và chọn đăng xuất ra khỏi hệ thống.

Dòng sự kiện chính

1. Hệ thống kết thúc phiên làm việc với người dùng, hệ
thống chuyển sang trạng thái “Chưa đăng nhập”.
2. Hệ thống xóa tồn bộ dữ liệu của người dùng trong
local (thiết bị đang sử dụng).
3. Hệ thống quay trờ về màn hình đăng nhập.

Dịng sự kiện phụ

- Hệ thống gặp lỗi trong q trình xóa dữ liệu. Hệ thống
sẽ báo lỗi cho người dùng, tiếp tục đăng xuất ra khỏi hệ
thống. Dữ liệu chưa được xóa hết sẽ được làm mới trong
quá use-case đồng bộ dữ liệu.

Các yêu cầu đặc biệt Khơng có
Tiền điều kiện

- Hệ thống đang ở trong trạng thái “Đã đăng nhập”.

(pre-condition)
Hậu điều kiện

- Hệ thống sẽ rơi vào trạng thái “Chưa đăng nhập”.

13

(post-condition)

- Dữ liệu người dùng trong hệ thống được làm mới.
- Hệ thống sẵn sàng cho các thao tác từ người dùng.

Use-Case “Đăng ký tài khoản”
Bảng 3. 5 Use-case đăng ký tài khoản

Tóm tắt

- Use-case được sử dụng để tạo mới thông tin người
dùng hệ thống, đăng ký tài khoản sử dụng hệ thống.
- Use-case bắt đầu khi hệ thống đang ở trạng thái “Chưa
đăng nhập” và người dùng chọn khởi tạo tài khoản hệ
thống.

Dịng sự kiện chính

1. Người dùng nhập thông tin đăng ký: thông tin cá nhân
được yêu cầu, thông tin tài khoản đăng nhập.
2. Hệ thống kiểm tra tính hợp lệ thơng tin đăng ký của
người dùng.
3. Hệ thống xác định thông tin đăng ký hợp lệ.
4. Hệ thống đăng ký thông tin người sử dụng, và cấp
quyền cho người dùng vừa đăng ký.
5. Hệ thống thông báo người dùng đã được đăng ký
thành công cho người dùng.
6. Hệ thống hiển thị trang chủ của cửa hàng

Dòng sự kiện phụ

1. Hệ thống xác định thông tin đăng ký khơng hợp lệ:
trùng lắp, khơng chính xác, v.v…
2. Hệ thống báo lỗi ra màn hình đăng ký.

Các yêu cầu đặc biệt - Có kết nối internet.
Tiền điều kiện

- Hệ thống đang ở trong trạng thái “Chưa đăng nhập”.

(pre-condition)

- Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện

- Hệ thống sẽ rơi vào trạng thái “đã đăng nhập”.

(post-condition)

- Hệ thống sẵn sàng cho các thao tác từ người dùng.

14


Use-Case “Thêm account”
Bảng 3. 8 Use-case thêm account

Tóm tắt

- Use-case được sử dụng để thêm thông tin một tài khoản
vào hệ thống.

Dịng sự kiện chính

1. Quản lý điền thơng tin của nhân viên mới vào hệ
thống
2. Hệ thống kiểm tra tính hợp lệ thơng tin
3. Xác nhận thơng tin hợp lệ
4. Hệ thống thêm thông tin nhân viên vào cơ sở dữ liệu
nếu hợp lệ.

Dòng sự kiện phụ

1. Hệ thống xác định thông tin nhân viên không hợp lệ
2. Thông báo ra màn hình thơng tin khơng hợp lệ

Các u cầu đặc biệt - Có kết nối internet.
Tiền điều kiện

- Hệ thống đang ở trong trạng thái “đăng nhập”.

(pre-condition)

- Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện

- Hệ thống sẵn sàng cho các thao tác từ người dùng.

(post-condition)
Use-Case “Thêm bàn”
Bảng 3. 9 Use-case thêm bàn

Tóm tắt

- Use-case được sử dụng để thêm thông tin một bàn ăn
vào hệ thống.
- Use-case bắt đầu khi ở trạng tháí “đã đăng nhập” và
nhân viên chọn chức năng thêm bàn ăn

Dịng sự kiện chính

1. Quản lý điền thơng tin của bàn ăn mới vào hệ thống
2. Hệ thống kiểm tra tính hợp lệ thơng tin
3. Xác nhận thơng tin hợp lệ

15


4. Hệ thống thêm thông tin bàn ăn vào cơ sở dữ liệu nếu
hợp lệ.
Dòng sự kiện phụ

1. Hệ thống xác định thông tin bàn ăn không hợp lệ
2. Thông báo ra màn hình thơng tin khơng hợp lệ

Các u cầu đặc biệt - Có kết nối internet.

Tiền điều kiện

- Hệ thống đang ở trong trạng thái “đăng nhập”.

(pre-condition)

- Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện

- Hệ thống sẵn sàng cho các thao tác từ người dùng.

(post-condition)
Use-Case “Xem món ăn”
Bảng 3. 10 Xem món ăn

Tóm tắt

- Use-case được sử dụng để xem danh sách món ăn hiện có
- Use-case bắt đầu khi ở trạng tháí “đã đăng nhập” và vào
trang danh sách món ăn

Dịng sự kiện chính

1. Người dùng đăng nhập vào hệ thống
2. Hệ thống kiểm tra tính hợp lệ thơng tin
3. Xác nhận thông tin hợp lệ
4. Người dùng chọn vào “List food “ hoặc xem menu hiện
có trên thanh header

Dịng sự kiện phụ
Các yêu cầu đặc biệt - Có kết nối internet.
Tiền điều kiện

- Hệ thống đang ở trong trạng thái “đăng nhập”.

(pre-condition)

- Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện

- Hệ thống sẵn sàng cho các thao tác từ người dùng.

(post-condition)
Use-Case “Thêm món ăn”

16


Bảng 3. 11 Thêm món ăn

Tóm tắt

- Use-case được sử dụng để thêm thơng tin một món ăn vào
hệ thống.
- Use-case bắt đầu khi ở trạng thái “đã đăng nhập” và nhân
viên chọn chức năng thêm món ăn

Dịng sự kiện chính

1. Quản lý điền thơng tin của món ăn vào hệ thống
2. Hệ thống kiểm tra tính hợp lệ thơng tin
3. Xác nhận thông tin hợp lệ
4. Hệ thống thêm thơng tin món ăn vào cơ sở dữ liệu nếu
hợp lệ.

Dịng sự kiện phụ

1. Hệ thống xác định thơng tin món ăn khơng hợp lệ
2. Thơng báo ra màn hình thông tin không hợp lệ

Các yêu cầu đặc biệt - Có kết nối internet.
Tiền điều kiện

- Hệ thống đang ở trong trạng thái “đăng nhập”.

(pre-condition)

- Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện

- Hệ thống sẵn sàng cho các thao tác từ người dùng.

(post-condition)
Use-Case “Đặt món”
Bảng 3. 12 Use-case đặt món

Tóm tắt

- Use-case được sử dụng để thêm thơng tin đặt món vào hệ
thống.
- Use-case bắt đầu khi ở trạng thái “đã đăng nhập” và
khách hàng chọn chức năng đặt món

Dịng sự kiện chính

1. Nhân viên điền thơng tin đặt món vào hệ thống
2. Hệ thống kiểm tra tính hợp lệ thơng tin
3. Xác nhận thơng tin hợp lệ

17


4. Hệ thống thêm thơng tin đặt món vào cơ sở dữ liệu nếu
hợp lệ.
Dòng sự kiện phụ

1. Hệ thống xác định thơng tin đặt món khơng hợp lệ
2. Thơng báo ra màn hình thơng tin khơng hợp lệ

Các u cầu đặc biệt - Có kết nối internet.
Tiền điều kiện

- Hệ thống đang ở trong trạng thái “đăng nhập”.

(pre-condition)

- Hệ thống đã được kết nối thành công tới server.

Hậu điều kiện

- Hệ thống sẵn sàng cho các thao tác từ người dùng.

(post-condition)

2.1.6 COMPONENT DIAGRAM, DEPLOYMENT
2.1.6.1 Component diagram

18


Hình 3. 2 Sơ đồ triển khai của hệ thống

2.1.6.2 Deployment diagram

Hình 3. 3 Sơ đồ thành phần của hệ thống

19


Chương 3 : THIẾT KẾ KIẾN TRÚC DỮ LIỆU
3.1 Kiến trúc tổng thể của hệ thống

Hình 3.1 Mern stack Development

MERN Stack :MERN stack là nguyên bộ combo open source các công nghệ đều
liên quan đến Javascript là cũng hot nhất hiện nay: MongoDB, ExpressJS,
React/React Native, NodeJS. Người ta dùng MERN stack để xây dựng React

Universal App.

3.2 Kiến trúc mơ hình
Mơ hình MVC (Model – View – Controller) là một trong những mơ hình kiến
trúc ứng dụng phổ biến nhất. Ban đầu mơ hình này được áp dụng chủ yếu ở các
ứng dụng desktop, nhưng sau này ý tưởng về mô hình MVC được ứng dụng cho
các nền tảng khác như Web.

20


Hình 3.2.1 Mơ Hình MVC

3.2.1 Cấu trúc mơ hình MVC
Tầng xử lý – Controller
Xử lý logic của ứng dụng, là cầu nối giữa tầng View và Model. Hay nói một
cách cụ thể, Controller sẽ nhận yêu cầu được gửi từ View và thực hiện xử lí yêu
cầu, truy vấn hoặc thao tác dữ liệu lên tầng Model. Sau khi xử lý xong, kết quả sẽ
được trả về lại cho tầng View.

Tầng logic dữ liệu – Model
Tầng Model là trung gian giữa ứng dụng và hệ quản trị cơ sở dữ liệu để cung
cấp và quản lý mơ hình và các thao tác lên dữ liệu. Thông thường, tầng Model sẽ
kết
nối với một hoặc nhiều cơ sở dữ liệu để thực hiện các thao tác lên dữ liệu.
Tầng giao diện – View
Thể hiện giao diện người dùng, là thành phần giao tiếp giữa người dùng (user)
và ứng dụng (application).

21

3.2.2 Mơ hình MVC trong ứng dụng Web
Với sự phát triển của các công nghệ xây dựng web ở cả Frontend và Backend,
các nhà phát triển có thể xây dựng và phát triển ứng dụng web một cách độc lập
nhưng vẫn đảm bảo được tính kiến trúc của ứng dụng.

Hình 3.2.2 Mơ Hình MVC trong ứng dụng Web
− Tầng giao diện người dùng (View) sẽ được phát triển độc lập ở phía client sử
dụng các cơng nghệ Frontend như VueJS, ReactJS, ... Nói cách khác, client sẽ
được chạy trên 1 server độc lập và có thể tương tác với phía server của backend.
− Tầng xử lí (Controller) và logic dữ liệu (Model) sẽ được phát triển độc lập ở
phía server sử dụng các công nghệ Backend như ExpressJS, DotNetCore, Flank,
...
− Sau khi hoàn thành việc phát triển, client sẽ cung cấp 1 bản build hồn chỉnh để
thêm vào phía Server. Người dùng sẽ yêu cầu thành phần giao diện thông qua
request gửi đến Server.

22


3.2.3 NodeJS

Hình 3.2.3 Nodejs
Nodejs là gì ?
NodeJS là mã nguồn mở chạy trên mơi trường V8 JavaScript runtime (một trình
thơng dịch JavaScript chạy cực nhanh trên trình duyệt Chrome). NodeJS giúp các
nhà phát triển xây dựng các ứng dụng web một cách đơn giản và dễ dàng mở rộng.
NodeJS có thể được dùng để xây dựng các loại ứng dụng khác nhau như các ứng
dụng dòng lệnh, ứng dụng web, ứng dụng trò chuyện theo thời gian thực, máy chủ

REST API,.. Tuy nhiên, NodeJS thường được dùng chủ yếu để xây dựng các
chương trình mạng như máy chủ web, tương tự như PHP, Java hoặc ASP.NET.
Vì đây là mã nguồn mở nên cho phép bạn sử dụng miễn phí và đồng thời được liên
tục được chỉnh sửa, cải tiến bởi cộng đồng các nhà phát triển tồn cầu.
Lợi ích sử dụng Nodejs
● IO hướng sự kiện không đồng bộ giúp xử lý nhiều yêu cầu đồng thời.
● Đáp ứng được những yêu cầu về thời gian thực.

23


● Có tốc độ cực rất nhanh, đáp ứng được nhu cầu sử dụng của khách truy cập
‘khổng lồ’ trong thời gian ngắn.
● Sử dụng JavaScript, một ngôn ngữ lập trình rất dễ học.
● Chia sẻ cùng một đoạn mã với cả phía máy chủ và máy khách.
● Npm và các module rất mạnh mẽ và vẫn đang tiếp tục phát triển.
● Có một cộng đồng lớn mạnh, có nhiều mã được chia sẻ qua github
● Tương thích với nhiều thiết bị, nhiều hệ điều hành như MacOS, Window,
Linux,…

3.2.4 ReactJS

Hình 3.2.4 Reactjs
ReactJS là gì?
ReactJS là một thư viện JavaScript được tạo ra để xây dựng giao diện người dùng
có khả năng tương tác tốt và nhanh chóng cho các ứng dụng web và di động. Nó là

24

một thư viện mã nguồn mở, xây dựng dựa trên các component, giao diện người
dùng chỉ chịu trách nhiệm cho tầng view của ứng dụng.
Nó được sử dụng bởi các công ty lớn, đã thành lập và các công ty mới thành lập
như: Netflix, Airbnb, Instagram và New York Times..v..v. ReactJS mang lại nhiều
lợi thế cho các lập trình viên, khiến nó trở thành một lựa chọn tốt hơn so với các
Framework khác như Angular.
Trong kiến ​trúc Model View Controller (MVC), tầng view chịu trách nhiệm về
giao diện của ứng dụng. ReactJS được tạo ra bởi Jordan Walke, một kỹ sư phần
mềm tại Facebook.

Các tính năng của ReactJS
Chúng ta đã vừa tìm hiểu ReactJS là gì rồi, vậy bây giờ hãy xem nó có những tính
năng gì mà khiến cho nhiều cơng ty sử dụng nó đến vậy.
JSX – JavaScript Syntax Extension
JSX như tên gọi của nó, là một phần mở rộng cú pháp cho JavaScript. Nó được sử
dụng với ReactJS để mô tả giao diện người dùng trông như thế nào. Bằng cách sử
dụng JSX, chúng ta có thể viết các cấu trúc HTML trong cùng một tệp chứa mã
25