Создание надежного счетчика прочтений постов блога в Next.js

Показатели чтения блогов говорят нам о том, как часто наш контент читают. Они помогают нам понять, сколько трафика получает наш контент, и мы можем использовать эти данные для разработки стратегии и соответствующего перепрофилирования нашего контента.

Что мы будем создавать

В этом посте мы обсудим использование библиотеки react-intersection-observer для реализации счетчика чтения блога, который увеличивается, когда пользователь прочитал 70 процентов нашего сообщения в блоге. Данные о прочтении блога хранятся в базе данных. Вам не нужен собственный сервер для управления этим.

URL GitHub

https://github.com/Iheanacho-ai/appwrite-blog-read-counter

npm run dev
# or
yarn dev

Предварительные условия

Чтобы получить максимальную отдачу от этого проекта, нам необходимо следующее:

• Базовое понимание CSS, JavaScript и React.jsDocker Desktop установлен на компьютере, выполните команду docker -v, чтобы проверить, установлен ли у нас docker desktop, если нет, установите его отсюда.
• экземпляр Appwrite, запущенный на нашем компьютере; ознакомьтесь с этой статьей, чтобы создать локальный экземпляр Appwrite. Мы будем использовать мощный сервис базы данных Appwrite и его опыт для управления нашими аналитическими данными.

Настройка нашего приложения Next.js

Next.js – это фреймворк React с открытым исходным кодом, который позволяет нам создавать статические веб-приложения с рендерингом на стороне сервера.

Чтобы создать наше приложение Next.js, перейдите в нужную нам директорию и выполните приведенную ниже команду терминала:

    npx create-next-app@latest
    # or
    yarn create next-app

После создания нашего приложения мы изменим каталог на проект и запустим сервер разработки с помощью:

    cd <name of our project>
    npm run dev

Чтобы увидеть наше приложение, переходим на сайт http://localhost:3000.

Установка react-intersection-observer

React-intersection-observer – это библиотека react, которая позволяет разработчикам отслеживать, когда элемент входит или выходит из области просмотра.

Чтобы установить react-intersection-observer в наше приложение, запустите этот код в терминале.

    npm install react-intersection-observer --save

    #or

    yarn add react-intersection-observer

Установка Appwrite

Appwrite – это сквозное серверное решение с открытым исходным кодом, которое позволяет разработчикам быстрее создавать приложения.

Чтобы использовать Appwrite в нашем приложении Next.js, мы установим клиентский SDK Appwrite для веб-приложений.

    npm install appwrite

Создание нового проекта Appwrite

Во время создания экземпляра Appwrite мы указали, какое имя хоста и порт мы видим в нашей консоли. Значение по умолчанию – localhost:80.

Мы переходим на localhost:80 и создаем новую учетную запись, чтобы увидеть нашу консоль.

На нашей консоли есть кнопка Create Project ****. Нажмите на нее, чтобы начать новый проект.

После создания проекта появится приборная панель нашего проекта. В верхней части страницы находится панель настроек. Нажмите на нее, чтобы получить доступ к ID проекта и конечной точке API.

Мы скопируем ID проекта и конечную точку API, которые нужны нам для инициализации Appwrite Web SDK.

В корневом каталоге нашего проекта мы создадим файл utils.js для инициализации нашего Web SDK.

    import { Appwrite } from 'appwrite';
    // Init your Web SDK

    export const sdk = new Appwrite();
    sdk
    .setEndpoint('http://localhost/v1') // Your API Endpoint
    .setProject('625d9071b3fc17c7bfb6') // Your project ID
    ;

Создание анонимной сессии пользователя

Appwrite требует, чтобы пользователь регистрировался перед чтением или записью в базу данных для обеспечения безопасности в нашем приложении. Однако они позволяют нам создавать анонимную сессию для небольших проектов, подобных этому.

Мы используем функцию для создания анонимной сессии пользователя после монтирования этого приложения. Мы запустим эту функцию createAnoymousSession позже в этом учебнике.

    import { Appwrite } from 'appwrite';
    // Init your Web SDK

    export const sdk = new Appwrite();
    sdk
    .setEndpoint('http://localhost/v1') // Your API Endpoint
    .setProject('625d9071b3fc17c7bfb6') // Your project ID
    ;

    //Creating anonymous Session
    export const createAnonymousSession = async() => {
        try{
            await sdk.account.createAnonymousSession();
        }catch(err){
            console.log(err)
        }    
    }

