Đồ án: Xây dựng ứng dụng shop bán quần áo online và gợi ý sản phẩm

Tải báo cáo đồ án shop bán quần áo online bằng ReactJS & .NET Core API, tích hợp Machine Learning (ML) gợi ý sản phẩm và dự báo doanh thu.

• Tác giả: Nguyễn Duy Phúc
• Người hướng dẫn: Trần Anh Dũng
• Trường học: Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Ứng dụng Shop bán quần áo online hỗ trợ gợi ý và dự báo
• Loại tài liệu: Graduation project
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Shop Bán Quần Áo Online

Đồ án shop bán quần áo online là một ứng dụng thương mại điện tử hiện đại được phát triển bằng ReactJS và .NET Core. Đây là dự án học tập toàn diện nhằm giúp sinh viên nắm vững các công nghệ web development tiên tiến. Ứng dụng này cung cấp một nền tảng bán lẻ trực tuyến hoàn chỉnh với các tính năng quản lý sản phẩm, xử lý đơn hàng và trải nghiệm mua sắm tối ưu cho khách hàng. Shop quần áo online được thiết kế theo mô hình MVC (Model-View-Controller), đảm bảo cấu trúc code rõ ràng, dễ bảo trì và mở rộng trong tương lai.

1.1. Định nghĩa và Mục đích của Dự án

Dự án này nhằm tạo ra một ứng dụng shop online hoàn chỉnh có khả năng quản lý sản phẩm quần áo, xử lý giao dịch và cung cấp giao diện người dùng thân thiện. Mục đích chính là giúp sinh viên thực hành các kỹ năng phát triển web full-stack và hiểu rõ quy trình từ thiết kế đến triển khai ứng dụng thực tế. Hệ thống được xây dựng với SQL Server làm cơ sở dữ liệu chính, đảm bảo hiệu suất cao và an toàn dữ liệu.

1.2. Lý do Chọn Công nghệ ReactJS và .NET Core

ReactJS được chọn vì khả năng xây dựng giao diện người dùng động với hiệu suất cao và component tái sử dụng. .NET Core là framework backend mạnh mẽ, hỗ trợ RESTful API và có độ bảo mật tốt. Kết hợp hai công nghệ này tạo ra một ứng dụng shop online vô cùng hiệu quả, với khả năng xử lý lượng người dùng lớn và đảm bảo trải nghiệm mua sắm mượt mà cho khách hàng.

II. Kiến Trúc Hệ Thống và Công Nghệ Sử Dụng

Kiến trúc hệ thống của đồ án shop bán quần áo online được xây dựng dựa trên mô hình MVC kết hợp với RESTful API. Phía frontend sử dụng ReactJS để tạo interface tương tác, trong khi phía backend được phát triển bằng .NET Core để xử lý logic business và quản lý dữ liệu. Cơ sở dữ liệu SQL Server đảm bảo lưu trữ thông tin sản phẩm, đơn hàng và khách hàng một cách an toàn. Kiến trúc này cho phép tách biệt rõ ràng giữa lớp presentation, business logic và data access, giúp ứng dụng shop online dễ bảo trì và mở rộng.

2.1. Frontend Công nghệ ReactJS

ReactJS là thư viện JavaScript phổ biến cho việc xây dựng giao diện shop bán hàng online tương tác. Với JSX và Component, ReactJS cho phép phát triển UI một cách hiệu quả. Các component như danh sách sản phẩm, giỏ hàng, form thanh toán được xây dựng một cách module hóa, dễ tái sử dụng và bảo trì.

2.2. Backend Nền tảng .NET Core API

.NET Core cung cấp một nền tảng mạnh mẽ để phát triển RESTful API cho ứng dụng shop online. Hỗ trợ xác thực, phân quyền và xử lý các yêu cầu HTTP một cách hiệu quả. .NET Core API tích hợp với SQL Server để quản lý dữ liệu sản phẩm, người dùng và đơn hàng một cách an toàn và nhanh chóng.

III. Các Tính Năng Chính của Ứng Dụng

Ứng dụng shop bán quần áo online được trang bị nhiều tính năng quan trọng để phục vụ cả khách hàng và quản trị viên. Phía khách hàng có thể tìm kiếm sản phẩm, xem chi tiết, thêm vào giỏ hàng và thanh toán trực tuyến. Phía quản trị viên có quyền quản lý sản phẩm, thêm/sửa/xóa hàng, xem thống kê doanh thu. Shop quần áo online cũng được tích hợp Machine Learning để gợi ý sản phẩm phù hợp và dự báo doanh thu. Hệ thống xác thực bảo mật giúp bảo vệ thông tin người dùng và giao dịch.

3.1. Tính Năng cho Khách Hàng

Khách hàng có thể duyệt và tìm kiếm sản phẩm theo danh mục, thương hiệu, kích cỡ và giá. Tính năng xem chi tiết sản phẩm cung cấp hình ảnh, mô tả, đánh giá từ người dùng khác. Giỏ hàng cho phép cộng, trừ số lượng trước khi thanh toán. Hệ thống gợi ý sản phẩm dùng Machine Learning để đề xuất những mặt hàng phù hợp.

3.2. Tính Năng cho Quản Trị Viên

Quản lý sản phẩm bao gồm thêm, sửa, xóa hàng và quản lý kho. Quản lý người dùng theo dõi danh sách khách hàng, trạng thái tài khoản. Thống kê doanh thu hiển thị báo cáo bán hàng theo ngày, tháng, năm. Dự báo doanh thu sử dụng thuật toán SSA giúp quản trị viên lên kế hoạch kinh doanh hiệu quả.

IV. Ứng Dụng Machine Learning trong Shop Bán Hàng

Machine Learning được tích hợp vào đồ án shop bán quần áo online để cực ưu hóa trải nghiệm mua sắm. Hệ thống gợi ý sản phẩm sử dụng thuật toán Matrix Factorization để phân tích hành vi mua hàng của khách hàng và đề xuất những sản phẩm phù hợp. Dự báo doanh thu dùng Singular Spectrum Analysis (SSA) để phân tích xu hướng bán hàng theo thời gian. Những công nghệ này giúp ứng dụng shop online trở thành một nền tảng thông minh, có khả năng tự học từ dữ liệu người dùng để cải thiện liên tục.

4.1. Thuật toán Matrix Factorization cho Gợi Ý Sản Phẩm

Matrix Factorization phân rã ma trận đánh giá sản phẩm của khách hàng thành hai ma trận nhỏ hơn để tìm ra các mô hình ẩn. Thuật toán này giúp shop quần áo online dự đoán mức độ yêu thích của khách hàng đối với các sản phẩm chưa mua. Kết quả là hệ thống gợi ý trở nên chính xác hơn, tăng tỷ lệ chuyển đổi và doanh số bán hàng.

4.2. Thuật toán SSA cho Dự Báo Doanh Thu

Singular Spectrum Analysis (SSA) là phương pháp phân tích chuỗi thời gian mạnh mẽ. Nó phân rã dữ liệu doanh thu thành các thành phần xu hướng, mùa vụ và nhiễu để dự báo chính xác. Ứng dụng shop bán hàng online sử dụng dự báo doanh thu này giúp quản lý hàng tồn kho, lên kế hoạch khuyến mãi và dự toán tài chính.

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

Chương 1: GIỚI THIỆU CHUNG 1.1 Tổng quan đề tài - Tên ứng dụng: - Chủ đề chính: Xây dựng website bán quần áo - Nền tảng phát triển: Web - Mô hình phát triển: MVC - Tích hợp Machine Learning: ML.2 Lý do chọn đề tài Trong thời buổi công nghệ hóa hiện nay, việc mua bán qua các trang thương mại điện tử đang rất phổ biến tạo nên sự cạnh tranh khốc liệt giữa các cửa hàng kinh doanh bán quần áo. Vì thế các shop quần áo đều cần thiết phải có 1 trang web thương mại điện tử có đầy đủ chức năng cần thiết của riêng họ để tạo thêm sự tiện lợi cho các khách hàng cũng như cạnh tranh trong bối cảnh bây giờ. Trong đề tài này, chúng em không chỉ hứng thú với việc xây dựng 1 website chỉ để thực hiện các chức năng bán hàng chính mà còn xây dựng AI để thực hiện thuật toán đề xuất quần áo cho khách hàng và thuật toán dự báo doanh thu cho chủ shop.3 Đối tượng sử dụng − Những người có nhu cầu muốn mua các sản phẩm quần áo từ chủ shop − Chủ shop muốn kinh doanh qua trang web thương mại điện tử 1.4 Phạm vi nghiên cứu: Phạm vi môi trường: Ứng dụng Web Phạm vi chức năng: − Đối với Khách hàng + Tìm kiếm sản phẩm + Xem chi tiết sản phẩm + Chọn mua sản phẩm và đưa vào giỏ hàng 12 Báo cáo đồ án 2 + Đánh giá sản phẩm sau khi mua + Thanh toán giỏ hàng + Được đề xuất sản phẩm dựa trên sự ưa thích của bản thân với các khách hàng khác có sự ưa thích tương tự + Đăng nhập, đăng ký và các chức năng authentication khác − Đối với chủ shop: + Thêm xóa sửa sản phẩm + Xem doanh thu và được dự báo doanh thu + Xem tình trạng các đơn hàng Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Tìm hiểu về Reactjs Hình 2.1 Reactjs là gì? React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác.

