Ứng dụng mua bán đồ nội thất

Phạm Gia Bảo – 19521254 Nội dung đề tài: Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực hiện, kết quả mong đợi của đề tài Mục tiêu Nghiên cứu về các công nghệ lập trình w

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

TP HCM, ngày tháng năm 2022

NHẬN XÉT ĐỒ ÁN 1 (CỦA CÁN BỘ HƯỚNG DẪN)

Tên khóa luận:

Ứng dụng cung cấp dịch vụ mua bán hàng trực tuyến

Đánh giá Khóa luận:

1 Về cuốn báo cáo:

Một số nhận xét về hình thức cuốn báo cáo:

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

LỜI CẢM ƠN

Để hoàn thành dự án cho môn Đồ án 1 này, chúng em xin gửi lời cảm ơn chân thành đến:

Giảng viên Mai Trọng Khang đã tận tình giúp đỡ, định hướng cách tư duy và cách làm việc

khoa học Đó là những góp ý hết sức quý báu không chỉ trong quá trình thực hiện đồ án môn học này

mà còn là hành trang tiếp bước cho chúng em trong quá trình học tập và thực hiện khóa luận tốt nghiệp sau này

Trong quá trình làm đồ án này chúng em không tránh khỏi được những sai sót, chúng em kính mong nhận được sự chỉ dẫn và góp ý của thầy để đồ án được hoàn thiện hơn

Chúng em xin chân thành cảm ơn Xin chúc những điều tốt đẹp nhất sẽ luôn đồng hành cùng thầy

TP.HCM, ngày 02 tháng 06 năm 2022 Sinh viên

PHẠM HỚN TUYỀN PHẠM GIA BẢO

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA

VIỆT NAM Độc Lập – Tự Do – Hạnh Phúc

TP.HCM, ngày 02 tháng 06 năm 2022

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Ứng dụng cung cấp dịch vụ mua bán đồ nội thất online.

Cán bộ hướng dẫn: Giảng viên Mai Trọng Khang

Thời gian thực hiện: Từ ngày 07/04/2022 đến ngày 23/06/2022

Sinh viên thực hiện:

1 Phạm Hớn Tuyền –19521092

2 Phạm Gia Bảo – 19521254

Nội dung đề tài: (Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực hiện, kết quả

mong đợi của đề tài)

Mục tiêu

Nghiên cứu về các công nghệ lập trình website bằng ngôn ngữ JavaScript, xây dựng Frontend bằng ReactJS, xây dựng Backend bằng ngôn ngữ JavaScript sử dụng NodeJS và Express framework, hệ quản trị cơ sở dữ liệu…., các nghiệp vụ hay bước xử lý các bài toán đặc trưng của một ứng dụng bán hàng online cụ thể trong đồ án này là cung cấp dịch vụ mua bán trực tiếp, cũng như hiểu được cách xử lý dữ liệu để có thể giảm thiểu thời gian tải, gia tăng hiệu suất ứng dụng, giải quyết được sự đa dạng của hàng hóa

Nhiệm vụ

Đề tài “Ứng dụng cung cấp dịch vụ mua bán đồ nội thất” là một ứng dụng chạy trên trình duyệt web và có thể chạy trên mọi trình duyệt hiện nay

Ứng dụng gồm có 3 phần: Ứng dụng xây dựng cho người bán, ứng dụng xây dựng cho người mua trên ứng dụng website và backend truy vấn dữ liệu viết bằng Javascript

Ứng dụng đối với người tiêu dùng:

• Đăng kí

• Đăng nhập

• Xem Sản phẩm

• Tìm kiếm sản phẩm

• Xem Chi tiết sản phẩm

• Lọc sản phẩm theo thể loại trang trí

• Thêm sản phẩm vào giỏ hang

• Xem chi tiết từng đơn hàng

Ứng dụng đối với người bán hàng:

