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

Thomas Steiner

تجربة المطوّرين

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

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

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

• أدوات مطوري البرامج في WeChat
• أدوات مطوري البرامج في Alipay
• أدوات مطوري البرامج في Baidu
• أدوات مطوري البرامج في ByteDance
• أدوات مطوري التطبيقات السريعة

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

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

• العرض التوضيحي لتطبيق WeChat
• العرض التوضيحي من Alipay
• عرض Baidu التجريبي
• العرض التوضيحي لـ ByteDance
• عرض توضيحي سريع للتطبيق

تدفق التطوير

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

كما ترى، تتشابه المكونات الأساسية لجميع برامج 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).

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

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

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

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

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

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

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

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

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

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

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

تدقيق الأداء

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

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

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

شكر وتقدير

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