đồ án 2 phát triển 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Í MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

Phát triển 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 Đỗ Thị Thanh Tuyề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: 20521489

TP HỒ CHÍ MINH, 2023

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

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ô Đỗ Thị Thanh Tuyền– giảng viên bộ môn Đồ án 2 Cô đã trực tiếp hướng dẫn, tận tình chia sẻ nhữngkiến thức, hỗ trợ và đóng góp những ý kiến quý báu để giúp chúng tôi hoànthà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í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ằm hỗ trợ chủ cửa hà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ệm mua sắm trựctuyế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ứcvà sai sót, nhưng sự hỗ trợ và góp ý chân thành từ Cô đã giúp chúng tôi vượtqua những khó khăn và hoàn thiện đồ án một cách tốt nhất Chúng tôi xin camkết sẽ tiếp thu và áp dụng những kinh nghiệm quý báu này để nâng cao khả năngthự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ô Đỗ Thị Thanh Tuyền và hyvọng sự đóng góp của Cô sẽ tiếp tục giúp đỡ và hỗ trợ chúng tôi trong hà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ầy cô !Nhóm sinh viên thực hiện:Huỳnh Minh Chí - 20521130Nguyễn Hữu Trung Kiên - 20521489

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

DANH MỤC BẢNG

Bảng 3.1 Danh sách Use Case 20

Bảng 3.2 Use case Đăng nhập 21

Bảng 3.3 Use case Đăng xuất 22

Bảng 3.4 Use case Quản lý Ký gửi 23

B ng 3.5 Use case Qu n lý Thanh toánảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán 24

B ng 3.6 Use case Qu n lý Hóa đ nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ơn 25

B ng 3.7 Use case Qu n lý Khách hàngảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán 26

B ng 3.8 Use case Qu n lý S n ph mảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ẩm 28

B ng 3.9 Use case Bi u đảng 3.5 Use case Quản lý Thanh toán ểu đồ ồ 29

B ng 3.10 Use case Qu n lý Nhân viênảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán 30

B ng 3.11 Use case Qu n lý Ch m côngảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ấm công 31

B ng 3.12 Use case Báo cáoảng 3.5 Use case Quản lý Thanh toán 32

B ng 3.13 Use case Qu n lý Tài kho nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán 33

B ng 3.14 Use case Qu n lý S ki nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ự kiện ện 34

B ng 3.15 Use case Qu n lý S ki nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ự kiện ện 34

B ng 3.14 B ng thu c tính Khách hàngảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng 38

B ng 3.15 B ng thu c tính Nhân viênảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng 39

B ng 3.16 B ng thu c tính S n ph mảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng ảng 3.5 Use case Quản lý Thanh toán ẩm 39

B ng 3.17 B ng thu c tính ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng Hóa đ nơn 39

B ng 3.18 B ng thu c tính ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng Account 40

B ng 3.19 B ng thu c tính ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng Th i gian làm vi cời gian làm việc ện 40B ng 3.20 B ng thu c tính Lảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng ươn 40ng

B ng 3.21 B ng thu c tính Sảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng ự kiện ện 41 ki n

B ng 3.22 B ng thu c tính doanh thuảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng 41

B ng 3.23 B ng thu c tính ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng Báo cáo S n ph m thángảng 3.5 Use case Quản lý Thanh toán ẩm 41

B ng 3.2ảng 3.5 Use case Quản lý Thanh toán 4 B ng thu c tính ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng Báo cáo Doanh thu tháng 41

B ng 3.2ảng 3.5 Use case Quản lý Thanh toán 5 B ng thu c tính ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng Báo cáo S n ph m ngàyảng 3.5 Use case Quản lý Thanh toán ẩm 42

B ng 4.1 Danh sách các màn hìnhảng 3.5 Use case Quản lý Thanh toán 44

B ng 4.2 Mô t cách s d ng màn hình Đăng nh pảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ập 45

B ng 4.3 Mô t cách s d ng màn hình Trang chảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ủ 46

B ng 4.4 Mô t cách s d ng màn hình Ký g iảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ử dụng màn hình Đăng nhập 47

B ng 4.5 Mô t cách s d ng màn hình Thông tin s n ph mảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán ẩm 48

B ng 4.6 Mô t cách s d ng màn hình Thanh toánảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập 49

B ng 4.7 Mô t cách s d ng màn hình Qu n lý Hóa đ nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán ơn 50

