đồ án 2 xây dựng website bán giày

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.72 MB, 93 trang )

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

<b>ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN</b>

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

<b>ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN</b>

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

Trong quá trình làm đồ án và bước đầu tiếp cận các cơng nghệ mới, nhóm cịnnhiều thiếu sót về mặt kiến thức cũng như kinh nghiệm thực tiễn nên khó tránh khỏinhững sai sót. Những nhận xét, góp ý chân tình của cơ chính là cơ sở để nhóm có thể cảitiến và hồn thiện đề tài này một cách tốt nhất.

Chúng em xin trân trọng cảm ơn!

TP. Hồ Chí Minh, ngày 30 tháng 12 năm 2023 Nhóm sinh viên thực hiện

<b> Lê Thị Phương Quyên – Dương Hoàng Mai</b>

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

<b>ĐỀ CƯƠNG CHI TIẾTTÊN ĐỀ TÀI: Xây dựng website bán giày</b>

Với sự phát triển mạnh mẽ của công nghệ số, đã sinh ra nhiều loại hình dịch vụ đểphục vụ nhu cầu của con người về cuộc sống hằng ngày. Phổ biến nhất phải kểđến việc kinh doanh qua mạng. Thị trường tiêu dùng online là một thị trườngnhiều tiềm năng. Chính điều này đã thúc đẩy thương mại điện tử phát triển mộtcách nhanh chóng, Việc mua sắm online nói chung và mua sắm giày nói riêng trởnên dễ dàng hơn rất nhiều. Thấu hiểu rõ những điều trên, nhóm em thực hiện đềtài “Xây dựng website bán giày” với định hướng đáp ứng đầy đủ các nhu cầu hiệntại của người dùng.

<b>- Xây dựng được một website bán giày thân thiện với người dùng với giao diện</b>

hiện đại, bố cục rõ ràng và đáp ứng đủ các chức năng cơ bản của người dùng.

<b>- Thông qua việc thực hiện đề tài, có thể hiểu sâu hơn về một số công nghệ web</b>

phổ biến hiện nay.

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

- Quản lý tài khoản: quản trị viên, khách hàng.

- Thống kê doanh thu theo ngày, theo tháng, theo quý, theo năm.

- Tích hợp hệ thống gợi ý, khuyến nghị sản phẩm.- Hỗ trợ tư vấn bằng chatbox.

- Tính năng thanh tốn bằng ví điện tử.

<b>- Áp dụng các cơng nghệ để hồn thành sản phẩm đề tài.- Xây dựng website hoàn chỉnh đáp ứng yêu cầu người dùng.Kế hoạch thực hiện:</b>

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

Thời gian Cơng việc

11/09 – 17/09 ● Tìm hiểu cơng nghệ liên quan.

18/09 – 24/09 ● Xác định yêu cầu và các chức năng của đề tài.

25/09 – 08/10

● Phân tích chi tiết các yêu cầu nghiệp vụ và chức năng của đề tài.

● Viết tài liệu mô tả hệ thống website.

09/10 – 25/10

● Xây dựng bản vẽ các sơ đồ.

● Thiết kế giao diện website.

26/10 – 25/11

● Xây dựng giao diện của website.

● Xây dựng các tính năng cơ bản của website.

26 /11 – 15/12

● Hoàn thiện giao diện và các chức năng của website.

● Chỉnh sửa các tài liệu liên quan.

16/12 – 24/12

● Kiểm thử, sửa lỗi và hoàn thiện các chức năng của sản phẩm.

● Hoàn thiện các tài liệu báo cáo.

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

(Ký tên và ghi rõ họ tên)

(Ký tên và ghi rõ họ tên)

<b>Lê Thị Phương Quyên</b>

(Ký tên và ghi rõ họ tên)

<b>Dương Hoàng Mai</b>

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

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

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

<b> Trần Thị Hồng YếnMỤC LỤC</b>

1.5. Phương pháp nghiên cứu...4

CHƯƠNG 2. CƠ SỞ LÝ THUYẾT...5

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

3.1. Phân tích yêu cầu...16

3.1.1. Yêu cầu chức năng...16

3.1.2. Yêu cầu phi chức năng...17

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

3.2.1. Danh sách Actor...18

3.2.2. Sơ đồ use case tổng quát...19

3.2.3. Danh sách use case...20

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

4.2.22. Màn hình “Quản lý yêu cầu”...74

CHƯƠNG 5. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN...75

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

Hình 3.1 Sơ đồ Use case tổng quát...19

Hình 3.2 Sơ đồ Thiết kế Cơ sở dữ liệu...40

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

Bảng 3.6 Đặc tả usecase Đăng xuất...24

Bảng 3.7 Đặc tả usecase Quản lý thông tin tài khoản...25

Bảng 3.8 Đặc tả usecase Xem danh sách sản phẩm...26

Bảng 3.9 Đặc tả usecase Xem chi tiết sản phẩm...26

Bảng 3.10 Đặc tả usecase tạo tài khoản...27

Bảng 3.11 Đặc tả usecase Đặt hàng...28

Bảng 3.12 Đặc tả usecase Xem tình trạng đơn hàng...29

Bảng 3.13 Đặc tả usecase Thanh toán đơn hàng...30

Bảng 3.14 Đặc tả usecase Xem lịch sử đặt hàng...31

Bảng 3.15 Đặc tả usecase Quản lý giỏ hàng...32

Bảng 3.16 Đặc tả usecase Quản lý loại sản phẩm...33

Bảng 3.17 Đặc tả usecase Quản lý kho sản phẩm...34

Bảng 3.18 Đặc tả usecase Xem báo cáo doanh thu...35

Bảng 3.19 Đặc tả usecase Xuất báo cáo doanh thu...35

Bảng 3.20 Đặc tả usecase Xem danh sách đơn đặt hàng...36

Bảng 3.21 Đặc tả usecase Xem chi tiết đơn đặt hàng...37

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

Bảng 3.26 Chi tiết bảng “ProductType”...43

Bảng 3.27 Chi tiết bảng “Brand”...43

Bảng 3.28 Chi tiết bảng “Sale”...44

Bảng 3.29 Chi tiết bảng “Feedback”...45

Bảng 3.30 Chi tiết bảng “Order”...45

Bảng 3.31 Chi tiết bảng “Delivery”...46

Bảng 3.32 Chi tiết bảng “Payment”...47

Bảng 3.33 Chi tiết bảng “User”...47

Bảng 3.34 Chi tiết bảng “Cart”...48

Bảng 3.35 Chi tiết bảng “Address”...48

Bảng 3.36 Chi tiết bảng “UserGroup”...49

Bảng 3.37 Chi tiết bảng “Permission”...49

Bảng 4.1 Danh sách các bảng dữ liệu...50

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

Đồ án “Xây dựng website bán giày” sau khi hoàn thành việc nghiên cứu phạmvi và phương pháp đã tiến hành xây dựng website tập trung vào chức năng mua hàng,xem thông tin sản phẩm, quản lý giỏ hàng,…

Đề tài được bắt đầu từ việc tìm hiểu thực trạng, xác định phạm vi, mục tiêu củađề tài. Từ đó đưa ra các chức năng cần có và các công nghệ cần sử dụng cho website. Với các chức năng chính u cầu qui trình phát triển website logic và mang tính chấttuần tự. Qui trình phát triển được ghi nhận bằng công cụ Github project. Ở giai đoạnthực hiện, client và server được phát triển song song sử dụng thư viện ReactJS choclient và NodeJS cho server, sử dụng Visual Studio Code làm IDE chính.

Phần cuối cùng của đồ án là trình bày kết quả đã thực hiện lên cuốn báo cáo,đưa ra kết luận và hướng phát triển cho ứng dụng trong tương lai. Nội dung đồ án đượctrình bày trong 5 chương như sau:

● CHƯƠNG 1. MỞ ĐẦU: Xác định lí do, mục tiêu đề tài, đối tượng, phạm vi vàphương pháp nghiên cứu.

● CHƯƠNG 2. CƠ SỞ LÍ THUYẾT: Giới thiệu các cơng nghệ và ngôn ngữ đã sửdụng gồm ngôn ngữ Javascript, công nghệ ReactJS, Redux Toolkit, NodeJS,MongoDB, Bootstrap.

● CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG: Phân tích u cầu, sơ đồuse case và thiết kế dữ liệu cho website bán giày.

● CHƯƠNG 4. XÂY DỰNG ỨNG DỤNG: Xây dựng website bán giày Sneakifyđược mô tả thông qua danh sách và chi tiết các màn hình.

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

● CHƯƠNG 5. KẾT LUẬN: Trình bày kết quả đạt được, ưu, nhược điểm của đồán và hướng phát triển trong tương lai của đồ án.

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

<b>CHƯƠNG 1.MỞ ĐẦU</b>

