شرح تفعيل عداد المشاهدات في قالب بلوجر Plus UI v3.1.0 خطوة بخطوة

يعد عداد المشاهدات أداةً أساسية لقياس أداء المحتوى وفهم تفاعل الجمهور. فهو لا يظهر لك مدى انتشار مقالتك فحسب، بل يساعدك في اكتشاف ما يلفت انتباه زوارك، مما يُمكّنك من تطوير استراتيجياتك وتحسين محتواك مستقبلًا.

في هذا الشرح المفصّل، سنأخذك في جولة عملية لتفعيل عداد عدد المشاهدات داخل قالب Plus UI v3.1.0، وهو أحد أشهر القوالب الاحترافية لمنصة بلوجر. سنُوضح الخطوات بدقة ونسهّلها عليك، دون الحاجة لخبرة برمجية مسبقة. فقط اتبع الإرشادات خطوة بخطوة وستحصل على عرض أنيق ومباشر لعدد مشاهدات كل تدوينة على مدونتك.

شرح تفعيل عداد عدد المشاهدات في قالب بلوجر Plus UI v3.1.0 خطوة بخطوة.

ماهو عداد المشاهدات في الوقت الفعلي

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

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

إنشاء مشروع جديد في Firebase لربط عداد المشاهدات

قبل أن تتمكن من تفعيل عداد المشاهدات في قالب Plus UI v3.1.0، ستحتاج إلى ربط مدونتك بخدمة Firebase، وهي منصة تطوير قوية تابعة لشركة Google تتيح لك تخزين البيانات والتفاعل معها في الوقت الفعلي.

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

1. قم بزيارة الموقع الرسمي لـ Firebase.
2. انقر على زر "إضافة مشروع" (Add Project).
3. في نافذة إعداد المشروع، أدخل اسمًا مناسبًا لمشروعك (مثل: blog-view-counter)، ثم انقر على "متابعة".
4. عند ظهور خيار تفعيل Google Analytics، يمكنك اختيار حساب Google Analytics الذي تريدة، يمكنك تفعيله مؤقتًا أو تركه مفعلاً حسب رغبتك، ثم اضغط على"إنشاء مشروع".
5. انتظر بضع لحظات حتى يتم تجهيز مشروعك، ثم اضغط على "متابعة" للدخول إلى لوحة التحكم الخاصة به.

إنشاء تطبيق ويب في Firebase

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

إنشاء تطبيق الويب هو خطوة محورية، حيث يتم من خلالها توليد مفاتيح الربط (API Keys) وتعريف المشروع عبر كود JavaScript في إعدادات مدونتك. دعنا الآن ننتقل لتنفيذ هذه الخطوة بطريقة دقيقة وواضحة.

1. افتح لوحة التحكم في مشروع Firebase الذي أنشأته مسبقًا.
2. من الزاوية العلوية اليمنى، انقر على أيقونة الإعدادات (⚙) ثم اختر "Project settings" - إعدادات المشروع.
3. ضمن تبويب "General" - عام، انتقل إلى قسم "Your apps" - تطبيقاتك.
4. ستظهر لك عدة أيقونات لإنشاء تطبيقات مختلفة. انقر على أيقونة الويب التي تأخذ شكل ( </> ).
5. في النافذة المنبثقة، قم بإدخال اسم لتطبيق الويب – يمكنك استخدام اسم مدونتك أو أي اسم مميز.
6. تأكد من إلغاء تحديد خيار "Also set up Firebase Hosting" (لأننا لا نحتاج الاستضافة)، ثم انقر على زر "Register app" - تسجيل التطبيق.
7. بعد التسجيل، ستظهر لك صفحة تحتوي على كود إعداد Firebase بلغة JavaScript. هذا الكود يحتوي على جميع مفاتيح الاتصال اللازمة لتضمينها لاحقًا داخل قالب بلوجر.
8. قم بنسخ كود التهيئة هذا واحتفظ به في مكان آمن، حيث سنحتاجه لاحقًا عند ربط عداد المشاهدات في مدونتك.
9. قم بالرجوع الى الرئيسية، سيظهر الكود الخاص بمفاتيح الاتصال ضمن تطبيق الويب الذي قمت بإنشائة.

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

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

بعد إنشاء مشروع Firebase وتفعيله، تأتي مرحلة في غاية الأهمية وهي إعداد قواعد الأمان الخاصة بقاعدة البيانات في الوقت الفعلي (Realtime Database). هذه القواعد تتحكم بمن يمكنه قراءة البيانات أو تعديلها، مما يجعل بياناتك محمية من التلاعب أو الوصول غير المصرح به.

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

