Headless content management systems (CMS) gjør at du kan koble innholdsadministrasjonsfunksjonene fra logikken som håndterer hvordan innholdet presenteres i applikasjonene dine.

I hovedsak, ved å integrere et CMS i applikasjonen din, kan du enkelt administrere innholdet i én enkelt plattform, og deretter sømløst dele innholdet på tvers av ulike frontend-kanaler, inkludert nett og mobil applikasjoner.

Hva er et hodeløst CMS?

Et hodeløst innholdsstyringssystem forenkler opprettelsen og administrasjonen av innhold og digitale eiendeler, alt innenfor én plattform. I motsetning til tradisjonell CMS, leveres innholdet gjennom APIer som f.eks GraphQL API, et alternativ til RESTful APIene. Dette gjør det mulig å dele innholdet på tvers av ulike nett- og mobilapper.

Denne tilnærmingen gjør det mulig å skille bekymringer mellom innholdsadministrasjon og presentasjonen – noe som sikrer at du kan skreddersy hvordan innholdet vises for å passe til ulike klientapplikasjoner og enheter uten å påvirke det underliggende innholdet og dets struktur.

Komme i gang med innholdsrikt CMS

Contentful er et hodeløst innholdsstyringssystem som lar deg lage, administrere og dele ditt digitale innhold og medieressurser på tvers av applikasjonene dine ved hjelp av API-ene.

For å komme i gang med Contentful CMS må du først lage en innholdsmodell.

Lag en innholdsmodell

Følg disse trinnene for å lage en innholdsmodell på Contentful.

1. Besøk Contentful sin nettside, opprett en konto og logg på for å få tilgang til din rom. Contentful organiserer alt prosjektrelatert innhold og tilhørende eiendeler innenfor disse områdene.
2. Øverst til venstre på plassen din klikker du på Innholdsmodell fanen for å åpne innstillingssiden.
3. Klikk på Legg til innholdstype knappen på innholdsmodellen innstillinger side. En innholdstype, i dette tilfellet, representerer modellen (strukturen) for dataene du skal legge til Contentful.
4. Nå, skriv inn a Navn og beskrivelse for innholdstypen din i popup-modalen. Contentful vil automatisk fylle ut API-identifikator feltet basert på navnet du oppgir.
5. Deretter definerer du selve innholdsstrukturen. Klikk på Legg til felt for å legge til et par felt i innholdsmodellen. Her er noen felt du kan bruke for modellen:

   user_ID = type 
   first_name = type 
   role = type 

6. For å legge til felt, velg type fra popup-vinduet for typer.
7. Gi en feltnavn, og klikk deretter på Legg til og konfigurer knapp.
8. Til slutt, kontroller at feltegenskapene er som forventet på bekreftelse side. I tillegg, mens du fortsatt er på bekreftelsessiden, kan du spesifisere tilleggsegenskaper for feltene, for eksempel eventuelle valideringsregler.
9. Klikk Bekrefte for å legge til det nye feltet i modellen.
10. Når du har lagt til alle nødvendige felt i modellen din, vil de vises i et listeformat, som vist nedenfor. For å fullføre, klikk på Lagre for å bruke endringene på innholdsmodellen.

Legg til innholdet

Med innholdsmodellen på plass, fortsett og legg til innholdet ved å følge disse trinnene:

1. Naviger til din plass dashbord siden og klikk på Innhold fanen.
2. Velg Innholdstype, innholdsmodellen du har opprettet, fra rullegardinmenyen i søkefeltet. Klikk deretter på Legg til oppføring knappen for å legge til innhold.
3. Deretter legger du til innholdet i innholdsredaktør. For hver oppføring, husk å klikke publisere for å lagre den på plassen din.

Generer API-nøkler

Til slutt må du ta tak i API-nøklene dine, som du vil bruke til å gjøre forespørsler om å hente innholdsdataene fra React-applikasjonen.

1. Klikk på Innstillinger rullegardinmenyen øverst til høyre på dashbordsiden. Velg deretter API-nøkler alternativ.
2. Klikk på Legg til API-nøkkel for å åpne innstillingssiden for API-nøkler.
3. Contentful vil automatisk generere og fylle ut API-nøklene på innstillingssiden for API-nøkler. Du trenger bare å oppgi et navn for å identifisere settet med nøkler.

For å bruke Contentful APIer til å hente data, trenger du space ID og tilgangstoken. Legg merke til at det finnes to typer tilgangstokener: API-nøkkel for innholdslevering og Content Preview API. I et produksjonsmiljø trenger du Content Delivery API-nøkkelen.

Men i utviklingen trenger du bare plass-IDen og Content Preview API nøkkel. Kopier disse to nøklene og la oss dykke ned i koden.

Du kan finne dette prosjektets kode i sin GitHub oppbevaringssted.

Opprett et React-prosjekt

For å komme i gang kan du stillas en React-applikasjon ved å bruke create-react-app. Alternativt sette opp et React-prosjekt ved hjelp av Vite. Etter å ha opprettet prosjektet ditt, fortsett og installer denne pakken.

npm install contentful

Lag nå en .env fil i rotkatalogen til prosjektmappen din, og legg til API-nøklene som følger:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Lag useContentful Hook

I src katalog, opprett en ny mappe og navngi den kroker. Inne i denne mappen legger du til en ny useContentful.jsx fil, og ta med følgende kode.

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

Denne tilpassede hook-koden henter dataene fra Contentful-området. Den oppnår dette ved først å etablere en tilkobling til et spesifikt Contentful-rom ved å bruke det medfølgende tilgangstokenet og space-IDen.

Deretter bruker kroken Fornøyd klient innen getUsers funksjon for å hente innganger av en bestemt innholdstype, i dette tilfellet henter koden oppføringene til brukere innholdstype, spesifikt velge bare feltene deres. De hentede dataene blir deretter renset og returnert som en rekke brukerobjekter.

Oppdater App.jsx-filen

Åpne App.jsx fil, slett reaktorkoden og oppdater den med følgende kode.

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

Med bruk innholdsrik hook, kan du hente og vise innholdsdataene fra Contentful CMS på nettleseren. Til slutt starter du utviklingsserveren for å oppdatere endringene som er gjort i applikasjonen.

npm run dev

Flott! Du skal kunne hente og gjengi innholdet du har lagt til på Contentful fra React-appen. Gå videre og stil React-applikasjonen med Tailwindfor å gi den et fantastisk utseende.

Innholdsadministrasjon på en enkel måte

Å inkorporere et hodeløst CMS i systemet ditt kan strømlinjeforme utviklingsprosessen betydelig, slik at du kan konsentrere deg om å bygge kjerneapplikasjonslogikken; i stedet for å bruke mye tid på innholdsadministrasjonsoppgaver.