Sustavi za upravljanje sadržajem bez glave (CMS) omogućuju vam da odvojite funkcije upravljanja sadržajem od logike koja upravlja načinom na koji je sadržaj predstavljen u vašim aplikacijama.

U biti, integracijom CMS-a u svoju aplikaciju, možete jednostavno upravljati sadržajem unutar jednog platformu, a zatim neprimjetno dijelite sadržaj preko različitih sučeljnih kanala, uključujući web i mobilni aplikacije.

Što je bezglavi CMS?

Sustav za upravljanje sadržajem bez glave olakšava stvaranje i upravljanje sadržajem i digitalnom imovinom unutar jedne platforme. Za razliku od tradicionalnog CMS-a, sadržaj se isporučuje putem API-ja kao što su GraphQL API, alternativa RESTful API-jima. To omogućuje dijeljenje sadržaja preko raznih web i mobilnih aplikacija.

Ovaj pristup omogućuje razdvajanje briga između upravljanja sadržajem i njegove prezentacije - osiguravajući da možete prilagoditi kako sadržaj se prikazuje kako bi odgovarao različitim klijentskim aplikacijama i uređajima bez utjecaja na temeljni sadržaj i njegove struktura.

Početak rada s CMS-om sa sadržajem

Contentful je sustav za upravljanje sadržajem bez glave koji vam omogućuje stvaranje, upravljanje i dijeljenje vašeg digitalnog sadržaja i medijskih resursa u vašim aplikacijama pomoću API-ja.

Da biste započeli koristiti Contentful CMS, najprije morate izraditi model sadržaja.

Stvorite model sadržaja

Slijedite ove korake za izradu modela sadržaja na Contentfulu.

1. Posjetiti Contentfulova web stranica, kreirajte račun i prijavite se za pristup svom prostor. Contentful organizira sav sadržaj vezan uz projekt i pridruženu imovinu unutar ovih prostora.
2. U gornjem lijevom kutu svog prostora kliknite na Model sadržaja karticu za otvaranje stranice postavki.
3. Kliknite na Dodajte vrstu sadržaja gumb na modelu sadržaja postavke stranica. Vrsta sadržaja, u ovom slučaju, predstavlja model (strukturu) za podatke koje ćete dodati u Contentful.
4. Sada unesite a Ime i opis za vašu vrstu sadržaja unutar skočnog modala. Sadržaj će automatski popuniti API identifikator polje na temelju imena koje navedete.
5. Zatim definirajte samu strukturu sadržaja. Kliknite na Dodaj polje gumb za dodavanje nekoliko polja vašem modelu sadržaja. Evo nekoliko polja koja možete koristiti za model:

   user_ID = type 
   first_name = type 
   role = type 

6. Za dodavanje polja odaberite tip iz skočnog prozora vrsta.
7. Osigurati a naziv polja, a zatim kliknite na Dodajte i konfigurirajte dugme.
8. Konačno, provjerite jesu li svojstva polja očekivana na potvrda stranica. Osim toga, dok ste još na stranici za potvrdu, možete navesti dodatna svojstva za polja kao što su sva pravila provjere valjanosti.
9. Klik Potvrdi za dodavanje novog polja u model.
10. Nakon što svom modelu dodate sva potrebna polja, ona će se pojaviti u obliku popisa, kao što je prikazano u nastavku. Za finaliziranje kliknite na Uštedjeti gumb za primjenu promjena na modelu sadržaja.

Dodajte sadržaj

S postavljenim modelom sadržaja, samo naprijed i dodajte sadržaj slijedeći ove korake:

1. Dođite do svog svemirska nadzorna ploča stranicu i kliknite na Sadržaj tab.
2. Odaberite Vrsta sadržaja, model sadržaja koji ste izradili, s padajućeg izbornika unutar trake za pretraživanje. Zatim kliknite na Dodaj unos gumb za dodavanje sadržaja.
3. Zatim dodajte sadržaj u urednik sadržaja. Za svaki unos ne zaboravite kliknuti Objaviti da ga spremite u svoj prostor.

Generirajte API ključeve

Konačno, morate zgrabiti svoje API ključeve, koje ćete koristiti za slanje zahtjeva za dohvaćanje podataka o sadržaju iz React aplikacije.

1. Kliknite na postavke padajućeg izbornika u gornjem desnom kutu stranice nadzorne ploče. Zatim odaberite API ključevi opcija.
2. Kliknite na Dodaj API ključ gumb za otvaranje stranice postavki API ključeva.
3. Contentful će automatski generirati i popuniti API ključeve na stranici postavki API ključeva. Trebate samo dati naziv za jedinstvenu identifikaciju skupa ključeva.

Kako biste koristili Contentful API-je za dohvaćanje podataka, trebate ID prostora i pristupni token. Imajte na umu da postoje dvije vrste pristupnih tokena: Ključ API-ja za isporuku sadržaja i API za pregled sadržaja. U produkcijskom okruženju trebat će vam API ključ za isporuku sadržaja.

Ali, u razvoju, trebate samo ID prostora i API za pregled sadržaja ključ. Kopirajte ova dva ključa i zaronimo u kod.

Kôd ovog projekta možete pronaći u GitHub spremište.

Napravite React projekt

Za početak, možete izradite React aplikaciju koristeći create-react-app. Alternativno, postaviti React projekt koristeći Vite. Nakon što izradite svoj projekt, samo naprijed i instalirajte ovaj paket.

npm install contentful

Sada stvorite a .env datoteku u korijenskom direktoriju mape vašeg projekta i dodajte API ključeve na sljedeći način:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Stvorite useContentful Hook

u src imenik, stvorite novu mapu i dajte joj naziv udice. Unutar ove mape dodajte novu useContentful.jsx datoteku i uključite sljedeći kod.

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

Ovaj prilagođeni hook kod će dohvatiti podatke iz Contentful prostora. To postiže najprije uspostavljanjem veze s određenim prostorom sadržaja koristeći osigurani pristupni token i ID prostora.

Zatim, udica koristi Zadovoljan klijent unutar getUsers funkcija za dohvaćanje unose određene vrste sadržaja, u ovom slučaju kod dohvaća unose korisnika vrstu sadržaja, posebno birajući samo njihova polja. Dohvaćeni podaci se zatim saniraju i vraćaju kao niz korisničkih objekata.

Ažurirajte datoteku App.jsx

Otvori App.jsx datoteku, izbrišite predložak React koda i ažurirajte ga sljedećim kodom.

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 useContentful hook, možete dohvatiti i prikazati podatke o sadržaju iz Contentful CMS-a u pregledniku. Na kraju, pokrenite razvojni poslužitelj da ažurirate promjene napravljene na aplikaciji.

npm run dev

Sjajno! Trebali biste moći dohvatiti i prikazati sadržaj koji ste dodali na Contentful iz aplikacije React. Samo naprijed i stilizirajte aplikaciju React pomoću Tailwindada mu daju fantastičan izgled.

Upravljanje sadržajem postalo jednostavno

Uključivanje CMS-a bez glave u vaš sustav može značajno pojednostaviti razvojni proces, omogućujući vam da se koncentrirate na izgradnju osnovne logike aplikacije; umjesto da trošite znatnu količinu vremena na zadatke upravljanja sadržajem.