• Tìm hiểu các quy trình nghiệp vụ mua bán hàng hiện có

• Tìm hiểu nghiệp vụ, quy trình hoạt động của shop mua sắm đồ nội thất

• Phác họa hệ thống tổng quát (thiết kế dữ liệu, xử lý dữ liệu…)

• Tham khảo các ứng dụng tương tự: Nhà xinh, Phố xinh, Shopee, Tiki, …

• Tham khảo ý kiến của giảng viên hướng dẫn để được định hướng đúng, đạt kết quả tốt nhất

• Thiết kế giao diện, cơ sở dữ liệu đáp ứng được các yêu cầu cho ứng dụng

Kết quả mong đợi

Đối với kết quả mong đợi chung:

• Xây dựng được cách xử lý các bài toán về tải dữ liệu tăng hiệu suất

• Biết được các kỹ thuật lập trình với JavaScript, ReactJS, SCSS, TailwindCSS, Axios,

Redux, Antd, NodeJS, ExpressJS, MongoDB, Mongoose, JsonWebToken, Bcrypt

• Hoàn thành ứng dụng với giao diện trực quan, hoạt động tốt trên các nền tảng trình duyệt (mobile và desktop)

• Giải quyết được bài toán về đa dạng hàng hóa

Đối với ứng dụng bên mua:

• Với khách hàng là người dùng chưa đăng nhập, có thể xem sản phẩm, tìm kiếm sản phẩm

và đăng ký tài khoản

• Với khách hàng là người mua và đã đăng nhập có thể thực hiện chức năng xem sản phẩm, quản lý giỏ hàng, quản lý địa chỉ giao hàng, tạo đơn hàng, xem tình trạng đơn hàng, hủy đơn hàng

Đối với ứng dụng bên bán

• Với khách hàng là các cửa hàng đã đăng nhập có thể quản lí, thực hiện CRUD sản phẩm, thực hiện cập nhật trạng thái giao hàng, hủy đơn hàng khi phát hiện bất thường, thực hiện quản lý kho…

Các tiêu chí khác

• Tính thẩm mỹ: Ứng dụng có giao diện dễ nhìn, dễ dàng thực hiện các thao tác, không gây

cảm giác khó chịu hay khó sử dụng cho người dùng

Kế hoạch thực hiện: (Mô tả kế hoạch làm việc và phân chia công việc các thành viên tham gia)

Với thời gian thực hiện từ ngày 07/04/2022 đến ngày 23/06/2022, nhóm chia thành các công việc cụ thể như sau:

Giai đoạn 1: Khảo sát tìm hiểu về các ứng dụng, bài toán cần giải quyết có liên quan

1 Khảo sát các ứng dụng như Nhà xinh, Phố xinh, Shopee, Tiki, … Cả hai

2 Tìm hiểu thêm về các hoạt động khác trong lĩnh vực thương mại điện tử: liên

4 Lập báo cáo khảo sát bao gồm, hình ảnh UI, luồng, các bào toán Cả hai

Giai đoạn 2: Thiết kế giải quyết các bài toán, phân rã yêu cầu, hình thành các chức năng

6 Viết user-story Cả hai

Giai đoạn 3: Tìm hiểu về các công nghệ liên quan và sẽ được sử dụng

Giai đoạn 4: Mô tả chi tiết các bài toán, usecase, các hoạt động của đồ án, thiết kế kiến trúc, UI/UX, cơ sở dữ liệu, class

13 Thiết kế sơ đồ dữ liệu Cả hai

Giai đoạn 5: Tiến hành triển khai xây dựng đồ án

Tuyền

17 Code phần Model ở Backend (xây dựng model ở backend theo bảng thiết kế

class diagram – MongoDB là CSDL NoSQL nên không có mô hình CSDL)

Phạm Gia Bảo

20 Xây dựng các APIs kết hợp với kiểm thử Postman, sau đó kết nối với bên

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1

1.1 Giới thiệu đề tài 1

