Mit Headless-Content-Management-Systemen (CMS) können Sie die Content-Management-Funktionen von der Logik entkoppeln, die die Darstellung der Inhalte in Ihren Anwendungen steuert.

Im Wesentlichen können Sie durch die Integration eines CMS in Ihre Anwendung den gesamten Inhalt ganz einfach in einem einzigen verwalten Plattform und teilen Sie die Inhalte dann nahtlos über verschiedene Frontend-Kanäle, einschließlich Web und Mobilgeräte Anwendungen.

Was ist ein Headless CMS?

Ein Headless-Content-Management-System erleichtert die Erstellung und Verwaltung von Inhalten und digitalen Assets auf einer Plattform. Im Gegensatz zu herkömmlichen CMS werden die Inhalte über APIs wie bereitgestellt GraphQL API, eine Alternative zu den RESTful APIs. Dadurch ist es möglich, die Inhalte über verschiedene Web- und mobile Apps hinweg zu teilen.

Dieser Ansatz ermöglicht die Trennung der Anliegen zwischen Content-Management und seiner Präsentation – und stellt so sicher, dass Sie die Vorgehensweise individuell anpassen können Der Inhalt wird so angezeigt, dass er für verschiedene Clientanwendungen und Geräte geeignet ist, ohne dass sich dies auf den zugrunde liegenden Inhalt und seine Inhalte auswirkt Struktur.

Erste Schritte mit Contentful CMS

Contentful ist ein Headless-Content-Management-System, mit dem Sie mithilfe seiner APIs Ihre digitalen Inhalte und Medienressourcen in Ihren Anwendungen erstellen, verwalten und teilen können.

Um Contentful CMS nutzen zu können, müssen Sie zunächst ein Inhaltsmodell erstellen.

Erstellen Sie ein Inhaltsmodell

Befolgen Sie diese Schritte, um ein Inhaltsmodell auf Contentful zu erstellen.

1. Besuchen Contentfuls Website, erstellen Sie ein Konto und melden Sie sich an, um auf Ihr Konto zuzugreifen Raum. Contentful organisiert alle projektbezogenen Inhalte und zugehörigen Assets in diesen Räumen.
2. Klicken Sie in der oberen linken Ecke Ihres Bereichs auf Inhaltsmodell Klicken Sie auf die Registerkarte, um die Einstellungsseite zu öffnen.
3. Drücke den Inhaltstyp hinzufügen Schaltfläche im Inhaltsmodell Einstellungen Seite. Ein Inhaltstyp stellt in diesem Fall das Modell (die Struktur) für die Daten dar, die Sie zu Contentful hinzufügen.
4. Geben Sie nun a ein Name Und Beschreibung für Ihren Inhaltstyp innerhalb des Popup-Modals. Contentful füllt das automatisch aus API-Identifikator Feld basierend auf dem von Ihnen angegebenen Namen.
5. Als nächstes definieren Sie die Inhaltsstruktur selbst. Drücke den Feld hinzufügen Klicken Sie auf die Schaltfläche, um Ihrem Inhaltsmodell einige Felder hinzuzufügen. Hier sind einige Felder, die Sie für das Modell verwenden können:

   user_ID = type 
   first_name = type 
   role = type 

6. Um Felder hinzuzufügen, wählen Sie das aus Typ aus dem Typen-Popup-Fenster.
7. Zur Verfügung stellen Feldname, und klicken Sie dann auf Hinzufügen und konfigurieren Taste.
8. Überprüfen Sie abschließend, ob die Feldeigenschaften den Erwartungen entsprechen Bestätigung Seite. Darüber hinaus können Sie noch auf der Bestätigungsseite zusätzliche Eigenschaften für die Felder angeben, beispielsweise etwaige Validierungsregeln.
9. Klicken Bestätigen um das neue Feld zum Modell hinzuzufügen.
10. Sobald Sie alle erforderlichen Felder zu Ihrem Modell hinzugefügt haben, werden diese in einem Listenformat angezeigt, wie unten gezeigt. Klicken Sie zum Abschluss auf Speichern Klicken Sie auf die Schaltfläche, um die Änderungen auf das Inhaltsmodell anzuwenden.

Fügen Sie den Inhalt hinzu

Wenn das Inhaltsmodell eingerichtet ist, können Sie den Inhalt hinzufügen, indem Sie die folgenden Schritte ausführen:

1. Navigieren Sie zu Ihrem Raum-Dashboard Seite und klicken Sie auf Inhalt Tab.
2. Wähle aus Inhaltstyp, das von Ihnen erstellte Inhaltsmodell, aus dem Dropdown-Menü in der Suchleiste. Klicken Sie dann auf Eintrag hinzufügen Klicken Sie auf die Schaltfläche, um Inhalte hinzuzufügen.
3. Als nächstes fügen Sie den Inhalt hinzu Content-Editor. Denken Sie daran, bei jedem Eintrag darauf zu klicken Veröffentlichen um es an Ihrem Platz zu speichern.

Generieren Sie API-Schlüssel

Schließlich müssen Sie sich Ihre API-Schlüssel besorgen, mit denen Sie Anfragen zum Abrufen der Inhaltsdaten aus der React-Anwendung stellen.

1. Drücke den Einstellungen Dropdown-Menü in der oberen rechten Ecke der Dashboard-Seite. Wählen Sie dann die aus API-Schlüssel Möglichkeit.
2. Drücke den API-Schlüssel hinzufügen Klicken Sie auf die Schaltfläche, um die Einstellungsseite für API-Schlüssel zu öffnen.
3. Contentful generiert und füllt automatisch die API-Schlüssel auf der Seite mit den API-Schlüsseleinstellungen aus. Sie müssen lediglich einen Namen angeben, um den Schlüsselsatz eindeutig zu identifizieren.

Um Contentful APIs zum Abrufen von Daten nutzen zu können, benötigen Sie die Raum-ID und das Zugangstoken. Beachten Sie, dass es zwei Arten von Zugriffstoken gibt: API-Schlüssel für die Inhaltsbereitstellung Und Inhaltsvorschau-API. In einer Produktionsumgebung benötigen Sie den Content Delivery API-Schlüssel.

In der Entwicklung benötigen Sie jedoch nur die Space-ID und die Inhaltsvorschau-API Schlüssel. Kopieren Sie diese beiden Schlüssel und tauchen Sie ein in den Code.

Den Code dieses Projekts finden Sie in seiner GitHub Repository.

Erstellen Sie ein Reaktionsprojekt

Um anzufangen, können Sie Erstellen Sie ein Gerüst für eine React-Anwendung mit „create-react-app“.. Alternative, Richten Sie ein React-Projekt mit Vite ein. Nachdem Sie Ihr Projekt erstellt haben, installieren Sie dieses Paket.

npm install contentful

Erstellen Sie nun eine .env Datei im Stammverzeichnis Ihres Projektordners und fügen Sie die API-Schlüssel wie folgt hinzu:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Erstellen Sie den useContentful-Hook

Im src Verzeichnis, erstellen Sie einen neuen Ordner und benennen Sie ihn Haken. Fügen Sie in diesem Ordner einen neuen hinzu Verwenden Sie Contentful.jsx Datei und fügen Sie den folgenden Code ein.

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

Dieser benutzerdefinierte Hook-Code ruft die Daten aus dem Contentful-Bereich ab. Dies wird erreicht, indem zunächst mithilfe des bereitgestellten Zugriffstokens und der Space-ID eine Verbindung zu einem bestimmten Contentful-Bereich hergestellt wird.

Dann verwendet der Hook das Zufriedener Kunde innerhalb der getUsers Funktion zum Abrufen Einträge eines bestimmten Inhaltstyps, in diesem Fall ruft der Code die Einträge des ab Benutzer Inhaltstyp, indem Sie gezielt nur deren Felder auswählen. Die abgerufenen Daten werden dann bereinigt und als Array von Benutzerobjekten zurückgegeben.

Aktualisieren Sie die App.jsx-Datei

Öffne das App.jsx Datei, löschen Sie den Boilerplate-React-Code und aktualisieren Sie ihn mit dem folgenden 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

Mit dem verwendenContentful Mit dem Hook können Sie die Inhaltsdaten von Contentful CMS im Browser abrufen und anzeigen. Starten Sie abschließend den Entwicklungsserver, um die an der Anwendung vorgenommenen Änderungen zu aktualisieren.

npm run dev

Großartig! Sie sollten in der Lage sein, die Inhalte, die Sie auf Contentful hinzugefügt haben, über die React-App abzurufen und zu rendern. Fahre fort und Gestalten Sie die React-Anwendung mit Tailwindum ihm ein fantastisches Aussehen zu verleihen.

Content-Management leicht gemacht

Durch die Integration eines Headless-CMS in Ihr System kann der Entwicklungsprozess erheblich rationalisiert werden, sodass Sie sich auf den Aufbau der Kernanwendungslogik konzentrieren können. anstatt viel Zeit mit Content-Management-Aufgaben zu verbringen.