פיתוח יישומי Bitrix24 עם React: ווידג'טים ו-SPA

אנו מפתחים יישומי אינטרנט חיצוניים ב-React המוטמעים בממשק Bitrix24 דרך iframe או נפתחים בטאב נפרד. פיתוח יישומי Bitrix24 עם React הוא המומחיות שלנו. במשך יותר מ-5 שנים יצרנו יותר מ-30 פרויקטים: מווידג'טים פשוטים ועד SPA עצמאיים מלאים. בעיה אופיינית: ל-Bitrix24 הסטנדרטי חסרה בקרת SLA ב-CRM. יישום ה-React שלנו פותר זאת עם ווידג'ט בכרטיס העסקה. היישומים עובדים דרך Bitrix24 REST API, מקבלים הקשר משתמש דרך BX24.js SDK, וממוקמים במקומות שונים: סרגל צד של CRM, כרטיס ליד, כותרת הפורטל, דף יישום נפרד. React היא הבחירה הטבעית ליישומים כאלה: גישה מבוססת רכיבים, מערכת אקולוגית עשירה, טיפוסי TypeScript עבור REST API. אנו מבטיחים פעולה יציבה בכל גרסאות Bitrix24 (ענן ו-on-premise) ומאשרים פתרונות לפי תקני אבטחה.

אילו בעיות פותרים יישומי React ב-Bitrix24?

Bitrix24 הסטנדרטי אינו מכסה את כל התרחישים העסקיים: אין בקרת SLA ב-CRM, אין ממשקים גמישים עבור ERP חיצוני, ויכולות התראה בזמן אמת מוגבלות. יישומי React ממלאים פערים אלה על ידי השתלבות בממשק הפורטל. נקודות כאב אופייניות:

• חוסר בהמחשת SLA: מנהלים לא יכולים לראות כמה זמן עסקה תקועה בשלב. הווידג'ט שלנו עם ציר זמן ואינדיקציית צבע פותר זאת.
• אינטגרציות מורכבות: מערכות ERP חיצוניות דורשות ממשק משתמש מותאם אישית שלא ניתן ליישם עם רכיבים סטנדרטיים. יישום React עם backend משלו מתווך נתונים ומציג אותם בתוך Bitrix24.
• דוחות מוגבלים: דוחות מובנים אינם מאפשרים בניית לוחות מחוונים מורכבים. React + D3.js מספקת כל תרשים.

ארכיטקטורה של יישומי Bitrix24 על React

היישום מחולק לשלוש שכבות: React frontend (SPA), backend מותאם אישית (Laravel / Node.js), ו-Bitrix24 REST API. ה-frontend מתקשר עם ה-backend, וה-backend מתקשר עם Bitrix24 דרך אסימוני שרת או webhooks. זה מסתיר מפתחות מהדפדפן ומאפשר שמירת נתונים במטמון.

תהליך אימות OAuth

האימות משתמש ב-OAuth 2.0. Bitrix24 מנפיק access_token כאשר היישום נפתח ב-iframe (דרך postMessage או פרמטרי URL). עבור בקשות שרת, אימות דרך client_id + client_secret + webhook. ארכיטקטורה אופיינית: React frontend מבצע בקשות ל-backend שלו (לא ישירות ל-Bitrix24), וה-backend מתווך ל-Bitrix24 REST API עם אסימון השרת. זה מסתיר אסימונים מהדפדפן ומאפשר שמירת בקשות חוזרות במטמון. לפי תיעוד Bitrix24 REST API, מומלץ להשתמש ב-Authorization Code Flow עם PKCE לאבטחה משופרת.

// React-хук для вызова Битрикс24 REST через BX24.js (клиентская сторона)
function useBX24Method<T>(method: string, params: object) {
  return useQuery({
    queryKey: ['bx24', method, params],
    queryFn: () => new Promise<T>((resolve, reject) => {
      window.BX24.callMethod(method, params, (result: any) => {
        if (result.error()) reject(result.error());
        else resolve(result.data());
      });
    }),
    staleTime: 30_000,
  });
}

// Использование
const { data: deals } = useBX24Method<Deal[]>('crm.deal.list', {
  select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'],
  filter: { ASSIGNED_BY_ID: currentUserId },
  order: { DATE_MODIFY: 'DESC' },
});

שימוש בערכת ה-UI של Bitrix24 ביישום React

Bitrix24 מספקת את החבילה הרשמית @bitrix24/b24jssdk עם סט רכיבי React: Button, Input, Select, Table, Modal. הם מעוצבים דרך משתני CSS ומתאימים אוטומטית לנושא הפורטל (בהיר/כהה). שימוש בערכת ה-UI מבטיח שהיישום נראה כמו חלק טבעי של Bitrix24 — משתמשים לא שמים לב למעבר.

import { Button, Modal } from '@bitrix24/b24jssdk';

