E-dagang Tersuai pada Firebase

Saya membina laman e-dagang tersuai dari awal. Saya tidak menggunakan platform sedia ada. Saya menggunakan Firebase Realtime Database dan Netlify.

Matlamatnya adalah untuk melayani penjual semula terminal POS. Mereka memerlukan katalog, varian harga, dan panel admin. Pasukan jualan perlu membuat pesanan terus dari laman tersebut.

Berikut adalah cara saya membinanya dan pengajaran yang saya perolehi.

Stack Teknologi • Vanilla HTML, CSS, dan JS. • Firebase Realtime Database untuk data. • Firebase Storage untuk fail. • Netlify untuk pengehosan dan fungsi.

Keputusan Utama

  1. Pengasingan Pangkalan Data Saya mengasingkan pangkalan data e-dagang daripada pangkalan data pengurusan dalaman. Ini menghalang data komersial daripada bercampur dengan data admin yang sensitif seperti gaji atau bajet.

  2. Arkib Harga Global Daripada meletakkan pelan harga di dalam setiap produk, saya mencipta folder tarif global. Produk hanya menyimpan satu tatasusunan (array) ID. Ini mengelakkan pertindihan data. Jika sesuatu pelan berubah, saya hanya perlu mengemas kininya sekali sahaja.

  3. Pesanan Atomik Apabila ramai orang membuat pesanan pada masa yang sama, anda akan menghadapi keadaan perlumbaan (race conditions). Jika dua orang membaca nombor pesanan yang sama, satu pesanan mungkin hilang. Saya menggunakan runTransaction() Firebase untuk memastikan setiap pesanan mendapat nombor urutan yang unik.

  4. Akses Admin yang Selamat Saya tidak menyimpan kata laluan dalam kod sumber. Saya menggunakan PBKDF2 melalui Web Crypto API. Ini menjadikan serangan brute-force sangat sukar. Kod tersebut hanya mengandungi salt dan hash.

Pengajaran yang Diperolehi

• Berhati-hati dengan nilai falsy. Dalam JavaScript, 0 adalah falsy. Jika harga produk ialah 0, semakan mudah seperti "price || null" akan memadamkan harga tersebut. Sentiasa gunakan "price != null" untuk menyertakan sifar.

• Konfigurasikan CSP dalam pengepala HTTP. Tag meta untuk Content Security Policy tidak menyokong wildcard untuk subdomain. Firebase menggunakan subdomain dinamik. Saya memindahkan CSP ke netlify.toml untuk membolehkannya berfungsi.

• Gunakan Peraturan Keselamatan (Security Rules) untuk perlindungan sebenar. Jangan sesekali bergantung pada menyembunyikan butang dalam UI anda. Gunakan peraturan Firebase untuk mengehadkan siapa yang boleh membaca dan menulis data.

Membina penyelesaian tersuai memerlukan pilihan seni bina yang teliti. Perincian kecil seperti pengendalian transaksi dan konfigurasi pengepala dapat mengelakkan kegagalan besar dalam production.

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