đồ án 2 xây dựng website bán quần áo tích hợp hệ thống gợi ý sản phẩm

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.5 MB, 100 trang )

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

<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN </b>

<b>SINH VIÊN THỰC HIỆN Trần Trọng Hồng – 20520521 </b>

<b>Thành phố Hồ Chí Minh, tháng 12 năm 2023 </b>

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

Đồ án 2 với đề tài “Xây dựng website bán quần áo tích hợp hệ thống gợi ý sản phẩm” là minh chứng cho q trình cố gắng khơng ngừng trong việc tìm tịi, học hỏi trong suốt hơn 3 năm học tập tại trường Đại học Công nghệ Thông tin. Thể hiện khả năng của bản thân trong việc áp dụng kiến thức chun mơn vào giải quyết bài tốn thực tế.

Em xin được gửi lời cảm ơn sâu sắc tới ThS. Trần Thị Hồng Yến, người đã trực tiếp hướng dẫn, chỉ bảo, giúp đỡ em những lúc khó khăn, đưa ra những lời khun bổ ích để đồ án được hoàn thành đúng tiến độ và đáp ứng các yêu cầu đề ra ban đầu. Thành phố Hồ Chí Minh, tháng 12 năm 2023

Sinh viên

Trần Trọng Hoàng

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

CHƯƠNG 1: GIỚI THIỆU CHUNG ...13

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

1.2. Lý do chọn đề tài ...13

1.3. Mục tiêu trong đề tài ...13

1.4. Đối tượng nghiên cứu ...13

2.1.1. Giới thiệu mơ hình ứng dụng web MVC ...15

2.1.2. Các đặc trưng của mơ hình MVC ...15

2.1.3. Lý do chọn mơ hình MVC cho đề tài ...16

2.2. Server-Side Rendering ...16

2.2.1. Giới thiệu về Server-Side Rendering ...16

2.2.2. Các đặc trưng của Server-Side Rendering ...16

2.2.3. Lý do chọn Server-Side Rendering cho đề tài ...17

2.3. Client-Side Rendering ...17

2.3.1. Giới thiệu về Client-Side Rendering...17

2.3.2. Các đặc trưng của Client-Side Rendering ...18

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

2.3.3. Lý do chọn Client-Side Rendering ...19

2.4. NodeJS...19

2.4.1. Giới thiệu NodeJS ...19

2.4.2. Các đặc trưng của NodeJS ...19

2.4.3. Lý do chọn NodeJS cho đề tài ...21

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

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

3.1. Phân tích yêu cầu hệ thống ...36

3.1.1. Xác định yêu cầu ...36

3.1.2. Sơ đồ phân rã chức năng ...36

3.1.3. Phân tích yêu cầu phi chức năng...36

3.1.4. Mơ hình hóa các u cầu ...37

3.1.4.1. Danh sách các Actors ...37

3.1.4.2. Danh sách các Use case ...37

3.1.4.3. Sơ đồ use case tổng ...38

3.1.5. Đặc tả use case ...38

3.1.5.1. UC_1 “Đăng nhập” ...38

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

3.1.5.8. UC_8 “Quản lý đơn nhập hàng” ...58

3.1.5.9. UC_9 “Quản lý đơn bán hàng” ...63

3.1.5.10. UC_11 “Báo cáo thống kê” ...66

3.2. Thiết kế hệ thống ...67

3.2.1. Thiết kế xử lý ...67

3.2.1.1. Lược đồ hoạt động của hệ thống thanh toán online ...67

3.2.1.2. Sơ đồ tuần tự của hệ thống thanh toán online ...68

3.2.1.3. Sơ đồ tuần tự thao tác thêm sản phẩm ...68

3.2.2. Thiết kế cơ sở dữ liệu ...69

3.2.2.1. Lược đồ cơ sở dữ liệu ...69

3.2.2.2. Mô tả các bảng dữ liệu ...69

3.2.3. Thiết kế kiến trúc hệ thống ...76

CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG ...77

4.1. Danh sách giao diện ...77

4.1.1. Danh sách giao diện khách hàng ...77

4.1.2. Danh sách giao diện Admin ...78

4.2. Mơ tả các màn hình ...79

4.2.1. Giao diện trang chủ ...79

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

4.2.2. Giao diện đăng nhập ...79

4.2.3. Giao diện đăng ký ...80

4.2.4. Giao diện xem sản phẩm ...80

4.2.5. Giao diện Giỏ hàng ...81

4.2.6. Giao diện đặt hàng ...82

4.2.7. Giao diện thanh tốn thành cơng ...82

4.2.8. Giao diện lọc sản phẩm ...83

4.2.9. Giao diện thanh toán online ...83

4.2.10. Giao diện hiển thị danh sách yêu thích ...84

4.2.11. Giao diện hiển thị đơn hàng ...84

4.2.12. Giao diện giỏ hàng ...85

4.2.13. Giao diện nhập thông tin giao hàng ...85

4.2.14. Giao diện thơng báo thanh tốn thất bại ...86

4.2.15. Giao diện chọn phương thức thanh toán ...87

4.2.16. Giao diện danh sách sản phẩm ...87

4.2.17. Giao diện dashboard ...88

4.2.18. Giao diện quản lý danh mục ...88

4.2.19. Thêm mới danh mục ...89

4.2.20. Giao diện chỉnh sửa danh mục ...89

4.2.21. Giao diện xoá danh mục ...90

4.2.22. Giao diện quản lý sản phẩm ...90

4.2.23. Giao diện thêm sản phẩm mới ...91

4.2.24. Giao diện xem chi tiết sản phẩm ...92

4.2.25. Giao diện quản lý đơn hàng ...92

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

4.2.26. Giao diện chỉnh sửa trạng thái đơn ...93

4.2.27. Giao diện xem chi tiết đơn hàng ...94

4.2.28. Giao diện quản lý đơn hàng thanh toán bằng VNPay ...95

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

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

Bảng 3.1: Danh sách các actors...37

Bảng 3.2: Danh sách các Use case ...37

Bảng 3.3: Đặc tả Use case đăng nhập ...39

Bảng 3.4: Đặc tả Use case Đăng xuất ...40

Bảng 3.5: Đặc tả Use case Xem sản phẩm ...40

Bảng 3.6: Đặc tả Use case thêm sản phẩm vào giỏ hàng ...41

Bảng 3.7: Đặc tả Use case tìm kiếm sản phẩm ...42

Bảng 3.8: Đặc tả Use case quản lý giỏ hàng ...43

Bảng 3.9: Đặc tả Use case Thêm bớt số lượng sản phẩm ...44

Bảng 3.10: Đặc tả Use case xoá sản phẩm ...44

Bảng 3.11: Đặc tả Use case đặt hàng ...45

Bảng 3.12: Đặc tả Use case Thanh toán ...46

Bảng 3.13: Đặc tả Use case thanh toán online ...47

Bảng 3.14: Đặc tả Use case thanh toán khi nhận hàng ...47

Bảng 3.15: Đặc tả Use case Lọc sản phẩm ...48

Bảng 3.16: Đặc tả Use case Thêm danh mục ...50

Bảng 3.17: Đặc tả Use case chỉnh sửa danh mục ...50

Bảng 3.18: Đặc tả Use case xoá danh mục ...51

Bảng 3.19: Đặc tả Use case Tìm kiếm danh mục ...53

Bảng 3.20: Đặc tả Use case xem sản phẩm ...54

Bảng 3.21: Đặc tả Use case xem sản phẩm ...55

Bảng 3.22: Đặc tả Use case Chỉnh sửa sản phẩm ...56

Bảng 3.23: Đặc tả Use case Xoá sản phẩm ...57

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

Bảng 3.24: Đặc tả Use case Tìm kiếm sản phẩm ...57

Bảng 3.25: Đặc tả Use case tạo đơn nhập hàng ...59

Bảng 3.26: Đặc tả Use case Chỉnh sửa đơn nhập hàng ...60

Bảng 3.27: Đặc tả Use case Xoá đơn nhập hàng ...61

Bảng 3.28: Đặc tả Use case Tìm kiếm đơn nhập hàng ...62

Bảng 3.29: Đặc tả Use case Xem chi tiết đơn bán hàng ...63

Bảng 3.30: Đặc tả Use case chỉnh sửa trạng thái đơn ...64

Bảng 3.31: Đặc tả Use case Xoá đơn bán hàng ...65

Bảng 3.32: Đặc tả Use case Tìm kiếm đơn bán hàng ...65

Bảng 3.33: Đặc tả Use Case Xem báo cáo doanh thu ...66

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

Bảng 4.1: Danh sách giao diện khách hàng ...77

Bảng 4.2: Danh sách giao diện Admin ...78

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

Hình 2.1: Mơ hình MVC ...15

Hình 2.2: Sơ đồ mơ tả hoạt động SSR ...16

Hình 2.3: Sơ đồ mơ tả hoạt động CSR ...18

Hình 2.4: Các biến tồn cục trong NodeJs ...20

Hình 2.10: Các bước thược hiện thanh tốn online bằng VNPAY ...32

Hình 2.11: Mơ tả hệ thống gợi ý Collaborative Filtering ...33

Hình 2.12: Danh sách các snar phẩm được gợi ý sau khi được train ...35

Hình 3.1: Sơ đồ phân rã chức năng ...36

Hình 3.2: Sơ đồ Use case tổng ...38

Hình 3.3: Use case đăng nhập ...38

Hình 3.4: Use case xem sản phẩm ...40

Hình 3.5: Use case Tìm kiếm sản phẩm ...42

Hình 3.6: Use case quản lý giỏ hàng ...43

Hình 3.7: Use case lọc sản phẩm ...48

Hình 3.8: Đặc tả Use case quản lý danh mục ...49

Hình 3.9: Use case quản lý sản phẩm ...54

Hình 3.10: Use case Quản lý đơn nhập hàng ...58

Hình 3.11: Use case Quản lý đơn bán hàng ...63

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

Hình 3.12: Use Case Báo cáo thống kê ...66

Hình 3.13: Lược đồ hoạt động của hệ thống thanh tốn ...67

Hình 3.14: Sơ đồ tuần tự của hệ thống thanh tốn online ...68

Hình 3.15: Sơ đồ tuần tự thao tác thêm sản phẩm ...68

Hình 3.16: Lược đồ cơ sở dữ liệu ...69

Hình 3.17: Kiến trúc tổng thể dự án ...76

Hình 4.1: Giao diện trang chủ ...79

Hình 4.2: Giao diện đăng nhập ...79

Hình 4.3: Giao diện đăng ký tài khoản ...80

Hình 4.4: Giao diện Xem sản phẩm ...80

Hình 4.5: Giao diện giỏ hàng ...81

Hình 4.6: Giao diện đặt hàng ...82

Hình 4.7: Giao diện thanh tốn thành cơng ...82

Hình 4.8: Giao diện lọc sản phẩm ...83

Hình 4.9: Giao diện thanh tốn online ...83

Hình 4.10: Giao diện danh sách u thích ...84

Hình 4.11: Giao diện danh sách đơn hàng ...84

Hình 4.12: Giao diện giỏ hàng ...85

Hình 4.13: Giao diện nhập thơng tin giao hàng ...85

Hình 4.14: Giao diện thanh tốn thất bại ...86

Hình 4.15: Giao diện chọn phương thức thanh tốn ...87

Hình 4.16: Giao diện danh sách sản phẩm ...87

Hình 4.17: Giao điện dashboard...88

Hình 4.18: Giao diện quản lý danh mục ...88

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

Hình 4.19: Giao diện thêm mới danh mục ...89

Hình 4.20: Giao diện chỉnh sửa danh mục ...89

Hình 4.21: Giao diện xố danh mục ...90

Hình 4.22: Giao diện quản lý sản phẩm ...90

Hình 4.23: Giao diện thêm sản phẩm ...91

Hình 4.24: Giao diện xem chi tiết sản phẩm ...92

Hình 4.25: Giao diện quản lý đơn hàng ...92

Hình 4.26: Giao diện chỉnh sủa trạng thái đơn ...93

Hình 4.27: Giao diện xem chi tiết đơn hàng ...94

Hình 4.28: Giao diện thanh toán bằng VNPAY ...95

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

<b>CHƯƠNG 1: </b>

<b>GIỚI THIỆU CHUNG </b>

<b>1.1. Giới thiệu đề tài </b>

Đề tài website bán quần áo với hệ thống gợi ý là một đề tài thú vị và có ý nghĩa trong lĩnh vực thương mại điện tử. Website bán quần áo là một loại website chuyên cung cấp các sản phẩm quần áo của nhiều thương hiệu, kiểu dáng và mức giá khác nhau.

Trong thời đại hiện nay mạng Internet là một sản phẩm hết sức lớn lao và là nền tảng chính cho sự truyền tài, trao đổi thơng tin trên toàn cầu. Trong hoạt động sản xuất kinh doanh, giờ đây thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy hoạt động của doanh nghiệp. Đối với một cửa hàng, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng là rất cần thiết. Vì vậy, em đã quyết định “Xây dựng website bán quần áo" có tên là Besty giới thiệu và cung cấp các loại quần áo sang trọng đang có mặt trên thị trường và khách hàng có thể đặt hàng ngay tại website mà không cần đến trực tiếp điểm giao dịch. Việc này giúp cho khách hàng có thể chủ động và tiết kiệm thời gian của chính mình.

<b>1.3. Mục tiêu trong đề tài </b>

- Nghiên cứu một số thuật tốn có trong hệ thống gợi ý

- Xây dựng website bán quần áo cùng hệ thống gợi ý sản phẩm cho khách hàng - Xây dựng được hệ thống quản lý bán hàng đảm bảo thực hiện được đầy đủ các

chức năng cơ bản của một website bán hàng.

- Giải quyết tối ưu hóa q trình mua bán qua mạng phù hợp với thực tiễn - Đưa ra các báo cáo, thống kê tổng hợp

- Tìm hiểu và ứng dụng các cơng nghệ mới, nâng cao kỹ năng phát triển phần mềm

<b>1.4. Đối tượng nghiên cứu 1.4.1. Các công nghệ </b>

- Front-end: Nextjs, redux, reactjs, html, cs, ant design

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

- Backend: NodeJS, asp.net core, clean architecture, ImediaR - Database: Postgres, Cloudinary

- Collaorative Filtering

<b>1.4.2. Đối tượng phạm vi đề tài hướng đến </b>

