تهيئة اعدادات فايربيس مع قالب بلس يو اي

السلام عليكم ورحمة الله وبركات

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

اعلام هذا الدليل خاص بقالب بلس يو اي الرولز المقدم متوافق فقط مع قالب بلس يو لتفعيل عرض عداد المشاهدات (الزيارات) و ايضا يمكنك اضافة ميزات اخرى تتعلق بقاعدة بيانات ان كنت تمتلك معلومات كافية للتعامر مع منصة فايربيس.

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

إنشاء مشروع Firebase

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

1. اذهب إلى وحدة تحكم Firebase.
2. انقر على + إنشاء مشروع واتبع التعليمات لإنشاء مشروع. يمكنك تسمية مشروعك بأي اسم تريده.
3. بمجرد إنشاء المشروع، انتقل إلى إعدادات المشروع.
4. ضمن عام > تطبيقاتك، انقر على </> ويب واتبع التعليمات لإنشاء تطبيق ويب في المشروع.

لقد قمت الآن بإنشاء مشروع Firebase لتطبيقات الويب.

إعداد قواعد Realtime Database

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

1. اذهب إلى مشروع Firebase > Realtime Database.
2. انتقل إلى علامة التبويب القواعد.
3. الصق JSON التالي مع إجراء التغييرات المناسبة في محرر القواعد وانقر على نشر.

   تحذير!
   قد يتم تحديث القواعد المقدمة في المستقبل من قبل فريق فاينشوب ديزاين في حالة العثور على أي مشكلة حرجة أو توفر إضافات جديدة. يوصى بتحديث القواعد على النحو التالي بانتظام (مرة واحدة على الأقل كل 3 أشهر) عن طريق زيارة هذه الصفحة.
   تم آخر تحديث للقواعد في 1 سبتمبر 2023 بواسطة Deo Kumar.

   {
     "rules": {
       ".write": false,
       ".read": false,
       "blogs": {
         "$blog_id": {
           ".validate": "$blog_id.matches(/^\\d{18,22}$/) && ($blog_id === '000000000000000000' || $blog_id === '0000' || $blog_id === '0000')",
           "posts": {
             "$post_id": {
               ".validate": "$post_id.matches(/^\\d{18,22}$/)",
               "views": {
                 ".read": true,
                 ".write": "newData.exists()",
                 ".validate": "newData.isNumber() && newData.val() % 1 === 0 && newData.val() === (data.exists() ? data.val() + 1 : 1)"
               }
             }
           }
         }
       }
     }
   }

   {
     "rules": {
       ".read": true,
       ".write": true
     }
   }

الحصول على إعدادات Firebase

نحتاج الآن إلى كائن الإعدادات لتطبيق ويب مشروع Firebase الخاص بنا. اتبع الخطوات للعثور عليه.

1. انتقل إلى مشروع Firebase الخاص بك.
2. اذهب إلى إعدادات المشروع.
3. ضمن علامة التبويب عام > علامة التبويب تطبيقاتك، حدد تطبيق الويب الخاص بك وانقر على الإعدادات. ستتمكن من رؤية كائن Javascript يبدو كالتالي:

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
     authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
     databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
     projectId: "xxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx.appspot.com",
     messagingSenderId: "000000000000",
     appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
     measurementId: "G-XXXXXXXXXX",
   };

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

احتفظ بعلامة تبويب المتصفح مفتوحة لأننا سنحتاج إلى معلومات هذا الكائن.

إعدادات Firebase

سنضيف الآن إعدادات Firebase إلى مدونتنا.

1. اذهب إلى لوحة تحكم Blogger وانتقل إلى التخطيط.
2. ابحث عن أداة قائمة الروابط بعنوان Firebase Configurations (إذا لم تكن قد أعدت تسميتها)، انقر على زر تعديل.
3. قم بإنشاء أو تعديل الروابط الموجودة لكل أزواج المفتاح-القيمة، حيث يكون المفتاح هو اسم الموقع والقيمة (المحتوى بين علامات الاقتباس) هي عنوان URL للموقع على التوالي كما هو موضح أدناه.

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
     authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
     databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
     projectId: "xxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx.appspot.com",
     messagingSenderId: "000000000000",
     appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
     measurementId: "G-XXXXXXXXXX",
   };

   
   يجب أن تبدو روابطك كما هو موضح أدناه:
   

   اسم الموقع	عنوان URL للموقع
   apiKey	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx
   authDomain	xxxxxxxxxxxxx.firebaseapp.com
   databaseURL	https://xxxxxxxxxxxxx.firebaseio.com
   projectId	xxxxxxxxxxxxx
   storageBucket	xxxxxxxxxxxxx.appspot.com
   messagingSenderId	000000000000
   appId	1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx
   measurementId	G-XXXXXXXXXX

4. احفظ الأداة لتطبيق التغييرات.

تم! لقد قمت بإعداد مشروع Firebase بنجاح مع مدونتك.

ختاما

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

المصدر الاصلي:
https://plus-ui.blogspot.com/2024/10/firebase.html