כל מתכנת פרונט אנד צעיר ואפילו מנוסה חוטא במטודולוגיות עבודה של המקצוע, אני לא מדבר על שיטות עבודה של הצוות, אני מדבר על זה שעכשיו קיבלתם פיצ'יר ועכשיו אתם צריכים לשנס מותניים ולהתחיל לעשות את הקסם שרק אתם יכולים לעשות, אז איך תתחילו?. תתפלאו שבהרבה מהמקרים מתכנתים פשוט מתחילים לכתוב קוד לפי העיצוב שהם קיבלו או אילו הסברים בטיקט.. 😣
קודם כל מתכננים
אז בואו נעצור שניה, ניקח 2 נשימות עמוקות, ונרגיע את הדחף הזה של להתחיל לרשום קוד, ונתארגן על הרשימה הבאה:
- אפיון
- FIGMA
- דף ועט
- ג'ירה (או טרלו או כל ארגון משימות אחר שתבחרו)
קודם כל לקרוא את האפיון ולהבין מה בדיוק צריך לעשות ובמקביל לעבור על הFIGMA ולוודא שיש קשר בין העיצובים לבין האפיון, תתפלאו לגלות שמעצבים גם מפספסים דברים באפיון, וזה קריטי לתפוס את זה בשלבים הללו. כמו כן קחו דף ועט, לפחות לי זה עוזר מאד, ותציירו ותכתבו משהו שיכול להיות כמו תרשים זרימה שיכול להציג את שלבי העבודה שלכם כגון: איזה דטה אתם מצפים לקבל, באיזה שלב יתקבל הדטה, אילו פונקציות אתם צריכים בשביל לאבד דטה מסויים, אילו רכיבים אתם צריכים ואיזה רכיב מקבל מידע או מחזיר מידע, מהם האקשנים של היוזר ומה כל אקשן עושה וכו.. אל תחששו אם בהתחלה הציור שלכם נראה כמו קשקוש, תוכלו אחרי זה לקחת עמוד חדש, ועוד אחד ועוד אחד (5 לפחות)…
בונים שרטוט מסודר עם FIGMA (או כלי אחר שיודע לבנות diagrams)
בסופו של דבר אתם תקבלו איזה תרשים שנראה לכם הגיוני, בדרך כלל התרשים לוקח לי משהו כמו שעתיים עד שלוש שעות, תלוי בגודל הפיצ'ר כמובן. לאחר מכן אני פותח את FIGMA ובונה תרשים מסודר שמציין את כל מה שרשמתי בצורה מסודרת וברורה שעושה שכל:
- תרשים המחבר בין האפליקציה למסך שלכם, למשל בדוגמה שלי כאן, יש בלון שהיוזר מתחבר ואז מגיע למסך של רשימת השליחויות שיש לשליח לעשות, הפיצ'יר הוא טאב חדש במסך הזה, שמציג את הרשימה של המשלוחים על גבי מסלול במפת הנסיעה. מה שנראה בתרשים map view
- ברגע שהמשתמש ניגש לטאב הזה, יש מידע שצריך להגיע, לכן ציינתי בטבלה את כל הקריאות שיש לעשות על מנת להציג את המידע, שימו לב שכבר אפשר לראות כי קריאות מסוימות התבצעו כבר מסך הראשוני כל מה שנותר לי זה רק לקחת את המידע הזמין לנו, ולעשות בו שימוש מבלי קריאה נוספת. כמו כן יש קריאות שכן אצטרך לעשות במסך הזה אך הן רק בפעולות אקטיביות של היוזר, ועדיין אציין אותם ברשימה שאדע איזה API נדרשים לפיצ'ר כולו. כמו כן יש לציין את המבנה של המידע שאני רוצה , תוך כדאי הסתכלות על המבנה הקיים, אם המבנה לא מספיק טוב עבורכם, יהיה שווה לנסות לדבר עם הבק אם ניתן לעשות שיפורים וגם להוסיף מידע נוסף שחסר לכם (אם חסר) בתצורה הנוחה ביותר לכם.
- הצגת הרכיבים גזורים מתוך בעיצוב עצמו. חשוב שתדעו לעבוד עם FIGMA (רוב עובדים עם FIGMA בחברות בארץ), ואם לא עם FIGMA אז עם כלים אחרים מאד דומים. בכל מקרה יהיה על זה פוסט נפרד, כרגע מה שחשוב זה לחלק את העיצוב לרכיבים, ולבנות רשימה נוספת של קומפוננטות נחוצות ולראות מה קיים ומה לא קיים, מה שלא קיים, יש לוודא שאכן לא קיים ברגע שתשבו עם אחד המפתחים הבכירים ככל הנראה תגלו שרוב הרכיבים קיימים, ואם אינם קיימים יהיה עליכם לייצר אותם תוך התחשבות שיהיו גנריים ושימושיים לשאר מפתחים כמובן.
- רשימה של סרוויסים שיהיה עליכם לעשות, מנו את הפונקציות הנחוצות לכם ותיאור קצר מה כל פונקציה אמורה לעשות.
- רשמו הערות בתוך השרטוט שלכם, ככל הנראה זה יהיה לעצמכם, הערות לאיש צוות אחר עדיף על חומרים שלו ולא בשרטוט שלכם.
- שכבות נוספות יכולות להיות ולתת ערך מוסף בתכנון שלכם, אני למשל אוהב להכניס שכבה של אנימציות, אם לא מספקים לי אותם מהעיצוב אני אעלה את זה וידאג לסט אנימציות שישרת את המסך הזה על מנת לתת חוויה חלקה ונעימה עבור המשתמשים.
סיימתם לתכנן! מה עכשיו?
בשעה טובה סיימתם לתכנן, יכול להיות שלקח לכם גם יום שלם, תתפלאו כמה זמן אתם הולכים לחסוך בפיתוח. אני זוכר כמה זמן לי לקח להתרגל לעבוד כך והיום אני פשוט לא יכול בלי. התכנון הזה ילווה אתכם לאורך כל העבודה על הפיצ'ר, כמו כן בחלוקה שלכם לתתי משימות (כבר רואים את זה בקלות מתוך השרטוט) הקומיטים שלכם, וגם גזירת זמני העבודה. 🙌
אבל חשוב ביותר, כל עוד אתם עובדים בצוות, ויש אנשים מנוסים יותר בפרויקט , ואתם עוד לא מכירים את כל חלקי הפרויקט, יש להתייעץ עם מתכנת בכיר, לשבת אתו 15 דקות ולבחון את התוכנית שלכם ואם יש שאלות או חששות להעלות מולו. במידה ויש הערות ממנו, רשמו הכל, וסדרו את התכנון שלכם, שלחו לו שוב, שיאשר לכם כך שאתם מגובים היטב.
עוד דבר ששווה לעשות, עכשיו בעזרת התכנון שלכם תוכלו לעדכן קצת את הטיקט שלכם, לעשות לו subtasks שיגדיר את שלבי העבודה. למשל, כל הנושא של קבלת המידע בתצורה המתאימה, הצגה של המפה (provider) והכנסת המידע אל המפה ( נקודות ציון), ייבוא כל הרכיבים הקיימים ולחבר ביניהם, יישום של רכיב חדש ועוד…
סוף סוף אפשר להתחיל לכתוב קוד! ממשיכים הלאה
הקפידו על סדר בעבודה ותכננו תמיד לפני שתכתבו קוד!. לא כל פיצ'ר או רכיב או באג ידרוש תכנון מפואר או אישור של מתכנת בכיר. עם הזמן אתם תלמדו להתנהל עם זה. בפוסט הבא נדבר על שחרור הפיצר שזהו שלב סופר חשוב בטח כשאתם מגיעים לסיום הפיצר בשניה האחרונה ועם הלשון בחוץ, חשוב מאד להקפיד על תהליך סיום משימה כי אחרת זה חוזר אליכם כמו בומרנג. וישר לאחר מכן ניגש ל IDE ונכין סביבת עבודה אולטימטיבית על מנת שהקוד שנייצר יהיה נקי ותואם את הציפיות של הארגון וכמובן נרשום קצת קוד 😻.
