חוויית המפתחים
עכשיו, אחרי שסגרתי את כל סוגי האפליקציות, כל אחת מהן, אני רוצה להתמקד בחוויית המפתח בפלטפורמות השונות של אפליקציות-העל. פיתוח מיני של אפליקציות בכל הפלטפורמות מתרחש בסביבות פיתוח משולבות (IDE) שמספקות פלטפורמות סופר-אפליקציות בחינם. אבל אני רוצה להתמקד בארבעת הסוגים הפופולריים ביותר, ורביעית באפליקציית Quick App לצורך השוואה.
סביבות פיתוח משולבות (IDE) של מיני אפליקציות
כמו אפליקציות-העל, רוב סביבות הפיתוח המשולבות (IDE) זמינות רק בסינית. אתה למעשה רוצה לוודא שאתה מתקין את הגרסה הסינית ולא גרסה זמינה באנגלית (או בחו"ל), מכיוון שייתכן שהיא לא מעודכנת. אם אתם מפתחי macOS, שימו לב שלא כל סביבות הפיתוח המשולבות (IDE) חתומות, ולכן מערכת macOS מסרבת להריץ את מנהל ההתקנה. אתם יכולים באחריותכם בלבד, לעקוף את הבעיה כפי שמתואר בעזרה של Apple.
- כלי פיתוח ל-WeChat
- כלים למפתחים ב-Alipay
- כלים למפתחים ב-Baidu
- כלי פיתוח ל-ByteDance
- כלים למפתחים בנושא אפליקציות מהירות
פרויקטים של מיני אפליקציות לתחילת הדרך
כדי להתחיל במהירות בפיתוח של מיני אפליקציות, כל הספקים של אפליקציות-העל מציעים אפליקציות הדגמה שאפשר להוריד ולבדוק אותן באופן מיידי, ולפעמים משולבות גם באשפים 'פרויקט חדש' בסביבות הפיתוח המשולבות (IDE).
תהליך הפיתוח
אחרי שמפעילים את סביבת הפיתוח המשולבת (IDE) וטוענים או יוצרים מיני אפליקציה (דמו), השלב הראשון הוא תמיד להתחבר. בדרך כלל צריך פשוט לסרוק קוד QR באמצעות אפליקציית-העל (שכבר התחברת בה) שנוצרה על ידי סביבת הפיתוח המשולבת (IDE). לעיתים רחוקות מאוד צריך להזין סיסמה. לאחר ההתחברות, סביבת הפיתוח המשולבת (IDE) מזהה את הזהות שלכם ומאפשרת לכם להתחיל לתכנת, לנפות באגים, לבדוק ולשלוח את האפליקציה לבדיקה. בהמשך מוצגים צילומי מסך של 5 סביבות הפיתוח המשולבות (IDE) שהוזכרו בפסקה שלמעלה.
![חלון של אפליקציית WeChat DevTools שמוצגים בו סימולטור, עורך קוד וכלי לניפוי באגים.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/wechat-devtools-applicati-e7bdd4cc5967b.png?authuser=5&hl=he)
![חלון של אפליקציית Alipay DevTools עם עורך קוד, סימולטור וכלי לניפוי באגים.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/alipay-devtools-applicati-6f47f9ec8e0f1.png?authuser=5&hl=he)
![חלון האפליקציה Baidu DevTools ובו סימולטור, עורך קוד וכלי לניפוי באגים.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/baidu-devtools-applicatio-f4c5cc799b3e1.png?authuser=5&hl=he)
![חלון האפליקציה של ByteDance DevTools ובו סימולטור, עורך קוד וכלי לניפוי באגים.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/bytedance-devtools-applic-1f60b6ef6e2c7.png?authuser=5&hl=he)
![חלון של האפליקציה Quick App DevTools ובו עורך קוד, סימולטור וכלי לניפוי באגים.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/quick-app-devtools-applic-5d28bf9a61062.png?authuser=5&hl=he)
כמו שאפשר לראות, הרכיבים הבסיסיים של כל סביבות הפיתוח המשולבות (IDE) דומים מאוד. תמיד יש לכם עורך קוד על סמך מונקו Editor – אותו פרויקט שגם הוא מפעיל את VS Code. בכל סביבות הפיתוח המשולבות (IDE) יש כלי לניפוי באגים שמבוסס על ממשק החזית של Chrome DevTools עם שינויים מסוימים. בהמשך תוכלו להיעזר בו יותר במאמר כלי לניפוי באגים. סביבות הפיתוח המשולבות (IDE) per se מיושמות כאפליקציות NW.js או כאפליקציות Electron, והסימולטורים בסביבות הפיתוח המשולבות (IDE) מממשים כתג NW.js <webview>
או תג Elctron <webview>
, שמבוסס על תג Chromium <webview>
. אם אתם מתעניינים ברכיבי ה-IDE הפנימיים, לעיתים קרובות ניתן לבדוק אותם באמצעות כלי הפיתוח ל-Chrome באמצעות מקשי הקיצור Control+Alt+I (או Command+Option+I ב-Mac).
![כלי הפיתוח ל-Chrome משמשים לבדיקת כלי הפיתוח של Baidu, שבו מוצגים תג ה-WebView של הסימולטור בחלונית 'רכיבים' בכלי הפיתוח ל-Chrome.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/chrome-devtools-used-ins-107c9e255b2fa.png?authuser=5&hl=he)
<webview>
של Electron.
סימולטור ובדיקה וניפוי באגים במכשירים אמיתיים
הסימולטור דומה למה שאפשר לדעת ממצב המכשיר של כלי הפיתוח ל-Chrome. ניתן לך לדמות מכשירי Android ו-iOS שונים, לשנות את קנה המידה ואת כיוון המכשיר, אבל גם לדמות מצבי רשת שונים, לחץ זיכרון, אירוע של קריאת ברקוד, סיום לא צפוי ומצב כהה.
מספיק שהסימולטור המובנה מספיק כדי להבין איך האפליקציה מתנהגת, אבל אין תחליף לבדיקה במכשיר, כמו באפליקציות אינטרנט רגילות. כדי לבדוק גרסת מיני-אפליקציה שנמצאת בפיתוח,
אתם יכולים פשוט לסרוק קוד QR. לדוגמה, ב-ByteDance DevTools, סריקה של קוד QR שנוצר באופן דינמי על ידי סביבת הפיתוח המשולבת (IDE)
עם מכשיר אמיתי, מובילה לגרסה של המיני אפליקציה שמתארחת בענן, ואז אפשר לבדוק אותה מיד במכשיר. הדרך שבה זה עובד ב-ByteDance היא שכתובת ה-URL שמאחורי קוד ה-QR (דוגמה) מפנה לדף מתארח (דוגמה), שמכיל קישורים עם סכמות URI מיוחדות כמו למשל snssdk1128://
, כדי להציג תצוגה מקדימה של גרסת המיני של האפליקציה באפליקציות העל השונות ByteDance כמו Douyin או Toutiao (הנה דוגמה).
ספקים אחרים של אפליקציות-על לא עוברים דרך דף ביניים, אלא פותחים את התצוגה המקדימה ישירות.
![כלי הפיתוח ByteDance DevTools מציג קוד QR שהמשתמש יכול לסרוק באמצעות אפליקציית Douyin כדי לראות את המיני האפליקציה הנוכחית במכשיר שלו.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/bytedance-devtools-showin-5971d90f52171.png?authuser=5&hl=he)
![דף נחיתה ביניים לצפייה בתצוגה מקדימה של אפליקציית מיני של ByteDance בכמה מאפליקציות-העל של החברה, שנפתח בדפדפן רגיל במחשב כדי לבצע הנדסה הפוכה של התהליך.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/intermediate-landing-page-406369c8a848.png?authuser=5&hl=he)
תכונה מושכת עוד יותר היא ניפוי באגים מרחוק בתצוגה המקדימה מבוססת-ענן. אחרי שסורקים פשוט קוד QR מיוחד שנוצר ב-IDE, גרסת המיני של האפליקציה נפתחת במכשיר הפיזי, וחלון כלי הפיתוח ל-Chrome פועל במחשב לניפוי באגים מרחוק.
![טלפון נייד שבו פועלת מיני אפליקציה, וחלקים מממשק המשתמש מודגשים על ידי הכלי לניפוי באגים של ByteDance DevTools שפועל במחשב נייד שבודק אותו.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/a-mobile-phone-running-m-042b833648b9.png?authuser=5&hl=he)
כלי לניפוי באגים
ניפוי באגים ברכיבים
חוויית ניפוי הבאגים באפליקציות המיני מוכרות מאוד לכל מי שעבד אי פעם עם כלי הפיתוח ל-Chrome. עם זאת, יש כמה הבדלים חשובים שמתאימים את תהליך העבודה למיני אפליקציות. במקום חלונית הרכיבים של כלי הפיתוח ל-Chrome, לסביבות הפיתוח המשולבות (IDE) של מיני אפליקציות יש חלונית מותאמת אישית שתומכת בניב ה-HTML הספציפי שלהם. לדוגמה, במקרה של WeChat, הלוח נקרא Wxml, ראשי תיבות של WeiXin Markup Language. בכלי הפיתוח ב-Baidu הוא נקרא Swen Element. הכלי ByteDance DevTools קורא לפונקציה Bxml. מערכת Alipay נותנת לו שם AXML, ו-Quick App מפנה לחלונית פשוט בתור UX. אתעמק בשפות הסימון האלה מאוחר יותר.
![בדיקת תמונה באמצעות החלונית 'Wxml' של WeChat DevTools. הוא מראה שהתג שבשימוש הוא תג 'image'.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/inspecting-image-wechat-d732811586a65.png?authuser=5&hl=he)
<image>
באמצעות כלי הפיתוח של WeChat.
רכיבים מותאמים אישית במבט על
בדיקת ה-WebView במכשיר אמיתי דרך about://inspect/#devices חושפת את העובדה ש-WeChat DevTools הסתירה את האמת בכוונה. כאשר WeChat DevTools הציג <image>
, הדבר שאני רואה בפועל הוא רכיב מותאם אישית שנקרא <wx-image>
עם <div>
בתור הצאצא היחיד שלו. מעניין לציין שהרכיב המותאם אישית הזה לא משתמש ב-Shadow DOM. מידע נוסף על הרכיבים האלה זמין בהמשך.
![מתבצעת בדיקה של אפליקציית מיני של WeChat שפועלת במכשיר אמיתי באמצעות כלי הפיתוח ל-Chrome. כשדווח לנו מ-WeChat DevTools אני מביט בתג 'image', כלי הפיתוח ל-Chrome חושף שאני אכן מתעסק עם אלמנט מותאם אישית 'wx-image'.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/inspecting-wechat-mini-a-54fc65cc5ce63.png?authuser=5&hl=he)
<image>
באמצעות WeChat DevTools חושפת שהוא למעשה רכיב מותאם אישית <wx-image>
.
ניפוי באגים ב-CSS
הבדל נוסף הוא יחידת האורך החדשה rpx
לפיקסל רספונסיבי וניבים שונים של CSS
(מידע נוסף על יחידה זו מאוחר יותר). WeChat DevTools משתמש ביחידות אורך CSS נפרדות למכשיר כדי להפוך את הפיתוח לאינטואיטיבי לגדלים שונים של מכשירים.
![בדיקת תצוגה עם מרווח פנימי למעלה ולמטה של '200rpx' ב-WeChat DevTools.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/inspecting-view-a-speci-d17a746cb7bfb.png?authuser=5&hl=he)
200rpx 0
) של תצוגה באמצעות WeChat DevTools.
בדיקת ביצועים
הביצועים בולטים במיוחד באפליקציות מיני, כך שלא מפתיע שב-WeChat DevTools ובכלי פיתוח נוספים יש כלי ביקורת משולב בהשראת Lighthouse. תחומי המיקוד בביקורות הם 'סה"כ', 'ביצועים', 'ניסיון' ו'שיטות עבודה מומלצות'. אפשר להתאים אישית את התצוגה של סביבת הפיתוח המשולבת (IDE). בצילום המסך שלמטה הסתרתי את עורך הקוד באופן זמני, כדי שיהיה בו יותר מקום במסך.
![הפעלת ביקורת ביצועים באמצעות כלי הביקורת המובנה. הציונים מציגים את הציון 'סה"כ', 'ביצועים', 'חוויית' ו'שיטה מומלצת' – כל אחת מ-100 נקודות מתוך 100.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/running-performance-audi-fa75ebecfd4e2.png?authuser=5&hl=he)
הדמיה של API
במקום לדרוש מהמפתח להגדיר שירות נפרד, הדמיה של תגובות API היא חלק ישיר מ-WeChat DevTools. באמצעות ממשק קל לשימוש, המפתח יכול להגדיר נקודות קצה ל-API ואת התגובות לדוגמה הרצויות.
![הגדרת תגובה מדומה לנקודת קצה ל-API ב-WeChat DevTools.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/setting-a-mock-response-b73d071a1206d.png?authuser=5&hl=he)
אישורים
המאמר הזה נכתב על ידי Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kant וקיית' גו.