1.2 Khảo sát người dùng 1

1.3 Giải pháp 5

1.4 Các chức năng chính 6

1.5 Các yêu cầu phi chức năng 7

1.5.1 Tính khả dụng 7

1.5.2 Độ tin cậy 7

1.5.3 Hiệu năng 7

1.6 Các công nghệ 7

1.7 Các công cụ phát triển 7

1.8 Quản lý Projects 8

CHƯƠNG 2: CÔNG NGHỆ 9

2.1 Công nghệ chính 9

2.1.1 MongoDB 9

2.1.2 Javascript 10

2.1.3 ReactJS 10

2.1.4 Nodejs 11

2.1.5 ExpressJS 11

2.1.6 Ant Design 12

2.2 Cấu trúc của ứng dụng Web 13

CHƯƠNG 3: CHI TIẾT CẤU TRÚC HỆ THỐNG 15

3.1 Mô hình Usecase 15

3.2 Danh sách các Actor 15

3.3 Danh sách các Usecases 16

3.4 Đặc tả Usecases 17

3.4.1 Đặc tả Use-case “Quản lý giỏ hàng” 17

3.4.2 Đặc tả Use-case “Thêm sản phẩm vào giỏ hàng” 17

3.4.3 Đặc tả Use-case “Đặt hàng” 18

3.4.4 Đặc tả Use-case “Quản lý sản phẩm” 19

3.4.5 Đặc tả Use-case “Quản lý hóa đơn” 19

3.4.6 Đặc tả Use-case “Cập nhật trạng thái hóa đơn” 20

3.4.7 Đặc tả Use-case “Tìm kiếm khách hàng” 21

3.4.8 Đặc tả Use-case “Hiển thị thông tin chi tiết sản phẩm” 21

3.4.9 Đặc tả Use-case “Đăng nhập” 22

3.4.10 Đặc tả Use-case “Đăng kí” 23

3.4.11 Đặc tả Use-case “Thoát” 23

3.4.12 Đặc tả Use-case “Đổi password” 24

3.4.13 Đặc tả Use-case “Tìm kiếm sản phẩm” 25

3.4.14 Đặc tả Use-case “Xem chi tiết hóa đơn” 25

3.4.15 Đặc tả Use-case “Thay đổi thông tin cá nhân” 26

3.4.16 Đặc tả Use-case “Quản lý địa chỉ giao hàng” 27

3.5 Sơ đồ Activity Diagram 28

3.5.1 UC1: Quản lý giỏ hàng 28

3.5.2 UC2: Thêm sản phẩm vào giỏ hàng 29

3.5.3 UC3: Đặt hàng 30

3.5.4 UC4: Quản lý sản phẩm 31

3.5.5 UC5: Quản lý hóa đơn 32

3.5.6 UC6: Hiển thị danh sách hóa đơn 33

3.5.7 UC7: Tìm kiếm khách hàng 34

3.5.8 UC8: Hiển thị thông tin chi tiết sản phẩm 35

3.5.9 UC9: Đăng nhập 36

3.5.10 UC10: Đăng kí 36

3.5.11 UC11: Thoát 38

3.5.12 UC12: Đổi password 39

3.5.13 UC13: Tìm kiếm sản phẩm 40

3.5.14 UC14: Xem chi tiết hóa đơn 41

3.5.15 UC15: Thay đổi thông tin các nhân 42

3.5.16 UC16: Quản lý địa chỉ giao hàng 43

3.6 Sơ đồ Sequence Diagram 44

3.6.1 UC1,2: Quản lý giỏ hàng 44

3.6.2 UC3: Quản lý giỏ hàng 44

3.6.3 UC4: Quản lý sản phẩm 45

3.6.4 UC5: Quản lý hóa đơn 45

3.6.5 UC6: Cập nhật trạng thái hóa đơn 46

3.6.6 UC7: Tìm kiếm khách hàng 46

3.6.7 UC8: Hiển thị thông tin chi tiết sản phẩm 47

3.6.8 UC9: Đăng nhập 47

3.6.9 UC10: Đăng kí 47

3.6.10 UC11: Thoát 48

3.6.11 UC12: Đổi mật khẩu 48

3.6.12 UC13: Tìm kiếm sản phẩm 49

3.6.13 UC14: Xem chi tiết hóa đơn 49

3.6.14 UC15: Thay đổi thông tin các nhân 50

3.6.15 UC16: Quản lý địa chỉ giao hàng 50

3.7 Thiết kế database 51

3.7.1 Sơ đồ Database 51

3.7.2 Mô tả Database 52

CHƯƠNG 4: GIAO DIỆN NGƯỜI DÙNG 55

4.1 Giao diện người dùng 55

4.2 Cài đặt chương trình 65

CHƯƠNG 5: KẾT LUẬN 67

5.1 Kết quả đạt được 67

5.2 Khó khăn 67

5.3 Hướng phát triển 68

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

DANH MỤC TỪ VIẾT TẮT

CSDL

(DB)

Cơ sở dữ liệu(Database) Cơ sở dữ liệu cho ứng dụng

API Aplication Programming

Interface Giao diện lập trình ứngdụng

UI/ UX User Interface/ User Experience Giao diện người dùng/Trải nghiệm người

dùngHTTP HyperText Transfer Protocol Giao thức truyền siêu vănbản

JSON JavaScript Object Notation Định dạng trao đổi dữ liệu

HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn bản

CSS Cascading Style Sheets Tập tin định kiểu theo tầng

mẫu CRUD Create Read Update Delete Tạo, Đọc, Cập nhật, Xóa

TÓM TẮT KHÓA LUẬN

Đồ án 1 với đề tài “Ứng dụng mua bán đồ nội thất” gồm 05 chương:

Chương 1: Giới thiệu về đề tài, khảo sát người dùng, các chức năng chính và các yêu cầu

phi chức năng

Chương 2: Trình bày các công nghệ chính sử dụng trong dự án

Chương 3: Trình bày chi tiết cấu trúc hệ thống và thiết kế database

Chương 4: Thiết kế Giao diện người dùng

Chương 5: Kết luận, những gì đạt được, khó khăn sau khi làm đồ án này, và hướng phát

triển của đồ án

Chương 6: Tài liệu nghiên cứu được dùng trong quá trình thực hiện đồ án

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI

1.1 Giới thiệu đề tài

Ngày nay, với sự phát triển của ngành Công nghệ thông tin, các sản phẩm và ứng dụng truyền thống đã được chuyển sang các nền tảng trực tuyến Việc đăng tin trên các nền tảng này sẽ giúp cửa hàng tiếp cận được nhiều khách hàng hơn, đồng thời có thể quản lý việc bán hàng, lưu kho, vận chuyển

và thanh toán một cách chính xác và minh bạch Khách hàng mục tiêu của nhóm chúng em là dịch vụ cửa hàng nội thất và cây cảnh Trên thị trường, có rất nhiều mô hình ứng dụng thương mại điện tử nhưng chưa có dự án nào tập trung phát triển cho những cửa hàng nội thất như thế này Đồng thời, các

dự án chưa đáp ứng được về mặt hiệu suất, giao diện cũng như tính dễ sử dụng Hiểu được nhu cầu về một hệ thống giải quyết vấn đề cho các cửa hàng nội thất vừa và nhỏ, nhóm cho ra đời sản phẩm Konsept với mục tiêu nhanh - dễ sử dụng - giao diện thân thiện

1.2 Khảo sát người dùng

Trong quá trình nghiên cứu các tính năng và phân tích các ứng dụng có sẵn trên thị trường, em đã thực hiện một số khảo sát tìm hiểu về nhu cầu người dùng về nội thất Sau đây là một số thống kê rút

