פיתוח רכיבי Retool מותאמים אישית עם איכות מובטחת

לעתים קרובות אנו נתקלים במצבים שבהם הווידג'טים המובנים של Retool מתקשים: צריך להציג 10,000+ נקודות על מפה עם קיבוץ דינמי, אבל ווידג'ט המפה המקורי קופא ב-500 נקודות. או שצריך תרשים עם אנימציה מותאמת אישית, גרירה ושחרור עם חוקים עסקיים, לוח קנבן עם מגבלות WIP. למשימות כאלה, Retool מספקת רכיבים מותאמים אישית — יישומי React מלאים המבודדים ב-iframe ומתקשרים עם המארח באמצעות postMessage API. בנינו למעלה מ-50 רכיבים כאלה במפתח מלא למשימות עסקיות שונות, ואנו חולקים את הניסיון שנצבר.

כיצד פועלים רכיבים מותאמים אישית — פיתוח רכיבי Retool מותאמים אישית

רכיב מותאם אישית הוא יישום React המתקשר עם Retool באמצעות ספריית @tryretool/custom-component-support. היא מספקת React hooks לסנכרון מצב: Retool.useStateValue לקריאה/כתיבה של המודל ו-Retool.useEventCallback לשליחת אירועים חזרה ל-Retool. סביבת הפיתוח היא שרת מקומי (Vite או CRA), וה-bundle היצרני נפרס לכל אירוח סטטי.

// src/index.tsx — точка входа кастомного компонента
import { Retool } from '@tryretool/custom-component-support';

interface ModelData {
  items: Array<{ id: string; label: string; value: number; color: string }>;
  selectedId: string | null;
}

export const BubbleChart: FC = () => {
  const [items] = Retool.useStateValue<ModelData['items']>({
    name: 'items',
    initialValue: [],
    label: 'Chart items',
    inspector: 'array',
  });

  const [selectedId, setSelectedId] = Retool.useStateValue<string | null>({
    name: 'selectedId',
    initialValue: null,
    label: 'Selected item ID',
    inspector: 'string',
  });

  const onSelect = Retool.useEventCallback({ name: 'onItemSelect' });

  const handleBubbleClick = (id: string) => {
    setSelectedId(id);
    onSelect({ id });
  };

  return (
    <BubbleChartRenderer
      items={items}
      selectedId={selectedId}
      onSelect={onSelect}
    />
  );
};

מדוע רכיבי Retool מותאמים אישית עדיפים על ווידג'טים מובנים?

ווידג'טים מובנים מכסים 80% מהמשימות הטיפוסיות, אך 20% הנותרים דורשים פתרון מותאם אישית. השוואה:

עבור פורמטים נדירים (תרשים אקורדים, גרף מונחה כוח), רכיב מותאם אישית הוא הדרך היחידה.

משימות טיפוסיות

ויזואליזציות: תרשימי D3.js (תרשים אקורדים, גרף מונחה כוח, sankey), ECharts עם סדרות מותאמות אישית, תצוגות תלת-ממד של Three.js. לדוגמה, לקוח השיג שיפור ביצועים של 40% באמצעות ויזואליזציה מותאמת אישית של Retool D3.js לעומת תרשימים מקוריים.

טבלאות אינטראקטיביות: רשימות וירטואליות באמצעות // src/index.tsx — точка входа кастомного компонента import { Retool } from '@tryretool/custom-component-support'; interface ModelData { items: Array<{ id: string; label: string; value: number; color: string }>; selectedId: string | null; } export const BubbleChart: FC = () => { const [items] = Retool.useStateValue<ModelData['items']>({ name: 'items', initialValue: [], label: 'Chart items', inspector: 'array', }); const [selectedId, setSelectedId] = Retool.useStateValue<string | null>({ name: 'selectedId', initialValue: null, label: 'Selected item ID', inspector: 'string', }); const onSelect = Retool.useEventCallback({ name: 'onItemSelect' }); const handleBubbleClick = (id: string) => { setSelectedId(id); onSelect({ id }); }; return ( <BubbleChartRenderer items={items} selectedId={selectedId} onSelect={onSelect} /> ); }; ל-50,000+ שורות, עריכה מובנית עם ולידטורים מותאמים אישית, גרירה ושחרור למיון באמצעות @tanstack/virtual. זה מאפשר זרימות עבודה של גרירה ושחרור ב-Retool.