Hiện nay, Internet đã trở thành một phần không thể thiếu trong cuộc sống củacon người. Internet hiện hữu ở mọi mặt trong xã hội, ảnh hưởng hoàn toàn đến cáchsống của con người, đặc biệt là trong việc mua sắm. Trong thời đại số hóa và phát triểncủa thương mại điện tử, việc xây dựng một trang web bán hàng trực tuyến là một ướcmơ khơng chỉ của các doanh nghiệp mà cịn của những người học và sáng tạo tronglĩnh vực công nghệ thông tin.

Trong vô số thị trường của thương mại điện tử, thị trường giày đang phát triểnmạnh mẽ, và việc kinh doanh giày qua một trang web có tiềm năng mang lại lợi nhuậnlớn. Điều này đặc biệt đúng trong bối cảnh mua sắm trực tuyến đang trở nên phổ biếnvà thuận tiện hơn bao giờ hết. Giày không chỉ đơn thuần là một vật dụng thiết yếu, màcịn đóng vai trò quan trọng trong thế giới thời trang và phong cách cá nhân. Đa dạngvề loại giày, từ thể thao đến thời trang, từ giày nam đến giày nữ, từ giày trẻ em đếnngười lớn, tạo ra một thị trường đầy thú vị và tiềm năng.

Song song đó, việc xây dựng và quản lý một trang web bán giày không chỉ địihỏi kiến thức về cơng nghệ, mà cịn địi hỏi hiểu biết về thị trường, quảng cáo trựctuyến, và quản lý kinh doanh. Điều này tạo ra một thách thức đầy hấp dẫn và đồng thờimang lại sự tiện lợi cho khách hàng, giúp họ dễ dàng tìm kiếm và mua sắm các sảnphẩm giày một cách thuận tiện từ bất kỳ đâu.

Thấu hiểu rõ những điều trên, nhóm đã quyết định lên ý tưởng và xây dựng mộtwebsite mua bán giày với định hướng đáp ứng đầy đủ các nhu cầu hiện tại của ngườidùng. Đồ án này là một cơ hội tuyệt vời để áp dụng và phát triển kỹ năng về phát triểnweb, quản lý cơ sở dữ liệu, thiết kế giao diện người dùng, và tích hợp cơng nghệ mớinhư trí tuệ nhân tạo vào q trình tối ưu hóa trải nghiệm mua sắm trực tuyến.

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

Việc nghiên cứu và xây dựng website được dựa trên hai mục tiêu chính sau:

- Thứ nhất, nghiên cứu và áp dụng các cơng nghệ lập trình web phổ biến hiện naynhư ReactJS, NodeJS…

- Thứ hai, có thể xây dựng được một website bán giày với giao diện hiện đại, thânthiện với người dùng, có tính thực tiễn cao, có khả năng triển khai và áp dụngvào thực tế, đáp ứng được nhu cầu của người dùng mua giày trực tuyến.

<b>1.3. Đối tượng nghiên cứu và phục vụ</b>

● Đối tượng nghiên cứu:

- Công cụ thiết kế UI/UX: Figma.- Front-end: ReactJs.

- Back-end: NodeJs.- Database: MongoDB● Đối tượng phục vụ:

- Những người dùng có nhu cầu mua sắm giày trực tuyến.

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

- Quản lý sản phẩm: danh sách sản phẩm, danh mục sản phẩm, tìm kiếm sảnphẩm, thống kê, đánh giá sản phẩm, hàng tồn kho…

- Chức năng giỏ hàng, mua hàng, đơn hàng.- Quản lý khách hàng.

- Quản lý tài khoản: quản trị viên, khách hàng.

- Thống kê doanh thu theo ngày, theo tháng, theo quý, theo năm.

- Tích hợp hệ thống gợi ý, khuyến nghị sản phẩm.- Hỗ trợ tư vấn bằng chatbox.

- Tính năng thanh tốn bằng ví điện tử.

<b>1.5. Phương pháp nghiên cứu</b>

- Nghiên cứu các website liên quan hiện đang có trên thị trường, quan sát và từ đórút ra những ưu, nhược điểm của các website đó (Vascara, Juno,...).

- Tìm hiểu các công nghệ liên quan, thử trải nghiệm từng loại công nghệ và chọnra một số công nghệ phù hợp nhất.

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

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

<b>CHƯƠNG 2.CƠ SỞ LÝ THUYẾT</b>

<b>2.1. Ngơn ngữ Javascript</b>

<i>Hình 2.1 Logo Javascript</i>

Javascript chính là một ngơn ngữ lập trình web rất phổ biến ngày nay. Javascriptđược tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống độnghơn. Chúng cũng đóng vai trị tương tự như một phần của website, cho phép Client-side Script từ người dùng tương tự máy chủ (NodeJS) để tạo ra những website động.[7]

Cách hoạt động của Javascript:

