Hur man integrerar Contentful CMS med React

Med Headless Content Management System (CMS) kan du frikoppla innehållshanteringsfunktionerna från den logik som hanterar hur innehållet presenteras i dina applikationer.

Genom att införliva ett Content Management System (CMS) i en applikation kan man effektivisera hanteringen av innehåll genom en enhetlig plattform, samtidigt som man underlättar spridningen av sådant innehåll över olika front-end-medier, som omfattar både webb- och mobilapplikationer.

Vad är ett Headless CMS?

Ett headless content management-system (CMS) erbjuder en heltäckande lösning för att skapa och hantera både innehåll och digitala tillgångar i en enhetlig miljö. Till skillnad från konventionella CMS-system levererar denna typ av plattform innehåll via avancerade gränssnitt som GraphQL API istället för att förlita sig på traditionella RESTful API:er. Det gör det enkelt att dela information mellan flera webb- och mobilapplikationer.

Denna metod underlättar en ansvarsfördelning mellan innehållshantering och dess visuella representation, vilket säkerställer att formateringen av informationen kan anpassas för att tillgodose olika klientprogram och plattformar samtidigt som integriteten i innehållet och dess organisation bibehålls.

Kom igång med Contentful CMS

Contentful är en avancerad plattform för innehållshantering som gör det möjligt för användare att skapa, kontrollera och sprida sina digitala tillgångar och multimediaresurser i olika applikationer genom att använda dess API:er (Application Programming Interface).

För att kunna börja använda Contentfuls Content Management System (CMS) är det nödvändigt att etablera en innehållsmodell som ett första steg.

Skapa en innehållsmodell

För att skapa en innehållsmodell inom Contentful, vänligen följ nedanstående riktlinjer:

⭐ Besök Contentfuls webbplats , skapa ett konto och logga in för att komma åt ditt utrymme. Contentful organiserar allt projektrelaterat innehåll och tillhörande tillgångar inom dessa utrymmen.

⭐ I det övre vänstra hörnet av ditt utrymme klickar du på fliken Innehållsmodell för att öppna inställningssidan.

⭐ Klicka på knappen Lägg till innehållstyp på inställningssidan för innehållsmodellen. En innehållstyp, i det här fallet, representerar modellen (strukturen) för de data du kommer att lägga till i Contentful.

⭐ Ange nu ett namn och en beskrivning för din innehållstyp i popup-modalen. Contentful fyller automatiskt i fältet Api-identifierare baserat på det namn du anger.

⭐ Därefter definierar du själva innehållsstrukturen. Klicka på knappen Lägg till fält för att lägga till ett par fält i innehållsmodellen. Här är några fält som du kan använda för modellen:

 user_ID = type <number>
first_name = type <text (short)>
role = type <text (short)> 

⭐ Om du vill lägga till fält väljer du typ i popup-fönstret Typer.

⭐ Ange ett fältnamn och klicka sedan på knappen Lägg till och konfigurera.

⭐ Kontrollera slutligen att fältegenskaperna är som förväntat på bekräftelsesidan. På bekräftelsesidan kan du dessutom ange ytterligare egenskaper för fälten, t.ex. eventuella valideringsregler.

Vänligen bekräfta din åtgärd genom att klicka på den angivna knappen för att fortsätta med att lägga till ett nytt fält i den angivna modellen.

⭐ När du har lagt till alla nödvändiga fält i din modell visas de i ett listformat, som visas nedan. Klicka på knappen Spara för att tillämpa ändringarna i innehållsmodellen.

Lägg till innehåll

Använd den medföljande innehållsmodellen för att skapa innehåll enligt följande:

Gå till Space Dashboard genom att öppna menyn “Space”, välja alternativet “Dashboard” och klicka på fliken “Content”.

⭐ Välj Innehållstyp , den innehållsmodell du har skapat, från rullgardinsmenyn i sökfältet. Klicka sedan på knappen Lägg till post för att lägga till innehåll.

⭐ Lägg sedan till innehållet i innehållsredigeraren . För varje post, kom ihåg att klicka på Publicera för att spara den på ditt utrymme.

Generera API-nycklar

För att kunna hämta innehållsdata från React-applikationen med hjälp av en API-nyckel måste man först erhålla dessa nycklar och använda dem för att göra förfrågningar om önskad information.

⭐ Klicka på rullgardinsmenyn Inställningar i det övre högra hörnet på instrumentpanelsidan. Välj sedan alternativet API-nycklar.

Klicka på fliken “Lägg till API-nyckel” för att komma till inställningssidan för dina API-nycklar.

⭐ Contentful kommer automatiskt att generera och fylla i API-nycklarna på inställningssidan för API-nycklar. Du behöver bara ange ett namn för att unikt identifiera uppsättningen nycklar.

API-nyckel för innehållsleverans och API för innehållsförhandsgranskning. För verksamhet i en live-miljö krävs vanligtvis den förstnämnda för åtkomst till och hantering av publicerat innehåll.

För att utveckla applikationer som använder Space ID och Content Preview API behöver man inte bekymra sig om någon ytterligare information utöver dessa nycklar.Dessa kan enkelt kopieras och sedan implementeras i den relevanta programmeringskoden.

Källkoden för detta projekt finns tillgänglig på GitHub-plattformen, som fungerar som en värdtjänst och versionskontrollsystem för programvaruutvecklingsprojekt.

Skapa ett React-projekt

För att påbörja processen finns det två alternativ för att skapa en React-applikation. Det ena är att använda create-react-app, som är ett vanligt verktyg för att skapa en React-applikation. Det andra alternativet är att använda Vite, ett framväxande ramverk som underlättar etableringen av ett React-projekt. När projektet har upprättats rekommenderas att detta paket introduceras i miljön.

 npm install contentful 

Att införliva det medföljande kodavsnittet i rotkatalogen i projektets mapp rekommenderas för att skapa en miljövariabelkonfiguration som kallas “.env”-fil. Den här filen används för att lagra känslig information som API-nycklar, som enkelt kan nås av applikationer under körning utan att exponera dem i klartext. För att implementera den här metoden följer du bara de angivna riktlinjerna för att generera det önskade resultatet.

 VITE_REACT_APP_CONTENTFUL_SPACE_ID="<space-id>"

 VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN="<content-preview-API-access-token>" 

Skapa useContentful Hook

I källkatalogen skapar du en ny mapp och kallar den “hooks”. I detta fack, införliva ett ytterligare dokument med titeln “useContentful.jsx”, och bädda in följande arrangemang av symboler och tecken:

 import { createClient } from "contentful";

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

Denna skräddarsydda krokimplementering underlättar hämtning av information från ett angivet Contentful-utrymme genom upprättande av en säker anslutning med hjälp av en tilldelad åtkomsttoken och identifierande utrymmesidentifierare.

Funktionen getUsers använder Contentful-klienten som är integrerad med kroken och hämtar poster av en specifik innehållstyp genom att komma åt användarens innehållstypsfält. Denna information rensas därefter och levereras som en matris av användarobjekt för vidare bearbetning.

Uppdatera filen App.jsx

Öppna filen “App.jsx” i din projektkatalog, ta bort all befintlig React-kod och ersätt den med den uppdaterade koden nedan.

 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 (
       <>
        <h1>Contentful CMS With React Tutorial</h1>
            {users.map((user, index) => (
            <div key={index}>
            <p> {user.userId} </p>
             <p > {user.firstName} </p>
            <p > {user.role} </p>

            </div>
           ))}
       </>
  );
};
export default App 

Genom att använda Contentful-integrationen som tillhandahålls av den använda kroken möjliggörs sömlös hämtning och rendering av information som lagras i Contentfuls Content Management System direkt i din webbaserade applikation. Följaktligen är det nödvändigt att initiera utvecklingsservern för att effektivt implementera eventuella ändringar eller uppdateringar som har tillämpats på den ovan nämnda programvaran.

 npm run dev 

Med integreringen av Contentful på plats kan din React-applikation nu hämta och visa det innehåll som har lagts till i Contentful. Jag föreslår att du förskönar utseendet på React-applikationen genom att använda Tailwind CSS för stylingändamål, vilket resulterar i en imponerande visuell presentation.

Content Management Made Easy

Integrering av ett headless Content Management System (CMS) i din infrastruktur har potential att påskynda utvecklingsprocessen avsevärt, så att du kan fokusera mer på att bygga den primära applikationslogiken i stället för att ägna mycket tid åt innehållshantering.