1. توجّه إلى لوحة مشروعك في Firebase الذي أنشأته سابقًا.
2. من الشريط الجانبي الأيسر، انقر على خيار "Realtime Database" - قاعدة البيانات في الوقت الفعلي.
3. إذا لم تكن قد أنشأت قاعدة بيانات بعد، قم بالنقر على زر "Create Database" واتبع خطوات الإعداد الافتراضية لاختيار الموقع وبدء التهيئة.
4. بمجرد دخولك إلى قاعدة البيانات، انتقل إلى علامة التبويب "Rules" - القواعد من الأعلى.
5. ستظهر أمامك نافذة محرر القواعد (JSON Editor)، قم بحذف المحتوى الموجود فيها بالكامل.
6. انسخ الكود التالي والصقه داخل محرر القواعد:

{
  "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)"
            }
          }
        }
      }
    }
  }
}

7. قم بتعديل القيم داخل الشيفرة لتعكس معرفات مدونتك الخاصة. ستجد في السطر التالي ثلاث خانات يمكن تخصيصها:
   ($blog_id === '000000000000000000' || $blog_id === '0000' || $blog_id === '0000')
   يمكنك استبدال هذه القيم بـID المدونة الخاصة بك في بلوجر، مما يسمح بتفعيل العداد لأكثر من مدونة في نفس الوقت.
8. بعد الانتهاء من التعديل، انقر على زر "Publish" - نشر في أعلى يمين المحرر لحفظ وتطبيق القواعد.
9. تهانينا! أصبحت قاعدة بياناتك محمية الآن وتسمح فقط بتسجيل المشاهدات وفق الشروط التي حددتها.

الحصول على كود التكوين (firebaseConfig)

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

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

1. افتح Firebase Console وانتقل إلى مشروعك الذي أنشأته مسبقًا.
2. من الزاوية العلوية اليمنى، انقر على أيقونة الإعدادات (⚙) واختر "Project settings" - إعدادات المشروع.
3. ضمن تبويب "General" - عام، مرّر للأسفل حتى تصل إلى قسم "Your apps - تطبيقاتك".
4. اختر تطبيق الويب الذي أنشأته بالنقر عليه، ثم انقر على زر "Config" أو "تكوين".
5. سيظهر لك كود 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"
};

6. قم بنسخ الكود بالكامل واحتفظ به مؤقتًا في مكان آمن، حيث سنستخدمه لاحقًا.

تنبية! ملاحظة مهمة: إذا لم يظهر الحقل databaseURL داخل كود التكوين، فهذا يعني أنك لم تقم بإنشاء قاعدة بيانات Realtime بعد. لحل ذلك، انتقل إلى قسم "Realtime Database" في القائمة الجانبية، أنشئ قاعدة بيانات، ثم أعد فتح صفحة التكوين للتحقق من ظهور الحقل.

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

إعداد تكوينات Firebase

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

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

1. افتح لوحة تحكم بلوجر الخاصة بمدونتك.
2. انتقل إلى قسم "التخطيط" - Layout.
3. ابحث عن أداة بعنوان "Firebase Configurations" أو أي اسم مشابه كنت قد خصصته أثناء إعداد التخطيط.
4. انقر على زر "تحرير - Edit" الخاص بهذه الأداة.
5. قم بإضافة أو تعديل الروابط (Links) داخل الأداة، بحيث يكون:
   • اسم الموقع (Site Name) = اسم الخاصية مثل: apiKey
   • عنوان URL (Site URL) = القيمة بين علامتي الاقتباس لكود التكوين
6. مثال عملي للإدخالات:
   • 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
7. بعد إدخال جميع القيم بشكل صحيح، انقر على زر "حفظ" لحفظ التغييرات.

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

ختامًا

بهذا نكون قد استعرضنا معًا خطوات تفعيل عداد المشاهدات في قالب بلوجر Plus UI v3.1.0 بشكل متكامل، بداية من إعداد مشروع Firebase، مرورًا بتكوين قاعدة البيانات وربط التكوينات داخل التخطيط، وصولًا إلى التفعيل النهائي. اتباعك لهذه الخطوات بدقة سيضمن عمل العداد بسلاسة وأمان، مع تقديم تجربة متقدمة لزوار مدونتك.

شاهد ايضا :