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

تعد مشاهدات الصفحة مقياسًا مهمًا لتتبع أداء الويب. توفر أدوات البرامج مثل Google Analytics و Fathom طريقة بسيطة للقيام بذلك باستخدام برنامج نصي خارجي.

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

Supabase هو بديل Firebase مفتوح المصدر يمكنه مساعدتك في تتبع مشاهدات الصفحة في الوقت الفعلي.

جهز موقعك لبدء تتبع مشاهدات الصفحة

يجب أن يكون لديك مدونة Next.js لمتابعة هذا البرنامج التعليمي. إذا لم يكن لديك واحد بالفعل ، يمكنك ذلك إنشاء مدونة قائمة على Markdown باستخدام رد فعل Markdown.

يمكنك أيضًا استنساخ قالب بداية مدونة Next.js الرسمي من ملف جيثب مخزن.

Supabase هو بديل Firebase يوفر قاعدة بيانات Postgres والمصادقة وواجهات برمجة التطبيقات الفورية ووظائف الحافة والاشتراكات في الوقت الفعلي والتخزين.

سوف تستخدمه لتخزين مشاهدات الصفحة لكل منشور مدونة.

قم بإنشاء قاعدة بيانات Supabase

اذهب إلى موقع Supabase وقم بتسجيل الدخول أو التسجيل للحصول على حساب.

instagram viewer

في لوحة معلومات Supabase ، انقر فوق مشروع جديد واختر منظمة (سوف يكون Supabase قد أنشأ منظمة تحت اسم المستخدم الخاص بحسابك).

أدخل اسم المشروع وكلمة المرور ثم انقر فوق إنشاء مشروع جديد.

في صفحة الإعدادات ضمن قسم API ، انسخ عنوان URL الخاص بالمشروع والمفاتيح العامة والسرية.

افتح ال .env.local ملف في مشروع Next.js وانسخ تفاصيل واجهة برمجة التطبيقات هذه.

NEXT_PUBLIC_SUPABASE_URL =""\ nNEXT_PUBLIC_SUPABASE_KEY =""\ nSUPABASE_SERVICE_KEY =""\ن

بعد ذلك ، انتقل إلى محرر SQL وانقر فوق استعلام جديد.

استخدم ال أمر SQL القياسي لإنشاء جدول مُسَمًّى الآراء.

يخلقطاولة المشاهدات (\ n بطاقة تعريفبيجينتولدتبواسطةتقصيرمثلهوية أساسي مفتاح، \ n سبيكة نصفريدلاباطل، \ n view_count بيجينتتقصير1لاباطل، \ n updated_at الطابع الزمنيتقصيرالآن() لاباطل\ n) ؛ \ n

بدلاً من ذلك ، يمكنك استخدام محرر الجدول لإنشاء جدول طرق العرض:

يوجد محرر الجدول في الجزء الأيمن من لوحة المعلومات.

قم بإنشاء إجراء مخزن في قاعدة Supabase لتحديث طرق العرض

يحتوي Postgres على دعم مدمج لوظائف SQL والتي يمكنك الاتصال بها عبر Supabase API. ستكون هذه الوظيفة مسؤولة عن زيادة عدد المشاهدات في جدول المشاهدات.

لإنشاء وظيفة قاعدة بيانات ، اتبع الإرشادات التالية:

  1. انتقل إلى قسم محرر SQL في الجزء الأيمن.
  2. انقر فوق استعلام جديد.
  3. أضف استعلام SQL هذا لإنشاء وظيفة قاعدة البيانات. 
    يخلقأويستبدلوظيفة update_views (page_slug نص)
    عائدات فارغ
    اللغة plpgsql
    مثل $$
    يبدأ
     إذا كان EXISTS (يختارمن الآراء أين slug = page_slug) ثم
    تحديث الآراء
    تعيين view_count = view_count + 1,
     updated_at = الآن ()
     WHERE slug = page_slug ؛
    آخر
    إدراجداخل وجهات النظر (سبيكة) قيم (page_slug) ،
    نهايةلو;
    نهاية;
    $$;
  4. انقر فوق تشغيل أو Cmd + Enter (Ctrl + Enter) لتنفيذ الاستعلام.

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

قم بإعداد عميل Supabase في Next.js

تثبيت وتكوين Supabase

قم بتثبيت حزمة supabase / supabase-js عبر npm للاتصال بقاعدة البيانات من Next.js.

تثبيت npm تضمين التغريدة/supabase-js\n

بعد ذلك ، قم بإنشاء ملف /lib/supabase.ts ملف في جذر مشروعك وتهيئة عميل Supabase.

يستورد {createClient} من"@ supabase / supabase-js"؛ \ nconst supabaseUrl: سلسلة = process.env. NEXT_PUBLIC_SUPABASE_URL || ''؛ \ nconst supabaseServerKey: سلسلة = process.env. SUPABASE_SERVICE_KEY || ''؛ \ nconst supabase = createClient (supabaseUrl، supabaseServerKey) ؛ \ nexport {supabase} ؛ \ n

تذكر أنك حفظت بيانات اعتماد API في .env.local عندما أنشأت قاعدة البيانات.

