פיתוח אפליקציות Contentful מותאמות אישית (הרחבות)

פיתוח אפליקציות Contentful מותאמות אישית (הרחבות)

עורך ה-Contentful הסטנדרטי נוח, אבל לתהליכים עסקיים עם לוגיקה ייחודית, שדות מובנים לרוב לא מספיקים. בסופו של דבר אתם מייצאים נתונים, מעבדים אותם עם כלים חיצוניים ומבזבזים זמן על הזנה ידנית. אנחנו מפתחים אפליקציות Contentful מותאמות אישית—הרחבות שמשתלבות ישירות בממשק העורך. אלה לא רק ווידג'טים: דרך ה-SDK, האפליקציה מקבלת גישה ל-Entry API, ל-Space API ול-Server-side App Actions. עם הפתרונות שלנו, לקוחות מקצרים את זמן פרסום התוכן ב-30-50% ומבטלים שגיאות העברה ידניות.

במשך יותר מ-5 שנים של עבודה עם מערכות headless CMS, בנינו יותר מ-20 אפליקציות מותאמות אישית ללקוחות במסחר אלקטרוני, מדיה ופיננסים. אנחנו מבטיחים תאימות לגרסאות Contentful הנוכחיות והשתלבות חלקה בזרימת העבודה הקיימת שלכם. אפליקציות מותאמות אישית מהירות פי 4 מעיבוד תוכן ידני—נתוני הפרויקטים שלנו מאשרים זאת.

ארכיטקטורת אפליקציות Contentful

כל אפליקציה מורכבת משני חלקים: frontend (React/Vue/Vanilla JS, מתארח בכל מקום) ו-App Backend אופציונלי (AWS Lambda או כל נקודת קצה HTTP עבור App Actions ו-Events). שניהם נרשמים ב-App Definition דרך Contentful Management API או Web App.

App Definition
├── Locations: field, sidebar, entry-editor, page, home
├── Parameters: instance params (per-field) + installation params (per-space)
└── App Actions: serverless functions callable from UI or API

תרחישים אופייניים:

• עורך שדות מותאם אישית—לדוגמה, בורר צבעים המקושר ל-design tokens מ-Figma
• הרחבת סרגל צד—פאנל ניתוח SEO שקורא שדות Entry בזמן אמת
• מיקום דף—מנהל נכסים במסך מלא עם אינטגרציה ל-Cloudinary
• App Actions—יצירת תיאורים באמצעות AI דרך OpenAI בעת שמירת Entry

איך מפתחים שדה Contentful מותאם אישית?

עבור הרחבות שדות, אנחנו משתמשים ב-App Definition ├── Locations: field, sidebar, entry-editor, page, home ├── Parameters: instance params (per-field) + installation params (per-space) └── App Actions: serverless functions callable from UI or API SDK. לדוגמה, בורר צבעים המקושר ל-design tokens:

import { init, FieldExtensionSDK } from '@contentful/app-sdk';

init((sdk: FieldExtensionSDK) => {
  const value = sdk.field.getValue();
  sdk.field.onValueChanged((newValue) => setFieldValue(newValue));
  sdk.field.setValue({ color: '#ff5500', token: 'brand-primary' });
  sdk.window.startAutoResizer();
});

עבור אפליקציות React, אנחנו משתמשים ב-@contentful/app-sdk:

import { useSDK, useFieldValue } from '@contentful/react-apps-toolkit';

const ColorPickerField = () => {
  const sdk = useSDK<FieldExtensionSDK>();
  const [value, setValue] = useFieldValue<string>();

  return (
    <ColorPicker
      value={value}
      onChange={(color) => setValue(color.hex)}
      tokens={sdk.parameters.installation.designTokens}
    />
  );
};

מהם App Actions ולמה להשתמש בהם?

App Actions הם פונקציות בצד השרת שנקראות מעורך הממשק ללא צורך ב-backend מותאם אישית. Contentful מעביר בקשות לנקודת הקצה שלכם ומחזיר את התוצאה. דוגמה—יצירת תיאורי SEO דרך OpenAI:

const result = await sdk.cma.appAction.callById({
  spaceId: sdk.ids.space,
  environmentId: sdk.ids.environment,
  appDefinitionId: sdk.ids.app,
  appActionId: 'generate-seo',
  parameters: {
    entryId: sdk.ids.entry,
    locale: sdk.locales.default,
  },
});

בשרת (Node.js/Express):

app.post('/actions/generate-seo', async (req, res) => {
  verifySignature(req.headers['x-contentful-signature'], req.body);
  const { entryId, locale } = req.body.parameters;
  const entry = await cma.entry.get({ entryId });
  const seoData = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [{ role: 'user', content: buildSeoPrompt(entry, locale) }],
  });
  res.json({ result: { seoTitle: seoData.choices[0].message.content } });
});

פרמטרי התקנה ותצורה

פרמטרי התקנה מוגדרים פעם אחת בעת התקנת האפליקציה ב-Space. הם מעבירים מפתחות API, טוקנים ותצורות—ללא קידוד קשיח בקוד האפליקציה:

const ConfigScreen = () => {
  const sdk = useSDK<AppExtensionSDK>();
  const [params, setParams] = useState(sdk.parameters.installation);
  sdk.app.onConfigure(() => ({
    parameters: params,
    targetState: {
      EditorInterface: {
        controls: [
          {
            fieldId: 'seoTitle',
            widgetId: sdk.ids.app
          }
        ]
      }
    }
  }));
};

למה אפליקציות Contentful מותאמות אישית עדיפות על פתרונות סטנדרטיים?

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

בנייה ופריסה

Contentful מספקת CLI לפיתוח מקומי ופריסה:

npx create-contentful-app@latest my-app --template typescript
npm run start
contentful-app-scripts activate
npm run build
contentful-app-scripts upload

הגדרת CI/CD לאפליקציית Contentful היא פשוטה: אנחנו משתמשים ב-GitHub Actions לבדיקות אוטומטיות ופריסה. בעת דחיפה ל-main, מתבצעת בנייה, בדיקות עם מוקי import { init, FieldExtensionSDK } from '@contentful/app-sdk'; init((sdk: FieldExtensionSDK) => { const value = sdk.field.getValue(); sdk.field.onValueChanged((newValue) => setFieldValue(newValue)); sdk.field.setValue({ color: '#ff5500', token: 'brand-primary' }); sdk.window.startAutoResizer(); }); רצות, וגרסה חדשה מועלית ל-CDN של Contentful דרך @contentful/react-apps-toolkit. זה מבטיח שההרחבה שלכם תמיד מעודכנת ללא צעדים ידניים.

לוחות זמנים והיקף

במהלך הפיתוח, אנחנו מכסים בבדיקות עם אובייקטי מוק של import { useSDK, useFieldValue } from '@contentful/react-apps-toolkit'; const ColorPickerField = () => { const sdk = useSDK<FieldExtensionSDK>(); const [value, setValue] = useFieldValue<string>(); return ( <ColorPicker value={value} onChange={(color) => setValue(color.hex)} tokens={sdk.parameters.installation.designTokens} /> ); }; ומגדירים CI לפריסה אוטומטית דרך const result = await sdk.cma.appAction.callById({ spaceId: sdk.ids.space, environmentId: sdk.ids.environment, appDefinitionId: sdk.ids.app, appActionId: 'generate-seo', parameters: { entryId: sdk.ids.entry, locale: sdk.locales.default }, }); .

איך אנחנו מבטיחים איכות?

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