ra từ báo cáo:

Đối với các câu hỏi về mức độ quan tâm về đồ nội thất thì ta có thể thấy đa số người khảo sát đều khá quan tâm và họ cũng thường xuyên ghé các website bán hàng nội thất

Và với các tiêu chí khi mua đồ nội thất thì thường tiêu chí màu sắc và chất liệu đạt được nhiều

sự quan tâm nhất của những người khảo sát

Tuy vậy các website bán đồ nội thất lại không cung cấp đầy đủ các thông tin và hàng nội thất cho khách hàng

Vì vậy để làm hoàn thiện và phong phú hơn về các chức năng cũng như giao diện cho website thì nhóm chúng em đã thực hiện thêm các cuộc khảo sát về màu sắc, phân chia loại sản phẩm, vị trí điều hướng, độ đầy đủ thông tin và độ dễ hiểu

Qua đó chúng em nhận được kết quà là đa phần người dùng thường quan tâm đến màu sắc, phân chia rõ ràng cũng như là vị trí điều hướng đến các chức năng khác và độ dễ hiểu khi vào một website bán đồ nội thất

Cuối cùng chúng em lấy thêm các ý kiến về các chức năng cần cải thiện mà khách hàng mong muốn website cần cải thiện

Kết quả là xây dựng UI thân thiện, đa dạng về mặt hàng và giá rẻ là những tiêu chí cải thiện

mà những người khảo sát mong muốn nhất

Qua kết quả của cuộc khảo sát, nhóm chúng em rút ra kết luận như sau: Đa phần người dùng quan tâm đến đồ nội thất và hay ghé qua website nội thất, và khi mua nội thất thì họ thường chọn màu sắc

và chất liệu Tuy vậy các website lại không cung cấp đầy đủ thông tin về hàng cho họ, và các tiêu chí

về màu sắc, sự phân chia rõ ràng các loại hàng và độ dễ hiểu cũng được nhận rất nhiều sự quan tâm cho một website bán đồ nội thất Và cuối cùng, để cải thiện một website bán hàng thì đa phần người khảo sát chọn nên xây dựng UI thân thiện hơn, đa dạng về mặt sản phẩm và giá thành rẻ

1.3 Giải pháp

Furniturer - đơn vị tiên phong trong hệ thống thương mại điện tử nội thất Việt Nam Ý tưởng

này dựa trên hệ thống cửa hàng bán đồ nội thất Nhóm chúng em chuyển tất cả các quy trình giao dịch sang một nền tảng trực tuyến để giúp cửa hàng giải quyết các vấn đề khác nhau Khách hàng mục tiêu của nhóm chúng em là các cửa hàng quy mô vừa hoặc nhỏ không thể tiếp cận một số hệ thống thương

mại điện tử lớn hiện nay như Shopee, Lazada … do chi phí cao, rủi ro … Nhiệm vụ chính của Furniturer là mọi cửa hàng nội thất đều có thể chuyển sang đám mây và điều chỉnh hoạt động kinh

doanh của họ trực tuyến Nhóm chúng em cũng cung cấp một giao diện người dùng thực sự tuyệt đẹp còn được gọi là UX/UI thân thiện mà mọi người đều có thể sử dụng và yêu thích nó

Trang Admin (Dashboard)

8 Phân tích thống kê

1.5 Các yêu cầu phi chức năng

1.5.1 Tính khả dụng

- Hiệu quả sử dụng: Thực thi nhanh, ít xảy ra lỗi cho người dùng

- Tính trực quan: giao diện thân thiên, dễ điều hướngcác nút, tiêu đề và thông báo lỗi dễ hiểu

- Giao diện dễ sử dụng

1.5.2 Độ tin cậy

- Ứng dụng phân quyền và xác thực vai trò người dùng

- Thiết lập giới hạn các chức năng theo từng vai trò của người dùng

1.5.3 Hiệu năng

