Satura pārvaldības sistēmas bez galvas (CMS) ļauj atsaistīt satura pārvaldības funkcijas no loģikas, kas apstrādā to, kā saturs tiek parādīts jūsu lietojumprogrammās.

Būtībā, integrējot CMS savā lietojumprogrammā, varat viegli pārvaldīt visu saturu vienā platformu un pēc tam nemanāmi kopīgojiet saturu dažādos priekšgala kanālos, tostarp tīmeklī un mobilajā ierīcē lietojumprogrammas.

Kas ir bezgalvu CMS?

Bezgalvu satura pārvaldības sistēma atvieglo satura un digitālo līdzekļu izveidi un pārvaldību vienā platformā. Atšķirībā no tradicionālās CMS, saturs tiek piegādāts, izmantojot API, piemēram GraphQL API, alternatīva RESTful API. Tas ļauj koplietot saturu dažādās tīmekļa un mobilajās lietotnēs.

Šī pieeja ļauj nošķirt problēmas starp satura pārvaldību un tā prezentāciju, nodrošinot, ka varat pielāgot to, kā to izdarīt saturs tiek parādīts tā, lai tas atbilstu dažādām klientu lietojumprogrammām un ierīcēm, neietekmējot pamatā esošo saturu un tā saturu struktūra.

Darba sākšana ar saturīgu CMS

Contentful ir bezgala satura pārvaldības sistēma, kas ļauj izveidot, pārvaldīt un koplietot digitālo saturu un multivides resursus savās lietojumprogrammās, izmantojot tās API.

Lai sāktu lietot Contentful CMS, vispirms ir jāizveido satura modelis.

Izveidojiet satura modeli

Veiciet šīs darbības, lai vietnē Contentful izveidotu satura modeli.

1. Apmeklējums Saturīgā vietne, izveidojiet kontu un piesakieties, lai piekļūtu savam telpa. Contentful organizē visu ar projektu saistīto saturu un saistītos līdzekļus šajās telpās.
2. Vietas augšējā kreisajā stūrī noklikšķiniet uz Satura modelis cilni, lai atvērtu iestatījumu lapu.
3. Noklikšķiniet uz Pievienojiet satura veidu satura modeļa pogu iestatījumi lappuse. Satura tips šajā gadījumā apzīmē to datu modeli (struktūru), kurus pievienosit sadaļai Contentful.
4. Tagad ievadiet a nosaukums un apraksts jūsu satura veidam uznirstošajā modālā. Contentful automātiski aizpildīs Api identifikators laukā, pamatojoties uz jūsu norādīto nosaukumu.
5. Pēc tam definējiet pašu satura struktūru. Noklikšķiniet uz Pievienot lauku pogu, lai satura modelim pievienotu dažus laukus. Šeit ir daži lauki, ko varat izmantot modelim:

   user_ID = type 
   first_name = type 
   role = type 

6. Lai pievienotu laukus, atlasiet veids veidu uznirstošajā logā.
7. Nodrošiniet a lauka nosaukumsun pēc tam noklikšķiniet uz Pievienojiet un konfigurējiet pogu.
8. Visbeidzot pārbaudiet, vai lauka rekvizīti ir tādi, kā paredzēts apstiprinājums lappuse. Turklāt, atrodoties apstiprinājuma lapā, varat norādīt papildu rekvizītus laukiem, piemēram, visus validācijas noteikumus.
9. Klikšķis Apstiprināt lai modelim pievienotu jauno lauku.
10. Kad modelim būsiet pievienojis visus nepieciešamos laukus, tie tiks parādīti saraksta formātā, kā parādīts tālāk. Lai pabeigtu, noklikšķiniet uz Saglabāt pogu, lai lietotu izmaiņas satura modelī.

Pievienojiet saturu

Kad satura modelis ir izveidots, turpiniet un pievienojiet saturu, veicot tālāk norādītās darbības.

