חוויית המפתח
אחרי שהסברתי על מיני-אפליקציות כשלעצמן, אני רוצה להתמקד בחוויית המפתחים בפלטפורמות השונות של הסופר-אפליקציות. פיתוח מיני-אפליקציות בכל הפלטפורמות מתבצע בסביבות פיתוח משולבות (IDE) שפלטפורמות הסופר-אפליקציות מספקות בחינם. יש עוד אפליקציות, אבל אני רוצה להתמקד בארבע הפופולריות ביותר, ובאפליקציה חמישית – Quick App – לצורך השוואה.
סביבות פיתוח משולבות (IDE) לאפליקציות מיני
בדומה לאפליקציות העל, רוב סביבות הפיתוח המשולבות זמינות רק בסינית. חשוב לוודא שאתם מתקינים את הגרסה הסינית ולא גרסה באנגלית (או גרסה מחו"ל) שזמינה לפעמים, כי יכול להיות שהיא לא עדכנית. מפתחים ב-macOS צריכים לדעת שלא כל סביבות הפיתוח המשולבות (IDE) חתומות, ולכן מערכת macOS מסרבת להפעיל את קובץ ההתקנה. באחריותכם הבלעדית, אתם יכולים לעקוף את זה כפי שמתואר במאמר העזרה של אפל.
- כלי הפיתוח של WeChat
- כלי פיתוח של Alipay
- כלי הפיתוח של Baidu
- כלי הפיתוח של ByteDance
- כלי פיתוח לאפליקציות מהירות
תבניות בסיס לפרויקטים של מיני-אפליקציות
כדי להתחיל במהירות בפיתוח מיני-אפליקציות, כל ספקי האפליקציות הראשיות מציעים אפליקציות הדגמה שאפשר להוריד ולבדוק באופן מיידי, ולפעמים הן גם משולבות באשפי 'פרויקט חדש' של סביבות הפיתוח המשולבות השונות.
תהליך הפיתוח
אחרי שמפעילים את סביבת הפיתוח המשולבת וטוענים או יוצרים מיני-אפליקציה (הדגמה), השלב הראשון הוא תמיד להתחבר. בדרך כלל צריך רק לסרוק קוד QR באמצעות האפליקציה המרכזית (שכבר מחוברים אליה) שנוצרת על ידי סביבת הפיתוח המשולבת. רק לעיתים רחוקות תצטרכו להזין סיסמה. אחרי שמתחברים, סביבת הפיתוח המשולבת יודעת מה הזהות שלכם ומאפשרת לכם להתחיל לתכנת, לנפות באגים, לבדוק ולשלוח את האפליקציה לבדיקה. בהמשך מוצגים צילומי מסך של חמש סביבות הפיתוח המשולבות שמוזכרות בפסקה שלמעלה.
כמו שאפשר לראות, הרכיבים הבסיסיים של כל סביבות הפיתוח המשולבות דומים מאוד. תמיד יש לכם עורך קוד שמבוסס על Monaco Editor, אותו פרויקט שמפעיל גם את VS Code. בכל סביבות הפיתוח המשולבות יש כלי לניפוי באגים שמבוסס על הקצה הקדמי של כלי הפיתוח ל-Chrome עם כמה שינויים, ובהמשך נסביר עליהם (ראו Debugger). סביבות הפיתוח המשולבות כשלעצמן מיושמות כאפליקציות NW.js או כאפליקציות Electron, והסימולטורים בסביבות הפיתוח המשולבות מיושמים כתג NW.js <webview> או כתג Electron <webview>, שבתורם מבוססים על תג Chromium <webview>. אם אתם מעוניינים בפרטים הפנימיים של ה-IDE, לרוב תוכלו פשוט לבדוק אותם באמצעות כלי פיתוח ל-Chrome עם מקש הקיצור Control+Alt+I (או Command+Option+I ב-Mac).
<webview> של Electron.
בדיקה וניפוי באגים בסימולטור ובמכשיר אמיתי
הסימולטור דומה למה שאתם מכירים ממצב המכשיר בכלי הפיתוח ל-Chrome. אפשר לדמות מכשירי Android ו-iOS שונים, לשנות את קנה המידה ואת כיוון המכשיר, אבל גם לדמות מצבי רשת שונים, עומס על הזיכרון, אירוע של קריאת ברקוד, סיום לא צפוי ומצב כהה.
הסימולטור המובנה מספיק כדי לקבל מושג כללי לגבי התנהגות האפליקציה, אבל בדיקה במכשיר, כמו באפליקציות אינטרנט רגילות, היא הכרחית. כדי לבדוק מיני-אפליקציה שנמצאת בפיתוח, פשוט סורקים קוד QR. לדוגמה, ב-ByteDance DevTools, סריקה של קוד QR שנוצר באופן דינמי על ידי ה-IDE באמצעות מכשיר אמיתי מובילה לגרסה של המיני-אפליקציה שמתארחת בענן, שאפשר לבדוק אותה מיד במכשיר. כך זה עובד ב-ByteDance: כתובת ה-URL שמאחורי קוד ה-QR (example) מפנה אוטומטית לדף מארח (example), שמכיל קישורים עם סכימות URI מיוחדות, כמו snssdk1128://, כדי להציג תצוגה מקדימה של המיני-אפליקציה באפליקציות-על שונות של ByteDance, כמו Douyin או Toutiao (כאן אפשר לראות דוגמה).
ספקי אפליקציות-על אחרים לא עוברים דרך דף ביניים, אלא פותחים את התצוגה המקדימה ישירות.
תכונה משכנעת עוד יותר היא ניפוי באגים מרחוק בתצוגה מקדימה מבוססת-ענן. אחרי סריקה פשוטה של קוד QR מיוחד שנוצר על ידי סביבת פיתוח משולבת (IDE) של Likewise, המיני אפליקציה נפתחת במכשיר הפיזי, עם חלון של כלי פיתוח ל-Chrome שפועל במחשב לניפוי באגים מרחוק.
כלי לניפוי באגים
ניפוי באגים ברכיבים
חוויית ניפוי הבאגים באפליקציות מיני דומה מאוד לניפוי באגים בכלי הפיתוח של Chrome. עם זאת, יש כמה הבדלים חשובים שמותאמים לתהליך העבודה באפליקציות מיני. במקום החלונית Elements בכלי הפיתוח ל-Chrome, סביבות פיתוח משולבות (IDE) של מיני-אפליקציות כוללות חלונית מותאמת אישית שמותאמת לניב הספציפי של HTML. לדוגמה, במקרה של WeChat, החלונית נקראת Wxml, שזה קיצור של WeiXin Markup Language. בכלי הפיתוח של Baidu, הוא נקרא Swan Element. בכלי הפיתוח של ByteDance, השם של זה הוא Bxml. ב-Alipay, השם הוא AXML, וב-Quick App, השם של החלונית הוא פשוט UX. אני אתעמק בשפות התיוג האלה בהמשך.
<image> באמצעות כלי הפיתוח של WeChat.
רכיבים בהתאמה אישית מתחת לפני השטח
בדיקה של WebView במכשיר אמיתי דרך about://inspect/#devices
מראה שכלי הפיתוח של WeChat הסתירו בכוונה את האמת. במקום <image> שמוצג בכלי הפיתוח של WeChat, מה שאני רואה בפועל הוא רכיב מותאם אישית שנקרא <wx-image> עם <div> כרכיב הצאצא היחיד שלו. חשוב לציין שהרכיב המותאם אישית הזה לא משתמש ב-Shadow DOM. מידע נוסף על הרכיבים האלה מופיע בהמשך.
<image> באמצעות כלי הפיתוח של WeChat מגלה שהוא בעצם רכיב מותאם אישית <wx-image>.
ניפוי באגים ב-CSS
הבדל נוסף הוא יחידת האורך החדשה rpx לפיקסל רספונסיבי בניבים השונים של CSS (מידע נוסף על היחידה הזו מופיע בהמשך). כדי להפוך את הפיתוח למכשירים בגדלים שונים לאינטואיטיבי יותר, כלי הפיתוח של WeChat משתמשים ביחידות אורך של CSS שאינן תלויות במכשיר.
200rpx 0) של תצוגה באמצעות כלי הפיתוח של WeChat.
ביקורת ביצועים
הביצועים הם הדבר הכי חשוב באפליקציות מיני, ולכן לא מפתיע שכלי הפיתוח של WeChat וכמה כלי פיתוח אחרים כוללים כלי ביקורת משולב בהשראת Lighthouse. תחומי ההתמקדות של הביקורות הם: סה"כ, ביצועים, חוויה ושיטות מומלצות. אפשר להתאים אישית את התצוגה של סביבת הפיתוח המשולבת. בצילום המסך שלמטה הסתרתי באופן זמני את עורך הקוד כדי שיהיה יותר מקום במסך לכלי הביקורת.
API mocking
במקום לדרוש מהמפתח להגדיר שירות נפרד, תגובות מדומה של API הן חלק ישיר מכלי הפיתוח של WeChat. באמצעות ממשק קל לשימוש, המפתח יכול להגדיר נקודות קצה של API ותגובות מדומה רצויות.
תודות
המאמר הזה נבדק על ידי ג'ו מדלי, קייסי בסקס, מיליקה מיחייליה, אלן קנט וקית' גו.