تحديث طرق عرض الصفحة

قم بإنشاء مسار API يجلب مشاهدات الصفحة من Supabase ويقوم بتحديث عدد المشاهدات في كل مرة يقوم فيها المستخدم بزيارة الصفحة.

سوف تقوم بإنشاء هذا الطريق في /api مجلد داخل ملف يسمى وجهات النظر / [سبيكة] .ts. يؤدي استخدام الأقواس حول اسم الملف إلى إنشاء مسار ديناميكي. سيتم إرسال المعلمات المتطابقة كمعامل طلب بحث يسمى slug.

يستورد {supabase} من"../../../lib/supabase/admin"؛ \ n استيراد {NextApiRequest، NextApiResponse} من"التالي"؛ \ n معالج كونست = غير متزامن (مطلوب: NextApiRequest ، الدقة: NextApiResponse) => {\ n لو (مطلوب طريقة "بريد") {\ن انتظر supabase.rpc ("update_views"، {\ n page_slug: req.query.slug، \ n}) ؛ \ n يعود res.status (200) .json ({\ n message: "نجاح"، \ n}) ؛ \ n} \ n لو (مطلوب طريقة "يحصل") {\ن مقدار ثابت {البيانات} = انتظر قاعدة supabase \ n. من ("الآراء") \ n. حدد ("view_count") \ n عامل التصفية ("سبيكة", "مكافئ"، req.query.slug) ؛ \ n لو (بيانات) {\ n يعود res.status (200) .json ({\ n total: data [0] ؟. view_count || 0، \ n}) ؛ \ n} \ n} \ n يعود res.status (400) .json ({\ n message: "طلب غير صالح"، \ n})؛ \ n}؛ \ n التصدير تقصير معالج ؛ \ n

يتحقق أول بيان إذا كان الطلب عبارة عن طلب POST. إذا كان الأمر كذلك ، فإنه يستدعي دالة update_views SQL ويمرر في slug كوسيطة. ستعمل الوظيفة على زيادة عدد المشاهدات أو إنشاء إدخال جديد لهذه المشاركة.

تتحقق عبارة if الثانية إذا كان الطلب هو طريقة GET. إذا كان الأمر كذلك ، فإنه يجلب إجمالي عدد المشاهدات لتلك المشاركة ويعيدها.

إذا لم يكن الطلب طلب POST أو GET ، تقوم وظيفة المعالج بإرجاع رسالة "طلب غير صالح".

أضف مشاهدات الصفحة إلى المدونة

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

ابدأ بتثبيت حزمة swr. ستستخدمه لجلب البيانات من واجهة برمجة التطبيقات.

npm ثَبَّتَ swr \ n

swr تعني قديمًا أثناء إعادة التحقق. يسمح لك بعرض المشاهدات للمستخدم أثناء جلب البيانات المحدثة في الخلفية.

ثم قم بإنشاء مكون جديد يسمى viewsCounter.tsx وأضف ما يلي:

يستورد useSWR من"SWR"؛ \ n الواجهة الأمامية {\ n slug: string؛ \ n} \ n الجلب الثابت = غير متزامن (الإدخال: RequestInfo) => {\ n مقدار ثابت الدقة: الاستجابة = انتظر إحضار (إدخال) ؛ \ n يعودانتظر res.json () ؛ \ n} ؛ \ n ViewsCounter = ({slug}: الدعائم) => {\ nconst {data} = useSWR (`/ api / views /$ {slug}`، الجلب) ؛ \ n العودة (\ n {`$ {\ n (data؟ .total)؟ إجمالي البيانات:"0"\ن } المشاهدات`}</ span> \ n) ؛ \ n} ؛ \ n viewCounter الافتراضي للتصدير ؛ \ n

يعرض هذا المكون إجمالي المشاهدات لكل مدونة. تقبل الرابط الثابت للمنشور كعنصر خاص وتستخدم هذه القيمة لتقديم الطلب إلى واجهة برمجة التطبيقات. إذا قامت API بإرجاع طرق عرض ، فإنها تعرض هذه القيمة وإلا فإنها تعرض "0 مشاهدات".

لتسجيل المشاهدات ، أضف الكود التالي إلى المكون الذي يعرض كل منشور.

يستورد {useEffect} من"تتفاعل"؛ \ n استيراد ViewsCounter من"../../components/viewsCounter"؛ \ n الواجهة الأمامية {\ n slug: string؛ \ n} \ nconst Post = ({slug}: الدعائم) => {\ n useEffect (() => {\ n جلب (`/ api / views /$ {slug}`، {\ n الطريقة: 'بريد'\ n}) ؛ \ n} ، [slug]) ؛ \ n العودة (\ n 
\ن \ن // محتوى المدونة \ n 

\ n) \ n} \ n تصدير النشر الافتراضي \ n

تحقق من قاعدة بيانات Supabase لترى كيف يتم تحديث عدد المشاهدات. يجب أن يزيد بمقدار 1 في كل مرة تزور فيها منشورًا.

تتبع أكثر من مشاهدات الصفحة

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

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