קוד סטארטר לפיתוח Dashboard ב React

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

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

1. אמלק

הקוד נמצא בקודסנדבוקס בקישור כאן: https://codesandbox.io/s/ecstatic-chandrasekhar-1cl0d

ואפשר לראות אותו לייב בהטמעה כאן:

2. איך זה עובד

הדשבורד כולל Redux Store ששומר את המידע ושני Widgets שיודעים להציג את המידע: אחד בצורת טבלא ואחד בצורת גרף.

המידע נשמר בתור מערך דו-מימדי כדי שיהיה קל להציג אותו. השורה הראשונה היא הכותרות ואחרי זה המידע עצמו. בשביל הדוגמא הלכתי על מדידת rpm (בקשות לדקה) לאורך זמן, כלומר אוביקט מידע שנראה כך:

  data: [
    ['time', 'rpm'],
    ['10:00', 50],
    ['10:15', 60],
    ['10:30', 50],
    ['10:45', 80],
    ['11:00', 30],
  ],

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

  widgets: new Set(['table', 'graph']),

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

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

3. הרחבות

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

אפשר להוסיף קוד צד שרת ו Middleware ששולף כל שניה את המידע המעודכן מהשרת. המידע החדש ייכנס ל Redux Store ובאופן מיידי יוצג בכל ה Widgets שעל המסך מה שיתן תחושה של עדכון חי.
אפשר (ורצוי) להוסיף קוד CSS כדי שה Widgets יהיו מסודרים יפה יותר על המסך. ההרפתקנים שביניכם יכולים לזרוק פנימה את react-dnd וכך לאפשר למשתמשים לסדר לעצמם את ה Widgets באמצעות גרירה על המסך. ולשמור את הסידור ב local storage כדי שיישאר לנו גם לפעם הבאה.
אפשר להוסיף מסך פתיחה שיציג רשימה של Dashboards שמורים במערכת. כל Dashboard יכול להקשיב לאוביקט מידע שונה ולהציג אותו באמצעות Widgets שונים. משתמשים יוכלו ליצור Dashboards חדשים או למחוק כאלה שהם כבר לא אוהבים.

רעיונות נוספים? דרישות שאתם לא בטוחים איך לממש? מוזמנים לספר ולשתף בתגובות.