Dự án "Commerce" là một ứng dụng thương mại điện tử được xây dựng sử dụng các công nghệ và thư viện sau:
React: Một thư viện JavaScript để xây dựng giao diện người dùng. Dự án sử dụng React để tạo ra các thành phần giao diện động và tái sử dụng được.
Commerce.js: Một SDK JavaScript mạnh mẽ cho thương mại điện tử, giúp dễ dàng tích hợp các chức năng thương mại vào ứng dụng. Trong dự án này, Commerce.js được sử dụng để quản lý sản phẩm, giỏ hàng, và thực hiện thanh toán.
Stripe: Một nền tảng thanh toán trực tuyến, được tích hợp vào dự án thông qua @stripe/react-stripe-js và @stripe/stripe-js để xử lý các giao dịch thanh toán.
React Router: Một thư viện định tuyến cho ứng dụng React, giúp quản lý việc điều hướng giữa các trang khác nhau trong ứng dụng.
Chức năng chính của dự án bao gồm:
Thêm sản phẩm vào giỏ hàng: Người dùng có thể xem các sản phẩm và thêm chúng vào giỏ hàng.
Xem giỏ hàng: Xem các sản phẩm trong giỏ hàng cùng với giá của từng sản phẩm, số lượng và tổng giá.
Thay đổi số lượng sản phẩm: Tăng hoặc giảm số lượng của từng sản phẩm trong giỏ hàng.
Tiến hành thanh toán: Người dùng có thể tiến hành thanh toán bằng cách nhập thông tin giao hàng và thanh toán.
Màn hình xác nhận: Khi đơn hàng được xử lý thành công, người dùng sẽ được chuyển đến màn hình xác nhận.
Các chức năng này được triển khai thông qua các thành phần React như Basket, Checkout, và Products, với sự hỗ trợ của Commerce.js và Stripe để xử lý dữ liệu sản phẩm và thanh toán.
Phản ứng
động từ
phản động lại, phản ứng, phản ứng hóa học, sụt giá
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Cài đặt các gói phụ thuộc:
Mở terminal hoặc command prompt.
Di chuyển đến thư mục gốc của dự án bằng lệnh cd <đường dẫn đến thư mục dự án>, thay thế <đường dẫn đến thư mục dự án> bằng đường dẫn thực tế đến thư mục dự án của bạn.
Chạy lệnh npm install để cài đặt tất cả các gói phụ thuộc được liệt kê trong package.json.
Cấu hình biến môi trường:
Tạo một tệp .env trong thư mục gốc của dự án.
Thêm biến REACT_APP_CHEC_PUBLIC_KEY với giá trị là khóa công khai của bạn từ Commerce.js. Ví dụ: REACT_APP_CHEC_PUBLIC_KEY=your_public_key_here.
Nếu bạn sử dụng Stripe, thêm các biến môi trường tương ứng cho Stripe.
Chạy dự án:
Trong terminal hoặc command prompt, chạy lệnh npm start để khởi động dự án.
Mở trình duyệt và truy cập địa chỉ http://localhost:3000 để xem ứng dụng