Como integrar o Contentful CMS com o React

Os sistemas de gestão de conteúdos (CMS) sem cabeça permitem-lhe dissociar as funções de gestão de conteúdos da lógica que trata da forma como os conteúdos são apresentados nas suas aplicações.

De facto, a incorporação de um sistema de gestão de conteúdos (CMS) numa aplicação permite uma gestão simplificada dos conteúdos através de uma plataforma unificada, ao mesmo tempo que facilita a disseminação sem esforço desses conteúdos em diversos meios front-end, abrangendo aplicações Web e móveis.

O que é um CMS sem cabeça?

Um sistema de gestão de conteúdos (CMS) sem cabeça oferece uma solução abrangente para criar e gerir conteúdos e activos digitais num ambiente unificado. Ao contrário dos sistemas CMS convencionais, este tipo de plataforma fornece conteúdos através de interfaces avançadas, como a API GraphQL, em vez de se basear nas tradicionais APIs RESTful. Como resultado, permite a partilha fácil de informações em várias aplicações Web e móveis.

Este método facilita a divisão de responsabilidades entre a gestão de conteúdos e a sua representação visual, assegurando que a formatação da informação pode ser personalizada para se adequar a vários programas e plataformas de clientes, mantendo a integridade do conteúdo e a sua organização.

Getting Started With Contentful CMS

Contentful é uma plataforma avançada de gestão de conteúdos que permite aos utilizadores gerar, controlar e disseminar os seus activos digitais e recursos multimédia através de várias aplicações, utilizando as suas interfaces de programação de aplicações (APIs).

Para iniciar a utilização do sistema de gestão de conteúdos (CMS) da Contentful, é necessário estabelecer um modelo de conteúdos como passo inicial.

Criar um modelo de conteúdo

Para estabelecer um modelo de conteúdo na Contentful, por favor siga as directrizes seguintes:

⭐ Visite o site da Contentful , crie uma conta e inicie sessão para aceder ao seu espaço. A Contentful organiza todo o conteúdo relacionado com o projeto e os activos associados nestes espaços.

⭐ No canto superior esquerdo do seu espaço, clique no separador Modelo de conteúdo para abrir a página de definições.

⭐ Clique no botão Adicionar tipo de conteúdo na página de configurações do modelo de conteúdo. Um tipo de conteúdo, neste caso, representa o modelo (estrutura) para os dados que irá adicionar ao Contentful.

⭐ Agora, insira um nome e uma descrição para o seu tipo de conteúdo no modal pop-up. O Contentful preencherá automaticamente o campo Api Identifier com base no nome que você fornecer.

⭐ De seguida, defina a própria estrutura de conteúdo. Clique no botão Adicionar campo 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 <number>
first_name = type <text (short)>
role = type <text (short)> 

⭐ Para adicionar campos, seleccione o tipo na janela pop-up de tipos.

⭐ Forneça um nome de campo e, em seguida, clique no botão Adicionar e configurar.

⭐ Por fim, verifique se as propriedades do campo estão como esperado na página de confirmação. Além disso, enquanto ainda estiver na página de confirmação, pode especificar propriedades adicionais para os campos, tais como quaisquer regras de validação.

Confirme a sua ação clicando no botão fornecido para prosseguir com a adição de um novo campo ao modelo especificado.

⭐ Depois de ter adicionado todos os campos necessários ao seu modelo, estes aparecerão num formato de lista, como mostrado abaixo. Para finalizar, clique no botão Salvar para aplicar as alterações ao modelo de conteúdo.

Adicionar o conteúdo

Incorpore o modelo de conteúdo fornecido para criar conteúdo da seguinte forma:

Visite o Painel de controlo do espaço acedendo ao menu “Espaço”, seleccionando a opção “Painel de controlo” e clicando no separador “Conteúdo”.

⭐ Seleccione o Tipo de conteúdo , o modelo de conteúdo que criou, no menu pendente da barra de pesquisa. Em seguida, clique no botão Adicionar entrada para adicionar conteúdo.

⭐ Em seguida, adicione o conteúdo ao editor de conteúdo. Para cada entrada, lembre-se de clicar em Publicar para a guardar no seu espaço.

