Xây dựng hệ thống mua sắm trực tuyến bằng công nghệ React JS và MongoDB
MỤC LỤC
Những vấn đề mà đề tài tập trung
- Cung cấp cho phía khách hàng một nền tảng để đặt hàng và truy cập thông tin về sản phẩm và dịch vụ của cửa hàng, tăng hiệu suất và giảm thời gian chờ cho khách khi đặt hàng. - Giỳp doanh nghiệp quản lý tốt hơn về kho hàng, theo dừi dữ liệu bỏn hàng và khách hàng, và thực hiện quyết định thông minh về chiến lược sản xuất và tiếp thị. Cung cấp dữ liệu quan trọng về sở thích và xu hướng của khách hàng cho doanh nghiệp.
Mô hình Client-Server [2]
Người dùng có thể tăng được số lượng tài nguyên của mình bất cứ lúc nào. Tóm lại, mô hình client-server có nhiều ưu điểm và cũng nhiều nhước điểm.
React JS
Mỗi component đều có thể chứa logic và state riêng, giúp dễ dàng tái sử dụng và bảo trì. Khi một component thay đổi, thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần thực sự cần thay đổi, giúp tăng tốc độ và hiệu suất của ứng dụng. Với JSX, bạn có thể viết HTML trong JavaScript một cách mạch lạc và tự nhiên.
Điều này có nghĩa là các nhà phát triển cần phải tìm hiểu và tích hợp các công cụ và thư viện bổ sung (như Redux để quản lý trạng thái, Router để điều hướng, v.v.) để xây dựng ứng dụng đầy đủ.
Next JS
SSR đặc biệt hữu ích cho các trang web có nội dung động và cần được tối ưu hóa cho các công cụ tìm kiếm. Các tính năng như SSR và SSG mặc dù hữu ích cho các dự án lớn, nhưng có thể không cần thiết và thậm chí làm chậm tiến độ phát triển cho các dự án nhỏ.
Node JS
Do sử dụng mô hình non-blocking và sự kiện-driven, Node.js hiệu quả hơn trong việc xử lý các tác vụ I/O-bound hơn là CPU- bound. Ví dụ, nó có thể không phù hợp cho các ứng dụng cần xử lý lượng lớn dữ liệu phức tạp trên máy chủ.
MongoDB
Cần phải lập kế hoạch cẩn thận cho chiến lược backup và recovery để đảm bảo an toàn dữ liệu.
Tailwind CSS
Tailwind CSS cho phép bạn tùy chỉnh cấu hình để phù hợp với yêu cầu thiết kế của dự án, bao gồm màu sắc, font, kích thước biên (margin) và padding, v.v.
Phương pháp thực hiện
- Hiện trạng tổ chức: Các bên sử dụng gồm khách hàng và nhân viên doanh nghiệp. - Hiện trạng nghiệp vụ: Quy trình đặt hàng: Tiếp nhận khách hàng, tiếp nhận thông tin đặt hàng, số lượng sản phẩm, ghi thông tin khách hàng, thanh toán và xuất hóa đơn.
Xác định và mô hình hóa yêu cầu 1. Xác định yêu cầu
Về tính hiệu quả
1 Hiển thị sản phẩm Thực hiện yêu cầu hiệu quả, chính xác và nhanh chóng. 10 Liên lạc qua chatbox Thực hiện yêu cầu hiệu quả, chính xác và nhanh chóng. 11 Theo dừi đơn hàng Thực hiện yờu cầu hiệu quả, chớnh xác và nhanh chóng.
Về tính tiện dụng
5 Đánh giá và nhận xét Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu. 6 Khuyến mãi và giảm giá Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu 7 Quản lý sản phẩm Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu 8 Quản lý danh mục. 11 Theo dừi đơn hàng Xem hướng dẫn sử dụng Thực hiện đỳng yờu cầu 12 Phân quyền Xem hướng dẫn sử dụng Thực hiện đúng yêu cầu.
Mô hình hóa yêu cầu
Hệ thống sẽ điều hướng đến màn hình quản lý tài khoản, người dùng chọn button “Thay đổi mật khẩu” bên thanh sidebar bên trái màn hình. Dệscriptiốn Chố phệ9p ngựợ*i dũ*ng tì*m kiệ(m sáGn pháIm, lốc sáGn pháIm, xệm chi tiệ(t thố;ng tin sáGn pháIm vá* thệ;m sáGn pháIm má*. ngựợ*i dũ*ng đáng xệm vá*ố giốG há*ng. nhá* điệ7ũ há*nh, qũáGn tri việ;n) Prệ-Cốnditiốn(s) Khố;ng. Dệscriptiốn Chố phệ9p ngựợ*i dũ*ng thệ;m, xệm vá* xố9á nhự&ng sáGn pháIm yệ;ũ thì9ch trống mố;t dánh sá9ch riệ;ng đệI tiệ;n thệố dố&i hợn.
Hệ thống sẽ điều hướng đến màn hình danh sách đơn hàng, người dùng có thể chọn các tab phía trên danh sách đơn hàng trong màn hình để lọc đơn hàng theo các thông tin như: tất cả, đã thanh toán, chưa thanh toán, đang được xử lý, đang giao hàng, đã hoàn thành,. Khi đơn hàng được người quản lý cập nhập hệ thống sẽ tự động gửi email thông báo đến email người dùng đã đăng ký tài khoản. Người dùng bấm vào button “Thêm địa chỉ” ở trên màn hình, hệ thống sẽ hiển thị danh sách các input để người dùng điền các thông tin vào như: địa chỉ, thành phố, tỉnh, mã bưu chính, quốc gia,….
Người quản lý điền các thông tin như: mã giảm giá, phần trăm giảm giá, ngày bắt đầu, ngày hết hạn vào các input tương ứng hiển thị trên màn hình và bấm button “Thêm Mã Giảm Giá” để thêm mã giảm giá. Hệ thống sẽ hiện thị những input chứa thông tin của mã giảm giá người quản lý vừa chọn, người quản lý sửa những thông tin cần sửa trong những input và bấm vào button “Xác Nhận” để cập nhập mã giảm giá. Hệ thống truy xuất vào database tiến hành sửa mã giảm giá người quản lý chọn theo những thông tin vừa nhập và cập nhập lại danh sách mã giảm giá.
Người quản lý điền tên danh mục vào input tương ứng hiển thị trên màn hình và bấm button “Thêm Danh Mục” để thêm danh mục. Hệ thống sẽ hiện thị những input chứa thông tin của danh mục người quản lý vừa chọn, người quản lý sửa những thông tin cần sửa trong những input và bấm vào button “Xác Nhận” để cập nhập danh mục. Hệ thống truy xuất vào database tiến hành sửa danh mục người quản lý chọn theo những thông tin vừa nhập và cập nhập lại danh sách danh mục.
Người quản lý điền tên danh mục phụ vào input tương ứng hiển thị trên màn hình, chọn danh mục cha cho danh mục phụ và bấm button “Thêm Danh Mục Phụ” để thêm danh mục phụ. Người quản lý điền các thông tin như: các hình ảnh, màu sắc, hình đại diện màu sắc, tên, danh mục, danh mục phụ, kích thước, số lượng, giá, … vào các input tương ứng hiển thị trên màn hình và bấm button “Tạo Sản Phẩm” để thêm sản phẩm vào cửa hàng. Hệ thống sẽ hiện thị những input chứa thông tin của sản phẩm người quản lý vừa chọn, người quản lý sửa những thông tin cần sửa trong những input và bấm vào button “Xác Nhận” để cập nhập sản phẩm.
Hệ thống truy xuất vào database tiến hành sửa sản phẩm người quản lý chọn theo những thông tin vừa nhập và cập nhập lại danh sách sản phẩm. Tại màn hình quản lý đơn hàng bấm vào icon “mũi tên” để hiện thị chi tiết đơn hàng tương ứng trong danh sách đơn hàng.
Danh sách các màn hình
Màn hình Đăng nhập và đăng ký
Má*n hì*nh đáUng nhá;p vá* đáUng ky9 giũ9p chố ngựợ*i dũ*ng táố tá*i khốáGn mợ9i đệI mũá sáCm trệ;n wệbsitệ vá* đáUng nhá;p tá*i khốáGn cố9 sáfn. Ngựợ*i dũ*ng cố9 thệI đáUng nhá;p tá*i khốáGn cố9 sáfn nhự githũb, gốốglệ, twittệr, … hốáUc tá*i khốáGn đá&.
Màn hình Trang chủ
Má*n hì*nh tráng chũG chự9á nhự&ng thố;ng tin chì9nh má* chũG cựGá há*ng mũố(n trũyệ7n táGi đệ(n ngựợ*i dũ*ng. Má*n hì*nh sệ& hiệIn thi dánh sá9ch cá9c dánh mũc, sáGn pháIm đáng khũyệ(n má&i, bánnệr qũáGng cá9ố cũGá cựGá há*ng, thố;ng tin tá*i khốáGn cũGá ngựợ*i dũ*ng vá* dánh sá9ch sáGn pháIm thệố tự*ng dánh mũc.
Màn hình Chi tiết sản phẩm
Ngốá*i rá ngựợ*i dũ*ng cũ&ng cố9 thệI xệm đựợc nhự&ng đá9nh giá9 cũGá nhự&ng ngựợ*i đá& mũá trựợ9c đố9.
Những kết quả đạt được
- Cuối cùng, em đã tạo ra một sản phẩm Website bán hàng trực tuyến với hệ thống chức năng hoàn thiện, đáp ứng được nhu cầu cơ bản của một cửa hàng bán trực tuyến. Sản phẩm của em không chỉ giúp cửa hàng quản lý công việc một cách hiệu quả hơn, mà còn mang lại trải nghiệm tốt cho người dùng.
Hướng phát triển và những đề xuất mới 1. Về mặt khách hàng cửa hàng
Về mặt quản lý cửa hàng
- Tối ưu hóa và tự động hóa: Để cải thiện hiệu quả, có thể hữu ích khi tối ưu hóa và tự động hóa một số quy trình trong hệ thống. Điều này có thể bao gồm việc tự động hóa các tác vụ như thông báo hết hàng trong kho, tạo báo cáo bán hàng hoặc gửi email tiếp thị cho khách hàng. Tối ưu hóa có thể bao gồm việc cải thiện giao diện người dùng, tăng tốc độ hệ thống hoặc cải thiện sự tích hợp giữa các phần khác nhau của hệ thống.