- Các cửa hàng muốn có một website bán quần áo - Khách hàng muốn mua sản phẩm trực tuyến

- Phân tích các giải pháp của các sản phẩm tương tự trên thị trường.

- Xây dựng chức năng ở mức MVP (Minimum Viable Product) để đo lường tính hiệu quả.

- Hiểu rõ các công nghệ mới:

o Front – end: HTML-CSS, NextJs, Reactjs, ant design

o Back – end: NodeJS, Postgres, Cloudinary, Collaorative Filtering, ASP.NET core 7

- Hoàn thành sản phẩm với các chức năng đã được trình bày. - Giao diện thân thiện và tạo ra được những giá trị của mục tiêu.

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

<b>CHƯƠNG 2: </b>

<b>CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ </b>

<b>2.1.1. Giới thiệu mơ hình ứng dụng web MVC </b>

Mơ hình Model-View-Controller (MVC) là một mẫu kiến trúc phân tách một ứng dụng thành ba thành phần logic chính Model, View và Controller. Do đó viết tắt MVC. Mỗi thành phần kiến trúc được xây dựng để xử lý khía cạnh phát triển cụ thể của một ứng dụng. MVC tách lớp logic nghiệp vụ và lớp hiển thị ra riêng biệt.

<b>2.1.2. Các đặc trưng của mơ hình MVC </b>

Mơ hình MVC là một mơ hình kiến trúc phổ biến trong lập trình web, giúp phân tách ứng dụng web thành ba thành phần chính: Model, View và Controller.

<b>- Model: là thành phần đại diện cho dữ liệu và logic nghiệp vụ của ứng dụng. Model có thể kết nối với cơ sở dữ liệu, xử lý các yêu cầu và trả về kết quả. - View: là thành phần đảm nhiệm việc hiển thị giao diện người dùng và tương </b>

tác với người dùng. View có thể chứa các đối tượng giao diện như textbox, button, image... View cũng có thể nhận được sự kiện từ người dùng và gửi đến Controller.

<b>- Controller: là thành phần điều khiển luồng xử lý của ứng dụng. Controller </b>

nhận các yêu cầu từ View, gọi đến Model để xử lý và trả về kết quả cho View để hiển thị.

Mơ hình MVC giúp tăng tính tái sử dụng, bảo trì và mở rộng của mã nguồn, cũng như giảm sự phụ thuộc giữa các thành phần.

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

Hệ thống MVC phát triển tốt sẽ cho phép phát triển front – end, back – end cùng trên hệ thống mà khơng có sự can thiệp, chia sẻ, chỉnh sửa các tập tin trong khi một hoặc hai bên vẫn đang làm việc.

Việc sử dụng mơ hình tương đối đơn giản. Chỉ cần hiểu rõ quy trình vận hành,

<b>nắm được các chức năng của từng bộ phận thì việc triển khai mơ hình MVC tương </b>

đối dễ dàng.

<b>2.2. Server-Side Rendering </b>

<b>2.2.1. Giới thiệu về Server-Side Rendering </b>

Server side là kịch bản thường được sử dụng bởi máy chủ để người sử dụng tùy chỉnh website đang truy cập. Server side là một kỹ thuật được dùng để phát triển website. Bên cạnh chức năng cung cấp việc hiển thị tập tin website, nó cịn phản hồi cho server biết các tùy chỉnh của người truy cập đối với website.

Server-side rendering là một cơ chế đã được sử dụng từ lâu. Theo cơ chế này thì hầu hết các xử lý logic đều ở phía máy chủ. Trong đó, máy chủ thực hiện xử lý và tiến hành các thao tác với cơ sở dữ liệu để thơng dịch (render) ra thành HTML, sau đó gửi phản hồi cho khách hàng. Trình duyệt của khách hàng cũng sẽ chỉ hiển thị HTML này.

<b>2.2.2. Các đặc trưng của Server-Side Rendering </b>

Server-side rendering là cơ chế đã được sử dụng từ rất lâu. Gọi nó là server-side

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

rendering là vì phần lớn logic sẽ được xử lý ở server:

<small>• </small> Khi người dùng vào một trang web, trình duyệt sẽ gửi GET request tới web server.

<small>• </small> Web server sẽ nhận request, đọc dữ liệu từ database.

<small>• </small> Web server sẽ render HTML, trả về cho browser để hiển thị cho người dùng

<b>2.2.3. Lý do chọn Server-Side Rendering cho đề tài </b>

“Tuy lâu nhưng không lỗi thời” chính là cụm từ để miêu tả Server-Side Rendering, bởi cơ chế này sở hữu nhiều ưu điểm mà các cơ chế khác khơng có, cụ thể như:

<small>• </small> Tốc độ tải ban đầu nhanh chóng, dễ dàng điều chỉnh vì tất cả các dữ liệu đều được xử lý ở trên máy chủ. Phía máy khách chỉ thực hiện chức năng hiển thị lại các thông tin đã được diễn giải.

<small>• </small> Phần lớn các web framework đều hỗ trợ cơ chế Server-Side Rendering.

<small>• </small> Lập trình viên dễ code hơn. Theo đó, các lập trình viên chỉ cần thực hiện code một dự án web, mà khơng cần tách front-end và back-end.

<small>• </small> Hỗ trợ đắc lực cho SEO. Vì khi tất cả dữ liệu của website được thể hiện dưới dạng HTML nên được các cơng cụ tìm kiếm Google, Bing đánh giá cao.

<small>• </small> Chạy được trên các trình duyệt, bao gồm cả disable JavaScript.

<b>2.3. Client-Side Rendering </b>

<b>2.3.1. Giới thiệu về Client-Side Rendering </b>

Client-side rendering (CSR) là một phương pháp để xây dựng ứng dụng web, trong đó q trình xử lý và tạo nội dung HTML diễn ra trên máy khách (client-side) thay vì máy chủ (server-side). Thay vì nhận được một trang HTML đầy đủ từ máy chủ, trình duyệt web nhận được một tệp JavaScript và sử dụng nó để tạo ra nội dung và giao diện của trang.

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

<b>2.3.2. Các đặc trưng của Client-Side Rendering </b>

- Single-page applications (SPA): Client-side rendering thường được sử dụng trong việc xây dựng ứng dụng đơn trang (SPA), trong đó tồn bộ ứng dụng được tải một lần duy nhất và các nội dung thay đổi được tạo ra và quản lý trên máy khách.

- JavaScript-based rendering: Việc tạo nội dung và giao diện của trang diễn ra trên máy khách bằng cách sử dụng mã JavaScript. Trình duyệt tải tệp JavaScript và thực thi nó để tạo ra nội dung hiển thị cho người dùng.

- Rich user interactions: Client-side rendering cho phép tạo ra các trải nghiệm tương tác phong phú và đáp ứng nhanh. Với JavaScript chạy trên trình duyệt, người dùng có thể tương tác với trang mà không cần phải tải lại toàn bộ trang. - Better performance for subsequent interactions: Một lợi ích của Client-side rendering là hiệu suất tốt cho các tương tác tiếp theo sau khi trang ban đầu đã được tải. Vì khơng cần gửi yêu cầu đến máy chủ và tải lại trang, việc tương tác với ứng dụng trên máy khách có thể nhanh chóng và mượt mà.

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

<b>2.3.3. Lý do chọn Client-Side Rendering </b>

