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ánng 3.5. Use case Quảng 3.5. Use case Quản lý Thanh toánn lý Thanh toán.............................................................................22
Bảng 3.5. Use case Quản lý Thanh toánng 3.6. Use case Quảng 3.5. Use case Quản lý Thanh tốnn lý Hóa đơnn...................................................................................23
Bảng 3.5. Use case Quản lý Thanh toánng 3.7. Use case Quảng 3.5. Use case Quản lý Thanh toánn lý Khách hàng.............................................................................24
Bảng 3.5. Use case Quản lý Thanh toánng 3.8. Use case Quảng 3.5. Use case Quản lý Thanh toánn lý Sảng 3.5. Use case Quản lý Thanh toánn phẩmm................................................................................26
Bảng 3.5. Use case Quản lý Thanh toánng 3.9. Use case Biểu đồu đồ.....................................................................................................27
Bảng 3.5. Use case Quản lý Thanh toánng 3.10. Use case Quảng 3.5. Use case Quản lý Thanh toánn lý Nhân viên.............................................................................28
Bảng 3.5. Use case Quản lý Thanh toánng 3.11. Use case Quảng 3.5. Use case Quản lý Thanh toánn lý Chấm cơngm cơng...........................................................................29
Bảng 3.5. Use case Quản lý Thanh tốnng 3.12. Use case Báo cáo...................................................................................................30
Bảng 3.5. Use case Quản lý Thanh toánng 3.13. Use case Quảng 3.5. Use case Quản lý Thanh toánn lý Tài khoảng 3.5. Use case Quản lý Thanh toánn.............................................................................31
Bảng 3.5. Use case Quản lý Thanh toánng 3.14 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Khách hàng.............................................................................34
Bảng 3.5. Use case Quản lý Thanh toánng 3.15 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Nhân viên................................................................................34
Bảng 3.5. Use case Quản lý Thanh toánng 3.16 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Sảng 3.5. Use case Quản lý Thanh toánn phẩmm...............................................................................35
Bảng 3.5. Use case Quản lý Thanh toánng 3.17 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Ký gửii.......................................................................................35
Bảng 3.5. Use case Quản lý Thanh toánng 3.18 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Hóa đơnn Ký gửii chi tiếtt.....................................................36
Bảng 3.5. Use case Quản lý Thanh toánng 3.19 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Sảng 3.5. Use case Quản lý Thanh toánn phẩmm đã bán................................................................36
Bảng 3.5. Use case Quản lý Thanh toánng 3.20 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Lươnng.......................................................................................37
Bảng 3.5. Use case Quản lý Thanh tốnng 3.21 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Sảng 3.5. Use case Quản lý Thanh toánn phẩmm trảng 3.5. Use case Quản lý Thanh toán lạii.................................................................37
Bảng 3.5. Use case Quản lý Thanh toánng 3.22 Bảng 3.5. Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính doanh thu................................................................................37


Bảng 3.5. Use case Quản lý Thanh toánng 4.1. Danh sách các màn hình.......................................................................................39
Bảng 3.5. Use case Quản lý Thanh tốnng 4.2. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Đăng nhậpp....................................................40
Bảng 3.5. Use case Quản lý Thanh toánng 4.3. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Trang chủ.....................................................41
Bảng 3.5. Use case Quản lý Thanh tốnng 4.4. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Ký gửii.............................................................41
Bảng 3.5. Use case Quản lý Thanh tốnng 4.5. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Thơng tin sảng 3.5. Use case Quản lý Thanh toánn phẩmm.................................42

