Sistemele de gestionare a conținutului (CMS) fără cap vă permit să decuplați funcțiile de gestionare a conținutului de logica care gestionează modul în care este prezentat conținutul în aplicațiile dvs.

În esență, prin integrarea unui CMS în aplicația dvs., puteți gestiona cu ușurință conținutul într-o singură platformă și apoi, partajați fără probleme conținutul pe diverse canale frontend, inclusiv web și mobil aplicatii.

Ce este un CMS fără cap?

Un sistem de management al conținutului fără cap facilitează crearea și gestionarea conținutului și a activelor digitale, toate într-o singură platformă. Spre deosebire de CMS tradițional, conținutul este livrat prin intermediul API-uri precum GraphQL API, o alternativă la API-urile RESTful. Acest lucru face posibilă partajarea conținutului prin diverse aplicații web și mobile.

Această abordare permite separarea preocupărilor între gestionarea conținutului și prezentarea acestuia - asigurându-vă că puteți personaliza modul în care se face conținutul este afișat pentru a se potrivi diferitelor aplicații și dispozitive client, fără a afecta conținutul de bază și acesta structura.

Noțiuni introductive cu CMS cu conținut

Contentful este un sistem de gestionare a conținutului fără cap, care vă permite să creați, să gestionați și să partajați conținutul digital și resursele media în aplicațiile dvs. folosind API-urile sale.

Pentru a începe să utilizați Contentful CMS, mai întâi trebuie să creați un model de conținut.

Creați un model de conținut

Urmați acești pași pentru a crea un model de conținut pe Contentful.

1. Vizita Site-ul lui Contentful, creați un cont și conectați-vă pentru a vă accesa spaţiu. Contentful organizează tot conținutul legat de proiect și activele asociate în aceste spații.
2. În colțul din stânga sus al spațiului dvs., faceți clic pe Model de conținut pentru a deschide pagina de setări.
3. Apasă pe Adăugați tip de conținut butonul de pe modelul de conținut setări pagină. Un tip de conținut, în acest caz, reprezintă modelul (structura) pentru datele pe care le veți adăuga la Contentful.
4. Acum, introduceți a Nume și Descriere pentru tipul dvs. de conținut în cadrul modalului pop-up. Contentful va popula automat Identificator API câmp bazat pe numele pe care îl furnizați.
5. Apoi, definiți structura conținutului în sine. Apasă pe Adăugați câmp butonul pentru a adăuga câteva câmpuri la modelul dvs. de conținut. Iată câteva câmpuri pe care le puteți folosi pentru model:

   user_ID = type 
   first_name = type 
   role = type 

6. Pentru a adăuga câmpuri, selectați tip din fereastra pop-up tipuri.
7. Furnizeaza un numele domeniului, apoi faceți clic pe Adăugați și configurați buton.
8. În cele din urmă, verificați că proprietățile câmpului sunt cele așteptate pe confirmare pagină. În plus, încă în pagina de confirmare, puteți specifica proprietăți suplimentare pentru câmpuri, cum ar fi orice reguli de validare.
9. Clic A confirma pentru a adăuga noul câmp la model.
10. După ce ați adăugat toate câmpurile necesare modelului dvs., acestea vor apărea într-un format de listă, așa cum se arată mai jos. Pentru a finaliza, faceți clic pe Salvați butonul pentru a aplica modificările modelului de conținut.

Adăugați conținutul

Cu modelul de conținut, continuați și adăugați conținutul urmând acești pași:

1. Navigați la dvs tabloul de bord spațial pagina și faceți clic pe Conţinut fila.
2. Selectează Tipul de conținut, modelul de conținut pe care l-ați creat, din meniul drop-down din bara de căutare. Apoi, faceți clic pe Adaugă înregistrare butonul pentru a adăuga conținut.
3. Apoi, adăugați conținutul la editor de conținut. Pentru fiecare intrare, nu uitați să faceți clic Publica pentru a-l salva în spațiul tău.

Generați chei API

În cele din urmă, trebuie să vă luați cheile API, pe care le veți folosi pentru a face solicitări de preluare a datelor de conținut din aplicația React.

1. Apasă pe Setări meniul drop-down din colțul din dreapta sus al paginii tabloului de bord. Apoi, selectați Chei API opțiune.
2. Apasă pe Adăugați cheia API butonul pentru a deschide pagina de setări a cheilor API.
3. Contentful va genera și popula automat cheile API pe pagina de setări a cheilor API. Trebuie doar să furnizați un nume pentru a identifica în mod unic setul de chei.

Pentru a utiliza API-urile Contentful pentru a prelua date, aveți nevoie de ID spațiu si jeton de acces. Observați că există două tipuri de jetoane de acces: Cheie API Content Delivery și API de previzualizare a conținutului. Într-un mediu de producție, veți avea nevoie de cheia API Content Delivery.

Dar, în dezvoltare, aveți nevoie doar de ID-ul spațiului și API de previzualizare a conținutului cheie. Copiați aceste două chei și să ne aruncăm în cod.

Puteți găsi codul acestui proiect în documentul său GitHub repertoriu.

Creați un proiect React

Pentru a începe, poți schelete o aplicație React folosind create-react-app. Alternativ, configurați un proiect React folosind Vite. După ce ați creat proiectul, continuați și instalați acest pachet.

npm install contentful

Acum, creează un .env fișier în directorul rădăcină al folderului proiectului și adăugați cheile API după cum urmează:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Creați useContentful Hook

În src director, creați un folder nou și denumiți-l cârlige. În acest dosar, adăugați unul nou foloseșteContentful.jsx fișier și includeți următorul cod.

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

Acest cod de cârlig personalizat va prelua datele din spațiul Contentful. Acesta realizează acest lucru prin stabilirea, în primul rând, a unei conexiuni la un anumit spațiu Contentful, utilizând jetonul de acces și ID-ul spațiului furnizat.

Apoi, cârligul folosește Client mulțumit în cadrul getUsers funcția de preluare intrări de un anumit tip de conținut, în acest caz, codul preia intrările din utilizatorii tipul de conținut, selectând în mod specific numai câmpurile acestora. Datele preluate sunt apoi igienizate și returnate ca o serie de obiecte utilizator.

Actualizați fișierul App.jsx

Deschide App.jsx fișier, ștergeți codul boilerplate React și actualizați-l cu următorul cod.

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

Cu useContentful cârlig, puteți prelua și afișa datele de conținut din Contentful CMS în browser. În cele din urmă, porniți serverul de dezvoltare pentru a actualiza modificările aduse aplicației.

npm run dev

Grozav! Ar trebui să puteți prelua și reda conținutul adăugat pe Contentful din aplicația React. Mergi înainte și stilați aplicația React folosind Tailwindpentru a-i da un aspect fantastic.

Gestionarea conținutului simplificată

Încorporarea unui CMS fără cap în sistemul dumneavoastră poate simplifica în mod semnificativ procesul de dezvoltare, permițându-vă să vă concentrați pe construirea logicii de bază a aplicației; mai degrabă decât să cheltuiască o cantitate substanțială de timp pe sarcini de management al conținutului.