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

Thomas Steiner

חוויית המפתחים

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

סביבות פיתוח משולבות (IDE) של מיני אפליקציות

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

• כלי פיתוח ל-WeChat
• כלים למפתחים ב-Alipay
• כלים למפתחים ב-Baidu
• כלי פיתוח ל-ByteDance
• כלים למפתחים בנושא אפליקציות מהירות

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

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

• הדגמה של WeChat
• הדגמה של Alipay
• הדגמה של Baidu
• הדגמה של ByteDance
• הדגמה מהירה של האפליקציה

תהליך הפיתוח

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

כמו שאפשר לראות, הרכיבים הבסיסיים של כל סביבות הפיתוח המשולבות (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. ניתן לך לדמות מכשירי Android ו-iOS שונים, לשנות את קנה המידה ואת כיוון המכשיר, אבל גם לדמות מצבי רשת שונים, לחץ זיכרון, אירוע של קריאת ברקוד, סיום לא צפוי ומצב כהה.

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

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

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

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

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

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

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

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

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

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

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

הדמיה של API

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

אישורים

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