Đồ án xây dựng hệ thống quản lí cửa hàng ký gửi quần áo cũ

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

Xây dựng hệ thống quản lí cửa hàng ký gửi quần áo cũ

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

ThS. Trần Thị Hồng Yến

Sinh viên thực hiện 1

:

Huỳnh Mình Chí

Mã sinh viên 1

:

20521130

Sinh viên thực hiện 2

:

Nguyễn Hữu Trung Kiên

Mã sinh viên 2

:

205211489

TP. HỒ CHÍ MINH, 2023


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
Ngày…tháng……năm 2023
Ngươi nhận xét
(Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN

Đầu tiên, chúng tôi xin gửi lời cảm ơn chân thành đến Cô Trần Thị Hồng Yến –
giảng viên bộ môn Nhập môn Công nghệ phần mềm. Cô đã trực tiếp hướng dẫn,
tận tình chia sẻ những kiến thức, hỗ trợ và đóng góp những ý kiến quý báu để
giúp chúng tơi hồn thành thật tốt đồ án và báo cáo của mình.
Trong thời đại cơng nghệ phát triển mạnh mẽ vượt bậc ngày nay, việc quản lý
và kinh doanh cửa hàng ký gửi quần áo cũ đòi hỏi sự hiệu quả và tiện lợi. Chính
nhận thức về điều này đã thúc đẩy chúng tôi xây dựng ứng dụng web "PlanB" một hệ thống quản lí cửa hàng ký gửi quần áo cũ, nhằm hỗ trợ chủ cửa hàng
trong việc quản lý hàng hóa, bán hàng và tối ưu hóa quy trình kinh doanh. Đồng
thời, ứng dụng cũng mang đến cho khách hàng một trải nghiệm mua sắm trực
tuyến thuận tiện và dễ dàng tìm kiếm những sản phẩm quần áo chất lượng từ
cửa hàng ký gửi.
Trong quá trình thực hiện đồ án, chúng tơi khơng tránh khỏi những thách thức
và sai sót, nhưng sự hỗ trợ và góp ý chân thành từ Cơ đã giúp chúng tơi vượt
qua những khó khăn và hồn thiện đồ án một cách tốt nhất. Chúng tôi xin cam
kết sẽ tiếp thu và áp dụng những kinh nghiệm quý báu này để nâng cao khả
năng thực hiện các dự án tương lai.
Một lần nữa, chúng tôi xin chân thành cảm ơn Cô Trần Thị Hồng Yến và hy
vọng sự đóng góp của Cô sẽ tiếp tục giúp đỡ và hỗ trợ chúng tơi trong hành
trình học tập và nghiên cứu trong tương lai.

Xin chân thành cảm ơn q thầy cơ !
Nhóm sinh viên thực hiện:
Huỳnh Minh Chí - 20521130
Nguyễn Hữu Trung Kiên - 20521489


MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI .............................................................................................2

1.1 Đặt vấn đề ................................................................................................................................... 2
1.2 Giải Pháp .....................................................................................................................................2
1.3 Mục tiêu đề tài ...........................................................................................................................2
1.4 Đối tượng sử dụng ................................................................................................................... 3
1.5 Công cụ sử dụng .......................................................................................................................3
1.6 Phạm vi nghiên cứu .................................................................................................................4

1.7 Tổng quan về đồ án ................................................................................................................. 4

CHƯƠNG 2: TÌM HIỂU CƠ SỞ LÝ THUYẾT ......................................................................6
2.1 Thiết kế giao diện người dùng Figma .............................................................................. 6
2.2 Ngơn ngữ lập trình JavaScript .............................................................................................7

2.3 ReactJS ......................................................................................................................................10
2.4 NodeJS ...................................................................................................................................... 12
2.5 Phần mềm lập trình VSCode ............................................................................................ 13
2.6 Dịch vụ Github .......................................................................................................................16

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ..........................................................18
3.1 ĐẶC TẢ USE CASE ...........................................................................................................18
3.2 PHÂN TÍCH HỆ THỐNG .................................................................................................32
3.3 THIẾT KẾ DỮ LIỆU .......................................................................................................... 33

CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG ................................................................................38
4.1 THIẾT KẾ GIAO DIỆN .....................................................................................................38
4.2 CÀI ĐẶT VÀ THỬ NGHIỆM ........................................................................................ 52


CHƯƠNG 5: NHẬN XÉT VÀ KẾT LUẬN .......................................................................... 53
5.1 Kết quả đạt được ....................................................................................................................53

5.2 Hạn chế ..................................................................................................................................... 53
5.3 Hướng phát triển ....................................................................................................................54

TÀI LIỆU THAM KHẢO ..............................................................................................................56


DANH MỤC BẢNG
Bảng 3.1. Danh sách Use Case .....................................................................................................18
Bảng 3.2. Use case Đăng nhập .....................................................................................................19
Bảng 3.3. Use case Đăng xuất ...................................................................................................... 20
Bảng 3.4. Use case Quản lý Ký gửi ............................................................................................21
Bảng 3.5. Use case Quản lý Thanh toán .................................................................................22
Bảng 3.6. Use case Quản lý Hóa đơn....................................................................................... 23
Bảng 3.7. Use case Quản lý Khách hàng ................................................................................ 24
Bảng 3.8. Use case Quản lý Sản phẩm .................................................................................... 26
Bảng 3.9. Use case Biểu đồ .......................................................................................................... 27
Bảng 3.10. Use case Quản lý Nhân viên .................................................................................28
Bảng 3.11. Use case Quản lý Chấm công ............................................................................... 29
Bảng 3.12. Use case Báo cáo ....................................................................................................... 30
Bảng 3.13. Use case Quản lý Tài khoản ................................................................................. 31
Bảng 3.14 Bảng thuộc tính Khách hàng .................................................................................34
Bảng 3.15 Bảng thuộc tính Nhân viên....................................................................................34
Bảng 3.16 Bảng thuộc tính Sản phẩm .................................................................................... 35
Bảng 3.17 Bảng thuộc tính Ký gửi ............................................................................................35
Bảng 3.18 Bảng thuộc tính Hóa đơn Ký gửi chi tiết.........................................................36
Bảng 3.19 Bảng thuộc tính Sản phẩm đã bán..................................................................... 36
Bảng 3.20 Bảng thuộc tính Lương........................................................................................... 36
Bảng 3.21 Bảng thuộc tính Sản phẩm trả lại.......................................................................37
Bảng 3.22 Bảng thuộc tính doanh thu ....................................................................................37

Bảng 4.1. Danh sách các màn hình ...........................................................................................38
Bảng 4.2. Mơ tả cách sử dụng màn hình Đăng nhập ........................................................39
Bảng 4.3. Mơ tả cách sử dụng màn hình Trang chủ.........................................................40
Bảng 4.4. Mơ tả cách sử dụng màn hình Ký gửi .................................................................40
Bảng 4.5. Mơ tả cách sử dụng màn hình Thơng tin sản phẩm .................................... 41
Bảng 4.6. Mô tả cách sử dụng màn hình Thanh tốn ...................................................... 42
Bảng 4.7. Mơ tả cách sử dụng màn hình Quản lý Hóa đơn........................................... 43
Bảng 4.8. Mơ tả cách sử dụng màn hình Chi tiết Hóa đơn Ký gửi............................. 44
Bảng 4.9. Mô tả cách sử dụng màn hình Quản lý Khách hàng .................................... 44
Bảng 4.10. Mơ tả cách sử dụng màn hình Thơng tin Khách hàng ............................. 45
Bảng 4.11. Mơ tả cách sử dụng màn hình Quảng lý Sản phẩm ................................... 46

Bảng 4.12. Mô tả cách sử dụng màn hình Chỉnh sửa Sản phẩm ................................ 46
Bảng 4.13. Mơ tả cách sử dụng màn hình Biểu đồ ............................................................47
Bảng 4.14. Mơ tả cách sử dụng màn hình Quản lý Nhân viên .....................................48
Bảng 4.15. Mô tả cách sử dụng màn hình Thơng tin Nhân viên................................ 48
Bảng 4.16. Mơ tả cách sử dụng màn hình Thơng tin Nhân viên................................ 49
Bảng 4.17. Mơ tả cách sử dụng màn hình Lịch làm việc................................................ 50
Bảng 4.18. Mơ tả cách sử dụng màn hình Báo cáo ........................................................... 50
Bảng 4.19. Mô tả cách sử dụng màn hình Quản lý Tài khoản..................................... 51
Bảng 4.20. Mơ tả cách sử dụng màn hình thơng tin Tài khoản.................................. 52


DANH MỤC HÌNH
Hình 2. 1. Figma ...................................................................................................................................6
Hình 2. 2. JavaScript ........................................................................................................................... 8

Hình 2. 3. ReactJS ............................................................................................................................. 10
Hình 2. 4. NodeJS ..............................................................................................................................12

Hình 2. 5. Visual Studio Code ......................................................................................................14
Hình 2. 6. Github ............................................................................................................................... 16
Hình 3. 1. Sơ đồ Use case ...............................................................................................................18
Hình 3.2. Mơ hình MVC ..................................................................................................................32
Hình 3.3. Sơ đồ Cơ sở dữ liệu..................................................................................................... 34
Hình 4.1. Màn hình Đăng nhập .................................................................................................. 39
Hình 4.2. Màn hình Trang chủ ....................................................................................................39
Hình 4.3. Màn hình Ký gửi ........................................................................................................... 40
Hình 4.4. Thơng tin sản phẩm ....................................................................................................41
Hình 4.5. Màn hình Thanh tốn.................................................................................................42
Hình 4.6. Màn hình Quản lý Hóa đơn ......................................................................................43
Hình 4.7. Chi tiết Hóa đơn Ký gửi .............................................................................................43
Hình 4.8. Màn hình Quản lý Khách hàng ...............................................................................44
Hình 4.9. Thơng tin Khách hàng ................................................................................................45
Hình 4.10. Màn hình Quản lý Sản phẩm ................................................................................45
Hình 4.11. Chỉnh sửa Sản phẩm ................................................................................................ 46
Hình 4.12. Màn hình Biểu đồ ...................................................................................................... 47
Hình 4.13. Màn hình Quản lý Nhân viên............................................................................... 47


Hình 4.14. Thêm Nhân viên........................................................................................................ 48
Hình 4.15. Thơng tin Nhân viên ................................................................................................ 49
Hình 4.16. Màn hình Lịch làm việc...........................................................................................49
Hình 4.17. Màn hình Báo cáo ......................................................................................................50
Hình 4.18. Màn hình Quản lý Tài khoản................................................................................51
Hình 4.19. Màn hình Thơng tin Tài khoản........................................................................... 51


TĨM TẮT ĐỒ ÁN
"PlanB" là một website quản lí cửa hàng ký gửi quần áo cũ, được thiết kế

nhằm hỗ trợ hiệu quả quản lí các cửa hàng, chợ đồ cũ hoặc cá nhân bán đồ
secondhand. Với giao diện trực quan và dễ sử dụng, "PlanB" cung cấp các tính năng
quản lí hàng hóa, bán hàng và thống kê, giúp chủ cửa hàng tối ưu hóa quy trình kinh
doanh.
Website này giúp cho người dùng quản lí và kiểm sốt các mặt hàng trong
cửa hàng, bao gồm thông tin chi tiết, tình trạng, giá cả và các thơng tin liên quan
khác. Ngoài ra, "PlanB" cung cấp chức năng bán hàng, cho phép người dùng thực
hiện giao dịch mua bán một cách thuận tiện và nhanh chóng.
Đặc biệt, "PlanB" cung cấp tính năng thống kê, giúp chủ cửa hàng theo dõi
hiệu suất kinh doanh, xem các thông số như doanh thu, số lượng sản phẩm bán ra và
các chỉ số liên quan khác. Nhờ đó, người dùng có thể đưa ra những quyết định
thơng minh và tối ưu hóa hoạt động kinh doanh của mình.
Với mục tiêu đơn giản hóa quản lí và tối ưu hóa quy trình kinh doanh,
"PlanB" là một giải pháp tiện ích cho các cửa hàng, chợ đồ cũ và cá nhân bán đồ
secondhand, giúp họ nâng cao hiệu suất và đạt được thành công trong việc kinh
doanh các sản phẩm secondhand.
Đồ án bao gồm 5 chương và một phần tài liệu tham khảo:
- Chương 1: giới thiệu chung về đề tài: đặt vấn đề, giải pháp, mục tiêu đề tài,
đối tượng sử dụng, công cụ sử dụng, phạm vi nghiên cứu và tổng quan về đồ án.
- Chương 2: nói tổng quan về cơ sở lý thuyết để xây dựng hệ thống bao gồm:
Figma, ReactJS, NodeJS, VSCode, Github.
- Chương 3: Phân tích thiết kế hệ thống bao gồm đặc tả Use case, phân tích
hệ thống và thiết kế dữ liệu.
- Chương 4: Xây dựng hệ thống: tổng quan về giao diện của hệ thống cũng
như cài đặt và thử nghiệm hệ thống.
- Chương 5: nhận xét và kết luận về hệ thống bao gồm: kết quả đạt được,
những hạn chế và hướng phát triển của hệ thống.

1

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1 Đặt vấn đề
Ngày nay, nhiều cửa hàng kinh doanh hoạt động chủ yếu vẫn mang tính thủ
cơng, dựa vào kinh nghiệm của hệ thống nhân viên. Do đặc điểm lượng hàng hoá
nhập xuất ngày càng lớn nên cơng tác quản lí, mua bán mất rất nhiều thời gian,
cơng sức mà độ chính xác khơng cao, điều này nhiều khi gây thiệt hại cho cửa hàng.
1.2 Giải Pháp
Nhận thấy tình hình trên, nhóm em đã lên ý tưởng xây dựng một ứng dụng
hỗ trợ công tác quản lý và bán hàng. “Xây dựng ứng dụng web Plan” ra đời nhằm
đáp ứng nhu cầu quản lí hàng hóa, bán hàng và tối ưu hóa quy trình kinh doanh.
Đồng thời, nâng cao trải nghiệm của khách hàng.
1.3 Mục tiêu đề tài
- Tối ưu hóa quy trình kinh doanh: "PlanB" được phát triển nhằm tối ưu hóa
quy trình kinh doanh cho các cửa hàng, chợ đồ cũ hoặc cá nhân bán đồ secondhand.
Ứng dụng cung cấp các tính năng quản lý hàng hóa, đặt hàng, ghi chú, và xác định
giá trị hàng hóa. Nhờ đó, người dùng có thể dễ dàng quản lý hàng tồn kho, tạo ra
báo cáo thống kê, và theo dõi lịch sử giao dịch, giúp tăng cường hiệu quả kinh
doanh và tiết kiệm thời gian.
- Nâng cao hiệu suất bán hàng: "PlanB" giúp người dùng nâng cao hiệu suất
bán hàng thông qua việc theo dõi doanh thu, định giá sản phẩm, và quản lý khách
hàng. Các tính năng báo cáo và thống kê của ứng dụng giúp người dùng đánh giá
hiệu quả kinh doanh, xác định các sản phẩm hot nhất và kế hoạch tiếp thị, từ đó tối
ưu hóa doanh thu và tăng cường lợi nhuận.
- Quản lí hàng tồn kho hiệu quả: "PlanB" cung cấp các cơng cụ quản lí hàng
tồn kho giúp người dùng kiểm sốt số lượng, thơng tin và trạng thái của sản phẩm.
Tính năng này giúp người dùng dễ dàng theo dõi số lượng hàng tồn, phân loại sản
phẩm, và nhanh chóng tìm kiếm thơng tin về sản phẩm cụ thể. Điều này giúp người

2

dùng quản lí hàng tồn kho một cách chính xác, tránh thất thốt và lãng phí nguồn
lực.
- Tăng cường khả năng tiếp cận khách hàng: "PlanB" hỗ trợ người dùng
trong việc xây dựng và quản lí danh sách khách hàng, ghi chú các thông tin quan
trọng và theo dõi lịch sử mua hàng của khách hàng. Điều này giúp người dùng tạo
dựng mối quan hệ khách hàng mạnh mẽ, đáp ứng nhu cầu của khách hàng và tăng
cường sự hài lòng của họ.
- Nâng cao trải nghiệm bán hàng: "PlanB" tạo điều kiện thuận lợi cho người
dùng trong việc quản lí và bán hàng secondhand. Ứng dụng cung cấp giao diện dễ
sử dụng, giúp người dùng nhanh chóng đăng tải sản phẩm, cập nhật thơng tin, và
quản lí các hoạt động kinh doanh hàng ngày. Điều này giúp người dùng tạo ra trải
nghiệm bán hàng thuận tiện, đáp ứng nhu cầu ngày càng đa dạng của khách hàng và
tạo dựng lòng tin.
1.4 Đối tượng sử dụng
PlanB hướng đến các chủ cửa hàng, chợ đồ cũ và cá nhân bán đồ secondhand.
Đối tượng sử dụng bao gồm những người muốn quản lí và bán hàng qua mơ hình ký
gửi hoặc bán đồ cũ trực tuyến. Ứng dụng này phù hợp cho các cửa hàng quần áo,
cửa hàng đồ cũ, gian hàng chợ đồ cũ, hay cá nhân có nhu cầu bán hàng secondhand.
"PlanB" giúp đơn giản hóa quy trình quản lí hàng hóa, tăng cường khả năng tiếp cận
khách hàng, và nâng cao trải nghiệm bán hàng.
1.5 Công cụ sử dụng
- Cơng cụ dùng để phân tích, thiết kế: Figma, draw.io, StarUML
- Công cụ phát triển: Visual Studio Code
- Công cụ quản lý dự án: Github, Google Drive, Messenger
- Công cụ soạn thảo văn bản: Microsoft Word

3

1.6 Phạm vi nghiên cứu
- Thiết kế giao diện người dùng: Figma
- Các ngơn ngữ lập trình và cơng nghệ phát triển website: HTML, CSS,
JavaScript.
- Các framework hỗ trợ: ReactJS, NodeJS
- Phần mềm lập trình: Visual Studio Code
- Dịch vụ Github
1.7 Tổng quan về đồ án
Ứng dụng Website PlanB là một hệ thống quản lí cửa hàng ký gửi quần áo cũ,
giúp chủ cửa hàng quản lí hàng hóa, bán hàng và tối ưu hóa quy trình kinh doanh.
Đồng thời, khách hàng cũng có thể tìm kiếm và mua sắm những sản phẩm quần áo
chất lượng từ cửa hàng ký gửi thông qua giao diện trực tuyến thuận tiện và dễ sử
dụng.
 Mơ tả quy trình thực hiện các cơng việc chính




Bước 1: Xác định các yêu cầu:
-

Phân tích khả thi quy mơ thực hiện.

-

Tìm hiểu quy trình nghiệp vụ.

-

Tham khảo và trải nghiệm các ứng dụng liên quan.

-

Khảo sát người dùng qua mạng.

-

Thu thập thông tin yêu cầu.

Bước 2: Thiết kế hệ thống:
- Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan.



Bước 3: Thiết kế dữ liệu
- Thiết kế dữ liệu tương ứng với từng loại yêu cầu của phần mềm để đảm bảo
được tính đúng đắn và tính tiến hóa với phần mềm, có hiệu quả về mặt truy
xuất và lưu trữ

4


- Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu của
phần mềm
- Xây dựng sơ đồ logic cụ thể của phần mềm


Bước 4: Thiết kế giao diện
- Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm

- Mơ tả các đối tượng trên từng màn hình
- Xác định những chức năng hiển thị trên từng màn hình



Bước 5: Code và kiểm thử
- Code trình bày theo mơ hình 3 lớp và được phân chia theo các nhiệm vụ yêu
cầu.
- Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.

5


CHƯƠNG 2: TÌM HIỂU CƠ SỞ LÝ THUYẾT
2.1 Thiết kế giao diện ngươi dùng Figma
2.1.1 Tổng quan về Figma

Hình 2. 1. Figma
[Truy cập ngày 26 tháng 5, 2023]


Figma là một ứng dụng web, cho phép người dùng truy cập và làm việc trên
trình duyệt mà khơng cần cài đặt phần mềm.



Nó cung cấp mơi trường làm việc đám mây, giúp người dùng lưu trữ và
chia sẻ dự án dễ dàng.



Figma hỗ trợ các tính năng như thiết kế giao diện, tạo wireframe, tạo
prototype và quản lý thư viện.
2.1.2 Cách thức hoạt động



Người dùng có thể tạo mới dự án hoặc mở dự án đã tồn tại trên Figma.



Figma cung cấp một giao diện dễ sử dụng, với các công cụ vẽ và chỉnh sửa
các yếu tố trên giao diện.



Người dùng có thể tạo component (thành phần) để tái sử dụng và duy trì
tính nhất qn trên tồn bộ dự án.

6




Figma cũng hỗ trợ tính năng cộng tác đồng thời, cho phép nhiều người dùng
làm việc trên cùng một dự án và theo dõi sự thay đổi trong thời gian thực.
2.1.3 Ưu diểm



Truy cập và làm việc trực tuyến, không cần cài đặt phần mềm.



Dễ sử dụng, với giao diện thân thiện và các công cụ mạnh mẽ.



Hỗ trợ cộng tác đồng thời, giúp đội ngũ làm việc chung một cách hiệu quả.



Cho phép chia sẻ và gửi mời người dùng khác để xem, chỉnh sửa hoặc phản
hồi.
2.1.4 Nhược điểm



Cần kết nối internet để truy cập và làm việc.



Có thể hạn chế một số tính năng so với các ứng dụng thiết kế giao diện
truyền thống.



Phiên bản miễn phí của Figma có giới hạn băng thơng lưu trữ và số lượng
dự án.

2.2 Ngơn ngữ lập trình JavaScript
JavaScript là ngơn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20
năm qua. Nó cũng là một trong số 3 ngơn ngữ chính của lập trình web:


HTML: Giúp bạn thêm nội dung cho trang web.



CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.



JavaScript: Cải thiện cách hoạt động của trang web.
JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác

nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm
nền web. Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia,
nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github.

7


Hình 2. 2. JavaScript
[Truy cập ngày 26 tháng 5, 2023]

2.2.1 Lịch sử hình thành JavaScript

JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của
Netscape, vào tháng 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên của nó được

đổi thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như
bây giờ. Phiên bản đầu tiên của ngôn ngữ này bị giới hạn độc quyền bởi Netscape
và chỉ có các tính năng hạn chế, nhưng nó tiếp tục phát triển theo thời gian, nhờ một
phần vào cộng đồng các lập trình viên đã liên tục làm việc với nó.
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript.
ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm
1999. Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắp
mọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử
dụng JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngơn ngữ lập trình
riêng trở thành công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập
trình web. Nếu bạn đang dùng internet, vậy chắc chắn bạn đã từng sử dụng
JavaScript rồi.

8


2.2.2 Ưu nhược điểm của JavaScript
Ưu điểm của Javascript:


Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa
các client. Ví dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì
cả hai đều có những phiên xử lý Javascript khác nhau, không ảnh hưởng
lẫn nhau.



Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows,
macOS cho đến các hệ điều hành trên mobile.



Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà
khơng cần phải cài đặt q nhiều phần mềm.

Nhược điểm của Javascript:
Vì là một ngơn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác. Hacker
có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này
trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi
nhửng request lên server một cách dễ dàng.
2.2.3 JavaScipt Framework
Javascript Framework là một bộ thư viện được xây dựng dựa vào ngơn ngữ
lập trình Javascript. Mỗi framework thường được tạo ra để phục vụ cho một lĩnh
vực nào đó. Ví dụ với Angular và React thì chun xử lý frontend, NodeJS thì
chuyên xử lý backend, jQuery là một thư viện rất mạnh khi xử lý DOM HTML và
CSS.
Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất
nhiều libraries và framework được viết bằng Javascript ra đời như:
• Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.
• NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng
dụng realtime.
• Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.

9


• ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web
Applications).
• jQuery: Một thư viện rất mạnh về hiệu ứng.

