إضافة وظائف جديدة إلى تطبيق الويب بسرعة باستخدام إضافات Firebase

1. مقدمة

الأهداف

في هذا الدرس العملي، ستضيف وظائف إلى تطبيق سوق على الإنترنت بمساعدة إضافات Firebase. من خلال هذا الدرس العملي، ستتعرّف على كيفية مساعدة الإضافات في تقليل الوقت المستغرق في مهام تطوير التطبيقات وإدارتها.

ما ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستضيف الميزات التالية إلى تطبيق ويب خاص بسوق على الإنترنت:

• تحميل الصور بشكل أسرع لزيادة معدّل الحفاظ على المستخدمين
• الحدّ من عدد الإدخالات في قاعدة البيانات لتحسين الأداء وخفض فاتورتك
• تنفيذ الحذف التلقائي لبيانات المستخدمين القديمة لتعزيز حماية بيانات المستخدمين

ما ستتعلمه

• كيفية العثور على إضافات لحالات الاستخدام الشائعة
• كيفية تثبيت إضافة وضبطها في مشروعك
• كيفية الحفاظ على الإضافات (مراقبتها وتحديثها وإلغاء تثبيتها) في مشروعك

يركّز هذا الدرس التطبيقي حول الترميز على "إضافات Firebase". للحصول على معلومات تفصيلية عن منتجات Firebase الأخرى المذكورة في هذا الدرس العملي، يُرجى الرجوع إلى مستندات Firebase والدروس العملية الأخرى.

المتطلبات

• كمبيوتر مزوّد بمتصفّح ويب حديث (يُنصح باستخدام Chrome)
• حساب Google

2. إنشاء مشروع Firebase وإعداده

إنشاء مشروع Firebase

1. سجِّل الدخول إلى وحدة تحكّم Firebase باستخدام حسابك على Google.
2. انقر على الزر لإنشاء مشروع جديد، ثم أدخِل اسم المشروع (على سبيل المثال، FriendlyMarket).
   
3. انقر على متابعة.
4. إذا طُلب منك ذلك، راجِع بنود Firebase واقبلها، ثم انقر على متابعة.
5. (اختياري) فعِّل ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" في وحدة تحكّم Firebase (المعروفة باسم "Gemini في Firebase").
6. في هذا الدرس العملي، لا تحتاج إلى "إحصاءات Google"، لذا أوقِف خيار "إحصاءات Google".
7. انقر على إنشاء مشروع، وانتظِر إلى أن يتم توفير مشروعك، ثم انقر على متابعة.

يستخدم التطبيق الذي ستنشئه بعض منتجات Firebase المتاحة لتطبيقات الويب:

• خدمة "مصادقة Firebase" لتحديد هوية المستخدمين بسهولة
• قاعدة البيانات الآنية الاستجابة من Firebase لحفظ البيانات المنظَّمة في السحابة الإلكترونية وتلقّي إشعار فوري عند تعديل البيانات
• ‫Cloud Storage for Firebase لحفظ الصور في السحابة الإلكترونية

عليك الآن تفعيل منتجات Firebase هذه وإعدادها باستخدام وحدة تحكّم Firebase.

ترقية خطة أسعار Firebase

لاستخدام "إضافات Firebase" وخدمات السحابة الإلكترونية الأساسية، بالإضافة إلى "خدمة Cloud Storage لبرنامج Firebase"، يجب أن يكون مشروعك على Firebase ضمن خطة التسعير "الدفع حسب الاستخدام" (Blaze)، ما يعني أنّه مرتبط بحساب Cloud Billing.

• يتطلّب حساب الفوترة في Cloud طريقة دفع، مثل بطاقة الائتمان.
• إذا كنت حديث العهد باستخدام Firebase وGoogle Cloud، تحقَّق ممّا إذا كنت مؤهَّلاً للحصول على رصيد بقيمة 300 دولار أمريكي وحساب فوترة على Cloud في الفترة التجريبية المجانية.
• إذا كنت تجري هذا الدرس العملي المبرمَج كجزء من حدث، اسأل المنظِّم عمّا إذا كانت هناك أي أرصدة في السحابة الإلكترونية متاحة.

لترقية مشروعك إلى خطة Blaze، اتّبِع الخطوات التالية:

1. في "وحدة تحكّم Firebase"، اختَر ترقية خطتك.
2. اختَر خطة Blaze. اتّبِع التعليمات الظاهرة على الشاشة لربط حساب فوترة على Cloud بمشروعك.
   إذا احتجت إلى إنشاء حساب فوترة على Cloud كجزء من عملية الترقية هذه، قد تحتاج إلى الرجوع إلى مسار الترقية في وحدة تحكّم Firebase لإكمال عملية الترقية.

تفعيل تسجيل الدخول باستخدام البريد الإلكتروني

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

1. في وحدة تحكّم Firebase، انقر على تطوير في اللوحة اليمنى.
2. انقر على المصادقة، ثم انقر على علامة التبويب طريقة تسجيل الدخول (أو انقر هنا للانتقال مباشرةً إلى علامة التبويب طريقة تسجيل الدخول).
3. انقر على البريد الإلكتروني/كلمة المرور في قائمة مزوّدو خدمة تسجيل الدخول، واضبط مفتاح تفعيل على وضع التشغيل، ثم انقر على حفظ.

تفعيل Realtime Database

يستخدم التطبيق "قاعدة بيانات Firebase في الوقت الفعلي" لحفظ السلع المعروضة للبيع.

1. في اللوحة اليمنى من "وحدة تحكّم Firebase"، وسِّع إنشاء، ثم اختَر Realtime Database.
2. انقر على إنشاء قاعدة بيانات.
3. اختَر موقعًا لقاعدة البيانات، ثم انقر على التالي.
   بالنسبة إلى تطبيق حقيقي، عليك اختيار موقع جغرافي قريب من المستخدمين.
4. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
   في الخطوات التالية من هذا الدرس العملي، ستضيف قواعد الأمان لتأمين بياناتك. لا توزِّع تطبيقًا أو تعرضه بشكل علني بدون إضافة "قواعد الأمان" لقاعدة البيانات.
5. انقر على إنشاء.

ضبط قواعد الأمان لقاعدة البيانات

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

1. في أعلى لوحة بيانات Realtime Database، انقر على علامة التبويب القواعد.

2. انسخ مجموعة القواعد التالية والصِقها في حقل القواعد ضمن علامة التبويب القواعد:

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. انقر على نشر.

إعداد "مساحة تخزين سحابية لـ Firebase"

يستخدم التطبيق "مساحة تخزين سحابية لـ Firebase" لحفظ صور السلع المعروضة للبيع.

في ما يلي كيفية إعداد "التخزين السحابي لبرنامج Firebase" في مشروعك على Firebase:

1. في اللوحة اليمنى من وحدة تحكّم Firebase، وسِّع إنشاء، ثم اختَر مساحة التخزين.
2. انقر على البدء.
3. اختَر موقعًا جغرافيًا لحزمة Storage التلقائية.
   يمكن للحِزم في US-WEST1 وUS-CENTRAL1 وUS-EAST1 الاستفادة من الفئة"دائمًا مجانية" في Google Cloud Storage. تخضع الحِزم في جميع المواقع الجغرافية الأخرى لأسعار واستخدام Google Cloud Storage.
4. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
   في الخطوات التالية من هذا الدرس العملي، ستضيف قواعد الأمان لتأمين بياناتك. لا توزّع تطبيقًا أو تعرضه للجميع بدون إضافة "قواعد الأمان" لحزمة Cloud Storage.
5. انقر على إنشاء.

إعداد قواعد الأمان لحزمة Cloud Storage

الآن، عليك ضبط قواعد الأمان اللازمة لهذا التطبيق. تسمح هذه القواعد للمستخدمين الذين تمّت مصادقتهم فقط بنشر صور جديدة، ولكنّها تسمح لأي شخص بعرض صورة لمنتج مُدرَج.

1. في أعلى لوحة بيانات مساحة التخزين، انقر على علامة التبويب القواعد.

2. انسخ مجموعة القواعد التالية والصِقها في حقل القواعد ضمن علامة التبويب القواعد:

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. انقر على نشر.

3- تشغيل نموذج التطبيق

إنشاء نسخة من مشروع StackBlitz

في هذا الدرس التطبيقي حول الترميز، ستنشئ تطبيقًا وتنشره باستخدام StackBlitz، وهو محرّر على الإنترنت يتضمّن العديد من مهام سير عمل Firebase. لا يتطلّب Stackblitz تثبيت أي برامج أو إنشاء حساب خاص على Stackblitz.

يتيح لك StackBlitz مشاركة المشاريع مع الآخرين. يمكن للمستخدمين الآخرين الذين لديهم عنوان URL الخاص بمشروعك على StackBlitz الاطّلاع على الرمز البرمجي وإنشاء نسخة من مشروعك، ولكن لا يمكنهم تعديل مشروعك على StackBlitz.

1. انتقِل إلى عنوان URL هذا للحصول على رمز البداية: https://stackblitz.com/edit/friendlymarket-codelab.
2. في أعلى صفحة StackBlitz، انقر على Fork.

أصبح لديك الآن نسخة من رمز البداية كمشروع StackBlitz خاص بك. بما أنّك لم تسجّل الدخول، يُطلق على "حسابك" الاسم @anonymous، ولكن لا بأس في ذلك. للمشروع اسم فريد، بالإضافة إلى عنوان URL فريد. يتم حفظ جميع ملفاتك وتغييراتك في مشروع StackBlitz هذا.

إضافة تطبيق إنترنت على Firebase إلى المشروع

1. في StackBlitz، اعرض ملف src/firebase-config.js. هذا هو المكان الذي ستضيف فيه عنصر إعداد Firebase.
2. ارجع إلى "وحدة تحكّم Firebase"، وانتقِل إلى صفحة النظرة العامة على مشروعك من خلال النقر على نظرة عامة على المشروع في أعلى يمين الصفحة.
3. في وسط صفحة النظرة العامة على مشروعك، انقر على رمز الويب لإنشاء تطبيق ويب جديد على Firebase.
4. سجِّل التطبيق بالاسم المستعار FriendlyMarket Codelab.
5. في هذا الدرس التطبيقي حول الترميز، لا تضع علامة في المربّع بجانب إعداد "استضافة Firebase" لهذا التطبيق أيضًا، لأنّك ستستخدم لوحة المعاينة في StackBlitz بدلاً من ذلك.
6. انقر على تسجيل التطبيق.
7. انسخ عنصر إعدادات Firebase لتطبيقك إلى الحافظة. لا تنسخ العلامات <script>. ملاحظة: إذا احتجت إلى العثور على الإعدادات في وقت لاحق، اتّبِع التعليمات الواردة هنا.

8. انقر على المتابعة إلى وحدة التحكّم.

أضِف إعدادات مشروعك إلى تطبيقك باتّباع الخطوات التالية:

1. في StackBlitz، انتقِل إلى الملف src/firebase-config.js.
2. ألصِق مقتطف الإعداد في الملف. بعد ذلك، من المفترض أن يظهر على النحو التالي (ولكن مع قيم مشروعك في عنصر الإعدادات):

ما هي نقطة البداية لهذا التطبيق؟

ألقِ نظرة على المعاينة التفاعلية على الجانب الأيسر من شاشة StackBlitz:

يبدأ هذا الدرس العملي بتزويدك برمز لتطبيق سوق أساسي. يمكن لأي مستخدم الاطّلاع على قائمة بالسلع المعروضة للبيع والنقر على رابط لعرض صفحة تفاصيل سلعة معيّنة. إذا سجّل المستخدم الدخول، ستظهر له معلومات الاتصال بالبائع ليتمكّن من التفاوض على السعر وشراء السلعة.

جرِّب التطبيق:

1. سجِّل الدخول باستخدام الزرّ في أعلى الشاشة الرئيسية. يمكنك استخدام عنوان بريد إلكتروني واسم وكلمة مرور مزيّفة.
2. انقر على الزر بيع منتج في أسفل يسار الصفحة لإنشاء بطاقة بيانات.
3. في حقل العنوان، أدخِل Xylophone.
4. في حقل السعر المطلوب، أدخِل 50.
5. بالنسبة إلى وصف السلعة، أدخِل ما يلي: This high quality xylophone can be used to play music.
6. نزِّل صورة آلة الزايلوفون هذه على جهاز الكمبيوتر، وحمِّلها باستخدام الزر صورة السلعة.

file_downloadتنزيل الصورة

7. بعد ملء جميع الحقول وتحميل صورة، انقر على نشر.
8. ابحث عن بطاقة بياناتك الجديدة. انقر على السلعة للاطّلاع على شاشة التفاصيل، ثم وسِّع لوحة معلومات الاتصال بالبائع.
9. ارجع إلى "وحدة تحكّم Firebase". في لوحة بيانات قاعدة البيانات، سيظهر لك الآن إدخال للعنصر الذي نشرته ضمن العقدة forsale. في لوحة بيانات مساحة التخزين، ستعثر أيضًا على الصورة التي حمّلتها في المسار friendlymarket.

4. البحث عن إضافة وتثبيتها

المشكلة

بعد إجراء بعض الأبحاث حول المستخدمين لتطبيقك، تبيّن لك أنّ معظم المستخدمين يزورون موقعك الإلكتروني من هواتفهم الذكية، وليس من أجهزة الكمبيوتر المكتبي. ومع ذلك، تُظهر إحصاءاتك أيضًا أنّ مستخدمي الأجهزة الجوّالة يميلون إلى مغادرة موقعك الإلكتروني ("التوقّف عن الاستخدام") بعد بضع ثوانٍ فقط.

بدافع الفضول، تختبر موقعك الإلكتروني باستخدام سرعات الاتصال بالأجهزة الجوّالة. (كيفية إجراء ذلك) تلاحظ أنّ تحميل الصور يستغرق وقتًا طويلاً جدًا وأنّها لا تُحفظ في ذاكرة التخزين المؤقت للمتصفّح على الإطلاق. ويتم تكبُّد وقت التحميل الطويل هذا في كلّ مشاهدة للصفحة.

الحل

بعد الاطّلاع على كيفية تحسين الصور، قرّرت اتّخاذ خطوتَين لتحسين أداء تحميل الصور:

• ضغط الصور: حتى الهواتف الجوّالة تلتقط صورًا بدقة أعلى بكثير من اللازم لاحتياجات هذا التطبيق. وسيؤدي تقليل حجم الملف إلى تسريع أوقات التحميل بدون انخفاض ملحوظ في الدقة داخل التطبيق.
• التخزين المؤقت بشكلٍ تلقائي، تحتوي عناصر Cloud Storage على عناوين تطلب من المتصفحات عدم تخزين الصور مؤقتًا، ما يعني أنّ متصفّح المستخدم سيعيد تنزيل الصورة نفسها مرارًا وتكرارًا. لحسن الحظ، يمكنك تغيير هذه العناوين للسماح بالتخزين المؤقت. تتيح لك كل من حزمة تطوير البرامج (SDK) من جهة العميل في Cloud Storage وحزمة تطوير البرامج (SDK) للمشرف في Firebase ضبط هذه العناوين.

لضغط الصور، عليك إما الحدّ من جودة التحميل أو استخدام عملية من جهة الخادم لتغيير حجم الصور. دعونا نلقي نظرة على الإيجابيات والسلبيات:

• من جهة العميل: بالنسبة إلى عملية من جهة العميل، يمكنك فقط وضع حدّ أقصى لحجم الملفات للصور التي يتم تحميلها. وهذا يعني أنّك لن تحتاج إلى كتابة أو صيانة أي منطق خادم جديد. ومع ذلك، يعني ذلك أيضًا أنّ البائعين بحاجة إلى معرفة كيفية تغيير حجم صورهم، وهو عائق مؤلم وغير بديهي أمام إنشاء بطاقة بيانات جديدة.
• من جهة الخادم إذا كنت تستخدم "وظائف Firebase السحابية"، يمكنك تشغيل دالة تعمل على تغيير حجم الصورة تلقائيًا عند تحميلها. هذا يعني أنّه يمكن للبائعين تحميل أي حجم من الصور يريدونه (بدون أي عمل إضافي)، ويمكن لوظيفة الخلفية تغيير حجم الصورة بسلاسة. يتوفّر أيضًا نموذج لهذه الدالة.

يبدو أنّ الخيار الأفضل هو استخدام الخادم، ولكنّ هذه الفكرة لا تزال تتضمّن استنساخ العينة واتّباع تعليمات الإعداد ثم نشر الدالة باستخدام واجهة سطر الأوامر (CLI) في Firebase. يبدو أنّ تغيير حجم الصور هو حالة استخدام شائعة جدًا. أليس هناك حلّ أسهل؟

حلّ أسهل

أنت محظوظ. هناك حلّ أسهل، وهو "إضافات Firebase". لنطّلع على قائمة الإضافات المتاحة على موقع Firebase الإلكتروني.

انظر إلى ذلك! تتوفّر إضافة باسم "تغيير حجم الصور". يبدو هذا واعدًا.

لنستخدم هذه الإضافة في تطبيقك.

تثبيت إضافة

1. انقر على عرض التفاصيل للاطّلاع على مزيد من المعلومات حول هذه الإضافة. ضمن ما يمكنك ضبطه، تتيح لك الإضافة ضبط الأبعاد التي تريد تغيير حجمها، ويمكنك حتى ضبط عنوان ذاكرة التخزين المؤقت. ممتاز.
2. انقر على الزر التثبيت في وحدة التحكّم في صفحة تفاصيل الإضافة. سيتم نقلك إلى صفحة "وحدة تحكّم Firebase" التي تسرد جميع مشاريعك.
3. اختَر مشروع FriendlyMarket الذي أنشأته لهذا الدرس العملي.
4. اتّبِع التعليمات الظاهرة على الشاشة إلى أن تصل إلى خطوة إعداد الإضافة. ستعرض التعليمات ملخّصًا أساسيًا عن الإضافة، بالإضافة إلى أي موارد ستنشئها وأي أدوار وصول تتطلّبها.
5. في حقل **Cache-Control** عنوان الصور التي تم تغيير حجمها، أدخِل ما يلي:

public, max-age=31536000

6. اترك المَعلمات الأخرى على قيمها التلقائية.
7. انقر على تثبيت الإضافة.

أثناء انتظار اكتمال عملية التثبيت...

التثبيت باستخدام واجهة سطر الأوامر في Firebase

إذا كنت تفضّل استخدام أدوات سطر الأوامر، يمكنك أيضًا تثبيت الإضافات وإدارتها باستخدام واجهة سطر الأوامر (CLI) في Firebase. ما عليك سوى استخدام الأمر firebase ext المتوفّر في أحدث إصدار من واجهة سطر الأوامر. يمكنك الاطّلاع على مزيد من المعلومات هنا.

(اختياري) مزيد من المعلومات عن عناوين Cache-Control

تعني قيمة عنوان Cache-Control‏ public, max-age=31536000 أنّه سيتم تخزين الصورة مؤقتًا لمدة تصل إلى عام واحد. لمزيد من المعلومات عن عنوان Cache-Control، يمكنك الاطّلاع على هذه المستندات.

تعديل رمز العميل

تكتب الإضافة التي ثبّتها صورة تم تغيير حجمها في الحزمة نفسها التي تحتوي على الصورة الأصلية. يتم إلحاق الأبعاد التي تم ضبطها باسم ملف الصورة التي تم تغيير حجمها. لذا، إذا كان مسار الملف الأصلي يبدو على النحو التالي friendlymarket/user1234-car.png، سيبدو مسار ملف الصورة التي تم تغيير حجمها على النحو التالي friendlymarket/user1234-car_200x200.png.

لنحدّث التطبيق لكي يسترد الصور التي تم تغيير حجمها بدلاً من الصور بالحجم الكامل.

1. في StackBlitz، افتح الملف src/firebase-refs.js.
2. استبدِل الدالة getImageRef الحالية بالرمز التالي لإنشاء مرجع للصورة التي تم تغيير حجمها:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

تجربة الميزة

بما أنّ هذه الإضافة تراقب عمليات تحميل الصور الجديدة، لن يتم تغيير حجم صورتك الحالية.

أنشِئ مشاركة جديدة لتجربة الإضافة:

1. انقر على Friendly Market في الشريط العلوي من تطبيقك للانتقال إلى الشاشة الرئيسية.
2. انقر على الزر بيع منتج في أسفل يسار التطبيق لإنشاء بطاقة بيانات.
3. في حقل العنوان، أدخِل Coffee
4. في حقل السعر المطلوب، أدخِل 1
5. في حقل وصف السلعة، أدخِل ما يلي: Selling one cafe latte. It has foam art in the shape of a bear.
6. نزِّل هذه الصورة لفنجان قهوة على جهاز الكمبيوتر، وحمِّلها باستخدام الزر صورة المنتج. file_downloadتنزيل الصورة
7. بعد ملء جميع الحقول وتحميل صورة، انقر على نشر. سيظهر إدراج المقهى أسفل "إكسيليفون".
8. في لوحة بيانات الدوال في وحدة تحكّم Firebase، انقر على علامة التبويب السجلات. من المفترض أن تظهر لك سجلّات من الدالة توضّح أنّه تم تنفيذها.