React là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn 2.2 Giới thiệu về JSX JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: 13 Báo cáo đồ án 2 Ứng dụng shop bán hàng ● Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript.

Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. ● Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch.

Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. ● Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng 2.3 Giới thiệu về Components React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ.

Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn.

Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.4 Ưu và Nhược Ưu: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Prop là bất biến. Nhược: thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời render lại để cập nhật UI.2 Tìm hiểu về ASP.NET Core API Hình 2.NET Core API 2.1 Giới thiệu Khi nhắc đến .NET, chúng ta thường nghĩ đến Mã Nguồn đóng, Only Window, Build with Visual Studio.

Nhưng sau khi cho ra mắt ASP.NET CORE 1, Microsoft đã thay đổi hoàn toàn suy nghĩ của chúng ta với các điểm sau: • Open source Microsoft đã open source .NET và public trên github để thu hút các lập trình viên cũng như tận dụng sức mạnh của cộng đồng. • Xây dựng cho Windows, Mac, hoặc Linux • Visual Studio Code không còn gắn chặt với Visual studio, ASP.NET CORE bây giờ có thể viết với Visual studio code (free) trên cả Window, Linux và Mac.NET CORE là gì ASP.NET Core là một nền tảng mã nguồn mở, cross-platform framework cho việc xây dựng và kết nối các ứng dụng web hiện đại chẳng hạn như ứng dụng web, Internet of Thing, Mobile Backend - Web API ASP.NET Core cung cấp một kiến trúc để tối ưu hóa việc xây dựng các ứng dụng đám mây (microsoft azure) hoặc các ứng dụng độc lập. Bạn có thế phát triển ứng dụng ASP.NET Core đa nền tảng (Window, Mac, Linux), với mã nguồn mở tại Github.NET Core API ASP.NET Web API là một framework được cung cấp bởi Microsoft, giúp dễ dàng xây dựng API Web , tức là các dịch vụ dựa trên giao thức HTTP.NET Web API là 15 Báo cáo đồ án 2 Ứng dụng shop bán hàng một nền tảng lý tưởng để xây dựng các dịch vụ Restful. Các dịch vụ API Web này có thể được sử dụng bởi nhiều client khác nhau, chẳng hạn như: 1.

Trình duyệt 2. Ứng dụng di động 3. Ứng dụng máy tính để bàn 4.4 Các dịch vụ RESTful REST được giới thiệu lần đầu tiên vào năm 2000. REST thực sự là một mẫu kiến trúc được sử dụng cơ bản để tạo Web API, sử dụng HTTP làm phương thức giao tiếp.

Mẫu kiến trúc REST này chỉ định một tập hợp các ràng buộc và các ràng buộc đó mà một hệ thống nên tuân theo để được coi là một Dịch vụ đầy đủ. Sau đây là các ràng buộc REST. Client-Server Constraint (Ràng buộc máy khách - máy chủ) Ràng buộc này xác định rằng Máy khách gửi yêu cầu đến máy chủ và máy chủ sẽ gửi phản hồi lại cho máy khách. Sự tách biệt mối quan tâm này hỗ trợ sự phát triển độc lập của cả logic phía máy khách và logic phía máy chủ.