B ng 4.8 Mô t cách s d ng màn hình Chi ti t Hóa đ n Ký g iảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ết Hóa đơn Ký gửi ơn ử dụng màn hình Đăng nhập 51

B ng 4.9 Mô t cách s d ng màn hình Qu n lý Khách hàngảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán 52

B ng 4.10 Mô t cách s d ng màn hình Thông tin Khách hàngảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập 53

B ng 4.11 Mô t cách s d ng màn hình Qu ng lý S n ph mảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ẩm 54

B ng 4.12 Mô t cách s d ng màn hình Ch nh s a S n ph mảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ỉnh sửa Sản phẩm ử dụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán ẩm 55

B ng 4.13 Mô t cách s d ng màn hình Bi u đảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ểu đồ ồ 56

B ng 4.14 Mô t cách s d ng màn hình Qu n lý Nhân viênảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán 57

B ng 4.15 Mô t cách s d ng màn hình Thông tin Nhân viênảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập 58

B ng 4.16 Mô t cách s d ng màn hình Thông tin Nhân viênảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập 59

B ng 4.17 Mô t cách s d ng màn hình L ch làm vi cảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ịch làm việc ện 60

B ng 4.18 Mô t cách s d ng màn hình Báo cáoảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập 61

B ng 4.19 Mô t cách s d ng màn hình Qu n lý Tài kho nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán 62

B ng 4.20 Mô t cách s d ng màn hình thông tin Tài kho nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán 63

B ng 4.2ảng 3.5 Use case Quản lý Thanh toán 1 Mô t cách s d ng màn hình ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập S ki nự kiện ện 63

B ng 4.2ảng 3.5 Use case Quản lý Thanh toán 2 Mô t cách s d ng màn hình ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập Thêm S ki nự kiện ện 64

B ng 4.2ảng 3.5 Use case Quản lý Thanh toán 3 Mô t cách s d ng màn hình ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ChatBox 65

B ng 4.24 Mô t cách s d ng màn hình Trang ch (Khách hàng)ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ủ 66

B ng 4.25 Mô t cách s d ng màn hình Qu n lý Hóa đ n và Chi ti t Hóa đ n ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán ơn ết Hóa đơn Ký gửi ơn(Khách hàng) 67

Hình 4.6 Màn hình Qu n lý Hóa đ nảng 3.5 Use case Quản lý Thanh toán ơn 49

Hình 4.7 Chi ti t Hóa đ n Ký g iết Hóa đơn Ký gửi ơn ử dụng màn hình Đăng nhập 50

Hình 4.8 Màn hình Qu n lý Khách hàngảng 3.5 Use case Quản lý Thanh toán 51

Hình 4.9 Thông tin Khách hàng 52

Hình 4.10 Màn hình Qu n lý S n ph mảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ẩm 53

Hình 4.11 Ch nh s a S n ph mỉnh sửa Sản phẩm ử dụng màn hình Đăng nhập ảng 3.5 Use case Quản lý Thanh toán ẩm 54

Hình 4.12 Màn hình Bi u đểu đồ ồ 55

Hình 4.13 Màn hình Qu n lý Nhân viênảng 3.5 Use case Quản lý Thanh toán 56

Hình 4.14 Thêm Nhân viên 57

Hình 4.15 Thông tin Nhân viên 58

Hình 4.16 Màn hình L ch làm vi cịch làm việc ện 59

Hình 4.17 Màn hình Báo cáo 60

Hình 4.18 Màn hình Qu n lý Tài kho nảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán 61

Hình 4.19 Màn hình Thông tin Tài kho nảng 3.5 Use case Quản lý Thanh toán 61

Hình 4.20 Màn hình S ki nự kiện ện 62

Hình 4.21 Màn hình Thêm S ki nự kiện ện 63

Hình 4.22 Màn hình ChatBox 64

Hình 4.23 Màn hình Trang ch (Khách hàng)ủ 65

Hình 4.24 Màn hình Qu n lý Hóa đ n (Khách hàng)ảng 3.5 Use case Quản lý Thanh toán ơn 66

Hình 4.25 Màn hình Chi ti t Hóa đ n Ký g i (Khách Hàng)ết Hóa đơn Ký gửi ơn ử dụng màn hình Đăng nhập 66

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ă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 quy trình kinhdoanh.

Website này giúp cho người dùng quản lí và kiểm soát các mặt hàng trongcử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 quankhác Ngoài ra, "PlanB" cung cấp chức năng bán hàng, cho phép người dùng thự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àng theo dõihiệ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 đị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 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 kinhdoanh 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 baogồ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íchhệ 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ũngnhư 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.

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ôngsứ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ụ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 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ó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ồn kho, tạo rabá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ả 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 cao hiệu suấtbán hàng thông qua việc theo dõi doanh thu, định giá sản phẩm, và quản lý 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 đá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àngtồn kho giúp người dùng kiểm soá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ảnphẩ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

dùng quản lí hàng tồn kho một cách chính xác, tránh thất thoát và lãng phí 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ông tin quantrọ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ạodự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ă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 cho ngườidù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ả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á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àngqua 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ửahàng quần áo, cửa hàng đồ cũ, gian hàng chợ đồ cũ, hay cá nhân có nhu cầu bánhàng secondhand "PlanB" giúp đơn giản hóa quy trình quản lí hàng hóa, tăngcườ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.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

- AI Chatbot: Kommunicate

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 á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 á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ữ

- 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

- Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.

CHƯƠNG 2: TÌM HIỂU CƠ SỞ LÝ THUYẾT

2.1 Thiết kế giao diện người dùng Figma2.1.1 Tổng quan về Figma

Hình 2.1 Figma

https://s.net.vn/DcdD [Truy cập ngày 17 tháng 12, 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ê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ù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ạoprototype 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ì

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

 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ệntruyề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ượngdự á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 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 đích khácnhau, 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ềmnề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.

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ăm1999 Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắ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 đ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ìnhriê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ậptrình web Nếu bạn đang dùng internet, vậy chắc chắn bạn đã từng sử dụngJavaScript rồi.

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ữacá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ưở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à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 Hackercó thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc nà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.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ĩnhvự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ấ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ây dựng ứng dụng realtime.

• Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.

• 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 giaodiệ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.

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ậttoà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.

 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á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ách hiệuquả.

 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 quá trình họctậ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 quathô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.

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ựngtrên JavaScript engine của Chrome (V8 engine) Nó cho phép chúng ta thực thi mãJavaScript bên ngoà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ủ.

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ú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ế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íamáy chủ và phía khách hàng Điều này giúp giảm độ phức tạp và đơn giảnhóa quá 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 toà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 hoà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ì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.5 Phần mềm lập trình VSCode2.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ả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ểm vượt trộikhiến VS Code ngày càng được ứng dụng rộng rãi.

Hình 2.5 Visual Studio Code

Link hình Visual Studio Code [Truy c p ngày 17 tháng 12, 2023]ập

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ệ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ụng hoặc choWindows 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ì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ầ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

Đ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ể hoàn toàn yên tâm vì 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 Ngoà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ườidù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ùngkhỏi phải chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thựchiện các thao tác.

 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 tabcù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, đặ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, 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 đángchú ý 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í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ặ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ạnphả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

Link hình Github [Truy c p ngày 17 tháng 12, 2023]ập

GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trên nền tảngweb cho các dự án phát triển phần mềm GitHub cung cấp cả phiên bản trả tiền lẫ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ệu kho mã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 đồng phát triểnmã nguồn mở.

Thậm chí nhiều nhà phát triển đã bắt đầu xem nó là một sự thay thế cho sơyếu lý lịch và một số nhà tuyển dụng yêu cầu các ứng viên cung cấp một liên kếtđến tài khoản Github để đánh giá ứng viên.

Dự án trên Github có thể được truy cập và thao tác sử dụng một giao diệndòng lệnh và làm việc với tất cả các lệnh Git tiêu chuẩn Github cũng cho phépngười dùng đăng ký và không đăng ký để duyệt kho công cộng trên trang web.Github cũng tạo ra nhiều client và plugin cho máy tính để bàn.

2.7 AI Chatbot: Kommunicate

Hình 2.7 Kommunicate

Link hình Kommunicate [Truy c p ngày 17 tháng 12, 2023]ập

2.7.1 T ng quan v Kommunicateổng quan về Kommunicateề Kommunicate

M t n n t ng chatbot và gi i pháp trò chuy n tr c tuy n độc tính Khách hàng ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ện ự kiện ết Hóa đơn Ký gửi ược thiết kế c thi t k ết Hóa đơn Ký gửi ết Hóa đơn Ký gửiđ cung c p tr i nghi m giao ti p t t nh t cho doanh nghi p.ểu đồ ấm công ảng 3.5 Use case Quản lý Thanh toán ện ết Hóa đơn Ký gửi ốt nhất cho doanh nghiệp ấm công ện

2.7.2 Cách th c ho t đ ngức hoạt độngạt độngộng

 Chatbot và Trò chuy n tr c tuy n: Kommunicate cung c p kh năng tích ện ự kiện ết Hóa đơn Ký gửi ấm công ảng 3.5 Use case Quản lý Thanh toánh p chatbot vào trang web ho c ng d ng di đ ng đ t đ ng hóa quá ợc thiết kế ặc ứng dụng di động để tự động hóa quá ứng dụng di động để tự động hóa quá ụng màn hình Đăng nhập ộc tính Khách hàng ểu đồ ự kiện ộc tính Khách hàngtrình h tr và trò chuy n v i ngỗ trợ và trò chuyện với người dùng ợc thiết kế ện ới người dùng ười gian làm việci dùng.

 Đa n n t ng: H tr trên nhi u n n t ng nh trang web, ng d ng di ảng 3.5 Use case Quản lý Thanh toán ỗ trợ và trò chuyện với người dùng ợc thiết kế ảng 3.5 Use case Quản lý Thanh toán ư ứng dụng di động để tự động hóa quá ụng màn hình Đăng nhậpđ ng, Facebook Messenger, WhatsApp, và nhi u n n t ng trò chuy n khác.ộc tính Khách hàng ảng 3.5 Use case Quản lý Thanh toán ện Tích h p D li u và CRM: Có kh năng tích h p v i các h th ng qu n lý ợc thiết kế ữ liệu ện ảng 3.5 Use case Quản lý Thanh toán ợc thiết kế ới người dùng ện ốt nhất cho doanh nghiệp ảng 3.5 Use case Quản lý Thanh toán

m i quan h khách hàng (CRM) và các ngu n d li u khác đ cung c p ốt nhất cho doanh nghiệp ện ồ ữ liệu ện ểu đồ ấm côngthông tin chi ti t v ngết Hóa đơn Ký gửi ười gian làm việci dùng.

 Qu n lý Nhóm: Cho phép qu n lý và phân công cu c trò chuy n cho các ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng ệnnhóm h tr ỗ trợ và trò chuyện với người dùng ợc thiết kế

 Phân tích và Báo cáo: Cung c p các công c phân tích và báo cáo đ theo ấm công ụng màn hình Đăng nhập ểu đồdõi hi u su t và t i u hóa tr i nghi m ngện ấm công ốt nhất cho doanh nghiệp ư ảng 3.5 Use case Quản lý Thanh toán ện ười gian làm việci dùng.

2.7.3 u đi mƯu điểmểm

 Tích h p Chatbot: Có th tích h p chatbot đ gi i quy t t đ ng các v n ợc thiết kế ểu đồ ợc thiết kế ểu đồ ảng 3.5 Use case Quản lý Thanh toán ết Hóa đơn Ký gửi ự kiện ộc tính Khách hàng ấm côngđ c b n và giúp gi m áp l c cho đ i ngũ h tr ơn ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ự kiện ộc tính Khách hàng ỗ trợ và trò chuyện với người dùng ợc thiết kế

 N n t ng đa kênh: H tr trên nhi u n n t ng, giúp doanh nghi p ti p ảng 3.5 Use case Quản lý Thanh toán ỗ trợ và trò chuyện với người dùng ợc thiết kế ảng 3.5 Use case Quản lý Thanh toán ện ết Hóa đơn Ký gửic n và tập ươnng tác v i khách hàng nhi u đi m ti p c n.ới người dùng ở dữ liệu ểu đồ ết Hóa đơn Ký gửi ập

 Tích h p D li u: K t n i v i các ngu n d li u khác nhau đ cung c p ợc thiết kế ữ liệu ện ết Hóa đơn Ký gửi ốt nhất cho doanh nghiệp ới người dùng ồ ữ liệu ện ểu đồ ấm côngthông tin chi ti t và cá nhân hóa tr i nghi m ngết Hóa đơn Ký gửi ảng 3.5 Use case Quản lý Thanh toán ện ười gian làm việci dùng.

 Qu n lý Nhóm H tr : Cung c p tính năng qu n lý nhóm giúp phân công vàảng 3.5 Use case Quản lý Thanh toán ỗ trợ và trò chuyện với người dùng ợc thiết kế ấm công ảng 3.5 Use case Quản lý Thanh toántheo dõi hi u su t c a đ i ngũ h tr ện ấm công ủ ộc tính Khách hàng ỗ trợ và trò chuyện với người dùng ợc thiết kế

