كيفية تتبع مشاهدات الصفحة على مدونتك باستخدام Supabase

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

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

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

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

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

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

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

ما هو sim لا يتم توفيره مم # 2

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

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

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

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

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

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

لقطة شاشة لتفاصيل المشروع على قاعدة Supabase

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

لقطة شاشة تعرض مفاتيح واجهة برمجة تطبيقات مشروع Supabase

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

 NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\n

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

استخدم ال أمر SQL القياسي لإنشاء جدول اتصل الآراء .

 CREATE TABLE views (\n id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,\n slug text UNIQUE NOT NULL,\n view_count bigint DEFAULT 1 NOT NULL,\n updated_at timestamp DEFAULT NOW() NOT NULL\n);\n

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

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

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

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

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

انتقل إلى قسم محرر SQL في الجزء الأيمن.
انقر فوق استعلام جديد.

أضف استعلام SQL هذا لإنشاء وظيفة قاعدة البيانات.

 CREATE OR REPLACE FUNCTION update_views(page_slug TEXT) 
RETURNS void 
LANGUAGE plpgsql 
AS $$ 
BEGIN 
    IF EXISTS (SELECT FROM views WHERE slug=page_slug) THEN 
        UPDATE views 
        SET view_count = view_count + 1, 
            updated_at = now() 
        WHERE slug = page_slug; 
    ELSE 
        INSERT into views(slug) VALUES (page_slug); 
    END IF; 
END; 
$$;

انقر فوق تشغيل أو Cmd + Enter (Ctrl + Enter) لتنفيذ الاستعلام.

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

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

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

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

 npm install @supabase/supabase-js\n

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

 import { createClient } from '@supabase/supabase-js';\nconst supabaseUrl: string = process.env.NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: string = process.env.SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient(supabaseUrl, supabaseServerKey);\nexport { supabase };\n

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

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

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

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

 import { supabase } from "../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } from "next";\nconst handler = async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === "POST") {\n await supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n return res.status(200).json({\n message: "Success",\n });\n }\n if (req.method === "GET") {\n const { data } = await supabase\n .from("views")\n .select("view_count")\n .filter("slug", "eq", req.query.slug);\n if (data) {\n return res.status(200).json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n return res.status(400).json({\n message: "Invalid request",\n });\n};\nexport default handler;\n

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

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

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

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

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

واجه جهاز الكمبيوتر الخاص بك مشكلة ويجب إعادة تشغيله

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

 npm install swr\n

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

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

 import useSWR from "swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = async (input: RequestInfo) => {\n const res: Response = await fetch(input);\n return await res.json();\n};\nconst ViewsCounter = ({ slug }: Props) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n <span>{`${\n (data?.total) ? data.total :"0"\n } views`}</span>\n );\n};\nexport default ViewsCounter;\n

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

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

 import { useEffect } from "react";\nimport ViewsCounter from "../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Props) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n method: 'POST'\n });\n }, [slug]);\nreturn (\n <div>\n <ViewsCounter slug={slug}/>\n // blog content\n </div>\n)\n}\nexport default Post\n

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

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

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

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