Jak zintegrować Contentful CMS z Reactem?

Bezgłowe systemy zarządzania treścią (CMS) umożliwiają oddzielenie funkcji zarządzania treścią od logiki, która obsługuje sposób prezentacji treści w aplikacjach.

Rzeczywiście, włączenie systemu zarządzania treścią (CMS) do aplikacji zapewnia usprawnione zarządzanie treścią za pośrednictwem ujednoliconej platformy, jednocześnie ułatwiając łatwe rozpowszechnianie takich treści na różnych nośnikach front-end, obejmujących zarówno aplikacje internetowe, jak i mobilne.

Co to jest Headless CMS?

Bezgłowy system zarządzania treścią (CMS) oferuje kompleksowe rozwiązanie do tworzenia i zarządzania zarówno treścią, jak i zasobami cyfrowymi w ujednoliconym środowisku. W przeciwieństwie do konwencjonalnych systemów CMS, ten typ platformy dostarcza treści za pośrednictwem zaawansowanych interfejsów, takich jak GraphQL API, zamiast polegać na tradycyjnych interfejsach API RESTful. W rezultacie umożliwia łatwe udostępnianie informacji w wielu aplikacjach internetowych i mobilnych.

Metoda ta ułatwia podział obowiązków między zarządzaniem treścią a jej wizualną reprezentacją, zapewniając, że formatowanie informacji można dostosować do różnych programów klienckich i platform, przy jednoczesnym zachowaniu integralności treści i jej organizacji.

Getting Started With Contentful CMS

Contentful to zaawansowana platforma do zarządzania treścią, która umożliwia użytkownikom generowanie, kontrolowanie i rozpowszechnianie zasobów cyfrowych i multimedialnych w różnych aplikacjach za pomocą interfejsów programowania aplikacji (API).

Aby rozpocząć korzystanie z systemu zarządzania treścią (CMS) Contentful, konieczne jest ustanowienie modelu treści jako pierwszego kroku.

Tworzenie modelu treści

Aby utworzyć model treści w Contentful, należy postępować zgodnie z poniższymi wskazówkami:

⭐ Odwiedź witrynę Contentful , utwórz konto i zaloguj się, aby uzyskać dostęp do swojej przestrzeni. Contentful organizuje całą zawartość związaną z projektem i powiązane zasoby w tych przestrzeniach.

⭐ W lewym górnym rogu swojej przestrzeni kliknij kartę Model zawartości, aby otworzyć stronę ustawień.

⭐ Kliknij przycisk Dodaj typ zawartości na stronie ustawień modelu zawartości. Typ zawartości w tym przypadku reprezentuje model (strukturę) danych, które zostaną dodane do Contentful.

⭐ Teraz wprowadź nazwę i opis typu zawartości w wyskakującym oknie dialogowym. Contentful automatycznie wypełni pole Api Identifier na podstawie podanej nazwy.

⭐ Następnie zdefiniuj samą strukturę treści. Kliknij przycisk Dodaj pole, aby dodać kilka pól do modelu zawartości. Oto kilka pól, których można użyć w modelu:

 user_ID = type <number>
first_name = type <text (short)>
role = type <text (short)> 

⭐ Aby dodać pola, wybierz typ z wyskakującego okna typów.

⭐ Podaj nazwę pola, a następnie kliknij przycisk Dodaj i skonfiguruj.

⭐ Na koniec sprawdź, czy właściwości pola są zgodne z oczekiwaniami na stronie potwierdzenia. Ponadto na stronie potwierdzenia można określić dodatkowe właściwości pól, takie jak reguły walidacji.

Potwierdź swoje działanie, klikając podany przycisk, aby kontynuować dodawanie nowego pola do określonego modelu.

⭐ Po dodaniu wszystkich niezbędnych pól do modelu, pojawią się one w formacie listy, jak pokazano poniżej. Aby zakończyć, kliknij przycisk Zapisz, aby zastosować zmiany do modelu zawartości.

Dodaj zawartość

Włącz dostarczony model zawartości, aby utworzyć zawartość w następujący sposób:

Odwiedź panel Space Dashboard, przechodząc do menu “Space”, wybierając opcję “Dashboard” i klikając zakładkę “Content”.

⭐ Wybierz typ zawartości, utworzony model zawartości, z menu rozwijanego na pasku wyszukiwania. Następnie kliknij przycisk Dodaj wpis, aby dodać zawartość.

⭐ Następnie dodaj zawartość do edytora zawartości. Dla każdego wpisu pamiętaj, aby kliknąć Publikuj, aby zapisać go w swojej przestrzeni.

Generowanie kluczy API