- Thông thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúngđược tham chiếu qua file .js hoặc .JavaScript.

- Đây là một ngơn ngữ đến từ phía Client nên Script sẽ được download về máyclient khi truy cập.

- Tại đây, chúng sẽ được hệ thống xử ý. Vì vậy, bạn khơng cần phải tải về máyserver rồi chờ cho chúng xử lý xong mới phản hồi được kết quả đến client.Ưu điểm:

- Chương trình rất dễ học.

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

- Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanhchóng hơn.

- Những trình duyệt web có thể dịch thơng qua HTML mà khơng cần sử dụng đếnmột compiler.

- Javascript có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khácnhau.

- Được các chuyên gia đánh giá là một loại ngơn ngữ lập trình nhẹ và nhanh hơnnhiều so với các ngơn ngữ lập trình khác.

- Javascript cịn có thể được gắn trên một số các element hoặc những events củacác trang web.

- Những website có sử dụng Javascript thì chúng sẽ giúp cho trang web đó có sựtương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.

- Người dùng cũng có thể tận dụng Javascript với mục đích là để kiểm tra nhữnginput thay vì cách kiểm tra thủ cơng thơng qua hoạt động truy xuất database. - Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop,

Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tínhnăng).

Nhược điểm:

- Javascript dễ bị các hacker và scammer khai thác hơn.

- Javascript cũng khơng có khả năng đa luồng hoặc đa dạng xử lý.

- Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng. - Những thiết bị khác nhau có thể sẽ thực hiện Javascript khác nhau, từ đó dẫn

đến sự khơng đồng nhất.

- Vì tính bảo mật và an tồn nên các Client-Side Javascript sẽ không cho phépđọc hoặc ghi các file.

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

<b>2.2. ReactJS</b>

<i>Hình 2.2 Logo ReactJS</i>

ReactJS là một thư viện JavaScript dùng để xây dựng giao diện người dùng.Tính đến thời điểm hiện tại, đã có khoảng 1300 developer và hơn 94000 trang webđang sử dụng. ReactJS được hiểu nơm na là một thư viện, có chứa nhiều JavaScript mãnguồn và “cha đẻ” chính là Facebook. Mục đích chính đó là mỗi website sử dụngReactJS thì phải chạy thật mượt hoặc thật nhanh, có khả năng mở rộng cao và đơn giảnthực hiện. [8]

Về cơ bản, các tính năng của ReactJS thường xuất phát từ việc tập trung cácphần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ giao diện của ngườidùng từ một cách phức tạp và biến nó trở thành các phần mềm đơn giản. Hiểu đơn giảnthì các render dữ liệu khơng chỉ được thực hiện ở vị trí server mà cịn ở vị trí client khisử dụng ReactJS. [8]

Ưu điểm:

- ReactJS cực kì hiệu quả: ReactJS tạo ra cho chính nó DOM ảo – nơi mà cáccomponent thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều.ReactJS cũng tính tốn những thay đổi nào cần cập nhật len DOM và chỉ thực

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

hiện chúng. Điều này giúp ReactJS tránh những thao tác cần trên DOM mànhiều chi phí.

- ReactJS giúp việc viết các đoạn code Javascript dễ dàng hơn: Nó dung cú phápđặc biệt là JSX (Javascript mở rộng) cho phép trộn giữa code HTML vàJavascript. Người dùng có thể thêm vào các đoạn HTML vào trong hàm rendermà không cần phải nối chuỗi. Đây là đặc tính thú vị của ReactJS. Nó sẽ chuyểnđổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổiJSX.

- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tốiưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đềuthực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiểnthị lên. Điều này thực tế là chậm. ReactJS là một thư viện component, nó có thểvừa render ở ngồi trình duyệt sử dụng DOM và cũng có thể render bằng cácchuỗi HTML mà server trả về.

- Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diệnvì virtual DOM được cài đặt hoàn toàn bằng Javascript.

- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng chobảo trì và sửa lỗi.

Nhược điểm:

- ReactJS chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải làmột MVC framework như những framework khác. Đây chỉ là thư viện củaFacebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model vàController, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2-way binding hay là Ajax.

- React khá nặng nếu so với các framework khác React có kích thước tươngtương với Angular (Khoảng 35KB so với 39KB của Angular). Trong khi đóAngular là một framework hồn chỉnh.

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

<b>2.3. NodeJS</b>

<i>Hình 2.3 Logo NodeJS</i>

NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồnmở, được sử dụng để chạy các ứng dụng web bên ngồi trình duyệt của client. Nềntảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháphoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mơ hình hướng sự kiện(event-driven) khơng đồng bộ. [9]

