Đồ án HCMUTE: Xây dựng website TMĐT với ASP.NET Core và ReactJS

Đồ án website TMĐT full-stack với ASP.NET Core và ReactJS. Hướng dẫn chi tiết, source code đầy đủ chức năng, phù hợp cho sinh viên và lập trình viên.

• Tác giả: Lê Khánh Vinh
• Người hướng dẫn: Ts. Lê Văn Vinh
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây dựng website thương mại điện tử sử dụng ASP.NET Core và React JS
• Loại tài liệu: khóa luận tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Tp. Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
• DANH SÁCH BẢNG BIỂU
• DANH SÁCH HÌNH
• PHẦN MỞ ĐẦU
• 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
• 2. MỤC ĐÍCH CỦA ĐỀ TÀI
• 3. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
• 4. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
• 1. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
• 1.1. Giới thiệu về ASP.NET Core
• 1.2. Xây dựng web api với ASP.NET Core
• 1.3. Giới thiệu về React JS
• 1.4. Cách hoạt động
• 1.5. ENTITY FRAMEWORK CORE
• 1.6. Giới thiệu Entity Framework Core
• 1.7. Giới thiệu Redux
• 2. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
• 2.1. KHẢO SÁT HIỆN TRẠNG
• 2.2. XÁC ĐỊNH YÊU CẦU
• 2.2.1. Yêu cầu chức năng
• 2.2.2. Yêu cầu phi chức năng
• 3. CHƯƠNG 3: THIẾT KẾ PHẦN MỀM
• 3.1. MÔ HÌNH HÓA YÊU CẦU
• 3.1.1. Lược đồ use case
• 3.1.2. Đặc tả use case
• 3.1.3. Lược đồ tuần tự
• 3.2. THIẾT KẾ CƠ SỞ DỮ LIỆU
• 3.2.1. Lược đồ cơ sở dữ liệu
• 3.2.2. Chi tiết bảng dữ liệu
• 3.3. THIẾT KẾ GIAO DIỆN
• 3.3.1. Giao diện người mua
• 3.3.2. Giao diện người bán
• 3.3.3. Giao diện người quản trị
• 3.3.4. Giao diện shipper
• 4. CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
• 4.1. Các công cụ sử dụng
• 4.2. Các công nghệ sử dụng
• 4.3. Các bước cài đặt
• 4.4. Kế hoạch kiểm thử
• 4.5. Kịch bản kiểm thử
• 4.6. Kết quả kiểm thử
• PHẦN KẾT LUẬN
• 1. KẾT QUẢ ĐẠT ĐƯỢC
• 2. NHƯỢC ĐIỂM
• 3. HƯỚNG PHÁT TRIỂN
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Đồ Án Website TMĐT ASP

Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, việc xây dựng một website TMĐT hiệu quả là vô cùng quan trọng. Đồ án này tập trung vào việc phát triển một nền tảng website thương mại điện tử sử dụng ASP.NET Core cho phần backend và ReactJS cho phần frontend. Sự kết hợp này mang lại hiệu năng cao, khả năng mở rộng tốt và trải nghiệm người dùng mượt mà. Dự án này không chỉ là một bài tập học thuật, mà còn là một nền tảng tiềm năng cho các doanh nghiệp muốn tham gia vào thị trường online store. Với sự hỗ trợ của Entity Framework Core, việc quản lý database website TMĐT trở nên dễ dàng và hiệu quả hơn. Theo tài liệu gốc, đồ án được thực hiện bởi sinh viên Lê Khánh Vinh và Nguyễn Hoàng Huy dưới sự hướng dẫn của TS. Lê Văn Vinh, cho thấy sự đầu tư nghiêm túc vào dự án này. Dự án này tập trung vào mô hình C2C (customer to customer), tối ưu chi phí cho cả người bán lẫn người mua.

1.1. Giới Thiệu Tổng Quan Về Nền Tảng ASP.NET Core

