Los sistemas de administración de contenido (CMS) sin cabeza le permiten desacoplar las funciones de administración de contenido de la lógica que maneja cómo se presenta el contenido en sus aplicaciones.

Básicamente, al integrar un CMS en su aplicación, puede administrar fácilmente el contenido, todo en un solo plataforma y luego compartir sin problemas el contenido a través de varios canales frontend, incluidos web y dispositivos móviles. aplicaciones.

¿Qué es un CMS sin cabeza?

Un sistema de gestión de contenidos sin cabeza facilita la creación y gestión de contenidos y activos digitales, todo dentro de una sola plataforma. A diferencia del CMS tradicional, el contenido se entrega a través de API como API GraphQL, una alternativa a las API RESTful. Esto hace posible compartir el contenido entre varias aplicaciones web y móviles.

Este enfoque permite separar las preocupaciones entre la gestión de contenidos y su presentación, lo que garantiza que se pueda adaptar cómo el contenido se muestra para adaptarse a diferentes aplicaciones y dispositivos del cliente sin afectar el contenido subyacente y su estructura.

Comenzando con Contentful CMS

Contentful es un sistema de administración de contenido sin cabeza que le permite crear, administrar y compartir su contenido digital y recursos multimedia en sus aplicaciones utilizando sus API.

Para comenzar a utilizar Contentful CMS, primero debe crear un modelo de contenido.

Crear un modelo de contenido

Siga estos pasos para crear un modelo de contenido en Contentful.

1. Visita Sitio web de contenido, cree una cuenta e inicie sesión para acceder a su espacio. Contentful organiza todo el contenido relacionado con el proyecto y los activos asociados dentro de estos espacios.
2. En la esquina superior izquierda de tu espacio, haz clic en el Modelo de contenido pestaña para abrir la página de configuración.
3. Haga clic en el Agregar tipo de contenido botón en el modelo de contenido ajustes página. Un tipo de contenido, en este caso, representa el modelo (estructura) de los datos que agregará a Contentful.
4. Ahora, introduce un nombre y descripción para su tipo de contenido dentro del modal emergente. Contentful completará automáticamente el Identificador de API campo basado en el nombre que proporcione.
5. A continuación, defina la estructura del contenido en sí. Haga clic en el Agregue campo para agregar un par de campos a su modelo de contenido. A continuación se muestran algunos campos que puede utilizar para el modelo:

   user_ID = type 
   first_name = type 
   role = type 

6. Para agregar campos, seleccione el tipo desde la ventana emergente de tipos.
7. Proporcionar una nombre del campoy luego haga clic en Agregar y configurar botón.
8. Finalmente, verifique que las propiedades del campo sean las esperadas en el confirmación página. Además, mientras aún se encuentra en la página de confirmación, puede especificar propiedades adicionales para los campos, como cualquier regla de validación.
9. Hacer clic Confirmar para agregar el nuevo campo al modelo.
10. Una vez que haya agregado todos los campos necesarios a su modelo, aparecerán en formato de lista, como se muestra a continuación. Para finalizar, haga clic en el Ahorrar para aplicar los cambios al modelo de contenido.

Agregar el contenido

Con el modelo de contenido implementado, continúe y agregue el contenido siguiendo estos pasos:

1. Navega hasta tu tablero espacial página y haga clic en Contenido pestaña.
2. Selecciona el Tipo de contenido, el modelo de contenido que has creado, en el menú desplegable dentro de la barra de búsqueda. Luego, haga clic en el Añadir entrada Botón para agregar contenido.
3. A continuación, agregue el contenido al Editor de contenido. Para cada entrada, recuerda hacer clic Publicar para guardarlo en tu espacio.

Generar claves API

Finalmente, debe obtener sus claves API, que utilizará para realizar solicitudes para recuperar los datos del contenido de la aplicación React.

1. Haga clic en el Ajustes menú desplegable en la esquina superior derecha de la página del panel. Luego, seleccione el Claves API opción.
2. Haga clic en el Agregar clave API para abrir la página de configuración de claves API.
3. Contentful generará y completará automáticamente las claves API en la página de configuración de claves API. Solo necesita proporcionar un nombre para identificar de forma única el conjunto de claves.

Para utilizar API Contentful para recuperar datos, necesita la identificación del espacio y el token de acceso. Tenga en cuenta que existen dos tipos de tokens de acceso: Clave API de entrega de contenido y API de vista previa de contenido. En un entorno de producción, necesitará la clave API de entrega de contenido.

Pero, en desarrollo, sólo requieres el ID del espacio y el API de vista previa de contenido llave. Copie estas dos claves y profundicemos en el código.

Puedes encontrar el código de este proyecto en su GitHub repositorio.

Crear un proyecto de reacción

Para empezar, puedes estructurar una aplicación React usando create-react-app. Alternativamente, configurar un proyecto de React usando Vite. Después de crear su proyecto, continúe e instale este paquete.

npm install contentful

Ahora, crea un .env archivo en el directorio raíz de la carpeta de su proyecto y agregue las claves API de la siguiente manera:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Crear el gancho useContentful

En el src directorio, cree una nueva carpeta y asígnele un nombre manos. Dentro de esta carpeta, agregue un nuevo utilizarContentful.jsx archivo e incluya el siguiente código.

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

Este código de enlace personalizado recuperará los datos del espacio Contentful. Lo logra, primero, estableciendo una conexión a un espacio de contenido específico utilizando el token de acceso y la identificación del espacio proporcionados.

Luego, el gancho utiliza el Cliente contento dentro de obtener usuarios función para recuperar entradas de un tipo de contenido particular, en este caso, el código recupera las entradas del usuarios tipo de contenido, seleccionando específicamente solo sus campos. Luego, los datos obtenidos se desinfectan y se devuelven como una matriz de objetos de usuario.

Actualice el archivo App.jsx

Abre el aplicación.jsx archivo, elimine el código repetitivo de React y actualícelo con el siguiente código.

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

Con el utilizarContenido Hook, puede recuperar y mostrar los datos de contenido de Contentful CMS en el navegador. Finalmente, inicie el servidor de desarrollo para actualizar los cambios realizados en la aplicación.

npm run dev

¡Excelente! Deberías poder recuperar y renderizar los contenidos que agregaste en Contentful desde la aplicación React. Siga adelante y diseñar la aplicación React usando Tailwindpara darle un aspecto fantástico.

Gestión de contenidos simplificada

La incorporación de un CMS sin cabeza a su sistema puede agilizar significativamente el proceso de desarrollo, permitiéndole concentrarse en crear la lógica central de la aplicación; en lugar de dedicar una cantidad sustancial de tiempo a tareas de gestión de contenidos.