מערכות ניהול תוכן ללא ראש (CMS) מאפשרות לך לנתק את פונקציות ניהול התוכן מההיגיון שמטפל באופן הצגת התוכן באפליקציות שלך.

בעיקרו של דבר, על ידי שילוב CMS ​​באפליקציה שלך, אתה יכול לנהל בקלות את התוכן הכל בתוך יחיד פלטפורמה, ולאחר מכן, שתף בצורה חלקה את התוכן על פני ערוצי קצה שונים, כולל אינטרנט ומובייל יישומים.

מהו CMS ללא ראש?

מערכת ניהול תוכן ללא ראש מאפשרת יצירה וניהול של תוכן ונכסים דיגיטליים, הכל בפלטפורמה אחת. בניגוד ל-CMS המסורתי, התוכן מועבר באמצעות ממשקי API כגון GraphQL API, חלופה ל- RESTful APIs. זה מאפשר לשתף את התוכן בין אפליקציות אינטרנט וניידים שונות.

גישה זו מאפשרת להפריד את החששות בין ניהול תוכן להצגתו - מה שמבטיח שתוכל להתאים כיצד התוכן מוצג כך שיתאים ליישומי לקוח ולהתקנים שונים מבלי להשפיע על התוכן הבסיסי ושלו מִבְנֶה.

תחילת העבודה עם Contentful CMS

Contentful היא מערכת ניהול תוכן ללא ראש המאפשרת לך ליצור, לנהל ולשתף את התוכן הדיגיטלי והמשאבי מדיה שלך בין היישומים שלך באמצעות ממשקי ה-API שלה.

כדי להתחיל להשתמש ב-Contentful CMS, תחילה עליך ליצור מודל תוכן.

צור מודל תוכן

בצע את השלבים הבאים כדי ליצור מודל תוכן ב-Contentful.

1. לְבַקֵר האתר של Contentful, צור חשבון והיכנס לחשבון שלך מֶרחָב. Contentful מארגן את כל התוכן הקשור לפרויקט והנכסים הקשורים במרחבים אלה.
2. בפינה השמאלית העליונה של המרחב שלך, לחץ על מודל תוכן לשונית כדי לפתוח את דף ההגדרות.
3. לחץ על הוסף סוג תוכן כפתור במודל התוכן הגדרות עמוד. סוג תוכן, במקרה זה, מייצג את המודל (המבנה) של הנתונים שתוסיף ל-Contentful.
4. כעת, הזן א שֵׁם ו תיאור עבור סוג התוכן שלך במודאל המוקפץ. Contentful יאכלס אוטומטית את מזהה API שדה המבוסס על השם שאתה מספק.
5. לאחר מכן, הגדירו את מבנה התוכן עצמו. לחץ על הוסף שדה לחצן כדי להוסיף כמה שדות למודל התוכן שלך. להלן מספר שדות שבהם תוכל להשתמש עבור המודל:

   user_ID = type 
   first_name = type 
   role = type 

6. כדי להוסיף שדות, בחר את סוּג מהחלון המוקפץ של הסוגים.
7. לספק שם שדה, ולאחר מכן, לחץ על הוסף והגדר לַחְצָן.
8. לבסוף, ודא שמאפייני השדה הם כצפוי ב- אִשׁוּר עמוד. בנוסף, בעודך בדף האישור, תוכל לציין מאפיינים נוספים עבור השדות, כגון כללי אימות.
9. נְקִישָׁה לְאַשֵׁר כדי להוסיף את השדה החדש לדגם.
10. לאחר שהוספת את כל השדות הדרושים לדגם שלך, הם יופיעו בפורמט רשימה, כפי שמוצג להלן. לסיום, לחץ על להציל לחצן כדי להחיל את השינויים על מודל התוכן.

הוסף את התוכן

עם מודל התוכן במקום, קדימה, הוסף את התוכן על ידי ביצוע השלבים הבאים:

1. נווט אל שלך לוח המחוונים החלל עמוד ולחץ על תוֹכֶן לשונית.
2. בחר את סוג תוכן, מודל התוכן שיצרת, מהתפריט הנפתח בסרגל החיפוש. לאחר מכן, לחץ על הוסף ערך כפתור להוספת תוכן.
3. לאחר מכן, הוסף את התוכן ל- עורך תוכן. עבור כל ערך, זכור ללחוץ לְפַרְסֵם כדי לשמור אותו במרחב שלך.

צור מפתחות API

לבסוף, עליך לתפוס את מפתחות ה-API שלך, שבהם תשתמש כדי לבקש בקשות להביא את נתוני התוכן מאפליקציית React.

1. לחץ על הגדרות תפריט נפתח בפינה השמאלית העליונה של דף לוח המחוונים. לאחר מכן, בחר את מפתחות API אוֹפְּצִיָה.
2. לחץ על הוסף מפתח API לחצן כדי לפתוח את דף ההגדרות של מפתחות API.
3. Contentful יפיק ותאכלס באופן אוטומטי את מפתחות ה-API בדף ההגדרות של מפתחות ה-API. אתה רק צריך לספק שם כדי לזהות באופן ייחודי את קבוצת המפתחות.

כדי להשתמש בממשקי API Contentful כדי להביא נתונים, אתה צריך את מזהה שטח וה אסימון גישה. שימו לב, ישנם שני סוגים של אסימוני גישה: מפתח API להעברת תוכן ו API לתצוגה מקדימה של תוכן. בסביבת ייצור, תזדקק למפתח ה-Content Delivery API.

אבל, בפיתוח, אתה צריך רק את מזהה החלל ואת API לתצוגה מקדימה של תוכן מַפְתֵחַ. העתיקו את שני המפתחות הללו ובואו נצלול לתוך הקוד.

אתה יכול למצוא את הקוד של הפרויקט הזה בו GitHub מאגר.

צור פרויקט React

כדי להתחיל, אתה יכול פיגום אפליקציית 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 Hook

בתוך ה 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 };
};

קוד ה-hook מותאם אישית זה יביא את הנתונים מהמרחב Contentful. זה משיג זאת על ידי, ראשית, יצירת חיבור למרחב Contentful ספציפי באמצעות אסימון הגישה ומזהה המרחב שסופק.

לאחר מכן, הקרס משתמש ב- לקוח מרוצה בתוך ה getUsers פונקציה לאחזור ערכים מסוג תוכן מסוים, במקרה זה, הקוד מביא את הערכים של ה- משתמשים סוג תוכן, בחירה ספציפית רק בשדות שלהם. לאחר מכן, הנתונים שאוחזרו עוברים חיטוי ומוחזרים כמערך של אובייקטי משתמש.

עדכן את קובץ App.jsx

פתח את ה App.jsx קובץ, מחק את קוד ה-boilerplate 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 hook, אתה יכול להביא ולהציג את נתוני התוכן מ-Contentful CMS בדפדפן. לבסוף, הפעל את שרת הפיתוח כדי לעדכן את השינויים שבוצעו באפליקציה.

npm run dev

גדול! אתה אמור להיות מסוגל לאחזר ולעבד את התוכן שהוספת ב-Contentful מאפליקציית React. קדימה ו סגננו את אפליקציית React באמצעות Tailwindלתת לו מראה פנטסטי.

ניהול תוכן קל

שילוב של מערכת CMS ללא ראש במערכת שלך יכול לייעל משמעותית את תהליך הפיתוח, ולאפשר לך להתרכז בבניית היגיון הליבה של היישום; במקום להשקיע כמות ניכרת של זמן במשימות ניהול תוכן.