Les systèmes de gestion de contenu (CMS) sans tête vous permettent de dissocier les fonctions de gestion de contenu de la logique qui gère la façon dont le contenu est présenté dans vos applications.

Essentiellement, en intégrant un CMS dans votre application, vous pouvez facilement gérer le contenu au sein d'un seul plate-forme, puis partagez de manière transparente le contenu sur divers canaux frontaux, y compris le Web et le mobile. applications.

Qu'est-ce qu'un CMS sans tête?

Un système de gestion de contenu sans tête facilite la création et la gestion de contenu et d'actifs numériques au sein d'une seule plateforme. Contrairement aux CMS traditionnels, le contenu est diffusé via des API telles que API GraphQL, une alternative aux API RESTful. Cela permet de partager le contenu sur diverses applications Web et mobiles.

Cette approche permet de séparer les préoccupations entre la gestion du contenu et sa présentation, vous garantissant ainsi de pouvoir adapter la manière dont le contenu est affiché pour s'adapter à différentes applications et appareils clients sans affecter le contenu sous-jacent et ses structure.

Premiers pas avec le CMS de contenu

Contentful est un système de gestion de contenu sans tête qui vous permet de créer, gérer et partager votre contenu numérique et vos ressources multimédias sur vos applications à l'aide de ses API.

Pour commencer à utiliser Contentful CMS, vous devez d'abord créer un modèle de contenu.

Créer un modèle de contenu

Suivez ces étapes pour créer un modèle de contenu sur Contentful.

1. Visite Le site de Contentful, créez un compte et connectez-vous pour accéder à votre espace. Contentful organise tout le contenu lié au projet et les actifs associés au sein de ces espaces.
2. Dans le coin supérieur gauche de votre espace, cliquez sur le Modèle de contenu pour ouvrir la page des paramètres.
3. Clique le Ajouter un type de contenu bouton sur le modèle de contenu paramètres page. Un type de contenu, dans ce cas, représente le modèle (structure) des données que vous ajouterez à Contentful.
4. Maintenant, entrez un nom et description pour votre type de contenu dans le modal contextuel. Contentful remplira automatiquement le Identifiant de l'API champ en fonction du nom que vous fournissez.
5. Ensuite, définissez la structure du contenu elle-même. Clique le Ajouter le champ bouton pour ajouter quelques champs à votre modèle de contenu. Voici quelques champs que vous pouvez utiliser pour le modèle :

   user_ID = type 
   first_name = type 
   role = type 

6. Pour ajouter des champs, sélectionnez le taper à partir de la fenêtre contextuelle des types.
7. Fournir un nom de domaine, puis cliquez sur le Ajouter et configurer bouton.
8. Enfin, vérifiez que les propriétés du champ sont comme prévu sur le confirmation page. De plus, lorsque vous êtes toujours sur la page de confirmation, vous pouvez spécifier des propriétés supplémentaires pour les champs, telles que des règles de validation.
9. Cliquez sur Confirmer pour ajouter le nouveau champ au modèle.
10. Une fois que vous avez ajouté tous les champs nécessaires à votre modèle, ils apparaîtront sous forme de liste, comme indiqué ci-dessous. Pour finaliser, cliquez sur le Sauvegarder pour appliquer les modifications au modèle de contenu.

Ajouter le contenu

Une fois le modèle de contenu en place, continuez et ajoutez le contenu en suivant ces étapes :

1. Accédez à votre tableau de bord spatial page et cliquez sur le Contenu languette.
2. Sélectionnez le Type de contenu, le modèle de contenu que vous avez créé, dans le menu déroulant de la barre de recherche. Ensuite, cliquez sur le Ajouter une entrée bouton pour ajouter du contenu.
3. Ensuite, ajoutez le contenu au éditeur de contenu. Pour chaque entrée, pensez à cliquer Publier pour l'enregistrer dans votre espace.

Générer des clés API

Enfin, vous devez récupérer vos clés API, que vous utiliserez pour faire des requêtes permettant de récupérer les données de contenu de l'application React.

1. Clique le Paramètres menu déroulant dans le coin supérieur droit de la page du tableau de bord. Ensuite, sélectionnez le Clés API option.
2. Clique le Ajouter une clé API pour ouvrir la page des paramètres des clés API.
3. Contentful générera et remplira automatiquement les clés API sur la page des paramètres des clés API. Il vous suffit de fournir un nom pour identifier de manière unique le jeu de clés.

Afin d'utiliser les API Contentful pour récupérer des données, vous avez besoin du identifiant d'espace et le jeton d'accès. Notez qu'il existe deux types de jetons d'accès: Clé API de diffusion de contenu et API d'aperçu du contenu. Dans un environnement de production, vous aurez besoin de la clé API Content Delivery.

Mais, en développement, vous n'avez besoin que de l'ID d'espace et du API d'aperçu du contenu clé. Copiez ces deux clés et plongeons dans le code.

Vous pouvez trouver le code de ce projet dans son GitHub dépôt.

Créer un projet React

Pour commencer, vous pouvez échafauder une application React à l'aide de create-react-app. Alternativement, configurer un projet React en utilisant Vite. Après avoir créé votre projet, continuez et installez ce package.

npm install contentful

Maintenant, créez un .env dans le répertoire racine de votre dossier de projet et ajoutez les clés API comme suit :

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Créer le hook useContentful

Dans le src répertoire, créez un nouveau dossier et nommez-le crochets. Dans ce dossier, ajoutez un nouveau utiliserContentful.jsx fichier et incluez le code suivant.

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

Ce code de hook personnalisé récupérera les données de l'espace Contentful. Il y parvient en établissant d’abord une connexion à un espace Contentful spécifique à l’aide du jeton d’accès et de l’ID d’espace fournis.

Ensuite, le crochet utilise le Client content au sein de obtenir des utilisateurs fonction à récupérer entrées d'un type de contenu particulier, dans ce cas, le code récupère les entrées du utilisateurs type de contenu, en sélectionnant spécifiquement uniquement leurs champs. Les données récupérées sont ensuite nettoyées et renvoyées sous forme de tableau d'objets utilisateur.

Mettre à jour le fichier App.jsx

Ouvrez le App.jsx fichier, supprimez le code React passe-partout et mettez-le à jour avec le code suivant.

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

Avec le utiliserContentful hook, vous pouvez récupérer et afficher les données de contenu de Contentful CMS sur le navigateur. Enfin, démarrez le serveur de développement pour mettre à jour les modifications apportées à l'application.

npm run dev

Super! Vous devriez pouvoir récupérer et restituer le contenu que vous avez ajouté sur Contentful à partir de l'application React. Allez-y et styliser l'application React à l'aide de Tailwindpour lui donner un look fantastique.

La gestion de contenu simplifiée

L'intégration d'un CMS sans tête dans votre système peut rationaliser considérablement le processus de développement, vous permettant de vous concentrer sur la création de la logique de base de l'application; plutôt que de consacrer beaucoup de temps aux tâches de gestion de contenu.