• ReactJS: Một thư viện viết ứng dụng web.
• Và còn nhiều thư viện khác.
2.3 ReactJS
2.3.1 Tổng quan về ReactJS
ReactJS là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao
diện người dùng (UI) cho các ứng dụng web. Nó được phát triển bởi Facebook và
đã được cộng đồng phát triển rộng rãi.

Hình 2. 3. ReactJS
[Truy cập 25-06-2023]
2.3.2 Cách thức hoạt động
ReactJS sử dụng một nguyên tắc gọi là "Virtual DOM" để cải thiện hiệu suất
và tăng tốc độ render giao diện người dùng. Khi một thành phần React được tạo, nó
tạo ra một cây Virtual DOM, là một phiên bản ảo của cây DOM thực sự trong trình
duyệt. React sẽ theo dõi các thay đổi trong trạng thái của thành phần và chỉ cập nhật
những phần cần thiết trên cây Virtual DOM. Sau đó, React so sánh cây Virtual
DOM mới với cây Virtual DOM cũ và chỉ cập nhật các phần khác nhau vào DOM
thực sự. Điều này giúp giảm thiểu số lượng các thao tác tác động đến DOM, giúp
ứng dụng chạy mượt hơn.

10


2.3.3 Ưu điểm


Hiệu suất cao: Nhờ sử dụng Virtual DOM và cách quản lý trạng thái thơng
minh, ReactJS có thể cải thiện hiệu suất ứng dụng web. Thay vì cập nhật
toàn bộ DOM, React chỉ cập nhật những phần cần thiết, giúp giảm độ phức
tạp và tối ưu hóa tốc độ render.