1. Pārejiet uz savu kosmosa informācijas panelis lapu un noklikšķiniet uz Saturs cilne.
2. Izvēlieties Satura veids, jūsu izveidoto satura modeli, meklēšanas joslas nolaižamajā izvēlnē. Pēc tam noklikšķiniet uz Pievienot ierakstu pogu, lai pievienotu saturu.
3. Pēc tam pievienojiet saturu satura redaktors. Katram ierakstam neaizmirstiet noklikšķināt Publicēt lai saglabātu to savā vietā.

Ģenerēt API atslēgas

Visbeidzot, jums ir jāsatver savas API atslēgas, kuras izmantosit, lai pieprasītu satura datu izgūšanu no lietojumprogrammas React.

1. Noklikšķiniet uz Iestatījumi nolaižamajā izvēlnē informācijas paneļa lapas augšējā labajā stūrī. Pēc tam atlasiet API atslēgas opciju.
2. Noklikšķiniet uz Pievienojiet API atslēgu pogu, lai atvērtu API atslēgu iestatījumu lapu.
3. Contentful automātiski ģenerēs un aizpildīs API atslēgas API atslēgu iestatījumu lapā. Jums ir jānorāda tikai nosaukums, lai unikāli identificētu atslēgu kopu.

Lai datu iegūšanai izmantotu satura API, jums ir nepieciešams telpas ID un pieejas atslēga. Ņemiet vērā, ka ir divu veidu piekļuves pilnvaras: Content Delivery API atslēga un Satura priekšskatījuma API. Ražošanas vidē jums būs nepieciešama Content Delivery API atslēga.

Bet izstrādes procesā jums ir nepieciešams tikai telpas ID un Satura priekšskatījuma API taustiņu. Nokopējiet šīs divas atslēgas un iedziļināsimies kodā.

Jūs varat atrast šī projekta kodu tajā GitHub krātuve.

Izveidojiet reaģēšanas projektu

Lai sāktu, varat sastatīt React lietojumprogrammu, izmantojot lietotni izveidot-reaģēt. Alternatīvi, iestatiet React projektu, izmantojot Vite. Pēc projekta izveides turpiniet un instalējiet šo pakotni.

npm install contentful

Tagad izveidojiet a .env failu projekta mapes saknes direktorijā un pievienojiet API atslēgas šādi:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Izveidojiet useContentful Hook

Iekš src direktorijā, izveidojiet jaunu mapi un piešķiriet tai nosaukumu āķi. Šajā mapē pievienojiet jaunu useContentful.jsx failu un iekļaujiet šādu kodu.

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

Šis pielāgotais āķa kods iegūs datus no satura satura. Tas tiek panākts, pirmkārt, izveidojot savienojumu ar noteiktu satura vietu, izmantojot nodrošināto piekļuves pilnvaru un telpas ID.

Pēc tam āķis izmanto Saticīgs klients ietvaros getUsers izgūšanas funkciju ieraksti konkrēta satura veida, šajā gadījumā kods ienes ierakstus lietotājiem satura veidu, īpaši atlasot tikai to laukus. Pēc tam ienestie dati tiek sanitizēti un atgriezti kā lietotāja objektu masīvs.

Atjauniniet failu App.jsx

Atveriet App.jsx failu, izdzēsiet React kodu un atjauniniet to ar šādu kodu.

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

Ar useContentful āķis, varat ienest un pārlūkprogrammā parādīt satura datus no Contentful CMS. Visbeidzot, startējiet izstrādes serveri, lai atjauninātu lietojumprogrammā veiktās izmaiņas.

npm run dev

Lieliski! Jums vajadzētu būt iespējai ienest un renderēt saturu, ko pievienojāt Contentful no lietotnes React. Uz priekšu un veidojiet lietojumprogrammu React, izmantojot Tailwindlai piešķirtu tai fantastisku izskatu.

Satura pārvaldība ir vienkārša

Bezgalvu CMS iekļaušana sistēmā var ievērojami racionalizēt izstrādes procesu, ļaujot koncentrēties uz galvenās lietojumprogrammas loģikas izveidi; nevis tērēt ievērojamu laika daļu satura pārvaldības uzdevumiem.