Stateless Constraint (Ràng buộc không trạng thái) Ràng buộc không trạng thái xác định rằng giao tiếp giữa máy khách và máy chủ phải không trạng thái giữa các yêu cầu. Điều đó có nghĩa là chúng ta không nên lưu trữ bất kỳ thông tin nào về máy khách trên máy chủ. Yêu cầu đến từ máy khách phải chứa tất cả các thông tin cần thiết cho máy chủ để xử lý yêu cầu đó sẽ đảm bảo rằng mỗi yêu cầu đến từ máy khách sẽ được máy chủ xử lý độc lập. Cacheable Constraint (Ràng buộc có thể lưu) Một số dữ liệu chủ được cung cấp bởi máy chủ như danh sách các quốc gia hoặc danh sách các thành phố hoặc danh sách của bộ phận trong công ty không thay đổi thường xuyên.

Ràng buộc có thể lưu trong bộ nhớ cho phép máy khách quyết định thời gian dữ liệu này tốt trong bao lâu để khách hàng không cần phải quay lại máy chủ nhiều lần cho cùng một dữ liệu. 16 Báo cáo đồ án 2 Uniform Interface (Giao diện thống nhất) Ràng buộc giao diện thống nhất định nghĩa một giao diện giữa máy khách và máy chủ. Để hiểu ràng buộc giao diện thống nhất, chúng ta cần hiểu tài nguyên là gì và các động từ HTTP - GET, PUT, POST và DELETE. Từ quan điểm API REST, các tài nguyên thường đại diện cho các thực thể dữ liệu như Sản phẩm, Sinh viên, Khách hàng, v.

Động từ HTTP như GET, POST, PUT và DELETE được gửi với mỗi yêu cầu từ máy khách cho API biết Làm gì với tài nguyên. Mỗi tài nguyên trong API REST được xác định bởi một URI duy nhất (Mã định danh tài nguyên đồng nhất). Bảng sau đây cho thấy một số yêu cầu điển hình mà bạn thấy trong API ● /Students nếu động từ GET, nó sẽ lấy danh sách sinh viên ● /Students/1 nếu động từ là GET sẽ lấy thông tin về sinh viên có id là 1 ● /Students nếu động từ là POST, nó sẽ tạo mới một sinh viên ● /Students/1 nếu động từ là PUT, nó sẽ cập nhật thông tin của sinh có id là 1 ● /Students/1 nếu động từ là DELETE, thì nó sẽ xóa một bản ghi trong đó id là 1. Một khái niệm khác có liên quan đến Giao diện thống nhất là HATEOAS - HATEOAS là viết tắt của Hypermedia as the Engine of Application State.

Điều này nói rằng trong mỗi yêu cầu có thể có một tập hợp các siêu liên kết sẽ cho bạn biết những hành động hoặc hoạt động khác mà bạn có thể thực hiện trên tài nguyên.5 Tại sao phải sử dụng ASP.NET WEB API? Ngày nay, một ứng dụng web không đủ hoặc không đủ để tiếp cận tất cả khách hàng của mình. Mọi người đang trở nên rất thông minh; họ đang sử dụng các loại thiết bị khác nhau như điện thoại di động, iPhone, máy tính bảng, v. trong cuộc sống hàng ngày. Các thiết bị này đang có rất nhiều ứng dụng giúp cuộc sống của họ trở nên dễ dàng.

Nói một cách đơn giản, chúng ta có thể nói rằng chúng ta đang hướng tới thế giới ứng dụng từ web. 17 Báo cáo đồ án 2 Ứng dụng shop bán hàng Vì vậy, nếu chúng tôi muốn hiển thị dữ liệu của mình (dữ liệu doanh nghiệp) cho các trình duyệt cũng như cho tất cả các ứng dụng thiết bị hiện đại này một cách nhanh chóng, an toàn và đơn giản, thì chúng tôi nên có một API tương thích với tất cả các trình duyệt những thiết bị hiện đại này.NET Web API là một framework tuyệt vời để xây dựng các dịch vụ HTTP có thể được sử dụng bởi nhiều khách hàng bao gồm trình duyệt, điện thoại di động, iPhone và máy tính bảng.3 Tìm hiểu về SQL Server Hình 2.1 Giới thiệu về Sql Server SQL Server chính là một hệ quản trị dữ liệu quan hệ sử dụng câu lệnh SQL để trao đổi dữ liệu giữa máy cài SQL Server và máy Client.