Quản lý trạng thái dễ dàng: React sử dụng khái niệm "state" để quản lý
trạng thái của các thành phần. Việc quản lý trạng thái dễ dàng giúp phát
triển ứng dụng dễ dàng hơn và giúp tái sử dụng thành phần một cách hiệu
quả.



Cộng đồng và hệ sinh thái mạnh mẽ: ReactJS có một cộng đồng lớn và
đơng đảo, với rất nhiều tài liệu, tài nguyên và các thành phần có thể tái sử
dụng. Điều này giúp cho việc học hỏi và phát triển ứng dụng dễ dàng hơn.
2.3.4 Nhược điểm



Khả năng học và khởi đầu ban đầu: ReactJS có một học phần ngưỡng cao
ban đầu. Việc hiểu và áp dụng các khái niệm như JSX, Virtual DOM, props,
state, lifecycle methods và Redux có thể địi hỏi một q trình học tập khá
lâu và cơng phu.



Quản lý trạng thái phức tạp: Khi ứng dụng React phức tạp và có nhiều
thành phần liên quan, quản lý trạng thái có thể trở nên phức tạp hơn. Việc
đồng bộ hóa và quản lý trạng thái giữa các thành phần có thể địi hỏi sự
quan tâm và kỹ năng để tránh việc gặp phải các vấn đề như rò rỉ bộ nhớ
hoặc hiệu suất kém.



