Os sistemas de gerenciamento de conteúdo (CMS) headless permitem dissociar as funções de gerenciamento de conteúdo da lógica que controla como o conteúdo é apresentado em seus aplicativos.

Essencialmente, ao integrar um CMS na sua aplicação, você pode gerenciar facilmente todo o conteúdo em um único plataforma e, em seguida, compartilhar perfeitamente o conteúdo em vários canais de front-end, incluindo web e dispositivos móveis formulários.

O que é um CMS sem cabeça?

Um sistema de gerenciamento de conteúdo headless facilita a criação e gerenciamento de conteúdo e ativos digitais, tudo em uma plataforma. Ao contrário do CMS tradicional, o conteúdo é entregue através de APIs como API GraphQL, uma alternativa às APIs RESTful. Isso torna possível compartilhar o conteúdo em vários aplicativos da web e móveis.

Essa abordagem permite a separação de preocupações entre o gerenciamento de conteúdo e sua apresentação, garantindo que você possa personalizar como o conteúdo é exibido para se adequar a diferentes aplicativos e dispositivos clientes sem afetar o conteúdo subjacente e seu estrutura.

Primeiros passos com CMS com conteúdo

Contentful é um sistema de gerenciamento de conteúdo headless que permite criar, gerenciar e compartilhar seu conteúdo digital e recursos de mídia em seus aplicativos usando suas APIs.

Para começar a usar o Contentful CMS, primeiro você precisa criar um modelo de conteúdo.

Crie um modelo de conteúdo

Siga estas etapas para criar um modelo de conteúdo no Contentful.

1. Visita Site da Contentful, crie uma conta e faça login para acessar seu espaço. Contentful organiza todo o conteúdo relacionado ao projeto e ativos associados dentro desses espaços.
2. No canto superior esquerdo do seu espaço, clique no botão Modelo de conteúdo guia para abrir a página de configurações.
3. Clique no Adicionar tipo de conteúdo botão no modelo de conteúdo configurações página. Um tipo de conteúdo, neste caso, representa o modelo (estrutura) dos dados que você adicionará ao Contentful.
4. Agora, insira um nome e descrição para o seu tipo de conteúdo no modal pop-up. Contentful preencherá automaticamente o Identificador de API campo com base no nome que você fornecer.
5. A seguir, defina a própria estrutura do conteúdo. Clique no Adicionar campo botão para adicionar alguns campos ao seu modelo de conteúdo. Aqui estão alguns campos que você pode usar para o modelo:

   user_ID = type 
   first_name = type 
   role = type 

6. Para adicionar campos, selecione o tipo na janela pop-up de tipos.
7. Providencie um nome do campoe, em seguida, clique no Adicionar e configurar botão.
8. Finalmente, verifique se as propriedades do campo estão conforme o esperado no confirmação página. Além disso, ainda na página de confirmação, você pode especificar propriedades adicionais para os campos, como quaisquer regras de validação.
9. Clique confirme para adicionar o novo campo ao modelo.
10. Depois de adicionar todos os campos necessários ao seu modelo, eles aparecerão em formato de lista, conforme mostrado abaixo. Para finalizar, clique no Salvar botão para aplicar as alterações ao modelo de conteúdo.

Adicione o conteúdo

Com o modelo de conteúdo implementado, vá em frente e adicione o conteúdo seguindo estas etapas:

1. Navegue até o seu painel de espaço página e clique no Contente aba.
2. Selecione os Tipo de conteúdo, o modelo de conteúdo que você criou, no menu suspenso da barra de pesquisa. Em seguida, clique no Adicionar entrada botão para adicionar conteúdo.
3. Em seguida, adicione o conteúdo ao editor de conteúdo. Para cada entrada, lembre-se de clicar Publicar para salvá-lo em seu espaço.

Gerar chaves de API

Finalmente, você precisa pegar suas chaves de API, que usará para fazer solicitações para buscar os dados de conteúdo do aplicativo React.

1. Clique no Configurações menu suspenso no canto superior direito da página do painel. Em seguida, selecione o Chaves de API opção.
2. Clique no Adicionar chave de API botão para abrir a página de configurações de chaves de API.
3. Contentful irá gerar e preencher automaticamente as chaves de API na página de configurações de chaves de API. Você só precisa fornecer um nome para identificar exclusivamente o conjunto de chaves.

Para utilizar APIs Contentful para buscar dados, você precisa do ID do espaço e a token de acesso. Observe que existem dois tipos de tokens de acesso: Chave da API de entrega de conteúdo e API de visualização de conteúdo. Em um ambiente de produção, você precisará da chave da API Content Delivery.

Mas, no desenvolvimento, você só precisa do ID do espaço e do API de visualização de conteúdo chave. Copie essas duas chaves e vamos mergulhar no código.

Você pode encontrar o código deste projeto em seu GitHub repositório.

Crie um projeto React

Para começar, você pode estruturar um aplicativo React usando create-react-app. Alternativamente, configurar um projeto React usando Vite. Depois de criar seu projeto, vá em frente e instale este pacote.

npm install contentful

Agora, crie um .env arquivo no diretório raiz da pasta do seu projeto e adicione as chaves de API da seguinte maneira:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Crie o gancho useContentful

No fonte diretório, crie uma nova pasta e nomeie-a ganchos. Dentro desta pasta, adicione um novo useContentful.jsx arquivo e inclua o seguinte 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 gancho personalizado irá buscar os dados do espaço Contentful. Ele consegue isso, primeiro, estabelecendo uma conexão com um espaço Contentful específico usando o token de acesso e o ID do espaço fornecidos.

Então, o gancho usa o Cliente contente dentro do getUsers função para recuperar entradas de um determinado tipo de conteúdo, neste caso, o código busca as entradas do Usuários tipo de conteúdo, selecionando especificamente apenas seus campos. Os dados buscados são então limpos e retornados como uma matriz de objetos de usuário.

Atualize o arquivo App.jsx

Abra o Aplicativo.jsx arquivo, exclua o código React padrão e atualize-o com o código a seguir.

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

Com o useContentful hook, você pode buscar e exibir os dados de conteúdo do Contentful CMS no navegador. Por fim, inicie o servidor de desenvolvimento para atualizar as alterações feitas no aplicativo.

npm run dev

Ótimo! Você deve ser capaz de buscar e renderizar o conteúdo adicionado ao Contentful no aplicativo React. Vá em frente e estilizar o aplicativo React usando Tailwindpara dar uma aparência fantástica.

Gerenciamento de conteúdo facilitado

Incorporar um CMS headless em seu sistema pode agilizar significativamente o processo de desenvolvimento, permitindo que você se concentre na construção da lógica principal do aplicativo; em vez de gastar uma quantidade substancial de tempo em tarefas de gerenciamento de conteúdo.