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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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 2023Sinh việ;n thực hiệ;n

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

MUC LUC HINH

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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ệ;pvũ 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.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

bá9ố cá9ố bá9n há*ng, qũáGn ly9 há*ng tố7n khố vá* sáGn xũá(t, đố7ng thợ*i cá;p nhá;tsáGn pháIm trống khố há*ng vá* thố;ng tin giá9 cáG thố;ng qũá tráng wệb.

- 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.

Khách hàng có thể thêm sản phẩm vào giỏ hàng để tiếp tục mua sắm hoặc thanh tốn.

Thanh tốn Khách hàng có thể thanh toán bằng nhiều phương thức khácnhau, 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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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ửahà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.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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.

<b>2.2.Mơ hình Client-Server [2]</b>

- <b>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</b>

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

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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

o Khả năng mở rộng: Mô hình mạng kết nối Client Server có khả năngmở 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: Hồn tồ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ữ

Hì*nh 2.2 Thự việ;n Rệáct JS- Ưu điểm của React JS:

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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 tồ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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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 q 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

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

- 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 tố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ớndữ 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.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

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ơnso 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ó.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

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ắcvà 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.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

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.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

- 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

<b>của em</b>

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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>3.2.Xác định và mơ hình hóa u cầu3.2.1. Xác định yêu cầu</b>

3 Thêm sản phẩm vào giỏ hàng4 Thanh toán

5 Đánh giá và nhận xét6 Khuyến mãi và giảm giá7 Quản lý sản phẩm8 Quản lý danh mục9 Quản lý doanh thu10 Liên lạc qua chatbox11 Theo dõi đơn hàng.12 Phân quyền

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

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 tra2 Quản lý sản

phẩm ^{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

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

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

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ính}xác và nhanh chóng

xác và nhanh chóng5 Đánh giá và nhận xét Nhập thơng tin

đúng và chính xác.

Thực hiện 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 u cầu hiệu quả, chính}xá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ính}xá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ính}xá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ính}xác và nhanh chóng.

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

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 tố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ễ 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.

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

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

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ầu7 Quản lý sản phẩm Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu8 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

<b>3.2.1.5.Về tính an tồn</b>

BáGng 3.10<i> Danh sách các u cầu an tồn</i>

1 Khơng cho phép hủy Hóa đơn đã thanh tốn, sản phẩm đang được bán.BáGng 3.11<i> Bảng trách nhiệm các yêu cầu an tồn</i>

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.

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>3.2.1.6.Về tính bảo mật</b>

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

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.

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>3.2.2. Mơ hình hóa u cầu</b>

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ànhận xét những sản phẩm mình đã mua.6 Khuyến mãi và giảm giá Quản lý có thể thêm các mã giảm giá để

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

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

<b>3.2.2.3.Danh sách Use-case</b>

BáGng 3.16 BáGng dánh sá9ch Usệ-cásệ chũng chố cá9c ẠctốrSTT 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.

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

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.

STT ^{Má& Usệ}_Cásệ Tệ;n Usệ Cásệ Y nghì&á/Ghi chũ91 Đ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, đợnhá*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ũ.

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

hiệ;n cố9 sáfn.7 ĐH-UC06 QũáGn ly9 đợn

há*ng ^{Chố phệ9p ádmin xệm dánh sá9ch cá9c đợn}há*ng má* khá9ch há*ng đá& đáUt vá* qũáGn ly9 trángthá9i cũGá cá9c đợn há*ng.

BáGng 3.19 BáGng dánh sá9ch Usệ-cásệ chố qũáGn tri việ;nSTT Má& Usệ Cásệ Tệ;n Usệ Cásệ Y nghì&á/Ghi chũ9

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

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)}

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

trình duyệt người dùng.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.

khẩu vào email người dùng đã đăng ký.

11. Người dùng vào địa chỉ mail đã đăng ký để lấy liên kếtđến trang đổi mật khẩu.

12. Hệ thống sẽ chuyển đến trang quên mật khẩu, người dùngđiền mật khẩu mới và xác nhận mật khẩu.

13. Hệ thống sẽ truy xuất lên database để tiến hành đổi mậtkhẩu.

Ạltệrnátivệ Flốw ^{4á. Hệ; thố(ng hiệIn thi thố;ng bá9ố má;t kháIũ hiệ;n tái sái.}_{Usệ-cásệ tiệ(p tũc ợG bựợ9c 3.}Ệxcệptiốn Flốw N/Ạ

Bũsinệss rũlệ(s) ^{ChìG ngựợ*i dũ*ng đáUng nhá;p mợ9i cố9 thệI qũáGn ly9 thố;ng tin}_{tá*i khốáGn cũGá hố.}Nốn-fũnctiốnál

rũlệ(s) ^{Hệ; thố(ng pháGi cố9 kháG náUng cá;p nhá;t thố;ng tin tá*i khốáGn}cũGá ngựợ*i dũ*ng mố;t cá9ch nhánh chố9ng vá* án tốá*n.

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

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 thanh

navigation 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”.

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

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.

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

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.

rũlệ(s) ^{Tráng pháGi táGi trống vố*ng 5 giá;y.}

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

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.

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

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 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.

</div>