פיתוח יישומי Vue.js הניתנים להטמעה עבור Bitrix24

דוחות Bitrix24 הסטנדרטיים לא תמיד מכסים את הצרכים הספציפיים של העסק. כאשר יש צורך בלוגיקה מותנית מורכבת בכרטיסי CRM, איסוף נתונים ממערכות חיצוניות, או ממשק משתמש לא סטנדרטי, יש צורך ביישום מותאם אישית. אנו מפתחים יישומים הניתנים להטמעה על Vue.js הפועלים בתוך ממשק Bitrix24 — כ-iframe או כמודול JS מוטמע. זה מרחיב את הפונקציונליות של הפורטל ללא פגיעה בביצועים או שינוי הליבה. במהלך 8 השנים האחרונות, יישמנו יותר מ-30 פרויקטים: החל מלוחות מחוונים פשוטים ועד למחברי אינטגרציה עם 1C ופלטפורמות מסחר. הגישה שלנו: התעמקות עמוקה במשימה, בחירת ארכיטקטורה אופטימלית, ותהליך שקוף עם מועדים קבועים.

בניגוד לפתרונות טיפוסיים מהמרקטפלייס, היישום שלנו מתאים את עצמו במלואו לתהליכים העסקיים שלכם. אתם מקבלים ממשק שעובדים מבינים ואינטגרציה שעובדת ביציבות גם בעומסי שיא. אנו משתמשים בטכנולוגיות מודרניות: Vue 3, Vite, Composable API, ועוקבים בקפדנות אחר המלצות ההטמעה של Bitrix24. על ידי בדיקות על פורטלים חיים, אנו מפחיתים את מספר השגיאות לאחר השחרור ב-70%, ושימוש בתבניות מוכנות מאיץ את הפיתוח ב-30%.

כיצד מטמיעים יישומים ב-Bitrix24?

Bitrix24 מספק שני מנגנוני הטמעה:

עבור יישומי Vue, הבחירה הסטנדרטית היא iframe עם אירוח נפרד או מיקום ב-/local/apps/. החלק השרתי יכול להיות על Laravel, Node.js, או על Bitrix עצמו.

כיצד לאתחל Vue בתוך Bitrix24?

חיבור ה-SDK של BX24 והפעלת יישום Vue:

<script src="//{{portal}}.bitrix24.ru/bitrix/js/rest/bx24/bx24.js"></script> <div id="app"></div> <script type="module" src="/assets/app.js"></script> 

import { createApp } from 'vue' import App from './App.vue' window.BX24.init(() => { const app = createApp(App) app.provide('bx24', window.BX24) app.mount('#app') }) 

העברת <script src="//{{portal}}.bitrix24.ru/bitrix/js/rest/bx24/bx24.js"></script> <div id="app"></div> <script type="module" src="/assets/app.js"></script> באמצעות import { createApp } from 'vue' import App from './App.vue' window.BX24.init(() => { const app = createApp(App) app.provide('bx24', window.BX24) app.mount('#app') }) מאפשרת שימוש בו בכל קומפוננטה ללא משתנים גלובליים.

כיצד לשלב REST API מ-Vue?

לקריאות REST אנו משתמשים ב-BX24 או ב-provide/inject. עטפו אותם ב-promises:

export function useBx24() { const bx24 = inject('bx24') function callMethod(method, params = {}) { return new Promise((resolve, reject) => { bx24.callMethod(method, params, (result) => { if (result.error()) reject(result.error()) else resolve(result.data()) }) }) } async function callBatch(calls) { return new Promise((resolve, reject) => { bx24.callBatch(calls, (results) => { const errors = Object.values(results).filter(r => r.error()) if (errors.length) reject(errors[0].error()) else resolve(Object.fromEntries( Object.entries(results).map(([k, v]) => [k, v.data()]) )) }) }) } return { callMethod, callBatch } } 

קומפוננטה טיפוסית לרשימת עסקאות:

<script setup> import { ref, onMounted } from 'vue' import { useBx24 } from '@/composables/useBx24' const { callMethod } = useBx24() const deals = ref([]) const loading = ref(true) onMounted(async () => { deals.value = await callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'], filter: { STAGE_ID: 'NEW' }, order: { DATE_CREATE: 'DESC' } }) loading.value = false }) </script> 

מדוע חשוב לנהל את גודל ה-iframe?

Bitrix24 אינו מנהל אוטומטית את גובה ה-iframe. היישום חייב לדווח על גודלו שלו. השתמשו ב-BX24.callMethod עבור דפים סטטיים וב-BX24.callBatch עבור דינמיים — זה מונע פסי גלילה בתוך הפורטל. בקומפוננטות Vue, קראו ל-export function useBx24() { const bx24 = inject('bx24') function callMethod(method, params = {}) { return new Promise((resolve, reject) => { bx24.callMethod(method, params, (result) => { if (result.error()) reject(result.error()) else resolve(result.data()) }) }) } async function callBatch(calls) { return new Promise((resolve, reject) => { bx24.callBatch(calls, (results) => { const errors = Object.values(results).filter(r => r.error()) if (errors.length) reject(errors[0].error()) else resolve(Object.fromEntries( Object.entries(results).map(([k, v]) => [k, v.data()]) )) }) }) } return { callMethod, callBatch } } ב-hooks של <script setup> import { ref, onMounted } from 'vue' import { useBx24 } from '@/composables/useBx24' const { callMethod } = useBx24() const deals = ref([]) const loading = ref(true) onMounted(async () => { deals.value = await callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'], filter: { STAGE_ID: 'NEW' }, order: { DATE_CREATE: 'DESC' } }) loading.value = false }) </script> ו-bx24.fitWindow().

אימות והרשאות גישה

אסימון הגישה מועבר אוטומטית דרך ה-SDK של BX24. לבקשות מצד השרת, השתמשו ב-ResizeObserver — הוא מחזיר fitWindow() שמועבר בכותרת onMounted. בדיקת הרשאות משתמש נעשית באמצעות שיטות כמו onUpdated.

בנייה ופריסה

Vite היא הבחירה האופטימלית לבנייה:

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], base: '/local/apps/my-app/', build: { outDir: 'dist', assetsDir: 'assets', } }) 

התיקייה bx24.getAuth() שנבנתה מועלית לשרת. בהגדרות היישום של Bitrix24, מצוינת כתובת ה-URL של נקודת הכניסה. לפיתוח מקומי, אנו משתמשים ב-access_token או בשרת פיתוח של Vite עם HTTPS.

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

מקרי שימוש טיפוסיים

לוח מחוונים לעסקאות — איסוף נתוני CRM, ויזואליזציה של משפך, סינון לפי אחראים ותקופות. דוחות Bitrix24 הסטנדרטיים אינם מספיקים עבור חיתוכים לא סטנדרטיים.

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

מחבר אינטגרציה — היישום מקבל נתונים ממערכת חיצונית (1C, ERP, פלטפורמת מסחר) ומציג אותם בהקשר של Bitrix24 עם סנכרון.

מתזמן משימות — ממשק משתמש מותאם אישית עם גרירה ושחרור, לוח קנבן, או תצוגת ציר זמן על גבי ה-API הסטנדרטי של משימות. הפתרון שלנו עובד מהר יותר מווידג'טים טיפוסיים בזכות שמירת מטמון וה-cache המתויג של Bitrix.

לוחות זמנים

יישום פשוט (מסך אחד, CRUD לישות אחת) — 2–3 ימי עבודה. יישום עם מספר מסכים, אימות, חלק שרתי ופריסה — 1–2 שבועות בהתאם למורכבות הלוגיקה העסקית.

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

צרו קשר כדי לדון בפרטי הפרויקט שלכם.

תיעוד Bitrix24: "יישומים מוטמעים באמצעות iframe או JS SDK" — dev.1c-bitrix.ru מידע נוסף על Vue.js — ויקיפדיה