- Interactive user experience: Client-side rendering cho phép tạo ra các trải nghiệm tương tác mạnh mẽ và đáp ứng nhanh. Người dùng có thể tương tác với ứng dụng mà khơng cần phải tải lại trang hoặc chờ đợi phản hồi từ máy chủ.

- Offline support: Với Client-side rendering và sử dụng các công nghệ như Service Workers, ứng dụng có thể hoạt động trong chế độ ngoại tuyến (offline). Người dùng có thể truy cập và tương tác với nội dung mà không cần kết nối internet.

- Scalability: Với Client-side rendering, phần lớn công việc xử lý diễn ra trên máy khách, giảm tải cho máy chủ. Điều này giúp cải thiện khả năng mở rộng và xử lý tải trọng của ứng dụng.

- Modular development: Với Client-side rendering, ứng dụng có thể được xây dựng thành các thành phần độc lập và có thể tái sử dụng. Điều này giúp tăng tốc quá trình phát triển và duy trì ứng dụng.

<b>2.4. NodeJS </b>

<b>2.4.1. Giới thiệu NodeJS </b>

V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi. Nó được thiết kế tập trung vào hiệu năng và chịu trách nhiệm cho việc dịch mã JavaScript sang mã máy để máy tính có thể hiểu và chạy được. Nhưng bạn cũng nên tránh nhầm lẫn rằng Node chạy trên trình duyệt. Cha đẻ của Node dựa trên V8 engine, cải tiến một số tính năng chẳng hạn file system API, thư viện HTTP và một số phương thức liên quan đến hệ điều hành. Điều đó có nghĩa là Node.js là một chương trình giúp ta có thể chạy code JavaScript trên máy tính, nói cách khác nó là một JavaScript runtime.

<b>2.4.2. Các đặc trưng của NodeJS </b>

- <b>Module: Module giống như các thư viện JavaScript sử dụng trong ứng dụng </b>

Node.js application bao gồm một bộ các chức năng. Để đưa một module vào ứng dụng Node.js thì phải sử dụng hàm require() function with the với dấu

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

ngoặc đơn chứa tên module.

<b>- Cluster: Node.js được xây dựng dựa trên ý tưởng lập trình đơn luồng. Cluster </b>

là một module cho phép đa luồng bằng cách tạo ra các quy trình con có chung cổng máy chủ và chạy đồng thời.

<b>- Global: Biến toàn cục trong Node.js tồn tại trong tất cả các module. Những </b>

biến này bao gồm các hàm, module, string, v…v…. Một số biến tồn cục trong Node.js có thể kể đến trong bảng sau:

<i>Hình 2.4: Các biến toàn cục trong NodeJs </i>

<b>- Error Handling: Lỗi trong Node.js được sử lý qua các exception. Chẳng hạn, </b>

chúng ta phải xử lý một lỗi xảy ra khi chia cho 0. Lỗi này sẽ làm crash ứng dụng Node.js, vì vậy chúng ta phải xử lý lỗi này để ứng dụng có thể hoạt động bình thường.

<b>- Streaming: Stream là các đối tượng cho phép bạn đọc và viết dữ liệu một cách </b>

liên tục. Có 4 loại stream như sau:

<small>• </small> Readable: Là loại stream mà từ đó dữ liệu có thể đọc được

<small>• </small> Writable: Là loại stream mà dữ liệu có thể được viết lên đó

<small>• </small> Duplex: Là loại stream có thể đọc và viết được

<small>• </small> Transform: Là loại stream có thể thao tác dữ liệu trong khi nó đang được đọc hoặc viết

- <b>Buffer: Bộ đệm là một module cho phép xử lý các stream chỉ chứa các dữ liệu </b>

dạng nhị phân.

<b>- Domain: Domain module sẽ chặn các lỗi chưa được xử lý. Hai phương thức </b>

được dùng để chặn lỗi đó là:

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

• <b>Internal Binding: Error emitter thực thi code trong phương thức run.</b>

• <b>External Binding: Error emitter được thêm thẳng vào domain qua </b>

phương thức add của nó

<b>DNS: DNS module được sử dụng để kết nối đến một máy chủ DNS và </b>

thực hiện phân giải tên miền

- <b>Debugger: </b>Node.js có chức năng gỡ lỗi có thể được sử dụng với một client gỡ lỗi được tích hợp sẵn. Trình gỡ lỗi của Node.js khơng có q nhiều tính năng nhưng nó hỗ trợ các chức năng kiểm tra code cơ bản. Trình gỡ lỗi có thể được sử dụng trong bảng lệnh bằng cách sử dụng từ khố 'inspect' phía trước tên của file JavaScript

<b>2.4.3. Lý do chọn NodeJS cho đề tài </b>

<b>- Khả năng mở rộng: </b>Các ứng dụng Node.js có thể dễ dàng mở rộng, theo chiều dọc và chiều ngang. Trong khi quy mô theo chiều dọc cho phép bạn thêm nhiều tài nguyên hơn vào các nút hiện tại, quy mô theo chiều ngang cho phép bạn thêm các nút mới nhanh hơn. Hơn nữa, các ứng dụng Node.js không u cầu một khối lớn trong tồn bộ q trình phát triển, vì nó hoạt động cùng với một tập hợp các microservices và mơ-đun. Nó đơn giản, dễ dàng và hồn tồn phù hợp cho các cơng ty khởi nghiệp đang muốn phát triển.

<b>- Hiệu suất cao: </b>Node.js chạy trên công cụ Google V8 JS tuân thủ mã Javascript trực tiếp vào mã máy. Điều này làm cho nó hiệu quả về tài nguyên cũng như tăng tốc độ của khung. Trên thực tế, bản thân Google đầu tư rất nhiều vào cơng cụ tìm kiếm của họ để cải thiện hiệu suất một cách nhất quán

<b>- Hỗ trợ cộng đồng lớn: Được thành lập vào năm 2015, Node.js Foundation là </b>

một nhóm các nhà sáng lập ấn tượng đến từ các doanh nghiệp hàng đầu như IBM, Microsoft, Fidelity và SAP. Một số lượng lớn các nhà phát triển phần mềm và nhiều người hâm mộ Node.js tích cực đang khơng ngừng đóng góp vào cộng đồng Node.js không ngừng phát triển và phát triển để hỗ trợ các nhà phát triển đồng nghiệp.

<b>- Ngơn ngữ lập trình đơn: Node.js cung cấp một loạt các ngôn ngữ tương tự </b>

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

trên Javascript front-end và back-end. Nó thực sự dễ tiếp cận và linh hoạt hơn âm thanh. Nó làm cho tồn bộ chu trình phát triển ứng dụng web trở nên mạnh mẽ và liền mạch cho các nhà phát triển và doanh nghiệp. Nó giúp tiết kiệm thời gian, năng lượng và tài nguyên đầu tư vào giờ làm việc hiệu quả hơn và có lợi nhuận. Node.js không chỉ giúp cho việc phát triển ứng dụng web trở nên thuận tiện mà cịn khiến nó trở thành công nghệ được ưa chuộng nhất trên thị trường hiện nay.

- <b>Hệ sinh thái phong phú: Khi nói đến sự đơn giản và phong phú của Node.js, </b>

