Własny sklep e-commerce na Firebase
Zbudowałem własny sklep e-commerce od podstaw. Nie korzystałem z gotowych platform. Użyłem Firebase Realtime Database oraz Netlify.
Celem było obsłużenie dystrybutora terminali POS. Potrzebowali katalogu, wariantów cenowych oraz panelu administracyjnego. Zespół sprzedaży musiał mieć możliwość składania zamówień bezpośrednio przez stronę.
Oto jak to zbudowałem i jakie lekcje wyciągnąłem.
Stos technologiczny
• Czysty HTML, CSS i JS. • Firebase Realtime Database do danych. • Firebase Storage do plików. • Netlify do hostingu i funkcji.
Kluczowe decyzje
1. Separacja baz danych
Oddzieliłem bazę danych sklepu od wewnętrznej bazy danych do zarządzania. Zapobiega to mieszaniu się danych handlowych z wrażliwymi danymi administracyjnymi, takimi jak wynagrodzenia czy budżety.
2. Globalne archiwum cen
Zamiast umieszczać plany cenowe w każdym produkcie, stworzyłem globalny folder z taryfami. Produkty przechowują jedynie tablicę identyfikatorów (ID). Pozwala to uniknąć duplikowania danych. Jeśli plan ulegnie zmianie, aktualizuję go tylko raz.
3. Atomowe zamówienia
Gdy wiele osób składa zamówienia w tym samym czasie, pojawiają się tzw. wyścigi (race conditions). Jeśli dwie osoby odczytają ten sam numer zamówienia, jedno z nich może zniknąć. Użyłem runTransaction() z Firebase, aby zapewnić, że każde zamówienie otrzyma unikalny, sekwencyjny numer.
4. Bezpieczny dostęp administracyjny
Nie przechowywałem haseł w kodzie źródłowym. Użyłem PBKDF2 za pomocą Web Crypto API. Dzięki temu ataki typu brute-force są bardzo trudne. Kod zawiera jedynie sól (salt) i skrót (hash).
Wyciągnięte lekcje
• Uważaj na wartości "falsy". W JavaScript 0 jest wartością falsy. Jeśli cena produktu wynosi 0, proste sprawdzenie typu "price || null" usunie cenę. Zawsze używaj "price != null", aby uwzględnić zero.
• Skonfiguruj CSP w nagłówkach HTTP. Tagi meta dla Content Security Policy nie obsługują symboli wieloznacznych (wildcards) dla subdomen. Firebase używa dynamicznych subdomen. Przeniosłem CSP do netlify.toml, aby to działało.
• Używaj reguł bezpieczeństwa (Security Rules) dla realnej ochrony. Nigdy nie polegaj na samym ukrywaniu przycisków w interfejsie użytkownika. Użyj reguł Firebase, aby ograniczyć dostęp do odczytu i zapisu danych.
Budowanie własnych rozwiązań wymaga starannych wyborów architektonicznych. Małe szczegóły, takie jak obsługa transakcji czy konfiguracja nagłówków, zapobiegają poważnym awariom na produkcji.
Źródło: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec