Kā sekot līdzi lapu skatījumiem savā emuārā, izmantojot Supabase

Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Lapu skatījumi ir svarīgs rādītājs tīmekļa veiktspējas izsekošanai. Programmatūras rīki, piemēram, Google Analytics un Fathom, nodrošina vienkāršu veidu, kā to izdarīt, izmantojot ārēju skriptu.

Bet varbūt jūs nevēlaties izmantot trešās puses bibliotēku. Šādā gadījumā varat izmantot datu bāzi, lai sekotu līdzi savas vietnes apmeklētājiem.

Supabase ir atvērtā pirmkoda Firebase alternatīva, kas var palīdzēt sekot līdzi lapu skatījumiem reāllaikā.

Sagatavojiet savu vietni, lai sāktu izsekot lapu skatījumiem

Lai sekotu līdzi šai apmācībai, jums ir nepieciešams Next.js emuārs. Ja jums tāda vēl nav, varat izveidot uz Markdown balstītu emuāru, izmantojot react-markdown .

Varat arī klonēt oficiālo Next.js emuāra sākuma veidni no tās GitHub krātuve.

Supabase ir Firebase alternatīva, kas nodrošina Postgres datu bāzi, autentifikāciju, tūlītējas API, Edge funkcijas, reāllaika abonementus un krātuvi.

Jūs to izmantosit, lai saglabātu katra emuāra ieraksta lapu skatījumus.

Izveidojiet Supabase datu bāzi

Dodieties uz Supabase vietne un pierakstieties vai reģistrējieties kontam.

Supabase informācijas panelī noklikšķiniet uz Jauns Projekts un izvēlieties organizāciju (Supabase būs izveidojusi organizāciju ar jūsu konta lietotājvārdu).

Supabase informācijas paneļa ekrānuzņēmums

Ievadiet projekta nosaukumu un paroli, pēc tam noklikšķiniet uz Izveidojiet jaunu projektu.

Ekrānuzņēmums ar projekta informāciju vietnē Supabase

Iestatījumu lapā sadaļā API kopējiet projekta URL un publisko un slepeno atslēgu.

Ekrānuzņēmums, kurā redzamas Supabase projekta API atslēgas

Atveriet .env.local failu Next.js projektā un kopējiet šo API informāciju.

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

Pēc tam dodieties uz SQL redaktoru un noklikšķiniet uz Jauns vaicājums .

Izmantojiet standarta SQL komanda, lai izveidotu tabulu sauca skatījumi .

 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

Varat arī izmantot tabulu redaktoru, lai izveidotu skatu tabulu:

Tabulas redaktors atrodas informācijas paneļa kreisajā rūtī.

Izveidojiet Supabase saglabāto procedūru skatu atjaunināšanai

Postgres ir iebūvēts atbalsts SQL funkcijām, kuras varat izsaukt, izmantojot Supabase API. Šī funkcija būs atbildīga par skatījumu skaita palielināšanu skatījumu tabulā.

Lai izveidotu datu bāzes funkciju, izpildiet šos norādījumus:

Kreisajā rūtī atveriet sadaļu SQL redaktors.
Noklikšķiniet uz Jauns vaicājums.

Pievienojiet šo SQL vaicājumu, lai izveidotu datu bāzes funkciju.

 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; 
$$;

Noklikšķiniet uz Palaist vai Cmd + Enter (Ctrl + Enter), lai izpildītu vaicājumu.

Šo SQL funkciju sauc par update_views, un tā pieņem teksta argumentu. Vispirms tiek pārbaudīts, vai šis emuāra ieraksts jau pastāv tabulā, un, ja ir, tas palielina skatījumu skaitu par 1. Ja tā nav, tiek izveidots jauns ieraksts ziņojumam, kura skatījumu skaits pēc noklusējuma ir 1.

Iestatiet Supabase klientu programmā Next.js

Instalējiet un konfigurējiet Supabase

Instalējiet @supabase/supabase-js pakotni, izmantojot npm, lai izveidotu savienojumu ar datu bāzi no Next.js.

 npm install @supabase/supabase-js\n

Pēc tam izveidojiet a /lib/supabase.ts failu sava projekta saknē un inicializējiet Supabase klientu.

 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

Atcerieties, ka, veidojot datu bāzi, jūs saglabājāt API akreditācijas datus .env.local.

Atjaunināt lapu skatījumus

Izveidojiet API maršrutu, kas ienes lapu skatījumus no Supabase un atjaunina skatījumu skaitu ikreiz, kad lietotājs apmeklē lapu.

Jūs izveidosit šo maršrutu /api mape failā ar nosaukumu skatījumi/[slug].ts . Izmantojot iekavas ap faila nosaukumu, tiek izveidots dinamisks maršruts. Atbilstošie parametri tiks nosūtīti kā vaicājuma parametrs, ko sauc par 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

Pirmais if paziņojums pārbauda, vai pieprasījums ir POST pieprasījums. Ja tā ir, tā izsauc SQL funkciju update_views un nodod slug kā argumentu. Funkcija palielinās skatījumu skaitu vai izveidos jaunu ierakstu šai ziņai.

Otrais if paziņojums pārbauda, vai pieprasījums ir GET metode. Ja tā ir, tā ienes šīs ziņas kopējo skatījumu skaitu un atgriež to.

Ja pieprasījums nav POST vai GET pieprasījums, apstrādātāja funkcija atgriež ziņojumu “Nederīgs pieprasījums”.

Pievienojiet emuāram lapu skatījumus

Lai izsekotu lapu skatījumus, ikreiz, kad lietotājs dodas uz lapu, ir jānoklikšķina uz API maršruta.

Sāciet ar swr pakotnes instalēšanu. Jūs to izmantosit, lai iegūtu datus no API.

 npm install swr\n

swr apzīmē novecojušu, bet atkārtoti apstiprināt. Tas ļauj lietotājam parādīt skatus, vienlaikus ienesot jaunākos datus fonā.

Pēc tam izveidojiet jaunu komponentu ar nosaukumu viewsCounter.tsx un pievienojiet šo:

kā saglabāt fotoattēlus privātus Facebook

 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

Šis komponents parāda kopējo skatījumu skaitu katram emuāram. Tas pieņem ziņas locekli kā palīgierīci un izmanto šo vērtību, lai iesniegtu pieprasījumu API. Ja API atgriež skatus, tā parāda šo vērtību, pretējā gadījumā tā parāda “0 skatījumu”.

Lai reģistrētu skatus, pievienojiet šo kodu komponentam, kas atveido katru ziņu.

 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

Pārbaudiet Supabase datu bāzi, lai redzētu, kā tiek atjaunināts skatījumu skaits. Tam vajadzētu palielināties par 1 katru reizi, kad apmeklējat ziņu.

Vairāk nekā lapas skatījumu izsekošana

Lapu skatījumi ļauj uzzināt, cik lietotāju apmeklē konkrētas jūsu vietnes lapas. Varat redzēt, kuras lapas darbojas labi un kuras ne.

Lai iet vēl tālāk, sekojiet līdzi apmeklētāja novirzītājam, lai redzētu, no kurienes nāk datplūsma, vai izveidojiet informācijas paneli, lai palīdzētu labāk vizualizēt datus. Atcerieties, ka vienmēr varat vienkāršot lietas, izmantojot analītikas rīku, piemēram, Google Analytics.