מפות: Mapbox GL JS / Leaflet עם אשכולות דינמיים, כלי ציור עבור גדרות גיאוגרפיות, איזוכרונים באמצעות Mapbox Isochrone API. מושלם עבור מפות אינטראקטיביות של Retool.

דפוסי UI ספציפיים: לוח קנבן של Retool עם אילוצים עסקיים, ציר זמן Gantt של Retool, עורך קוד מבוסס Monaco. אלה מכסים צרכים מתקדמים של אינטגרציה עם רכיבים מותאמים אישית של Retool.

מה כלול בעבודה?

אנו מפתחים את הרכיב במפתח מלא: מהגדרת חוזה הנתונים ועד לפריסה ותיעוד. ההיקף כולל:

• תיאום מודל הנתונים והאירועים.
• יישום העיבוד וכל הלוגיקה העסקית.
• אינטגרציה עם סביבת ה-Retool שלך (ענן או self-hosted).
• אופטימיזציית ביצועים (וירטואליזציה, טעינה עצלה, memoization).
• פריסה ל-CDN או ל-Retool Toolbox.
• תיעוד להתקנה ושימוש.
• הדרכה ותמיכה בכתב למשך שבועיים לאחר המסירה.

בנייה ופריסה

הרכיב נארז לקובץ יחיד ונפרס לאחסון סטטי. Retool תומכת בשתי שיטות חיבור: דרך URL (CDN/S3/Vercel) ודרך Retool Toolbox עבור instances של self-hosted.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/index.tsx',
      name: 'RetoolCustomComponent',
      fileName: 'index',
      formats: ['umd'],
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

לאחר @dnd-kit/core — ה-// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], build: { lib: { entry: 'src/index.tsx', name: 'RetoolCustomComponent', fileName: 'index', formats: ['umd'], }, rollupOptions: { external: ['react', 'react-dom'], output: { globals: { react: 'React', 'react-dom': 'ReactDOM', }, }, }, }, }); מועלה ל-CDN או ל-Retool Cloud Storage. בממשק Retool, אתה יוצר רכיב מותאם אישית, מציין את כתובת ה-bundle ואת כתובת דף ה-iframe.

העברת נתונים מורכבים

Retool מגבילה את המודל לסוגים הניתנים לסריאליזציה. עבור מבנים מורכבים (אובייקטים מקוננים, קבצים), השתמש בסריאליזציית JSON בתוך שדה מחרוזת:

const [rawConfig] = Retool.useStateValue<string>({
  name: 'config',
  initialValue: '{}',
  label: 'JSON Config',
  inspector: 'text',
});

const config = useMemo(() => {
  try {
    return JSON.parse(rawConfig);
  } catch {
    return {};
  }
}, [rawConfig]);

עבור מערכי נתונים גדולים (אלפי שורות), הנתונים מועברים דרך Retool Query שמחזיר JSON — הרכיב מקבל אותם ישירות ללא שכפול מצב במודל.

כיצד ליצור רכיב מותאם אישית: 5 שלבים

1. הגדר את הפרויקט: צור אפליקציית React עם Vite או CRA, התקן את vite build.
2. הגדר את חוזה הנתונים: תאם עם הלקוח את שדות המודל (ערכים, מאפיינים) ואת האירועים (callbacks).
3. יישם עיבוד ולוגיקה: השתמש ב-hooks של dist/index.umd.js לקריאת נתונים ו-const [rawConfig] = Retool.useStateValue<string>({ name: 'config', initialValue: '{}', label: 'JSON Config', inspector: 'text', }); const config = useMemo(() => { try { return JSON.parse(rawConfig); } catch { return {}; } }, [rawConfig]); לשליחת אירועים.
4. בנה את ה-bundle: הרץ את @tryretool/custom-component-support עם תצורת UMD.
5. פרוס: העלה את ה-bundle ל-CDN או ל-Retool Toolbox וספק את כתובת ה-URL בממשק Retool.

הניסיון והערבויות שלנו

אנו עובדים עם פלטפורמות low-code כבר שבע שנים ובנינו למעלה מ-50 רכיבים מותאמים אישית עבור Retool. אנו מבטיחים פעולה יציבה ועמידה בלוחות זמנים. צור קשר — נבחן את המשימה שלך. עלות הפיתוח משתנה בהתאם למורכבות, אך בדרך כלל מחזירה את עצמה תוך 2–3 חודשי שימוש. עלויות פרויקט טיפוסיות נעות בין $2,000 ל-$10,000.