Custom E-commerce on Firebase

Saya membangun situs e-commerce kustom dari nol. Saya tidak menggunakan platform siap pakai. Sebaliknya, saya menggunakan Firebase Realtime Database dan Netlify.

Klien membutuhkan pengaturan khusus. Mereka menginginkan katalog produk dengan varian harga dan panel admin. Mereka juga membutuhkan tim penjualan mereka untuk melakukan pemesanan langsung dari situs tersebut.

Berikut adalah cara saya menyelesaikan tantangan teknis utamanya.

Data Separation Saya memisahkan database e-commerce dari database manajemen internal. Hal ini mencegah data komersial bercampur dengan file sensitif seperti gaji karyawan atau anggaran.

Data Modeling for Pricing Paket harga sering kali berulang di berbagai produk yang berbeda. Jika Anda menduplikasi data paket di dalam setiap produk, pembaruan akan menjadi mimpi buruk.

  • Saya membuat arsip global untuk semua paket.
  • Setiap produk hanya menyimpan array dari ID paket.
  • Hal ini membuat pembaruan menjadi cepat dan mencegah kesalahan data.

Atomic Order Numbering Ketika banyak orang melakukan pemesanan di waktu yang sama, Anda akan menghadapi race condition. Jika dua pengguna membaca nomor pesanan terakhir yang sama, satu pesanan akan tertimpa.

  • Saya menggunakan transaksi Firebase untuk menyelesaikan ini.
  • Fungsi runTransaction memastikan angka bertambah dengan benar, bahkan dengan banyak pengguna secara bersamaan.
  • Ini menjamin setiap pesanan memiliki nomor yang unik.

Secure Admin Access Saya tidak ingin menyimpan kata sandi di dalam kode sumber. Saya juga menghindari hash sederhana seperti MD5.

  • Saya menggunakan PBKDF2 melalui Web Crypto API.
  • Ini menerapkan ribuan iterasi pada hash tersebut.
  • Hal ini membuat serangan brute-force menjadi terlalu mahal bagi peretas.
  • Saya hanya menyimpan salt dan hash di dalam kode.

Correcting the 'Zero' Bug Saya menemukan bug di mana produk dengan harga 0 ditampilkan sebagai "price to be defined."

  • Ini terjadi karena JavaScript menganggap 0 sebagai "falsy."
  • Saya memperbaikinya dengan mengubah logika saya.
  • Alih-alih menggunakan "price || null," saya menggunakan "price != null."
  • Ini memastikan sistem mengenali 0 sebagai angka yang valid.

CSP Configuration Firebase menggunakan subdomain dinamis. Tag meta HTML standar untuk Content Security Policy (CSP) tidak dapat menangani wildcard ini.

  • Saya memindahkan CSP dari HTML ke header HTTP Netlify.
  • Ini memungkinkan saya menggunakan wildcard agar layanan Firebase dapat berfungsi dengan benar.

Membangun sistem kustom membutuhkan lebih dari sekadar menulis kode. Hal ini memerlukan pengambilan keputusan arsitektural yang mencegah kegagalan produksi.

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