Cách theo dõi lượt xem trang trên blog của bạn bằng Supabase

Lượt xem trang là một số liệu quan trọng để theo dõi hiệu suất web. Các công cụ phần mềm như Google Analytics và Fathom cung cấp một cách đơn giản để thực hiện việc này với tập lệnh bên ngoài.

Nhưng có thể bạn không muốn sử dụng thư viện của bên thứ ba. Trong trường hợp như vậy, bạn có thể sử dụng cơ sở dữ liệu để theo dõi khách truy cập trang web của mình.

Supabase là giải pháp thay thế Firebase mã nguồn mở có thể giúp bạn theo dõi lượt xem trang trong thời gian thực.

Chuẩn bị trang web của bạn để bắt đầu theo dõi lượt xem trang

Bạn cần có một blog Next.js để làm theo hướng dẫn này. Nếu bạn chưa có, bạn có thể tạo blog dựa trên Markdown bằng cách sử dụng phản ứng đánh dấu.

Bạn cũng có thể sao chép mẫu bắt đầu blog Next.js chính thức từ kho lưu trữ GitHub của nó.

Supabase là giải pháp thay thế Firebase cung cấp cơ sở dữ liệu Postgres, xác thực, API tức thì, Hàm Edge, đăng ký thời gian thực và lưu trữ.

Bạn sẽ sử dụng nó để lưu trữ lượt xem trang cho mỗi bài đăng trên blog.

Tạo cơ sở dữ liệu Supabase

Truy cập trang web Supabase và đăng nhập hoặc đăng ký tài khoản.

Trên bảng điều khiển Supabase, nhấp vào Dự án mới và chọn một tổ chức (Supabase sẽ tạo một tổ chức dưới tên người dùng tài khoản của bạn).

Điền vào tên dự án và mật khẩu sau đó nhấp vào Tạo dự án mới.

Trong trang cài đặt bên dưới phần API, hãy sao chép URL của dự án cũng như khóa công khai và khóa bí mật.

Mở .env.local tệp trong dự án Next.js và sao chép các chi tiết API này.

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

Tiếp theo, điều hướng đến trình soạn thảo SQL và nhấp vào Truy vấn mới.

Sử dụng lệnh SQL tiêu chuẩn để tạo một bảng có tên lượt xem.

 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 NULLn);n 

Ngoài ra, bạn có thể sử dụng trình chỉnh sửa bảng để tạo bảng dạng xem:

Trình chỉnh sửa bảng nằm ở ngăn bên trái của bảng điều khiển.

Tạo thủ tục lưu trữ Supabase để cập nhật lượt xem

Postgres có hỗ trợ tích hợp sẵn cho các hàm SQL mà bạn có thể gọi thông qua Supabase API. Chức năng này sẽ chịu trách nhiệm tăng số lượt xem trong bảng lượt xem.

Để tạo một chức năng cơ sở dữ liệu, hãy làm theo các hướng dẫn sau:

1. Chuyển đến phần trình soạn thảo SQL ở khung bên trái.
2. Nhấp vào Truy vấn mới.
3. Thêm truy vấn SQL này để tạo chức năng cơ sở dữ liệu.

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

4. Nhấn Run hoặc Cmd + Enter (Ctrl + Enter) để thực hiện truy vấn.

Hàm SQL này được gọi là update_views và chấp nhận một đối số văn bản. Đầu tiên, nó kiểm tra xem bài đăng blog đó đã tồn tại trong bảng hay chưa và nếu có, nó sẽ tăng số lượt xem lên 1. Nếu không, nó sẽ tạo một mục mới cho bài đăng có số lượt xem mặc định là 1.

Thiết lập ứng dụng khách Supabase trong Next.js

Cài đặt và cấu hình Supabase

Cài đặt gói @supabase/supabase-js qua npm để kết nối với cơ sở dữ liệu từ Next.js.

 npm install @supabase/supabase-jsn 

Tiếp theo, tạo một /lib/supabase.ts tệp trong thư mục gốc của dự án của bạn và khởi tạo ứng dụng khách 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 

Hãy nhớ rằng bạn đã lưu thông tin xác thực API trong .env.local khi tạo cơ sở dữ liệu.

Cập nhật lượt xem trang

Tạo một tuyến API tìm nạp lượt xem trang từ Supabase và cập nhật số lượt xem mỗi khi người dùng truy cập một trang.

Bạn sẽ tạo tuyến đường này trong /api thư mục bên trong một tập tin gọi là lượt xem/[slug].ts. Sử dụng dấu ngoặc xung quanh tên tệp sẽ tạo một tuyến đường động. Các tham số phù hợp sẽ được gửi dưới dạng tham số truy vấn có tên là 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 supabasen .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 

Câu lệnh if đầu tiên kiểm tra xem yêu cầu có phải là yêu cầu POST hay không. Nếu đúng như vậy, nó sẽ gọi hàm update_views SQL và chuyển vào sên làm đối số. Chức năng này sẽ tăng lượt xem hoặc tạo một mục mới cho bài đăng này.

Câu lệnh if thứ hai kiểm tra xem yêu cầu có phải là phương thức GET hay không. Nếu đúng như vậy, nó sẽ tìm nạp tổng số lượt xem cho bài đăng đó và trả về.

Nếu yêu cầu không phải là yêu cầu POST hoặc GET, hàm xử lý sẽ trả về thông báo “Yêu cầu không hợp lệ”.

Thêm lượt xem trang vào blog

Để theo dõi lượt xem trang, bạn cần nhấn vào lộ trình API mỗi khi người dùng điều hướng đến một trang.

Bắt đầu bằng cách cài đặt gói swr. Bạn sẽ sử dụng nó để lấy dữ liệu từ API.

 npm install swrn 

swr là viết tắt của cũ trong khi xác thực lại. Nó cho phép bạn hiển thị chế độ xem cho người dùng trong khi tìm nạp dữ liệu cập nhật ở chế độ nền.

Sau đó, tạo một thành phần mới gọi là viewsCounter.tsx và thêm vào như sau:

 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 

Thành phần này hiển thị tổng số lượt xem cho mỗi blog. Nó chấp nhận slug của bài đăng làm chỗ dựa và sử dụng giá trị đó để gửi yêu cầu tới API. Nếu API trả về lượt xem, nó sẽ hiển thị giá trị đó, nếu không, nó sẽ hiển thị “0 lượt xem”.

Để đăng ký chế độ xem, hãy thêm đoạn mã sau vào thành phần hiển thị từng bài đăng.

 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  

Kiểm tra cơ sở dữ liệu Supabase để xem số lượt xem đang cập nhật như thế nào. Nó sẽ tăng thêm 1 mỗi khi bạn truy cập một bài đăng.

Theo dõi nhiều hơn lượt xem trang

Lượt xem trang cho bạn biết có bao nhiêu người dùng đang truy cập các trang cụ thể trên trang web của bạn. Bạn có thể xem trang nào đang hoạt động tốt và trang nào không.

Để tiến xa hơn nữa, hãy theo dõi người giới thiệu của khách truy cập để xem lưu lượng truy cập đến từ đâu hoặc tạo trang tổng quan để giúp trực quan hóa dữ liệu tốt hơn. Hãy nhớ rằng bạn luôn có thể đơn giản hóa mọi thứ bằng cách sử dụng công cụ phân tích như Google Analytics.