Системите за управление на съдържанието (CMS) ви позволяват да отделите функциите за управление на съдържанието от логиката, която управлява начина, по който съдържанието се представя във вашите приложения.

По същество, като интегрирате CMS във вашето приложение, можете лесно да управлявате цялото съдържание в рамките на едно платформа и след това безпроблемно споделяйте съдържанието в различни предни канали, включително уеб и мобилни устройства приложения.

Какво е Headless CMS?

Безглавна система за управление на съдържание улеснява създаването и управлението на съдържание и цифрови активи в рамките на една платформа. За разлика от традиционните CMS, съдържанието се доставя чрез API, като напр GraphQL API, алтернатива на RESTful API. Това прави възможно споделянето на съдържание в различни уеб и мобилни приложения.

Този подход позволява разделянето на проблемите между управлението на съдържанието и неговото представяне – гарантирайки, че можете да персонализирате как съдържанието се показва, за да отговаря на различни клиентски приложения и устройства, без да се засяга основното съдържание и неговите структура.

Първи стъпки с CMS със съдържание

Contentful е безконтролна система за управление на съдържание, която ви позволява да създавате, управлявате и споделяте вашето цифрово съдържание и медийни ресурси във вашите приложения, като използвате нейните API.

За да започнете да използвате CMS със съдържание, първо трябва да създадете модел на съдържание.

Създайте модел на съдържание

Следвайте тези стъпки, за да създадете модел на съдържание в Contentful.

1. Посетете Уебсайт на Contentful, създайте акаунт и влезте за достъп до вашия пространство. Contentful организира цялото свързано с проекта съдържание и свързаните активи в тези пространства.
2. В горния ляв ъгъл на вашето пространство щракнете върху Модел на съдържанието раздел, за да отворите страницата с настройки.
3. Щракнете върху Добавете тип съдържание бутон на модела на съдържанието настройки страница. Типът съдържание в този случай представлява модела (структурата) за данните, които ще добавите към Contentful.
4. Сега въведете a име и описание за вашия тип съдържание в изскачащия модал. Contentful автоматично ще попълни API идентификатор поле въз основа на предоставеното от вас име.
5. След това дефинирайте самата структура на съдържанието. Щракнете върху Добавяне на поле бутон, за да добавите няколко полета към вашия модел на съдържание. Ето няколко полета, които можете да използвате за модела:

   user_ID = type 
   first_name = type 
   role = type 

6. За да добавите полета, изберете Тип от изскачащия прозорец с типове.
7. Осигурете a име на полетои след това щракнете върху Добавете и конфигурирайте бутон.
8. Накрая се уверете, че свойствата на полето са според очакванията на потвърждение страница. Освен това, докато все още сте на страницата за потвърждение, можете да посочите допълнителни свойства за полетата, като например правила за валидиране.
9. Кликнете Потвърдете за да добавите новото поле към модела.
10. След като добавите всички необходими полета към вашия модел, те ще се появят във формат на списък, както е показано по-долу. За да финализирате, щракнете върху Запазване бутон за прилагане на промените в модела на съдържанието.

Добавете съдържанието

С модела на съдържанието на място, продължете и добавете съдържанието, като следвате тези стъпки:

1. Навигирайте до вашия космическо табло страница и щракнете върху Съдържание раздел.
2. Изберете Тип съдържание, моделът на съдържание, който сте създали, от падащото меню в лентата за търсене. След това щракнете върху Добавете запис бутон за добавяне на съдържание.
3. След това добавете съдържанието към редактор на съдържание. За всеки запис не забравяйте да щракнете Публикувай за да го запазите във вашето пространство.

Генериране на API ключове

И накрая, трябва да вземете вашите API ключове, които ще използвате, за да правите заявки за извличане на данните за съдържанието от приложението React.

1. Щракнете върху Настройки падащо меню в горния десен ъгъл на страницата на таблото за управление. След това изберете API ключове опция.
2. Щракнете върху Добавяне на API ключ бутон, за да отворите страницата с настройки на API ключовете.
3. Contentful автоматично ще генерира и попълни API ключовете на страницата с настройки на API ключовете. Трябва само да предоставите име, за да идентифицирате уникално набора от ключове.

За да използвате API за съдържание за извличане на данни, имате нужда от пространство ID и на жетон за достъп. Забележете, че има два вида токени за достъп: Ключ за API за доставка на съдържание и API за преглед на съдържанието. В производствена среда ще ви трябва ключът за API за доставка на съдържание.

Но при разработка вие се нуждаете само от ID на пространството и API за преглед на съдържанието ключ. Копирайте тези два ключа и нека се потопим в кода.

Можете да намерите кода на този проект в него GitHub хранилище.

Създайте проект React

За да започнете, можете скеле React приложение с помощта на create-react-app. Алтернативно, настройте React проект с помощта на Vite. След като създадете своя проект, продължете и инсталирайте този пакет.

npm install contentful

Сега създайте a .env файл в основната директория на папката на вашия проект и добавете API ключовете, както следва:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Създайте useContentful Hook

В src директория, създайте нова папка и я наименувайте кукички. В тази папка добавете нова useContentful.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 };
};

Този персонализиран код на кука ще извлече данните от пространството за съдържание. Той постига това, като първо установява връзка към конкретно пространство за съдържание, използвайки предоставения токен за достъп и идентификатор на пространство.

След това куката използва Доволен клиент в рамките на getUsers функция за извличане записи на определен тип съдържание, в този случай кодът извлича записите на потребители тип съдържание, като по-специално изберете само техните полета. След това извлечените данни се дезинфекцират и се връщат като масив от потребителски обекти.

Актуализирайте файла App.jsx

Отвори App.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

С useContentful hook, можете да извлечете и покажете данните за съдържанието от Contentful CMS в браузъра. Накрая стартирайте сървъра за разработка, за да актуализирате промените, направени в приложението.

npm run dev

Страхотен! Трябва да можете да извличате и изобразявате съдържанието, което сте добавили в Contentful от приложението React. Давай напред и стилизирайте приложението React с помощта на Tailwindза да му придаде фантастичен вид.

Управлението на съдържанието става лесно

Включването на CMS без глава във вашата система може значително да рационализира процеса на разработка, позволявайки ви да се концентрирате върху изграждането на основната логика на приложението; вместо да отделяте значително време за задачи по управление на съдържанието.