9. انتقِل إلى لوحة بيانات مساحة التخزين للاطّلاع على صورة القهوة الأصلية ونسخة تم تغيير حجمها في المسار friendlymarket.
10. في لوحة معاينة StackBlitz، أعِد تحميل الشاشة الرئيسية لتطبيقك بضع مرات. من المفترض أن تلاحظ أنّ صورة القهوة يتم تحميلها بسرعة أكبر بكثير من صورة آلة الزايلوفون.

يتم تحميل الصورة بشكل أسرع عند تحميل الصفحة للمرة الأولى لأنّ حجمها أصغر، وعند إعادة تحميل الصفحة لاحقًا، يتم تحميلها من ذاكرة التخزين المؤقت للمتصفّح بدلاً من إرسال طلب شبكة.

5- إعادة ضبط إحدى الإضافات

المشكلة

يحفظ تطبيقك تلقائيًا نُسخًا من مسودات بيانات البائع. تعجب المستخدمين هذه الميزة، ولكن إحصاءاتك مقلقة بعض الشيء. تشير تقاريرك إلى أنّ% 10 فقط من المسودات يتم نشرها فعليًا، وأنّ% 90 المتبقية تشغل مساحة في قاعدة البيانات.

الحل

بعد إجراء بعض الحسابات التقريبية، تدرك أنّك تحتاج فقط إلى حفظ حوالي خمس مسودّات في أي وقت.

هل تتذكرون كتالوج إضافات Firebase؟ ربما يتوفّر حلّ جاهز لهذه الحالة. لنثبّت الإضافة Limit Child Nodes لإبقاء عدد المسودّات المحفوظة عند خمس أو أقل تلقائيًا. ستحذف الإضافة أقدم مسودة عند إضافة مسودة جديدة.

1. انقر على الزر تثبيت في صفحة تفاصيل الإضافة.
2. اختَر مشروع Firebase الذي تستخدمه لتطبيق الويب الخاص بالسوق.
3. اتّبِع التعليمات الظاهرة على الشاشة إلى أن تصل إلى خطوة إعداد الإضافة.
4. في حقل مسار Realtime Database، أدخِل drafts. هذا هو المسار في قاعدة البيانات حيث يتم حفظ المسودات.
5. في حقل الحد الأقصى لعدد العُقد التي يجب الاحتفاظ بها، أدخِل 5. وهذا يعني أنّه سيتم حفظ خمس مسودات لكل بطاقة بيانات، وفي حال إضافة مسودّة أخرى، سيتم حذف الأقدم تلقائيًا.
6. انقر على تثبيت الإضافة.

أثناء انتظار اكتمال عملية التثبيت...

مراقبة الإضافات

عند تثبيت إضافة، تنشئ العملية عدة دوال. قد تحتاج إلى التحقّق من عدد مرات تشغيل هذه الدوال أو الاطّلاع على السجلات ومعدّلات الخطأ. للحصول على معلومات تفصيلية حول كيفية مراقبة الإضافة، اطّلِع على مقالة إدارة الإضافات المثبَّتة. اتّبِع التعليمات الواردة في المستندات لعرض الدوال التي أنشأتها إضافة Resize Images في الخطوة السابقة.

إلغاء تثبيت الإضافات

لإزالة إضافة من مشروعك، قد تميل إلى حذف الدوال الفردية التي تنشئها الإضافة، ولكن يمكن أن يؤدي ذلك إلى سلوك غير متوقّع، لأنّ إضافة واحدة قد تنشئ دوال متعددة. تعرَّف على كيفية إلغاء تثبيت إضافة في المستندات.

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

تثبيت نُسخ متعددة من إضافة في مشروع واحد

لا يقتصر الأمر على تثبيت نسخة واحدة من إضافة معيّنة في مشروع. إذا أردت حصر الإدخالات في مسار آخر، يمكنك تثبيت نسخة أخرى من هذه الإضافة. ومع ذلك، لأغراض هذا الدرس التطبيقي حول الترميز، عليك تثبيت الإضافة مرة واحدة فقط.

مثال عملي

1. تأكَّد من تسجيل الدخول باستخدام الحساب الذي استخدمته لنشر صورة آلة الزايلوفون أو اللاتيه
2. إنشاء بعض المسودّات:
3. انقر على الزر بيع منتج في أسفل يسار التطبيق
4. عدِّل العنوان ليصبح "المسودة 1".
5. انتقِل إلى قسم المسودّات واطّلِع على عدد المسودّات. يجب أن يكون هناك اثنان على الأقل.
6. انقر على الزر FRIENDLY MARKET في شريط التطبيق العلوي. بهذه الطريقة، ستحصل على مسودة محفوظة بدون الحاجة إلى نشرها.
7. كرِّر الخطوات نفسها مع "المسودة 2" و"المسودة 3" وهكذا حتى "المسودة 6".
8. عند إنشاء "المسودة 6"، ستلاحظ أنّ "المسودة 1" تختفي من قسم المسودات.
9. كما فعلت مع إضافة Resize Images، يمكنك الاطّلاع على سجلات الدوال لمعرفة الدوال التي تم تشغيلها.

عفوًا، الحدّ الأقصى لعدد المسودّات التي يمكن الاحتفاظ بها صغير جدًا

يتواصل معك فريق دعم العملاء لإعلامك بأنّ بعض البائعين الأكثر إنتاجية يشتكون من حذف مسوداتهم قبل أن يتمكّنوا من نشرها. تتحقّق من حساباتك مع زميلك في الفريق، وتدرك أنّ حساباتك كانت خاطئة بمقدار 10,000 مرة!

كيف يمكن حلّ هذه المشكلة؟ لنعد ضبط إعدادات الإضافة المثبَّتة.

1. في اللوحة اليمنى من وحدة تحكّم Firebase، انقر على الإضافات.
2. في بطاقة الإضافة المثبَّتة، انقر على إدارة.
3. في أعلى يسار الصفحة، انقر على إعادة ضبط إعدادات الإضافة.
4. غيِّر الحدّ الأقصى لعدد العُقد التي سيتم الاحتفاظ بها إلى 50000.
5. انقر على حفظ.

هذا كل ما عليك فعله. خلال الوقت الذي يستغرقه تحديث الإضافة، يمكنك التحدث مع فريق الدعم وإبلاغه بأنّه يتم حاليًا نشر إصلاح.

6. حذف بيانات المستخدم تلقائيًا

المشكلة

تواصل معك فريق دعم العملاء مرة أخرى. يتلقّى البائعون الذين حذفوا حساباتهم رسائل إلكترونية من مستخدمين آخرين، وهم غاضبون من ذلك. توقّع هؤلاء البائعون أن يتم حذف عناوين بريدهم الإلكتروني من أنظمتك عند حذف حساباتهم.

في الوقت الحالي، يحذف فريق الدعم بيانات كل مستخدم يدويًا، ولكن يجب أن تكون هناك طريقة أفضل. تفكّر في الأمر، وتدرس كتابة مهمة مجمّعة خاصة بك يتم تشغيلها بشكل دوري وتزيل عناوين البريد الإلكتروني من الحسابات المحذوفة. ومع ذلك، يبدو أنّ حذف بيانات المستخدمين مشكلة شائعة جدًا. قد تساعد "إضافات Firebase" في حلّ هذه المشكلة أيضًا.

الحل

عليك ضبط إضافة حذف بيانات المستخدم لحذف العقدة users/uid تلقائيًا في قاعدة البيانات عندما يحذف المستخدم حسابه.

1. انقر على الزر تثبيت في صفحة تفاصيل الإضافة.
2. اختَر مشروع Firebase الذي تستخدمه لتطبيق الويب الخاص بالسوق.
3. اتّبِع التعليمات الظاهرة على الشاشة إلى أن تصل إلى خطوة إعداد الإضافة.
4. بالنسبة إلى مسارات Realtime Database، أدخِل sellers/{UID}. الجزء sellers هو العقدة التي تحتوي العناصر الفرعية فيها على عناوين البريد الإلكتروني للمستخدمين، و{UID} هو حرف بدل. باستخدام هذا الإعداد، ستعرف الإضافة أنّه عندما يحذف المستخدم الذي يحمل المعرّف الفريد 1234 حسابه، يجب أن تحذف الإضافة sellers/1234 من قاعدة البيانات.
5. انقر على تثبيت الإضافة.

أثناء انتظار اكتمال عملية التثبيت...

لنتحدّث عن إمكانية التخصيص

في هذا الدرس العملي، تبيّن لك أنّ "إضافات Firebase" يمكن أن تساعد في حلّ حالات الاستخدام الشائعة، وأنّ الإضافات قابلة للإعداد لتناسب احتياجات تطبيقك.