ASP.NET Core là một framework mã nguồn mở, đa nền tảng, hiệu suất cao, được sử dụng để xây dựng các ứng dụng web hiện đại, có khả năng kết nối đám mây và internet. Nó cho phép xây dựng các API ASP.NET Core mạnh mẽ, phục vụ cho các ứng dụng web, ứng dụng di động và các dịch vụ backend khác. ASP.NET Core là một bản thiết kế lại của ASP.NET, mang đến kiến trúc mô-đun gọn gàng hơn, dễ dàng quản lý và mở rộng. Ưu điểm nổi bật của ASP.NET Core là khả năng chạy trên nhiều hệ điều hành như Windows, Mac, Linux, hỗ trợ dependency injection và có cộng đồng phát triển lớn mạnh. Việc sử dụng Entity Framework Core giúp cho việc tương tác với cơ sở dữ liệu trở nên dễ dàng và hiệu quả hơn.

1.2. Vai Trò Của ReactJS Trong Xây Dựng Giao Diện Website TMĐT

ReactJS là một thư viện JavaScript mã nguồn mở, miễn phí, được sử dụng để xây dựng giao diện người dùng (UI) tương tác và nhanh chóng. Được duy trì bởi Meta (Facebook) và cộng đồng, ReactJS là một trong những thư viện phổ biến nhất để phát triển frontend. ReactJS sử dụng DOM ảo để tối ưu hóa hiệu năng, chỉ cập nhật những phần thay đổi trên giao diện, mang lại trải nghiệm mượt mà cho người dùng. Với React Router, việc điều hướng trang web trở nên dễ dàng và linh hoạt hơn. Redux được sử dụng để quản lý trạng thái (state) của ứng dụng, giúp cho việc phát triển các ứng dụng phức tạp trở nên dễ dàng hơn. ReactJS cho phép tạo các component tái sử dụng, giúp cho việc phát triển và bảo trì ứng dụng trở nên dễ dàng hơn.

1.3. Mối Quan Hệ Giữa Backend ASP.NET Core và Frontend ReactJS

Trong đồ án này, ASP.NET Core đóng vai trò là backend, cung cấp các API ASP.NET Core để xử lý các yêu cầu từ frontend. ReactJS đóng vai trò là frontend, hiển thị giao diện người dùng và tương tác với người dùng. Hai thành phần này giao tiếp với nhau thông qua các API. ASP.NET Core xử lý các yêu cầu từ ReactJS, truy vấn dữ liệu từ database website TMĐT thông qua Entity Framework Core, và trả về kết quả cho ReactJS để hiển thị. Sự phối hợp nhịp nhàng giữa backend và frontend là yếu tố then chốt để tạo ra một website TMĐT hiệu quả và thân thiện với người dùng. Authentication và Authorization được triển khai ở backend để bảo vệ các tài nguyên và chức năng quan trọng.

II. Thách Thức Yêu Cầu Khi Xây Dựng Website TMĐT C2C

Xây dựng một website thương mại điện tử theo mô hình C2C đặt ra nhiều thách thức. Một trong những thách thức lớn nhất là đảm bảo tính bảo mật và tin cậy cho các giao dịch. Việc tích hợp các payment gateway integration an toàn là vô cùng quan trọng. Ngoài ra, cần phải xây dựng một hệ thống quản lý sản phẩm hiệu quả, cho phép người bán dễ dàng đăng tải và quản lý sản phẩm của mình. Theo tài liệu gốc, đồ án hướng đến việc tạo ra một môi trường công bằng, cạnh tranh và an toàn, nơi người mua có thể tìm thấy sản phẩm với giá tốt và người bán có thể tự do buôn bán. Việc đáp ứng các yêu cầu phi chức năng như tốc độ, khả năng mở rộng và tính bảo trì cũng là một thách thức không nhỏ.

2.1. Đảm Bảo An Ninh và Tin Cậy Cho Giao Dịch Online

An ninh và tin cậy là yếu tố sống còn đối với bất kỳ website TMĐT nào. Việc bảo vệ thông tin cá nhân và thông tin thanh toán của người dùng là vô cùng quan trọng. Các biện pháp bảo mật như mã hóa dữ liệu, xác thực hai yếu tố và phòng chống tấn công SQL injection, Cross-Site Scripting (XSS) cần được triển khai. Việc tích hợp các payment gateway integration uy tín như PayPal, Stripe, VNPay giúp đảm bảo an toàn cho các giao dịch thanh toán trực tuyến. Ngoài ra, cần có một hệ thống giải quyết tranh chấp hiệu quả để xử lý các khiếu nại và tranh chấp giữa người mua và người bán.