Gerar chaves de API

Para recuperar dados de conteúdo do aplicativo React usando uma chave de API, é preciso primeiro obter essas chaves e utilizá-las para fazer requisições das informações desejadas.

⭐ Clique no menu suspenso Configurações no canto superior direito da página do painel. Em seguida, selecione a opção Chaves de API.

Clique no separador “Adicionar chave de API” para aceder à página de definições das suas chaves de API.

⭐ O Contentful irá gerar e preencher automaticamente as chaves da API na página de configurações das chaves da API. Você só precisa fornecer um nome para identificar exclusivamente o conjunto de chaves.

a chave da API de fornecimento de conteúdo e a API de visualização de conteúdo. Para operações num ambiente ativo, a primeira é normalmente necessária para aceder e manipular o conteúdo publicado.

Para desenvolver aplicações que utilizem a Space ID e a Content Preview API, não é necessário preocupar-se com qualquer informação adicional para além das referidas chaves.Estas podem ser facilmente copiadas e depois implementadas no código de programação relevante.

O código fonte deste projeto está disponível na plataforma GitHub, que serve de serviço de alojamento e sistema de controlo de versões para projectos de desenvolvimento de software.

Criar um projeto React

Para iniciar o processo, há duas opções disponíveis para criar um aplicativo React. Uma envolve a utilização do create-react-app, que é uma ferramenta predominante para configurar um aplicativo React. A outra alternativa implica a utilização do Vite, uma estrutura emergente que facilita o estabelecimento de um projeto React. Uma vez estabelecido o projeto, recomenda-se a introdução deste pacote específico no ambiente.

 npm install contentful 

A incorporação do trecho de código fornecido no diretório raiz da pasta do projeto é recomendada para estabelecer uma configuração de variável de ambiente conhecida como arquivo “.env”. Este ficheiro serve para armazenar informações sensíveis, tais como chaves de API, que podem ser facilmente acedidas pelas aplicações durante o tempo de execução sem as expor em texto simples. Para implementar este método, basta seguir as directrizes especificadas para gerar o resultado desejado.

 VITE_REACT_APP_CONTENTFUL_SPACE_ID="<space-id>"

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

Criar o gancho useContentful

No diretório de origem, crie uma nova pasta e denomine-a “hooks”. Dentro deste compartimento, incorpore um documento adicional intitulado “useContentful.jsx” e incorpore nele a seguinte disposição de símbolos e caracteres:

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

Esta implementação de hook à medida facilita a recuperação de informações de um espaço Contentful designado através do estabelecimento de uma ligação segura utilizando um token de acesso atribuído e identificando o identificador do espaço.

Utilizando o cliente Contentful integrado no gancho, a função getUsers recupera entradas de um tipo de conteúdo específico acedendo aos campos do tipo de conteúdo dos utilizadores. Esta informação é posteriormente limpa e entregue como um conjunto de objectos de utilizador para processamento posterior.

Atualizar o ficheiro App.jsx

Abra o ficheiro “App.jsx” localizado no diretório do seu projeto, remova qualquer código React pré-existente e substitua-o pelo código atualizado fornecido abaixo.

 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 

A utilização da integração do Contentful fornecida pelo gancho utilizado permite a recuperação e a renderização contínuas de informações armazenadas no Contentful’s Content Management System diretamente na sua aplicação baseada na Web. Consequentemente, é necessário iniciar o servidor de desenvolvimento para implementar eficazmente quaisquer modificações ou actualizações que tenham sido aplicadas ao software acima mencionado.

 npm run dev 

De facto, com a integração do Contentful, a sua aplicação React é agora capaz de recuperar e apresentar o conteúdo que foi adicionado ao Contentful. Sugiro que embeleze o aspeto da aplicação React utilizando Tailwind CSS para efeitos de estilo, resultando numa apresentação visual impressionante.

Gestão de conteúdos facilitada

A integração de um sistema de gestão de conteúdos (CMS) sem cabeça na sua infraestrutura tem o potencial de acelerar consideravelmente o processo de desenvolvimento, permitindo uma maior concentração na construção da lógica da aplicação principal, em vez de gastar muito tempo em tarefas de gestão de conteúdos.