Tuy nhiên, nhược điểm của ReactJS có thể được khắc phục và vượt qua
thông qua việc nắm vững kiến thức và kỹ năng phù hợp và sử dụng các thư
viện hỗ trợ như Redux hoặc MobX để quản lý trạng thái phức tạp hơn.

11


2.4 NodeJS
2.4.1 Tổng quan về NodeJS
Node.js là một môi trường chạy mã JavaScript phía máy chủ, được xây dựng
trên JavaScript engine của Chrome (V8 engine). Nó cho phép chúng ta thực thi mã
JavaScript bên ngồi trình duyệt, điều này đặc biệt hữu ích cho việc phát triển ứng
dụng web phía máy chủ.

Hình 2. 4. NodeJS
[Truy cập ngày 25 tháng 06, 2023]
2.4.2 Cách thức hoạt động
Node.js hoạt động theo mô hình non-blocking, single-threaded, event-driven.
Nó sử dụng một cơ chế gọi là "event loop" để xử lý các yêu cầu và sự kiện một cách
hiệu quả. Khi một yêu cầu đến, Node.js khơng chờ đợi các hoạt động đồng bộ hồn
thành mà tiếp tục xử lý các yêu cầu khác. Khi các hoạt động đồng bộ hồn thành
hoặc có sự kiện nào đó xảy ra, Node.js sẽ thơng báo thơng qua callback hoặc sự
kiện tương ứng. Điều này cho phép Node.js xử lý đồng thời nhiều yêu cầu mà
không gây block đối với các yêu cầu khác.
2.4.3 Ưu điểm