2.7.4 Nhược điểmc đi mểm

 Chi phí: Có th g p khó khăn v i các doanh nghi p nh v m t chi phí, tùy ểu đồ ặc ứng dụng di động để tự động hóa quá ới người dùng ện ỏ về mặt chi phí, tùy ặc ứng dụng di động để tự động hóa quá thu c vào gói d ch v độc tính Khách hàng ịch làm việc ụng màn hình Đăng nhập ược thiết kế c ch n.ọn.

 Đ i tốt nhất cho doanh nghiệp ược thiết kế ng s d ng: Có th không phù h p cho m i doanh nghi p, đ c bi tử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ểu đồ ợc thiết kế ọn ện ặc ứng dụng di động để tự động hóa quá ệnlà nh ng doanh nghi p có yêu c u riêng bi t ho c c n tùy ch nh m nh mẽ ữ liệu ện ầu riêng biệt hoặc cần tùy chỉnh mạnh mẽ ện ặc ứng dụng di động để tự động hóa quá ầu riêng biệt hoặc cần tùy chỉnh mạnh mẽ ỉnh sửa Sản phẩm ạnh mẽ h n.ơn

 H c và Tri n khai: Vi c tri n khai và tùy ch nh có th đòi h i m t kho ng ọn ểu đồ ện ểu đồ ỉnh sửa Sản phẩm ểu đồ ỏ về mặt chi phí, tùy ộc tính Khách hàng ảng 3.5 Use case Quản lý Thanh toánth i gian và ki n th c kỹ thu t.ời gian làm việc ết Hóa đơn Ký gửi ứng dụng di động để tự động hóa quá ập

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

3.1 ĐẶC TẢ USE CASE3.1.1 Sơ đồ Use case

Hình 3.1 Sơ đồ Use case

3.1.2 Danh sách Use case

Bảng 3.1 Danh sách Use Case

RoleUse caseÝ nghĩa

Đăng nhập Cho phép đăng nhập để sử dụng hệ thốngĐăng xuất Cho phép thoát ra khỏi hệ thống

Quản lý Ký gửi Thêm sản phẩm, xác nhận tạo hóa đơn,hủy ký gửi

Quản lý Thanh toán Tìm kiếm sản phẩm, xác nhận tạo hóađơn

Quản lý Hóa đơn Tìm kiếm, xóa, in hóa đơn, thanh toán

hóa đơn ký gửi

Quản ký Khách hàng Tìm kiếm, thêm, xóa khách hàngQuản lý Sản phẩm Tìm kiếm, xóa, in barcode sản phẩmAdmin’s

Biểu đồ Lọc thống kê theo ngày/tháng/nămQuản lý Nhân viên Tìm kiếm, thêm, xóa nhân viênQuản lý Chấm công Chọn thời gian, chấm công, lưu bảngQuản lý Báo cáo Xuất báo cáo

Quản lý Tài khoản Tìm kiếm, xóa tài khoảnQuản lý Sự kiện Thêm sự kiện

3.1.3 Đặc tả Use case3.1.3.1 Đăng nhập

Bảng 3.2 Use case Đăng nhập

Tên Use caseĐăng nhập

Người thực hiện (Actor) Nhân viên

Sự kiện kích hoạt (Trigger) Bấm chọn đăng nhậpĐiều kiện tiên quyết

liệu trong Database.

5 Xác nhận thành công, hệ thống chuyển tới trang chủ.

Kịch bản thay thế (Alternative Flow)

3a Hệ thống xác nhận tài khoản và mật khẩu không đúng theo yêu cầu Use case trở về với bước 2.

4a Hệ thống xác nhận dữ liệu nhập không trùng khớpvới dữ liệu trong Database Use case trở về với bước 2.

3.1.3.2 Đăng xuất

Bảng 3.3 Use case Đăng xuất

Tên Use case Đăng xuất

Mô tả Cho phép thực hiện chức năng đăng xuất khỏi phiênlàm việc của tài khoản hiện tại

Người thực hiện (Actor) Nhân viên

Sự kiện kích hoạt (Trigger) Bấm chọn Đăng xuấtĐiều kiện tiên quyết