Aby pobrać dane treści z aplikacji React za pomocą klucza API, należy najpierw uzyskać te klucze i wykorzystać je do składania wniosków o żądane informacje.

⭐ Kliknij menu rozwijane Ustawienia w prawym górnym rogu strony pulpitu nawigacyjnego. Następnie wybierz opcję Klucze API.

Kliknij zakładkę “Dodaj klucz API”, aby uzyskać dostęp do strony ustawień kluczy API.

⭐ Contentful automatycznie wygeneruje i wypełni klucze API na stronie ustawień kluczy API. Wystarczy podać nazwę, aby jednoznacznie zidentyfikować zestaw kluczy.

klucz Content Delivery API i Content Preview API. W przypadku operacji w środowisku na żywo ten pierwszy jest zwykle wymagany do uzyskiwania dostępu do opublikowanej zawartości i manipulowania nią.

Aby opracować aplikacje wykorzystujące Space ID i Content Preview API, nie trzeba przejmować się żadnymi dodatkowymi informacjami poza wspomnianymi kluczami.Można je łatwo skopiować, a następnie zaimplementować w odpowiednim kodzie programowania.

Kod źródłowy tego projektu jest dostępny na platformie GitHub, która służy jako usługa hostingowa i system kontroli wersji dla projektów rozwoju oprogramowania.

Tworzenie projektu React

Aby zainicjować ten proces, dostępne są dwie opcje tworzenia aplikacji React. Jedna z nich obejmuje wykorzystanie create-react-app, które jest powszechnym narzędziem do konfigurowania aplikacji React. Druga alternatywa obejmuje wykorzystanie Vite, powstającego frameworka, który ułatwia utworzenie projektu React. Po utworzeniu projektu zaleca się wprowadzenie tego konkretnego pakietu do środowiska.

 npm install contentful 

Włączenie dostarczonego fragmentu kodu do katalogu głównego folderu projektu jest zalecane w celu ustanowienia konfiguracji zmiennej środowiskowej znanej jako plik “.env”. Plik ten służy do przechowywania poufnych informacji, takich jak klucze API, które mogą być łatwo dostępne dla aplikacji podczas uruchamiania bez ujawniania ich w postaci zwykłego tekstu. Aby zaimplementować tę metodę, wystarczy postępować zgodnie z określonymi wytycznymi, aby wygenerować pożądany wynik.

 VITE_REACT_APP_CONTENTFUL_SPACE_ID="<space-id>"

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

Utwórz hak useContentful

W katalogu źródłowym utwórz nowy folder i nazwij go “hooks”. W tym przedziale umieść dodatkowy dokument zatytułowany “useContentful.jsx” i umieść w nim następujący układ symboli i znaków:

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

Ta dostosowana implementacja haka ułatwia pobieranie informacji z wyznaczonej przestrzeni Contentful poprzez ustanowienie bezpiecznego połączenia wykorzystującego przypisany token dostępu i identyfikator przestrzeni.

Wykorzystując klienta Contentful zintegrowanego z hakiem, funkcja getUsers pobiera wpisy określonego typu zawartości, uzyskując dostęp do pól typu zawartości użytkowników. Informacje te są następnie czyszczone i dostarczane jako tablica obiektów użytkowników do dalszego przetwarzania.

Aktualizacja pliku App.jsx

Otwórz plik “App.jsx” znajdujący się w katalogu projektu, usuń istniejący wcześniej kod React i zastąp go zaktualizowanym kodem podanym poniżej.

 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 

Wykorzystanie integracji Contentful zapewnianej przez wykorzystany hak pozwala na płynne pobieranie i renderowanie informacji przechowywanych w systemie zarządzania treścią Contentful bezpośrednio w aplikacji internetowej. W związku z tym zainicjowanie serwera deweloperskiego jest konieczne w celu skutecznego wdrożenia wszelkich modyfikacji lub aktualizacji, które zostały zastosowane w wyżej wymienionym oprogramowaniu.

 npm run dev 

Rzeczywiście, dzięki integracji Contentful aplikacja React jest teraz w stanie pobierać i wyświetlać treści dodane do Contentful. Sugeruję upiększenie wyglądu aplikacji React poprzez zastosowanie Tailwind CSS do celów stylizacji, co zaowocuje imponującą prezentacją wizualną.

Łatwe zarządzanie treścią

Integracja bezgłowego systemu zarządzania treścią (CMS) w ramach infrastruktury może znacznie przyspieszyć proces rozwoju, pozwalając na większe skupienie się na budowie podstawowej logiki aplikacji, zamiast poświęcania dużej ilości czasu na zadania związane z zarządzaniem treścią.