Sistemi za upravljanje vsebine (CMS) vam omogočajo, da ločite funkcije upravljanja vsebine od logike, ki obravnava, kako je vsebina predstavljena v vaših aplikacijah.

V bistvu lahko z integracijo CMS v svojo aplikacijo preprosto upravljate vsebino v enem samem platformo, nato pa brezhibno delite vsebino prek različnih sprednjih kanalov, vključno s spletom in mobilnimi napravami aplikacije.

Kaj je brezglavi CMS?

Brezglavi sistem za upravljanje vsebin olajša ustvarjanje in upravljanje vsebine in digitalnih sredstev znotraj ene platforme. Za razliko od tradicionalnih CMS se vsebina dostavlja prek API-jev, kot je npr GraphQL API, alternativa API-jem RESTful. To omogoča skupno rabo vsebine v različnih spletnih in mobilnih aplikacijah.

Ta pristop omogoča ločevanje skrbi med upravljanjem vsebine in njeno predstavitvijo, kar zagotavlja, da lahko prilagodite, kako vsebina je prikazana tako, da ustreza različnim odjemalskim aplikacijam in napravam, ne da bi to vplivalo na osnovno vsebino in njene struktura.

Začetek uporabe CMS z vsebino

Contentful je brezglavi sistem za upravljanje vsebine, ki vam omogoča ustvarjanje, upravljanje in skupno rabo vaše digitalne vsebine in medijskih virov v vaših aplikacijah z uporabo API-jev.

Če želite začeti uporabljati Contentful CMS, morate najprej ustvariti model vsebine.

Ustvarite model vsebine

Sledite tem korakom, da ustvarite model vsebine na Contentful.

1. Obisk Contentfulovo spletno mesto, ustvarite račun in se prijavite za dostop do svojega prostora. Contentful organizira vso vsebino, povezano s projektom, in povezana sredstva znotraj teh prostorov.
2. V zgornjem levem kotu svojega prostora kliknite na Vsebinski model zavihek, da odprete stran z nastavitvami.
3. Kliknite na Dodajte vrsto vsebine gumb na modelu vsebine nastavitve strani. Vrsta vsebine v tem primeru predstavlja model (strukturo) za podatke, ki jih boste dodali v Contentful.
4. Zdaj vnesite a ime in opis za vašo vrsto vsebine znotraj pojavnega načina. Contentful bo samodejno zapolnil Identifikator API polje glede na ime, ki ga navedete.
5. Nato določite samo strukturo vsebine. Kliknite na Dodaj polje gumb za dodajanje nekaj polj v vaš model vsebine. Tukaj je nekaj polj, ki jih lahko uporabite za model:

   user_ID = type 
   first_name = type 
   role = type 

6. Če želite dodati polja, izberite vrsta iz pojavnega okna vrst.
7. Zagotovite a ime poljain nato kliknite Dodajte in konfigurirajte gumb.
8. Nazadnje preverite, ali so lastnosti polja v skladu s pričakovanji potrditev strani. Poleg tega lahko na strani za potrditev določite dodatne lastnosti za polja, kot so morebitna pravila za preverjanje veljavnosti.
9. Kliknite Potrdi da dodate novo polje v model.
10. Ko v svoj model dodate vsa potrebna polja, se bodo prikazala v obliki seznama, kot je prikazano spodaj. Za dokončanje kliknite Shrani gumb za uporabo sprememb v modelu vsebine.

Dodajte vsebino

Ko je model vsebine na mestu, nadaljujte in dodajte vsebino tako, da sledite tem korakom:

1. Pomaknite se do svojega vesoljska armaturna plošča strani in kliknite Vsebina zavihek.
2. Izberite Vrsta vsebine, model vsebine, ki ste ga ustvarili, iz spustnega menija v iskalni vrstici. Nato kliknite Dodaj vnos gumb za dodajanje vsebine.
3. Nato dodajte vsebino v urejevalnik vsebine. Za vsak vnos ne pozabite klikniti Objavi da ga shranite v svoj prostor.

Ustvari ključe API

Nazadnje morate zgrabiti ključe API-ja, ki jih boste uporabili za pošiljanje zahtev za pridobivanje podatkov o vsebini iz aplikacije React.

1. Kliknite na nastavitve spustni meni v zgornjem desnem kotu strani nadzorne plošče. Nato izberite API ključi možnost.
2. Kliknite na Dodajte ključ API gumb za odpiranje strani z nastavitvami ključev API.
3. Contentful bo samodejno ustvaril in zapolnil ključe API na strani z nastavitvami ključev API. Navesti morate le ime za enolično identifikacijo nabora ključev.

Če želite uporabiti vsebinske API-je za pridobivanje podatkov, potrebujete ID prostora in dostopni žeton. Upoštevajte, da obstajata dve vrsti žetonov za dostop: Ključ API-ja za dostavo vsebine in API za predogled vsebine. V produkcijskem okolju boste potrebovali ključ API-ja za dostavo vsebine.

Toda v razvoju potrebujete samo ID prostora in API za predogled vsebine ključ. Kopirajte ta dva ključa in se poglobimo v kodo.

Kodo tega projekta najdete v GitHub repozitorij.

Ustvarite projekt React

Za začetek lahko ustvarite aplikacijo React z uporabo create-react-app. Druga možnost je, nastavite projekt React z uporabo Vite. Ko ustvarite svoj projekt, nadaljujte in namestite ta paket.

npm install contentful

Zdaj ustvarite a .env datoteko v korenskem imeniku mape vašega projekta in dodajte ključe API, kot sledi:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Ustvarite useContentful Hook

V src ustvarite novo mapo in jo poimenujte kavlji. Znotraj te mape dodajte novo useContentful.jsx datoteko in vključite naslednjo kodo.

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

Ta zaskočna koda po meri bo pridobila podatke iz prostora vsebine. To doseže tako, da najprej vzpostavi povezavo z določenim prostorom vsebine z uporabo posredovanega žetona dostopa in ID prostora.

Nato kavelj uporabi Zadovoljna stranka znotraj getUsers funkcijo za pridobitev vnosi določene vrste vsebine, v tem primeru koda pridobi vnose uporabniki vrsto vsebine, pri čemer izberete samo njihova polja. Pridobljeni podatki se nato očistijo in vrnejo kot niz uporabniških objektov.

Posodobite datoteko App.jsx

Odprite App.jsx datoteko, izbrišite kodo Boilerplate React in jo posodobite z naslednjo kodo.

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

z useContentful hook, lahko pridobite in prikažete podatke o vsebini iz Contentful CMS v brskalniku. Na koncu zaženite razvojni strežnik, da posodobite spremembe v aplikaciji.

npm run dev

Super! Morali bi imeti možnost pridobiti in upodobiti vsebino, ki ste jo dodali v Contentful iz aplikacije React. Kar naprej in slog aplikacije React z uporabo Tailwindda mu da fantastičen videz.

Enostavno upravljanje vsebine

Vključitev brezglavega CMS v vaš sistem lahko bistveno poenostavi razvojni proces in vam omogoči, da se osredotočite na gradnjo osnovne logike aplikacije; namesto da bi porabili veliko časa za naloge upravljanja vsebine.