Hiệu suất cao: Với mơ hình non-blocking và event-driven, Node.js có khả

năng xử lý hàng ngàn kết nối đồng thời mà không gây block. Điều này giúp
cải thiện hiệu suất của ứng dụng và đáp ứng tốt với tải cao.

12




Phát triển dễ dàng: Node.js sử dụng JavaScript, ngôn ngữ phổ biến và
quen thuộc, cho phép lập trình viên sử dụng cùng một ngơn ngữ cả phía
máy chủ và phía khách hàng. Điều này giúp giảm độ phức tạp và đơn giản
hóa q trình phát triển ứng dụng.



Cộng đồng lớn: Node.js có một cộng đồng lớn và đơng đảo, với rất nhiều
thư viện và cơng cụ hữu ích. Cộng đồng phát triển sôi nổi này cung cấp sự
hỗ trợ, tài liệu và giải pháp cho các vấn đề phát triển.
2.4.4 Nhược điểm



Đơn luồng: Mặc dù Node.js có khả năng xử lý đồng thời, nhưng do chạy
trên một luồng duy nhất, nếu một yêu cầu tốn nhiều thời gian xử lý, nó có
thể làm giảm hiệu suất của tồn bộ ứng dụng. Vì vậy, Node.js khơng phù
hợp cho các tác vụ đòi hỏi xử lý trên nhiều luồng đồng thời.



