हेडलेस कंटेंट मैनेजमेंट सिस्टम (सीएमएस) आपको कंटेंट प्रबंधन कार्यों को उस तर्क से अलग करने में सक्षम बनाता है जो यह संभालता है कि सामग्री आपके अनुप्रयोगों में कैसे प्रस्तुत की जाती है।

अनिवार्य रूप से, अपने एप्लिकेशन में एक सीएमएस को एकीकृत करके, आप आसानी से एक ही सामग्री को प्रबंधित कर सकते हैं प्लेटफ़ॉर्म, और फिर, वेब और मोबाइल सहित विभिन्न फ्रंटएंड चैनलों पर सामग्री को निर्बाध रूप से साझा करें अनुप्रयोग।

हेडलेस सीएमएस क्या है?

एक नेतृत्वहीन सामग्री प्रबंधन प्रणाली एक ही मंच के भीतर सामग्री और डिजिटल संपत्तियों के निर्माण और प्रबंधन की सुविधा प्रदान करती है। पारंपरिक सीएमएस के विपरीत, सामग्री एपीआई जैसे के माध्यम से वितरित की जाती है ग्राफक्यूएल एपीआई, रेस्टफुल एपीआई का एक विकल्प. इससे सामग्री को विभिन्न वेब और मोबाइल ऐप्स पर साझा करना संभव हो जाता है।

यह दृष्टिकोण सामग्री प्रबंधन और इसकी प्रस्तुति के बीच चिंताओं को अलग करने की अनुमति देता है - यह सुनिश्चित करते हुए कि आप इसे कैसे अनुकूलित कर सकते हैं सामग्री को अंतर्निहित सामग्री और उसके प्रभावित किए बिना विभिन्न क्लाइंट अनुप्रयोगों और उपकरणों के अनुरूप प्रदर्शित किया जाता है संरचना।

कंटेंटफुल सीएमएस के साथ शुरुआत करना

कंटेंटफुल एक नेतृत्वहीन सामग्री प्रबंधन प्रणाली है जो आपको अपने एपीआई का उपयोग करके अपने अनुप्रयोगों में अपनी डिजिटल सामग्री और मीडिया संसाधनों को बनाने, प्रबंधित करने और साझा करने की अनुमति देती है।

कंटेंटफुल सीएमएस का उपयोग शुरू करने के लिए, आपको सबसे पहले एक कंटेंट मॉडल बनाना होगा।

एक सामग्री मॉडल बनाएं

कंटेंटफुल पर एक कंटेंट मॉडल बनाने के लिए इन चरणों का पालन करें।

1. मिलने जाना कंटेंटफुल की वेबसाइट, एक खाता बनाएं, और अपने तक पहुंचने के लिए लॉग इन करें अंतरिक्ष। कंटेंटफुल इन स्थानों के भीतर सभी परियोजना-संबंधित सामग्री और संबंधित संपत्तियों को व्यवस्थित करता है।
2. अपने स्थान के ऊपरी-बाएँ कोने में, पर क्लिक करें सामग्री मॉडल सेटिंग पृष्ठ खोलने के लिए टैब।
3. क्लिक करें सामग्री प्रकार जोड़ें सामग्री मॉडल पर बटन समायोजन पृष्ठ। इस मामले में, एक सामग्री प्रकार, उस डेटा के लिए मॉडल (संरचना) का प्रतिनिधित्व करता है जिसे आप कंटेंटफुल में जोड़ रहे होंगे।
4. अब, a दर्ज करें नाम और विवरण पॉप-अप मोडल के अंतर्गत आपकी सामग्री प्रकार के लिए। कंटेंटफुल स्वचालित रूप से पॉप्युलेट हो जाएगा एपीआई पहचानकर्ता आपके द्वारा प्रदान किए गए नाम के आधार पर फ़ील्ड।
5. इसके बाद, सामग्री संरचना को ही परिभाषित करें। क्लिक करें क्षेत्र जोड़ें अपने सामग्री मॉडल में कुछ फ़ील्ड जोड़ने के लिए बटन। यहां कुछ फ़ील्ड हैं जिनका उपयोग आप मॉडल के लिए कर सकते हैं:

   user_ID = type 
   first_name = type 
   role = type 

6. फ़ील्ड जोड़ने के लिए, का चयन करें प्रकार प्रकार पॉप-अप विंडो से।
7. प्रदान करें एक कार्यक्षेत्र नाम, और फिर, क्लिक करें जोड़ें और कॉन्फ़िगर करें बटन।
8. अंत में, सत्यापित करें कि फ़ील्ड गुण अपेक्षा के अनुरूप हैं इसकी सूचना देने वाला पृष्ठ। इसके अतिरिक्त, पुष्टिकरण पृष्ठ पर रहते हुए भी, आप किसी भी सत्यापन नियम जैसे फ़ील्ड के लिए अतिरिक्त गुण निर्दिष्ट कर सकते हैं।
9. क्लिक पुष्टि करना मॉडल में नया फ़ील्ड जोड़ने के लिए.
10. एक बार जब आप अपने मॉडल में सभी आवश्यक फ़ील्ड जोड़ लेंगे, तो वे एक सूची प्रारूप में दिखाई देंगे, जैसा कि नीचे दिखाया गया है। अंतिम रूप देने के लिए, क्लिक करें बचाना सामग्री मॉडल में परिवर्तन लागू करने के लिए बटन।

सामग्री जोड़ें

सामग्री मॉडल के साथ, आगे बढ़ें, और इन चरणों का पालन करके सामग्री जोड़ें:

