متجر إلكتروني مخصص على Firebase

قمت ببناء موقع تجارة إلكترونية مخصص من الصفر. لم أستخدم المنصات الجاهزة، بل استخدمت Firebase Realtime Database و Netlify.

كان الهدف هو خدمة موزع لأجهزة نقاط البيع (POS). كانوا بحاجة إلى كتالوج، ومتغيرات تسعير، ولوحة تحكم للمسؤول (admin panel). كما احتاج فريق المبيعات إلى إمكانية تقديم الطلبات مباشرة من الموقع.

إليكم كيف قمت ببنائه والدروس التي تعلمتها.

التقنيات المستخدمة (The Stack)

• HTML و CSS و JS أساسية (Vanilla). • Firebase Realtime Database للبيانات. • Firebase Storage للملفات. • Netlify للاستضافة والوظائف (functions).

قرارات رئيسية

1. فصل قواعد البيانات

أبقيت قاعدة بيانات التجارة الإلكترونية منفصلة عن قاعدة بيانات الإدارة الداخلية. هذا يمنع اختلاط البيانات التجارية بالبيانات الإدارية الحساسة مثل الرواتب أو الميزانيات.

2. أرشيف تسعير عالمي

بدلاً من وضع خطط التسعير داخل كل منتج، أنشأت مجلداً عالمياً للتعريفات (tariffs). تحتوي المنتجات فقط على مصفوفة من المعرفات (IDs). هذا يمنع تكرار البيانات؛ فإذا تغيرت خطة ما، أقوم بتحديثها مرة واحدة فقط.

3. الطلبات الذرية (Atomic Orders)

عندما يقوم عدة أشخاص بتقديم طلبات في نفس الوقت، ستواجه حالات تسابق (race conditions). إذا قرأ شخصان نفس رقم الطلب، فقد يختفي أحد الطلبات. استخدمت runTransaction() في Firebase لضمان حصول كل طلب على رقم تسلسلي فريد.

4. وصول آمن للمسؤول

لم أقم بتخزين كلمات المرور في الكود المصدري. استخدمت PBKDF2 عبر Web Crypto API، مما يجعل هجمات القوة الغاشمة (brute-force attacks) صعبة للغاية. يحتوي الكود فقط على salt و hash.

الدروس المستفادة

• احذر من القيم الزائفة (falsy values). في JavaScript، القيمة 0 هي قيمة زائفة. إذا كان سعر المنتج 0، فإن فحصاً بسيطاً مثل "price || null" سيؤدي إلى حذف السعر. استخدم دائماً "price != null" لتشمل الصفر.

• قم بتكوين CSP في ترويسات HTTP. لا تدعم علامات Meta الخاصة بسياسة أمان المحتوى (Content Security Policy) الرموز العامة (wildcards) للنطاقات الفرعية. يستخدم Firebase نطاقات فرعية ديناميكية، لذا قمت بنقل CSP إلى netlify.toml ليعمل بشكل صحيح.

• استخدم قواعد الأمان (Security Rules) للحماية الحقيقية. لا تعتمد أبداً على إخفاء الأزرار في واجهة المستخدم الخاصة بك. استخدم قواعد Firebase لتقييد من يمكنه قراءة وكتابة البيانات.

يتطلب بناء حلول مخصصة خيارات معمارية دقيقة. التفاصيل الصغيرة مثل التعامل مع العمليات (transactions) وتكوين الترويسات تمنع حدوث إخفاقات كبيرة في بيئة الإنتاج.

المصدر: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec