Bezhlavé systémy na správu obsahu (CMS) vám umožňujú oddeliť funkcie správy obsahu od logiky, ktorá riadi, ako je obsah prezentovaný vo vašich aplikáciách.

V podstate integráciou CMS do vašej aplikácie môžete jednoducho spravovať obsah v rámci jedného a potom bezproblémovo zdieľajte obsah na rôznych frontend kanáloch vrátane webu a mobilných zariadení aplikácie.

Čo je to bezhlavý CMS?

Bezhlavý systém správy obsahu uľahčuje vytváranie a správu obsahu a digitálnych aktív v rámci jednej platformy. Na rozdiel od tradičného CMS je obsah dodávaný cez API ako napr GraphQL API, alternatíva k RESTful API. To umožňuje zdieľať obsah v rôznych webových a mobilných aplikáciách.

Tento prístup umožňuje oddeliť starosti medzi správou obsahu a jeho prezentáciou, čím sa zabezpečí, že si môžete prispôsobiť ako obsah sa zobrazuje tak, aby vyhovoval rôznym klientskym aplikáciám a zariadeniam bez ovplyvnenia základného obsahu a jeho obsahu štruktúru.

Začíname s obsahom CMS

Contentful je systém správy obsahu bez hlavy, ktorý vám umožňuje vytvárať, spravovať a zdieľať digitálny obsah a mediálne zdroje vo vašich aplikáciách pomocou jeho rozhraní API.

Ak chcete začať používať Contentful CMS, musíte najprv vytvoriť model obsahu.

Vytvorte model obsahu

Ak chcete vytvoriť model obsahu na Contentful, postupujte podľa týchto krokov.

1. Navštívte Webová stránka spoločnosti Contentful, vytvorte si účet a prihláste sa, aby ste získali prístup k svojmu účtu priestor. Contentful organizuje všetok obsah súvisiaci s projektom a súvisiace aktíva v týchto priestoroch.
2. V ľavom hornom rohu priestoru kliknite na Obsahový model otvoríte stránku nastavení.
3. Kliknite na Pridajte typ obsahu tlačidlo na modeli obsahu nastavenie stránku. Typ obsahu v tomto prípade predstavuje model (štruktúru) údajov, ktoré budete pridávať do Contentful.
4. Teraz zadajte a názov a popis pre váš typ obsahu v rámci kontextového okna. Obsah automaticky vyplní súbor Identifikátor API na základe zadaného mena.
5. Ďalej definujte samotnú štruktúru obsahu. Kliknite na Pridať pole tlačidlo na pridanie niekoľkých polí do vášho modelu obsahu. Tu je niekoľko polí, ktoré môžete použiť pre model:

   user_ID = type 
   first_name = type 
   role = type 

6. Ak chcete pridať polia, vyberte položku typu z vyskakovacieho okna typov.
7. Poskytnúť názov poľaa potom kliknite na Pridať a nakonfigurovať tlačidlo.
8. Nakoniec skontrolujte, či vlastnosti poľa sú podľa očakávania na serveri potvrdenie stránku. Okrem toho, keď ste stále na potvrdzovacej stránke, môžete zadať ďalšie vlastnosti pre polia, ako napríklad pravidlá overenia.
9. Kliknite Potvrďte na pridanie nového poľa do modelu.
10. Keď do modelu pridáte všetky potrebné polia, zobrazia sa vo formáte zoznamu, ako je uvedené nižšie. Ak chcete dokončiť, kliknite na Uložiť tlačidlo aplikujte zmeny na model obsahu.

Pridajte obsah

So zavedeným modelom obsahu pokračujte a pridajte obsah podľa týchto krokov:

1. Prejdite do svojho vesmírna prístrojová doska a kliknite na Obsah tab.
2. Vyberte Druh obsahu, model obsahu, ktorý ste vytvorili, z rozbaľovacej ponuky na paneli vyhľadávania. Potom kliknite na Pridať záznam tlačidlo na pridanie obsahu.
3. Ďalej pridajte obsah do editor obsahu. Pre každý záznam nezabudnite kliknúť Publikovať aby ste to uložili do svojho priestoru.

Generovať API kľúče

Nakoniec musíte získať kľúče API, ktoré použijete na zadávanie požiadaviek na získanie údajov o obsahu z aplikácie React.

1. Kliknite na nastavenie rozbaľovacej ponuky v pravom hornom rohu stránky informačného panela. Potom vyberte API kľúče možnosť.
2. Kliknite na Pridať kľúč API otvorte stránku nastavení kľúčov API.
3. Contentful automaticky vygeneruje a vyplní kľúče API na stránke nastavení kľúčov API. Stačí zadať názov na jedinečnú identifikáciu sady kľúčov.

Ak chcete na načítanie údajov používať rozhrania Contentful API, potrebujete ID priestoru a prístupový token. Všimnite si, že existujú dva typy prístupových tokenov: Kľúč API doručovania obsahu a Content Preview API. V produkčnom prostredí budete potrebovať kľúč rozhrania Content Delivery API.

Ale vo vývoji potrebujete iba ID priestoru a Content Preview API kľúč. Skopírujte tieto dva kľúče a poďme sa ponoriť do kódu.

Kód tohto projektu nájdete v ňom GitHub Úložisko.

Vytvorte projekt React

Ak chcete začať, môžete lešenie aplikácie React pomocou aplikácie create-react-app. prípadne nastaviť projekt React pomocou Vite. Po vytvorení projektu pokračujte a nainštalujte tento balík.

npm install contentful

Teraz vytvorte a .env súbor v koreňovom adresári priečinka projektu a pridajte kľúče API takto:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Vytvorte useContentful Hook

V src adresár, vytvorte nový priečinok a pomenujte ho háčiky. Do tohto priečinka pridajte nový useContentful.jsx súbor a zahrňte nasledujúci kód.

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

Tento vlastný kód háku načíta údaje z priestoru Contentful. Dosahuje to najprv vytvorením pripojenia ku konkrétnemu Obsahovému priestoru pomocou poskytnutého prístupového tokenu a ID priestoru.

Potom háčik používa Spokojný klient v rámci getUsers funkcia na načítanie záznamy konkrétneho typu obsahu, v tomto prípade kód načíta položky používateľov typ obsahu, konkrétne výberom iba ich polí. Načítané údaje sa potom dezinfikujú a vrátia sa ako pole používateľských objektov.

Aktualizujte súbor App.jsx

Otvor App.jsx súbor, odstráňte štandardný kód React a aktualizujte ho nasledujúcim kódom.

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

S použiteObsahový háčik, môžete načítať a zobraziť údaje obsahu z Contentful CMS v prehliadači. Nakoniec spustite vývojový server, aby ste aktualizovali zmeny vykonané v aplikácii.

npm run dev

Skvelé! Mali by ste byť schopní načítať a vykresliť obsah, ktorý ste pridali do Contentful, z aplikácie React. Pokračujte a upravte aplikáciu React pomocou služby Tailwindaby to vyzeralo fantasticky.

Jednoduchá správa obsahu

Začlenenie bezhlavého CMS do vášho systému môže výrazne zefektívniť proces vývoja, čo vám umožní sústrediť sa na budovanie logiky základnej aplikácie; namiesto toho, aby ste trávili značné množstvo času úlohami správy obsahu.