טופס טרייד אין

טוב, אז אני עובד על טופס טרייד אין כבר הרבה זמן, והגיע הזמן שאני אכתוב על זה.

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

הטרייד אין

הטרייד אין אצלנו באפל׳ה הולך לפי כל מיני פרמטרים, 6 ליתר דיוק, סדרה, שנה, מודל, מעבד, זכרון ואחסון. אבל כל פרמטר משפיע על הפרמטרים האחרים, לדוגמה: לבחירת הפרמטר סדרה, יש השפעה על איזה שנים יוצגו לבחירה – בחירה בסדרה מקבוק אייר, תוביל לאפשרות בחירה לשנים 2020, 2022, 2023. הדבר הזה, מוביל לכך שיש יותר מ-200 אפשרויות בטופס טרייד אין, וזה מה שהופך אותו למסובך, ומעניין.

מעבר לששת הפרמטרים הנ״ל, יש עוד שדות ואפשרויות בחירה, שלא משפיעים מאוד על הטופס, אבל בהחלט מוסיפים מורכבות. יש פרטים אישיים כמו שם, טלפון וכו׳, ויש שדות כמו האם יש נזק למחשב, או האם יש מטען או לא. והסיבה המרכזית שבגינה הפרטים האלו מוסיפים מורכבות היא שהם לא דומים לשדות של הפרמטרים של הטרייד אין. באופן נורא פשוט, שדה של פרמטר צריך להיות משורשר לעץ החלטות וצריך להיות בעל מזהה ייחודי, שדה פשוט, הוא פשוט שדה, יש לו כותרת, הסבר, תוית (label) ושדה הקלט עצמו (input) ועוד כמה מאפיינים שיקלו על הלוגיקה הסקריפטית. הקושי הוא ששני סוגי השדות האלו צריכים להיות מוצגים באופן זהה, להיות מרונדרים בצורה דומה ולהישמר בדאטה בייס באותו פורמט.

השאיפה לשלמות

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

השלבים שבהם עבדתי

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

1. איזה מחשב זה?
2. באיזה שנה הוא יוצר?
3. איזה דגם זה?
4. מה המעבד?
5. כמה זכרון?
6. כמה אחסון?

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

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

נשמע התאבדותי ברמות וע"ס הסדיזם

מאור, מתכנת ותיק

שאר השלבים בקצרה היו:

1. איסוף המידע על המחשבים ועל עץ האפשרויות לתוך טבלה
2. להבין איך אני הופך את הטבלה הדו-מימדית הזו למערך חד-מימדי שמכיל סט-שדות (fieldset)
3. להבין איך כל בחירה גורמת לאפשרות הרלוונטית הבאה להיפתח
4. בנייה של אלגוריתם רקורסיבי שעובר על התאים בטבלה וקובע מי ההורה שלהם
5. המרת המערך הגולמי של השדה – הורה לכדי סט-שדות קוהרנטי שיודע לקפוץ מאפשרות לאפשרות
6. הוספת השדות הפשוטים
7. יצירת מקור אמת אחד
8. הוספת אפשרות הזנת תוכן של כותרת והסבר לכל שלב
9. איחוד התוכן המוזן והשדות
10. שמירה בדאטה בייס בצורה אחידה לפי חלקי טופס
11. יצירת פורמט סט-שדות אחיד בין שדות הפרמטרים ושדות הפשוטים
12. רינדור השדות לכדי HTML קוהרנטי ומלא
13. כתיבת סקריפט קצר כדי לקשור את הקצוות
14. הוספת סגנון ואנימציות

אני כן עדיין צריך להוסיף (ואולי אערוך את זה בהמשך)

1. קריאה לחלקי הטופס בשלבים כדי למנוע טעינה איטית של הדף
2. שמירת ההתקדמות של המשתמש – אבל לא בטוח שאוסיף
3. נגישות
4. ולידציה לשדות

היה כיף

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

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

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

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

הערות

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