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

1 المقدمة

الأهداف

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

ما سوف تبنيه

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

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

ما ستتعلمه

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

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

ماذا ستحتاج

• جهاز كمبيوتر مثبت عليه متصفح ويب حديث (يوصى باستخدام Chrome)
• حساب جوجل

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

إنشاء مشروع Firebase

1. في وحدة تحكم Firebase ، انقر فوق إضافة مشروع ، وقم بتسمية مشروع Firebase FriendlyMarket .
2. انقر فوق خيارات إنشاء المشروع. اقبل شروط Firebase. تخطي إعداد Google Analytics، لأنك لن تستخدم Analytics في هذا التطبيق.
3. انتظر حتى يتم توفير المشروع، ثم انقر فوق "متابعة" .

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

• مصادقة Firebase للتعرف على المستخدمين بسهولة
• قاعدة بيانات Firebase Realtime لحفظ البيانات المنظمة في السحابة والحصول على إشعار فوري عند تحديث البيانات
• التخزين السحابي لـ Firebase لحفظ الصور في السحابة

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

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

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

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

تمكين قاعدة البيانات في الوقت الحقيقي

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

1. في قسم التطوير في اللوحة اليمنى لوحدة تحكم Firebase، انقر فوق قاعدة البيانات .
2. قم بالتمرير لأسفل الصفحة بعد جزء Cloud Firestore ، وانقر فوق إنشاء قاعدة بيانات في جزء قاعدة بيانات Realtime .

3. حدد البدء في وضع القفل ، ثم انقر فوق تمكين .

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

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

1. في الجزء العلوي من لوحة معلومات قاعدة بيانات Realtime، انقر فوق علامة التبويب القواعد .

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. انقر فوق نشر .

تمكين التخزين السحابي

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

1. في قسم التطوير في اللوحة اليمنى لوحدة تحكم Firebase، انقر فوق التخزين .
2. انقر فوق البدء .

3. اقبل الإعدادات الافتراضية لإنشاء حاوية التخزين الافتراضية الخاصة بك (انقر فوق التالي ، واحتفظ بالموقع الافتراضي، وانقر فوق تم ).

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

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

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

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    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 Hosting لهذا التطبيق أيضًا . ستستخدم جزء معاينة 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 من جانب العميل و Firebase Admin SDK بتعيين هذه الرؤوس.

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

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

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

حل أسهل

انت محظوظ. هناك حل أسهل: ملحقات Firebase! دعونا نتحقق من كتالوج الإضافات المتاحة على موقع Firebase .

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

دعونا نستخدم هذا الامتداد في تطبيقك!

تثبيت ملحق

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

public, max-age=31536000

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

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

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

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

(اختياري) تعرف على المزيد حول رؤوس التحكم في ذاكرة التخزين المؤقت

قيمة رأس التحكم في ذاكرة التخزين public, max-age=31536000 تعني أنه سيتم تخزين الصورة مؤقتًا لمدة تصل إلى عام واحد. لمعرفة المزيد حول رأس التحكم في ذاكرة التخزين المؤقت، راجع هذه الوثائق .

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

يقوم الامتداد الذي قمت بتثبيته بكتابة صورة تم تغيير حجمها في نفس مجموعة الصورة الأصلية. تحتوي الصورة التي تم تغيير حجمها على الأبعاد المكونة الملحقة باسم الملف الخاص بها. لذلك، إذا كان مسار الملف الأصلي يبدو مثل 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. بالنسبة لمسار قاعدة البيانات في الوقت الحقيقي ، أدخل drafts . هذا هو المسار في قاعدة البيانات حيث يتم حفظ المسودات.
5. للحصول على الحد الأقصى لعدد العقد المراد الاحتفاظ بها ، أدخل 5 . وهذا يعني أنه سيتم حفظ خمس مسودات لكل قائمة عنصر، وإذا تمت إضافة مسودة أخرى، فسيتم حذف المسودة الأقدم تلقائيًا.
6. انقر فوق تثبيت الامتداد .

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

امتدادات المراقبة

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

إلغاء تثبيت الملحقات

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

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

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

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

شاهده على أرض الواقع

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

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

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

كيف يمكنك اصلاح هذا؟ دعونا نعيد تكوين الامتداد المثبت!

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

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

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

المشكلة

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

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

الحل

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

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

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

دعونا نتحدث عن التخصيص

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

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

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

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

على سبيل المثال، يمكنك تقصير عناوين URL ، وتشغيل البريد الإلكتروني ، وتصدير المجموعات إلى BigQuery ، والمزيد! تحقق من الكتالوج الكامل للملحقات هنا .

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

شاهده على أرض الواقع

بعد اكتمال تثبيت الامتداد، احذف المستخدم وشاهد ما سيحدث:

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

6. ارجع إلى لوحة معلومات قاعدة بيانات Realtime . سوف تختفي معلومات البائع!

7. تهانينا!

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

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

ماذا بعد؟

تحقق من بعض هذه الإضافات الأخرى:

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

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

• تحقق من وظائف السحابة لـ Firebase codelab

وثائق مفيدة أخرى

إدارة الامتدادات:

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

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

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