- Thời gian tải dưới 3 giây để truy cập vào ứng dụng

- 90% tổng thời gian phản hồi ít hơn 3-7 giây

• MongoDB Compass

• Postman

1.8 Quản lý Projects

Nhóm chúng em chọn Trello làm công cụ quản lý công việc cũng như chia tasks cho nhau

Hình 1.0 – Trello làm việc của nhóm

MongoDB là cơ sở dữ liệu NoSQL hướng tài liệu được sử dụng để lưu trữ dữ liệu khối lượng lớn

Thay vì sử dụng các bảng và hàng như trong cơ sở dữ liệu quan hệ truyền thống, MongoDB sử dụng các bộ sưu tập và tài liệu Tài liệu bao gồm các cặp key-value là đơn vị dữ liệu cơ bản trong MongoDB

Bộ sưu tập chứa các tập hợp tài liệu và chức năng tương đương với các bảng cơ sở dữ liệu quan hệ

2.1.2 Javascript

JavaScript là 1 trong 3 ngôn ngữ chính của lập trình web, và nó được dùng phổ biến trong suốt

20 năm qua Từ thuở sơ khai, nó còn có tên là Mocha (năm 1995), sau đó được đổi thành Mona, Livescript, và cuối cùng là JavaScript như hiện nay

Tính đến năm 2016, có đến 92% trang web hiện nay đang sử dụng JavaScript, và rất có thể bạn

đã dùng qua rất nhiều trang web có sử dụng ngôn ngữ lập trình này

2.1.3 ReactJS

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là

một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một

trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

Node.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở

rộng, đặc biệt là máy chủ web Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở rộng Node.js bao gồm có V8 JavaScript engine của Google, libUV, và vài thư viện khác

2.1.5 ExpressJS

Expressjs là một framework được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP và midleware tạo ra API

vô cùng mạnh mẽ và dễ sử dụng

Tổng hợp một số chức năng chính của Expressjs như sau:

- Thiết lập các lớp trung gian để trả về các HTTP request

- Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

- Cho phép trả về các trang HTML dựa vào các tham số

Lý do nên sử dụng ExpressJS:

- ExpressJS có thể giảm một nửa thời gian viết mã mà vẫn giúp nhà phát triển xây dựng các ứng dụng web hiệu quả

- ExpressJS còn cung cấp các tính năng khác nhau giúp tiết kiệm công sức rất nhiều

- ExpressJS được sử dụng tương đối dễ dàng vì có hỗ trợ JavaScript

- ExpressJS được phát triển dựa trên nền tảng Node.js Đây là một kiến trúc hướng sự kiện và

có khả năng xử lý hàng nghìn yêu cầu của khách hàng cùng một lúc

- ExpressJS lại là một ứng dụng web miễn phí và mã nguồn mở

2.1.6 Ant Design

Ant Design là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant

UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng

Ant Design đáp ứng được hầu hết các yêu cầu của project của bạn mà ban không phải cài thêm

bất cứ thư viện nào nữa Dưới đây là danh sách các components mà nó cung cấp:

• General: Button, Icon

• Layout: Grid, Layout

• Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps

• Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload

• Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table

• Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton

• Other: Anchor, BackTop, Divider, LocaleProvider

2.2 Cấu trúc của ứng dụng Web

Furniturer được phát triển với MERN Stack bao gồm: MongoDB, Express, ReactJS, NodeJS Với sức mạnh của ReactJS, một framework mã nguồn mở được Facebook giới thiệu, chúng em có thể

dễ dàng phát triển, sửa lỗi, cải thiện các tính năng trong trang web của mình Nhóm cũng áp dụng Redux để quản lý trạng thái các thành phần nhằm đảm bảo tính nhất quán về dữ liệu trong ứng dụng

