با نحوه اتصال CMS محتوا به برنامه های React خود برای مدیریت محتوا کارآمد و ساخت وب سایت پویا آشنا شوید.
سیستم های مدیریت محتوای بدون سر (CMS) شما را قادر می سازد تا عملکردهای مدیریت محتوا را از منطقی که نحوه ارائه محتوا در برنامه های شما را مدیریت می کند جدا کنید.
اساساً، با ادغام یک CMS در برنامه خود، می‌توانید به راحتی محتوا را در یک پلتفرم واحد مدیریت کنید، و سپس، محتوا را به طور یکپارچه در کانال‌های مختلف ظاهری، از جمله برنامه‌های وب و موبایل به اشتراک بگذارید.
CMS هدلس چیست؟
یک سیستم مدیریت محتوای بدون سر، ایجاد و مدیریت محتوا و دارایی های دیجیتال را در یک پلتفرم تسهیل می کند. برخلاف CMS سنتی، محتوا از طریق API هایی مانند GraphQL API، جایگزینی برای API های RESTful ارائه می شود. این امکان اشتراک گذاری محتوا را در بین برنامه های مختلف وب و تلفن همراه فراهم می کند.
این رویکرد امکان تفکیک نگرانی‌ها را بین مدیریت محتوا و ارائه آن فراهم می‌کند – تضمین می‌کند که می‌توانید نحوه نمایش محتوا را متناسب با برنامه‌ها و دستگاه‌های مختلف مشتری بدون تأثیر بر محتوای اساسی و ساختار آن تنظیم کنید.
شروع به کار با CMS محتوا
Contentful یک سیستم مدیریت محتوای بدون هد است که به شما امکان می دهد محتوای دیجیتال و منابع رسانه ای خود را با استفاده از API های خود ایجاد، مدیریت و به اشتراک بگذارید.
برای شروع استفاده از CMS محتوا، ابتدا باید یک مدل محتوا ایجاد کنید.
یک مدل محتوا ایجاد کنید
برای ایجاد یک مدل محتوا در Contentful این مراحل را دنبال کنید.
- از وب سایت Contentful دیدن کنید، یک حساب کاربری ایجاد کنید و برای دسترسی به فضای خود وارد شوید. Contentful تمام محتوای مرتبط با پروژه و دارایی های مرتبط را در این فضاها سازماندهی می کند.
- در گوشه سمت چپ بالای فضای خود، روی تب Content model کلیک کنید تا صفحه تنظیمات باز شود.
- روی دکمه افزودن نوع محتوا در صفحه تنظیمات مدل محتوا کلیک کنید. یک نوع محتوا، در این مورد، مدل (ساختار) داده‌هایی را که به Contentful اضافه می‌کنید، نشان می‌دهد.
- اکنون، نام و توضیحاتی را برای نوع محتوای خود در قسمت پاپ آپ وارد کنید. Contentful به طور خودکار فیلد Api Identifier را بر اساس نامی که ارائه می کنید پر می کند.
- بعد، خود ساختار محتوا را تعریف کنید. برای افزودن چند فیلد به مدل محتوای خود، روی دکمه افزودن فیلد کلیک کنید. در اینجا چند فیلد وجود دارد که می توانید برای مدل استفاده کنید: user_ID = نوع
first_name = نوع role = type - برای افزودن فیلدها، نوع را از پنجره بازشو انواع انتخاب کنید.
- یک نام فیلد وارد کنید و سپس روی دکمه Add and configure کلیک کنید.
- در نهایت، بررسی کنید که ویژگی‌های فیلد مطابق انتظار در صفحه تأیید باشد. علاوه بر این، در حالی که هنوز در صفحه تأیید هستید، می توانید ویژگی های اضافی را برای فیلدها مانند قوانین اعتبارسنجی مشخص کنید.
- برای افزودن فیلد جدید به مدل روی Confirm کلیک کنید.
- هنگامی که تمام فیلدهای لازم را به مدل خود اضافه کردید، مانند شکل زیر در قالب لیست ظاهر می شوند. برای نهایی کردن، روی دکمه ذخیره کلیک کنید تا تغییرات در مدل محتوا اعمال شود.
user_ID = type <number>
first_name = type <text (short)>
role = type <text (short)>
محتوا را اضافه کنید
با وجود مدل محتوا، ادامه دهید و محتوا را با دنبال کردن این مراحل اضافه کنید:
- به صفحه داشبورد فضای خود بروید و روی تب Content کلیک کنید.
- نوع محتوا، مدل محتوایی که ایجاد کرده‌اید را از منوی کشویی در نوار جستجو انتخاب کنید. سپس روی دکمه افزودن ورودی کلیک کنید تا محتوا اضافه شود.
- بعد، محتوا را به ویرایشگر محتوا اضافه کنید. برای هر ورودی، به یاد داشته باشید که روی انتشار کلیک کنید تا آن را در فضای خود ذخیره کنید.
کلیدهای API را ایجاد کنید
در نهایت، باید کلیدهای API خود را بگیرید، که از آنها برای درخواست واکشی داده های محتوا از برنامه React استفاده می کنید.
- روی منوی کشویی تنظیمات در گوشه سمت راست بالای صفحه داشبورد کلیک کنید. سپس گزینه API keys را انتخاب کنید.
- روی دکمه افزودن کلید API کلیک کنید تا صفحه تنظیمات کلیدهای API باز شود.
- Contentful به طور خودکار کلیدهای API را در صفحه تنظیمات کلیدهای API ایجاد و پر می کند. برای شناسایی منحصر به فرد مجموعه کلیدها فقط باید یک نام ارائه کنید.
برای استفاده از Contentful API برای واکشی داده ها، به شناسه فضا و نشانه دسترسی نیاز دارید. توجه داشته باشید که دو نوع نشانه دسترسی وجود دارد: کلید API تحویل محتوا و API پیش‌نمایش محتوا. در محیط تولید، به کلید Content Delivery API نیاز دارید.
اما، در توسعه، فقط به شناسه فضا و کلید API پیش نمایش محتوا نیاز دارید. این دو کلید را کپی کنید و بیایید وارد کد شویم.
می توانید کد این پروژه را در مخزن GitHub آن پیدا کنید.
یک پروژه React ایجاد کنید
برای شروع، می‌توانید با استفاده از create-react-app، یک برنامه React را داربست کنید. از طرف دیگر، یک پروژه React را با استفاده از Vite راه اندازی کنید. پس از ایجاد پروژه خود، ادامه دهید و این بسته را نصب کنید.
npm install contentful
اکنون یک فایل .env در پوشه اصلی پروژه خود ایجاد کنید و کلیدهای API را به صورت زیر اضافه کنید:
VITE_REACT_APP_CONTENTFUL_SPACE_ID="<space-id>"
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN="<content-preview-API-access-token>"
قلاب useContentful را ایجاد کنید
در پوشه src، یک پوشه جدید ایجاد کنید و نام آن را hook بگذارید. در داخل این پوشه، یک فایل useContentful.jsx جدید اضافه کنید و کد زیر را وارد کنید.
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 };
};
این کد قلاب سفارشی داده ها را از فضای محتوایی دریافت می کند. ابتدا با ایجاد ارتباط با یک فضای محتوایی خاص با استفاده از نشانه دسترسی ارائه شده و شناسه فضایی به این مهم دست می یابد.
سپس، قلاب از کلاینت Contentful در تابع getUsers برای بازیابی ورودی‌های یک نوع محتوای خاص استفاده می‌کند، در این مورد، کد ورودی‌های نوع محتوای کاربران را واکشی می‌کند، به‌طور خاص فقط فیلدهای آنها را انتخاب می‌کند. سپس داده های واکشی شده پاکسازی شده و به عنوان آرایه ای از اشیاء کاربر برگردانده می شوند.
فایل App.jsx را به روز کنید
فایل App.jsx را باز کنید، کد React را حذف کنید و با کد زیر آن را به روز کنید.
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
با استفاده از قلاب useContentful، می توانید داده های محتوا را از CMS محتوا در مرورگر واکشی و نمایش دهید. در نهایت، سرور توسعه را برای به روز رسانی تغییرات ایجاد شده در برنامه راه اندازی کنید.
npm run dev
عالی! باید بتوانید محتوایی را که در Contentful اضافه کرده اید از برنامه React واکشی و رندر کنید. به برنامه React با استفاده از Tailwind سبک دهید تا ظاهری فوق العاده به آن ببخشید.
مدیریت محتوا آسان شد
گنجاندن یک CMS بدون هد در سیستم شما می تواند فرآیند توسعه را به طور قابل توجهی ساده کند و شما را قادر می سازد تا روی ایجاد منطق برنامه اصلی تمرکز کنید. به جای صرف زمان قابل توجهی برای وظایف مدیریت محتوا.