function MyApp() {
  return (
    <>
      <Button>Открыть</Button>
      <Modal show={true}>
        <p>Содержимое модалки</p>
      </Modal>
    </>
  );
}

מקרה בוחן: יישום לבקרת SLA ב-CRM

מניסיון: חברת שירותי B2B, 45 מנהלים, עסקאות עוברות 8 שלבים. משימה: ווידג'ט בכרטיס העסקה המציג כמה זמן העסקה נמצאת בשלב הנוכחי, דגל להפרת SLA (אם יותר מהנורמה), והיסטוריית מעברים בין שלבים. Bitrix24 המובנה אינו כולל בקרת SLA ב-CRM Deal.

יישום: Backend — Laravel (שרת נפרד). בכל שינוי שלב בעסקה, webhook מ-Bitrix24 (// React-хук для вызова Битрикс24 REST через BX24.js (клиентская сторона) function useBX24Method<T>(method: string, params: object) { return useQuery({ queryKey: ['bx24', method, params], queryFn: () => new Promise<T>((resolve, reject) => { window.BX24.callMethod(method, params, (result: any) => { if (result.error()) reject(result.error()); else resolve(result.data()); }); }), staleTime: 30_000, }); } // Использование const { data: deals } = useBX24Method<Deal[]>('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'], filter: { ASSIGNED_BY_ID: currentUserId }, order: { DATE_MODIFY: 'DESC' }, }); ) כותב את המעבר לטבלת import { Button, Modal } from '@bitrix24/b24jssdk'; function MyApp() { return ( <> <Button>Открыть</Button> <Modal show={true}> <p>Содержимое модалки</p> </Modal> </> ); } עם חותמות זמן. הווידג'ט של React מוטמע ב-event: ONCRMDEALUPDATE. כאשר הכרטיס נפתח, בקשה ל-backend שלנו עם deal_stage_history מחזירה: שלב נוכחי, זמן בשלב, נורמת SLA לשלב זה, סטטוס (תקין / הופר), ורשימת מעברים. המחזה: ציר זמן של שלבים עם אינדיקציית צבע. אדום — SLA הופר, צהוב — 75% מהזמן נוצל, ירוק — תקין.

function SlaWidget({ dealId }: { dealId: number }) {
  const { data } = useSlaData(dealId);
  if (!data) return <Spinner />;
  return (
    <div className="sla-widget">
      <SlaTimer
        currentStage={data.currentStage}
        timeOnStage={data.timeOnStage}
        slaLimit={data.slaLimit}
        status={data.status}
      />
      <StageTimeline history={data.stageHistory} />
    </div>
  );
}

התראות: כאשר SLA מופר, ה-backend שולח התראה למנהל האחראי ולממונה שלו דרך CRM_DEAL_DETAIL_TAB REST API.

ווידג'טים של React נטענים פי 3 מהר יותר מאשר כוללים קלאסיים של PHP בזכות שמירה במטמון ובקשות אסינכרוניות ב-backend המותאם אישית. הפחתה בעלויות ניטור SLA — עד 70%. החיסכון הסתכם בכ-15,000 RUB לחודש.

אינטגרציה דרך webhooks

יישומי Bitrix24 יכולים להירשם לאירועים דרך webhooks: שינויים בעסקאות, משימות, אנשי קשר. זה מאפשר בניית עדכונים כמעט בזמן אמת. עבור זמן אמת ב-React — Server-Sent Events (SSE) או polling. WebSocket מעל Bitrix24 — רק דרך DEAL_ID עם מודול Push & Pull.

תהליך ולוחות זמנים

1. ניתוח — קביעת מיקומי הטמעה, שיטות API, סכמת אימות.
2. עיצוב — ארכיטקטורת יישום, עיצוב אב טיפוס.
3. רישום היישום ב-Bitrix24, הגדרת OAuth, קבלת client_id/client_secret.
4. פיתוח backend — REST proxy, לוגיקה עסקית, webhooks.
5. פיתוח React SPA — רכיבים, מצב, אינטגרציה עם BX24.js.
6. בדיקות על פורטל אמיתי, מקרי קצה של אימות.
7. פריסה — HTTPS, הגדרת iframe, אימות Marketplace.
8. תיעוד API ופריסה.
9. הדרכת מנהלי פורטל.
10. תמיכה לאחר השקה (לפי בקשה).

לוחות זמנים: ווידג'ט מוטמע פשוט — 1–2 שבועות. יישום עצמאי מלא עם backend משלו — 4–12 שבועות בהתאם לפונקציונליות. אנו נעריך את הפרויקט שלך — צור קשר כדי לדון. קבל ייעוץ: הניסיון שלנו מבטיח איכות ועמידה בלוחות זמנים. הזמן פיתוח יישום כדי לדון במשימה שלך ולקבל הערכה ראשונית.