أدوات مطوري البرامج في التطبيق المصغّر

الآن وبعد أن تناولت التطبيقات الصغيرة في حد ذاتها، أرغب في التركيز على تجربة المطوّرين في العديد من الأنظمة الأساسية للتطبيقات المتميزة. يتم تطوير التطبيقات المصغر على جميع الأنظمة الأساسية في برامج IDE التي يتم توفيرها مجانًا من خلال الأنظمة الأساسية للتطبيقات المتميزة. بينما هناك المزيد، أريد التركيز على التطبيقات الأربعة الأكثر شيوعًا، وخامسًا لتطبيق سريع للمقارنة.

برامج IDE للتطبيقات الصغيرة

مثل التطبيقات المتميزة، لا تتوفر غالبية برامج IDE إلا باللغة الصينية. أنت بحاجة إلى التأكد من تثبيت الإصدار الصيني وعدم توفُّر إصدار إنجليزي (أو خارج البلاد) أحيانًا، لأنه قد لا يكون مُحدّثًا. إذا كنت أحد مطوّري برامج macOS، يُرجى العلم بأنّه لم يتم توقيع جميع برامج IDE، أي أنّ نظام التشغيل macOS يرفض تشغيل أداة التثبيت. يمكنك على مسؤوليتك الخاصة استبعاد هذا الإجراء كما هو موضّح في مركز مساعدة Apple.

مشاريع بدء التطبيقات المصغّرة

للبدء بسرعة في تطوير التطبيقات المصغَّرة، يوفّر جميع موفّري التطبيقات المتميزة تطبيقات تجريبية يمكن تنزيلها واختبارها على الفور، والتي يتم دمجها أيضًا في بعض الأحيان في معالجات "مشروع جديد" لمختلف برامج IDE.

تدفق التطوير

بعد إطلاق بيئة التطوير المتكاملة (IDE) وتحميل أو إنشاء تطبيق صغير (إصدار تجريبي)، تكون الخطوة الأولى دائمًا هي تسجيل الدخول. ما عليك سوى مسح رمز الاستجابة السريعة ضوئيًا باستخدام التطبيق الرائع (الذي سجّلت الدخول إليه) الذي تم إنشاؤه من خلال بيئة التطوير المتكاملة (IDE). في حالات نادرة جدًا، يجب إدخال كلمة مرور. بمجرد تسجيل الدخول، يعرف IDE هويتك ويتيح لك بدء البرمجة وتصحيح الأخطاء والاختبار وإرسال التطبيق للمراجعة. في ما يلي، يمكنك رؤية لقطات شاشة لبيئات IDE الخمسة المذكورة في الفقرة أعلاه.

نافذة تطبيق WeChat DevTools تعرض المحاكي وأداة تعديل الرموز وبرنامج تصحيح الأخطاء.
"أدوات مطوري البرامج في WeChat" تتضمّن المحاكي وأداة تعديل الرموز وبرنامج تصحيح الأخطاء.
نافذة تطبيق Alipay DevTools تعرض أداة تعديل الرموز والمحاكي وبرنامج تصحيح الأخطاء.
أدوات مطوّري البرامج على Alipay من خلال أداة تعديل الرموز والمحاكي وبرنامج تصحيح الأخطاء
نافذة تطبيق Baidu DevTools تعرض المحاكي وأداة تعديل الرموز وبرنامج تصحيح الأخطاء.
أدوات مطوّري البرامج في Baidu مع المحاكي وأداة تعديل الرموز وبرنامج تصحيح الأخطاء
نافذة تطبيق ByteDance DevTools تعرض المحاكي وأداة تعديل الرموز وبرنامج تصحيح الأخطاء
أدوات مطوّري البرامج في ByteDance DevTools، مع المحاكي وأداة تعديل الرموز وبرنامج تصحيح الأخطاء.
نافذة تطبيق Quick App DevTools تعرض أداة تعديل الرموز والمحاكي وبرنامج تصحيح الأخطاء.
أدوات مطوّري التطبيقات السريعة باستخدام أداة تعديل الرموز والمحاكي وبرنامج تصحيح الأخطاء

كما ترى، تتشابه المكونات الأساسية لجميع برامج IDE إلى حد كبير. لديك دائمًا أداة تعديل رموز تستند إلى Monaco Editor، وهو المشروع نفسه الذي يفعِّل أيضًا VS Code. في جميع بيئات IDE، يتوفّر برنامج تصحيح أخطاء يستند إلى الواجهة الأمامية لأدوات مطوّري البرامج في Chrome مع إجراء بعض التعديلات، وسنوضّح المزيد عن هذه التعديلات في وقت لاحق (يمكنك الاطّلاع على برنامج تصحيح الأخطاء). يتم تنفيذ بيئات IDE في إما من خلال NW.js أو Electron، ويتم التعرّف على المحاكيات في IDE على شكل علامة <webview> NW.js <webview> أو علامة Electron <webview> التي تستند بدورها إلى علامة <webview> <webview> الخاصة بـ Chromium. إذا كنت مهتمًا بالوظائف الداخلية لبيئات IDE، يمكنك في كثير من الأحيان فحصها ببساطة باستخدام "أدوات مطوري البرامج في Chrome" باستخدام اختصار لوحة المفاتيح Control+Alt+I (أو Command+Option+I في نظام التشغيل Mac).

