Системи за управљање садржајем без главе (ЦМС) омогућавају вам да одвојите функције управљања садржајем од логике која управља начином на који се садржај представља у вашим апликацијама.

У суштини, интеграцијом ЦМС-а у вашу апликацију, можете лако да управљате садржајем у оквиру једног платформу, а затим неприметно делите садржај на различитим фронтенд каналима, укључујући веб и мобилне уређаје апликације.

Шта је безглави ЦМС?

Систем за управљање садржајем без главе олакшава креирање и управљање садржајем и дигиталним средствима све у оквиру једне платформе. За разлику од традиционалног ЦМС-а, садржај се испоручује преко АПИ-ја као нпр ГрапхКЛ АПИ, алтернатива РЕСТфул АПИ-јима. Ово омогућава дељење садржаја у различитим веб и мобилним апликацијама.

Овај приступ омогућава одвајање брига између управљања садржајем и његове презентације – осигуравајући да можете да прилагодите како садржај се приказује тако да одговара различитим клијентским апликацијама и уређајима без утицаја на основни садржај и његов структура.

Почетак рада са Цонтентфул ЦМС-ом

Цонтентфул је систем за управљање садржајем без главе који вам омогућава да креирате, управљате и делите свој дигитални садржај и медијске ресурсе у свим апликацијама користећи његове АПИ-је.

Да бисте почели да користите Цонтентфул ЦМС, прво морате да креирате модел садржаја.

Креирајте модел садржаја

Пратите ове кораке да бисте креирали модел садржаја на Цонтентфул-у.

1. Посетите Цонтентфул-ова веб локација, направите налог и пријавите се да бисте приступили свом простор. Цонтентфул организује сав садржај у вези са пројектом и припадајућу имовину унутар ових простора.
2. У горњем левом углу вашег простора кликните на Модел садржаја картицу да бисте отворили страницу са подешавањима.
3. Кликните Додајте тип садржаја дугме на моделу садржаја подешавања страна. Тип садржаја, у овом случају, представља модел (структуру) за податке које ћете додати у Цонтентфул.
4. Сада унесите а име и Опис за ваш тип садржаја у оквиру искачућег модала. Цонтентфул ће аутоматски попунити Апи идентификатор поље на основу имена које наведете.
5. Затим дефинишите саму структуру садржаја. Кликните Додај поље дугме да бисте додали неколико поља у свој модел садржаја. Ево неколико поља која можете користити за модел:

   user_ID = type 
   first_name = type 
   role = type 

6. Да бисте додали поља, изаберите тип из искачућег прозора типа.
7. Обезбеди Име поља, а затим кликните на Додајте и конфигуришите дугме.
8. На крају, проверите да ли су својства поља онаква каква се очекује на потврда страна. Поред тога, док сте још на страници за потврду, можете да наведете додатна својства за поља као што су правила за валидацију.
9. Кликните Потврди да додате ново поље у модел.
10. Када додате сва потребна поља у свој модел, она ће се појавити у формату листе, као што је приказано у наставку. Да бисте завршили, кликните на сачувати дугме да бисте применили промене на модел садржаја.

Додајте садржај

Са моделом садржаја на месту, само напред и додајте садржај пратећи ове кораке:

1. Дођите до вашег свемирска контролна табла страницу и кликните на Садржај таб.
2. Изаберите Тип садржаја, модел садржаја који сте креирали, из падајућег менија у оквиру траке за претрагу. Затим кликните на Додајте унос дугме за додавање садржаја.
3. Затим додајте садржај у уредник садржаја. За сваки унос, не заборавите да кликнете Објавите да га сачувате у свом простору.

Генеришите АПИ кључеве

Коначно, морате да зграбите своје АПИ кључеве, које ћете користити за прављење захтева за преузимање података о садржају из Реацт апликације.

1. Кликните Подешавања падајући мени у горњем десном углу странице контролне табле. Затим изаберите АПИ кључеви опција.
2. Кликните Додајте АПИ кључ дугме да бисте отворили страницу подешавања АПИ кључева.
3. Цонтентфул ће аутоматски генерисати и попунити АПИ кључеве на страници подешавања АПИ кључева. Потребно је само да наведете име да бисте јединствено идентификовали скуп кључева.

Да бисте користили Цонтентфул АПИ-је за преузимање података, потребно вам је простор ИД анд тхе приступни токен. Имајте на уму да постоје две врсте токена за приступ: АПИ кључ за испоруку садржаја и АПИ за преглед садржаја. У производном окружењу биће вам потребан АПИ кључ за испоруку садржаја.

Али, у развоју су вам потребни само ИД простора и АПИ за преглед садржаја кључ. Копирајте ова два кључа и заронимо у код.

Код овог пројекта можете пронаћи у њему ГитХуб репозиторијум.

Направите Реацт пројекат

За почетак, можете креирајте Реацт апликацију користећи цреате-реацт-апп. Алтернативно, поставите Реацт пројекат користећи Вите. Након што креирате свој пројекат, наставите и инсталирајте овај пакет.

npm install contentful

Сада, креирајте а .енв датотеку у основном директоријуму фасцикле вашег пројекта и додајте АПИ кључеве на следећи начин:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Креирајте усеЦонтентфул Хоок

У срц директоријум, креирајте нови фолдер и дајте му име куке. Унутар овог фолдера додајте нови усеЦонтентфул.јск датотеку и укључите следећи код.

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

Овај прилагођени хоок код ће преузети податке из Цонтентфул простора. То постиже тако што, прво, успоставља везу са одређеним Цонтентфул простором користећи обезбеђени приступни токен и ИД простора.

Затим, кука користи Задовољан клијент у оквиру гетУсерс функција за преузимање уносе одређеног типа садржаја, у овом случају, код преузима уносе корисника тип садржаја, посебно бирајући само њихова поља. Преузети подаци се затим дезинфикују и враћају као низ корисничких објеката.

Ажурирајте датотеку Апп.јск

Отвори Апп.јск датотеку, избришите шаблон Реацт кода и ажурирајте га следећим кодом.

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

Са усеЦонтентфул кука, можете преузети и приказати податке о садржају из Цонтентфул ЦМС-а у претраживачу. Коначно, покрените развојни сервер да бисте ажурирали промене направљене у апликацији.

npm run dev

Велики! Требало би да будете у могућности да преузмете и прикажете садржај који сте додали на Цонтентфул из Реацт апликације. Само напред и стилизирајте Реацт апликацију користећи Таилвиндда му дају фантастичан изглед.

Лако управљање садржајем

Уграђивање ЦМС-а без главе у ваш систем може значајно поједноставити процес развоја, омогућавајући вам да се концентришете на изградњу основне логике апликације; уместо да трошите знатну количину времена на задатке управљања садржајем.