Создание коллекции и атрибутов

В веб-консоли Appwrite мы нажимаем на Database в левой части приборной панели.

Мы создаем коллекцию на вкладке нашей базы данных, нажав на кнопку Добавить коллекцию. Это действие перенаправляет нас на страницу разрешений.

На уровне коллекции мы хотим назначить доступ на чтение и доступ на запись с ролью:all ****value. Вы можете изменить эти разрешения, чтобы указать, кто имеет доступ на чтение или запись в нашу базу данных.

Далее мы переходим на вкладку Attributes, чтобы создать свойства, которыми должен обладать документ.

Мы создаем целочисленный атрибут blogCount.

Создание документа Appwrite

После создания атрибутов, которыми будет обладать наш документ, мы переходим в раздел Документы базы данных.

Далее мы нажимаем кнопку Add Document и вводим нулевое значение, чтобы создать документ в нашей коллекции. Это значение означает, что блог читается.

Справа от нашего вновь созданного документа мы копируем идентификатор коллекции и идентификатор документа, которые понадобятся нам для выполнения функций над этим документом.

Создание записи блога.

В нашем файле index.jsx мы создаем образец записи блога, который мы будем использовать для измерения и хранения показаний нашего блога.

https://gist.github.com/Iheanacho-ai/6852e1cd43e37fe457a45ae702a109ba

Далее мы улучшаем пользовательский интерфейс нашего блога, добавляя стили в файл global.css.

https://gist.github.com/Iheanacho-ai/c35dc718ccbd62cc0339a4a18e5ee3b2

Вот как выглядит наша запись в блоге.

Использование React-intersection-observer для подсчета прочитанных записей в блоге

Библиотека react-intersection-observer позволяет нам запускать функцию или выполнять задачу, когда часть сайта видна в области просмотра. С помощью этой логики мы хотим увеличить количество прочтений в блоге, когда пользователь прочитал 70 процентов записи в блоге.

    import {useEffect, useState} from 'react';
    import { useInView } from 'react-intersection-observer';

    const Home = () => {
      const { ref: myRef, inView } = useInView();
      const [appBlogRead, setAppBlogRead] = useState(0)
      const [blogCount, setBlogCount] = useState()

      return (
          <div className="blog">
            {/* The rest of the app goes here */}
              ...
          </div>
        )
      }

    export default Home;

В приведенном выше блоке кода мы делаем следующее:

• Импортируем хук react-intersection-observer useView в наш файл index.js.
• Деструктурируем хук useView, чтобы получить ref, который мы присваиваем элементу, за которым хотим следить, и статус inView, чтобы сказать нам, присутствует ли элемент на экране.
• Создайте две переменные состояния, переменную appBlogRead для хранения количества раз, когда блог был прочитан за монтирование, которое не будет больше одного, и переменную blogCount для хранения количества раз, когда наш блог был прочитан в целом, мы будем обновлять эту переменную значением из нашей базы данных.

Далее, в нашем файле index.jsx, мы передадим нашу переменную blogCount элементу h3 для отображения прочитанных записей нашего блога.

    <h3>Blog reads: {blogCount}</h3>

