Đồ án quản lí cửa hàng ký gửi quần áo cũ(planb

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC

CƠNG NGHỆ THƠNGTINKHOA CƠNG NGHỆ PHẦNMỀM

ĐỒ ÁN 1

Quản lí cửa hàng ký gửi quần áo cũ(PlanB)

Giảng viên hướng dẫn : ThS. Trần Thị Hồng YếnSinh 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ênMã sinh viên 2 : 205211489

TP. HỒ CHÍ MINH, 2023

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

…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………


…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………

……………………………………………………………………Ngày…tháng……năm2023
Ngươi nhậnxé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ồngYến–giảng viên bộ
môn Nhập môn Công nghệ phần mềm. Cơ đã trực tiếphướngdẫn,tận tình chia sẻ những kiến
thức, hỗ trợ và đóng góp những ý kiếnqbá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ệcquảnlývà kinh doanh cửa
hàng ký gửi quần áo cũ địi hỏi sự hiệu quả và tiệnlợi. Chínhnhậ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ằmhỗ trợ chủcửahàngtrong việc quản lý hàng hóa, bán hàng và tối ưu hóa quy trình kinh doanh.
Đồngthời, ứng dụng cũng mang đến cho khách hàng một trải nghiệmmua sắmtrựctuyến thuận tiện
và dễ dàng tìm kiếm những sản phẩmquần áo chất lượngtừ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ữngtháchthứcvà sai sót, nhưng sự
hỗ trợ và góp ý chân thành từ Cơ đã giúp chúngtơi vượtqua những khó khăn và hồn thiện đồ án
một cách tốt nhất. Chúng tôi xincamkết sẽ tiếp thu và áp dụng những kinh nghiệm quý báu này để
nângcaokhả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ồngYếnvàhyvọng sự đóng góp
của Cơ sẽ tiếp tục giúp đỡ và hỗ trợ chúng tơi tronghànhtrình học tập và nghiên cứu trong
tương lai.

Xin chân thành cảmơn quýthầycô!

DANH SÁCH THÀNH VIÊN NHĨM
Tên thành viên
Huỳnh Minh Chí
Nguyễn Hữu Trung Kiên

MSSV
20521130
25021489

MỤC LỤC


CHƯƠNG

1:

GIỚI

TÀI.............................................................................................21.1

THIỆU

ĐỀ
Đặt

đề...................................................................................................................................21.2

vấn
Giải

Pháp.....................................................................................................................................21.3 Mục
tiêu đề tài...........................................................................................................................21.4 Đối
tượng sử dụng...................................................................................................................31.5 Công
cụ sử dụng.......................................................................................................................31.6 Phạm

vi nghiên cứu.................................................................................................................3
CHƯƠNG 2: TỔNG
QUAN............................................................................................................42.1 Tổng quan về đồ
án.................................................................................................................42.1.1 Mô tả quy trình
thực hiện các cơng việc chính....................................................42.2 Cơ sở lý
thuyết..........................................................................................................................5
2.2.1 Thiết kế giao diện người dùng Figma..................................................................... 52.2.3
ReactJS................................................................................................................................92.2.4
NodeJS..............................................................................................................................112.2.5 Phần
mềm lập trình VSCode ....................................................................................132.3.5 Dịch vụ
Github..............................................................................................................16
CHƯƠNG 3: ĐẶC TẢ USE CASE...........................................................................................183.1 Sơ
đồ Use case....................................................................................................................... 183.2 Danh sách
Use case..............................................................................................................183.3 Đặc tả Use
case......................................................................................................................19
3.3.1 Đăng nhập....................................................................................................................... 193.3.2
Đăng xuất.........................................................................................................................20
3.3.3 Quản lý Ký gửi..............................................................................................................213.3.4
Quản lý Thanh tốn..................................................................................................... 223.3.5 Quản lý
Hóa đơn...........................................................................................................233.3.6 Quản lý Khách
hàng....................................................................................................243.3.7 Quản lý Sản
phẩm........................................................................................................263.3.8 Biểu


đồ..............................................................................................................................273.3.9 Quản lý
Nhân viên....................................................................................................... 273.3.10 Quản lý Chấm
công...................................................................................................293.3.11 Báo
cáo.......................................................................................................................... 303.3.12 Quản lý Tài
khoản..................................................................................................... 30
CHƯƠNG 4: PHÂN TÍCH HỆ

THỐNG.................................................................................32CHƯƠNG 5: THIẾT KẾ DỮ
LIỆU...........................................................................................345.1 Sơ đồ
Logic............................................................................................................................. 345.2 Mô tả chi tiết các
kiểu dữ liệu..........................................................................................35CHƯƠNG 6: THIẾT KẾ GIAO
DIỆN.....................................................................................396.1 Danh sách các màn
hình.....................................................................................................396.2 Mơ tả màn
hình......................................................................................................................396.2.1 Màn hình đăng
nhập....................................................................................................406.2.2 Màn hình Trang
ch .................................................................................................. 406.2.3 Màn hình Ký
g i..........................................................................................................41 6.2.4 Màn hình Thêm sản
phẩm.........................................................................................426.2.5 Màn hình thanh
tốn....................................................................................................436.2.6 Màn hình Quản lý Hóa
đơn......................................................................................446.2.7 Chi tiết hóa đơn Ký
gửi..............................................................................................45
6.2.8 Màn hình Quản lý Khách hàng............................................................................... 466.2.9
Màn hình Thêm khách hàng.....................................................................................476.2.10 Màn
hình Quản lý Sản phẩm.................................................................................486.2.11 Màn hình
Chỉnh sửa sản phẩm..............................................................................496.2.12 Màn hình Biểu
đồ...................................................................................................... 506.2.13 Màn hình Quản lý Nhân
viên................................................................................ 516.2.14 Màn hình Thêm nhân
viên......................................................................................526.2.15 Màn hình Thơng tin Nhân
viên.............................................................................536.2.16 Màn hình Lịch làm
việc...........................................................................................546.2.17 Màn hình Báo


cáo......................................................................................................546.2.18 Màn hình Quản lý Tài
khoản.................................................................................556.2.19 Màn hình Thơng tin tài
khoản...............................................................................56
CHƯƠNG 7: CÀI ĐẶT VÀ THỬ
NGHIỆM.........................................................................587.1 Môi trường cài

đặt.................................................................................................................587.1.1 Môi trường cài
đặt và thử nghiệm..........................................................................587.1.2 Kết quả đánh
giá...........................................................................................................58
CHƯƠNG 8: NHẬN XÉT VÀ KẾT LUẬN.......................................................................... 598.1 Kết
quả đạt được....................................................................................................................598.2 Hạn
chế..................................................................................................................................... 598.3 Hướng phát
triển....................................................................................................................59TÀI LIỆU THAM
KHẢO..............................................................................................................60

DANH MỤC BẢNG
Bảng 1 . ng 1 . Danh sách Use Case......................................................................................................................19B ảng 1 . ng 2 .
Use case Đăng nhập......................................................................................................................20Bảng 3 . Use case
Đăng xuất.......................................................................................................................21B ảng 1 . ng 4 . Use case Quản lý
Ký gửi.............................................................................................................22B ảng 1 . ng 5 . Use case Qu ảng 1 . n lý Thanh
toán..................................................................................................23B ảng 1 . ng 6 .

Use case Quản

lý

Hóa

đơn......................................................................................................... 24
Bảng 1 . ng 7 . Use case Quảng 1 . n lý Khách hàng.................................................................................................25B ảng 1 . ng 8 .
Use case Quảng 1 . n lý Sảng 1 . n ph m.....................................................................................................27B ảng 1 . ng 9 . Use
case Bi u đ ........................................................................................................................... 27B ảng 1 . ng 10 . Use case
Quản lý Nhân viên...................................................................................................29B ảng 1 . ng 11 . Use case Quản lý
Chấm công.................................................................................................30B ảng 1 . ng 12 . Use case Báo
cáo.........................................................................................................................30B ảng 1 . ng 13 . Use case Quản lý Tài
khoản................................................................................................... 31B ảng 1 . ng 14 . B ảng 1 . ng thu ộc tính Khách c tính Khách

hàng................................................................................................ 35B ảng 1 . ng 15 . Bảng thuộc tính Nhân
viên......................................................................................................36B ảng 1 . ng 16 . B ảng 1 . ng thu ộc tính Khách c tính S ảng 1 . n
ph m....................................................................................................36B ảng 1 . ng 17 . B ảng 1 . ng thu ộc tính Khách c tính Ký
g i........................................................................................................... 37B ảng 1 . ng 18 . B ảng 1 . ng thu ộc tính Khách c tính Hóa đ ơn n
Ký g i chi ti t........................................................................ 37B ảng 1 . ng 19 . B ảng 1 . ng thu ộc tính Khách c tính S ảng 1 . n ph m đã
bán....................................................................................37B ảng 1 . ng 20 . B ảng 1 . ng thu ộc tính Khách c tính


Lươn ng...........................................................................................................38B ảng 1 . ng 21 . B ảng 1 . ng thu ộc tính Khách c tính S ảng 1 . n
ph m trảng 1 . l i.......................................................................................38Bảng 1 . ng 22 . B ảng 1 . ng thu ộc tính Khách c tính Doanh
thu...................................................................................................38B ảng 1 . ng 23 . B ảng 1 . ng Danh sách các màn
hình.............................................................................................39B ảng 1 . ng 24 . Mơ t ảng 1 . cách s d ụng màn hình ng màn hình
Đăng nh p......................................................................40Bảng 1 . ng 25 . Mô tảng 1 . cách s d ụng màn hình ng màn hình Trang
ch .......................................................................41Bảng 1 . ng 26 . Mô t ảng 1 . cách s d ụng màn hình ng màn hình Ký
g i...............................................................................42B ảng 1 . ng 27 . Mô t ảng 1 . cách s d ụng màn hình ng màn hình Thông tin
sảng 1 . n ph m.................................................. 43Bảng 1 . ng 28 . Mô tảng 1 . cách s d ụng màn hình ng màn hình Thanh
tốn....................................................................44Bảng 1 . ng 29 . Mô tảng 1 . cách s d ụng màn hình ng màn hình Qu ảng 1 . n lý Hóa
đơn n.........................................................45Bảng 1 . ng 30 . Mô tảng 1 . cách s d ụng màn hình ng màn hình Chi ti t Hóa đ ơn n Ký
g i...........................................46
Bảng 1 . ng 31 . Mô tảng 1 . cách s dụng màn hình ng màn hình Quảng 1 . n lý Khách hàng.................................................. 47Bảng 1 . ng 32
. Mô tảng 1 . cách s dụng màn hình ng màn hình Thơng tin Khách hàng..............................................48B ảng 1 . ng 33 . Mô t ảng 1 .
cách s dụng màn hình ng màn hình Quảng 1 . ng lý Sảng 1 . n ph m....................................................49B ảng 1 . ng 34 . Mô t ảng 1 . cách s
dụng màn hình ng màn hình Ch nh s a Sảng 1 . n ph m.................................................50Bảng 1 . ng 35 . Mô tảng 1 . cách s d ụng màn hình ng
màn hình Bi u đ ............................................................................ 51B ảng 1 . ng 36 . Mô t ảng 1 . cách s d ụng màn hình ng màn
hình Quảng 1 . n lý Nhân viên......................................................52Bảng 1 . ng 37 . Mô tảng 1 . cách s d ụng màn hình ng màn hình
Thơng tin Nhân viên.................................................53Bảng 1 . ng 38 . Mô tảng 1 . cách s dụng màn hình ng màn hình Thơng
tin Nhân viên.................................................54Bảng 1 . ng 39 . Mô tảng 1 . cách s d ụng màn hình ng màn hình L ịch làm ch làm
vi c.................................................................54Bảng 1 . ng 40 . Mô tảng 1 . cách s d ụng màn hình ng màn hình Báo
cáo............................................................................55B ảng 1 . ng 41 . Mô t ảng 1 . cách s d ụng màn hình ng màn hình Qu ảng 1 . n lý Tài
khoảng 1 . n......................................................56Bảng 1 . ng 42 . Mô tảng 1 . cách s d ụng màn hình ng màn hình thơng tin Tài

khoảng 1 . n...................................................57

DANH MỤC HÌNH
Hình 1 . Figma.....................................................................................................................................................5Hình 2 .
JavaScript.............................................................................................................................................7Hình

3

.

ReactJS...............................................................................................................................................10Hình

4

.

NodeJS............................................................................................................................................... 12
Hình 5 . Visual Studio Code........................................................................................................................14Hình 6 .
Github.................................................................................................................................................17Hình 7 . Sơ đồ
Use case................................................................................................................................ 18Hình 8 . Mơ hình
MVC.................................................................................................................................33Hình 9 . Sơ đồ Cơ sở dữ
liệu.......................................................................................................................35Hình 10 . Màn hình Đăng
nh p................................................................................................................40Hình 11 . Màn hình Trang
chủ................................................................................................................... 41Hình 12 . Màn hình Ký gửi
.........................................................................................................................42Hình 13 . Thơng tin sản
phẩm.................................................................................................................... 43Hình 14 . Màn hình Thanh
tốn.................................................................................................................44Hình 15 . Màn hình Quản lý Hóa


đơn..................................................................................................... 45Hình 16 . Chi tiết Hóa đơn Ký gửi

......................................................................................................... 46Hình 17 . Màn hình Quản lý Khách
hàng...............................................................................................47Hình 18 . Thơng tin Khách hàng
..............................................................................................................48Hình 19 . Màn hình Quản lý Sản
phẩm...................................................................................................49Hình 20 . Chỉnh sửa Sản phẩm
..................................................................................................................50Hình 21 . Màn hình Biểu đồ
.......................................................................................................................51Hình 22 . Màn hình Quản lý Nhân
viên..................................................................................................52Hình 23 . Thêm Nhân viên
......................................................................................................................... 52Hình 24 . Thơng tin Nhân viên
..................................................................................................................53Hình 25 . Màn hình Lịch làm
việc............................................................................................................ 54Hình 26 . Màn hình Báo
cáo........................................................................................................................55Hình 27 . Màn hình Quản lý Tài
khoản.................................................................................................. 56Hình 28 . Màn hình Thơng tin Tài
khoản...............................................................................................57

TĨM TẮT ĐỒ ÁN
"PlanB" là một website quản lí cửa hàng ký gửi quần áo cũ, đượcthiết kếnhằm hỗ trợ hiệu
quả quản lí các cửa hàng, chợ đồ cũ hoặc cá nhânbánđồsecondhand. Với giao diện trực quan và
dễ sử dụng, "PlanB" cung cấp cáctínhnăngquả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 quytrìnhkinhdoanh.
Website này giúp cho người dùng quản lí và kiểmsốt các mặt hàngtrongcửa hàng, bao
gồm thơng tin chi tiết, tình trạng, giá cả và các thơng tinliênquankhác. Ngồi ra, "PlanB" cung
cấp chức năng bán hàng, cho phép người dùngthựchiệ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àngtheodõihiệu suất kinh
doanh, xem các thông số như doanh thu, số lượng sản phẩmbánravàcác chỉ số liên quan khác.
Nhờ đó, người dùng có thể đưa ra nhữngquyết địnhthơ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 kinhdoanh,"PlanB" là một giải
pháp tiện ích cho các cửa hàng, chợ đồ cũ và cá nhânbánđồsecondhand, giúp họ nâng cao hiệu
suất và đạt được thành công trongviệckinhdoanh các sản phẩm secondhand.

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 mangtínhthủcơng, dựa vào
kinh nghiệm của hệ thống nhân viên. Do đặc điểmlượnghànghố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ềuthờ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 chocửahà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 ứngdụnghỗ 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 kinhdoanh.Đồ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ằmtối ưuhóaquy 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địnhgiá trị hàng hóa. Nhờ đó, người dùng có thể
dễ dàng quản lý hàng tồnkho, tạorabáo cáo thống kê, và theo dõi lịch sử giao dịch, giúp tăng
cường hiệuquảkinhdoanh 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 caohiệusuấtbán hàng thông
qua việc theo dõi doanh thu, định giá sản phẩm, và quảnlýkháchhà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đánhgiá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ảnlí hàngtồ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ảnphẩ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ânloại sảnphẩm, và nhanh chóng tìm kiếm thơng tin về sản
phẩm cụ thể. Điều nàygiúpngườ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ãngphí nguồnlực.
- Tăng cường khả năng tiếp cận khách hàng: "PlanB" hỗ trợngười dùngtrong việc xây
dựng và quản lí danh sách khách hàng, ghi chú các thôngtinquantrọ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ùngtạodựng mối quan hệ khách hàng mạnh mẽ, đáp
ứng nhu cầu của khách hàngvàtăngcườ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 chongườidùng trong việc


quản lí và bán hàng secondhand. Ứng dụng cung cấp giaodiệndễsử dụng, giúp người dùng nhanh
chóng đăng tải sản phẩm, cập nhật thơngtin, vàquản lí các hoạt động kinh doanh hàng ngày. Điều
này giúp người dùngtạoratrảinghiệm bán hàng thuận tiện, đáp ứng nhu cầu ngày càng đa dạng của
kháchhàngvà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ìnhký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àngquầ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ăngtiếpcậnkhá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
1.6 Phạm vi nghiên cứu

- Thiết kế giao diện người dùng: Figma

3

- 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

CHƯƠNG 2: TỔNG QUAN
2.1 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áocũ,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 kinhdoanh.Đồng thời, khách hàng cũng có thể tìm kiếm và mua sắm những sản
phẩmquầnáochất lượng từ cửa hàng ký gửi thông qua giao diện trực tuyến thuận tiệnvàdễsửdụng.
2.1.1 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: c 1: Xác địch làm nh các yêu cầu: u:

- Phân tích khảng 1 . thi quy mô thực hiện. c hi n.
- Tìm hi u quy trình nghi p vụng màn hình .
- Tham khảng 1 . o và trảng 1 . i nghi m các ứng dụng liên quan. ng dụng màn hình ng liên quan. - Khảng 1 . o sát người dùng qua mạng. i dùng qua m ng.
- Thu th p thông tin yêu cầu: u.
●

Bước 1: Xác định các yêu cầu: c 2: Thi t k h thống: ng:

- Vẽ sơn đ Use-case: phân tích nghi p vụng màn hình tổng quan. ng quan. ● Bước 1: Xác định các yêu cầu: c 3: Thi t k dữ liệu li u

4
- Thi t k dữ liệu li u tươn ng ứng dụng liên quan. ng vớc 1: Xác định các yêu cầu: i từng loại yêu cầu của phần mềmđểđảmbảo đượcng lo i yêu cầu: u c a phầu: n mềmđểđảmbảo đượcmđ đảng 1 . mbảng 1 . o đượcc
tính đúng đ n và tính ti n hóa vớc 1: Xác định các yêu cầu: i phầu: n mềmđểđảmbảo đượcm, có hi uquảng 1 . vềmđểđảmbảo đượcmặt truy xuất và lưut truy xu ất và lưut và lưu
trữ liệu

- Xác địch làm nh và l p danh sách các bảng 1 . ng dữ liệu li u cầu: n thi t cho các yêucầu: uc aphầu: n
mềmđểđảmbảo đượcm
- Xây dực hiện. ng sơn đ logic cụng màn hình th c a phầu: n mềmđểđảmbảo đượcm ● Bước 1: Xác định các yêu cầu: 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 qua mạng. i dùng tươn ng tác vớc 1: Xác định các yêu cầu: i phầu: nmềmđểđảmbảo đượcm- Mô tảng 1 .
các đống: i tượcng trên từng loại yêu cầu của phần mềmđểđảmbảo đượcng màn hình
- Xác địch làm nh nhữ liệung chứng dụng liên quan. c năng hi n thịch làm trên từng loại yêu cầu của phần mềmđểđảmbảo đượcng màn hình ● Bước 1: Xác định các yêu cầu: c 5: Code và ki m th
- Code trình bày theo mơ hình 3 lớc 1: Xác định các yêu cầu: p và đượcc phân chia theo các nhi mvụng màn hình yêu cầu: u.
- Testcase rõ ràng đ ki m tra tính hi u quảng 1 . c a h thống: ng. 2.2 Cơ sở lý
thuyết
2.2.1 Thiết kế giao diện ngươi dùng Figma
2.2.1.1 Tổng quan về Figma


Hình 1. Figma

5
●

Figma là một ứng dụng web, cho phép người dùng truy cập và làmviệctrêntrì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ùnglưutrữ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ạoprototype và quản lý
thư viện.

2.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ỉnhsửacá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ụngvàduytrìtính nhất qn trên
tồn bộ dự án.

●

Figma cũng hỗ trợ tính năng cộng tác đồng thời, cho phép nhiềungười dùnglàm việc trên
cùng một dự án và theo dõi sự thay đổi trong thời gianthực.
2.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áchhiệuquả.
●

Cho phép chia sẻ và gửi mời người dùng khác để xem, chỉnh sửa hoặcphảnhồi.
2.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ế giaodiệntruyền thống.

6
●

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ượngdự án.

2.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 trongsuốt 20nă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 đíchkhácnhau, từ việc cải
thiện tính năng của website đến việc chạy game và tạophầnmềmnền web. Hơn nữa, có hàng ngàn
mẫu template JavaScript và ứng dụngngoài kia,nhờ vào sự cống hiến của cộng đồng, đặc biệt là

Github.


Hình 2. JavaScript

7
2.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ânviêncủaNetscape, vào tháng 9
năm 1995. Được đặt tên đầu tiên là Mocha, tên củanóđượcđổi thành Mona rồi LiveScript trước
khi thật sự trở thành JavaScript nổi tiếngnhư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 Netscapevà 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ộtphầ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àonăm1999. Nó liên tục phát triển thành
JavaScript ngày nay, giờ đã hoạt độngtrênkhắpmọ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đangsửdụng JavaScript
vào năm 2016. Chỉ trong 20 năm, nó từ một ngơn ngữlậptrìnhriêng trở thành công cụ quan trọng
nhất trên bộ công cụ của các chuyênviênlậptrình web. Nếu bạn đang dùng internet, vậy chắc
chắn bạn đã từngsửdụngJavaScript rồi.
2.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áchbiệt giữacác client. Ví dụ
2 người đang truy cập vào 2 trình duyệt khácnhauthìcả hai đều có những phiên xử
lý Javascript khác nhau, khơngảnhhưởnglẫ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ànghọcnómàkhơng cần phải
cài đặt q nhiều phần mềm.

Nhược điểm của Javascript:

8

Vì là một ngơn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác. Hackercó thể nhập một đoạn code bất kì vào khung
console của trình duyệt, lúcnàytrình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker cóthểgửinhửng
request lên server một cách dễ dàng.
2.2.2.3 JavaScipt Framework
Javascript Framework là một bộ thư viện được xây dựng dựa vàongơnngữlập trình Javascript. Mỗi framework thường
được tạo ra để phục vụ chomột lĩnhvực nào đó. Ví dụ với Angular và React thì chuyên xử lý frontend,
NodeJSthìchuyên xử lý backend, jQuery là một thư viện rất mạnh khi xử lý DOMHTMLvàCSS.
Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiệnnaycórấtnhiề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âydựngứng dụng realtime.
• Sencha Touch: Một Framework dùng để xây dựng ứng dụngMobile.
• ExtJS: Một Framework dùng xây dựng ứng dụng quảnlý(WebApplications).
• 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.2.3 ReactJS

2.2.3.1 Tổng quan về ReactJS

9
ReactJS là một thư viện JavaScript phổ biến được sử dụng để xâydựnggiaodiện người
dùng (UI) cho các ứng dụng web. Nó được phát triển bởi Facebookvàđã được cộng đồng phát
triển rộng rãi.


Hình 3. ReactJS
2.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ệnhiệusuấtvà tăng tốc
độ render giao diện người dùng. Khi một thành phần React đượctạo, nótạo ra một cây Virtual
DOM, là một phiên bản ảo của cây DOMthực sựtrongtrìnhduyệt. React sẽ theo dõi các thay đổi
trong trạng thái của thành phần và chỉ cậpnhậtnhững phần cần thiết trên cây Virtual DOM. Sau
đó, React so sánhcâyVirtualDOM mới với cây Virtual DOM cũ và chỉ cập nhật các phần khác
nhauvàoDOMthực sự. Điều này giúp giảm thiểu số lượng các thao tác tác động đếnDOM,
giúpứng dụng chạy mượt hơn.
2.2.3.3 Ưu điểm
●

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

10
● Quản lý trạng thái dễ dàng: React sử dụng khái niệm"state" đểquảnlýtrạng thái của các thành phần. Việc quản lý
trạng thái dễ dànggiúppháttriển ứng dụng dễ dàng hơn và giúp tái sử dụng thành phần một cáchhiệuquả.
●

Cộng đồng và hệ sinh thái mạnh mẽ: ReactJS có một cộng đồnglớnvàđơ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ànghơn.
2.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ầnngưỡngcaoban đầ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ìnhhọctậpkhá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ềuthành phần liên quan, quản lý trạng thái có

thể trở nên phức tạphơ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 quathơng qua việc nắm vững kiến thức và kỹ

năng phù hợp và sửdụngcácthưviện hỗ trợ như Redux hoặc MobX để quản lý trạng thái phức tạphơn.
2.2.4 NodeJS
2.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âydựngtrên JavaScript engine của Chrome (V8
engine). Nó cho phép chúng ta thựcthi 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ứngdụng web phía máy chủ.

11

Hình 4. NodeJS

2.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ệnmột cáchhiệu quả. Khi một yêu cầu đến, Node.js không chờ đợi các hoạt động
đồngbộhoànthà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ồnthànhhoặc có sự kiện nào đó xảy
ra, Node.js sẽ thơng báo thơng qua callbackhoặcsựkiện tương ứng. Điều này cho phép Node.js xử lý đồng thời nhiều
yêucầumàkhông gây block đối với các yêu cầu khác.
2.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ềunàygiúpcải thiện hiệu suất của ứng dụng và đáp ứng tốt với tải cao.
●

Phát triển dễ dàng: Node.js sử dụng JavaScript, ngôn ngữphổbiếnvàquen thuộc, cho phép lập trình viên sử dụng

cùng một ngơn ngữcảphíamáy chủ và phía khách hàng. Điều này giúp giảmđộ phức tạp vàđơngiảnhóa q trình phát
triển ứng dụng.


12
● Cộng đồng lớn: Node.js có một cộng đồng lớn và đông đảo, với rất nhiềuthư viện và công
cụ hữu ích. Cộng đồng phát triển sơi nổi này cungcấpsựhỗ trợ, tài liệu và giải pháp cho
các vấn đề phát triển.
2.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ưngdochạytrê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ơngphù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 frameworkhồnchỉnh, việc quản lý
trạng thái phức tạp có thể trở nên khó khăn. Lậptrìnhviê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.2.5 Phần mềm lập trình VSCode
2.2.5.1 Tổng quan về VSCode
Visual Studio Code (VS Code hay VSC) là một trong những trìnhsoạnthảomã 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ợđanền tảng, nhiều tính năng và
là mã nguồn mở chính là những ưu điểmvượt trộikhiến VS Code ngày càng được ứng dụng rộng
rãi.

13


Hình 5. Visual Studio Code
2.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àngphát hiệnvà đư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ụnghoặcchoWindows hoặc Linux
hoặc Mac Systems. Nhưng Visual Studio Codecó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ậptrìnhkhơng nằm
trong số các ngơn ngữ Visual Studio hỗ trợ, họ có thể tải xuốngtiệ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ầnmềm,bởi vì phần mở rộng này hoạt động như
một chương trình độc lập.

14
●

Kho lưu trữ an toàn
Đi kèm với sự phát triển của lập trình là nhu cầu về lưutrữantồn.Với Visual
Studio Code, người dùng có thể hồn tồn n tâmvì nódễdàngkế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ũngcó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ụctươngtựnhau.
Ngoài ra, Visual Studio Code còn cung cấp các thư mục chomộ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 chongười dùng.Visual
Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thaythếnếucó.

●

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ùngkhỏi phải chuyển
đổi giữa hai màn hình hoặc trở về thư mục gốckhi thựchiệ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ềutệptinvà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ậmchí, khi lậptrìnhviên qn khơng khai báo biến, Intellisense sẽ tự
động giúp họ bổsungcáccú 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ếptừGitHub.Mã này
sau đó có thể được thay đổi và lưu lại trên phần mềm.
2.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ượngtài nguyênkhá lớn, đặc
biệt khi bạn làm việc trên các dự án lớn hoặc mởnhiềutabcùng một lúc. Điều này có
thể ảnh hưởng đến hiệu suất của máytính, đặcbiệ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, VSCodecó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 đángchú ý khi bạn làm việc trên các dự
án có nhiều tệp tin hoặc tệptincókíchthướ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ặcdùVSCode đi kèm với
một số tính năng mạnh mẽ và tiện ích tích hợpsẵ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ạnthảo, bạnphải cài đặt các tiện ích bên thứ ba. Điều này có
thể u cầu thời gianvàcơng sức để tìm hiểu và tích hợp các tiện ích này.
2.3.5 Dịch vụ Github

16

Hình 6. Github

GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trênnềntảngweb cho các
dự án phát triển phần mềm. GitHub cung cấp cả phiên bảntrảtiềnlẫnmiễn phí cho các tài khoản.
Các dự án mã nguồn mở sẽ được cung cấp kho lưu trữ miễn phí. Tínhđếntháng 4 năm 2016,
GitHub có hơn 14 triệu người sử dụng với hơn 35 triệukhomãnguồn, làm cho nó trở thành máy
chủ chứa mã nguồn lớn trên thế giới.
Github đã trở thành một yếu tố có sức ảnh hưởng trong cộng đồngphát triểnmã nguồn
mở.