Các đặc tính của NodeJS:

- Lập trình hướng sự kiện và khơng đồng bộ: Tồn bộ API trong thư viện NodeJSđều không đồng bộ, hay không bị chặn. Về cơ bản điều này có nghĩa là mộtserver sử dụng NodeJS sẽ không bao giờ chờ một API trả về dữ liệu. Server sẽchuyển sang API kế tiếp sau khi gọi API đó và cơ chế thơng báo của Eventstrong NodeJS giúp server nhận được phản hồi từ lần gọi API trước.

- Cực kỳ nhanh chóng: Được xây dựng trên Cơng cụ JavaScript V8 của GoogleChrome, thư viện NodeJS có khả năng xử lý mã vô cùng nhanh.

- Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng mộtmơ hình luồng đơn với vịng lặp sự kiện/event. Cơ chế event cho phép máy chủphản hồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các

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

server truyền thống hỗ trợ giới hạn các thread để xử lý yêu cầu. NodeJS sử dụngmột chương trình đơn luồng, cùng một chương trình có thể cung cấp dịch vụcho một số lượng yêu cầu lớn hơn so với các máy chủ truyền thống như ApacheHTTP Server.

- Khơng có buffer: Các ứng dụng NodeJS khơng có vùng nhớ tạm thời (buffer)cho bất kỳ dữ liệu nào. Các ứng dụng này chỉ đơn giản xuất dữ liệu theo khối.- License: NodeJS được phát hành theo giấy phép MIT.

Ưu điểm:

- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.- Sử dụng Javascript – một ngơn ngữ lập trình dễ học.

- Chia sẻ cùng code ở cả phía client và server.

- NPM (Node Package Manager) và module Node đang ngày càng phát triểnmạnh mẽ.

- Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên host khôngphải là điều dễ dàng.

- Thiếu sự kiểm duyệt chất lượng các module NodeJS.

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

<b>2.4. Redux Toolkit</b>

<i>Hình 2.4 Logo Redux Toolkit</i>

Gói Redux Toolkit là cách chuẩn để viết logic Redux. Ban đầu nó được tạo ra đểgiúp giải quyết ba mối quan tâm phổ biến về Redux:

- "Định cấu hình Redux Store quá phức tạp".

- "Dev phải thêm rất nhiều packages để Redux có thể làm bất cứ điều gì hữu ích.- "Redux yêu cầu quá nhiều mã code sẵn".

Redux Toolkit có thể khơng giải quyết mọi trường hợp sử dụng, nhưng với tinhthần của create-react-app, Redux Toolkit có thể cố gắng cung cấp một số cơng cụ tómtắt q trình thiết lập và xử lý các trường hợp sử dụng phổ biến nhất, cũng như baogồm một số tiện ích hữu ích sẽ cho phép người dùng đơn giản hóa mã ứng dụng củahọ. [10]

Bộ công cụ Redux Toollkit cũng bao gồm khả năng tìm nạp và lưu trữ dữ liệu mạnhmẽ tên là "Truy vấn RTK". Nó được bao gồm trong gói như một tập hợp các điểm đầuvào riêng biệt. Nó là tùy chọn, nhưng có thể loại bỏ nhu cầu tự viết tay logic tìm nạpdữ liệu. [10]

Những cơng cụ này sẽ mang lại lợi ích cho tất cả người dùng Redux. Cho dù ngườidùng Redux hoàn toàn mới đang thiết lập dự án đầu tiên của mình hay là người dùng

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

có kinh nghiệm muốn đơn giản hóa ứng dụng hiện có, bộ cơng cụ Redux có thể giúplàm cho mã Redux của mình tốt hơn. [10]

<b>2.5. MongoDB</b>

<i>Hình 2.5 Logo MongoDB</i>

MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, được thiết kếhướng theo đối tượng và hỗ trợ trên đa nền tảng. Các bảng MongoDB có cấu trúc linhhoạt, cho phép dữ liệu không cần tuân theo bất kỳ dạng cấu trúc nào. [11]

MongoDB hoạt động trên collection, hướng tài liệu kiểu JSON thay cho bảng đểtăng tốc độ truy vấn. MongoDB có chức năng định hướng tài liệu cung cấp, hiệu suấtcao, tính sẵn sàng cao và khả năng mở rộng dễ dàng.

Collection trong MongoDB về bản chất thì có thể hiểu là nhóm các document,một collection sẽ chứa các tập document.