npm là từ duy nhất xuất hiện trong đầu bạn. npm có 836.000 thư viện và 10.000 trở lên được xuất bản mỗi tuần. Hơn 475.000 gói và đăng ký có sẵn và 11.000 cơng cụ mới hàng tuần. Nó đang giảm rất nhiều thời gian và chi phí liên quan đến việc phát triển và đưa ra thị trường.

<b>2.5. NextJS 2.5.1. Giới thiệu </b>

<i>Hình 2.5: Logo NextJS </i>

Next.js là một framework phát triển ứng dụng web React với khả năng xây dựng Server-side Rendering (SSR) và Static Site Generation (SSG). Nó cung cấp một cách tiếp cận hybric rendering, cho phép lựa chọn giữa client-side rendering và server-side rendering tùy thuộc vào yêu cầu của ứng dụng.

<b>2.5.2. Các đặc trưng </b>

- Server-side Rendering (SSR): Next.js cho phép xây dựng ứng dụng với khả năng render trên phía máy chủ. Khi một yêu cầu được gửi đến máy chủ, Next.js sẽ thực hiện việc render trước trang và trả về nội dung HTML đã được tạo ra

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

cho trình duyệt. Điều này giúp cải thiện khả năng tìm kiếm và trải nghiệm người dùng ban đầu.

- Static Site Generation (SSG): Next.js hỗ trợ xây dựng các trang tĩnh trước (pre-rendered) với nội dung được tạo ra trong quá trình xây dựng ứng dụng. Khi một yêu cầu được gửi đến máy chủ, Next.js sẽ trả về trực tiếp các trang tĩnh đã được tạo sẵn, mà khơng cần render trên phía máy chủ. Điều này giúp tăng tốc độ tải trang và giảm tải cho máy chủ.

- Incremental Static Regeneration (ISR): Next.js cho phép cập nhật lại các trang tĩnh đã được tạo ra trước theo một lịch trình định sẵn. Khi có yêu cầu mới, Next.js có thể tạo lại các trang tĩnh chỉ trong vài giây và cung cấp nội dung mới nhất cho người dùng.

- Hot Module Replacement (HMR): Next.js hỗ trợ HMR để cập nhật các module React mà không cần tải lại trang hoặc mất trạng thái. Điều này giúp tăng tốc quá trình phát triển và cải thiện trải nghiệm phát triển của nhà phát triển.

<b>2.5.3. Lý do chọn NextJS cho đề tài </b>

- Performance: Next.js cung cấp khả năng SSR và SSG giúp cải thiện hiệu suất và tốc độ tải trang. Trang được render trước trên phía máy chủ hoặc tạo trước dưới dạng trang tĩnh, giúp giảm thời gian phản hồi và tăng trải nghiệm người dùng.

- SEO-friendly: Với khả năng SSR và SSG, Next.js giúp cải thiện khả năng tìm kiếm của trang web. Các trang được tạo ra trước có thể chứa nội dung đầy đủ và đáng tin cậy cho các cơng cụ tìm kiếm.

- Developer Experience: Next.js cung cấp một số tính năng hữu ích như HMR và Fast Refresh giúp tăng tốc quá trình phát triển và giúp nhà phát triển dễ dàng xây dựng ứng dụng React phức tạp.

- Scalability: Next.js hỗ trợ việc xây dựng các ứng dụng có khả năng mở rộng và điều chỉnh linh hoạt. Với khả năng render trên phía máy chủ và tạo trước các trang tĩnh, Next.js giúp giảm tải cho máy chủ và cho phép ứng dụng xử lý tải trọng cao.

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

- Versatility: Next.js là một framework đa năng và linh hoạt, cho phép lựa chọn giữa SSR, SSG hoặc cả hai tùy thuộc vào yêu cầu cụ thể của ứng dụng. Điều này cho phép phát triển viên tận dụng các lợi ích của cả client-side rendering và server-side rendering để đáp ứng nhu cầu của dự án.

- Ecosystem and Community: Next.js được hỗ trợ bởi một cộng đồng lớn và sơi động. Với sự phát triển nhanh chóng, Next.js đã thu hút được nhiều cống hiến từ cộng đồng và có một hệ sinh thái mạnh mẽ của các thư viện và plugin hỗ trợ.

- Integration with React: Next.js là một framework được xây dựng trên nền tảng React, vì vậy nó tận dụng được các lợi ích của React như khả năng tái sử dụng component, quản lý trạng thái thông qua React hooks, và cộng đồng phát triển lớn của React.

- Development Efficiency: Next.js cung cấp các tính năng và cơng cụ để tăng tốc quá trình phát triển ứng dụng như routing tự động, code splitting, và pre-fetching dữ liệu. Điều này giúp giảm công sức và thời gian phát triển, đồng thời tạo ra các ứng dụng mạnh mẽ và tối ưu.

<b>2.6. Vite + ReactJS 2.6.1. Giới thiệu </b>

<i>Hình 2.6: React + vite + TypeScript </i>

Vite React là một sự kết hợp giữa công cụ phát triển web nhanh Vite và thư viện JavaScript phổ biến React. Vite là một công cụ phát triển web hiệu quả được thiết kế để xây dựng ứng dụng web hiện đại. Nó tập trung vào tối ưu hóa thời gian phát triển bằng cách sử dụng các kỹ thuật như tải lười biếng và phân tách mã. React là một thư

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

viện JavaScript phổ biến và mạnh mẽ, được sử dụng để xây dựng giao diện người dùng linh hoạt và dễ bảo trì.

<b>2.6.2. Các đặc trưng </b>

- Tải nhanh: Vite React tận dụng khả năng tải lười biếng và phân tách mã để cung cấp thời gian khởi động nhanh cho ứng dụng của bạn. Khi bạn phát triển, chỉ các module cần thiết cho trang hiện tại sẽ được tải, giúp giảm thời gian chờ và tăng tốc độ phát triển.

- ES Modules native: Vite React sử dụng cú pháp import/export của ES Modules một cách tự nhiên. Điều này giúp loại bỏ bước bundling trung gian và cho phép bạn sử dụng các module JavaScript một cách trực tiếp trong mã nguồn của mình.

- Hỗ trợ React tốt: Vite React được tối ưu hóa để tương thích tốt với React. Bạn có thể sử dụng JSX, React Hooks và các tính năng React khác mà khơng cần cấu hình phức tạp.

- Hot Module Replacement (HMR): Vite React hỗ trợ HMR, cho phép bạn cập nhật mã nguồn trong q trình phát triển mà khơng cần tải lại trang. Điều này giúp bạn nhìn thấy ngay lập tức các thay đổi và tăng tốc quá trình phát triển. - Môi trường phát triển đơn giản: Vite React cung cấp một môi trường phát triển

đơn giản và dễ sử dụng. Bạn chỉ cần cài đặt Vite và các gói phụ thuộc, và sau đó bạn có thể bắt đầu phát triển ứng dụng React ngay lập tức.

- Tăng tốc phát triển: Với khả năng tải nhanh và HMR, Vite React giúp bạn tiết kiệm thời gian phát triển. Bạn có thể thấy ngay lập tức các thay đổi và tận dụng khả năng tải lười biếng để giảm thời gian chờ.

- Tích hợp tốt với React: Vite React được tối ưu hóa để tương thích tốt với React. Bạn có thể sử dụng các tính năng của React mà khơng gặp sự cản trở và tận dụng các lợi ích của Vite.