2.2. Quản Lý Sản Phẩm Hiệu Quả Cho Người Bán Trên Sàn TMĐT

Một hệ thống quản lý sản phẩm hiệu quả là yếu tố then chốt để thu hút người bán tham gia vào nền tảng website TMĐT. Hệ thống cần cho phép người bán dễ dàng đăng tải sản phẩm, chỉnh sửa thông tin sản phẩm, quản lý kho hàng, và theo dõi đơn hàng. Việc hỗ trợ nhiều loại thuộc tính sản phẩm (ví dụ: kích thước, màu sắc, chất liệu) giúp người bán mô tả sản phẩm một cách chi tiết và chính xác. Việc tích hợp các công cụ hỗ trợ SEO giúp người bán tối ưu hóa sản phẩm của mình để tăng khả năng hiển thị trên công cụ tìm kiếm.

2.3. Tối Ưu Trải Nghiệm Người Dùng Trên Website Thương Mại Điện Tử

Trải nghiệm người dùng (UX) là yếu tố quan trọng để giữ chân khách hàng trên website TMĐT. Giao diện cần được thiết kế trực quan, dễ sử dụng, và thân thiện với người dùng. Tốc độ tải trang cần được tối ưu hóa để đảm bảo trải nghiệm mượt mà. Việc cung cấp các tính năng như tìm kiếm nâng cao, lọc sản phẩm, so sánh sản phẩm, đánh giá sản phẩm giúp người dùng dễ dàng tìm thấy sản phẩm mình cần. Ngoài ra, cần có một hệ thống hỗ trợ khách hàng hiệu quả để giải đáp thắc mắc và giải quyết vấn đề cho người dùng.

III. Phương Pháp Xây Dựng Backend API Với ASP

Việc xây dựng API ASP.NET Core mạnh mẽ và linh hoạt là nền tảng cho website TMĐT hoạt động hiệu quả. Các API này sẽ xử lý các yêu cầu từ frontend ReactJS, truy vấn dữ liệu từ database website TMĐT, và thực hiện các nghiệp vụ liên quan đến online store. Việc sử dụng Entity Framework Core giúp cho việc tương tác với cơ sở dữ liệu trở nên dễ dàng và hiệu quả hơn. Theo đề cương luận văn, việc sử dụng ASP.NET Core để triển khai phía server là một trong những nhiệm vụ quan trọng của đồ án.

3.1. Thiết Kế RESTful API Cho Các Chức Năng TMĐT Cơ Bản

Thiết kế RESTful API là một phương pháp phổ biến để xây dựng các API ASP.NET Core cho website TMĐT. Các API này cần tuân thủ các nguyên tắc của REST, sử dụng các phương thức HTTP (GET, POST, PUT, DELETE) để thực hiện các thao tác trên tài nguyên. Các API cần được thiết kế rõ ràng, dễ hiểu, và dễ sử dụng. Ví dụ, API để lấy danh sách sản phẩm có thể sử dụng phương thức GET, API để tạo mới sản phẩm có thể sử dụng phương thức POST, API để cập nhật sản phẩm có thể sử dụng phương thức PUT, và API để xóa sản phẩm có thể sử dụng phương thức DELETE.

3.2. Sử Dụng Entity Framework Core Để Tương Tác Cơ Sở Dữ Liệu

Entity Framework Core là một ORM (Object-Relational Mapping), cho phép tương tác với cơ sở dữ liệu thông qua các đối tượng .NET. Việc sử dụng Entity Framework Core giúp giảm thiểu việc viết các câu truy vấn SQL phức tạp, tăng tính bảo trì và khả năng mở rộng của ứng dụng. Entity Framework Core hỗ trợ nhiều loại cơ sở dữ liệu như SQL Server, MySQL, PostgreSQL, SQLite. Việc sử dụng code-first approach cho phép định nghĩa cấu trúc cơ sở dữ liệu thông qua các lớp .NET, giúp cho việc quản lý cơ sở dữ liệu trở nên dễ dàng hơn.

