تجربة المطوّر
بعد أن تناولتُ التطبيقات المصغّرة بحد ذاتها ، أريد التركيز على تجربة المطوّر في ما يتعلّق بـ مختلف منصات التطبيقات الفائقة. يتم تطوير التطبيقات المصغّرة على جميع المنصات في بيئات تطوير متكاملة (IDE) توفّرها منصات التطبيقات الفائقة مجانًا. أريد التركيز على أربع من أكثرها شيوعًا، بالإضافة إلى خامسة لمقارنتها بتطبيق Quick App.
بيئات تطوير متكاملة للتطبيقات المصغّرة
على غرار التطبيقات الفائقة، لا تتوفّر غالبية بيئات التطوير المتكاملة إلا باللغة الصينية. عليك التأكّد من تثبيت النسخة الصينية وليس النسخة الإنجليزية (أو النسخة الأجنبية) التي تتوفّر أحيانًا، لأنّها قد لا تكون حديثة. إذا كنت مطوّرًا على نظام التشغيل macOS، يُرجى العِلم بأنّه لا يتم توقيع جميع بيئات التطوير المتكاملة، ما يعني أنّ نظام التشغيل macOS يرفض تشغيل برنامج التثبيت. يمكنك على مسؤوليتك الخاصة تجاوز هذه المشكلة كما هو موضّح في تعليمات Apple.
مشاريع المبتدئين للتطبيقات المصغّرة
للبدء بسرعة في تطوير التطبيقات المصغّرة، يقدّم جميع مزوّدي التطبيقات الفائقة تطبيقات تجريبية يمكن تنزيلها واختبارها على الفور، كما يتم أحيانًا دمجها في معالجات "مشروع جديد" في بيئات التطوير المتكاملة المختلفة.
خطوات التطوير
بعد تشغيل بيئة التطوير المتكاملة وتحميل تطبيق مصغّر (تجريبي) أو إنشائه، تكون الخطوة الأولى دائمًا هي تسجيل الدخول. ما عليك عادةً سوى مسح رمز الاستجابة السريعة ضوئيًا باستخدام التطبيق الفائق (الذي سبق لك تسجيل الدخول إليه) الذي تنشئه بيئة التطوير المتكاملة. في حالات نادرة جدًا، عليك إدخال كلمة مرور. بعد تسجيل الدخول، تعرف بيئة التطوير المتكاملة هويتك وتسمح لك ببدء البرمجة وتصحيح الأخطاء والاختبار وإرسال تطبيقك للمراجعة. في ما يلي، يمكنك الاطّلاع على لقطات شاشة لبيئات التطوير المتكاملة الخمس المذكورة في الفقرة أعلاه.
كما تلاحظ، تتشابه المكوّنات الأساسية لجميع بيئات التطوير المتكاملة إلى حد كبير. يتوفّر دائمًا محرّر رموز
يستند إلى Monaco Editor، وهو المشروع نفسه
الذي يشغّل أيضًا VS Code. في جميع بيئات التطوير المتكاملة، يتوفّر برنامج تصحيح أخطاء
يستند إلى واجهة أدوات مطوري البرامج في Chrome الأمامية مع
بعض التعديلات، وسأتناول هذه التعديلات لاحقًا (راجِع Debugger). يتم تنفيذ بيئات التطوير المتكاملة بحد ذاتها إما كتطبيقات NW.js أو كتطبيقات Electron، ويتم تنفيذ المحاكيات في بيئات التطوير المتكاملة كعلامة NW.js <webview> أو علامة Electron <webview>، اللتين تستندان بدورهما إلى علامة Chromium <webview>. إذا كنت مهتمًا بـ
الخصائص الداخلية لبيئة التطوير المتكاملة، يمكنك في أغلب الأحيان فحصها ببساطة باستخدام "أدوات مطوّري البرامج في Chrome" من خلال اختصار لوحة المفاتيح
Control+Alt+I (أو
Command+Option+I على أجهزة Mac).
<webview>.
الاختبار وتصحيح الأخطاء على المحاكي والجهاز الفعلي
يمكن مقارنة المحاكي بوضع الجهاز في "أدوات مطوّري البرامج في Chrome" . يمكنك محاكاة أجهزة Android وiOS مختلفة، وتغيير المقياس واتجاه الجهاز، بالإضافة إلى محاكاة حالات الشبكة المختلفة، والضغط على الذاكرة، وحدث قراءة الرمز الشريطي، والإنهاء غير المتوقّع، والوضع الداكن.
على الرغم من أنّ المحاكي المضمّن يكفي للحصول على فكرة تقريبية عن سلوك التطبيق، لا يمكن الاستغناء عن الاختبار على الجهاز، كما هو الحال مع تطبيقات الويب العادية. ما عليك سوى مسح رمز استجابة سريعة ضوئيًا لاختبار تطبيق مصغّر قيد التطوير. على سبيل المثال، في ByteDance DevTools، يؤدي مسح رمز الاستجابة السريعة ضوئيًا الذي يتم إنشاؤه ديناميكيًا بواسطة IDE باستخدام جهاز فعلي إلى فتح نسخة من التطبيق المصغّر مستضافة على السحابة الإلكترونية، ويمكن بعد ذلك اختبارها على الجهاز على الفور. تتم هذه العملية في ByteDance من خلال إعادة توجيه عنوان URL الذي يظهر خلف رمز الاستجابة السريعة
(مثال) إلى صفحة مستضافة
(مثال)،
تحتوي على روابط تتضمّن مخططات URI خاصة، مثل snssdk1128://، لمعاينة التطبيق المصغّر على مختلف التطبيقات الفائقة من ByteDance، مثل Douyin أو Toutiao
(إليك مثالاً).
لا يمرّ مزوّدو التطبيقات الفائقة الآخرون بصفحة وسيطة، بل يفتحون المعاينة مباشرةً.
ميزة أخرى أكثر جاذبية هي تصحيح الأخطاء عن بُعد في المعاينة المستندة إلى السحابة الإلكترونية. بعد مسح رمز استجابة سريعة خاص تم إنشاؤه أيضًا بواسطة بيئة التطوير المتكاملة، يتم فتح التطبيق المصغّر على الجهاز الفعلي، مع تشغيل نافذة "أدوات مطوّري البرامج في Chrome" على الكمبيوتر لتصحيح الأخطاء عن بُعد.
برنامج تصحيح الأخطاء
تصحيح أخطاء العناصر
تجربة تصحيح أخطاء التطبيق المصغّر مألوفة جدًا لأي مستخدم سبق له العمل مع "أدوات مطوّري البرامج في Chrome". مع ذلك، هناك بعض الاختلافات المهمة التي تجعل سير العمل مخصّصًا للتطبيقات المصغّرة. بدلاً من لوحة العناصر في "أدوات مطوّري البرامج في Chrome"، تتضمّن بيئات تطوير التطبيقات المصغّرة لوحة مخصّصة تتناسب مع لغة HTML الخاصة بها. على سبيل المثال، في الـ حالة WeChat، تُسمى اللوحة Wxml، وهي اختصار لـ WeiXin Markup Language. في Baidu DevTools، تُسمى Swan Element. في ByteDance DevTools، تُسمى it Bxml. في Alipay، تُسمى AXML، ويشير Quick App إلى اللوحة ببساطة باسم UX. سأتناول لغات الترميز هذه لاحقًا.
<image> باستخدام WeChat DevTools.
العناصر المخصّصة في الخلفية
يكشف فحص WebView على جهاز فعلي من خلال about://inspect/#devices
أنّ WeChat DevTools كانت تخفي الحقيقة عن قصد. عندما عرضت WeChat DevTools عنصر
<image>، كان العنصر الفعلي الذي أبحث عنه هو عنصر مخصّص يُسمى <wx-image> مع <div>
كعنصره الفرعي الوحيد. من المثير للاهتمام أنّ هذا العنصر المخصّص لا يستخدم
Shadow DOM. سأتناول هذه المكوّنات لاحقًا.
<image> باستخدام WeChat DevTools أنّه في الواقع عنصر مخصّص <wx-image>.
تصحيح أخطاء CSS
هناك اختلاف آخر يتمثل في وحدة الطول الجديدة rpx لوحدة البكسل المتجاوبة في مختلف لغات CSS
(سأتناول هذه الوحدة لاحقًا). تستخدم WeChat DevTools وحدات طول CSS مستقلة عن الجهاز لتسهيل عملية التطوير لأحجام الأجهزة المختلفة.
200rpx 0) لعرض باستخدام WeChat DevTools.
التدقيق في الأداء
يُعدّ الأداء من أهم جوانب التطبيقات المصغّرة، لذا ليس من المستغرب أنّ WeChat DevTools وبعض أدوات مطوري البرامج الأخرى تتضمّن أداة تدقيق متكاملة مستوحاة من Lighthouse. تشمل مجالات التركيز في عمليات التدقيق: الإجمالي والأداء والتجربة وأفضل الممارسات. يمكن تخصيص طريقة عرض بيئة التطوير المتكاملة. في لقطة الشاشة أدناه، أخفيتُ مؤقتًا أداة تعديل الرموز للحصول على مساحة أكبر على الشاشة لأداة التدقيق.
محاكاة واجهة برمجة التطبيقات
بدلاً من مطالبة المطوّر بإعداد خدمة منفصلة، يتم تضمين محاكاة ردود واجهة برمجة التطبيقات مباشرةً في WeChat DevTools. من خلال واجهة سهلة الاستخدام، يمكن للمطوّر إعداد نقاط نهاية لواجهة برمجة التطبيقات والردود المحاكاة المطلوبة.
الإقرارات
تمت مراجعة هذه المقالة من قِبل Joe Medley و Kayce Basques و Milica Mihajlija و Alan Kent و Keith Gu.