Başsız içerik yönetimi sistemleri (CMS), içerik yönetimi işlevlerini, içeriğin uygulamalarınızda nasıl sunulduğunu yöneten mantıktan ayırmanıza olanak tanır.

Temel olarak uygulamanıza bir CMS entegre ederek içeriği tek bir yerden kolayca yönetebilirsiniz. ve ardından içeriği web ve mobil dahil olmak üzere çeşitli ön uç kanallarda sorunsuz bir şekilde paylaşın uygulamalar.

Başsız CMS Nedir?

Başsız bir içerik yönetim sistemi, içeriğin ve dijital varlıkların tek bir platformda oluşturulmasını ve yönetilmesini kolaylaştırır. Geleneksel CMS'den farklı olarak içerik, aşağıdaki gibi API'ler aracılığıyla sunulur: GraphQL API, RESTful API'lerine alternatif. Bu, içeriğin çeşitli web ve mobil uygulamalarda paylaşılmasını mümkün kılar.

Bu yaklaşım, içerik yönetimi ile sunumu arasındaki endişelerin ayrılmasına olanak tanıyarak nasıl istediğinizi özelleştirebilmenizi sağlar. içerik, temel içeriği ve içeriğini etkilemeden farklı istemci uygulamalarına ve cihazlara uyacak şekilde görüntülenir. yapı.

İçerikli CMS'ye Başlarken

Contentful, API'lerini kullanarak dijital içeriğinizi ve medya kaynaklarınızı uygulamalarınız arasında oluşturmanıza, yönetmenize ve paylaşmanıza olanak tanıyan, başsız bir içerik yönetim sistemidir.

Contentful CMS'yi kullanmaya başlamak için öncelikle bir içerik modeli oluşturmanız gerekir.

İçerik Modeli Oluşturun

Contentful'da içerik modeli oluşturmak için bu adımları izleyin.

1. Ziyaret etmek Contentful'un web sitesi, bir hesap oluşturun ve hesabınıza erişmek için giriş yapın. uzay. Contentful, projeyle ilgili tüm içeriği ve ilgili varlıkları bu alanlarda düzenler.
2. Alanınızın sol üst köşesindeki İçerik modeli Ayarlar sayfasını açmak için sekmeyi tıklayın.
3. Tıkla İçerik türü ekle içerik modeli üzerindeki düğme ayarlar sayfa. Bu durumda içerik türü, Contentful'a ekleyeceğiniz verilerin modelini (yapısını) temsil eder.
4. Şimdi bir girin isim Ve Tanım açılır penceredeki içerik türünüz için. İçerikli otomatik olarak dolduracaktır API Tanımlayıcı sağladığınız ada göre alan.
5. Daha sonra içerik yapısının kendisini tanımlayın. Tıkla Alan ekle İçerik modelinize birkaç alan eklemek için düğmesini tıklayın. Model için kullanabileceğiniz birkaç alan şunlardır:

   user_ID = type 
   first_name = type 
   role = type 

6. Alan eklemek için tip Türler açılır penceresinden.
7. Bir sağlayın alan adıve ardından Ekle ve yapılandır düğme.
8. Son olarak, alan özelliklerinin beklendiği gibi olduğunu doğrulayın. Onayla sayfa. Ayrıca hâlâ onay sayfasındayken alanlar için doğrulama kuralları gibi ek özellikler belirleyebilirsiniz.
9. Tıklamak Onaylamak Yeni alanı modele eklemek için.
10. Gerekli tüm alanları modelinize ekledikten sonra bunlar aşağıda gösterildiği gibi liste formatında görünecektir. Sonlandırmak için Kaydetmek Değişiklikleri içerik modeline uygulamak için düğmeyi tıklayın.

İçeriği Ekle

İçerik modeli yerindeyken devam edin ve aşağıdaki adımları izleyerek içeriği ekleyin:

1. Şuraya gidin: alan kontrol paneli sayfasına tıklayın ve İçerik sekmesi.
2. Şunu seçin: İçerik türüarama çubuğundaki açılır menüden, oluşturduğunuz içerik modelini seçin. Ardından, Giriş ekle İçerik eklemek için düğmeyi tıklayın.
3. Daha sonra içeriği şuraya ekleyin: içerik editörü. Her giriş için tıklamayı unutmayın Yayınla alanınıza kaydetmek için.

API Anahtarları Oluşturun

Son olarak, React uygulamasından içerik verilerini almak için istekte bulunmak için kullanacağınız API anahtarlarınızı almanız gerekir.

1. Tıkla Ayarlar Kontrol paneli sayfasının sağ üst köşesindeki açılır menü. Ardından, API anahtarları seçenek.
2. Tıkla API anahtarı ekle API anahtarları ayarları sayfasını açmak için düğmesine basın.
3. Contentful, API anahtarlarını API anahtarları ayarları sayfasında otomatik olarak oluşturacak ve dolduracaktır. Anahtar kümesini benzersiz şekilde tanımlamak için yalnızca bir ad girmeniz gerekir.

Veri almak amacıyla Contentful API'leri kullanmak için aşağıdakilere ihtiyacınız vardır: alan kimliği ve erişim belirteci. İki tür erişim belirteci olduğuna dikkat edin: İçerik Yayınlama API anahtarı Ve İçerik Önizleme API'si. Üretim ortamında Content Delivery API anahtarına ihtiyacınız olacaktır.

Ancak geliştirme aşamasında yalnızca alan kimliğine ve İçerik Önizleme API'si anahtar. Bu iki anahtarı kopyalayın ve koda dalalım.

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub depo.

React Projesi Oluşturun

Başlamak için şunları yapabilirsiniz: create-react-app kullanarak bir React uygulamasını iskele haline getirin. Alternatif olarak, Vite kullanarak bir React projesi kurmak. Projenizi oluşturduktan sonra devam edin ve bu paketi yükleyin.

npm install contentful

Şimdi bir tane oluşturun .env proje klasörünüzün kök dizinine dosya ekleyin ve API anahtarlarını aşağıdaki gibi ekleyin:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

UseContentful Hook'u oluşturun

İçinde kaynak dizini açın, yeni bir klasör oluşturun ve adlandırın kancalar. Bu klasörün içine yeni bir tane ekleyin useContentful.jsx dosyanızı oluşturun ve aşağıdaki kodu ekleyin.

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

Bu özel kanca kodu, verileri İçerikli alandan getirecektir. Bunu, öncelikle sağlanan erişim belirtecini ve alan kimliğini kullanarak belirli bir Contentful alanına bağlantı kurarak gerçekleştirir.

Daha sonra kanca şunu kullanır: İçerikli müşteri içinde Kullanıcıları al geri alma işlevi girdileri belirli bir içerik türüne aitse, bu durumda kod, içeriğin girişlerini getirir. kullanıcılar içerik türü, özellikle yalnızca alanlarını seçerek. Getirilen veriler daha sonra sterilize edilir ve bir dizi kullanıcı nesnesi olarak döndürülür.

App.jsx Dosyasını Güncelleyin

Aç Uygulama.jsx dosyasını açın, standart React kodunu silin ve aşağıdaki kodla güncelleyin.

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

İle kullanımİçerikli hook'u kullanarak Contentful CMS'den içerik verilerini tarayıcıda alıp görüntüleyebilirsiniz. Son olarak uygulamada yapılan değişiklikleri güncellemek için geliştirme sunucusunu başlatın.

npm run dev

Harika! Contentful'a eklediğiniz içerikleri React uygulamasından getirebilmeniz ve oluşturabilmeniz gerekir. Devam et ve Tailwind'i kullanarak React uygulamasını stillendirinona harika bir görünüm kazandırmak için.

İçerik Yönetimi Artık Kolaylaştı

Sisteminize başsız bir CMS eklemek, geliştirme sürecini önemli ölçüde kolaylaştırabilir ve temel uygulama mantığını oluşturmaya konsantre olmanızı sağlar; içerik yönetimi görevlerine önemli miktarda zaman harcamak yerine.