I sistemi di gestione dei contenuti (CMS) headless ti consentono di disaccoppiare le funzioni di gestione dei contenuti dalla logica che gestisce il modo in cui il contenuto viene presentato nelle tue applicazioni.

In sostanza, integrando un CMS nella tua applicazione, puoi gestire facilmente i contenuti tutti all'interno di un unico piattaforma e quindi condividere facilmente i contenuti su vari canali frontend, inclusi web e dispositivi mobili applicazioni.

Cos'è un CMS headless?

Un sistema di gestione dei contenuti headless facilita la creazione e la gestione di contenuti e risorse digitali all'interno di un'unica piattaforma. A differenza dei CMS tradizionali, il contenuto viene fornito tramite API come API GraphQL, un'alternativa alle API RESTful. Ciò consente di condividere il contenuto su varie app Web e mobili.

Questo approccio consente la separazione delle preoccupazioni tra la gestione del contenuto e la sua presentazione, garantendo la possibilità di personalizzare le modalità il contenuto viene visualizzato per adattarsi a diverse applicazioni e dispositivi client senza influenzare il contenuto sottostante e i suoi struttura.

Iniziare con il CMS di contenuti

Contentful è un sistema di gestione dei contenuti headless che ti consente di creare, gestire e condividere i tuoi contenuti digitali e le risorse multimediali attraverso le tue applicazioni utilizzando le sue API.

Per iniziare a utilizzare Contentful CMS, devi prima creare un modello di contenuto.

Creare un modello di contenuto

Segui questi passaggi per creare un modello di contenuto su Contentful.

1. Visita Il sito web di Contentful, crea un account e accedi per accedere al tuo spazio. Contentful organizza tutti i contenuti relativi al progetto e le risorse associate all'interno di questi spazi.
2. Nell'angolo in alto a sinistra del tuo spazio, fai clic su Modello di contenuto scheda per aprire la pagina delle impostazioni.
3. Clicca il Aggiungi tipo di contenuto pulsante sul modello di contenuto impostazioni pagina. Un tipo di contenuto, in questo caso, rappresenta il modello (struttura) per i dati che aggiungerai a Contentful.
4. Ora inserisci a nome E descrizione per il tuo tipo di contenuto all'interno della modalità pop-up. Contentful popolerà automaticamente il file Identificatore API campo in base al nome fornito.
5. Successivamente, definisci la struttura del contenuto stesso. Clicca il Aggiungi campo pulsante per aggiungere un paio di campi al tuo modello di contenuto. Ecco alcuni campi che puoi utilizzare per il modello:

   user_ID = type 
   first_name = type 
   role = type 

6. Per aggiungere campi, seleziona il tipo dalla finestra pop-up dei tipi.
7. Fornire un nome del campo, quindi fare clic su Aggiungi e configura pulsante.
8. Infine, verifica che le proprietà del campo siano quelle previste nel file conferma pagina. Inoltre, mentre sei ancora nella pagina di conferma, puoi specificare proprietà aggiuntive per i campi come eventuali regole di convalida.
9. Clic Confermare per aggiungere il nuovo campo al modello.
10. Una volta aggiunti tutti i campi necessari al tuo modello, verranno visualizzati in un formato elenco, come mostrato di seguito. Per finalizzare, fare clic su Salva pulsante per applicare le modifiche al modello di contenuto.

Aggiungi il contenuto

Una volta installato il modello di contenuto, vai avanti e aggiungi il contenuto seguendo questi passaggi:

1. Vai al tuo cruscotto spaziale pagina e fare clic su Contenuto scheda.
2. Seleziona il Tipo di contenuto, il modello di contenuto che hai creato, dal menu a discesa nella barra di ricerca. Quindi, fare clic su Aggiungi voce pulsante per aggiungere contenuto.
3. Successivamente, aggiungi il contenuto al file redattore di contenuti. Per ogni voce, ricordati di cliccare Pubblicare per salvarlo nel tuo spazio.

Genera chiavi API

Infine, devi prendere le tue chiavi API, che utilizzerai per effettuare richieste per recuperare i dati del contenuto dall'applicazione React.

1. Clicca il Impostazioni menu a discesa nell'angolo in alto a destra della pagina del dashboard. Quindi, seleziona il Chiavi API opzione.
2. Clicca il Aggiungi chiave API per aprire la pagina delle impostazioni delle chiavi API.
3. Contentful genererà e popolerà automaticamente le chiavi API nella pagina delle impostazioni delle chiavi API. È sufficiente fornire un nome per identificare in modo univoco il set di chiavi.

Per utilizzare le API Contentful per recuperare i dati, è necessario il file ID dello spazio e il token di accesso. Tieni presente che esistono due tipi di token di accesso: Chiave API di distribuzione dei contenuti E API di anteprima del contenuto. In un ambiente di produzione, avrai bisogno della chiave API Content Delivery.

Ma, in fase di sviluppo, hai bisogno solo dell'ID dello spazio e del file API di anteprima del contenuto chiave. Copia queste due chiavi e tuffiamoci nel codice.

Puoi trovare il codice di questo progetto nel suo file GitHub deposito.

Crea un progetto React

Per iniziare, puoi impalcatura di un'applicazione React utilizzando create-react-app. In alternativa, impostare un progetto React utilizzando Vite. Dopo aver creato il tuo progetto, vai avanti e installa questo pacchetto.

npm install contentful

Ora crea un file .env file nella directory principale della cartella del progetto e aggiungi le chiavi API come segue:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Crea l'hook useContentful

Nel src directory, crea una nuova cartella e assegnagli un nome ganci. All'interno di questa cartella, aggiungine una nuova useContentful.jsx file e includere il seguente codice.

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

Questo codice hook personalizzato recupererà i dati dallo spazio Contentful. Ciò avviene innanzitutto stabilendo una connessione a uno spazio Contentful specifico utilizzando il token di accesso e l'ID dello spazio forniti.

Quindi, l'hook utilizza il file Cliente soddisfatto all'interno del getUsers funzione da recuperare inserimenti di un particolare tipo di contenuto, in questo caso il codice recupera le voci del file utenti tipo di contenuto, selezionando specificatamente solo i relativi campi. I dati recuperati vengono quindi ripuliti e restituiti come un array di oggetti utente.

Aggiorna il file App.jsx

Apri il App.jsx file, elimina il codice React boilerplate e aggiornalo con il seguente codice.

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

Con il utilizzareContenuto hook, puoi recuperare e visualizzare i dati del contenuto da Contentful CMS sul browser. Infine, avvia il server di sviluppo per aggiornare le modifiche apportate all'applicazione.

npm run dev

Grande! Dovresti essere in grado di recuperare ed eseguire il rendering dei contenuti che hai aggiunto su Contentful dall'app React. Vai avanti e modellare l'applicazione React utilizzando Tailwindper dargli un aspetto fantastico.

La gestione dei contenuti diventa semplice

Incorporare un CMS headless nel tuo sistema può semplificare in modo significativo il processo di sviluppo, consentendoti di concentrarti sulla costruzione della logica principale dell'applicazione; piuttosto che dedicare una notevole quantità di tempo alle attività di gestione dei contenuti.