تمكنك أنظمة إدارة المحتوى بدون رأس (CMS) من فصل وظائف إدارة المحتوى عن المنطق الذي يتعامل مع كيفية تقديم المحتوى في تطبيقاتك.

بشكل أساسي، من خلال دمج نظام إدارة المحتوى (CMS) في تطبيقك، يمكنك بسهولة إدارة المحتوى كله ضمن تطبيق واحد النظام الأساسي، ثم مشاركة المحتوى بسلاسة عبر قنوات الواجهة المختلفة، بما في ذلك الويب والهاتف المحمول التطبيقات.

ما هو نظام إدارة المحتوى بدون رأس؟

يسهل نظام إدارة المحتوى بدون رأس إنشاء وإدارة المحتوى والأصول الرقمية، كل ذلك ضمن منصة واحدة. على عكس نظام إدارة المحتوى التقليدي، يتم تسليم المحتوى من خلال واجهات برمجة التطبيقات مثل GraphQL API، بديل لواجهات برمجة تطبيقات RESTful. وهذا يجعل من الممكن مشاركة المحتوى عبر تطبيقات الويب والجوال المختلفة.

يسمح هذا الأسلوب بفصل الاهتمامات بين إدارة المحتوى وعرضه، مما يضمن إمكانية تخصيص الطريقة يتم عرض المحتوى ليناسب تطبيقات وأجهزة العميل المختلفة دون التأثير على المحتوى الأساسي وملحقاته بناء.

البدء باستخدام نظام إدارة المحتوى (CMS) المحتوى

Contentful هو نظام إدارة محتوى بدون رأس يسمح لك بإنشاء وإدارة ومشاركة المحتوى الرقمي وموارد الوسائط عبر تطبيقاتك باستخدام واجهات برمجة التطبيقات الخاصة به.

للبدء في استخدام Contentful CMS، تحتاج أولاً إلى إنشاء نموذج محتوى.

إنشاء نموذج محتوى

اتبع هذه الخطوات لإنشاء نموذج محتوى على Contentful.

1. يزور موقع Contentful، قم بإنشاء حساب، وقم بتسجيل الدخول للوصول إلى حسابك فضاء. يقوم Contentful بتنظيم جميع المحتويات المتعلقة بالمشروع والأصول المرتبطة به ضمن هذه المساحات.
2. في الزاوية العلوية اليسرى من المساحة الخاصة بك، انقر فوق نموذج المحتوى علامة التبويب لفتح صفحة الإعدادات.
3. انقر على إضافة نوع المحتوى زر على نموذج المحتوى إعدادات صفحة. يمثل نوع المحتوى، في هذه الحالة، النموذج (البنية) للبيانات التي ستضيفها إلى Contentful.
4. الآن أدخل أ اسم و وصف لنوع المحتوى الخاص بك داخل النافذة المنبثقة. سيتم ملء المحتوى تلقائيًا معرف واجهة برمجة التطبيقات الحقل بناءً على الاسم الذي تقدمه.
5. بعد ذلك، حدد بنية المحتوى نفسها. انقر على إضافة حقل زر لإضافة حقلين إلى نموذج المحتوى الخاص بك. فيما يلي بعض الحقول التي يمكنك استخدامها للنموذج:

   user_ID = type 
   first_name = type 
   role = type 

6. لإضافة حقول، حدد يكتب من نافذة الأنواع المنبثقة.
7. توفير اسم الحقل، ثم انقر فوق إضافة وتكوين زر.
8. وأخيراً، تحقق من أن خصائص الحقل كما هو متوقع على تأكيد صفحة. بالإضافة إلى ذلك، أثناء وجودك في صفحة التأكيد، يمكنك تحديد خصائص إضافية للحقول مثل أي قواعد للتحقق من الصحة.
9. انقر يتأكد لإضافة الحقل الجديد إلى النموذج.
10. بمجرد إضافة كافة الحقول الضرورية إلى النموذج الخاص بك، فإنها ستظهر بتنسيق قائمة، كما هو موضح أدناه. لوضع اللمسات النهائية، انقر فوق يحفظ زر لتطبيق التغييرات على نموذج المحتوى.

أضف المحتوى

مع وجود نموذج المحتوى في مكانه الصحيح، تابع وأضف المحتوى باتباع الخطوات التالية:

1. انتقل إلى الخاص بك لوحة القيادة الفضائية الصفحة ثم انقر فوق محتوى فاتورة غير مدفوعة.
2. حدد نوع المحتوى، نموذج المحتوى الذي قمت بإنشائه، من القائمة المنسدلة داخل شريط البحث. ثم انقر فوق إضافة إدخال زر لإضافة محتوى.
3. بعد ذلك، قم بإضافة المحتوى إلى محرر المحتوى. لكل إدخال، تذكر أن تنقر ينشر لحفظه في المساحة الخاصة بك.

إنشاء مفاتيح API

أخيرًا، تحتاج إلى الحصول على مفاتيح API الخاصة بك، والتي ستستخدمها لتقديم طلبات لجلب بيانات المحتوى من تطبيق React.

1. انقر على إعدادات القائمة المنسدلة في الزاوية العلوية اليمنى من صفحة لوحة التحكم. ثم حدد مفاتيح واجهة برمجة التطبيقات خيار.
2. انقر على أضف مفتاح API زر لفتح صفحة إعدادات مفاتيح API.
3. سيقوم Contentful تلقائيًا بإنشاء مفاتيح API ونشرها في صفحة إعدادات مفاتيح API. ما عليك سوى تقديم اسم لتعريف مجموعة المفاتيح بشكل فريد.

من أجل الاستفادة من Contentful APIs لجلب البيانات، فإنك تحتاج إلى معرف المساحة و ال رمز وصول. لاحظ أن هناك نوعين من رموز الوصول: مفتاح واجهة برمجة تطبيقات تسليم المحتوى و واجهة برمجة تطبيقات معاينة المحتوى. في بيئة الإنتاج، ستحتاج إلى مفتاح Content Delivery API.

ولكن، في التطوير، لا تحتاج سوى معرف المساحة و واجهة برمجة تطبيقات معاينة المحتوى مفتاح. انسخ هذين المفتاحين ودعنا نتعمق في الكود.

يمكنك العثور على رمز هذا المشروع في ملف جيثب مخزن.

إنشاء مشروع رد فعل

للبدء، يمكنك قم ببناء تطبيق React باستخدام تطبيق create-react-app. بدلاً عن ذلك، قم بإعداد مشروع React باستخدام Vite. بعد إنشاء مشروعك، قم بالمضي قدمًا وتثبيت هذه الحزمة.

npm install contentful

الآن، قم بإنشاء .env الملف في الدليل الجذر لمجلد المشروع الخاص بك، وأضف مفاتيح API كما يلي:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

قم بإنشاء خطاف useContentful

في ال src الدليل، قم بإنشاء مجلد جديد وقم بتسميته خطافات. داخل هذا المجلد، أضف ملفًا جديدًا useContentful.jsx الملف، وتضمين التعليمات البرمجية التالية.

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

سيقوم رمز الربط المخصص هذا بجلب البيانات من مساحة المحتوى. ويحقق ذلك عن طريق، أولاً، إنشاء اتصال بمساحة محتوى معينة باستخدام رمز الوصول ومعرف المساحة المقدمين.

ثم يستخدم الخطاف عميل قانع في حدود 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 (
 <>

Contentful CMS With React Tutorial</h1>
 {users.map((user, index) => (


 {user.userId} </p> 

 {user.firstName} </p>

 {user.role} </p>

 </div> 
 ))} 
 </>
 );
};
exportdefault App

مع ال useContentful ربط، يمكنك جلب وعرض بيانات المحتوى من Contentful CMS على المتصفح. أخيرًا، قم بتشغيل خادم التطوير لتحديث التغييرات التي تم إجراؤها على التطبيق.

npm run dev

عظيم! يجب أن تكون قادرًا على جلب وعرض المحتويات التي أضفتها على Contentful من تطبيق React. المضي قدما و قم بتصميم تطبيق React باستخدام Tailwindلإعطائها مظهراً رائعاً.

أصبحت إدارة المحتوى سهلة

يمكن أن يؤدي دمج نظام إدارة المحتوى بدون رأس في نظامك إلى تبسيط عملية التطوير بشكل كبير، مما يتيح لك التركيز على بناء منطق التطبيق الأساسي؛ بدلاً من قضاء قدر كبير من الوقت في مهام إدارة المحتوى.