E-commerce Kustom di Firebase

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

Tujuannya adalah untuk melayani reseller terminal POS. Mereka membutuhkan katalog, varian harga, dan panel admin. Tim penjualan perlu melakukan pemesanan langsung dari situs tersebut.

Berikut adalah cara saya membangunnya dan pelajaran yang saya dapatkan.

The Stack • Vanilla HTML, CSS, dan JS. • Firebase Realtime Database untuk data. • Firebase Storage untuk file. • Netlify untuk hosting dan fungsi.

Keputusan Utama

  1. Pemisahan Database Saya memisahkan database e-commerce dari database manajemen internal. Hal ini mencegah data komersial bercampur dengan data admin yang sensitif seperti gaji atau anggaran.

  2. Arsip Harga Global Alih-alih memasukkan rencana harga ke dalam setiap produk, saya membuat folder tarif global. Produk hanya menyimpan array ID. Ini menghindari duplikasi data. Jika sebuah rencana berubah, saya cukup memperbaruinya satu kali.

  3. Pesanan Atomik Ketika banyak orang melakukan pemesanan di waktu yang sama, Anda akan menghadapi race conditions. Jika dua orang membaca nomor pesanan yang sama, satu pesanan bisa hilang. Saya menggunakan runTransaction() Firebase untuk memastikan setiap pesanan mendapatkan nomor urut yang unik.

  4. Akses Admin yang Aman Saya tidak menyimpan kata sandi di dalam kode sumber. Saya menggunakan PBKDF2 melalui Web Crypto API. Ini membuat serangan brute-force menjadi sangat sulit. Kode tersebut hanya berisi salt dan hash.

Pelajaran yang Didapat

• Waspadai nilai falsy. Dalam JavaScript, 0 adalah falsy. Jika harga produk adalah 0, pengecekan sederhana seperti "price || null" akan menghapus harga tersebut. Selalu gunakan "price != null" untuk menyertakan angka nol.

• Konfigurasikan CSP di header HTTP. Tag meta untuk Content Security Policy tidak mendukung wildcard untuk subdomain. Firebase menggunakan subdomain dinamis. Saya memindahkan CSP ke netlify.toml agar dapat berfungsi.

• Gunakan Security Rules untuk perlindungan nyata. Jangan pernah mengandalkan penyembunyian tombol di UI Anda. Gunakan aturan Firebase untuk membatasi siapa yang dapat membaca dan menulis data.

Membangun solusi kustom memerlukan pilihan arsitektur yang cermat. Detail kecil seperti penanganan transaksi dan konfigurasi header dapat mencegah kegagalan besar di tahap produksi.

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