تُستخدَم &quot;أدوات مطوري البرامج في Chrome&quot; لفحص أدوات مطوّري البرامج في Baidu، وهي تُظهر علامة WebView للمحاكي في لوحة &quot;عناصر أدوات مطوري البرامج في Chrome&quot;.
يكشف فحص "أدوات مطوري البرامج على Baidu" باستخدام "أدوات مطوري البرامج في Chrome" أنّ المحاكي أصبح بمثابة علامة <webview> من Electron.

المحاكي واختبار الأجهزة الحقيقية وتصحيح الأخطاء

وهذا المحاكي مشابه لما قد تعرفه من خلال وضع الجهاز في "أدوات مطوري البرامج في Chrome". يمكنك محاكاة أجهزة Android وiOS المختلفة، وتغيير المقياس واتجاه الجهاز، وكذلك محاكاة حالات الشبكة المختلفة وضغط الذاكرة وحدث قراءة الرمز الشريطي والإنهاء غير المتوقع والوضع المظلم.

وعلى الرغم من أن المحاكي المضمَّن يكفي للحصول على معلومات تقريبية عن سلوك التطبيق، لا يمكن الاستغناء عن الاختبار على الجهاز، كما هو الحال مع تطبيقات الويب العادية. إن اختبار تطبيق مصغر قيد التطوير هو مجرد مسح ضوئي لرمز الاستجابة السريعة. على سبيل المثال، في ByteDance DevTool، إنّ مسح رمز الاستجابة السريعة الذي تم إنشاؤه ديناميكيًا بواسطة بيئة التطوير المتكاملة (IDE) باستخدام جهاز حقيقي يؤدي إلى إصدار مُستضاف على السحابة الإلكترونية من التطبيق المصغّر الذي يمكن اختباره على الفور على الجهاز. تعمل هذه الطريقة مع ByteDance من خلال أنّ عنوان URL المضمّن في رمز الاستجابة السريعة (مثال) يعيد التوجيه إلى صفحة مستضافة (مثال)، والتي تحتوي على روابط ذات مخططات URI خاصة مثل snssdk1128://، لمعاينة التطبيق المصغَّر على مختلف تطبيقات ByteDance، مثل Douyin أو Toutiao (إليك مثال). ولا يمر موفِّرو التطبيقات المتميزون الآخرون عبر صفحة وسيطة، ولكن يفتحون المعاينة مباشرةً.

أدوات مطوري البرامج في ByteDance تعرض رمز استجابة سريعة يمكن للمستخدم مسحه ضوئيًا باستخدام تطبيق Douyin للاطّلاع على التطبيق المصغّر الحالي على جهازه
تعرض أدوات مطوّري البرامج في ByteDance رمز استجابة سريعة يمكن للمستخدم مسحه ضوئيًا باستخدام تطبيق Douyin لإجراء اختبار فوري على الجهاز.
صفحة مقصودة وسيطة لمعاينة تطبيق صغير من ByteDance في العديد من التطبيقات المتميزة للشركة، مفتوحة على متصفّح عادي متوافق مع أجهزة سطح المكتب لإجراء هندسة عكسية للعملية
الصفحة المقصودة وسيطة بايت من نوعه لمعاينة تطبيق مصغّر (يتم فتحها على متصفّح متوافق مع أجهزة الكمبيوتر المكتبي لعرض مسار الرحلة).

وهناك ميزة أكثر إقناعًا وهي تصحيح الأخطاء عن بُعد للمعاينة المستندة إلى السحابة الإلكترونية. بعد المسح الضوئي لرمز استجابة سريعة خاصّ ينشئه برنامج IDE، يتم فتح التطبيق المصغَّر على الجهاز الفعلي مع تشغيل نافذة Chrome DevTools على جهاز الكمبيوتر لإجراء تصحيح الأخطاء عن بُعد.

هاتف جوّال يشغِّل تطبيقًا صغيرًا ويظهر على أجزاء من واجهة المستخدم تم تمييزها من خلال برنامج تصحيح الأخطاء في ByteDance DevTool يعمل على كمبيوتر محمول يفحصه
يتيح هذا الإجراء لاسلكيًا تصحيح الأخطاء في تطبيق صغير على جهاز حقيقي باستخدام "أدوات مطوري البرامج في ByteDance".

برنامج تصحيح الأخطاء

تصحيح أخطاء العناصر