3.3. Triển Khai Xác Thực và Phân Quyền Với ASP.NET Core Identity

ASP.NET Core Identity là một hệ thống quản lý người dùng mạnh mẽ, được tích hợp sẵn trong ASP.NET Core. Nó cung cấp các chức năng như đăng ký, đăng nhập, đổi mật khẩu, xác thực hai yếu tố, và phân quyền. Việc sử dụng ASP.NET Core Identity giúp cho việc bảo vệ API ASP.NET Core trở nên dễ dàng hơn. Authentication (xác thực) được sử dụng để xác định danh tính của người dùng, Authorization (phân quyền) được sử dụng để kiểm soát quyền truy cập của người dùng vào các tài nguyên và chức năng khác nhau.

IV. Xây Dựng Frontend Website TMĐT Với ReactJS Redux

Frontend website TMĐT đóng vai trò quan trọng trong việc cung cấp trải nghiệm người dùng tốt. ReactJS cùng với Redux là lựa chọn phù hợp để xây dựng một giao diện người dùng động, linh hoạt và dễ bảo trì. Các component được thiết kế để tái sử dụng, giúp giảm thiểu việc viết code lặp đi lặp lại. Redux giúp quản lý trạng thái (state) của ứng dụng một cách hiệu quả, giúp cho việc phát triển các ứng dụng phức tạp trở nên dễ dàng hơn.

4.1. Thiết Kế Giao Diện Người Dùng UI Thân Thiện và Trực Quan

Giao diện người dùng cần được thiết kế thân thiện, trực quan và dễ sử dụng. Việc sử dụng các thư viện UI như Material UI, Ant Design giúp cho việc xây dựng giao diện trở nên nhanh chóng và dễ dàng hơn. Giao diện cần được tối ưu hóa cho nhiều loại thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động. Việc sử dụng responsive design giúp cho giao diện hiển thị tốt trên mọi loại thiết bị. Các element được thiết kế rõ ràng,dễ sử dụng và có hướng dẫn cụ thể.

4.2. Quản Lý Trạng Thái Ứng Dụng Với Redux Cho Website TMĐT

Redux là một thư viện quản lý trạng thái (state) phổ biến, được sử dụng rộng rãi trong các ứng dụng ReactJS. Redux giúp quản lý trạng thái của ứng dụng một cách tập trung, dễ dàng theo dõi và gỡ lỗi. Redux sử dụng các khái niệm như action, reducer, store để quản lý trạng thái của ứng dụng. Các action được sử dụng để thông báo cho Redux về việc có một sự thay đổi xảy ra. Các reducer được sử dụng để cập nhật trạng thái của ứng dụng dựa trên các action. Store là nơi lưu trữ trạng thái của ứng dụng.

4.3. Tối Ưu Hiệu Năng Frontend Với Code Splitting và Lazy Loading

Hiệu năng frontend là yếu tố quan trọng để cung cấp trải nghiệm người dùng tốt. Việc sử dụng code splitting và lazy loading giúp giảm thiểu thời gian tải trang ban đầu. Code splitting chia ứng dụng thành nhiều phần nhỏ, chỉ tải những phần cần thiết khi người dùng truy cập vào trang web. Lazy loading chỉ tải những component khi chúng được hiển thị trên màn hình. Việc sử dụng các kỹ thuật tối ưu hóa hình ảnh cũng giúp giảm thiểu thời gian tải trang.

V. Ứng Dụng Thực Tế Kết Quả Đồ Án Website TMĐT

Đồ án này không chỉ dừng lại ở lý thuyết mà còn tập trung vào ứng dụng thực tế. Việc xây dựng một eCommerce project hoàn chỉnh, từ backend đến frontend, giúp sinh viên có được kinh nghiệm thực tế trong việc phát triển phần mềm. Theo phiếu nhận xét của giáo viên hướng dẫn, đồ án đáp ứng được yêu cầu về nội dung và khối lượng thực hiện. Kết quả của đồ án là một website TMĐT hoạt động ổn định, đáp ứng được các yêu cầu chức năng và phi chức năng cơ bản.

