تجربه توسعهدهنده
حالا که مینیاپلیکیشنها را به خودی خود پوشش دادم، میخواهم روی تجربه توسعهدهنده برای پلتفرمهای مختلف سوپراپلیکیشن تمرکز کنم. توسعه مینیاپلیکیشنها در همه پلتفرمها در IDEهایی اتفاق میافتد که به صورت رایگان توسط پلتفرمهای سوپراپلیکیشن ارائه میشوند. در حالی که تعداد بیشتری وجود دارد، میخواهم روی چهار مورد از محبوبترینها و پنجمی برای Quick App برای مقایسه تمرکز کنم.
IDE های کوچک برنامه
مانند ابر برنامهها، اکثر IDEها فقط به زبان چینی در دسترس هستند. در واقع باید مطمئن شوید که نسخه چینی را نصب میکنید و نه نسخه انگلیسی (یا نسخههای خارجی) که گاهی اوقات در دسترس هستند، زیرا ممکن است بهروز نباشند. اگر توسعهدهنده macOS هستید، توجه داشته باشید که همه IDEها امضا نشدهاند، به این معنی که macOS از اجرای نصبکننده خودداری میکند. میتوانید با مسئولیت خودتان ، همانطور که در راهنمای اپل توضیح داده شده است ، از این مشکل عبور کنید.
- ابزارهای توسعه ویچت
- ابزارهای توسعه علیپی
- ابزارهای توسعهی بایدو
- ابزارهای توسعه ByteDance
- ابزارهای توسعه سریع برنامه
پروژههای آغازگر برنامه کوچک
برای شروع سریع توسعه مینیاپلیکیشنها، همه ارائهدهندگان ابراپلیکیشن، اپلیکیشنهای آزمایشی ارائه میدهند که میتوان آنها را بلافاصله دانلود و آزمایش کرد و گاهی اوقات در ویزاردهای «پروژه جدید» IDEهای مختلف نیز ادغام میشوند.
- نسخه آزمایشی وی چت
- نسخه آزمایشی علیپی
- نسخه ی نمایشی بایدو
- نسخه آزمایشی بایتدنس
- نسخه آزمایشی سریع برنامه
جریان توسعه
پس از راهاندازی IDE و بارگذاری یا ایجاد یک مینیاپلیکیشن (دمو)، اولین قدم همیشه ورود به سیستم است. معمولاً فقط کافی است یک کد QR را با سوپراپلیکیشن (جایی که قبلاً وارد سیستم شدهاید) که توسط IDE تولید میشود، اسکن کنید. به ندرت پیش میآید که مجبور به وارد کردن رمز عبور باشید. پس از ورود به سیستم، IDE هویت شما را میداند و به شما امکان میدهد برنامهنویسی، اشکالزدایی، آزمایش و ارسال برنامه خود را برای بررسی شروع کنید. در ادامه، میتوانید تصاویری از پنج IDE ذکر شده در پاراگراف بالا را مشاهده کنید.
همانطور که میبینید، اجزای اساسی همه IDEها بسیار مشابه هستند. شما همیشه یک ویرایشگر کد بر اساس Monaco Editor دارید، همان پروژهای که VS Code را نیز پشتیبانی میکند. در همه IDEها، یک اشکالزدا بر اساس رابط کاربری Chrome DevTools با برخی تغییرات وجود دارد که بعداً در مورد آنها بیشتر صحبت خواهیم کرد (به Debugger مراجعه کنید). IDEها به خودی خود یا به صورت NW.js یا به صورت برنامههای Electron پیادهسازی میشوند، شبیهسازها در IDEها به صورت یک تگ <webview> NW.js یا تگ <webview> Electron پیادهسازی میشوند که به نوبه خود بر اساس یک تگ <webview> Chromium هستند. اگر به اجزای داخلی IDE علاقهمند هستید، اغلب میتوانید به سادگی آنها را با Chrome DevTools با میانبر صفحه کلید Control + Alt + I (یا Command + Option + I در Mac) بررسی کنید.
<webview> از Electron پیادهسازی شده است. تست و اشکالزدایی دستگاه شبیهساز و واقعی
این شبیهساز با آنچه که ممکن است از حالت دستگاه Chrome DevTools بدانید، قابل مقایسه است. شما میتوانید دستگاههای مختلف اندروید و iOS را شبیهسازی کنید، مقیاس و جهت دستگاه را تغییر دهید، و همچنین حالتهای مختلف شبکه، فشار حافظه، رویداد خواندن بارکد، خاتمه غیرمنتظره و حالت تاریک را شبیهسازی کنید.
در حالی که شبیهساز داخلی برای درک تقریبی نحوه رفتار برنامه کافی است، آزمایش روی دستگاه، مانند برنامههای وب معمولی، غیرقابل جایگزینی است. آزمایش یک برنامه کوچک در حال توسعه فقط با اسکن کد QR انجام میشود. به عنوان مثال، در ByteDance DevTools، اسکن یک کد QR که به صورت پویا توسط IDE با یک دستگاه واقعی تولید میشود، منجر به یک نسخه میزبانی شده ابری از برنامه کوچک میشود که سپس میتواند بلافاصله روی دستگاه آزمایش شود. نحوه کار این روش برای ByteDance به این صورت است که URL پشت کد QR ( مثال ) به یک صفحه میزبانی شده ( مثال ) هدایت میشود که شامل پیوندهایی با طرحهای URI خاص مانند snssdk1128:// است تا پیشنمایش برنامه کوچک را در برنامههای فوقالعاده مختلف ByteDance مانند Douyin یا Toutiao (در اینجا یک مثال است) مشاهده کنید. سایر ارائه دهندگان برنامههای فوقالعاده از طریق یک صفحه میانی نمیروند، بلکه پیشنمایش را مستقیماً باز میکنند.
یک ویژگی جذابتر، پیشنمایش مبتنی بر ابر برای اشکالزدایی از راه دور است. پس از اسکن ساده یک کد QR تولید شده توسط IDE، این مینیاپلیکیشن روی دستگاه فیزیکی باز میشود و یک پنجره Chrome DevTools برای اشکالزدایی از راه دور روی رایانه اجرا میشود.
اشکالزدا
اشکالزدایی عناصر
تجربه اشکالزدایی مینیاپلیکیشنها برای هر کسی که تا به حال با Chrome DevTools کار کرده باشد، بسیار آشنا است. با این حال، تفاوتهای مهمی وجود دارد که گردش کار را برای مینیاپلیکیشنها متناسب میکند. به جای پنل Elements در Chrome DevTools، IDEهای مینیاپلیکیشنها یک پنل سفارشی دارند که متناسب با گویش خاص HTML آنها تنظیم شده است. به عنوان مثال، در مورد WeChat، این پنل Wxml نام دارد که مخفف WeiXin Markup Language است. در Baidu DevTools، Swan Element نامیده میشود. ByteDance DevTools آن را Bxml مینامد. Alipay آن را AXML مینامد و Quick App به سادگی به عنوان UX به پنل اشاره میکند. بعداً به این زبانهای نشانهگذاری خواهم پرداخت.
<image> با استفاده از ابزارهای توسعهی WeChat. عناصر سفارشی در زیر کاپوت
بررسی WebView روی یک دستگاه واقعی از طریق about://inspect/#devices نشان میدهد که WeChat DevTools عمداً حقیقت را پنهان میکرده است. در جایی که WeChat DevTools یک <image> نشان میداد، چیزی که من به آن نگاه میکنم یک عنصر سفارشی به نام <wx-image> با یک <div> به عنوان تنها فرزند آن است. جالب است بدانید که این عنصر سفارشی از Shadow DOM استفاده نمیکند. بعداً در مورد این کامپوننتها بیشتر صحبت خواهیم کرد.
<image> با استفاده از WeChat DevTools نشان میدهد که در واقع یک عنصر سفارشی <wx-image> است.اشکالزدایی CSS
تفاوت دیگر، واحد طول جدید rpx برای پیکسلهای واکنشگرا در گویشهای مختلف CSS است ( بعداً در این بخش بیشتر توضیح داده خواهد شد). ابزارهای توسعهی WeChat از واحدهای طول CSS مستقل از دستگاه استفاده میکنند تا توسعه برای اندازههای مختلف دستگاه را شهودیتر کنند.
200rpx 0 ) یک نما با استفاده از WeChat DevTools.حسابرسی عملکرد
عملکرد برای برنامههای کوچک در اولویت و مرکز توجه است، بنابراین جای تعجب نیست که ابزارهای توسعهی WeChat و برخی دیگر از ابزارهای توسعه، یک ابزار حسابرسی الهام گرفته از Lighthouse یکپارچه دارند. حوزههای تمرکز این حسابرسیها عبارتند از مجموع، عملکرد، تجربه و بهترین شیوه. نمای IDE را میتوان سفارشی کرد. در تصویر زیر، ویرایشگر کد را موقتاً پنهان کردهام تا فضای بیشتری روی صفحه برای ابزار حسابرسی داشته باشم.
شبیهسازی API
به جای اینکه توسعهدهنده مجبور به راهاندازی یک سرویس جداگانه باشد، شبیهسازی پاسخهای API مستقیماً بخشی از ابزارهای توسعهی WeChat است. از طریق یک رابط کاربری آسان، توسعهدهنده میتواند نقاط پایانی API و پاسخهای شبیهسازی مورد نظر را راهاندازی کند.
تقدیرنامهها
این مقاله توسط جو مدلی ، کیس باسک ، میلیکا میهالیا ، آلن کنت و کیث گو بررسی شده است.