đồ án 1 xây dựng hệ thống mua sắm trực tuyến

- Giúp doanh nghiệp quản lý tốt hơn về kho hàng, theo dõi dữ liệu bán hàng vàkhách hàng, và thực hiện quyết định thông minh về chiến lược sản xuất vàtiếp thị.. o Node.js sử dụng JavaScri

ĐẠI HỌC QUỌC GIẠ TP HỌ CHI MINHTRƯỜNG ĐẠI HỌC CỌNG NGHỆ THỌNG TIN

KHỌẠ CỌNG NGHỆ PHẠN MỆM

ĐỌ ẠN 1XẠY DƯNG HỆ THỌNG MUẠ SẠ M TRƯC TUYỆN

GV HƯỜNG DẠ"N:

Th.S TRẠN THI HỌNG YỆN

SV THƯC HIỆN:

Vũ& Qũố(c Hũ*ng - 20521378

LỜI CẠ6M ỜNĐố7 á9n “Xá;y dựng hệ; thố(ng mũá sáCm trực tũyệ(n” lá* mố;t sáGn pháIm má*

ệm đá& bốG nhiệ7ũ tá;m hũyệ(t đệI hốá*n thiệ;n vá* phá9t triệIn Bệ;n cánh đố9, khố;ngthệI khố;ng nháCc đệ(n nhự&ng sự hốP trợ, đố9ng gố9p tự* qũy9 thá7y cố;

Ệm mũố(n gựGi lợ*i cáGm ợn sá;ũ sáCc đệ(n ThS.Trá7n Thi Hố7ng Yệ(n đá& tá;ntì*nh hựợ9ng dáPn, đựá rá nhự&ng gố9p y9, đinh hựợ9ng đệI ệm cố9 thệI hốá*n thá*nhđố7 á9n Ệm sệ& lũố;n biệ(t ợn vá* ghi nhợ9 nhự&ng bá*i hốc đố9

Ngốá*i rá, ệm cũ&ng xin gựGi lợ*i cáGm ợn đệ(n qũy9 thá7y cố; trựợ*ng Đái hốcCố;ng nghệ; Thố;ng tin - nhự&ng ngựợ*i đá& máng đệ(n chố ệm nhự&ng ky& náUng,kiệ(n thự9c cá7n thiệ(t gố9p phá7n khố;ng nhốG vá*ố qũá9 trì*nh thực hiệ;n đố7 á9n

TP.HCM, ngá*y 30 thá9ng 12 náUm 2023

Sinh việ;n thực hiệ;nVũ& Qũố(c Hũ*ng

MUC LUC

TỌM TẠ T ĐỌ ẠN 1

Chựợng 1 GIỜI THIỆU ĐỆ TẠI 2

1.1 Tệ;n đố7 á9n 2

1.2 Lì9 dố chốn đệ7 tá*i 2

1.3 Mũc đì9ch đệ7 tá*i 2

1.4 Phám vi đệ7 tá*i 3

1.5 Nhự&ng vá(n đệ7 cố*n tố7n tái 4

1.6 Nhự&ng vá(n đệ7 má* đệ7 tá*i tá;p trũng 4

Chựợng 2 CỜ SỜ6 LI THUYỆT 5

2.1 Cố;ng cũ sựG dũng 5

2.2 Mố; hì*nh Cliệnt-Sệrvệr [2] 5

2.3 Rệáct JS 6

2.4 Nệxt JS 7

2.5 Nốdệ JS 8

2.6 Mốngố DB 9

2.7 Táilwind CSS 10

2.8 Phựợng phá9p thực hiệ;n 11

Chựợng 3 PHẠN TICH VẠ THIỆT KỆ HỆ THỌNG 13

3.1 KháGố sá9t hiệ;n tráng 13

3.2 Xá9c đinh vá* mố; hì*nh hố9á yệ;ũ cá7ũ 14

3.2.1 Xá9c đinh yệ;ũ cá7ũ 14

3.3 Thiệ(t kệ( cợ sợG dự& liệ;ũ 42

3.3.1 Sợ đố7 lợ9p ợG mự9c phá;n tì9ch 42

3.3.2 Thiệ(t kệ( dự& liệ;ũ lựũ trự& 52

Chựợng 4 XẠY DƯNG WỆBSITỆ 53

4.1 Sợ đố7 má*n hì*nh 53

4.2 Dánh sá9ch cá9c má*n hì*nh 53

4.2.1 Má*n hì*nh ĐáUng nhá;p vá* đáUng ky9 55

4.2.2 Má*n hì*nh Qũệ;n má;t kháIũ 56

4.2.3 Má*n hì*nh NháCn tin giự&á ngựợ*i dũ*ng vá* chũG cựGá há*ng 57

4.2.4 Má*n hì*nh Tráng chũG 58

4.2.5 Má*n hì*nh Dánh sá9ch sáGn pháIm 59

4.2.6 Má*n hì*nh Chi tiệ(t sáGn pháIm 60

4.2.7 Má*n hì*nh GiốG há*ng 61

4.2.8 Má*n hì*nh Thánh tốá9n 62

4.2.9 Má*n hì*nh Dánh sá9ch yệ;ũ thì9ch 63

4.2.10 Má*n hì*nh Dánh sá9ch điá chìG giáố há*ng 64

4.2.11 Má*n hì*nh Phựợng thự9c thánh tốá9n máUc đinh 65

4.2.12 Má*n hì*nh ĐốIi má;t kháIũ 66

4.2.13 Má*n hì*nh Đợn há*ng 67

4.2.14 Má*n hì*nh BáGng điệ7ũ khiệIn 68

4.2.15 Thố;ng kệ; dốánh thũ 69

4.2.16 Má*n hì*nh QũáGn ly9 đợn há*ng 70

4.2.17 Má*n hì*nh QũáGn ly9 ngựợ*i dũ*ng 71

4.2.18 Má*n hì*nh QũáGn ly9 SáGn pháIm 72

4.2.19 Má*n hì*nh QũáGn ly9 dánh mũc 73

4.2.20 Má*n hì*nh QũáGn ly9 dánh mũc phũ 74

4.2.21 Má*n hì*nh QũáGn ly9 má& giáGm giá9 75

4.2.22 Má*n hì*nh Thệố dố&i đợn há*ng 76

Chựợng 5 KỆT LUẠN 77

5.1 Ưũ, nhựợc điệIm cũGá đệ7 tá*i 77

5.1.1 Ưũ điệIm 77

5.1.2 Nhựợc điệIm 77

5.2 Nhự&ng kệ(t qũáG đát đựợc 77

5.3 Hựợ9ng phá9t triệIn vá* nhự&ng đệ7 xũá(t mợ9i 78

5.3.1 Vệ7 máUt khá9ch há*ng cựGá há*ng 78

5.3.2 Vệ7 máUt qũáGn ly9 cựGá há*ng 78

TẠI LIỆU THẠM KHẠ6Ọ 80

MUC LUC HINH

Hì*nh 2.1 Mố; hì*nh Cliệnt-Sệrvệr 5

Hì*nh 2.2 Thự việ;n Rệáct JS 6

Hì*nh 2.3 Frámệwốrk Nệxt JS 8

Hì*nh 2.4 Mố;i trựợ*ng Nốdệ JS 9

Hì*nh 2.5 Cợ sợG dự& liệ;ũ MốngốDB 10

Hì*nh 2.6 Frámệwốrk Táilwind CSS 11

Hì*nh 3.1 Lựợc đố7 Usệ-cásệ tốá*n hệ; thố(ng 25

Hì*nh 3.2 Sợ đố7 lợ9p ợG mự9c phá;n tì9ch 43

Hì*nh 3.3 Sợ đố7 cợ sợG dự& liệ;ũ hốá*n chìGnh 53

Hì*nh 4.1 Sợ đố7 má*n hì*nh 54

Hì*nh 4.2 Má*n hì*nh ĐáUng nhá;p vá* đáUng ky9 56

Hì*nh 4.3 Má*n hì*nh Qũệ;n má;t kháIũ 57

Hì*nh 4.4 Má*n hì*nh NháCn tin giự&á ngựợ*i dũ*ng vá* chũG cựGá há*ng 58

Hì*nh 4.5 Má*n hì*nh Tráng chũG 59

Hì*nh 4.6 Má*n hì*nh Dánh sá9ch sáGn pháIm 60

Hì*nh 4.7 Má*n hì*nh Chi tiệ(t sáGn pháIm 61

Hì*nh 4.8 Má*n hì*nh GiốG há*ng 62

Hì*nh 4.9 Má*n hì*nh Thánh tốá9n 63

Hì*nh 4.10 Má*n hì*nh Dánh sá9ch yệ;ũ thì9ch 64

Hì*nh 4.11 Má*n hì*nh Dánh sá9ch điá chìG giáố há*ng 65

Hì*nh 4.12 Má*n hì*nh Phựợng thự9c thánh tốá9n máUc đinh 66

Hì*nh 4.13 Má*n hì*nh ĐốIi má;t kháIũ 67

Hì*nh 4.14 Má*n hì*nh Đợn há*ng 68

Hì*nh 4.15 Má*n hì*nh BáGng điệ7ũ khiệIn 69

Hì*nh 4.16 Má*n hì*nh Thố(ng kệ; dốánh thũ 70

Hì*nh 4.17 Má*n hì*nh QũáGn ly9 đợn há*ng 71

Hì*nh 4.18 Má*n hì*nh QũáGn ly9 ngựợ*i dũ*ng 72

Hì*nh 4.19 Má*n hì*nh QũáGn ly9 SáGn pháIm 73

Hì*nh 4.20 Má*n hì*nh qũáGn ly9 dánh mũc 74

Hì*nh 4.21 Má*n hì*nh QũáGn ly9 dánh mũc phũ 75

Hì*nh 4.22 Má*n hì*nh QũáGn ly9 má& giáGm giá9 76

Hì*nh 4.23 Má*n hì*nh Thệố dố&i đợn há*ng 77

MUC LUC BẠ6N BáGng 1.1 Dánh sá9ch cá9c chự9c náUng 3

BáGng 3.1 BáGng số sá9nh cá9c sáGn pháIm tựợng tự trệ;n thi trựợ*ng 7

BáGng 3.2 Danh sách các yêu cầu Nghiệp vụ 8

BáGng 3.3 Dánh sá9ch cá9c yệ;ũ cá7ũ tiệ(n hố9á 8

BáGng 3.4 BáGng trá9ch nhiệ;m yệ;ũ cá7ũ tiệ(n hố9á 9

BáGng 3.5 Danh sách các yêu cầu hiệu quả 9

BáGng 3.6 Bảng trách nhiệm yêu cầu hiệu quả 10

BáGng 3.7 Danh sách các yêu cầu tiện dụng 11

BáGng 3.8 Bảng trách nhiệm yêu cầu tiện dụng 12

BáGng 3.9 Danh sách các yêu cầu an toàn 12

BáGng 3.10 Bảng trách nhiệm các yêu cầu an toàn 12

BáGng 3.11 Danh sách các yêu cầu bảo mật 13

BáGng 3.12 Bảng trách nhiệm yêu cầu bảo mật 13

BáGng 3.13 BáGng dánh sá9ch chự9c náUng chì9nh thự9c 14

BáGng 3.14 BáGng mố; táG cá9c tá9c nhá;n 15

BáGng 3.15 BáGng dánh sá9ch Usệ-cásệ chũng chố cá9c Ạctốr 15

BáGng 3.16 BáGng dánh sá9ch Usệ-cásệ chố khá9ch há*ng 15

BáGng 3.17 BáGng dánh sá9ch Usệ-cásệ chố ngựợ*i trống dốánh nghiệ;p 16

BáGng 3.18 BáGng dánh sá9ch Usệ-cásệ chố qũáGn tri việ;n 17

BáGng 3.20 ĐáUc táG Usệ-cásệ C-UC02 20

BáGng 3.21 ĐáUc táG Usệ-cásệ C-UC03 22

BáGng 3.22 ĐáUc táG Usệ-cásệ KH-UC01 22

BáGng 3.23 ĐáUc táG Usệ-cásệ KH-UC02 23

BáGng 3.24 ĐáUc táG Usệ-cásệ KH-UC03 24

BáGng 3.25 ĐáUc táG Usệ-cásệ KH-UC04 25

BáGng 3.26 ĐáUc táG Usệ-cásệ KH-UC05 26

BáGng 3.27 ĐáUc táG Usệ-cásệ KH-UC06 27

BáGng 3.28 ĐáUc táG Usệ-cásệ KH-UC07 28

BáGng 3.29 ĐáUc táG Usệ-cásệ ĐH-UC01 29

BáGng 3.30 ĐáUc táG Usệ-cásệ ĐH-UC02 30

BáGng 3.31 ĐáUc táG Usệ-cásệ ĐH-UC03 31

BáGng 3.32 ĐáUc táG Usệ-cásệ ĐH-UC04 33

BáGng 3.33 ĐáUc táG Usệ-cásệ ĐH-UC05 33

BáGng 3.34 ĐáUc táG Usệ-cásệ ĐH-UC06 35

BáGng 3.35 Dánh sá9ch cá9c lợ9p đố(i tựợng vá* qũán hệ; 36

BáGng 3.36 Đối tượng USER 38

BáGng 3.37 Đối tượng WISHLIST 38

BáGng 3.38 Đối tượng ADDRESS 39

BáGng 3.39 Đối tượng CART 39

BáGng 3.40 Đối tượng REVIEW 39

BáGng 3.41 Đối tượng PRODUCT 40

BáGng 3.42 Đối tượng PRODUCT_ITEM 40

BáGng 3.43 Đối tượng ORDER 40

BáGng 3.44 Đối tượng DETAIL 41

BáGng 3.45 Đối tượng CATEOGRY 41

BáGng 3.46 Đối tượng SUB_CATEGORY 41

BáGng 3.47 Đối tượng QUESTION 41

BáGng 3.48 Đối tượng SUB_PRODUCT 42

BáGng 3.49 Đối tượng COUPON 42

BáGng 3.50 Đối tượng COLOR 42

BáGng 3.51 Quan hệ USER_ADDRESS 42

BáGng 3.52 Quan hệ USER_WISHLIST 43

BáGng 3.53 Quan hệ CART_PRODUCTITEM 43

BáGng 3.54 Quan hệ PRODUCT_DETAIL 43

BáGng 3.55 Quan hệ PRODUCT_CATEGORY 43

BáGng 3.56 Quan hệ PRODUCT_SUBCATEGORY 43

BáGng 3.57 Quan hệ PRODUCT_QUESTION 43

BáGng 3.58 Quan hệ PRODUCT_SUBPRODUCT 44

BáGng 3.59 Quan hệ USER_CART 44

BáGng 3.60 Quan hệ PRODUCT_REVIEW 44

BáGng 3.61 Qũán hệ; USỆR_RỆVIỆW 44

BáGng 3.62 Qũán hệ; SUBPRỌDUCT_CỌLỌR 44

BáGng 3.63 Qũán hệ; SUBPRỌDUCT_SIZỆ 45

BáGng 3.64 Qũán hệ; ỌRDỆR_PRỌDUCT 45

BáGng 4.1 Dánh sá9ch cá9c má*n hì*nh 48

TỌM TẠ T ĐỌ ẠNĐáUt vá(n đệ7:

Thi trựợ*ng mũá sáCm trực tũyệ(n đáng phá9t triệIn mánh vợ9i nhiệ7ũ dố*ng sáGnpháIm, nhự&ng tráng wệb bá9n há*ng ná*y cố*n tố7n tái nhiệ7ũ hán chệ( vì9 dũ nhự: giáốdiệ;n ngựợ*i dũ*ng kệ9m, tráGi nghiệ;m sựG dũng cố*n nhiệ7ũ vá(n đệ7, giáGi phá9p nghiệ;p

vũ qũáGn ly9 cũng cá(p chố bệ;n chũG cựGá há*ng chựá đá9p ự9ng đũG nhũ cá7ũ Vì* vá;y,nhũ cá7ũ chố mố;t wệbsitệ vợ9i giáố diệ;n đệp, dệP sựG dũng vá* đá9p ự9ng đũG nhũ cá7ũchũG cựGá há*ng lá* rá(t cá(p thiệ(t

Vá(n đệ7 nghiệ;n cự9ũ:

- Tì*m hiệIũ thi trựợ*ng mũá sáCm trực tũyệ(n đáng phá9t triệIn mánh Nghiệ;n cự9ũnghiệ;p vũ hốát đố;ng cũGá cá9c cựGá há*ng cũ&ng nhự tráGi nghiệ;m cũGá ngựợ*i dũ*ngtrệ;n cá9c nệ7n táGng bá9n há*ng đệI đựá rá cá9c cáGi thiệ;n

- Dựng Wệbsitệ bá9n háng trực tũyệ(n “HV Shốp” đố9ng gố9p chố sự kinh dốánhsáGn pháIm thố;ng qũá việ;c cũng cá(p nệ7n táGng thựợng mái sáGn pháIm vá* hệ; thố(ngqũáGn ly9 sáGn pháIm chố dốánh nghiệ;p

- Chựợng 4 - Xá;y dựng ự9ng dũng wệbsitệ: trì*nh bá*y kệ(t qũáG đát đựợc, cá9c má*nhì*nh, mố; táG chi tiệ(t xựG ly9

- Chựợng 5 - Kệ(t lũá;n: trì*nh bá*y ựũ điệIm, hán chệ(, nhự&ng kệ(t qũáG đát đựợc vá*hựợ9ng phá9t triệIn cũGá wệbsitệ.

Chựợng 1 GIỜI THIỆU ĐỆ TẠI1.1 Tệ;n đố7 á9n

Xá;y dựng hệ; thố(ng mũá sáCm trực tũyệ(n

1.2 Lì9 dố chốn đệ7 tá*i

Ngá*nh cố;ng nghiệ;p bá9n há*ng đá& tráGi qũá sự táUng trựợGng đá9ng kệI Vợ9i sựphá9t triệIn cũGá đáUt há*ng trực tũyệ(n vá* giáố há*ng tái nhá*, cá9c cựGá há*ng bá;ygiợ* cố9 cợ hố;i đáUc biệ;t đệI tiệ(p cá;n vợ9i mố;t đố(i tựợng khá9ch há*ng rố;ng hợn vá*tố(i ựũ hố9á hốát đố;ng cũGá hố thố;ng qũá sự sựG dũng cố;ng nghệ;

Wệbsitệ bá9n há*ng “HV Shốp” cố9 thệI đố9ng gố9p lợ9n chố sự kinh dốánh hánghố9á thệố nhiệ7ũ cá9ch:

- Cũng cá(p khá9ch há*ng nệ7n táGng xệm thố;ng tin sáGn pháIm dich vũ cũGá cựGáháng cũ&ng nhự đáUt há*ng trực tiệ(p, giáGm thợ*i gián, chi phì9 nghiệ;p vũ

- Giũ9p dốánh nghiệ;p qũáGn ly9 há*ng tố7n khố, thệố dố&i dự& liệ;ũ vệ7 bá9n há*ng vá*khá9ch há*ng, vá* rá qũyệ(t đinh cáIn thá;n vệ7 chiệ(n lựợc sáGn xũá(t vá* tiệ(p thi.1.3 Mũc đì9ch đệ7 tá*i

Wệbsitệ bá9n háng “HV Shốp” đựợc phá9t triệIn nháam:

- Cũng cá(p chố khá9ch há*ng mố;t nệ7n táGng đệI đáUt há*ng vá* trũy cá;p thố;ng tinvệ7 sáGn pháIm vá* dich vũ cũGá cựGá há*ng

- Giũ9p dốánh nghiệ;p qũáGn ly9 tố(t hợn vệ7 khố há*ng, thệố dố&i dự& liệ;ũ bá9nhá*ng vá* khá9ch há*ng, vá* thực hiệ;n qũyệ(t đinh thố;ng minh vệ7 chiệ(n lựợcsáGn xũá(t vá* márkệting

- TáUng hiệ;ũ sũá(t vá* giáGm thợ*i gián chợ* chố khá9ch há*ng khi đáUt há*ng

- Cũng cá(p dự& liệ;ũ qũán trống vệ7 sợG thì9ch vá* xũ hựợ9ng cũGá khá9ch há*ng chốdốánh nghiệ;p

- Cũng cá(p mố;t tráGi nghiệ;m trực tũyệ(n tố(t hợn chố khá9ch há*ng

- QũáGn tri việ;n: Cố9 thệI qũáGn ly9 tá*i khốáGn vá* qũyệ7n cũGá ngựợ*i dũ*ng, đố7ngthợ*i thực hiệ;n cá9c nghiệ;p vũ báGố trì* tráng wệb.

Thanh toán Khách hàng có thể thanh toán bằng nhiều phương thức khác

nhau, bao gồm thanh toán trực tuyến và thanh toán khi nhậnhàng

Đánh giá và nhận

xét

Khách hàng có thể đánh giá và nhận xét về sản phẩm hoặc dịch vụ trên website mua sắm trực tuyến

Khuyến mãi và Website mua sắm trực tuyến có thể cung cấp các chương

Quản lí sản phẩm Người bán có thể quản lý sản phẩm bao gồm thêm, cập

nhập, xóa sản phẩm khỏi cửa hàng

Quản lí danh mục Người bán có thể quản lý sản phẩm bao gồm thêm, cập

nhập, xóa danh mục khỏi cửa hàng

Quản lí doanh thu Người bán có thể quản lý doanh thu, theo dõi doanh thu cửa

hàng, những sản phẩm, danh mục nào bán chạy

1.5 Nhự&ng vá(n đệ7 cố*n tố7n tái

- Về phía khách hàng: Thiếu sự tin tưởng vào cửa hàng khi không thể thamkhảo các thông tin cơ bản như hình ảnh, thông tin chi tiết, đánh giá của sảnphẩm từ xa

- Về phía doanh nghiệp: Không tạo được niềm tin nơi khách hàng, khó cạnhtranh với các thương hiệu lớn khi không có một nền tảng giúp quảng cáo,nhận đặt hàng giúp tăng doanh thu và phát triển doanh nghiệp Khó khăntrong việc thu thập dữ liệu về sở thích và xu hướng của các tín đồ mê muasắm để doanh nghiệp đưa ra các chiến lược kinh doanh phù hợp

- Cung cấp cho phía khách hàng một nền tảng để đặt hàng và truy cập thôngtin về sản phẩm và dịch vụ của cửa hàng, tăng hiệu suất và giảm thời gianchờ cho khách khi đặt hàng Cung cấp một trải nghiệm đặt hàng trực tuyếntốt hơn cho khách hàng

- Giúp doanh nghiệp quản lý tốt hơn về kho hàng, theo dõi dữ liệu bán hàng vàkhách hàng, và thực hiện quyết định thông minh về chiến lược sản xuất vàtiếp thị Cung cấp dữ liệu quan trọng về sở thích và xu hướng của kháchhàng cho doanh nghiệp

Chựợng 2 CỜ SỜ6 LI THUYỆT2.1 Cố;ng cũ sựG dũng

- Công cụ thiết kế UI/UX: Figma

- Ngôn ngữ sử dụng: Javascript, CSS3

- Cơ sở dữ liệu: MongoDB

- Công nghệ sử dụng: ReactJS, NodeJS

- Framework: NextJS

2.2 Mô hình Client-Server [2]

- Server là nơi giúp lưu trữ tài nguyên cũng như cài đặt các chương trình dịch

vụ theo đúng như yêu cầu của client Client bao gồm máy tính cũng như các

loại thiết bị điện tử nói chung sẽ tiến hành gửi yêu cầu đến server

Hì*nh 2.1 Mố; hì*nh Cliệnt-Sệrvệr

- Ưu điểm của mô hình client-server:

o Tập trung: Ưu điểm đầu tiên của mô hình Client Server kiểu mạngkhách chủ đó chính là khả năng kiểm soát tập trung, tất cả mọi thôngtin cần thiết đều sẽ được đặt ở một vị trí duy nhất

o Bảo mật: Trong mạng Client Server, tất cả các dữ liệu đều sẽ đượcbảo vệ một cách tối đa nhờ vào hệ thống kiến trúc tập trung

o Khả năng mở rộng: Mô hình mạng kết nối Client Server có khả năng

mở rộng vô cùng tốt Người dùng có thể tăng được số lượng tàinguyên của mình bất cứ lúc nào

o Khả năng truy cập: Hoàn toàn không hề có sự phân biệt giữa các vị tríhay nền tảng với nhau

- Nhược điểm của mô hình client-server:

o Khả năng phản hồi: Nếu máy chủ không được tối ưu hoặc tải cao, nó

có thể gây trễ và làm giảm trải nghiệm người dùng khi phản hồi

o Độ trễ mạng: Phụ thuộc mạnh vào nền tảng mạng để truyền tải dữliệu

o Độ phức tạp: Mô hình client-server yêu cầu bạn phải xử lý và có kiếnthức cao cả phần client và phần server

 Tóm lại, mô hình client-server có nhiều ưu điểm và cũng nhiều nhước điểm

Áp dụng mô hình này nên được cân nhắc cho phù hợp yêu cầu

- React JS là một thư viện JavaScript mã nguồn mở được phát triển bởiFacebook (nay là Meta) để xây dựng giao diện người dùng (UI) cho các ứngdụng web Được ra mắt lần đầu vào năm 2013, React đã nhanh chóng trởthành một trong những công cụ phổ biến nhất trong lập trình front-end, được

sử dụng bởi nhiều công ty lớn và dự án trên toàn thế giới

Hì*nh 2.2 Thự việ;n Rệáct JS

- Ưu điểm của React JS:

o React sử dụng mô hình kiến trúc dựa trên các thành phần(component), giúp tạo ra các giao diện người dùng có cấu trúc và dễquản lý Mỗi component đều có thể chứa logic và state riêng, giúp dễdàng tái sử dụng và bảo trì.

o React sử dụng Virtual DOM để tối ưu hóa hiệu suất Khi mộtcomponent thay đổi, thay vì cập nhật toàn bộ DOM, React chỉ cậpnhật những phần thực sự cần thay đổi, giúp tăng tốc độ và hiệu suấtcủa ứng dụng

o JSX là một cú pháp mở rộng cho JavaScript, giúp viết code cho cáccomponent trở nên dễ dàng và trực quan hơn Với JSX, bạn có thể viếtHTML trong JavaScript một cách mạch lạc và tự nhiên

- Nhược điểm của React JS:

o React chỉ là một thư viện chứ không phải là một framework đầy đủ.Điều này có nghĩa là các nhà phát triển cần phải tìm hiểu và tích hợpcác công cụ và thư viện bổ sung (như Redux để quản lý trạng thái,Router để điều hướng, v.v.) để xây dựng ứng dụng đầy đủ

o Một số tính năng và chức năng phải dựa vào các thư viện của bên thứ

ba, có thể dẫn đến vấn đề về tính nhất quán và bảo trì

o Mặc dù React có thể được sử dụng để xây dựng ứng dụng web tươngtác, nhưng có thể gặp khó khăn với tối ưu hóa công cụ tìm kiếm(SEO) do tính chất của các ứng dụng một trang (SPA)

- Next.js là một framework dựa trên React, được thiết kế để hỗ trợ phát triểnứng dụng web với các tính năng như Server-Side Rendering và Static SiteGeneration Được phát triển bởi Vercel, Next.js nhằm mục đích cung cấpmột giải pháp toàn diện cho việc xây dựng các ứng dụng web hiệu suất cao

Hì*nh 2.3 Frámệwốrk Nệxt JS

- Ưu điểm của Next JS:

o Next.js cho phép render các trang web trên server, giúp tăng tốc độ tảitrang và cải thiện hiệu suất SEO SSR đặc biệt hữu ích cho các trangweb có nội dung động và cần được tối ưu hóa cho các công cụ tìmkiếm

o Framework này cũng hỗ trợ việc tạo ra các trang web tĩnh, có thểđược phục vụ từ CDN, giúp giảm đáng kể thời gian tải trang và cungcấp trải nghiệm người dùng nhanh chóng

o Next.js tự động tối ưu hóa các trang web dựa trên yêu cầu của ngườidùng, bao gồm việc tải hình ảnh lười (lazy loading) và tách mã (codesplitting), điều này giúp cải thiện hiệu suất tổng thể

- Nhược điểm của Next JS:

o Next.js có thể là quá phức tạp cho các dự án web đơn giản hoặc nhỏ.Các tính năng như SSR và SSG mặc dù hữu ích cho các dự án lớn,nhưng có thể không cần thiết và thậm chí làm chậm tiến độ phát triểncho các dự án nhỏ

o Trong khi Next.js hỗ trợ tối ưu hóa hiệu suất thông qua các tính năngnhư code splitting và server-side rendering, việc cấu hình và tối ưuhóa này đôi khi có thể trở nên phức tạp, đặc biệt là trong các dự ánlớn và phức tạp

o Các ứng dụng Next.js có thể có kích thước gói lớn hơn so với các ứngdụng tương tự được xây dựng với các công nghệ khác, do các tínhnăng bổ sung và thư viện mà Next.js tích hợp.

- Node.js là một môi trường chạy mã nguồn mở dựa trên JavaScript, được xâydựng trên V8, động cơ JavaScript của Google Chrome Nó cho phép pháttriển các ứng dụng mạng nhanh chóng và mở rộng quy mô dễ dàng Node.jsđược phát triển bởi Ryan Dahl vào năm 2009 và đã trở thành một công cụphổ biến trong việc phát triển phần mềm, đặc biệt là về phía server-sidetrong các ứng dụng web

Hì*nh 2.4 Mố;i trựợ*ng Nốdệ JS

- Ưu điểm của Node JS:

o Node.js sử dụng mô hình I/O không chặn (non-blocking I/O), giúp xử

lý nhiều kết nối cùng lúc một cách hiệu quả Điều này làm choNode.js rất phù hợp cho việc xây dựng các ứng dụng mạng có hiệusuất cao, như chơi game trực tuyến, chat, hoặc các ứng dụng cần xử lýmột lượng lớn dữ liệu thời gian thực

o Node.js mở rộng khả năng của JavaScript từ client-side đến side, giúp các nhà phát triển có thể sử dụng một ngôn ngữ duy nhấtcho cả frontend và backend, đơn giản hóa quá trình phát triển

server-o Với cộng đồng lập trình viên lớn và sôi động, Nserver-ode.js có một hệ sinhthái thư viện mạnh mẽ, được quản lý thông qua npm (Node Package

- Nhược điểm của Node JS:

o Node.js không phải là lựa chọn tốt nhất cho các ứng dụng mà yêu cầunhiều xử lý CPU, như xử lý hình ảnh hoặc các hoạt động tính toánnặng Do sử dụng mô hình non-blocking và sự kiện-driven, Node.jshiệu quả hơn trong việc xử lý các tác vụ I/O-bound hơn là CPU-bound

o Node.js không phải là giải pháp tốt nhất cho tất cả các loại ứng dụng

Ví dụ, nó có thể không phù hợp cho các ứng dụng cần xử lý lượng lớn

dữ liệu phức tạp trên máy chủ

o Node.js sử dụng JavaScript V8 Engine, có thể không hiệu quả nhưmột số ngôn ngữ khác về quản lý bộ nhớ trong một số trường hợp, đặcbiệt là với các ứng dụng lớn hoặc phức tạp

- MongoDB là một hệ thống quản lý cơ sở dữ liệu NoSQL mã nguồn mở, sửdụng mô hình dữ liệu dạng tài liệu (document-oriented) Được ra mắt vàonăm 2009, MongoDB được thiết kế để cung cấp một cách lưu trữ dữ liệu linhhoạt, mở rộng quy mô dễ dàng, và dễ dàng tích hợp với ứng dụng hiện đại

Nó lưu trữ dữ liệu dưới dạng tài liệu BSON (một định dạng giống JSON),giúp nó trở thành một lựa chọn phổ biến cho các ứng dụng web và mobile

Hì*nh 2.5 Cợ sợG dự& liệ;ũ MốngốDB

- Ưu điểm của MongoDB:

o MongoDB không yêu cầu một cấu trúc dữ liệu cố định, cho phép lưutrữ tài liệu có cấu trúc đa dạng Điều này giúp dễ dàng thích nghi vớithay đổi yêu cầu và dữ liệu

o MongoDB cung cấp hiệu suất truy vấn cao, đặc biệt là với các hoạtđộng đọc và ghi dữ liệu Các chỉ mục được hỗ trợ tốt giúp tăng cườnghiệu suất truy vấn

o Hỗ trợ mở rộng quy mô theo chiều ngang thông qua sharding, chophép quản lý hiệu quả lượng lớn dữ liệu và giao dịch

- Nhược điểm của MongoDB:

o MongoDB sử dụng mô hình nhất quán cuối cùng (eventualconsistency) cho việc sao chép dữ liệu, có thể không phù hợp cho cácứng dụng yêu cầu nhất quán dữ liệu cao ngay lập tức

o Việc sao lưu và phục hồi dữ liệu trong MongoDB có thể phức tạp hơn

so với RDBMS truyền thống Cần phải lập kế hoạch cẩn thận chochiến lược backup và recovery để đảm bảo an toàn dữ liệu

o MongoDB lưu trữ dữ liệu dưới dạng tài liệu JSON, có thể dẫn đếnkích thước dữ liệu lớn hơn do sự lặp lại của các tên trường trong mỗitài liệu

- Tailwind CSS là một framework CSS mã nguồn mở được thiết kế để tạo racác giao diện người dùng nhanh chóng và hiệu quả thông qua việc sử dụngcác lớp tiện ích (utility classes) Được phát triển bởi Adam Wathan và ra mắtlần đầu vào năm 2017, Tailwind CSS nhanh chóng trở nên phổ biến trongcộng đồng phát triển web nhờ vào cách tiếp cận "first utility" độc đáo của nó

o Tailwind CSS cung cấp hàng ngàn lớp tiện ích để nhanh chóng ápdụng các kiểu dáng trực tiếp vào HTML, giúp tạo ra các giao diện màkhông cần viết nhiều CSS tùy chỉnh.

o Dễ dàng tùy chỉnh và mở rộng Tailwind CSS cho phép bạn tùy chỉnhcấu hình để phù hợp với yêu cầu thiết kế của dự án, bao gồm màu sắc,font, kích thước biên (margin) và padding, v.v

o Hỗ trợ thiết kế đáp ứng (responsive design) một cách thuận tiện thôngqua các lớp tiện ích dựa trên các breakpoints

- Nhược điểm của Tailwind CSS:

o Do sự phong phú của các lớp tiện ích, Tailwind CSS có thể dẫn đếnviệc tạo ra các file CSS lớn, đặc biệt khi không sử dụng cắt giảm(purge) hiệu quả Điều này có thể ảnh hưởng đến thời gian tải trang vàhiệu suất

o Tailwind có thể không phải là lựa chọn tốt nhất cho tất cả các dự án,đặc biệt là những dự án nhỏ không yêu cầu sự linh hoạt cao hoặcnhững dự án cần một cấu trúc CSS rõ ràng và truyền thống hơn

o Khi làm việc trong một đội ngũ, việc đảm bảo tính nhất quán trongcách sử dụng các lớp tiện ích có thể là một thách thức, đòi hỏi quy tắc

và hướng dẫn rõ ràng

- Tìm hiểu công nghệ: Reactjs, Nodejs, MongoDB

- Tìm hiểu các công cụ hỗ trợ: Github, draw.io (WebApp hỗ trợ vẽ diagram)

- Môi trường làm việc: Jira

- Thu thập yêu cầu thông qua:

o Tìm hiểu các ứng dụng hiện có trên thị trường

o Phân tích và xác định yêu cầu

- Thiết kế:

o Thiết kế đối tượng

o Thiết kế dữ liệu.

o Thiết kế giao diện

- Cài đặt → Kiểm thử → Hoàn thiện sản phẩm

và xuất hóa đơn.

- Các sản phẩm tương tự trên thị trường:

BáGng 3.2 BáGng số sá9nh cá9c sáGn pháIm tựợng tự trệ;n thi trựợ*ng

của em

Tra cứu thông tin cụ thể về sản phẩm:

thông tin chi tiết, ngày sản xuất, các

đánh giá của khách hàng khác…

Lưu trữ thông tin khách hàng ở mức

3.2 Xác định và mô hình hóa yêu cầu

9 Quản lý doanh thu

10 Liên lạc qua chatbox

11 Theo dõi đơn hàng

BáGng 3.5 BáGng trá9ch nhiệ;m yệ;ũ cá7ũ tiệ(n hố9á

1 Đặt hàng Cho biết giá trị

mới Ghi nhận giá trị mới và thay đổi cách thức kiểm tra

3 Thêm sản phẩm vào giỏ hàng 100 đơn/ phút

BáGng 3.7 Bảng trách nhiệm yêu cầu hiệu quả

giỏ hàng Nhập thông tin đúng và chính xác Thực hiện yêu cầu hiệu quả, chínhxác và nhanh chóng

6 Khuyến mãi và giảm

giá Nhập thông tin đúng và chính xác Thực hiện yêu cầu hiệu quả, chínhxác và nhanh chóng

7 Quản lý sản phẩm Nhập thông tin

đúng và chính xác Thực hiện yêu cầu hiệu quả, chínhxác và nhanh chóng

8 Quản lý danh mục Nhập thông tin

đúng và chính xác Thực hiện yêu cầu hiệu quả, chínhxác và nhanh chóng

9 Quản lý doanh thu Nhập thông tin

đúng và chính xác Thực hiện yêu cầu hiệu quả, chínhxác và nhanh chóng

3.2.1.4 Về tính tiện dụng

BáGng 3.8 Danh sách các yêu cầu tiện dụng

1 Hiển thị sản phẩm Không cần học Dễ dàng với giao diện trực quan

2 Tìm kiếm sản phẩm 5 phút hướng dẫn Dễ dàng với giao diện trực quan

3 Thêm sản phẩm vào

giỏ hàng

5 phút hướng dẫn Dễ dàng tra cứu và lựa chọn loại

sản phẩm phù hợp, hình thức thanh toán đa dạng

4 Thanh toán 5 phút hướng dẫn Dễ dàng với giao diện trực quan

5 Đánh giá và nhận xét 2 phút hướng dẫn Báo cáo có thể tùy biến nhiều

lựa chọn theo nhu cầu

6 Khuyến mãi và giảm

7 Quản lý sản phẩm 2 phút hướng dẫn Dễ dàng với giao diện trực quan

8 Quản lý danh mục 30 giây hướng dẫn Dễ dàng với giao diện trực quan

9 Quản lý doanh thu Không cần hướng

dẫn Dễ dàng với giao diện trực quan.

10 Liên lạc qua chatbox Không cần hướng

dẫn

Dễ dàng với giao diện trực quan

11 Theo dõi đơn hàng 1 phút hướng dẫn Dễ dàng với giao diện trực quan

BáGng 3.9 Bảng trách nhiệm yêu cầu tiện dụng

2 Tìm kiếm sản phẩm Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu

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

5 Đánh giá và nhận xét Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu

6 Khuyến mãi và giảm giá Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu

7 Quản lý sản phẩm Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu

8 Quản lý danh mục

9 Quản lý doanh thu

11 Theo dõi đơn hàng Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu

3.2.1.5 Về tính an toàn

BáGng 3.10 Danh sách các yêu cầu an toàn

1 Không cho phép hủy Hóa đơn đã thanh toán, sản phẩm đang được bán

BáGng 3.11 Bảng trách nhiệm các yêu cầu an toàn

1 Không cho phép hủy Cho biết đối tượng cần hủy Không hủy đối tượng

3.2.1.6 Về tính bảo mật

BáGng 3.12 Danh sách các yêu cầu bảo mật

Thực hiện đúng yêu cầu

2 Nhân viên,

Chủ doanh nghiệp

Cung cấp tên và mật khẩu Thực hiện đúng yêu cầu

3.2.2 Mô hình hóa yêu cầu

3.2.2.1 Danh sách chức năng

BáGng 3.14 BáGng dánh sá9ch chự9c náUng chì9nh thự9c

1 Hiển thị sản phẩm Hiển thị danh sách sản phẩm, thông tin

chi tiết của từng sản phẩm

2 Tìm kiếm sản phẩm Khả năng tìm kiếm sản phẩm theo tên,

danh mục, thương hiệu, kích thước,

3 Thêm sản phẩm vào giỏ hàng Khách hàng có thể tạo tài khoản để thêm

các sản phẩm muốn mua vào giỏ hàng

phẩm đã thêm vào trong giỏ hàng bằng nhiều phương thức khác nhau

5 Đánh giá và nhận xét Khách hàng có thể đánh giá chất lượng và

9 Quản lý doanh thu Quản lý có thể xem doanh số bán hàng

tháng này, doanh số theo từng tháng, số lượng sản phẩm bán ra theo danh mục,…

10 Liên lạc qua chatbox Khách hàng có thể liên lạc với cửa hàng

qua chatbox

11 Theo dõi đơn hàng Khách hàng có thể theo dõi tình trạng đơn

hàng qua website và email cá nhân

3.2.2.2 Mô tả tác nhân

BáGng 3.15 BáGng mố; táG cá9c tá9c nhá;nSTT Má& Ạctốr Tệ;n Ạctốr Y nghì&á/Ghi chũ9

1 KH Khá9ch há*ng Ngựợ*i xệm sáGn pháIm vá* đáUt há*ng

há*nh / ChũG dốánh nghiệ;p

ChũG cựGá há*ng, ngựợ*i sệ& qũáGn ly9 hốát đố;ng dốánh nghiệ;p vá* giá9m sá9t wệbsitệ

3 ẠDM QũáGn tri việ;n Ngựợ*i phũ trá9ch qũáGn ly9 wệbsitệ,

báố gố7m việ;c cá;p nhá;t nố;i dũng, kháCc phũc vá(n đệ7 ky& thũá;t vá* phá;n qũyệ7n vá* giá9m sá9t hốát đố;ng ngựợ*i dũ*ng

3.2.2.3 Danh sách Use-case

BáGng 3.16 BáGng dánh sá9ch Usệ-cásệ chũng chố cá9c Ạctốr

STT Má& Usệ Cásệ Tệ;n Usệ Cásệ Y nghì&á/Ghi chũ9

2 C-UC01 QũáGn ly9 tá*i

khốáGn Ngựợ*i dũ*ng cố9 thệI qũáGn ly9 thố;ng tin tá*i khốáGn (xệm, xố9á, sựGá), đốIi má;t kháIũ

pháIm Ngựợ*i dũ*ng cố9 thệI xệm dánh sá9ch sáGn pháIm cũGá cựGá há*ng, xệm chi tiệ(t sáGn

pháIm, hì*nh áGnh vá* thệ;m vá*ố giốG há*ng nệ(ũmũố(n

thệố dố&i hợn.

4 KH-UC03 QũáGn ly9 giốG

há*ng Chố phệ9p ngựợ*i dũ*ng táUng hốáUc giáGm số( lựợng hốáUc xố9á sáGn pháIm trống giốG há*ng

vá* thánh tốá9n nhự&ng sáGn pháIm đá& chốn trống giốG há*ng

tráng đợn há*ng Ngựợ*i dũ*ng cố9 thệI thệ;m, xố9á sáGn pháIm khốGi giốG há*ng vá* tũ*y chìGnh số( lựợng mốPi

sáGn pháIm trống giốG há*ng tũ*y y9

9 KH-UC07 QũáGn ly9 điá chìG Chố phệ9p ngựợ*i dũ*ng thệ;m điá chìG giáố

há*ng, xố9á nhự&ng điá chìG giáố há*ng đá& thệ;m vá* chốn điá chìG giáố há*ng máUc đinh.BáGng 3.18 BáGng dánh sá9ch Usệ-cásệ chố ngựợ*i trống dốánh nghiệ;p

STT Má& UsệCásệ Tệ;n Usệ Cásệ Y nghì&á/Ghi chũ9

1 ĐH-UC01 QũáGn ly9 má&

giáGm giá9 Chố phệ9p ngựợ*i qũáGn ly9 thệ;m, sựGá, xố9á má& giáGm giá9

2 ĐH-UC02 Thố(ng kệ;

dốánh thũ Chố phệ9p ngựợ*i qũáGn ly9 xệm cá9c thố;ng tin nhự: dốánh thũ, cá9c số( lựợng sáGn pháIm, đợn

há*ng, khá9ch há*ng số vợ9i thá9ng trựợ9c, cá9c sáGn pháIm, dánh mũc bá9n cháy nhá(t trống thá9ng, …

4 ĐH-UC03 QũáGn ly9 dánh

mũc Chố phệ9p ngựợ*i qũáGn ly9 thệ;m, cá;p nhá;p vá* xố9á cá9c dánh mũc

6 ĐH-UC04 QũáGn ly9 dánh

mũc phũ Chố phệ9p ngựợ*i qũáGn ly9 thệ;m, cá;p nhá;p vá* xố9á cá9c dánh mũc phũ

tá*i khốáGn QũáGn tri việ;n cố9 thệI táố, cá;p nhá;t vá* xố9á lốái nhố9m tá*i khốáGn

2 ẠDM-UC02 QũáGn ly9 tá*i

khốáGn QũáGn tri việ;n cố9 thệI táố, cá;p nhá;t vá* xố9á tá*i khốáGn, cũ&ng nhự xệm thố;ng tin

Usệ Cásệ Námệ QũáGn ly9 tá*i khốáGn

Dệscriptiốn Chố phệ9p ngựợ*i dũ*ng qũáGn ly9 tá*i khốáGn cũGá mì*nh nhự đáUng xũá(t, đốIi má;t kháIũ, qũệ;n má;t kháIũ.

Ạctốr(s) Ngựợ*i dũ*ng cố9 tá*i khốáGn (khá9ch há*ng, chũG dốánh nghiệ;p/nhá* điệ7ũ há*nh, qũáGn tri việ;n)

Tháy đốIi má;t kháIũ tá*i khốáGn

3 Tại thanh navigation ở góc trên màn hình, di chuyển vàotên tài khoản của người dùng và bấm button “Tài khoản”

4 Hệ thống sẽ điều hướng đến màn hình quản lý tài khoản,người dùng chọn button “Thay đổi mật khẩu” bên thanhsidebar bên trái màn hình

5 Hệ thống sẽ điều hướng đến màn hình đổi mật khẩu tàikhoản của người dùng

6 Người dùng điền mật khẩu hiện tại, mật khẩu mới và xácnhận lại mật khẩu mới, người dùng bấm nút xác nhận đểđổi mật khẩu của tài khoản

7 Hệ thống sẽ truy xuất lên database và sửa lại thông tin vềmật khẩu

5 Người dùng có thể chọn những checkbox bên thanhsidebar bên trái màn hình để lọc sản phẩm theo các thuộctính như: danh mục, màu sắc, thương hiệu, chất liệu,…

6 Người dùng có thể chọn selectedbox bên trong thanhnavigation bar về phía bên trái để sắp xếp sản phẩm theogiá, độ yêu thích, ngày thêm mới, cũ

7 Hệ thống sẽ lọc sản phẩm theo những lựa chọn của ngườidùng

Xệm chi tiệ(t sáGn pháIm

8 Chọn sản phẩm muốn xem chi tiết

9 Hệ thống lấy dữ liệu từ database và hiển thị giao diện chitiết sản phẩm

Thệ;m vá*ố giốG há*ng

10 Tại màn hình chi tiết sản phẩm, người dùng chọn button

“Thêm vào giỏ hàng”

sáGn pháIm ngựợ*i dũng mũá vựợt qũá9 số( lựợng hiệ;n cố9 cũGá cựGá há*ng Usệ-cásệ tiệ(p tũc ợG bựợ9c 10.

BáGng 3.22 ĐáUc táG Usệ-cásệ C-UC03

Usệ Cásệ Námệ NháCn tin qũá chátbốx

Dệscriptiốn Ngựợ*i dũ*ng cố9 thệI gựGi tin nháCn, hì*nh áGnh, … đệ(n ngựợ*i qũáGn ly9.

Ạctốr(s) Ngựợ*i dũ*ng cố9 tá*i khốáGn (khá9ch há*ng, chũG dốánh nghiệ;p/nhá* điệ7ũ há*nh, qũáGn tri việ;n).Prệ-Cốnditiốn(s) Khố;ng

Usệ Cásệ Námệ SựG dũng má& giáGm giá9

Dệscriptiốn Chố phệ9p ngựợ*i dũ*ng sựG dũng má& giáGm giá9 đệI giáGm giá9 thệố phá7n tráUm đệI giáGm giá9 tốIng số( tiệ7n pháGi tráG chố đợn

há*ng

Básic Flốw Thệ;m sáGn pháIm vá*ố dánh sá9ch yệ;ũ thì9ch

1 Trong màn hình chi tiết sản phẩm bấm vào button

“Yêu Thích” để thêm sản phẩm vào danh sách yêuthích

2 Hệ thống sẽ hiện thị thông báo đã thêm sản phẩmngười dùng đã chọn vào danh sách yêu thích thànhcông

3 Hệ thống lưu dữ liệu sản phẩm yêu thích người dùngvừa thêm vào database