3.1.3.3 Quản lý Ký gửi

Bảng 3.4 Use case Quản lý Ký gửi

Tên Use caseQuản lý Ký gửi

Mô tả Thêm sản phẩm, xác nhận tạo hóa đơn, hoặc hủy kýgửi

Người thực hiện (Actor) Nhân viên

Sự kiện kích hoạt (Trigger) Bấm vào các button như Thêm sản phẩm, xác nhậntạo hóa đơn hoặc hủy ký gửi

Điều kiện tiên quyết (Pre-Conditions)

Đăng nhập thành công vào hệ thống Điều kiện kết quả

Thực hiện các thao tác như thêm sản phẩm, xác nhậntạo hóa đơn hoặc hủy ký gửi thành công

Kịch bản chính (Basic Flow)

1 Hệ thống hiển thị trang Quản lý Ký gửi

2 Nhân viên chọn 1 chức năng (Thêm sản phẩm, xácnhận tạo hóa đơn, hủy ký gửi)

- Thêm sản phẩm:

3 Nhập thông tin sản phẩm4 Xác nhận thêm sản phẩm- Xác nhận tạo hóa đơn:

5 Sau khi thêm sản phẩm thành công6 Nhấn nút xác nhận tạo hóa đơn7 Thông báo tạo hóa đơn thành công- Hủy hóa đơn

8 Sau khi thêm sản phẩm thành công9 Nhấn nút hủy hóa đơn

10 Thông báo hủy hóa đơn thành côngKịch bản thay thế

3.1.3.4 Quản lý Thanh toán

Bảng 3.5 Use case Quản lý Thanh toán

Tên Use caseQuản lý Thanh toán

Mô tả Tìm kiếm mã sản phẩm, Xác nhận tạo hóa đơnNgười thực hiện (Actor) Nhân viên

Sự kiện kích hoạt (Trigger) Nhập mã sản phẩm, Nhấn nút xác nhận tạo hóa đơn

Điều kiện tiên quyết (Pre-Conditions)

Đăng nhập Thành công vào hệ thốngĐiều kiện kết quả

Hiển thị thông tin theo mã sản phẩm, xác nhận tạohóa đơn thành công

Kịch bản chính (Basic Flow)

1 Chọn chức năng- Tìm kiếm mã sản phẩm2 Điền mã sản phẩm

3 Hệ thống lọc theo mã nhân viên đã nhập để hiệnnhững sản phẩm theo mã

4 Hiện những sản phẩm theo mã đã nhập- Xác nhận tạo hóa đơn

5 Nhấn xác nhận tạo hóa đơn

6 Hệ thống thông báo xác nhận thành côngKịch bản thay thế

(Alternative Flow)

3a Mã sản phẩm không tồn tại nên hệ thống hiện thịdanh sách rỗng Use case trở về bước 2

3.1.3.5 Quản lý Hóa đơn

Bảng 3.6 Use case Quản lý Hóa đơn

Tên Use caseQuản lý Hóa đơn

Mô tả Tìm kiếm hóa đơn, thanh toán hóa đơn ký gửi, in hóađơn, xóa hóa đơn

Người thực hiện (Actor) Nhân viên

Sự kiện kích hoạt (Trigger) Điền vào thanh tìm kiếm, Ấn vô hóa đơn để thực hiệnthanh toán hóa đơn ký gửi và in hóa đơn, ấn vô biểutượng thùng rác để xóa hóa đơn

Điều kiện tiên quyết (Pre-Conditions)

Đăng nhập vào hệ thống và đã có hóa đơnĐiều kiện kết quả

Tìm kiếm thành công hóa đơn, thanh toán hóa đơn kýgửi, in hóa đơn và xóa hóa đơn thành công

Kịch bản chính (Basic Flow)

1 Hệ thống hiển thị trang quản lý hóa đơn- Tìm kiếm hóa đơn

2 Nhập khách hàng hoặc mã hóa đơn cần tìm

3 Hệ thống xác thực để hiển thị thông tin hợp lệ4 Nhấn vào hóa đơn

- Thanh toán hóa đơn ký gửi

5 Kiểm tra thông tin rùi xác nhận thanh toán hóa đơn6 Thông báo xác nhận thành công

- In hóa đơn

7 Ấn in hóa đơn để đưa cho khách hàng- Xóa hóa đơn

8 Xác nhận xóa hóa đơn

9 Hệ thống thông báo xóa thành côngKịch bản thay thế