5.1. Các Chức Năng Chính Đã Triển Khai Trong Dự Án eCommerce

Dự án đã triển khai các chức năng chính của một website TMĐT, bao gồm: đăng ký, đăng nhập, tìm kiếm sản phẩm, xem chi tiết sản phẩm, thêm sản phẩm vào giỏ hàng, đặt hàng, thanh toán, quản lý đơn hàng, đánh giá sản phẩm, quản lý sản phẩm (cho người bán), quản lý danh mục sản phẩm (cho admin), quản lý người dùng (cho admin). Các chức năng này được triển khai bằng cách sử dụng ASP.NET Core cho backend và ReactJS cho frontend.

5.2. Phân Tích Hiệu Năng và Khả Năng Mở Rộng Của Hệ Thống

Hiệu năng và khả năng mở rộng là yếu tố quan trọng để đảm bảo website TMĐT có thể đáp ứng được nhu cầu của người dùng. Các kỹ thuật tối ưu hóa hiệu năng như caching, code splitting, lazy loading đã được sử dụng để cải thiện tốc độ tải trang. Hệ thống được thiết kế để có khả năng mở rộng dễ dàng, có thể thêm máy chủ để xử lý lượng truy cập lớn hơn. Việc sử dụng database được thiết kế tốt cũng giúp cho việc mở rộng hệ thống trở nên dễ dàng hơn.

5.3. Đánh Giá Ưu Điểm và Hạn Chế Của Giải Pháp Công Nghệ Đã Chọn

Việc sử dụng ASP.NET Core và ReactJS mang lại nhiều ưu điểm cho dự án, bao gồm: hiệu năng cao, khả năng mở rộng tốt, trải nghiệm người dùng mượt mà, và cộng đồng phát triển lớn mạnh. Tuy nhiên, cũng có một số hạn chế, bao gồm: yêu cầu kiến thức chuyên sâu về ASP.NET Core, ReactJS, và Redux, và thời gian phát triển có thể kéo dài hơn so với việc sử dụng các framework khác.

VI. Kết Luận Hướng Phát Triển Đồ Án Website TMĐT

Đồ án website TMĐT sử dụng ASP.NET Core và ReactJS đã đạt được những kết quả đáng khích lệ. Hệ thống hoạt động ổn định, đáp ứng được các yêu cầu chức năng và phi chức năng cơ bản. Tuy nhiên, vẫn còn nhiều hướng phát triển để cải thiện hệ thống, bao gồm: thêm các chức năng mới, cải thiện hiệu năng, và tăng cường tính bảo mật. Việc deployment hệ thống lên môi trường thực tế cũng là một bước quan trọng để đưa sản phẩm đến với người dùng.

6.1. Tổng Kết Những Bài Học Kinh Nghiệm Từ Quá Trình Thực Hiện Đồ Án

Quá trình thực hiện đồ án đã mang lại nhiều bài học kinh nghiệm quý báu, bao gồm: tầm quan trọng của việc lập kế hoạch, thiết kế hệ thống, và kiểm thử phần mềm. Việc làm việc nhóm cũng là một kỹ năng quan trọng để thành công trong dự án. Việc đối mặt với các khó khăn và thách thức giúp sinh viên trưởng thành hơn về mặt chuyên môn.

6.2. Đề Xuất Các Hướng Phát Triển Mở Rộng Cho Dự Án Trong Tương Lai

Có nhiều hướng phát triển mở rộng cho dự án trong tương lai, bao gồm: tích hợp các payment gateway integration khác nhau, thêm các chức năng như quản lý khuyến mãi, quản lý khách hàng thân thiết, và tích hợp các công cụ phân tích dữ liệu. Việc sử dụng các công nghệ mới như AI (Artificial Intelligence) và Machine Learning cũng có thể giúp cải thiện trải nghiệm người dùng và tăng doanh thu.

6.3. Nhận Định Về Tiềm Năng Phát Triển Của Website TMĐT

Thị trường thương mại điện tử đang phát triển mạnh mẽ, mang lại nhiều cơ hội cho các doanh nghiệp. Việc xây dựng một website TMĐT hiệu quả là một bước quan trọng để thành công trong thị trường này. Việc sử dụng các công nghệ hiện đại như ASP.NET Core và ReactJS giúp cho việc xây dựng và bảo trì website TMĐT trở nên dễ dàng hơn.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Giới thiệu về ASP.NET Core ASP.NET Core là một framework đa nền tảng, hiệu suất cao và mã nguồn mở để xây dựng các ứng dụng hiện đại, có khả năng kết nối đám mây, kết nối internet.NET Core, chúng ta có thể xây dựng các ứng dụng và dịch vụ web, ứng dụng internet vạn vật và phía máy chủ cho ứng dụng di động. [1] Hàng triệu lập trình viên đang hoặc đã sử dụng ASP.x để tạo ứng dụng web.NET Core là bản thiết kế lại của ASP.x, bao gồm những thay đổi về kiến trúc dẫn đến một khung mô-đun gọn gàng hơn. Các tính năng Các tính năng chính của ASP.NET Core: - Quá trình biên dịch diễn ra liên tục, lập trình viên không cần phải gọi lệnh biên dịch lại.

- Các module được phân phối dưới dạng các Nuget packages. - Xây dựng và chạy các ứng dụng ASP.NET Core đa nền tảng trên các hệ điều hành: Windows, Mac, Linux - Mã nguồn mở. - Các hỗ trợ cho dependency injection được xây dựng sẵn. Xây dựng web api với ASP.NET Core API là viết tắt của Application Programming Interface.

Nó là một tác nhân phần mềm trung gian cho phép hai hoặc nhiều ứng dụng tương tác với nhau.NET Core hỗ trợ tạo các dịch vụ RESTful, còn được gọi là API web. Để xử lý các request, web API sử dụng các controllers. Controller trong API web là các lớp bắt nguồn từ ControllerBase. Ưu điểm 16 Các ưu điểm nổi bật của ASP.NET Core: - ASP.NET Core là một web framework nhẹ và nhanh.

- Tích hợp dễ dàng với các framework ở phía client như react, angular - Là một framework mã nguồn mở và tập trung vào cộng đồng. Giới thiệu về React JS React JS là một thư viện JavaScript mã nguồn mở và miễn phí để xây dựng giao diện người dùng nhanh và có tính tương tác dựa trên các components. Nó được duy trì bởi Meta (trước đây là Facebook) và cộng đồng các lập trình viên. React hiện tại là thư viện Javascript phổ biến nhất dùng để xây dựng giao diện người dùng.

React có thể được sử dụng để phát triển các ứng dụng trang đơn (single page application) hoặc di động. Tuy nhiên, React chỉ quan tâm đến việc quản lý trạng thái (state) và hiển thị trạng thái đó lên DOM, vì vậy việc tạo ứng dụng React thường yêu cầu sử dụng các thư viện bổ sung. Các tính năng Component: Mã nguồn React được tạo thành từ nhiều thành phần được gọi là component, component được hiển thị cho một phần tử cụ thể ở trên DOM bằng cách sử dụng thư viện React DOM. Có 2 cách để khởi tạo một component trong react: Thông qua class-component hoặc functional-component.

DOM ảo: React tạo ra một bộ dữ liệu có cấu trúc trong bộ nhớ, tính toán sự khác biệt giữa các DOM ảo và sau đó cập nhật một phần DOM thật dựa trên sự khác biệt đó. Nó như thể cho phép biểu diễn lại cả trang mỗi khi có thay đổi dữ liệu nhưng thực tế React chỉ cập nhật lại các component có sự thay đổi. Điều này làm cho ứng dụng React có hiệu suất cao Lifecycle methods: Cho phép thực thi các lệnh tại các thời điểm nhất định trong vòng đời của một component. ComponentDidMount được gọi khi component đã "gắn kết" (component đã được chèn vào DOM).

ComponentDidUpdate được gọi khi dữ liệu 17 của một component thay đổi. ComponentWillUnmount được gọi khi component bị xóa khỏi DOM. JSX: JavaScript XML, là một phần mở rộng cho cú pháp ngôn ngữ JavaScript. Có bề ngoài tương tự như HTML.

