Xây dựng website bán giày trực tuyến ứng dụng ReactJS và trí tuệ nhân tạo
MỤC LỤC
ĐẦU 1.1. Lý do chọn đề tài
Trong thời đại số hóa và phát triển củ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 ước mơ 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 trong lĩnh vực công nghệ thông tin. Song song đó, việc xây dựng và quản lý một trang web bán giày không chỉ đòi hỏ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ực tuyến, và quản lý kinh doanh. Đồ á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ển web, 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ới như trí tuệ nhân tạo vào quá trình tối ưu hóa trải nghiệm mua sắm trực tuyến.
- 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ân thiệ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ụng vào thực tế, đáp ứng được nhu cầu của người dùng mua giày trực tuyến.
SỞ LÝ THUYẾT 2.1. Ngôn ngữ Javascript
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ác phầ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ười dù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. Nền tả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áp hoà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ộ. Redux Toolkit có thể không giải quyết mọi trường hợp sử dụng, nhưng với tinh thần của create-react-app, Redux Toolkit có thể cố gắng cung cấp một số công cụ tóm tắt quá 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ư bao gồ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ủa họ.
Ở MongoDB, các collection không theo bản chất cũ vì các document không tuân 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ĩa thành phần các cột trong một collection như trong cơ sở dữ liệu quan hệ.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1. Phân tích yêu cầu
Yêu cầu chức năng 1. Đăng ký
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àu sắc, kiểu dáng. Người dùng có thể thêm sản phẩm vào giỏ hàng để tiến hành thanh toán ngay hoặc thêm nhiều sản phẩm vào giỏ hàng và thanh toán cùng một lúc. Người dùng có thể tiến hành thanh toán một hoặc nhiều sản phẩm đã chọn trong phần giỏ hàng.
Chức năng này chỉ dành cho quản trị viên, có thể xem danh sách khách hàng, chỉnh sửa danh sách khách hàng. Chức năng này chỉ dành riêng cho phép xem thống kê doanh thu theo ngày, theo tháng, theo năm.
Yêu cầu phi chức năng
- 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ẻ. - Yê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ượng lớn dữ liệu, tránh xảy ra lỗi ngoại lệ. - Yêu cầu về tính tương thích: Website có thể chạy ổn định và tương thích với nhiều nền tảng trình duyệt khác nhau.
Sơ đồ use case
- Đặc tả use case
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. 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êm sản phẩm vào giỏ hàng. 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ụ.
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 đặt hàng, các sản phẩm trong đơn hàng đã đặt và hình thức thanh toán. 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ẩm khỏi hàng tồn kho của tiệm bánh và cập nhật trạ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ạng bán hàng, mức tồn kho và các số liệu kinh doanh khỏ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.
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ượng sản phẩm, ghi chú, thông tin khách hàng trong đơn đặt hà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ười dùng được nhắc nhập thông tin đăng nhập của họ. Sự kiện kích hoạt Chỉ người dùng đã đăng ký có thông tin đăng nhập hợp lệ mới có thể đăng nhập vào tài khoản của họ.
Mục tiêu Hệ thống phải có khả năng cập nhật thông tin tài khoản của người dùng một cách nhanh chóng và an toàn. Hậu điều kiện Người dùng có thể xem danh sách tất cả các đơn đặt hàng trước với chi tiết đơn đặt hàng, trạng thái và thông tin theo dừi (nếu cú). Sự kiện kích hoạt Quản trị viên tiến hành xem và cập nhật trạng thái đơn hàng, Mục tiêu Hệ thống phải cập nhật thông tin đơn hàng.
+ Nếu không có tài khoản người dùng, hệ thống sẽ hiển thị một thông báo cho biết rằng không có tài khoản nào để quản lý.
Thiết kế dữ liệu
- Chi tiết các bảng 1. Bảng “Product”
7 createdAt string Thời gian tạo đơn hàng 8 paymentTime string Thời gian thanh toán 9 payment_id string Mã phương thức thanh toán. 7 avatar string Link hình ảnh đại diện của user 8 addresses array Mảng các địa chỉ của user 9 isActive boolean Trạng thái của user. 3 code string Mã số permission 4 description string Mô tả về permission 5 isActive boolean Trạng thái của permission.
XÂY DỰNG ỨNG DỤNG 4.1. Danh sách màn hình
Chi tiết màn hình
- Header nằm ở trên cùng của website, chứa các thông tin cơ bản của website như slogan, hotline, tên website, logo,… Phần Shop Categories chứa danh sách các thương hiệu, khi người dùng nhấn vào tên thương hiệu sẽ chuyển đến trang hiển thị các sản phẩm hiện có của thương hiệu đó. Kế đến là thanh search sản phẩm và nút dẫn đến các trang Danh sách sản phẩm yêu thích, Profile, Giỏ hàng, Cửa hàng, Blogs và Liên hệ;. - Bên dưới Header là phần content giới thiệu, gồm có hình ảnh quảng bá sản phẩm mới, các điểm nổi bật của website, các thương hiệu hiện có và các dòng sản phẩm mới.
- Dưới cùng là phần Footer hiển thị các thông tin cơ bản của cửa hàng như địa chỉ, số điện thoại, email, các mạng xã hội và đường dẫn đến một số trang khác của website. Khách hàng có thể liên hệ trực tiếp với cửa hàng theo địa chỉ và vị trí định vị đính kèm gửi phản hồi online thông qua form hiển thị trên trang. Màn hình “Chi tiết sản phẩm” hiển thị các thông tin chi tiết của sản phẩm như hình ảnh, tên sản phẩm, giá tiền, đánh giá sản phẩm, phân loại sản phẩm, thương hiệu, mô tả sản phẩm.
Đồng thời, khách hàng có thể chọn size, màu sắc và số lượng để thêm sản phẩm vào giỏ hàng hoặc đánh giá sản phẩm và xem các sản phẩm khác tương tự. Màn hình “Đăng nhập” cho phép người dùng đăng nhập vào website thông qua email và password đã có để sử dụng được một số chức năng nhất định như mua hàng, thanh toán và đánh giá sản phẩm. Màn hình “Giỏ hàng” lưu trữ và hiển thị danh sách các sản phẩm mà người dùng đã thêm vào giỏ hàng với size, màu sắc và số lượng mà người dùng đã chọn.
Tại đây người dùng có thể nhấn vào nút Checkout để tiến hành thanh toán giỏ hàng hoặc nhấn vào nút Continue to shop để quay về trang “Cửa hàng” và tiếp tục mua sắm. Màn hình “Thống kê” hiển thị tổng doanh thu của cửa hàng, vẽ biểu đồ doanh thu theo từng giai đoạn và danh sách các đơn hàng của cửa hàng. Màn hình “Quản lý khách hàng” hiển thị danh sách tài khoản của các khách hàng đã đăng kí để sử dụng website với các thông tin cơ bản như họ tên, email, số điện thoại.
Mỗi sản phẩm mới cần nhập các thông tin về tên sản phẩm, mô tả, giá tiền, thương hiệu, phân loại, tag, màu sắc, size, số lượng và hình ảnh.