Понимая, что мы хотим, чтобы чтение засчитывалось только после того, как пользователь просмотрит 70 процентов страницы, мы добавляем переменную ref к элементу в последней четверти записи нашего блога. Это гарантирует, что чтение не будет засчитано, если этот элемент не был на экране.

    <div className="blog">
      <div className="nav"></div>
      <div className="blog-container">
        <div className="writer">
          <div className="writer-image"></div>
          <div className="writer-name">Adut Elsesser</div>
        </div>
        <div className="blog-header">
          <h3>Blog reads: {blogCount}</h3>
          <h2>Mind on the road, your dilated eyes</h2>
          <p>Watch the clouds float, white Ferrari</p>
        </div>
        <div className="blog-image"></div>
        <div className="blog-story-container">
          <p>
            Had a good time
            (Sweet 16, how was I supposed to know anything?I let you out at CentralI didn't care to state the plainKept my mouth closedWe're both so familiarWhite Ferrari, good times
          </p>
          <p> 
            Stick by me, close by me You were fine You were fine here That's just a slow body You left when I forgot to speak So I text to speech, lesser speeds Texas speed, yes Basic takes its toll on me, Eventually, eventually, yes Ah, on me eventually, eventually, yes I care for you still and I will forever That was my part of the deal, honest We got so familiar Spending each day of the year, White Ferrari Good times In this life, life In this life, life

          </p>

          {/* The ref */}

          <p ref={myRef}> 
            One too many years Some tattooed eyelids on a facelift Mind over matter is magic I do magic If you think about it it'll be over in no time And that's life I'm sure we're taller in another dimension You say we're small and not worth the mention
          </p>
          <p>
            You're tired of movin', your body's achin' We could vacay, there's places to go Clearly this isn't all that there is Can't take what's been given But we're so okay here, we're doing fine Primal and naked You dream of walls that hold us imprisoned It's just a skull, least that's what they call it And we're free to roam
          </p>
        </div>
      </div>
    </div>

Далее мы используем хук useEffect, чтобы проверить, находится ли отслеживаемый элемент в поле зрения и меньше ли наша переменная appBlogRead единицы. Если эти утверждения верны, мы хотим добавить счетчик чтения к нашей переменной appBlogRead и blogCount.

    import {useEffect, useState} from 'react';
    import { useInView } from 'react-intersection-observer';
    import {sdk, createAnonymousSession } from '../utils.js'

    const Home = () => {
      const { ref: myRef, inView } = useInView();
      const [appBlogRead, setAppBlogRead] = useState(0)
      const [blogCount, setBlogCount] = useState()

      useEffect(() => {
        if(inView){
          if (appBlogRead < 1) {
            setAppBlogRead(appBlogRead + 1)
            setBlogCount(blogCount + 1)
          }else{
            return
          }

        }
      }, [inView])

      return(
          <div></div>
      )
    }

    export default Home;

Хранение количества просмотров в базе данных

В файле index.js мы создаем две функции для обновления и получения информации из нашей базы данных.

    const handleBlogCount = async () => {
        try {
          let promise =  await sdk.database.listDocuments('collectionID')
          setBlogCount(promise.documents[0].blogCount)

        } catch (error) {
          console.log(error)
        }
    }

    const updateBlogCount = async () => {
      try {
          await sdk.database.updateDocument('collectionID', 'documentID', {
            "blogCount": blogCount
          })
          handleBlogCount()

        } catch (error) {
          console.log(error)
        }
    }

    useEffect(() => {
      createAnonymousSession()
      handleBlogCount()
    }, [])

      useEffect(() => {
        updateBlogCount()
      }, [blogCount])

В приведенном выше блоке кода мы делаем следующее.

• Создаем функцию handleBlogCount, которая находит коллекцию, используя параметр ID коллекции, эта функция обновляет переменную blogCount, используя ее ответ.
• Создайте функцию updateBlogCount, которая находит документ, используя параметры ID коллекции и ID документа, updateBlogCount функция затем обновляет документ, используя переменную blogCount, эти ID коллекции и документа взяты из документа, который мы создали в начале этого урока.
• Используйте React useEffect для запуска createAnonymousSession в нашем файле utils.js и функции handleBlogCount после монтирования нашего приложения.
• Запускает нашу функцию updateBlogCount каждый раз, когда наша переменная blogCount обновляется, используя хук React useEffect

С помощью этого мы создали надежный счетчик прочитанных записей блога в Next.js.

https://gist.github.com/Iheanacho-ai/d1eb08bea25f99d406e185a077a0c900

Вот как выглядит наша запись в блоге…

Прочитайте около 70 процентов записи, чтобы увидеть увеличение количества прочитанных записей на странице и в базе данных.

Заключение

В этой статье мы обсудили отслеживание чтения записей блога с помощью библиотеки-наблюдателя react-intersection, хранение и извлечение этих чтений с помощью базы данных Appwrite. Поскольку статья создает основу для реализации аналитики, обновите код, чтобы ограничить количество прочтений блога только одним чтением за сессию пользователя.

Ресурсы

Вот некоторые ресурсы, которые могут быть полезны:

• react-intersection-observer
• Начало работы с Appwrite для веб
• API базы данных