Системы управления контентом (CMS) используются для разработки приложений при создании их контента. Традиционно CMS создают приложения как единое целое. Это означает, что серверная часть и внешний интерфейс приложения управляются одной базовой системой.

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

Это отличный набор мощных приложений. Однако этот подход создает некоторые проблемы; некоторые из них выделены ниже.

  • Приложение работает как монолит. Это означает, что две системы не могут быть разделены и работать как одна.
  • Оптимизация принимает удар.
  • У вас меньше возможностей решить, какой уровень представления подходит вашему пользователю.
  • Трудно интегрировать внешние инструменты для повышения эффективности вашего приложения.
  • Настраиваемость становится сложной.

Выше приведены несколько проблем, которые традиционная CMS не может решить. Однако с развитием технологий для решения этих проблем родилась безголовая CMS.

Почему важна безголовая CMS?

Безголовая CMS позволяет вам запускать несвязанную систему. Это означает, что управление контентом (бэкенд) и уровень представления (интерфейс) работают независимо.

Безголовая CMS занимается только управлением контентом; он не несет ответственности за то, как контент будет представлен пользователю. Такой подход дает вам ряд преимуществ, таких как:

  • Вы получаете мощность и гибкость выбора, а канал презентации лучше всего соответствует вашей модели контента.
  • У вас есть выбор, чтобы решить, какой фронтальный фреймворк вам подходит.
  • Становится проще интегрировать внешние инструменты для улучшения доставки контента и производительности презентаций.
  • Легче настроить любой контент по своему вкусу.

Ознакомьтесь с Руководством по безголовой CMS и узнайте, что такое безголовая CMS, ее преимущества и использование.

Одной из самых популярных безголовых CMS, которая соответствует вашим требованиям к управлению контентом, является Strapi. Strapi — это безголовая CMS с открытым исходным кодом, основанная на Node.js. Это помогает вам создавать и управлять своим бэкэнд-контентом, создавая конечные точки API для использования ваших данных.

  • Это безголовая CMS с открытым исходным кодом.
  • Он предлагает легко настраиваемую панель администратора для управления вашим контентом.
  • Это дает вам возможность выбирать конечные точки API RESTful или GraphQL.
  • Это самостоятельное размещение.

После того, как вы создали свой контент с помощью Strapi, вам нужна правильная структура для обработки уровня представления контента. Ремикс — хороший выбор для передачи вашего контента пользователям. В этом руководстве мы будем использовать Remix для использования контента, созданного Strapi.

Предпосылки

Чтобы продолжить в этой статье, важно иметь следующее:

  • Node.js установлен на вашем компьютере.
  • Скачанный и установленный VS Code или любой подходящий текстовый редактор.
  • Опыт работы с Remix.

С этим вы готовы продолжить.

Локальная настройка Strapi

Чтобы настроить Strapi, создайте каталог проекта remix-strapi-app и откройте его с помощью редактора VS Code. Используя редактор, откройте терминал и выполните следующую одноразовую команду, чтобы создать серверный проект Strapi CMS.

npx create-strapi-app strapi-notes-app --quickstart

Эта команда создаст локальный проект Strapi внутри каталога strapi-notes-app.

Затем Strapi создаст пользовательский интерфейс администратора с настройками разработки и автоматически запустит панель администрирования на http://localhost:1337/admin.

Чтобы начать использовать Strapi, создайте учетную запись администратора, используя свои данные, затем нажмите let's start. Это направит вас к панели администратора Strapi.

Создание серверной части для приложения Strapi Notes

Мы создаем приложение Notes с помощью Strapi; поэтому нам нужно смоделировать данные для приложения Notes. Чтобы создать структуру контента приложения Notes, сначала перейдите в раздел Конструктор типов контента и выберите Создать новый тип коллекции.

Начните моделирование содержимого Notes следующим образом:

  1. Создайте тип коллекции для заметок.

  1. Введите данные полей, а затем нажмите продолжить, чтобы добавить поля примечаний.

  1. Добавьте текстовое поле Заголовок примечания.

  1. Добавьте текстовое поле Описание заметки.

После этого у вас должны появиться следующие поля:

Управление содержимым заметок