- Hiệu suất tốt: Vite React sử dụng các kỹ thuật như phân tách mã và tải lười biếng để cải thiện hiệu suất.

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

<b>2.7. Typescript 2.7.1. Giới thiệu </b>

TypeScript là một ngơn ngữ lập trình mã nguồn mở phát triển bởi Microsoft. Nó là một phiên bản mở rộng của JavaScript, được thiết kế để xây dựng ứng dụng lớn, phức tạp và dễ bảo trì. TypeScript cung cấp các tính năng kiểm tra kiểu tĩnh, khắc phục một số hạn chế của JavaScript và giúp phát triển dự án có tính bảo trì cao hơn.

<b>2.7.2. Các đặc trưng </b>

- Kiểm tra kiểu tĩnh: Một trong những đặc điểm quan trọng nhất của TypeScript là khả năng kiểm tra kiểu tĩnh. TypeScript cho phép xác định kiểu dữ liệu cho biến, tham số, và giá trị trả về của hàm. Điều này giúp phát hiện lỗi kiểu và cung cấp cung cấp thơng tin hữu ích để phát triển và bảo trì mã nguồn.

- Hỗ trợ ES6+: TypeScript hỗ trợ các tính năng của ECMAScript 6 và các phiên bản tiếp theo. Bạn có thể sử dụng cú pháp mới như arrow functions, classes, modules, promises và template literals để phát triển ứng dụng hiện đại.

- Tính mở rộng: TypeScript cho phép bạn mở rộng các kiểu dữ liệu có sẵn và tạo ra các kiểu dữ liệu tùy chỉnh. Điều này giúp bạn mơ hình hóa các cấu trúc dữ liệu phức tạp và tạo ra mã nguồn dễ đọc và dễ bảo trì hơn.

- Tích hợp cơng cụ phát triển: TypeScript tích hợp tốt với các cơng cụ phát triển như trình biên dịch TypeScript (tsc), trình gỡ lỗi và trình thơng báo lỗi. Điều này giúp bạn phát triển và gỡ lỗi mã nguồn TypeScript một cách hiệu quả. - Hệ sinh thái mạnh mẽ: TypeScript có một hệ sinh thái mạnh mẽ với nhiều thư

viện, framework và công cụ phát triển hỗ trợ. Các thư viện phổ biến như React, Angular và Node.js đều hỗ trợ TypeScript, giúp bạn xây dựng các ứng dụng web, mobile và backend mạnh mẽ.

- Kiểm tra kiểu tĩnh: Kiểm tra kiểu tĩnh giúp phát hiện lỗi ngay từ quá trình phát triển, giảm thiểu lỗi trong quá trình chạy ứng dụng và cung cấp thơng tin hữu ích để gỡ lỗi.

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

- Mở rộng JavaScript: TypeScript là một phiên bản mở rộng của JavaScript, cho phép bạn sử dụng các tính năng mới trong ECMAScript và xây dựng ứng dụng hiện đại.

- Dễ bảo trì: TypeScript giúp tạo ra mã nguồn dễ đọc hơn và dễ bảo trì hơn nhờ các tính năng như kiểm tra kiểu tĩnh và mơ hình hóa dữ liệu.

- Hệ sinh thái mạnh mẽ: TypeScript có một hệ sinh thái phong phú với nhiều thư viện, framework và công cụ hỗ trợ. Bạn có thể tận dụng các thư viện và framework phổ biến như React, Angular, Vue.js, Nest.js và nhiều hơn nữa để xây dựng các ứng dụng web, mobile và backend.

- Cộng đồng và tài liệu: TypeScript có một cộng đồng lớn và nhiệt tình, với nhiều nguồn tài liệu, ví dụ như hướng dẫn, tài liệu chính thức, blog và video học. Điều này giúp bạn dễ dàng tìm kiếm thơng tin và giải quyết vấn đề trong q trình phát triển.

<b>2.8. PostgreSQL 2.8.1. Giới thiệu </b>

<i>Hình 2.7: Logo PostgreSQL </i>

PostgreSQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở và mạnh mẽ. Được phát triển từ nguồn gốc của Ingres vào những năm 1980, PostgreSQL đã trở thành một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất trên thế giới.

<b>2.8.2. Các đặc trưng </b>

- Mã nguồn mở: PostgreSQL là một phần mềm mã nguồn mở, điều này có nghĩa là có thể xem, sửa đổi và phân phối mã nguồn theo nhu cầu của bạn. Điều này mang lại sự linh hoạt và khả năng tùy chỉnh mạnh mẽ cho người dùng.

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

- Quản lý dữ liệu phong phú: PostgreSQL hỗ trợ nhiều kiểu dữ liệu khác nhau, bao gồm cả số nguyên, số thực, chuỗi ký tự, kiểu dữ liệu ngày tháng, kiểu dữ liệu địa lý và nhiều hơn nữa. Nó cung cấp các tính năng phong phú như khóa ngoại, giao dịch, chức năng và trình tự, giúp bạn quản lý dữ liệu một cách hiệu quả.

- Hiệu suất cao: PostgreSQL được tối ưu hóa để đạt hiệu suất cao, đồng thời hỗ trợ khả năng mở rộng dọc và ngang. Nó có thể xử lý các bộ dữ liệu lớn và tải cơng việc lớn mà vẫn duy trì tốc độ và độ tin cậy.

- Bảo mật mạnh mẽ: PostgreSQL cung cấp các tính năng bảo mật mạnh mẽ để bảo vệ dữ liệu của bạn. Nó hỗ trợ xác thực người dùng, kiểm soát truy cập dựa trên vai trị và quyền hạn, mã hóa dữ liệu và các tính năng khác để đảm bảo an ninh cao.

- Cộng đồng lớn và hỗ trợ: PostgreSQL có một cộng đồng rộng lớn với hàng ngàn người dùng và nhà phát triển trên toàn thế giới. Cộng đồng này cung cấp tài liệu phong phú, diễn đàn thảo luận, tài liệu hướng dẫn và hỗ trợ cho người dùng. Bạn có thể tìm thấy giải pháp cho các vấn đề cụ thể hoặc nhận sự hỗ trợ từ cộng đồng rất dễ dàng.

- Độ tin cậy và ổn định: PostgreSQL đã được thử nghiệm và sử dụng rộng rãi trong nhiều ứng dụng lớn và quy mô doanh nghiệp. Nó đã chứng tỏ được tính ổn định và độ tin cậy cao trong việc xử lý và quản lý dữ liệu.

- Khả năng mở rộng: PostgreSQL cho phép mở rộng dọc và ngang, cho phép bạn tăng cường khả năng xử lý và lưu trữ dữ liệu theo nhu cầu của bạn. Bạn có thể thêm các máy chủ, phân chia dữ liệu và tối ưu hóa hiệu suất mà không gặp nhiều rào cản.

- Bảo mật và tuân thủ chuẩn: PostgreSQL tuân thủ các chuẩn bảo mật và chuẩn SQL quốc tế, như ANSI SQL và ACID (Atomicity, Consistency, Isolation, Durability). Điều này đảm bảo rằng dữ liệu của bạn được bảo vệ và tuân thủ các quy tắc quan trọng về đồng nhất và bảo mật.

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