(Alternative Flow)

2a Nhập thông tin không hợp lệ hệ thống không gửivề thông tin Trở lại use case 1

3.1.3.6 Quản lý Khách hàng

Bảng 3.7 Use case Quản lý Khách hàng

Tên Use caseQuản lý Khách hàng

Người thực hiện (Actor) Nhân viên

Sự kiện kích hoạt (Trigger) Nhập vào khung tìm kiếm, nhấn vô nút thêm hoặcnhấn vô thùng rác để xóa khách hàng

Điều kiện tiên quyết (Pre-Conditions)

Đăng nhập vào hệ thống thành côngĐiều kiện kết quả

Tìm kiếm hiện ra kết quả mong muốn, thêm và xóakhách hàng thành công

Kịch bản chính (Basic Flow)

1 Hiển thị trang quản lý khách hàng- Tìm kiếm khách hàng

2 Nhập số điện thoại hoặc tên khách hàng

3 Hệ thống sẽ xác thực dữ liệu nhập vào để hiệnthông tin khách hàng chính xác

4 Hiện thị thông tin khách hàng theo như mongmuốn

- Thêm khách hàng

5 Nhấn vào nút thêm khách hàng6 Nhập thông tin khách hàng

7 Hệ thống xác thực thông tin rùi lưu về Database8 Thông báo thêm khách hàng thành công

Bảng 3.8 Use case Quản lý Sản phẩm

Tên Use caseQuản lý Sản phẩm

Người thực hiện (Actor) Nhân viên

Sự kiện kích hoạt (Trigger) Nhập vào khung tìm kiếm, ấn vô sản phẩm để inBarcode, ấn vô biểu tượng thùng rác để xóa sản phẩmĐiều kiện tiên quyết

1 Hiển thị thông tin trang sản phẩm- Tìm kiếm sản phẩm

2 Nhập thông tin sản phẩm cần tìm

3 Hệ thống xác thực dữ liệu rùi hiện thị kết quả nhưmong muốn

- In mã Barcode4 Ấn vô sản phẩm

5 Thực hiện thao tác in mã Barcode6 Hệ thống xuất mã Barcode

- Xóa sản phẩm

7 Di chuột vô sản phẩm để hiển thị biểu tượng thùngrác

8 Thực hiện thao tác xóa sản phẩm

9 Hệ thống phản hồi rồi thông báo xóa thành côngKịch bản thay thế

(Alternative Flow)

2a Nhập thông tin không hợp lệ hệ thống không gửivề thông tin Trở lại use case 1

3.1.3.8 Biểu đồ

Bảng 3.9 Use case Biểu đồ

Tên Use caseBiểu đồ

Người thực hiện (Actor) Admin

Sự kiện kích hoạt (Trigger) Thao tác với các thanh lọcĐiều kiện tiên quyết

(Pre-Conditions)

Đăng nhập thành côngĐiều kiện kết quả

3.1.3.9 Quản lý Nhân viên

Bảng 3.10 Use case Quản lý Nhân viên

Tên Use caseQuản lý Nhân viên

Mô tả Tìm kiếm, thêm và xóa nhân viênNgười thực hiện (Actor) Admin

Sự kiện kích hoạt (Trigger) Điền vô khung tìm kiếm, thao tác với các nút thêmxóa

Điều kiện tiên quyết (Pre-Conditions)

Đăng nhập thành công và hiển thị danh sách nhânviên

Điều kiện kết quả (Post-Conditions)

Hiển thị thông tin nhân viên sau khi tìm kiếm, thêmvà xóa nhân viên thành công

Kịch bản chính (Basic Flow)

1 Hiển thị trang quản lý nhân viên- Tìm kiếm nhân viên

2 Nhập thông tin nhân viên

3 Hệ thống sẽ xác thực dữ liệu nhập vào để hiệnthông tin nhân viên chính xác

4 Hiện thị thông tin nhân viên theo như mong muốn- Thêm nhân viên

5 Nhấn vào nút thêm nhân viên6 Nhập thông tin nhân viên

7 Hệ thống xác thực thông tin rùi lưu về Database8 Thông báo thêm nhân viên thành công

- Xóa nhân viên

9 Chọn một nhân viên rùi click vô biểu tượng thùngrác để xóa thông tin nhân viên

10 Xác nhận xóa nhân viên

11 Hệ thống thông báo xóa khách hàng thành côngKịch bản thay thế