và tăng tốc độ truy cập Trong phần phụ trợ, MongoDB và NodeJS là lựa chọn của nhóm vì nó cung cấp hiệu suất và độ chính xác cao NodeJS sử dụng mô hình I / O không chặn và được viết bằng Javascipt-một ngôn ngữ mà nhóm em sử dụng trong học kỳ này

CHƯƠNG 3: CHI TIẾT CẤU TRÚC HỆ THỐNG

3.1 Mô hình Usecase

3.2 Danh sách các Actor

3 Khách vãng lai Khách vãng lai, người dùng chưa có tài khoản

4 Khách hàng Khách hàng, là người dùng có tài khoản và đã đăng

nhập vào hệ thống

3.3 Danh sách các Usecases

UC1 Khách hàng Quản lý giỏ hàng Cập nhật, xóa

UC2 Khách hàng Thêm sản phẩm vào giỏ hàng

UC10 Khách vãng lai Đăng ký Đăng ký một tài khoản

UC12 Khách hàng Thay đổi mật khẩu

UC14 Khách hàng Kiểm tra hóa đơn

UC15 Khách hàng Thay đổi thông tin các nhân

UC16 Khách hàng Quản lý địa chỉ giao hàng CRUD

3.4 Đặc tả Usecases

3.4.1 Đặc tả Use-case “Quản lý giỏ hàng”

Use case’s name Quản lý giỏ hàng

Pre-condition Khách hàng phải đăng nhập

Basic flow 1 Khách hàng nhấn vào biểu tượng giỏ hàng

2 Hệ thống sẽ chuyển đến trang giỏ hàng

3 Khách hàng cập nhật thông tin sản phẩm trong giỏ

4 Cập nhập số lượng sản phẩm hay xóa hàng khỏi giỏ

5 Hệ thống sẽ thực thi lựa chọn

6 Hệ thống sẽ thông báo cho khách hàng là thành công Alternative flow

Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.2 Đặc tả Use-case “Thêm sản phẩm vào giỏ hàng”

Use case’s name Thêm sản phẩm vào giỏ hàng

3 Hệ thống sẽ thêm sản phẩm vào giỏ hàng

4 Hệ thống sẽ thông báo cho khách hàng là đã thành công

Alternative flow Nếu sản phẩm hết hàng, hệ thống sẽ thông báo hết hàng cho

khách hàng Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.3 Đặc tả Use-case “Đặt hàng”

Use case’s name Đặt hàng

Pre-condition Khách hàng phải đăng nhập

Basic flow 1 Khách hàng chọn sản phẩm mà họ muốn mua

2 Khách hàng nhấn vào nút “Checkout”

3 Khách hàng chọn phương thức thanh toán (COD, PayPal)

4 Khách hàng nhấn vào nút “Confirm order”

5 Hệ thống sẽ thêm hóa đơn vào đơn hàng

6 Hệ thống sẽ thông báo cho khách hàng là đã thành công Alternative flow Hệ thống sẵn sàng cho hoạt động kế tiếp

Post-condition Không có

Extend point COD, PayPal

3.4.4 Đặc tả Use-case “Quản lý sản phẩm”

Use case’s name Quản lý sản phẩm

Pre-condition Actor phải đăng nhập trước

Basic flow 1 Actor nhấn vào tab “Product”

2 Hệ thống sẽ chuyển sang trang quản lý sản phẩm

3 Actor chọn chức năng (Thêm, Xóa, Sửa)

4 Hệ thống thực thi lựa chọn

6 Hệ thống sẽ thể hiện thông báo thành công

Alternative flow 3.1 Actor chọn chức năng Thêm hoặc sửa

3.2 Actor điền đầy đủ thông tin Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.5 Đặc tả Use-case “Quản lý hóa đơn”

Use case’s name Quản lý hóa đơn

Pre-condition Actor phải đăng nhập

Basic flow 1 Actor di chuyển đến trang hóa đơn

2 Actor chọn loại danh sách hóa đơn

3 Hệ thống thực thi lựa chọn