ومع ذلك، لا يمكن للإضافات حلّ كل المشاكل، وتُعدّ مشكلة حذف بيانات المستخدم مثالاً جيدًا على ذلك. على الرغم من أنّ إضافة "حذف بيانات المستخدم" تعالج الشكوى الحالية من استمرار عرض عناوين البريد الإلكتروني بعد حذف المستخدم لحسابه، لن تحذف الإضافة كل شيء. على سبيل المثال، ستظل بطاقة بيانات المتجر متاحة، وستبقى أي صور في Cloud Storage أيضًا. يتيح لنا الإضافة "حذف بيانات المستخدم" ضبط مسار Cloud Storage لحذفه، ولكن بما أنّ المستخدمين يمكنهم تحميل العديد من الملفات المختلفة بأسماء مختلفة، لن تتمكّن من ضبط هذه الإضافة لحذف هذه العناصر تلقائيًا. في حالات مثل هذه، قد تكون وظائف Firebase السحابية خيارًا أفضل لتتمكّن من كتابة رمز برمجي خاص بنموذج بيانات تطبيقك.

الإضافات والفوترة

لا تتوفّر إضافات Firebase بدون تكلفة (يتم تحصيل رسوم منك فقط مقابل الموارد الأساسية التي تستخدمها)، ولكن قد تتطلّب بعض الموارد الأساسية التي تحتاج إليها الإضافة إعداد الفوترة. تم تصميم هذا الدرس العملي ليتم إكماله بدون حساب فوترة. ومع ذلك، يتيح لك إعداد خطة Flame أو Blaze الاستفادة من الكثير من إضافات Firebase الرائعة.

على سبيل المثال، يمكنك تقصير عناوين URL و إرسال رسائل إلكترونية و تصدير المجموعات إلى BigQuery وغير ذلك. يمكنك الاطّلاع على الفهرس الكامل للإضافات هنا.

إذا كانت هناك إضافة تريدها ولكنّها غير متاحة حاليًا، يسعدنا معرفة ذلك. يمكنك تقديم طلب ميزة إلى فريق دعم Firebase لاقتراح إضافة جديدة.

مثال عملي

بعد اكتمال تثبيت الإضافة، احذف مستخدمًا واطّلِع على ما يحدث:

1. في وحدة تحكّم Firebase، انتقِل إلى لوحة بيانات قاعدة البيانات في الوقت الفعلي.
2. وسِّع العقدة sellers.
3. يتم ربط معلومات كل بائع بمعرّف المستخدم الفريد الخاص به. اختَر معرّف UID للمستخدم.
4. في وحدة تحكّم Firebase، انتقِل إلى لوحة بيانات المصادقة وابحث عن معرّف المستخدم الفريد.
5. وسِّع القائمة على يسار معرّف المستخدم الفريد (UID)، ثم انقر على حذف الحساب.

6. ارجع إلى لوحة بيانات Realtime Database. سيتم حذف معلومات البائع.

7. تهانينا!

على الرغم من أنّك لم تكتب الكثير من الرموز البرمجية في هذا الدرس العملي، فقد أضفت ميزات مهمة إلى تطبيق السوق.

تعرّفت على كيفية العثور على الإضافات وضبطها وتثبيتها وإعادة ضبطها. بالإضافة إلى ذلك، تعرّفت على كيفية مراقبة الإضافات المثبَّتة وكيفية إلغاء تثبيتها عند الضرورة.

الخطوات التالية

إليك بعض الإضافات الأخرى:

• ترجمة سلاسل النصوص في Cloud Firestore (مطلوب حساب فوترة)
• إضافة مستخدمين جدد إلى قوائم عناوين البريد الإلكتروني في Mailchimp (مطلوب حساب فوترة)
• تقصير عناوين URL (مطلوب حساب فوترة)

هل تحتاج إلى المزيد من الرموز المخصّصة من جهة الخادم؟

• تجربة دروس Cloud Functions for Firebase التطبيقية

مستندات مفيدة أخرى

إدارة الإضافات:

• تجربة إدارة الإضافات باستخدام Firebase CLI
• ضبط تنبيهات الميزانية
• التحقّق من عدد مرّات تشغيل إضافة مثبّتة
• تحديث إضافة مثبَّتة إلى إصدار جديد
• إلغاء تثبيت إحدى الإضافات

التعرّف على التفاصيل الدقيقة حول الإضافات:

• عرض الرمز المصدري والمستندات لكل إضافة على GitHub
• مزيد من المعلومات حول الأذونات وإمكانية الوصول الممنوحة لإحدى الإضافات