הגרף החי הוא הרגע שבו המוצר מוכיח את עצמו

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

קודם כול: כמה נתונים באמת צריך להציג?

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

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

הצינור מהחיישן למסך

לפני שנקודה מצוירת, היא צריכה להגיע — וקצב ההגעה תלוי בערוץ. בחיבור ישיר למוצר, ה-Notifications של הבלוטות' מכתיבים את התקצוב: כמה מדידות נכנסות בכל חבילה ומה קורה כשהקצב עולה — יסודות שפירטנו במאמר על איך אפליקציה מתחברת למוצר בבלוטות'. במוצרים לבישים, שבהם הסנכרון עצמו הוא אתגר של סוללה, הגרף החי צריך להסתדר עם נתונים שמגיעים במנות — ראו את המאמר על אפליקציה למוצר לביש. וכשהנתונים מגיעים דרך הענן לדשבורד ווב, שאלת ערוץ ההעברה נפתחת מחדש — את ההשוואה המלאה עשינו במאמר על נתונים בזמן אמת בדשבורד; כאן נתמקד בצד התצוגה שבאפליקציה.

רינדור: למה גרף תוקע אפליקציות — ואיך נמנעים

רוב ספריות הגרפים נבנו לתרשימים סטטיים: כל נקודה חדשה גוררת ציור מחדש של הגרף כולו, וזה עובד — עד שמנסים עשרות עדכונים בשנייה. גרף חי מקצועי דורש גישה אחרת: ציור ישיר על Canvas או ברינדור מואץ-GPU, עדכון של הקטע שהשתנה בלבד, ומבני נתונים מעגליים שלא מקצים זיכרון בכל דגימה. חשוב באותה מידה: עיבוד הנתונים — פענוח, סינון, דילול — חייב לרוץ מחוץ ל-Thread של הממשק, כדי שגלילה ולחיצות יישארו חלקות גם בשיא הזרימה. זה בדיוק סוג הדרישות ששווה לוודא שספריית הגרפים והפלטפורמה שבחרתם עומדות בו לפני שכותבים שורת קוד — עוד סיבה לבחון היטב את ההחלטה שתיארנו במאמר על פיתוח אפליקציה נייטיב או קרוס-פלטפורם.

ה-UX של גרף מדידות: הפרטים הקטנים שעושים מוצר

  • השהיה וחזרה. משתמש שנוגע בגרף רוצה לעצור ולהתבונן — הזרימה ממשיכה ברקע וכפתור אחד מחזיר ל"עכשיו".
  • צירים יציבים. ציר Y שקופץ עם כל ערך חדש הופך את הגרף לבלתי קריא; עדיפים גבולות קבועים או התרחבות הדרגתית.
  • ספי התראה על הגרף. קו אדום של ערך גבולי נותן להקשר משמעות — מדידה בלי הקשר היא סתם מספר.
  • מצב מסך מלא. גרף מדידות מרוויח מכל פיקסל — סיבוב המכשיר למצב אופקי צריך לפתוח תצוגה מורחבת עם יותר פירוט וטווח זמן רחב יותר.
  • מעבר חלק להיסטוריה. גלילה אחורה בזמן צריכה למשוך נתונים שמורים באותו מסך, בלי "מסך היסטוריה" נפרד ומנותק.

גרף טוב הוא פיצ'ר מכירתי

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

רוצים להפוך רעיון למוצר? צרו קשר עם צוות פרוג'קטס האוס בע"מ – טלפון: 054-8936922 | דוא"ל: info@projects-house.com – ונשמח ללוות אתכם משלב הרעיון ועד המדף.