4 Hệ thống hiển thị danh sách kết quả

5 Hệ thống thông báo thành công Alternative flow Không có

Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.6 Đặc tả Use-case “Cập nhật trạng thái hóa đơn”

Use case’s name Cập nhật trạng thái hóa đơn

Pre-condition Actor phải đăng nhập

Basic flow 1 Actor nhấn vào tab “Order”

2 Hệ thống sẽ chuyển đến trang quản lý hóa đơn

3 Actor cập nhật trạng thái hóa đơn

4 Hệ thống thực thi lựa chọn

5 Hệ thống thể hiện thông báo thành công

Alternative flow 3.3 Actor chọn chức năng Sửa

3.4 Actor điền đầy đủ thông tin

Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.7 Đặc tả Use-case “Tìm kiếm khách hàng”

Use case’s name Tìm kiếm khách hàng

Pre-condition Actor phải đăng nhập

Basic flow 1 Actor chuyển đến trang khách hàng

2 Actor nhập tên cần tìm kiếm

3 Hệ thống hiển thị kết quả tìm kiếm

4 Hệ thống thông báo thành công Alternative flow Không có

Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.8 Đặc tả Use-case “Hiển thị thông tin chi tiết sản phẩm”

Use case’s name Hiển thị thông tin chi tiết sản phẩm

Pre-condition

Basic flow 1 Actor nhấn vào sản phẩm

2 Hệ thống sẽ chuyển đến trang chi tiết sản phẩm

3 Hệ thống hiển thị chi tiết về sản phẩm

4 Hệ thống thông báo thành công

Alternative flow Không có

Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.9 Đặc tả Use-case “Đăng nhập”

Use case’s name Đăng kí

Pre-condition

Basic flow 1 Actor nhấn vào nút biểu tượng “User” góc phải trên

2 Hệ thống sẽ chuyển đến trang đăng nhập

3 Actor nhập đầy đủ thông tin

4 Actor nhấn vào nút đăng nhập

5 Hệ thống thực thi

6 Hệ thống thông báo thành công

Alternative flow Nếu email và password không đúng, hệ thống sẽ thông báo cho

khách hàng nhập lại

Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.10 Đặc tả Use-case “Đăng kí”

Use case’s name Đăng kí

Actor Khách vãng lai

Pre-condition Actor đã vào trang đăng nhập

Basic flow 1 Actor click vào đường dẫn trang đăng kí

2 Hệ thống chuyển sang trang đăng kí

3 Actor điền đầy đủ thông tin đăng kí

4 Actor nhấn nút đăng kí

5 Hệ thông thực thi

6 Hệ thống thông báo thành công

Alternative flow Không có

Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.11 Đặc tả Use-case “Thoát”

Use case’s name Thoát

Actor Chủ/Admin hoặc khách hàng

Pre-condition Actor đã đăng nhập

Basic flow 1 Nếu là Khách hàng, nhấn vào biểu tượng khách hàng

2 Hệ thống chuyển sang trang thông tin cá nhân

3 Actor nhấn vào “Log out”

4 Hệ thống chuyển sang trang home

5 Hệ thống thông báo thành công

Alternative flow 1.1 Nếu là Chủ, nhấn vào avatar góc phải trên cùng

2.1 Hệ thống hiển thị cửa sổ nguời dùng Post-condition Hệ thống sẵn sàng cho hoạt động kế tiếp

Extend point Không có

3.4.12 Đặc tả Use-case “Đổi password”

Use case’s name Đổi password

Actor Chủ hoặc khách hàng

Pre-condition Actor phải đăng nhập

Basic flow 2.2 Actor chuyển đến trang khách hàng

2.3 Actor chuyển đến tab đổi mật khẩu 2.4 Actor nhập mật khẩu cũ, mật khẩu mới và xác nhận lại mật khẩu mới

2.5 Hệ thống thực thi 2.6 Hệ thống thông báo thành công