Quản lý trạng thái phức tạp: Vì Node.js khơng có một framework hồn

chỉnh, việc quản lý trạng thái phức tạp có thể trở nên khó khăn. Lập trình
viên phải dựa vào các thư viện bên thứ ba hoặc tự xây dựng các cơ chế để
quản lý trạng thái hiệu quả.

2.5 Phần mềm lập trình VSCode
2.5.1 Tổng quan về VSCode
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo
mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa
nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội
khiến VS Code ngày càng được ứng dụng rộng rãi.

13


Hình 2. 5. Visual Studio Code
[Truy cập ngày 26 tháng 5, 2023]

2.5.2 Ưu điểm


Hỗ trợ nhiều ngôn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình như C/C++, C#,
F#, Visual Basic, HTML, CSS, JavaScript, ... Vì vậy, nó dễ dàng phát hiện
và đưa ra thơng báo nếu chương chương trình có lỗi.



Hỗ trợ đa nền tảng
Các trình viết code thơng thường chỉ được sử dụng hoặc cho
Windows hoặc Linux hoặc Mac Systems. Nhưng Visual Studio Code có thể

hoạt động tốt trên cả ba nền tảng trên.



Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngơn ngữ lập trình
khơng nằm trong số các ngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống
tiện ích mở rộng. Điều này vẫn sẽ khơng làm giảm hiệu năng của phần mềm,
bởi vì phần mở rộng này hoạt động như một chương trình độc lập.



