متجر إلكتروني مخصص باستخدام Firebase

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

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

إليكم كيف قمت بحل التحديات التقنية الرئيسية.

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

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

  • أنشأت أرشيفًا عالميًا لجميع الخطط.
  • يحتوي كل منتج فقط على مصفوفة (array) من معرفات الخطط (plan IDs).
  • هذا يجعل التحديثات سريعة ويمنع أخطاء البيانات.

ترقيم الطلبات الذري (Atomic) عندما يقوم عدة أشخاص بتقديم طلبات في نفس الوقت، ستواجه ما يُعرف بـ "حالة السباق" (race condition). إذا قرأ مستخدمان نفس رقم آخر طلب، فسيتم استبدال أحد الطلبين.

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

وصول آمن للمسؤول لم أرغب في تخزين كلمات المرور في الكود المصدري، كما تجنبت استخدام التجزئة (hashes) البسيطة مثل MD5.

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

إصلاح خطأ "الصفر" اكتشفت خطأً حيث تظهر المنتجات التي سعرها 0 كـ "السعر سيتم تحديده لاحقًا".

  • حدث هذا لأن JavaScript تعامل الرقم 0 على أنه "falsy".
  • قمت بإصلاح ذلك عن طريق تغيير المنطق البرمجي.
  • بدلاً من استخدام "price || null"، استخدمت "price != null".
  • يضمن ذلك أن يتعرف النظام على 0 كرقم صالح.

إعداد CSP يستخدم Firebase نطاقات فرعية ديناميكية. لا يمكن لوسم HTML meta القياسي الخاص بسياسة أمان المحتوى (CSP) التعامل مع هذه الرموز العامة (wildcards).

  • قمت بنقل الـ CSP من HTML إلى ترويسات HTTP الخاصة بـ Netlify.
  • سمح لي هذا باستخدام الرموز العامة (wildcards) لتعمل خدمات Firebase بشكل صحيح.

يتطلب بناء الأنظمة المخصصة أكثر من مجرد كتابة الكود؛ فهو يتطلب اتخاذ خيارات معمارية تمنع فشل النظام عند التشغيل الفعلي (production).

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