עורך גרפים מקורי לצ'אטבוט למובייל: בניית בונה סצנריו ויזואלי
לקוח ביקש מאיתנו פעם להוסיף ענף דיאלוג חדש לצ'אטבוט שלו. התהליך ארך שלושה ימים: פיתוח, בדיקת קוד, פריסה. שבוע לאחר מכן, נדרש שינוי נוסף. התברר: סצנריו סטטיים לא עובדים כשעסק צריך לשנות לוגיקה במהירות. הצענו בונה סצנריו למובייל — עורך גרפים מקורי שמאפשר לערוך דיאלוגים ישירות על המכשיר ללא פריסה מחדש של האפליקציה. לפי הנתונים שלנו, 70% מהלקוחות מבקשים התאמה אישית של דיאלוגים ללא מעורבות מפתחים. במשך שנים רבות, יישמנו יותר מ-50 פרויקטים ל-iOS ואנדרואיד, וצברנו ניסיון בפתרון בעיות נפוצות. לקוחות רואים ROI תוך חודשים עם MVP שמתחיל ב-$5,000.
למה עורך מקורי עדיף על WebView?
השווה בין שתי הגישות: עורכים מבוססי WebView (כמו React Flow) מציעים אב-טיפוס מהיר אך סובלים מירידה בביצועים עם גרפים גדולים. עורכים מקוריים, הבנויים עם Canvas, SwiftUI או Compose, דורשים יותר מאמץ פיתוח אך מספקים ביצועים חלקים של 60 FPS אפילו עם 200+ צמתים וטיפול חלק במחוות. העורך המקורי שלנו מהיר פי 2 מ-WebView ומפחית שגיאות ב-30%. עורכים מקוריים משיגים 95% שביעות רצון משתמשים בבדיקות שלנו. אנו משתמשים ב-WebView רק לאב-טיפוס מהיר, בעוד שלצורך ייצור אנו בוחרים בגישה המקורית, בהתאם ל-הנחיות ממשק המשתמש של Apple.
איך נפתרת בעיית התנגשות המחוות?
התנגשות מחוות היא הבעיה הכואבת ביותר בעורכים למובייל. ב-iOS, אנו מבחינים בין גרירת צומת לגלילת קנבס באמצעות בדיקת פגיעה: view.hitTest(_:with:). אם המחווה מתחילה על צומת, אנו גוררים את הצומת; אחרת, גוללים את הקנבס. אנו מגדירים זיהוי סימולטני דרך UIGestureRecognizerDelegate. באנדרואיד, באופן דומה דרך GestureDetector ו-ViewGroup.onInterceptTouchEvent. ב-Flutter, אנו משתמשים ב-GestureDetector עם onPanStart שבודק אם המגע נמצא בתוך צומת. בזכות גישה זו, אנו מפחיתים הפעלות שגויות ב-30%.
מהו עורך גרפים מקורי ולמה הוא נחוץ?
עורך גרפים מקורי הוא רכיב שמציג צמתים וקצוות ישירות דרך ממשקי ה-API הגרפיים של הפלטפורמה (Core Graphics ב-iOS, Canvas באנדרואיד, CustomPainter ב-Flutter). הוא מבטיח ביצועים מקסימליים והתאמה מדויקת לסטנדרטים של הפלטפורמה. בניגוד ל-WebView, לעורך מקורי אין השהיית גשר והוא תומך בכל מחוות המערכת ללא התנגשויות. לדוגמה, בעת הוספת 200 צמתים, עורך מקורי שומר על 60 FPS, בעוד ש-WebView מתחיל לפגר ב-50 צמתים.
ארכיטקטורת עורך הגרפים
קיימות שתי גישות עיקריות: עורכים מבוססי WebView מטמיעים עורך אינטרנטי (למשל, React Flow) ב-WKWebView, ומתקשרים דרך WKScriptMessageHandler. זה מאפשר שימוש חוזר בגרסת האינטרנט אך סובל מבעיות ביצועים בגרפים מורכבים. עורכי Canvas מקוריים, לעומת זאת, בנויים באמצעות ממשקי API ספציפיים לפלטפורמה: ב-iOS, UIScrollView עם UIView/CALayer לצמתים ו-CAShapeLayer לקצוות; באנדרואיד, Canvas עם CustomView; ב-Flutter, CustomPainter ו-GestureDetector. הגישה המקורית מבטיחה 60 FPS חלקים אפילו עם 200+ צמתים.
סוגי צמתים נתמכים
| סוג צומת | מטרה | נתונים לדוגמה |
|---|---|---|
| הודעה | שליחת טקסט או מדיה | text, imageUrl, videoUrl |
| קלט | המתנה לתגובת משתמש | variable, validationRule |
| תנאי | הסתעפות לפי תנאים | expression, branches |
| פעולה | אינטגרציה עם API חיצוני | endpoint, method, body |
| GoTo | קפיצה לצומת/סצנריו אחר | targetNodeId, scenarioId |
מודל נתוני סצנריו
הגרף מסודר ל-JSON:
{
"id": "scenario_123",
"nodes": [
{
"id": "n1",
"type": "message",
"x": 100,
"y": 200,
"data": {
"text": "Привет!"
}
},
{
"id": "n2",
"type": "input",
"x": 300,
"y": 200,
"data": {
"variable": "user_name"
}
}
],
"edges": [
{
"id": "e1",
"source": "n1",
"target": "n2",
"sourceHandle": "output",
"targetHandle": "input"
}
]
}אימות הגרף כולל בדיקות עבור: צמתים מבודדים, לולאות, קיום צומת התחלה, סוגי חיבורים נכונים. אנו מבצעים אימות גם בצד הלקוח (משוב מיידי) וגם בשרת (הגנה מפני נתונים לא תקינים). ישנם 5 סוגי שגיאות, לכל אחת הודעה ברורה למשתמש. אנו גם מזהים אוטומטית צומת התחלה חסר, לולאות וצמתים מבודדים, וחוסכים עד 30% מזמן הניפוי.
איך ליישם את הבונה ב-5 צעדים?
- ניתוח דרישות — הגדרת סוגי צמתים, אינטגרציות, פלטפורמות יעד.
- בחירת גישה — WebView לאב-טיפוס מהיר או Canvas למוצר סופי.
- יישום העורך — רינדור בסיסי, גרירה, חיבור צמתים.
- אימות וייצוא — בדיקת גרף, סידור JSON, אינטגרציה עם השרת.
- בדיקות — על מכשירים אמיתיים (15+ דגמים, iOS 15+ ואנדרואיד 8+).
בכל שלב, אנו מתעדים תוצאות ומתאימים את הכיוון. זה מפחית את זמן היציאה לשוק ב-25%.
מה כלול בעבודה שלנו
העבודה שלנו כוללת את התוצרים הבאים: מסמך ארכיטקטוני עם בחירת גישה (WebView/Canvas/Custom), יישום עורך עם סוגי צמתים בסיסיים (הודעה, קלט, תנאי, פעולה, GoTo), מערכת אימות גרף עם שמירה אוטומטית של סצנריו, אינטגרציה עם השרת (REST/GraphQL) לייצוא וייבוא, בדיקות על מכשירים אמיתיים (15+ דגמים), תיעוד משתמש ותמיכה ל-3 חודשים עם מפגשי הדרכה. אנו מבטיחים עמידה בלוחות זמנים ואיכות. צור קשר להערכת פרויקט — ננתח דרישות ונציע פתרון אופטימלי תוך 1-2 ימים.
לוחות זמנים ועלות פיתוח
משבוע אחד (MVP על WebView) עד 3 חודשים (בונה מקורי מלא עם צמתים מותאמים אישית, גרסאות, בדיקת דיאלוגים). עלות אופיינית: MVP מ-$5,000, פתרון מלא מ-$30,000. בקש ייעוץ — נעזור לך לבחור את הגישה הנכונה.