Kho lưu trữ an toàn

14


Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn.
Với Visual Studio Code, người dùng có thể hồn tồn n tâm vì nó dễ dàng
kết nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.


Hỗ trợ web
Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngồi ra, nó cũng có
một trình soạn thảo và thiết kế website.



Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự

nhau. Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một số tệp
đặc biệt quan trọng.



Hỗ trợ viết Code
Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng.
Visual Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.



Hỗ trợ thiết bị đầu cuối
Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng
khỏi phải chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực
hiện các thao tác.



Màn hình đa nhiệm
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và
thư mục, mặc dù chúng không hề liên quan với nhau.
Hầu hết các trình viết mã đều có tính năng nhắc mã Intellisense,
nhưng ít chương trình nào chun nghiệp bằng Visual Studio Code. Nó có
thể phát hiện nếu bất kỳ đoạn mã nào khơng đầy đủ. Thậm chí, khi lập trình
viên quên không khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các
cú pháp còn thiếu.

15



Hỗ trợ Git
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub.
Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.
2.5.3 Nhược điểm



Tiêu tốn tài nguyên: VS Code có khả năng tiêu tốn một lượng tài nguyên
khá lớn, đặc biệt khi bạn làm việc trên các dự án lớn hoặc mở nhiều tab
cùng một lúc. Điều này có thể ảnh hưởng đến hiệu suất của máy tính, đặc
biệt là trên các máy tính có cấu hình thấp.



Đơi khi chậm khi mở các tệp lớn: Khi mở các tệp tin lớn, VS Code có thể
trở nên chậm và có thể mất thời gian để phản hồi. Điều này đặc biệt đáng
chú ý khi bạn làm việc trên các dự án có nhiều tệp tin hoặc tệp tin có kích
thước lớn.



Tích hợp đa cơng cụ phụ thuộc vào các tiện ích bên thứ ba: Mặc dù VS
Code đi kèm với một số tính năng mạnh mẽ và tiện ích tích hợp sẵn, để sử
dụng các tính năng đặc biệt hoặc mở rộng khả năng của trình soạn thảo, bạn
phải cài đặt các tiện ích bên thứ ba. Điều này có thể yêu cầu thời gian và
cơng sức để tìm hiểu và tích hợp các tiện ích này.

2.6 Dịch vụ Github

Hình 2. 6. Github
[Truy cập ngày 26 tháng 5, 2023]
16