Xây dựng Thương mại điện tử Tùy chỉnh trên Firebase

Tôi đã xây dựng một trang thương mại điện tử tùy chỉnh từ con số không. Tôi không sử dụng các nền tảng có sẵn. Thay vào đó, tôi đã sử dụng Firebase Realtime Database và Netlify.

Khách hàng cần một thiết lập cụ thể. Họ muốn có một danh mục sản phẩm với các biến thể về giá và một bảng điều khiển quản trị (admin panel). Họ cũng cần đội ngũ bán hàng của mình có thể đặt hàng trực tiếp từ trang web.

Dưới đây là cách tôi giải quyết các thách thức kỹ thuật chính.

Phân tách Dữ liệu

Tôi đã tách biệt cơ sở dữ liệu thương mại điện tử khỏi cơ sở dữ liệu quản lý nội bộ. Điều này ngăn chặn việc dữ liệu thương mại bị trộn lẫn với các tệp nhạy cảm như lương nhân viên hoặc ngân sách.

Mô hình hóa Dữ liệu cho Giá cả

Các gói giá thường lặp lại ở nhiều sản phẩm khác nhau. Nếu bạn sao chép dữ liệu gói giá vào từng sản phẩm, việc cập nhật sẽ trở thành một cơn ác mộng.

  • Tôi đã tạo một kho lưu trữ toàn cục cho tất cả các gói.
  • Mỗi sản phẩm chỉ giữ một mảng các ID của gói.
  • Điều này giúp việc cập nhật diễn ra nhanh chóng và ngăn ngừa lỗi dữ liệu.

Đánh số Đơn hàng Nguyên tử (Atomic)

Khi nhiều người đặt hàng cùng một lúc, bạn sẽ gặp phải tình trạng tranh chấp (race condition). Nếu hai người dùng cùng đọc một số thứ tự đơn hàng cuối cùng, một đơn hàng sẽ bị ghi đè.

  • Tôi đã sử dụng Firebase transactions để giải quyết vấn đề này.
  • Hàm runTransaction đảm bảo số thứ tự được tăng lên chính xác, ngay cả khi có nhiều người dùng truy cập đồng thời.
  • Điều này đảm bảo mỗi đơn hàng đều có một số duy nhất.

Truy cập Quản trị Bảo mật

Tôi không muốn lưu trữ mật khẩu trong mã nguồn. Tôi cũng tránh các phương thức băm (hash) đơn giản như MD5.

  • Tôi đã sử dụng PBKDF2 thông qua Web Crypto API.
  • Phương thức này áp dụng hàng nghìn vòng lặp cho quá trình băm.
  • Nó khiến các cuộc tấn công brute-force trở nên quá tốn kém đối với tin tặc.
  • Tôi chỉ lưu trữ salt và hash trong mã nguồn.

Khắc phục lỗi 'Số không'

Tôi đã phát hiện một lỗi mà các sản phẩm có giá bằng 0 lại hiển thị là "price to be defined" (giá sẽ được xác định sau).

  • Điều này xảy ra vì JavaScript coi 0 là một giá trị "falsy".
  • Tôi đã khắc phục bằng cách thay đổi logic của mình.
  • Thay vì sử dụng price || null, tôi đã sử dụng price != null.
  • Điều này đảm bảo hệ thống nhận diện 0 là một con số hợp lệ.

Cấu hình CSP

Firebase sử dụng các subdomain động. Một thẻ meta HTML tiêu chuẩn cho Content Security Policy (CSP) không thể xử lý các ký tự đại diện (wildcards) này.

  • Tôi đã chuyển CSP từ HTML sang các HTTP headers của Netlify.
  • Điều này cho phép tôi sử dụng các ký tự đại diện để các dịch vụ của Firebase hoạt động chính xác.

Xây dựng các hệ thống tùy chỉnh đòi hỏi nhiều hơn là chỉ viết mã. Nó đòi hỏi việc đưa ra các lựa chọn về kiến trúc để ngăn ngừa các lỗi khi vận hành thực tế (production).

Nguồn: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec