כלי פיתוח למיני אפליקציה

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

כמו אפליקציות-העל, רוב סביבות הפיתוח המשולבות (IDE) זמינות רק בסינית. אתה למעשה רוצה לוודא שאתה מתקין את הגרסה הסינית ולא גרסה זמינה באנגלית (או בחו"ל), מכיוון שייתכן שהיא לא מעודכנת. אם אתם מפתחי macOS, שימו לב שלא כל סביבות הפיתוח המשולבות (IDE) חתומות, ולכן מערכת macOS מסרבת להריץ את מנהל ההתקנה. אתם יכולים באחריותכם בלבד, לעקוף את הבעיה כפי שמתואר בעזרה של Apple.

פרויקטים של מיני אפליקציות לתחילת הדרך

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

תהליך הפיתוח

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

חלון של אפליקציית WeChat DevTools שמוצגים בו סימולטור, עורך קוד וכלי לניפוי באגים.
כלי הפיתוח ל-WeChat עם סימולטור, עורך קוד וכלי לניפוי באגים.
חלון של אפליקציית Alipay DevTools עם עורך קוד, סימולטור וכלי לניפוי באגים.
Alipay DevTools עם עורך קוד, סימולטור וניפוי באגים.
חלון האפליקציה Baidu DevTools ובו סימולטור, עורך קוד וכלי לניפוי באגים.
Baidu DevTools עם סימולטור, עורך קוד וכלי לניפוי באגים.
חלון האפליקציה של ByteDance DevTools ובו סימולטור, עורך קוד וכלי לניפוי באגים.
ByteDance DevTools עם סימולטור, עורך קוד וכלי לניפוי באגים.
חלון של האפליקציה Quick App DevTools ובו עורך קוד, סימולטור וכלי לניפוי באגים.
כלים לפיתוח אפליקציות מהירים עם עורך קוד, סימולטור וניפוי באגים.

כמו שאפשר לראות, הרכיבים הבסיסיים של כל סביבות הפיתוח המשולבות (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 של הסימולטור בחלונית &#39;רכיבים&#39; בכלי הפיתוח ל-Chrome.
בדיקה של Baidu DevTools עם כלי הפיתוח ל-Chrome חושפת שהסימולטור מומש כתג <webview> של Electron.

סימולטור ובדיקה וניפוי באגים במכשירים אמיתיים

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

מספיק שהסימולטור המובנה מספיק כדי להבין איך האפליקציה מתנהגת, אבל אין תחליף לבדיקה במכשיר, כמו באפליקציות אינטרנט רגילות. כדי לבדוק גרסת מיני-אפליקציה שנמצאת בפיתוח, אתם יכולים פשוט לסרוק קוד QR. לדוגמה, ב-ByteDance DevTools, סריקה של קוד QR שנוצר באופן דינמי על ידי סביבת הפיתוח המשולבת (IDE) עם מכשיר אמיתי, מובילה לגרסה של המיני אפליקציה שמתארחת בענן, ואז אפשר לבדוק אותה מיד במכשיר. הדרך שבה זה עובד ב-ByteDance היא שכתובת ה-URL שמאחורי קוד ה-QR (דוגמה) מפנה לדף מתארח (דוגמה), שמכיל קישורים עם סכמות URI מיוחדות כמו למשל snssdk1128://, כדי להציג תצוגה מקדימה של גרסת המיני של האפליקציה באפליקציות העל השונות ByteDance כמו Douyin או Toutiao (הנה דוגמה). ספקים אחרים של אפליקציות-על לא עוברים דרך דף ביניים, אלא פותחים את התצוגה המקדימה ישירות.

כלי הפיתוח ByteDance DevTools מציג קוד QR שהמשתמש יכול לסרוק באמצעות אפליקציית Douyin כדי לראות את המיני האפליקציה הנוכחית במכשיר שלו.
כלי הפיתוח ByteDance DevTools מציג קוד QR שהמשתמש יכול לסרוק באמצעות אפליקציית Douyin לבדיקה מיידית במכשיר.
דף נחיתה ביניים לצפייה בתצוגה מקדימה של אפליקציית מיני של ByteDance בכמה מאפליקציות-העל של החברה, שנפתח בדפדפן רגיל במחשב כדי לבצע הנדסה הפוכה של התהליך.
דף נחיתה מסוג ביניים ByteDance לתצוגה מקדימה של גרסת מיני-אפליקציה (נפתח בדפדפן במחשב כדי להציג את התהליך).

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

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

כלי לניפוי באגים

ניפוי באגים ברכיבים

חוויית ניפוי הבאגים באפליקציות המיני מוכרות מאוד לכל מי שעבד אי פעם עם כלי הפיתוח ל-Chrome. עם זאת, יש כמה הבדלים חשובים שמתאימים את תהליך העבודה למיני אפליקציות. במקום חלונית הרכיבים של כלי הפיתוח ל-Chrome, לסביבות הפיתוח המשולבות (IDE) של מיני אפליקציות יש חלונית מותאמת אישית שתומכת בניב ה-HTML הספציפי שלהם. לדוגמה, במקרה של WeChat, הלוח נקרא Wxml, ראשי תיבות של WeiXin Markup Language. בכלי הפיתוח ב-Baidu הוא נקרא Swen Element. הכלי ByteDance DevTools קורא לפונקציה Bxml. מערכת Alipay נותנת לו שם AXML, ו-Quick App מפנה לחלונית פשוט בתור UX. אתעמק בשפות הסימון האלה מאוחר יותר.

בדיקת תמונה באמצעות החלונית &#39;Wxml&#39; של WeChat DevTools. הוא מראה שהתג שבשימוש הוא תג &#39;image&#39;.
בדיקת רכיב <image> באמצעות כלי הפיתוח של WeChat.

רכיבים מותאמים אישית במבט על

בדיקת ה-WebView במכשיר אמיתי דרך about://inspect/#devices חושפת את העובדה ש-WeChat DevTools הסתירה את האמת בכוונה. כאשר WeChat DevTools הציג <image>, הדבר שאני רואה בפועל הוא רכיב מותאם אישית שנקרא <wx-image> עם <div> בתור הצאצא היחיד שלו. מעניין לציין שהרכיב המותאם אישית הזה לא משתמש ב-Shadow DOM. מידע נוסף על הרכיבים האלה זמין בהמשך.

מתבצעת בדיקה של אפליקציית מיני של WeChat שפועלת במכשיר אמיתי באמצעות כלי הפיתוח ל-Chrome. כשדווח לנו מ-WeChat DevTools אני מביט בתג &#39;image&#39;, כלי הפיתוח ל-Chrome חושף שאני אכן מתעסק עם אלמנט מותאם אישית &#39;wx-image&#39;.
בדיקה של אלמנט <image> באמצעות WeChat DevTools חושפת שהוא למעשה רכיב מותאם אישית <wx-image>.

ניפוי באגים ב-CSS

הבדל נוסף הוא יחידת האורך החדשה rpx לפיקסל רספונסיבי וניבים שונים של CSS (מידע נוסף על יחידה זו מאוחר יותר). WeChat DevTools משתמש ביחידות אורך CSS נפרדות למכשיר כדי להפוך את הפיתוח לאינטואיטיבי לגדלים שונים של מכשירים.

בדיקת תצוגה עם מרווח פנימי למעלה ולמטה של &#39;200rpx&#39; ב-WeChat DevTools.
בדיקת המרווח הפנימי שצוין בפיקסלים רספונסיביים (200rpx 0) של תצוגה באמצעות WeChat DevTools.

בדיקת ביצועים

הביצועים בולטים במיוחד באפליקציות מיני, כך שלא מפתיע שב-WeChat DevTools ובכלי פיתוח נוספים יש כלי ביקורת משולב בהשראת Lighthouse. תחומי המיקוד בביקורות הם 'סה"כ', 'ביצועים', 'ניסיון' ו'שיטות עבודה מומלצות'. אפשר להתאים אישית את התצוגה של סביבת הפיתוח המשולבת (IDE). בצילום המסך שלמטה הסתרתי את עורך הקוד באופן זמני, כדי שיהיה בו יותר מקום במסך.

הפעלת ביקורת ביצועים באמצעות כלי הביקורת המובנה. הציונים מציגים את הציון &#39;סה&quot;כ&#39;, &#39;ביצועים&#39;, &#39;חוויית&#39; ו&#39;שיטה מומלצת&#39; – כל אחת מ-100 נקודות מתוך 100.
כלי הביקורת המובנה ב-WeChat DevTools מציג סה"כ, ביצועים, חוויית שימוש ושיטות מומלצות.

הדמיה של API

במקום לדרוש מהמפתח להגדיר שירות נפרד, הדמיה של תגובות API היא חלק ישיר מ-WeChat DevTools. באמצעות ממשק קל לשימוש, המפתח יכול להגדיר נקודות קצה ל-API ואת התגובות לדוגמה הרצויות.

הגדרת תגובה מדומה לנקודת קצה ל-API ב-WeChat DevTools.
תכונת החיקוי של תגובות ה-API המשולבת של WeChat DevTools.

אישורים

המאמר הזה נכתב על ידי Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kant וקיית' גו.