1. अपने पास नेविगेट करें अंतरिक्ष डैशबोर्ड पेज और क्लिक करें सामग्री टैब.
2. का चयन करें सामग्री प्रकार, आपके द्वारा बनाया गया सामग्री मॉडल, खोज बार के भीतर ड्रॉप-डाउन मेनू से। फिर, क्लिक करें प्रविष्टि जोड़ें सामग्री जोड़ने के लिए बटन.
3. इसके बाद, सामग्री को इसमें जोड़ें कंटेंट एडिटर. प्रत्येक प्रविष्टि के लिए, क्लिक करना याद रखें प्रकाशित करना इसे अपने स्थान पर सहेजने के लिए.

एपीआई कुंजियाँ उत्पन्न करें

अंत में, आपको अपनी एपीआई कुंजी लेनी होगी, जिसका उपयोग आप रिएक्ट एप्लिकेशन से सामग्री डेटा लाने के लिए अनुरोध करने के लिए करेंगे।

1. क्लिक करें समायोजन डैशबोर्ड पृष्ठ के ऊपरी-दाएँ कोने में ड्रॉप-डाउन मेनू। फिर, का चयन करें एपीआई कुंजियाँ विकल्प।
2. क्लिक करें एपीआई कुंजी जोड़ें एपीआई कुंजी सेटिंग पृष्ठ खोलने के लिए बटन।
3. कंटेंटफुल स्वचालित रूप से एपीआई कुंजी सेटिंग्स पृष्ठ पर एपीआई कुंजी उत्पन्न और पॉप्युलेट करेगा। आपको कुंजियों के सेट को विशिष्ट रूप से पहचानने के लिए केवल एक नाम प्रदान करना होगा।

डेटा लाने के लिए कंटेंटफुल एपीआई का उपयोग करने के लिए, आपको इसकी आवश्यकता है स्पेस आईडी और यह एक्सेस टोकन. ध्यान दें, एक्सेस टोकन दो प्रकार के होते हैं: सामग्री वितरण एपीआई कुंजी और सामग्री पूर्वावलोकन एपीआई. उत्पादन परिवेश में, आपको सामग्री वितरण एपीआई कुंजी की आवश्यकता होगी।

लेकिन, विकास में, आपको केवल स्पेस आईडी और की आवश्यकता होती है सामग्री पूर्वावलोकन एपीआई चाबी। इन दो कुंजियों को कॉपी करें और आइए कोड में गोता लगाएँ।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं GitHub भण्डार.

एक रिएक्ट प्रोजेक्ट बनाएं

आरंभ करने के लिए, आप कर सकते हैं create-react-app का उपयोग करके एक रिएक्ट एप्लिकेशन को तैयार करें. वैकल्पिक रूप से, Vite का उपयोग करके एक रिएक्ट प्रोजेक्ट सेट करें. अपना प्रोजेक्ट बनाने के बाद, आगे बढ़ें, और इस पैकेज को इंस्टॉल करें।

npm install contentful

अब, एक बनाएं .env अपने प्रोजेक्ट फ़ोल्डर की रूट डायरेक्टरी में फ़ाइल करें, और एपीआई कुंजियाँ निम्नानुसार जोड़ें:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

यूज़कंटेंटफुल हुक बनाएं

में स्रोत निर्देशिका, एक नया फ़ोल्डर बनाएं और उसे नाम दें हुक. इस फ़ोल्डर के अंदर, एक नया जोड़ें सामग्रीपूर्ण.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 };
};

यह कस्टम हुक कोड कंटेंटफुल स्पेस से डेटा लाएगा। यह, सबसे पहले, दिए गए एक्सेस टोकन और स्पेस आईडी का उपयोग करके एक विशिष्ट कंटेंटफुल स्पेस से कनेक्शन स्थापित करके इसे प्राप्त करता है।

फिर, हुक का उपयोग करता है संतुष्ट ग्राहक के अंदर उपयोगकर्ता प्राप्त करें पुनः प्राप्त करने का कार्य प्रविष्टियां किसी विशेष सामग्री प्रकार की, इस मामले में, कोड की प्रविष्टियाँ प्राप्त करता है उपयोगकर्ताओं सामग्री प्रकार, विशेष रूप से केवल उनके फ़ील्ड का चयन करना। फिर प्राप्त डेटा को स्वच्छ किया जाता है और उपयोगकर्ता ऑब्जेक्ट की एक श्रृंखला के रूप में वापस कर दिया जाता है।

App.jsx फ़ाइल को अद्यतन करें

खोलें App.jsx फ़ाइल, बॉयलरप्लेट रिएक्ट कोड हटाएं, और इसे निम्नलिखित कोड के साथ अपडेट करें।

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

साथ सामग्रीपूर्ण उपयोग करें हुक, आप ब्राउज़र पर कंटेंटफुल सीएमएस से सामग्री डेटा ला और प्रदर्शित कर सकते हैं। अंत में, एप्लिकेशन में किए गए परिवर्तनों को अपडेट करने के लिए डेवलपमेंट सर्वर प्रारंभ करें।

npm run dev

महान! आपको रिएक्ट ऐप से कंटेंटफुल पर जोड़ी गई सामग्री को लाने और प्रस्तुत करने में सक्षम होना चाहिए। आगे बढ़ो और टेलविंड का उपयोग करके रिएक्ट एप्लिकेशन को स्टाइल करेंइसे शानदार लुक देने के लिए.

सामग्री प्रबंधन को आसान बनाया गया

आपके सिस्टम में एक हेडलेस सीएमएस को शामिल करने से विकास प्रक्रिया महत्वपूर्ण रूप से सुव्यवस्थित हो सकती है, जिससे आप मुख्य एप्लिकेशन लॉजिक के निर्माण पर ध्यान केंद्रित कर सकेंगे; सामग्री प्रबंधन कार्यों पर पर्याप्त समय खर्च करने के बजाय।