- Hỗ trợ đa nền tảng: PostgreSQL có sẵn trên nhiều nền tảng, bao gồm Windows, Linux, macOS và các hệ điều hành khác. Điều này cho phép bạn triển khai PostgreSQL trên hệ thống mà bạn đã sử dụng.

- Mô-đun mở rộng và tích hợp: PostgreSQL có một hệ sinh thái mô-đun mở rộng phong phú, cho phép bạn tăng cường tính năng của nó thơng qua các mơ-đun bổ sung. Bạn có thể sử dụng các mô-đun để thực hiện các tác vụ như truy vấn khơng gian địa lý, tìm kiếm văn bản đầy đủ, phân tích dữ liệu và nhiều hơn nữa.

<b>2.9. ASP.NET Core 7 API 2.9.1. Giới thiệu </b>

ASP.NET Core 7 API là một phần của framework mã nguồn mở ASP.NET Core, được sử dụng để xây dựng các dịch vụ và ứng dụng web API với .NET. Với ASP.NET Core 7 API, bạn có thể tạo ra các dịch vụ web API hiệu quả, linh hoạt và có khả năng mở rộng trên nhiều nền tảng, bao gồm Windows, Linux và macOS.

<b>2.9.2. Các đặc trưng </b>

- Hiệu suất tối ưu: ASP.NET Core 7 API cung cấp các cải tiến về hiệu suất, giúp tăng tốc độ xử lý và tải trang của ứng dụng API. Nó sử dụng các kỹ thuật tối ưu hóa để đảm bảo khả năng phản hồi nhanh chóng và xử lý đồng thời nhiều yêu cầu từ các client.

- Hỗ trợ RESTful: ASP.NET Core 7 API hỗ trợ việc phát triển các API theo kiến trúc RESTful. Bạn có thể dễ dàng tạo ra các endpoint cho các phương

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

thức HTTP như GET, POST, PUT và DELETE để thực hiện các hoạt động CRUD trên dữ liệu.

- Kiến trúc dịch vụ độc lập: Với ASP.NET Core 7 API, bạn có thể xây dựng các dịch vụ API độc lập, có khả năng triển khai riêng biệt trên các container Docker. Điều này cho phép bạn tách biệt và mở rộng các thành phần của ứng dụng một cách linh hoạt và dễ dàng.

- Cộng đồng và mã nguồn mở: ASP.NET Core 7 API là một phần của cộng đồng mã nguồn mở sôi động và được hỗ trợ bởi Microsoft. Cộng đồng đóng góp vào việc phát triển và cung cấp các thư viện, công cụ và tài liệu hữu ích. Bạn có thể tìm kiếm sự giúp đỡ và chia sẻ kinh nghiệm với cộng đồng thông qua các diễn đàn như Stack Overflow và Microsoft Q&A.

- Độ tin cậy và hỗ trợ từ Microsoft: ASP.NET Core là một sản phẩm của Microsoft, một công ty công nghệ hàng đầu thế giới. Việc được phát triển và hỗ trợ bởi Microsoft đảm bảo rằng ASP.NET Core 7 API sẽ được duy trì và cập nhật thường xuyên, bao gồm các bản vá lỗi và cải tiến tính năng mới. - Hiệu suất cao: ASP.NET Core 7 API được thiết kế để có hiệu suất cao. Nó sử

dụng mơ hình xử lý khơng đồng bộ và sự tối ưu hóa để đảm bảo khả năng phản hồi nhanh chóng và xử lý đồng thời nhiều yêu cầu từ các client. Điều này làm cho ứng dụng của bạn có thể xử lý lượng lớn yêu cầu một cách hiệu quả. - Hỗ trợ RESTful và phát triển API linh hoạt: ASP.NET Core 7 API hỗ trợ việc

phát triển các API theo kiến trúc RESTful, giúp bạn xây dựng các dịch vụ API dễ dàng và có cấu trúc. Nó cung cấp các tính năng như routing linh hoạt, phân tích và tạo JSON/XML, và hỗ trợ các phương thức HTTP như GET, POST, PUT và DELETE.

- Bảo mật mạnh mẽ: ASP.NET Core 7 API cung cấp các tính năng bảo mật tích hợp sẵn, bao gồm xác thực người dùng, phân quyền và bảo vệ chống tấn cơng. Nó hỗ trợ các giao thức xác thực như OAuth2 và JWT, cho phép bạn xác thực

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

và ủy quyền người dùng một cách an toàn.

- Đa nền tảng: ASP.NET Core 7 API cho phép bạn phát triển và triển khai trên nhiều nền tảng khác nhau, bao gồm Windows, Linux và macOS. Điều này cho phép bạn đáp ứng nhanh chóng với yêu cầu của người dùng trên các môi trường khác nhau và tận dụng các lợi ích của việc triển khai trên các container như Docker.

- Cộng đồng và mã nguồn mở: ASP.NET Core 7 API là một phần của cộng đồng mã nguồn mở sơi động. Điều này có nghĩa là bạn sẽ có sự hỗ trợ từ cộng đồng lập trình viên khắp nơi trên thế giới thơng qua các diễn đàn, trang web và tài liệu. Bạn có thể tìm kiếm giải pháp cho các vấn đề cụ thể, chia sẻ kinh nghiệm và học hỏi từ những người khác sử dụng ASP.NET Core.

<b>2.10. VnPay Sandbox 2.10.1. Giới thiệu </b>

<i>Hình 2.9: Logo VNPay </i>

VNPAY Sandbox là một môi trường thử nghiệm cho phép các nhà phát triển ứng dụng tích hợp và kiểm tra tính năng của VNPAY, một hệ thống thanh tốn điện tử hàng đầu tại Việt Nam. Được giới thiệu vào năm 2018, VNPAY Sandbox đã trở thành công cụ quan trọng trong quá trình phát triển và kiểm tra ứng dụng thanh toán của các nhà phát triển.

<b>2.10.2. Các đặc trưng </b>

- Môi trường thử nghiệm an tồn: VNPAY Sandbox cung cấp một mơi trường thử nghiệm an toàn và đáng tin cậy để các nhà phát triển kiểm tra tính năng và tích hợp thanh tốn của VNPAY mà khơng cần lo lắng về việc ảnh hưởng đến hệ thống thực tế. Điều này giúp giảm thiểu rủi ro và tăng tính đáng tin cậy của các ứng dụng thanh toán được phát triển.

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

- Tích hợp dễ dàng: VNPAY Sandbox cung cấp tài liệu và hướng dẫn chi tiết về cách tích hợp thanh tốn vào ứng dụng. Các nhà phát triển có thể sử dụng API (Application Programming Interface) của VNPAY để tương tác với hệ thống thanh tốn và kiểm tra tính năng như thanh tốn trực tuyến, thanh tốn hóa đơn, chuyển khoản, và nhiều tính năng khác.

- Đáng tin cậy và an toàn: VNPAY là một trong những hệ thống thanh toán hàng đầu tại Việt Nam với nhiều năm kinh nghiệm trong lĩnh vực thanh toán điện tử. VNPAY Sandbox được xây dựng dựa trên cơ sở hạ tầng đáng tin cậy của VNPAY, đảm bảo tính an tồn và bảo mật cho các giao dịch thanh tốn. - Dễ dàng tích hợp: VNPAY Sandbox cung cấp tài liệu và hướng dẫn chi tiết về