Ở MongoDB, các collection không theo bản chất cũ vì các document khơngtn theo cấu trúc, nghĩa là các document trong một collection khơng có cấu trúc cốđịnh như nhau (không cần chia ra các cột để lưu trữ), vậy thì khơng cần phải định nghĩathành phần các cột trong một collection như trong cơ sở dữ liệu quan hệ.

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

Ưu điểm:

- MongoDB là một cơ sở dữ liệu hướng tài liệu, sử dụng bộ nhờ nội tại, truy cậpdễ dàng nhờ vào việc lập ra các chỉ mục, tăng tốc độ phản hồi truy vấn nhanh.Theo đánh giá thì tốc độ MongoDB có thể nhanh hơn 100 lần so với cơ sở dữliệu quan hệ.

- Sự linh hoạt của cơ sở dữ liệu: MongoDB sử dụng lưu trữ dữ liệu dưới dạngDocument JSON nên mỗi collection sẽ có kích cỡ khác nhau và các documentcũng khác nhau. Do sử dụng cơ sở dữ liệu khơng có lược đồ nên điều này manglại sử linh hoạt và tự do lưu trữ dữ liệu thuộc nhiều loại khác nhau.

- Khả năng mở rộng: Lợi thế về cơ sở dữ liệu theo chiều ngang, vì vậy, khi xử lýmột dữ liệu lớn thì chúng ta có thể phân phối cho nhiều máy.

- Đội ngũ hỗ trợ chuyên nghiệp: Khi gặp phải bất kỳ sự cố nào chúng ta có thểliên hệ trực tiếp đến hệ thống hỗ trợ để xử lý kịp thời.

- Tính khả dụng cao: MongoDB khơng chỉ có các tính năng về sao chép mà cóthể sử dụng gridFS (có thể lưu trữ và truy xuất các tệp vượt quá kích thước16MB). Các tính năng giúp tăng tính khả dụng và đạt hiệu suất cao.

- Khơng có chức năng Joins nên sẽ có sự dư thừa dữ liệu, điều này là dung lượngbộ nhớ tăng khơng cần thiết.

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

<b>2.6. Bootstrap</b>

<i>Hình 2.6 Logo Bootstrap</i>

Bootstrap là một front-end framework mã nguồn mở miễn phí giúp q trìnhphát triển web được nhanh và dễ dàng hơn. Bootstrap bao gồm các mẫu thiết kế dựatrên HTML và CSS như typography, forms, buttons, tables, navigation, modals, imagecarousels… cũng như các plugin JavaScript tùy chọn. Người dùng có thể tạo các giaodiện responsive design cho các thiết bị khác nhau với Bootstrap. [12]

Ưu điểm của Bootstrap

- Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt đầusử dụng Bootstrap.

- Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrapđiều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn.

- Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một phầncủa core framework.

- Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trìnhduyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).Các tính năng chính của Bootstrap:

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

- Hỗ trợ jQuery: Bootstrap 5 sẽ không sử dụng thư viện jQuery nữa, thay vào đólà thư viện JavaScript đã được cải thiện. Việc kết thúc hỗ trợ jQuery giúp giảmkích thước tệp nguồn và cải thiện thời gian tải, giúp V5 sẵn sàng hơn trongtương lai. Các nhà phát triển sẽ khơng cịn phải tải xuống tồn bộ thư việnkhổng lồ để thực hiện mọi việc trong JS. Đây là chìa khóa quan trọng vì thờigian tải trang là một trong những yếu tố Google đánh giá thứ hạng cho các trangweb trên thiết bị di động.

- Thuộc tính tùy chỉnh CSS: Thuộc tính tùy chỉnh CSS giúp CSS linh hoạt hơn vàcó thể lập trình được. Các biến CSS được thêm tiền tố -bs để tránh xung đột vớiCSS của bên thứ ba.

- Cải tiến biểu mẫu: Một tính năng mới khác trong Bootstrap 5 là hệ thống điềukhiển biểu mẫu được cải tiến. Trong V5, các biểu mẫu hồn tồn tùy chỉnh, vìvậy các nhà phát triển có thể cung cấp giao diện giống nhau trên tất cả các trìnhduyệt. Nhờ vậy các biểu mẫu dễ làm việc hơn và nhất quán hơn trên các trìnhduyệt khác nhau.

- Hỗ trợ RTL: Bootstrap 5 hỗ trợ RTL cho các ngôn ngữ đọc từ phải sang trái. Hỗtrợ RTL là một cải tiến lớn về khả năng truy cập trong Bootstrap 5 giúp loại bỏcác khó khăn mà các developer gặp phải khi cần RTL trên trang web.