إنّ تجربة تصحيح أخطاء التطبيقات المصغّرة معروفة جدًا لأي شخص سبق له العمل باستخدام "أدوات مطوري البرامج في Chrome". ومع ذلك، هناك بعض الاختلافات المهمة التي تجعل سير العمل مخصّصًا للتطبيقات الصغيرة. بدلاً من لوحة العناصر في "أدوات مطوري البرامج في Chrome"، تحتوي بيئات IDE للتطبيقات المصغّرة على لوحة مخصصة مصممة حسب لهجة HTML الخاصة بها. على سبيل المثال، في حالة WeChat، يُطلق على اللوحة اسم Wxml الذي يعني لغة ترميز WeiXin. في Baidu DevTool، يُطلق عليه اسم Swan Element. يُطلق على ByteDance DevTool اسم Bxml. تسمّى Alipay اسم AXML، ويشير التطبيق السريع إلى اللوحة ببساطة باسم UX. سأتحدّث بالتفصيل عن لغات الترميز هذه لاحقًا

فحص صورة باستخدام لوحة Wxml في &quot;أدوات مطوري البرامج في WeChat&quot;. يوضِّح ذلك أنّ العلامة المستخدَمة هي علامة `image`.
فحص عنصر <image> باستخدام "أدوات مطوري البرامج في WeChat".

توفير عناصر مخصصة

يكشف فحص WebView على جهاز حقيقي من خلال about://inspect/#devices أنّ "أدوات مطوري البرامج في WeChat" تخفي الحقيقة عمدًا. في حين عرضت أدوات مطوري البرامج في WeChat علامة <image>، فإن الشيء الفعلي الذي أطّلع عليه هو عنصر مخصّص يُعرف باسم <wx-image> مع <div> كعنصر فرعي وحيد له. من المثير للاهتمام ملاحظة أن هذا العنصر المخصّص لا يستخدم Shadow DOM. المزيد عن هذه المكونات لاحقًا.

فحص تطبيق WeChat المصغّر الذي يتم تشغيله على جهاز حقيقي باستخدام &quot;أدوات مطوري البرامج في Chrome&quot;. عندما أبلغت &quot;أدوات مطوري البرامج في WeChat&quot; أنّني أتحقّق من علامة &quot;صورة&quot;، تكشف &quot;أدوات مطوري البرامج في Chrome&quot; أنّني أتعامل مع عنصر مخصّص &quot;wx-image&quot;.
يكشف فحص عنصر <image> باستخدام "أدوات مطوري البرامج في WeChat" أنه في الواقع عنصر <wx-image> مخصّص.

تصحيح الأخطاء في CSS

يتمثل الاختلاف الآخر في وحدة الطول الجديدة rpx لوحدات البكسل المتجاوبة باللهجات المختلفة للغة CSS (مزيد من المعلومات حول هذه الوحدة لاحقًا). تستخدم "أدوات مطوري البرامج في WeChat" وحدات طول CSS مستقلة عن الجهاز لتسهيل عملية التطوير لمختلف أحجام الأجهزة.

فحص عرض باستخدام مساحة متروكة محدَّدة علوية وسفلية لـ &quot;200rpx&quot; في &quot;أدوات مطوري البرامج في WeChat&quot;
فحص المساحة المتروكة المحدّدة بوحدات البكسل المتجاوبة (200rpx 0) لعرض معيّن باستخدام "أدوات مطوري البرامج في WeChat".

تدقيق الأداء

يُعدّ الأداء في مقدمة التطبيقات المصغّرة، لذا فليس من المستغرب أن تتضمّن "أدوات مطوري البرامج في WeChat" وبعض أدوات مطوّري البرامج الأخرى أداة تدقيق مستوحاة من Lighthouse. إن المجالات التي تركز عليها عمليات التدقيق هي الإجمالي والأداء والخبرة وأفضل الممارسات. يمكن تخصيص عرض IDE. في لقطة الشاشة أدناه، أخفيت محرر الرموز مؤقتًا للحصول على المزيد من خصائص الشاشة لأداة التدقيق.

إجراء تدقيق للأداء باستخدام أداة التدقيق المضمّنة تظهر النتائج &quot;الإجمالي&quot; و&quot;الأداء&quot; و&quot;الخبرة&quot; و&quot;أفضل الممارسات&quot;، حيث يتم عرض كل 100 نقطة من أصل 100 نقطة.
أداة التدقيق المضمّنة في "أدوات مطوري البرامج في WeChat" تعرض الإجمالي والأداء والتجربة وأفضل الممارسات.

محاكاة واجهة برمجة التطبيقات

بدلاً من مطالبة المطوّر بإعداد خدمة منفصلة، يُعدّ محاكاة الردود من واجهة برمجة التطبيقات جزءًا مباشرةً من "أدوات مطوري البرامج في WeChat". عبر واجهة سهلة الاستخدام، يمكن للمطور إعداد نقاط نهاية واجهة برمجة التطبيقات والاستجابات الوهمية المطلوبة.

إعداد استجابة وهمية لنقطة نهاية واجهة برمجة التطبيقات في &quot;أدوات مطوري البرامج في WeChat&quot;
ميزة نموذج الاستجابة المُدمَجة في واجهة برمجة التطبيقات في WeChat DevTools

شكر وتقدير

راجع هذه المقالة جو ميدلي وكايس باسك وميلييكا ميهاجليا وآلان كينت وكيث غو.