09:29 תנ״ך בשעון – חלק א׳ סיפור משתמש, wireframe וPOC
כאבא לארבעה ילדים קטנים אני מוצא את עצמי לעתים קרובות מקריב את הפלאפון שלי לילד התורן ובכך אני קונה לעצמי כמה דקות של שקט (והמלצות תוכן גרועות ביוטיוב). בזמנים כאלה כשאנחנו מחוץ לבית אני מנסה לבדר את עצמי בשעון החכם של חברת אפל. באחד הניסיונות אפילו גיליתי שאפשר לפתוח דפדפן בשעון, תנסו לבקש: "Siri what is docker?" (רק די קשה לשלוט בניווט מכיוון שהכל צריך להתנהל דרך שאלות לסירי). מכיוון שכך החלטתי לפתח לעצמי אפליקציה קטנה עם תוכן שיהיה זמין לי לעתות מצוקה. חשבתי על תוכן מתאים ומאחר שאני משתדל ללמוד פרק תנ״ך יומי במסלול של 929 בחרתי להכניס את התנ״ך לשעון החכם, ובכך לחבר את האמונה שלי באלוהים עם האמונה שלי באקוסיסטם של אפל.
אז איך בונים אפליקציה לשעון (או אפליקציה בכלל)? בסדרת הפוסטים 09:29 נדגים איך עושים את זה נכון (או לפחות איך אני חושב שעושים את זה נכון).
שלב ראשון – סיפור משתמש
לאחר שיש לנו רקע ומוטיבציה לרעיון (אפליקציית תוכן קטנה לשעון חכם לשימוש כשהטלפון תפוס) הגיע הזמן לתרגם את הרעיון לפעולות שהישויות השונות באפליקציה יכולות לעשות. לדוגמה באפליקציה פשוטה של מכירת מוצרי יד שנייה יהיה לנו שלוש ישויות שלכל אחד מהם יש מטרת שימוש שונה בפלטפורמה ושימושים שונים:
- מוכר – מעוניין למכור מוצרים בפלטפורמה.
- קונה – מעוניין לקנות מוצרים.
- מנהל – אחראי על הפלטפורמה ועוקב אחריי הביצועים שלה.
כאשר לכל אחד מהם יש דרישות לשימושים שונים, לדוגמא:
מוכר
- אני רוצה להעלות מוצר למכירה.
- אני רוצה לשנות את המחיר של המוצר.
- אני מעוניין לקבל אימייל כאשר המוצר נמכר.
קונה
- אני רוצה לחפש מוצרים על פי טקסט.
- אני רוצה למיין מוצרים לפי המחיר.
- אני רוצה לקנות מוצר.
מנהל
- אני רוצה לקבל דיווח כמה משתמשים יש באפליקציה.
- אני מעוניין לראות כמה עסקאות התבצעו ביום/שבוע/חודש אחרון בפלטפורמה.
- אני מעוניין לקבל מייל על כל עסקה חשודה שמתבצעת.
למזלנו האפליקציה שלנו הרבה יותר פשוטה (באופן כללי ההמלצה בכל סטארטאפ זה לצמצם את הרעיון לרעיון המינימלי שמביא ערך ללקוח – ואז לצמצם אותו עוד יותר) כך שבמקרה שלנו יש רק סוג אחד של משתמש המעוניין לעשות את הדברים הבאים:
- אני מעוניין לבחור פרק בתנ״ך ע״י בחירה של קבוצת ספרים (תורה/נביאים/כתובים) ספר מתוך הקבוצה (בראשית/שמות/ויקרא/במדבר/דברים) ואז לבחור פרק מתוך הספר.
- אני מעוניין לקרוא את הפרק על המסך.
- כשהפרק מוצג על המסך אני רוצה שיהיה לי כפתור מעבר ל:
- פרק הבא
- פרק קודם
- תפריט ניווט ראשוני
- אני מעוניין שיהיה לי אפשרות לעבור לפרק התנ״ך היומי מהתפריט הראשי.
סיימנו לכתוב את הUser Stories? זה הזמן לwireframe.
שלב שני – שרטוט ממשק פונקציונלי
בשלב זה שאנחנו כבר יודעים מה האפליקציה צריכה לעשות אפשר לשרטט בעזרת תוכנה גרפית (גם פאואר פוינט עובד) עיצוב פשוט שייתן לנו רעיון כללי לאיך האפליקציה תראה באופן שיממש את סיפורי המשתמש שכתבנו. זה השלב בו נכנסים אנשיי הUI/UX לפעולה ומשרטטים ממשק ראשוני כאשר הדגש בשלב זה הוא על הפונקציונליות ולא על העיצוב.
השרטוט של המסכים השונים עוזר לנו לראות איך אנחנו ממשים את כל הדרישות, לחשוב על איך עובד הניווט באפליקציה והאם אנחנו מפספסים כמה דברים קטנים וחשובים.
שלב שלישי POC*
Prove Of Concept – חלק מהסטראטפים המפורסמים בתחילת המאה העשרים ואחת התפרסמו בכך שהם הצלחיחו לעשות אקזיט על סמך מוצר POC בלבד וללא שפיתחו מערכת אמיתית שעומדת מאחוריי המוצר. גישה זו קרובה בהשקפתה לגישת Fake it till you make it בגישה זו נותנים דגש על הקלות שהפיתרון נותן למשתמש הסופי מבלי לקחת קשה את גודל הפיתוח הדרוש בכדי להגיע לתוצאה הסופית.
קורנליוס אלגברה השני התפרסם בכך שהצליח למכור אפליקציית תרגום שירת זבובים לסינית מדוברת ע״י כתיבת 10 שורות קוד בלבד ששלחו מייל למשורר סיני לא מוצלח במיוחד שתרגם כל שיר לכך שהוא עדיין לא פתח תיק עוסק מורשה או דרישה שונה להעלאת שכר – אך מכיוון שאף אחד מהמשקיעים לא הבין סינית קורנליוס שלשל לכיסו סכום נאה רגע לפניי משבר הטק הגדול של 2045.
מדריך ההייטקיסט לגלקסיה, מהדורה 3.1453, שנת הוצאה 4032
אז אחריי שהבנו מה בדיוק אנחנו רוצים לפתח, עכשיו זה הזמן לבדוק שהרעיון באמת יכול לעבוד מכל הבחינות:
- טכנולוגית – ניתן לממש את הרעיון בטכנולוגיה הקיימת
- מוצרית – המוצר נותן לנו את הערך הנוסף שציפינו לו.
כאשר בשלב הזה אנחנו מתמקדים בגרעין של המוצר, לדוגמה אם היינו מפתחים את אפליקציית מכירת מוצרי יד שנייה אותה תיארנו בשלב הראשון אזי היינו מפתחים POC בו המוכר רק יכול להעלות מוצר למכירה, הקונה יכול רק לקנות את המוצר – ואנחנו מוודאים שיש לנו טכנולוגיה שמישה המבצעת את האינטראקציה בין המוכר לקונה.
במקרה שלנו נרצה לוודא את הדברים הבאים:
1. שאנחנו מצליחים להציג פרק מתוך התנ״ך על השעון.
2. שאנחנו מצליחים לבצע ניווט בסיסי בין הפרקים השונים.
3. שנוח לנו להשתמש באפליקציה – או בעברית פשוטה שבאמת יש למוצר ערך עבורי ואני יכול לדמיין את עצמי יושב חמש דקות וקורא פרק תנ״ך מתוך השעון.
Fun With Swift
בשלב הראשון של התהליך הורדתי מהאתר של 929 את עשרת הפרקים הראשונים של ספר ויקרא (הפרקים היומיים של השבועיים האחרונים) פתחתי פרויקט של xcode עם אפליקציה של שעון חכם בלבד ולאחר שסידרתי את החשבון, החתימות (גיליתי שעדיין יש לי הרשאת אדמין עבור חברה שפיתחתי עבורה אפליקציה לפניי חמש שנים…) והחיבור של השעון למחשב (צריך שהטלפון המוצמד לשעון יהיה מחובר למחשב) הצלחתי להריץ את האפליקציה ההתחלתית (hello world) על השעון ועכשיו זה רק אני והswift שלי.
מכיוון שהידע שלי בswift לא גדול במיוחד (במאמר ממוסגר אציין שהפעם האחרונה שכתבתי קוד בשפה היתה באיזור 2015 כשכתבתי אפליקציית הצפנה בתור תרגיל מסכם בקורס באוניברסיטה, והחוויה לא זכורה לי כמשהו כיף במיוחד), חשבתי לחפף ולהשתמש בreact-native. אך למזלי התברר לי שעל אף שיש דפדפן (סמוי) בשעון, לא מותקן מנוע של javascirpt על השעון ועל כן האפשרות הזאת ירדה מהפרק. כתבתי למזלי מכיוון שנוכחתי לדעת שהשפה עשתה קפיצה גדולה לכיוון הדיקלארטיבי באופן שממש מזכיר כתיבה בsvelete ובאופן כללי את ההשפעה של React על כל כתיבת UI. כך שעל ידי שימוש במדריך זה (שאמנם נכתב לתכנות בטלפון אבל השפה עובדת אותו הדבר עבור השעון) הצלחתי לכתוב באופן די מהיר את ה אפליקציה הבסיסית.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import SwiftUI struct ContentView: View { @State private var viewText = "" @State private var pos = 0 var body: some View { ScrollView { ScrollViewReader { value in Button("Back") { loadChapter(x: pos - 1) }.id(0) if pos != 0 { Text(viewText).multilineTextAlignment(.trailing).lineLimit(nil) } Button("Next") { loadChapter(x: pos + 1) value.scrollTo(0) } } } } func loadChapter(x: Int) { if x == 0 { pos = 0 viewText = "" return } if let filepath = Bundle.main.path(forResource: "\(x).txt", ofType: "txt") { do { viewText = try String(contentsOfFile: filepath) pos = x } catch { print("Error in pos: \(x)") } } } } |
במקרה שלי הספיקו 37 שורות קוד בלבד בשביל לממש את הPOC. נעבור בקצרה על הקוד, אנחנו ממשים struct של ContentView היורש מView כאשר הדבר העיקרי זה שאנחנו צריכים לממש משתנה בשם body שמחזיר את הקוד של הUI. בנוסף לכך הוספתי שני משתני מצב (State – משתנים שהbody מרנדר את עצמו מחדש במידה ומשנים אותם):
viewText – מחזיק את הטקסט אותו אני מציגים (הפסוקים של הפרק).
pos – משתנה מספרי המחזיק את מספר הפרק אותו אנחנו רוצים להציג.
בתוך body אני יוצר View נגלל – מה שמאפשר להכניס תוכן שיותר ארוך מהמסך של השעון, ולאחר מכן אני מוסיף כפתור "Back" כאשר מיד אחריו בשורה 10 מופיע הקוד שרץ במידה ולוחצים על הכפתור. לאחר מכן בשורה 13 אני מציג את הטקסט – שימו לב שהטקסט מוצג אך ורק במידה ואנחנו לא בpos==0. ובסוף אני מוסיף כפתור "Next" שעובר לפרק הבא וגולל את הView חזרה לכפתור של ה"Back" (שסומן בשורה 11 כid=0).
חוץ מזה יש לנו פונקציה loadChapter שמקבלת את הפרק אליו אנחנו רוצים לעבור והיא טוענת את את הטקסט שבקובץ אל viewText ומעדכנת את הpos – מה שגורם באופן עקיף לרנדור מחדש של המסך. ויש לנו POC שרץ בסימולטור!
מההתנסות הקצרה שלי נוכחתי לדעת שאכן זה נחמד לקרוא פרק תנ״ך מהשעון (באופן אישי אני מעדיף את ספר שופטים מאשר ויקרא – אבל זה סתם בגלל שאני חובב אקשן…) ושכתיבה של קוד בswift הפכה להיות פשוטה ונוחה.
בשבוע הבא…
בפוסט הבא נראה כיצד אנחנו מורידים את כל המידע הנדרש מהאינטרנט על ידי שימוש בקריאות מהאתר של 929, איך מתרגמים מספר לאותיות, כיצד בונים מבנה נתונים התומך בדרישות של האפליקציה וכיצד בניתי את האפליקציה הסופית.
כתיבת תגובה