- Các tùy chọn tùy chỉnh được cải thiện: Giờ đây, việc tạo theme, tùy chỉnh và mởrộng Bootstrap trở nên dễ dàng hơn bao giờ hết. Bootstrap 5 đã thêm phần tùychỉnh vào tài liệu để làm cho mọi thứ rõ ràng hơn.

- Thành phần offcanvas mới: Trong số các tính năng mới của Bootstrap 5 cịn cóthành phần offcanvas mới bao gồm backdrop có thể định cấu hình, cuộn nộidung và vị trí. Phần tử mới bao gồm các biểu tượng chữ V trong Bootstrap đểhiển thị khả năng nhấp và trạng thái. Các nhà phát triển có thể đặt loại thànhphần này ở trên cùng, dưới cùng, bên trái hoặc bên phải của chế độ xem.

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

<b>Chương 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG</b>

Người dùng đăng ký tài khoản bằng cách sử dụng Email và Password. Sau khihoàn thành form điền Email và Password, người dùng đăng ký tài khoản mới thànhcông và sử dụng tài khoản này để đăng nhập vào website.

Để sử dụng các chức năng như: Đánh giá sản phẩm,... người dùng phải tiếnhành đăng nhập vào website. Người dùng đăng nhập bằng tài khoản đã đăng ký trướcđó.

<b>3.1.1.4.Xem thơng tin sản phẩm</b>

Chức năng này cho phép người dùng xem thông tin một sản phẩm bất kì và xemlại danh sách các sản phẩm đã xem trước đó.

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

Chức năng này hỗ trợ người dùng tìm kiếm sản phẩm theo tên sản phẩm, màusắc, kiểu dáng... trên thanh tìm kiếm.

Người dùng có thể thêm sản phẩm vào giỏ hàng để tiến hành thanh toán ngayhoặc thêm nhiều sản phẩm vào giỏ hàng và thanh toán cùng một lúc.

- Yêu cầu về giao diện: Giao diện thân thiện, bố cục hợp lý, màu sắc phù hợp, cânđối, trực quan, dễ dàng thao tác.

- Yêu cầu về tính bảo mật: Phải đảm bảo an tồn dữ liệu người dùng, ngăn chặncác tấn cơng từ bên ngồi, kiểm sốt vận hành hệ thống, giảm thiểu tối đa mứcđộ rủi ro, rị rỉ thơng tin như các chức năng xác thực người dùng (đăng nhập,đăng ký, quên mật khẩu).

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

- Yêu cầu về tính tiện dụng: Website dễ sử dụng, tiện lợi trong việc tìm kiếm vàchia sẻ.

- u cầu về tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượnglớn dữ liệu, tránh xảy ra lỗi ngoại lệ.

- u cầu về tính tương thích: Website có thể chạy ổn định và tương thích vớinhiều nền tảng trình duyệt khác nhau.

<b>3.2.1.Danh sách Actor</b>

<i>Bảng 3.1 Bảng danh sách Actor</i>

1 Khách hàng Khách hàng đăng nhập vào website cóthể sử dụng tất cả các chức năng củawebsite như: Xem thông tin sản phẩm,Thêm sản phẩm vào giỏ hàng, Đặt hàng,…

2 Quản trị viên Quản trị viên có thể sử dụng các chứcnăng quản lí sản phẩm, đơn hàng,account,…

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

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

<i>Bảng 3.2 Danh sách Usecase chung</i>

1 Đăng nhập Người dùng có tài khoản (khách hàng hoặc nhân viên) có thể đăng nhập vào tài khoản và thực hiện các thao tác trên website

2 Đăng xuất Người dùng có thể đăng xuất tài khoản hiện tạikhỏi website.

3 Quản lý thông tin tàikhoản

Người dùng chọn yêu thích một bài hát để thêmbài hát đó vào thư viện.

4 Xem danh sách sản phẩm Người dùng có thể xem danh sách sản phẩm,xem chi tiết sản phẩm, hình ảnh sản phẩm, thêmsản phẩm vào giỏ hàng.

5 Xem chi tiết sản phẩm Người dùng có thể xem chi tiết sản phẩm baogồm các thông tin chi tiết như miêu tả, hình ảnh,

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

kích cỡ.

<i>Bảng 3.3 Danh sách Usecase khách hàng</i>

1 Tạo tài khoản Khách hàng có thể tạo tài khoản trên website đểđặt hàng và cập nhật thông tin về sản phẩm vàdịch vụ.

2 Đặt hàng Khách hàng có thể đặt các sản phẩm, tùy chọnnhu cầu giao nhận hàng và phương thức thanhtoán

3 Theo dõi trạng thái đơnhàng

Khách hàng có thể theo dõi trạng thái đơn hàngđã đặt.

4 Thanh tốn đơn hàng Khách hàng có thể thanh tốn đơn hàng thơngqua trang website bằng các hình thức thanh toán.5 Xem lịch sử đặt hàng Khách hàng có thể xem lịch sử đặt hàng của

mình bao gồm các thơng tin chi tiết như ngày đặthàng, các sản phẩm trong đơn hàng đã đặt vàhình thức thanh tốn.

6 Phản hồi và góp ý sảnphẩm

Khách hàng có thể cung cấp phản hồi về trảinghiệm của mình, bao gồm xếp hạng, đánh giá,gửi khiếu nại hoặc đề xuất và liên hệ vớiwebsite.

7 Hủy đặt hàng Khách hàng có thể hủy đơn hàng đã đặt.8 Quản lý giỏ hàng Khách hàng có thể thêm, xóa sản phẩm khỏi

giỏ hàng và tùy chỉnh số lượng mỗi sản phẩm trong giỏ hàng tùy ý.

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

<i>Bảng 3.4 Danh sách Usecase quản trị viên</i>

1 Quản lý sản phẩm Quản trị viên có thể thêm, xóa, sửa các danh mụcsắp xếp sản phẩm.

2 Quản lý kho sản phẩm Quản trị viên có thể thêm, xóa, sửa các sản phẩmkhỏi hàng tồn kho của tiệm bánh và cập nhậttrạng thái và giá cả của các sản phẩm.

3 Xuất báo cáo Quản trị viên có thể xuất báo cáo về tình trạngbán hàng, mức tồn kho và các số liệu kinh doanhkhác để hiểu rõ hơn về hiệu suất của cửa hàng vàđưa ra các quyết định kinh doanh dựa trên dữliệu.

4 Xem báo cáo doanh thu Quản trị viên có thể xem các báo cáo bán hàngtheo ngày, theo thàng, theo năm.

5 Xuất báo cáo doanh thu Cho phép quản trị viên xuất báo cáo doanh thudưới dạng pdf, excel.

6 Quản lý khuyến mãi Cho phép quản trị viên tạo và quản lý các ưu đãiquảng cáo, giảm giá, phiếu giảm giá và chươngtrình khách hàng thân thiết để khuyến khíchkhách hàng, tăng doanh số.

7 Xem danh sách đơn đặthàng

Quản trị viên có thể xem danh sách các đơn hànghiện có mà khách hàng đặt.

8 Xem chi tiết đơn đặthàng

Quản trị viên có thể xem chi tiết đơn hàng để cóthể biết các thơng tin về đơn hàng như số lượngsản phẩm, ghi chú, thông tin khách hàng trongđơn đặt hàng.

9 Cập nhật tình trạng đơnhàng

Quản trị viên có thể cập nhật tình trạng đơn hàngkhi có thay đổi như: đã xác nhận, đã hoàn thành,

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

đợi giao hàng, giao hàng thành công hoặc đãhủy.

10 Quản lý tài khoản Quản trị viên có thể thêm, xóa, sửa tài khoảnhoặc xem thông tin tài khoản.

<i>Bảng 3.5 Đặc tả usecase Đăng nhập</i>

<b>Tên use case</b> Đăng nhập

<b>Đối tượng tham gia Người dùng có tài khoản</b>

<b>Mô tả</b> Người dùng của hệ thống tiến hành đăng nhập vào trang web.

<b>Luồng sự kiện</b> 1. Người dùng điều hướng đến trang đăng nhập của trangweb.

2. Người dùng nhập email và mật khẩu của họ vào biểu mẫuđăng nhập.

3. Hệ thống xác minh thông tin đăng nhập của người dùng. + Nếu hệ thống không nhận ra thông tin đăng nhập của

người dùng, thông báo lỗi sẽ được hiển thị và ngườidùng được nhắc nhập thông tin đăng nhập của họ.+ Nếu người dùng chưa xác minh địa chỉ email của họ,

thông báo lỗi sẽ được hiển thị và người dùng đượcnhắc xác minh địa chỉ email của họ trước khi đăngnhập.

4. Hệ thống đăng nhập người dùng vào tài khoản của họ vàchuyển chúng đến trang Bảng điều khiển.

<b>Sự kiện kích hoạt</b> Chỉ người dùng đã đăng ký có thơng tin đăng nhập hợp lệ mớicó thể đăng nhập vào tài khoản của họ.

<b>Mục tiêu</b> Người dùng đăng nhập thành công vào tài khoản của họ.

</div>