cách tích hợp thanh tốn vào ứng dụng. Việc tích hợp được thực hiện một cách dễ dàng và nhanh chóng, giúp các nhà phát triển tiết kiệm thời gian và cơng sức trong q trình phát triển ứng dụng thanh toán.

<i>Hình 2.10: Các bước thược hiện thanh toán online bằng VNPAY </i>

<b>2.11. Hệ thống gợi ý với lọc cộng tác 2.11.1. Giới thiệu: </b>

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

phân tích dữ liệu được sử dụng phổ biến trong lĩnh vực học máy và khai thác dữ liệu. Nó được sử dụng để dự đoán và tạo ra các gợi ý cá nhân dựa trên thông tin từ những người dùng tương tự. Hệ thống này xem xét lịch sử hoạt động của các người dùng để tìm kiếm sự tương đồng trong hành vi và sở thích, từ đó đề xuất những mục tiêu mà người dùng có thể quan tâm.

<i>Hình 2.11: Mô tả hệ thống gợi ý Collaborative Filtering </i>

- Không yêu cầu thông tin chi tiết: Không cần biết về chi tiết và đặc trưng của mục tiêu hoặc người dùng. Hệ thống chỉ cần phân tích mối quan hệ giữa người dùng và những mục tiêu để tạo ra gợi ý.

- Độc lập với nội dung: Không cần quan tâm đến nội dung của các mục tiêu. Hệ thống chỉ dựa vào thông tin về sự tương tác hoặc đánh giá của người dùng với các mục tiêu.

- Mở rộng và linh hoạt: Hệ thống hợp ý bằng lọc cộng tác có thể được áp dụng cho nhiều lĩnh vực và tài nguyên khác nhau, bao gồm các sản phẩm, bộ phim, âm nhạc, tin tức, và nhiều hơn nữa.

<b>2.11.3. Nhược điểm </b>

- Vấn đề lạm dụng thông tin phổ biến (Popularity Bias): Hệ thống hợp ý bằng lọc cộng tác có xu hướng gợi ý những mục tiêu phổ biến và phổ biến hơn những mục tiêu ít được tương tác. Điều này có thể làm giảm tính đa dạng và khám phá của gợi ý, vì người dùng có thể bị hạn chế trong việc khám phá

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

những mục tiêu mới và độc đáo.

- Vấn đề hiệu suất với số lượng lớn người dùng và mục tiêu (Scalability Issues): Khi số lượng người dùng và mục tiêu tăng lên, việc tính tốn sự tương đồng và tạo ra các gợi ý có thể trở nên phức tạp và tốn nhiều thời gian. Điều này có thể gây ra vấn đề về hiệu suất và làm giảm trải nghiệm người dùng. - Vấn đề xử lý dữ liệu thưa (Sparsity Issue): Ma trận đánh giá trong hệ thống

hợp ý bằng lọc cộng tác thường rất thưa, có nghĩa là có nhiều giá trị đánh giá bị thiếu. Điều này có thể làm cho việc tính tốn sự tương đồng và tạo ra các gợi ý trở nên khó khăn và khơng chính xác. Để giải quyết vấn đề này, cần áp dụng các kỹ thuật xử lý dữ liệu thưa như lấp đầy giá trị thiếu hoặc áp dụng phương pháp lọc cộng tác kết hợp với các phương pháp khác như lọc dựa trên nội dung.

<b>2.11.4. Các thuật toán được sử dụng </b>

- Lọc cộng tác dựa trên người dùng (User-based Collaborative Filtering): Thuật toán này dựa trên giả định rằng những người dùng có sự tương đồng trong hành vi và sở thích sẽ có xu hướng đánh giá những mục tiêu tương tự theo cách tương tự. Thuật toán này xác định sự tương đồng giữa các người dùng và sử dụng thông tin này để tạo ra các gợi ý dựa trên những gì những người dùng tương tự đã đánh giá cao.

- Lọc cộng tác dựa trên mục tiêu (Item-based Collaborative Filtering): Thuật toán này dựa trên giả định rằng những mục tiêu có người dùng tương tự sẽ có khả năng được đánh giá cao bởi người dùng hiện tại. Thuật toán này xác định sự tương đồng giữa các mục tiêu và sử dụng thông tin này để tạo ra các gợi ý dựa trên những mục tiêu tương tự.

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

hàng đại diện cho người dùng và cột đại diện cho các mục tiêu. Giá trị trong ma trận cho biết mức đánh giá hoặc sự tương tác của người dùng với mục tiêu tương ứng.

• Tính tốn sự tương đồng: Dựa trên ma trận đánh giá, tính tốn sự tương đồng giữa các người dùng hoặc các mục tiêu. Có nhiều phương pháp để đo lường sự tương đồng, bao gồm độ tương tự cosin và hệ số tương quan.

• Tạo ra các gợi ý: Dựa trên sự tương đồng đã tính tốn, tạo ra các gợi ý cho người dùng bằng cách lựa chọn những mục tiêu mà người dùng chưa tương tác mà có khả năng phù hợp với sở thích của họ.

<b>2.11.6. Thực tế triển khai </b>

<i>Hình 2.12: Danh sách các snar phẩm được gợi ý sau khi được train </i>

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

<b>CHƯƠNG 3: </b>

<b>PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG </b>

<b>3.1. Phân tích yêu cầu hệ thống 3.1.1. Xác định yêu cầu </b>

Yêu cầu đặt ra:

- Đăng ký, đăng nhập bằng tài khoản.

- Khách hàng có thể tìm kiếm sản phẩm phù hợp và nhanh chóng. - Khách hàng có thể thêm sản phẩm vào giỏ hàng và tạo đơn đặt hàng. - Khách hàng có thể thanh tốn qua vnpay

- Admin có thể quản lý tài khoản khách hàng - Admin có thể xem báo cáo thơng kê thu chi

Ứng dụng sử dụng tiếng Việt, hoạt động ổn định trên nền tảng website.

Để thu hút được người dùng hứng thú sử dụng, các thao tác trên ứng dụng phải thật đơn giản. Giao diện thân thiện, giúp khách hang và

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

người quản lý nhận thức được giá trị nhận lại khi sử dụng hệ thống.

<b>3.1.4. Mơ hình hóa các u cầu 3.1.4.1. Danh sách các Actors </b>

<i>Bảng 3.1: Danh sách các actors </i>

STT Tên Actor Ý nghĩa/Ghi chú

1 Khách hàng Người truy cập trang web để mua hàng 2 Quản trị viên

(Admin)

Quản lý danh mục, đơn hàng, xem thống kê thu chi

STT Actor Tên Use-case Chức năng UC_1 <sup>Khách hàng, </sup>

Admin Đăng nhập <sup>Cho phép admin, khách hàng đăng </sup>nhập vào trang web

UC_2 Khách hàng Xem sản phẩm Xem, thêm sản phẩm vào giỏ hàng UC_3 Khách hàng Tìm kiếm sản

phẩm

Tìm kiếm theo ký tự, theo thương hiệu, tag, danh mục sản phẩm

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

UC_5 Khách hàng Lọc sản phẩm Lọc theo danh mục, tên, màu, size, giá UC_6 Admin Quản lý danh

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

</div>

đồ án 2 xây dựng website bán quần áo tích hợp hệ thống gợi ý sản phẩm

<b>GIỚI THIỆU CHUNG </b>

<b>CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ </b>

<b>PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG </b>

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về