Следующим шагом является создание содержимого заметок. Здесь мы добавим несколько записей Notes в Strapi CMS. Перейдите в раздел Диспетчер контента:

Управляйте заметками следующим образом:

  1. Нажмите кнопку Создать новую запись.

  1. Введите фиктивный заголовок и описание.

  1. Нажмите «Сохранить», а затем опубликуйте.

Создание токена доступа к API

Теперь нам нужно получить доступ к этому бэкенду и использовать его с Remix. Нам нужно создать токен API для Strapi CMS следующим образом:

  1. Перейдите в раздел Настройки.
  2. Нажмите Токены API.
  3. Нажмите кнопку Создать новый токен API, чтобы настроить токен для использования API.

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

Ваш токен API будет успешно сгенерирован.

Скопируйте этот токен и сохраните его в безопасном месте. Мы будем использовать для использования API с помощью Remix. Следующим шагом является настройка приложения Remix Notes.

Настройка приложения Remix

Чтобы настроить Strapi, перейдите в каталог проекта remix-strapi-app и откройте его с помощью текстового редактора. Откройте терминал и выполните следующую одноразовую команду, чтобы создать интерфейсный проект Remix.

npx create-remix@latest

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

Будет создан remix-notes-app, содержащий загруженное приложение Remix. Чтобы протестировать это приложение, откройте терминал с помощью текстового редактора и измените каталог на папку с созданными ремиксами:

cd remix-notes-app

Затем запустите сервер разработки приложений Remix:

npm run dev

Теперь вы можете получить доступ к серверу в своем браузере по адресу http://localhost:3000.

Подключение Remix к Strapi

Чтобы начать использовать Strapi с Remix, создайте файл .env в корне папки remix-notes-app и добавьте следующее:

  • STRAPI_URL_BASE: устанавливает URL-адрес сервера, на котором работает Strapi. В этом примере мы используем http://localhost:1337.
  • STRAPI_API_TOKEN: установить набор токенов API — это предыдущий шаг.

Добавьте эти переменные среды в файл .env следующим образом, заменив переменные правильными параметрами:

STRAPI_URL_BASE=http://your_ip_address:port_where_strapi_is_running
    STRAPI_API_TOKEN=your_strapi_access_token

Чтобы использовать эти переменные, перейдите в папку приложения и создайте каталог utils. В каталоге будет размещаться errorHandling.js для обработки ошибок при обмене данными со Strapi следующим образом:

// Custom error class for errors from Strapi API
    class APIResponseError extends Error {
        constructor(response) {
            super(`API Error Response: ${response.status} ${response.statusText}`);
        }
    }
    
    // Checking the status
    export const checkStatus = (response) => {
        if (response.ok) {
            // response.status >= 200 && response.status < 300
            return response;
        } else {
            throw new APIResponseError(response);
        }
    }
    
    class MissingEnvironmentVariable extends Error {
        constructor(name) {
            super(`Missing Environment Variable: The ${name} environment variable must be defined`);
        }
    }
    
    export const checkEnvVars = () => {
        const envVars = [
            'STRAPI_URL_BASE',
            'STRAPI_API_TOKEN'
        ];
    
        for (const envVar of envVars) {
            if (!process.env[envVar]) {
                throw new MissingEnvironmentVariable(envVar)
            }
        }
    }

Работа над фронтенд-приложением

Давайте теперь поработаем над фронтенд-приложением. Мы внесем все изменения в файл app/routes/index.jsx.

Отображение примечаний

Чтобы отобразить заметки из CMS, перейдите к файлу app/routes/index.jsx:

  1. Импортируйте необходимые модули.
import { useLoaderData} from "@remix-run/react";
    import { checkStatus, checkEnvVars } from "~/utils/errorHandling";
  1. Определите функцию загрузки для получения заметок.
export async function loader () {
    checkEnvVars();
    
    const res = await fetch(`${process.env.STRAPI_URL_BASE}/api/notes`, {
        method: "GET",
        headers: {
        "Authorization": `Bearer ${process.env.STRAPI_API_TOKEN}`,
        "Content-Type": "application/json"
        }
    });
    
    // Handle HTTP response code < 200 or >= 300
    checkStatus(res);
    
    const data = await res.json();
    
    // Did Strapi return an error object in its response?
    if (data.error) {
        console.log('Error', data.error)
        throw new Response("Error getting data from Strapi", { status: 500 })
    }
    
    return data.data;
    }
  1. Отредактируйте функцию Index следующим образом:
export default function Index() {
    const notes = useLoaderData();
    return (
        <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
        <h1>Notes App</h1>
        {
            notes.length > 0 ? (
            notes.map((note,index) => (
                <div key={index}>
                <h3>{note.attributes.title}</h3>
                <p>{note.attributes.description}</p>
                <p>{new Date(note.attributes.createdAt).toLocaleDateString()}</p>
                <button onClick={null}>
                    delete note
                </button>
                </div>
            ))
            ) : (
            <div>
                <h3>Sorry!!, you do not have notes yet!!</h3>
            </div>
            )
        }
        </div>
    );
    }

Сверху проверяем, есть ли у нас заметки. Если да, мы перебираем их, отображая каждую из них, в противном случае мы показываем, что заметок не существует.

На основании добавленных заметок ваша страница должна быть похожа на изображение ниже.

Добавление примечания

Теперь давайте поработаем над добавлением заметки. Для этого следуйте приведенным ниже инструкциям.

  1. Импортируйте необходимые модули:
import { Form,useActionData } from "@remix-run/react";
  1. Определите обработчик для отправки данных в Strapi:
const addNote = async (formData) => {
    checkEnvVars();
    
    const response = await fetch(`${ process.env.STRAPI_URL_BASE } /api/notes`, {
        method: "POST",
        body: JSON.stringify({
        "data":{
            "title" : formData.title,
            "description" : formData.description
        }
        }),
        headers: {
        "Authorization": `Bearer ${ process.env.STRAPI_API_TOKEN } `,
        "Content-Type": "application/json"
        }
    });
    
    // Handle HTTP response code < 200 or >= 300
    checkStatus(response);
    
    const data = await response.json();
    
    // Did Strapi return an error object in its response?
    if (data.error) {
        console.log('Error', data.error)
        throw new Response("Error getting data from Strapi", { status: 500 })
    }
    
    return data.data;
    }
  1. Внутри функции Index инициализируйте хук данных действия и запишите ответ:
const actionData = useActionData();
    console.log("actionData",actionData);
  1. Создайте компонент формы после заголовка приложения для заметок:
<Form
    method="post">
    <div>
        <input type="text" name="title" placeholder="title of note" />
    </div>
    <div>
        <input type="text" name="description" placeholder="Description of note" />
    </div>
    <div>
        <button type="submit">
        add note
        </button>
    </div>
    </Form>

Проверьте функциональность в вашем браузере. Когда вы добавляете заметку, она отражается в разделе заметок ниже:

Удаление заметки

Чтобы удалить примечание, определите функцию для обработки функции удаления:

const deleteNote = async (noteId) => {
        const response = await fetch(`http://localhost:1337/api/notes/${noteId}`, {
            method: "DELETE",
            headers: {
            "Authorization": `Bearer your_api_token`,
            "Content-Type": "application/json"
            }
        });
    
        // Handle HTTP response code < 200 or >= 300
        checkStatus(response);
    
        const data = await response.json();
    
        // Did Strapi return an error object in its response?
        if (data.error) {
            console.log('Error', data.error)
            throw new Response("Error getting data from Strapi", { status: 500 })
        }
    
        window.location.reload(); // refresh the page
    }
- Append the functionality to the `deleteNote` button:
    <button onClick={() => deleteNote(note.id)}>
        delete note
    </button>

Теперь, как только вы нажмете кнопку, заметка будет удалена.

Заключение

Безголовые CMS — это масштабируемые решения, которые можно включить в архитектуру практически любого приложения. Вы можете поддерживать и хранить контент, который будет использоваться различными устройствами, платформами и приложениями. Этот дизайн может использоваться для обработки элементов в приложениях электронной коммерции, хранения материалов для приложений блогов или создания любого приложения, связанного с CRUD.

В этом руководстве мы научились использовать Strapi в качестве безголовой CMS для создания минимального приложения Remix CRUD. Надеюсь, вам понравился этот урок. Удачного кодирования!

Вы можете найти исходный код проекта в этом репозитории GitHub.