Узнайте, как подключить Contentful CMS к вашим приложениям React для эффективного управления контентом и динамического создания веб-сайтов.
Безголовые системы управления контентом (CMS) позволяют отделить функции управления контентом от логики, которая управляет представлением контента в ваших приложениях.
По сути, интегрировав CMS в свое приложение, вы можете легко управлять всем контентом в рамках единого приложения. платформу, а затем беспрепятственно делиться контентом по различным внешним каналам, включая Интернет и мобильные устройства. Приложения.
Что такое безголовая CMS?
Безголовая система управления контентом облегчает создание и управление контентом и цифровыми активами на одной платформе. В отличие от традиционных CMS, контент доставляется через API, такие как GraphQL API, альтернатива RESTful API.. Это позволяет обмениваться контентом через различные веб-приложения и мобильные приложения.
Этот подход позволяет разделить задачи управления контентом и его представления, гарантируя, что вы сможете адаптировать способ контент отображается в соответствии с различными клиентскими приложениями и устройствами, не затрагивая основной контент и его состав.
Начало работы с контентной CMS
Contentful — это автономная система управления контентом, которая позволяет вам создавать, управлять и делиться цифровым контентом и медиа-ресурсами в ваших приложениях с помощью API-интерфейсов.
Чтобы начать использовать Contentful CMS, вам сначала необходимо создать модель контента.
Создайте модель контента
Выполните следующие шаги, чтобы создать модель контента в Contentful.
- Посещать Сайт Contentful, создайте учетную запись и войдите в систему, чтобы получить доступ к космос. Contentful организует весь контент, связанный с проектом, и связанные с ним активы в этих пространствах.
- В левом верхнем углу вашего пространства нажмите на значок Модель контента вкладка, чтобы открыть страницу настроек.
- Нажмите кнопку Добавить тип контента кнопка на модели контента настройки страница. Тип контента в данном случае представляет собой модель (структуру) данных, которые вы будете добавлять в Contentful.
- Теперь введите имя и описание для вашего типа контента во всплывающем модальном окне. Contentful автоматически заполнит Идентификатор API поле на основе предоставленного вами имени.
- Далее определите саму структуру контента. Нажмите кнопку Добавить поле кнопку, чтобы добавить пару полей в вашу модель контента. Вот несколько полей, которые вы можете использовать для модели:
user_ID = type
first_name = type
role = type - Чтобы добавить поля, выберите значок тип из всплывающего окна типов.
- Обеспечить имя поля, а затем нажмите кнопку Добавить и настроить кнопка.
- Наконец, убедитесь, что свойства поля соответствуют ожиданиям на подтверждение страница. Кроме того, находясь на странице подтверждения, вы можете указать дополнительные свойства для полей, например любые правила проверки.
- Нажмите Подтверждать чтобы добавить новое поле в модель.
- После того как вы добавите все необходимые поля в свою модель, они появятся в формате списка, как показано ниже. Для завершения нажмите кнопку Сохранять Кнопка, чтобы применить изменения к модели контента.
Добавьте контент
Создав модель контента, добавьте контент, выполнив следующие шаги:
- Перейдите к своему космическая приборная панель страницу и нажмите кнопку Содержание вкладка.
- Выберите Тип содержимого, созданную вами модель контента, из раскрывающегося меню на панели поиска. Затем нажмите кнопку Добавить запись кнопка для добавления контента.
- Далее добавьте содержимое в редактор контента. Для каждой записи не забудьте нажать Публиковать чтобы сохранить его в своем пространстве.
Генерация ключей API
Наконец, вам нужно получить ключи API, которые вы будете использовать для выполнения запросов на получение данных контента из приложения React.
- Нажмите кнопку Настройки раскрывающееся меню в правом верхнем углу страницы панели управления. Затем выберите Ключи API вариант.
- Нажмите кнопку Добавить ключ API Кнопка, чтобы открыть страницу настроек ключей API.
- Contentful автоматически сгенерирует и заполнит ключи API на странице настроек ключей API. Вам нужно только указать имя, чтобы однозначно идентифицировать набор ключей.
Чтобы использовать Contentful API для получения данных, вам понадобится идентификатор пространства и токен доступа. Обратите внимание, что существует два типа токенов доступа: Ключ API доставки контента и API предварительного просмотра контента. В производственной среде вам понадобится ключ API доставки контента.
Но при разработке вам потребуется только идентификатор пространства и API предварительного просмотра контента ключ. Скопируйте эти два ключа и давайте углубимся в код.
Вы можете найти код этого проекта в его GitHub хранилище.
Создать проект React
Для начала вы можете создать приложение React, используя create-react-app. Альтернативно, настроить проект React с помощью Vite. После создания проекта установите этот пакет.
npm install contentful
Теперь создайте .env файл в корневом каталоге папки вашего проекта и добавьте ключи API следующим образом:
VITE_REACT_APP_CONTENTFUL_SPACE_ID="
"
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN="
"
Создайте хук useContentful
в источник каталог, создайте новую папку и назовите ее крючки. Внутри этой папки добавьте новый использоватьContentful.jsx файл и включите следующий код.
import { createClient } from"contentful";exportdefault useContentful = () => {
const accessToken = import.meta.env.VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN;
const spaceID = import.meta.env.VITE_REACT_APP_CONTENTFUL_SPACE_ID;
const client = createClient({
space: spaceID,
accessToken: accessToken,
host: "preview.contentful.com",
environment: 'master',
});
const getUsers = async () => {
try {
const data = await client.getEntries({
content_type: "users",
select: "fields"
});
const sanitizedData = data.items.map((item) => {
return {
...item.fields
};
});
return sanitizedData;
} catch (error) {
console.log(`Error fetching users ${error}`);
}
};
return { getUsers };
};
Этот пользовательский код перехватчика будет извлекать данные из пространства Contentful. Это достигается путем, во-первых, установления соединения с определенным контентным пространством с использованием предоставленного токена доступа и идентификатора пространства.
Затем хук использует Контентный клиент в рамках getUsers функция для получения записи определенного типа контента, в этом случае код извлекает записи из пользователи тип контента, в частности, выбирая только их поля. Затем полученные данные очищаются и возвращаются в виде массива пользовательских объектов.
Обновите файл App.jsx.
Открой Приложение.jsx файл, удалите шаблонный код React и обновите его следующим кодом.
import { useEffect, useState } from"react";
import useContentful from"./hooks/useContentful";const App = () => {
const [users, setUsers] = useState([]);
const { getUsers} = useContentful();useEffect(() => {
getUsers().then((response) => response && setUsers(response));
});
return (
<>Contentful CMS With React Tutorial</h1>
{users.map((user, index) => ({user.userId} </p>
{user.firstName} </p>
{user.role} </p>
</div>
))}
</>
);
};
exportdefault App
С использоватьСодержимое крючок, вы можете получать и отображать данные контента из Contentful CMS в браузере. Наконец, запустите сервер разработки, чтобы обновить изменения, внесенные в приложение.
npm run dev
Большой! У вас должна быть возможность извлекать и отображать содержимое, добавленное вами в Contentful, из приложения React. Идите вперед и стилизовать приложение React с помощью Tailwindчтобы придать ему фантастический вид.
Управление контентом стало проще
Включение headless CMS в вашу систему может значительно упростить процесс разработки, позволяя вам сосредоточиться на создании основной логики приложения; вместо того, чтобы тратить значительное количество времени на задачи управления контентом.