Bài Assignment môn học ReactJSb của sinh viên Võ Thanh Phương ngành Công nghệ thông tin FPT Polytechnic TP HCM với chủ thiết kế website thương mại sử dụng frontend là ReactJS được đánh giá cao với đầy đủ và hoàn chỉnh các tính năng. Từ thiết kế database với MongoDB, đến code api bằng NodeJS và cuối cùng là frontEnd thực hiện với ReactJS.
Các trang trình bày sản phẩm như trang chủ, trang chi tiết sản phẩm, trang sản phẩm theo loại, trang tìm kiếm được Phương thể hiện tốt. Đủ các yêu cầu cần thiết cho từng chức năng như phân trang, bình luận, kiểm lỗi.
Bên cạnh đó các tính năng đặc trưng của site thương mại như giỏ hàng, đơn hàng, profile, thanh toán cũng được thực hiện hoàn chỉnh. Đặc biệt thanh toán online với VNPay cũng thực hiện, tính phí vận chuyển thông qua tương tác api với giao hàng nhanh cũng hoàn thiện.
Các chức năng người dùng đăng ký, đăng nhập, đổi mật khẩu, quên mật khẩu, đăng nhập thông qua Google, Facebook cũng được đánh giá cao. Phần quản trị của đầy đủ các chức năng để quản lý dữ liệu như thêm sửa xóa danh mục, đơn hàng, phân trang, tìm kiếm, lọc dữ liệu, upload file, select box với các khóa ngoại, validtae cũng hoàn chỉnh.
Bài làm đã phối hợp và liên kết tốt các công nghệ hot hiện nay như NodeJS, ReactJS, MongoDB, TypeScript… bằng cách tổ chức và triệu gọi api từ xa, các tính năng kỹ thuật đã được áp dụng và phân bổ đúng chỗ dẫn đến code hoạt động trơn tru. Sau đây là một số hình ảnh minh họa
Trang chủ
Hiển thị sản phẩm nổi bật, mã giảm giá. Số lượng sản phẩm trong giỏ hàng và khi hover sẽ show sản phẩm trong giỏ. Sử dụng thư viện spline để hiện thị mô hình sản phẩm 3D. Tìm kiếm sản phẩm.
Trang sản phẩm theo loại
Lấy dữ liệu từ api NodeJS phía backend về để hiển thị trong trang theo tham số. Format, phân trang, sắp xếp sản phẩm theo giá tăng giảm.
Trang chi tiết sản phẩm
Hiển thị chi tiêt một sản phẩm. Cho phép chọn màu và số lượng và hiển thị ảnh sản phẩm khác khi click chuột. Trang cho phép đánh giá , hiện các bình luận và nhập bình luận khi cho user đã đăng nhập.
Trang giỏ hàng
Hiển thị các sản phẩm trong giỏ hàng, lưu sản phẩm với kỹ thuật Redux. Cho phép thay đổi số lượng sản phẩm và xóa sản phẩm. Tính tổng tiền.
Trang thanh toán.
Trang thanh toán cho phép tiền mặt hoặc VNPAY, có sử dụng API của giao hàng nhanh để tính phí vận chuyển. Cũng có áp dụng mã giảm giá cho đơn hàng của khách mua.
Trang đăng nhập
Thống kê
Thống kê số lượng sản phẩm, danh mục, đơn hàng, doanh thu theo tháng hiện tại. Thống kê sản phẩm có bình luận nhiều nhất bằng chartjs. Thống kê doanh thu các tháng trong năm bằng biểu đồ charjs.
Quản lý danh mục
Thêm mới, sửa, xóa danh mục. Tính tổng số lượng sản phẩm theo danh mục. Cho phép chỉ định vị trị hiển thị của danh mục. Phân trang.
Quản lý người dùng
Chức năng thực hiện trên trang bao gồm thêm mới người dùng. Thay đổi trạng thái người dùng (khóa hoặc hoạt động). Phân trang.
Quản lý sản phẩm
Chức năng thực hiện bao gồm thêm mới sản phẩm, sửa, xóa sản phẩm và xem chi tiết loại màu sản phẩm. Thay đổi trạng thái sản phẩm ( hiển thị hoặc ẩn ) tức thời bằng ajax. Lọc sản phẩm theo danh mục và trạng thái ẩn hiện. Lọc sản phẩm theo danh mục, tìm kiếm sản phẩm theo từ khóa. Phân trang.
Thêm và cập nhật sản phẩm có thể linh động bổ sung màu sắc kèm số lượng. Validate dữ liệu, chỉ định danh mục.
Quản lí đơn hàng
Cho phép liệt kê đơn hàng mới, xem chi tiết đơn hàng. Thay đổi trạng thái đơn hàng ( đang xử lý hoặc đã giao hàng ). Phân trang.
Quản lí bình luận
Chức năng thực hiện bao gồm danh sách các bình luận của các sản phẩm. Xem bình luận theo sản phẩm được lọc. Thay đổi trạng thái người dùng ( hiển thị hoặc ẩn ). Phân trang. Tìm kiếm bình luận.
Ngoài ra còn các tính năng khác như Responsive, bảo vệ route thông qua token mã hóa với Open SSL…
Giảng viên Nguyễn Văn Long
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