Bảng 3.5. Use case Quản lý Thanh tốnng 4.6. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Thanh tốn...................................................43
Bảng 3.5. Use case Quản lý Thanh tốnng 4.7. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Quảng 3.5. Use case Quản lý Thanh tốnn lý Hóa đơnn........................................44
Bảng 3.5. Use case Quản lý Thanh tốnng 4.8. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Chi tiếtt Hóa đơnn Ký gửii..........................45
Bảng 3.5. Use case Quản lý Thanh toánng 4.9. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Quảng 3.5. Use case Quản lý Thanh toánn lý Khách hàng.................................45
Bảng 3.5. Use case Quản lý Thanh tốnng 4.10. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Thơng tin Khách hàng...........................46
Bảng 3.5. Use case Quản lý Thanh tốnng 4.11. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Quảng 3.5. Use case Quản lý Thanh toánng lý Sảng 3.5. Use case Quản lý Thanh toánn phẩmm...............................47
Bảng 3.5. Use case Quản lý Thanh toánng 4.12. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Chỉnh sửa Sản phẩmnh sửia Sảng 3.5. Use case Quản lý Thanh toánn phẩmm.............................47
Bảng 3.5. Use case Quản lý Thanh toánng 4.13. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Biểu đồu đồ.......................................................48
Bảng 3.5. Use case Quản lý Thanh toánng 4.14. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Quảng 3.5. Use case Quản lý Thanh toánn lý Nhân viên..................................49
Bảng 3.5. Use case Quản lý Thanh tốnng 4.15. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Thơng tin Nhân viên..............................49
Bảng 3.5. Use case Quản lý Thanh tốnng 4.16. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Thơng tin Nhân viên..............................50
Bảng 3.5. Use case Quản lý Thanh tốnng 4.17. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Lịch làm việcch làm việcc............................................51
Bảng 3.5. Use case Quản lý Thanh tốnng 4.18. Mơ tảng 3.5. Use case Quản lý Thanh toán cách sửi dụng màn hình Đăng nhậpng màn hình Báo cáo........................................................51
Bảng 3.5. Use case Quản lý Thanh tốnng 4.19. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình Quảng 3.5. Use case Quản lý Thanh toánn lý Tài khoảng 3.5. Use case Quản lý Thanh toánn..................................52
Bảng 3.5. Use case Quản lý Thanh toánng 4.20. Mơ tảng 3.5. Use case Quản lý Thanh tốn cách sửi dụng màn hình Đăng nhậpng màn hình thơng tin Tài khoảng 3.5. Use case Quản lý Thanh toánn...............................53


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ơn đồ Cơn sở dữ liệu dữ liệu liệcu.................................................................................................34
Hình 4.1. Màn hình Đăng nhậpp...............................................................................................39
Hình 4.2. Màn hình Trang chủ................................................................................................39
Hình 4.3. Màn hình Ký gửii........................................................................................................40

Hình 4.4. Thơng tin sảng 3.5. Use case Quản lý Thanh tốnn phẩmm................................................................................................41
Hình 4.5. Màn hình Thanh tốn..............................................................................................42
Hình 4.6. Màn hình Quảng 3.5. Use case Quản lý Thanh tốnn lý Hóa đơnn..................................................................................43
Hình 4.7. Chi tiếtt Hóa đơnn Ký gửii.........................................................................................43
Hình 4.8. Màn hình Quảng 3.5. Use case Quản lý Thanh tốnn 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ảng 3.5. Use case Quản lý Thanh tốnn lý Sảng 3.5. Use case Quản lý Thanh tốnn phẩmm............................................................................45
Hình 4.11. Chỉnh sửa Sản phẩmnh sửia Sảng 3.5. Use case Quản lý Thanh tốnn phẩmm............................................................................................46
Hình 4.12. Màn hình Biểu đồu đồ..................................................................................................47
Hình 4.13. Màn hình Quảng 3.5. Use case Quản lý Thanh toánn 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ệcch làm việcc.......................................................................................49
Hình 4.17. Màn hình Báo cáo..................................................................................................50
Hình 4.18. Màn hình Quảng 3.5. Use case Quản lý Thanh toánn lý Tài khoảng 3.5. Use case Quản lý Thanh tốnn............................................................................51
Hình 4.19. Màn hình Thơng tin Tài khoảng 3.5. Use case Quản lý Thanh toánn.........................................................................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 quán trên toà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ậpp 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 quá 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ì chuyên 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