Các component thường được viết bằng JSX, mặc dù chúng không nhất thiết phải như vậy (các component cũng có thể được viết bằng JavaScript thuần). Hooks: Hooks là một tính năng mới ra đời trong bản cập nhật React 16. Hooks giúp xây dựng functional-component với tất cả những tính năng của class-component như sử dụng state, lifecycle methods. Hooks không thể sử dụng trong class-component.

Cách hoạt động Mọi ứng dụng React đều chứa ít nhất một component, được gọi là component gốc, đại diện cho toàn bộ ứng dụng và chứa các component con. Mỗi component thường chứa một số state - là dữ liệu của component và hàm render để sinh ra giao diện của component. Đầu ra của hàm render là một React element – một đối tượng javascript thuần – tương ứng với một DOM element, nó giống như một đại diện của DOM được lưu trong bộ nhớ. React lưu giữ những đại diện như vậy trong bộ nhớ, gọi là DOM ảo.

Mỗi khi có sự thay đổi ở dữ liệu trong một component (thay đổi state, props), một React element mới được tạo ra, React sẽ so sánh sự thay đổi của element mới này so với phiên bản cũ của nó, phát hiện được những gì thay đổi, tiếp đó cập nhật một phần của DOM thật dựa trên sự thay đổi đó để đồng bộ với DOM ảo. Ưu điểm Các ưu điểm chính của React JS: - Dễ bảo trì và quản lý: Việc phân chia ra thành các component giúp cho code react trở nên gọn gàng, có cấu trúc nên dễ dàng quản lý. - Hiệu suất cao: Việc sử dụng DOM ảo giúp react tiết kiệm được tài nguyên và đạt hiệu suất cao. - Dễ kiểm thử: React có tiện ích trên chrome dev tool giúp việc debug ứng dụng trở nên dễ dàng hơn.

18 - React chỉ là một thư viện, nên khi thiết kế giao diện, ta có thể tự do sử dụng các thư viện hỗ trợ gọi http service, routing khác tự do theo ý thích mà không bị bó buộc. ENTITY FRAMEWORK CORE 3. Giới thiệu Entity Framework Core Entity framework core là một phiên bản nhẹ, có tính mở rộng, có mã nguồn mở và hỗ trợ đa nền tảng, kế thừa từ công nghệ Entity framework khá phổ biến. Entity framework core là một trình ánh xạ đối tượng quan hệ, cho phép truy xuất tới cơ sở dữ liệu thông qua các đối tượng trong .NET, nó cũng cung cấp hầu như tất cả các câu truy vấn dữ liệu thường được viết.

Các tính năng Entity framework core cung cấp các tính năng chính sau: - Ánh xạ các lớp .NET sang các bảng dữ liệu dưới cơ sở dữ liệu thông qua cách tiếp cận code-first. - Hỗ trợ các câu truy vấn, sửa đổi dữ liệu dưới cơ sở dữ liệu theo dạng các hàm mở rộng. - Theo dõi dự thay đổi cấu trúc của cơ sở dữ liệu. - Hỗ trợ đa nền tảng.

Ưu điểm Entity framework core sở hữu những ưu điểm nổi bật sau: - Giúp tiết kiệm thời gian và nguồn lực phát triển ứng dụng. - Làm cho việc kết nối với cơ sở dữ liệu và viết câu truy vấn dễ dàng hơn. - Hiệu suất cao. Giới thiệu Redux 19 Redux là một thư viện quản lý trạng thái phục vụ cho ứng dụng javascript.

