Met headless contentmanagementsystemen (CMS) kunt u de contentmanagementfuncties loskoppelen van de logica die bepaalt hoe de content in uw applicaties wordt gepresenteerd.

Door een CMS in uw applicatie te integreren, kunt u de inhoud eenvoudig in één geheel beheren platform en deel de inhoud vervolgens naadloos via verschillende frontend-kanalen, waaronder internet en mobiel toepassingen.

Wat is een headless CMS?

Een headless contentmanagementsysteem vergemakkelijkt de creatie en het beheer van content en digitale assets allemaal binnen één platform. In tegenstelling tot traditioneel CMS wordt de inhoud geleverd via API's zoals GraphQL API, een alternatief voor de RESTful API's. Dit maakt het mogelijk om de inhoud te delen via verschillende web- en mobiele apps.

Deze aanpak maakt het mogelijk om de zorgen tussen contentbeheer en de presentatie ervan te scheiden, zodat u kunt bepalen hoe de inhoud wordt weergegeven voor verschillende clienttoepassingen en apparaten, zonder de onderliggende inhoud en de bijbehorende inhoud te beïnvloeden structuur.

Aan de slag met inhoudvol CMS

Contentful is een headless contentmanagementsysteem waarmee u uw digitale inhoud en mediabronnen via uw applicaties kunt creëren, beheren en delen met behulp van de API's.

Om aan de slag te gaan met Contentful CMS, moet je eerst een contentmodel maken.

Maak een inhoudsmodel

Volg deze stappen om een ​​contentmodel op Contentful te maken.

1. Bezoek De website van Contentful, maak een account aan en log in om toegang te krijgen tot uw ruimte. Contentful organiseert binnen deze ruimtes alle projectgerelateerde content en bijbehorende assets.
2. Klik in de linkerbovenhoek van uw ruimte op de Inhoudsmodel tabblad om de instellingenpagina te openen.
3. Klik op de Voeg inhoudstype toe knop op het inhoudsmodel instellingen bladzijde. Een inhoudstype vertegenwoordigt in dit geval het model (structuur) voor de gegevens die u aan Contentful gaat toevoegen.
4. Voer nu een in naam En beschrijving voor uw inhoudstype binnen de pop-upmodal. Contentful vult automatisch het API-identificatie veld op basis van de naam die u opgeeft.
5. Definieer vervolgens de inhoudsstructuur zelf. Klik op de Veld toevoegen knop om een ​​aantal velden aan uw inhoudsmodel toe te voegen. Hier zijn een paar velden die u voor het model kunt gebruiken:

   user_ID = type 
   first_name = type 
   role = type 

6. Om velden toe te voegen, selecteert u de type uit het pop-upvenster Typen.
7. Verschaffen veldnaamen klik vervolgens op de Toevoegen en configureren knop.
8. Controleer ten slotte of de veldeigenschappen zijn zoals verwacht op het bevestiging bladzijde. Bovendien kunt u, terwijl u zich nog op de bevestigingspagina bevindt, aanvullende eigenschappen voor de velden opgeven, zoals eventuele validatieregels.
9. Klik Bevestigen om het nieuwe veld aan het model toe te voegen.
10. Zodra u alle benodigde velden aan uw model heeft toegevoegd, verschijnen ze in een lijstindeling, zoals hieronder weergegeven. Om te voltooien klikt u op de Redden om de wijzigingen op het inhoudsmodel toe te passen.

Voeg de inhoud toe

Nu het inhoudsmodel aanwezig is, kunt u doorgaan en de inhoud toevoegen door deze stappen te volgen:

1. Navigeer naar uw ruimtedashboard pagina en klik op de Inhoud tabblad.
2. Selecteer de Inhoudstype, het inhoudsmodel dat u heeft gemaakt, via het vervolgkeuzemenu in de zoekbalk. Klik vervolgens op de Vermelding toevoegen knop om inhoud toe te voegen.
3. Voeg vervolgens de inhoud toe aan het inhoud editor. Vergeet niet om bij elk item te klikken Publiceren om het in uw ruimte op te slaan.

Genereer API-sleutels

Ten slotte moet u uw API-sleutels pakken, die u gaat gebruiken om verzoeken in te dienen om de inhoudsgegevens uit de React-applicatie op te halen.

1. Klik op de Instellingen vervolgkeuzemenu in de rechterbovenhoek van de dashboardpagina. Selecteer vervolgens de API-sleutels keuze.
2. Klik op de API-sleutel toevoegen om de instellingenpagina voor API-sleutels te openen.
3. Contentful genereert en vult automatisch de API-sleutels op de instellingenpagina voor API-sleutels. U hoeft alleen een naam op te geven om de set sleutels uniek te identificeren.

Om Contentful API's te gebruiken om gegevens op te halen, hebt u de spatie-ID en de toegangstoken. Merk op dat er twee soorten toegangstokens zijn: API-sleutel voor inhoudslevering En API voor inhoudsvoorbeeld. In een productieomgeving heeft u de Content Delivery API-sleutel nodig.

Maar tijdens de ontwikkeling hebt u alleen de spatie-ID en de API voor inhoudsvoorbeeld sleutel. Kopieer deze twee sleutels en laten we in de code duiken.

U kunt de code van dit project vinden in zijn GitHub opslagplaats.

Maak een React-project

Om te beginnen, dat kan stel een React-applicatie samen met create-react-app. Alternatief, een React-project opzetten met Vite. Nadat u uw project heeft gemaakt, kunt u doorgaan en dit pakket installeren.

npm install contentful

Maak nu een .env bestand in de hoofdmap van uw projectmap en voeg de API-sleutels als volgt toe:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Maak de useContentful Hook

In de src directory, maak een nieuwe map en geef deze een naam haken. Voeg in deze map een nieuw gebruikContentful.jsx bestand en voeg de volgende code toe.

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

Deze aangepaste hookcode haalt de gegevens op uit de Contentful-ruimte. Dit wordt bereikt door eerst een verbinding tot stand te brengen met een specifieke Contentful-ruimte met behulp van het verstrekte toegangstoken en de ruimte-ID.

Vervolgens gebruikt de haak de Tevreden klant binnen de getUsers functie om op te halen inzendingen van een bepaald inhoudstype, in dit geval haalt de code de vermeldingen op van de gebruikers inhoudstype, waarbij specifiek alleen hun velden worden geselecteerd. De opgehaalde gegevens worden vervolgens opgeschoond en geretourneerd als een reeks gebruikersobjecten.

Werk het App.jsx-bestand bij

Open de App.jsx bestand, verwijder de standaard React-code en werk deze bij met de volgende code.

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

Met de gebruikInhoudvol hook kunt u de inhoudsgegevens van Contentful CMS in de browser ophalen en weergeven. Start ten slotte de ontwikkelingsserver om de wijzigingen in de applicatie bij te werken.

npm run dev

Geweldig! Je zou de inhoud die je op Contentful hebt toegevoegd, moeten kunnen ophalen en weergeven vanuit de React-app. Ga je gang en stijl de React-applicatie met Tailwindom het een fantastische uitstraling te geven.

Contentbeheer eenvoudig gemaakt

Door een headless CMS in uw systeem op te nemen, kunt u het ontwikkelingsproces aanzienlijk stroomlijnen, zodat u zich kunt concentreren op het bouwen van de kernapplicatielogica; in plaats van een aanzienlijke hoeveelheid tijd te besteden aan contentbeheertaken.