Individueller E-Commerce auf Firebase

Ich habe eine individuelle E-Commerce-Seite von Grund auf neu entwickelt. Ich habe keine fertigen Plattformen verwendet. Ich habe Firebase Realtime Database und Netlify genutzt.

Das Ziel war es, einen Wiederverkäufer von POS-Terminals zu unterstützen. Sie benötigten einen Katalog, Preisvarianten und ein Admin-Panel. Das Vertriebsteam sollte Bestellungen direkt über die Website aufgeben können.

Hier ist der Prozess, wie ich es aufgebaut habe, und die Lektionen, die ich daraus gelernt habe.

Der Tech-Stack • Vanilla HTML, CSS und JS. • Firebase Realtime Database für die Daten. • Firebase Storage für Dateien. • Netlify für Hosting und Functions.

Wichtige Entscheidungen

  1. Trennung der Datenbanken Ich habe die E-Commerce-Datenbank von der internen Management-Datenbank getrennt. Dies verhindert, dass kommerzielle Daten mit sensiblen Admin-Daten wie Gehältern oder Budgets vermischt werden.

  2. Globales Preisarchiv Anstatt die Preispläne in jedem einzelnen Produkt zu speichern, habe ich einen globalen Tarife-Ordner erstellt. Produkte enthalten nur ein Array von IDs. Dies vermeidet Datenredundanz. Wenn sich ein Plan ändert, muss ich ihn nur einmal aktualisieren.

  3. Atomare Bestellungen Wenn mehrere Personen gleichzeitig Bestellungen aufgeben, treten Race Conditions auf. Wenn zwei Personen dieselbe Bestellnummer lesen, könnte eine Bestellung verloren gehen. Ich habe runTransaction() von Firebase verwendet, um sicherzustellen, dass jede Bestellung eine eindeutige, fortlaufende Nummer erhält.

  4. Sicherer Admin-Zugriff Ich habe Passwörter nicht im Quellcode gespeichert. Ich habe PBKDF2 über die Web Crypto API verwendet. Dies macht Brute-Force-Angriffe sehr schwierig. Der Code enthält nur einen Salt und einen Hash.

Gelernte Lektionen

• Achten Sie auf Falsy-Werte. In JavaScript ist 0 ein Falsy-Wert. Wenn ein Produktpreis 0 ist, würde eine einfache Prüfung wie "price || null" den Preis löschen. Verwenden Sie immer "price != null", um die Null einzuschließen.

• Konfigurieren Sie die CSP in den HTTP-Headern. Meta-Tags für die Content Security Policy unterstützen keine Wildcards für Subdomains. Firebase verwendet dynamische Subdomains. Ich habe die CSP in die netlify.toml verschoben, damit sie funktioniert.

• Nutzen Sie Security Rules für echten Schutz. Verlassen Sie sich niemals darauf, Buttons in der Benutzeroberfläche (UI) einfach zu verstecken. Verwenden Sie Firebase-Regeln, um einzuschränken, wer Daten lesen und schreiben darf.

Das Entwickeln maßgeschneiderter Lösungen erfordert sorgfältige architektonische Entscheidungen. Kleine Details wie die Handhabung von Transaktionen und die Header-Konfiguration verhindern große Ausfälle in der Produktion.

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