Chúng ta có thể sử dụng redux với các thư viện, framework giao diện như react, angular, vue hoặc javascript thuần. Redux có kích thước nhỏ gọn (chỉ khoảng 2Kb) nhưng chứa một hệ sinh thái bổ trợ rất lớn. Các nguyên tắc Redux có 3 nguyên tắc chính, bao gồm: - Nguồn duy nhất: Các trạng thái của ứng dụng sẽ được lưu trữ trong một đối tượng duy nhất, điều này giúp cho trạng thái ở các phần khác nhau của ứng dụng sẽ được đồng bộ với nhau, giúp ứng dụng dễ dàng được kiểm thử. - Trạng thái chỉ được đọc: Các trạng thái sẽ không thể bị chính sửa trực tiếp, cách duy nhất để thay đổi trạng thái là gửi đi một hành động cụ thể, vì vậy mà các thay đổi của trạng thái sẽ được diễn ra theo một trình tự nghiêm ngặt, vì vậy mà các thay đổi đó có thể được ghi nhận, lưu trữ và phát lại.

- Những thay đổi về trạng thái được thực hiện bởi những hàm thuần tùy: Các reducer là những hàm thuần túy chỉ nhận vào trạng thái cũ và hành động và trả ra trạng thái mới. Bởi vì các reducer chỉ là hàm nên ta dễ dàng kiểm soát thứ tự được gọi của chúng. Ưu điểm Redux sở hữu những ưu điểm: - Các trạng thái giữa các thành phần được chuyển đổi ổn định và dễ dàng. - Tích hợp dễ dàng với React do có cùng cấu trúc Flux.

- Dễ dàng bảo trì: Cách tổ chức cấu trúc mã của redux khiến cho ứng dụng viết bằng redux dễ bảo trì - Dễ kiểm thử: Ứng dụng viết bằng redux được hỗ trợ công cụ Redux dev tool rất mạnh mẽ, có thể xem các hành động được thực hiện, trình chiếu lại các hành động đó tại một thời điểm bất kỳ. 20 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 1. KHẢO SÁT HIỆN TRẠNG Qua tìm hiểu về nhu cầu sử dụng các trang web thương mại điện tử để mua sắm, nhóm đã lựa chọn ra 5 trang web thương mại điện tử mà theo nhóm là phổ biến nhất ở Việt Nam để khảo sát bao gồm các trang web: shopee.vn Hình 1: Trang Chủ Shopee [6] Thành lập vào năm 2015, tuy ra đời muộn nhưng Shopee lại nhanh chóng giành được ưu thế và tầm ảnh hưởng, vươn lên trở thành Sàn thương mại điện tử HOT nhất chỉ sau 3 năm hoạt động. Theo công bố của Shopee, số lượng shop đã đạt 800.000 shop và hơn 158,8 triệu đơn đặt hàng trong quý 3/2018.

Ưu điểm: - Số lượng khách hàng tiềm năng lớn, chủ yếu ở lứa tuổi trẻ, dễ dàng thích hợp với xu hướng mới. - Mở gian hàng cực nhanh bằng số điện thoại và email. Miễn phí mở gian hàng và phí hoa hồng kinh doanh hiện tại là 2.2% với shop thông thường. - Nhiều chính sách khuyến mãi, ưu đãi dành cho chủ shop và khách mua hàng.

21 Nhược điểm: - Khó bán hàng vì mức độ cạnh tranh cao hơn các sàn TMĐT khác. - Tình trạng hàng kém chất lượng vẫn tràn lan, hạ thấp uy tín của shop bán hàng chính hãng.vn Hình 2: Trang chủ tiki [7] Thành lập 2010, từ một website bán sách, Tiki đã phát triển trở thành một trong những website thương mại điện tử đa ngành được yêu thích tại Việt Nam. Ưu điểm: - Niềm tin mua sắm của khách hàng đặt ở sàn rất cao. Do chính sách kiểm duyệt nhà bán hàng khắt khe, hàng hóa Tiki chất lượng đảm bảo hơn.

Cam kết 100% hàng chính hãng nên không lo bị “xếp chung” với các shop bán hàng kém chất lượng giá rẻ khác. - Tỉ lệ hàng hoàn, hàng đổi trả rất thấp (theo báo cáo của Tiki là 1%). Nhược điểm: - Yêu cầu khắt khe khi mở shop: Phải có giấy tờ chứng minh là doanh nghiệp được nhà nước cấp phép hoạt động. 22 - Ngành hàng còn ít và chưa có sự đa dạng như Shopee, Lazada.

- Tốn phí cố định và phí hoa hồng khi kinh doanh online.