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