برنامه کوچک DevTools

Thomas Steiner

تجربه توسعه دهنده

اکنون که برنامه‌های کوچک را به خودی خود پوشش داده‌ام، می‌خواهم روی تجربه توسعه‌دهندگان برای پلتفرم‌های مختلف برنامه‌های فوق‌العاده تمرکز کنم. توسعه اپلیکیشن مینی در تمامی پلتفرم ها در IDE هایی انجام می شود که به صورت رایگان توسط پلتفرم های اپلیکیشن فوق العاده ارائه می شوند. در حالی که موارد بیشتری وجود دارد، می‌خواهم روی چهار مورد از محبوب‌ترین و پنجمین برنامه Quick App برای مقایسه تمرکز کنم.

IDE برنامه های کوچک

مانند برنامه های فوق العاده، اکثر IDE ها فقط به زبان چینی در دسترس هستند. شما در واقع می خواهید مطمئن شوید که نسخه چینی را نصب کرده اید و نه یک نسخه انگلیسی (یا خارج از کشور) که گاهی اوقات موجود است، زیرا ممکن است به روز نباشد. اگر یک توسعه دهنده macOS هستید، توجه داشته باشید که همه IDE ها امضا نشده اند، به این معنی که macOS از اجرای نصب کننده امتناع می کند. شما می توانید با مسئولیت خود از این موضوع که توسط راهنمای اپل توضیح داده شده است، دور بزنید.

• ابزارهای توسعه دهنده WeChat
• Alipay DevTools
• Baidu DevTools
• ByteDance DevTools
• Quick App DevTools

پروژه های شروع برنامه های کوچک

برای شروع سریع با توسعه برنامه های کوچک، همه ارائه دهندگان برنامه های فوق العاده برنامه های آزمایشی را ارائه می دهند که می توانند بلافاصله دانلود و آزمایش شوند، و گاهی اوقات نیز در جادوگران "پروژه جدید" IDE های مختلف ادغام می شوند.

• نسخه ی نمایشی ویچت
• نسخه ی نمایشی Alipay
• نسخه ی نمایشی بایدو
• نسخه ی نمایشی ByteDance
• نسخه ی نمایشی برنامه سریع

جریان توسعه

پس از راه‌اندازی IDE و بارگیری یا ایجاد یک برنامه کوچک (دمو)، همیشه اولین گام ورود به سیستم است. معمولاً فقط باید یک کد QR را با برنامه فوق‌العاده (جایی که قبلاً وارد شده‌اید) اسکن کنید که توسط برنامه ایجاد می‌شود. IDE. به ندرت مجبور می شوید رمز عبور را وارد کنید. پس از ورود به سیستم، IDE هویت شما را می شناسد و به شما امکان می دهد برنامه نویسی، اشکال زدایی، آزمایش و ارسال برنامه خود را برای بررسی شروع کنید. در ادامه می توانید اسکرین شات هایی از پنج IDE ذکر شده در پاراگراف بالا را مشاهده کنید.

همانطور که می بینید، اجزای اساسی همه IDE ها بسیار شبیه هستند. شما همیشه یک ویرایشگر کد بر اساس ویرایشگر موناکو دارید، همان پروژه ای که VS Code را نیز تقویت می کند. در همه IDEها، یک اشکال‌زدایی مبتنی بر ابزارهای توسعه‌دهنده کروم با برخی اصلاحات وجود دارد، که در آینده بیشتر به آن‌ها می‌پردازیم (به Debugger مراجعه کنید). IDE ها به خودی خود یا به عنوان NW.js یا به عنوان برنامه های Electron پیاده سازی می شوند، شبیه سازها در IDE ها به عنوان یک برچسب <webview> NW.js یا تگ <webview> Electron ، که به نوبه خود بر اساس <webview> Chromium هستند، اجرا می شوند. برچسب زدن . اگر به داخلی‌های IDE علاقه‌مند هستید، اغلب می‌توانید آن‌ها را با ابزارهای توسعه‌دهنده Chrome با میانبر صفحه کلید Control + Alt + I (یا Command + Option + I در Mac) به سادگی بررسی کنید.

شبیه ساز و دستگاه واقعی تست و اشکال زدایی

شبیه ساز با آنچه ممکن است از حالت دستگاه Chrome DevTools بدانید قابل مقایسه است. می‌توانید دستگاه‌های مختلف Android و iOS را شبیه‌سازی کنید، مقیاس و جهت دستگاه را تغییر دهید، اما همچنین حالت‌های مختلف شبکه، فشار حافظه، رویداد خواندن بارکد، خاتمه غیرمنتظره و حالت تاریک را شبیه‌سازی کنید.

در حالی که شبیه ساز داخلی برای دریافت یک احساس خشن از نحوه عملکرد برنامه کافی است، آزمایش روی دستگاه، مانند برنامه های وب معمولی، غیر قابل تعویض است. آزمایش یک برنامه کوچک در حال توسعه فقط یک اسکن کد QR است. به عنوان مثال، در ByteDance DevTools، اسکن یک کد QR که به صورت پویا توسط IDE تولید می‌شود با یک دستگاه واقعی منجر به یک نسخه میزبانی ابری از برنامه کوچک می‌شود که می‌تواند بلافاصله روی دستگاه آزمایش شود. روشی که این کار برای ByteDance کار می‌کند به این صورت است که URL پشت کد QR ( مثال ) به یک صفحه میزبانی شده ( مثال ) هدایت می‌شود، که حاوی پیوندهایی با طرح‌های URI خاص مانند، برای مثال، snssdk1128:// ، برای پیش‌نمایش برنامه کوچک در برنامه های مختلف سوپر ByteDance مانند Douyin یا Toutiao (در اینجا یک مثال است). سایر ارائه دهندگان برنامه های فوق العاده از یک صفحه میانی عبور نمی کنند، اما پیش نمایش را مستقیماً باز می کنند.

یک ویژگی حتی متقاعد کننده تر، اشکال زدایی از راه دور پیش نمایش مبتنی بر ابر است. پس از اسکن کردن یک کد QR ویژه که به همین ترتیب IDE تولید شده است، برنامه کوچک روی دستگاه فیزیکی باز می‌شود و یک پنجره Chrome DevTools برای اشکال‌زدایی از راه دور روی رایانه اجرا می‌شود.

اشکال زدا

اشکال زدایی عناصر

تجربه اشکال‌زدایی برنامه‌های کوچک برای هر کسی که تا به حال با Chrome DevTools کار کرده است بسیار آشنا است. با این حال، تفاوت های مهمی وجود دارد که باعث می شود گردش کار متناسب با برنامه های کوچک باشد. به‌جای پانل عناصر Chrome DevTools، IDE‌های برنامه‌های کوچک دارای پانل سفارشی‌سازی شده‌ای هستند که بر اساس گویش خاص HTML آن‌ها طراحی شده است. به عنوان مثال، در مورد WeChat، پانل Wxml نامیده می شود که مخفف WeiXin Markup Language است. در Baidu DevTools، عنصر Swan نامیده می شود. 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 و برخی دیگر از DevTools یک ابزار حسابرسی یکپارچه الهام گرفته از Lighthouse داشته باشند. حوزه های تمرکز ممیزی ها عبارتند از کل، عملکرد، تجربه و بهترین عملکرد. نمای IDE را می توان سفارشی کرد. در تصویر زیر، ویرایشگر کد را به طور موقت مخفی کرده ام تا املاک بیشتری روی صفحه نمایش برای ابزار حسابرسی داشته باشم.

تمسخر API

به‌جای اینکه توسعه‌دهنده نیاز به راه‌اندازی یک سرویس جداگانه داشته باشد، پاسخ‌های تمسخر آمیز API مستقیماً بخشی از WeChat DevTools است. از طریق یک رابط کاربری آسان، توسعه‌دهنده می‌تواند نقاط پایانی API و پاسخ‌های ساختگی مورد نظر را تنظیم کند.

سپاسگزاریها

این مقاله توسط Joe Medley ، Kayce Basques ، Milica Mihajlija ، Alan Kent و Keith Gu بررسی شده است.