تشغيل تطبيقات Chrome على الجوّال باستخدام Apache Cordova

سلسلة الأدوات لتشغيل تطبيقات Chrome على الأجهزة الجوّالة هي في مرحلة مبكرة من المعاينة للمطوّرين. يُرجى إرسال ملاحظاتك باستخدام نظام تتبُّع المشاكل في GitHub أو منتدى مطوّري تطبيقات Chrome أو على Stack Overflow أو صفحة مطوّري G+.

نظرة عامة

يمكنك تشغيل تطبيقات Chrome على Android وiOS من خلال مجموعة أدوات تستند إلى Apache Cordova، وهو إطار عمل مفتوح المصدر لتطوير التطبيقات المتوافقة مع الأجهزة الجوّالة لإنشاء تطبيقات متوافقة مع الأجهزة الجوّالة باستخدام ميزات الأصلية باستخدام HTML وCSS وJavaScript.

يُغلِف Apache Cordova رمز الويب الخاص بتطبيقك باستخدام ملف تعريف تطبيق أصلي ويسمح لك بتوزيع تطبيق الويب المختلط من خلال Google Play و/أو Apple App Store. لاستخدام Apache Cordova مع تطبيق Chrome حالي، يمكنك استخدام أداة cca (c ordova c hrome a pp) المبرمَجة.

مراجع إضافية

• هناك بعض الاعتبارات الخاصة التي يجب مراعاتها عند تطوير الألعاب باستخدام Cordova، وقد أدرجناها في قسم الاعتبارات.
• للاطّلاع على واجهات برمجة تطبيقات Chrome المتوافقة مع الأجهزة الجوّالة، انتقِل إلى صفحة حالة واجهة برمجة التطبيقات.
• لمعاينة تطبيق Chrome على جهاز Android بدون سلسلة الأدوات، استخدِم أدوات مطوّري تطبيقات Chrome (ADT).

لنبدأ

الخطوة 1: تثبيت أدوات التطوير

يمكن أن تستهدف سلسلة أدوات تطبيقات Chrome للأجهزة الجوّالة الإصدار 6 من نظام التشغيل iOS والإصدار 4.x من نظام التشغيل Android والإصدارات الأحدث.

التبعيات اللازمة لتطوير التطبيقات على جميع المنصات

• يجب استخدام الإصدار 0.10.0 من Node.js (أو إصدار أحدث) مع npm:

  • Windows: ثبِّت Node.js باستخدام ملفات التشغيل القابلة للتنفيذ للتثبيت والتي يمكن تنزيلها من nodejs.org.
  • OS X أو Linux: تتوفّر أيضًا ملفات التشغيل الخاصة بالتركيب من nodejs.org. إذا كنت تريد تجنُّب الحاجة إلى إذن الوصول إلى الجذر، قد يكون من الأسهل التثبيت من خلال nvm. مثال:

  curl https://raw.github.com/creationix/nvm/master/install.sh | sh
  source ~/.bash_profile || source ~/.profile || source ~/.bashrc
  nvm install 0.10
  nvm alias default 0.10
  

استهداف أجهزة Android

عند تطوير تطبيق لنظام التشغيل Android، عليك أيضًا تثبيت ما يلي:

• ‫Java JDK 7 (أو إصدار أحدث)
• الإصدار 4.4.2 (أو إصدار أحدث) من حزمة تطوير البرامج (SDK) لنظام التشغيل Android
  • ثبِّت حزمة تطوير البرامج (SDK) لنظام التشغيل Android وأدوات مطوّري تطبيقات Android المضمّنة في حزمة ADT لنظام التشغيل Android.
  • أضِف sdk/tools وsdk/platform-tools إلى متغيّر البيئة PATH.
  • OS X: يتطلّب إصدار Eclipse المُرفَق بحزمة تطوير البرامج (SDK) لنظام التشغيل Android استخدام JRE 6. إذا لم يطلب منك فتح IDE IDE.app تثبيت JRE 6، يمكنك الحصول عليه من خلال Mac App Store.
  • Linux: تتطلّب حزمة تطوير البرامج (SDK) لنظام التشغيل Android مكتبات الدعم بنظام 32 بت. على نظام التشغيل Ubuntu، يمكنك الحصول على هذه الأدوات من خلال: apt-get install ia32-libs.
• Apache Ant
  • أضِف apache-ant-x.x.x/bin إلى متغيّر البيئة PATH.

استهداف iOS

يُرجى العلم أنّه لا يمكن تطوير تطبيقات iOS إلا على نظام التشغيل OS X. بالإضافة إلى ذلك، عليك تثبيت ما يلي:

• Xcode 5 (أو إصدار أحدث) الذي يتضمن أدوات سطر أوامر Xcode
• ios-deploy (مطلوب للنشر على جهاز iOS)
  • npm install -g ios-deploy
• ios-sim (مطلوب للنشر على "محاكي iOS")
  • npm install -g ios-sim
• اختياري: التسجيل كمطوّر تطبيقات iOS
  • وهذا الإجراء ضروري للاختبار على الأجهزة الحقيقية ولإرساله إلى متجر التطبيقات.
  • يمكنك تخطّي عملية التسجيل إذا كنت تخطّط لاستخدام محاكيات iPhone/iPad فقط.

تثبيت أداة سطر الأوامر "cca"

تثبيت cca من خلال npm:

npm install -g cca

لتعديل سلسلة الأدوات لاحقًا باستخدام إصدارات جديدة: npm update -g cca.

تأكَّد من تثبيت كل المكونات بشكل صحيح من خلال تنفيذ هذا الأمر من سطر الأوامر:

cca checkenv

سيظهر رقم إصدار cca الذي تم عرضه وتأكيدًا على عملية تثبيت حزمة تطوير البرامج (SDK) لنظام التشغيل Android أو iOS.

الخطوة 2: إنشاء مشروع

لإنشاء مشروع تلقائي لتطبيق Chrome متوافق مع الأجهزة الجوّالة في دليل باسم YourApp، اتّبِع الخطوات التالية:

cca create YourApp

إذا سبق لك إنشاء تطبيق Chrome وأردت نقله إلى نظام أساسي للأجهزة الجوّالة، يمكنك استخدام العلامة --link-to لإنشاء symlink إليه:

cca create YourApp --link-to=path/to/manifest.json

إذا أردت بدلاً من ذلك نسخ ملفات تطبيقات Chrome الحالية، يمكنك استخدام العلامة --copy-from:

cca create YourApp --copy-from=path/to/manifest.json

هل لا يتوفّر لديك تطبيق Chrome حتى الآن؟ يمكنك تجربة نموذج من نماذج تطبيقات Chrome العديدة التي تتوافق مع الأجهزة الجوّالة.

الخطوة 3: التطوير

يمكنك إنشاء تطبيقك وتشغيله بطريقتَين:

• الخيار أ: من سطر الأوامر، باستخدام أداة cca
• الخيار ب: باستخدام بيئة تطوير متكاملة، مثل Eclipse أو Xcode إنّ استخدام بيئة تطوير متكاملة اختياري تمامًا (ولكنه يكون مفيدًا في كثير من الأحيان) للمساعدة في إطلاق تطبيقك المختلط للأجهزة الجوّالة وضبطه وتصحيح أخطاءه.

الخيار أ: التطوير والإنشاء باستخدام سطر الأوامر

من جذر مجلد المشروع الذي تم إنشاؤه باستخدام cca:

Android

• لتشغيل تطبيقك على محاكي Android: cca emulate android
  • ملاحظة: يتطلب ذلك إعداد محاكي. يمكنك تشغيل "android avd" لإعداد هذه الميزة. نزِّل صور المحاكي الإضافية من خلال تشغيل android. لزيادة سرعة تشغيل صور intel، يُرجى تثبيت HAXM من Intel.
• لتشغيل تطبيقك على جهاز Android متصل: cca run android

iOS

• لتشغيل تطبيقك على محاكي iOS: cca emulate ios
• لتشغيل تطبيقك على جهاز iOS مرتبط، يُرجى اتّباع الخطوات التالية: cca run ios
  • ملاحظة: يتطلب ذلك إعداد ملف شخصي لإدارة الحسابات لجهازك.

الخيار ب: التطوير والإنشاء باستخدام بيئة تطوير متكاملة

Android

1. في Eclipse، اختَر File -> Import.
2. اختَر Android > Existing Android Code Into Workspace.
3. استورِد البيانات من المسار الذي أنشأته للتو باستخدام cca.
   • من المفترض أن يكون لديك مشروعان لاستيرادهما، أحدهما *-CordovaLib.
4. انقر على زر "تشغيل" لتشغيل تطبيقك.
   • ستحتاج إلى إنشاء تهيئة تشغيل (كما هو الحال مع جميع تطبيقات جافا). يُطلب منك عادةً إجراء ذلك في المرة الأولى تلقائيًا.
   • وعليك أيضًا إدارة أجهزتك/محاكياتك في المرة الأولى.

iOS

1. افتح المشروع في Xcode عن طريق كتابة ما يلي في نافذة Terminal:

   cd YourApp
   open platforms/ios/*.xcodeproj
   

2. تأكد من تحديد الهدف الصحيح.

   في أعلى يمين الصفحة (بجانب زرَّي "تشغيل" و"إيقاف")، يتوفّر قائمة منسدلة لاختيار المشروع المستهدف والجهاز. تأكَّد من اختيار YourApp وليس CordovaLib.

3. انقر على زر التشغيل.

إجراء تغييرات على رمز المصدر الخاص بتطبيقك

تتوفر ملفات HTML وCSS وJavaScript في دليل www ضمن مجلد مشروع cca.

ملاحظة مهمة: بعد إجراء تغييرات على www/، عليك تشغيل cca prepare قبل نشر التطبيق. إذا كنت بصدد تشغيل cca build أو cca run أو cca emulate من سطر الأوامر، تتم خطوة الإعداد تلقائيًا. في حال التطوير باستخدام Eclipse/XCode، يجب تشغيل cca prepare يدويًا.

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

يمكنك تصحيح أخطاء تطبيق Chrome على الأجهزة الجوّالة بالطريقة نفسها التي تستخدمها في تصحيح أخطاء تطبيقات Cordova.

الخطوة 4: الخطوات التالية

بعد أن أصبح لديك تطبيق Chrome يعمل على الأجهزة الجوّالة، هناك العديد من الطرق لتحسين التجربة على الأجهزة الجوّالة.

بيان الجوال

هناك إعدادات معيّنة لتطبيق Chrome لا تنطبق إلا على منصات الأجهزة الجوّالة. لقد أنشأنا ملفًا بتنسيق www/manifest.mobile.json يحتوي على هذه القيم، ويتمّ الإشارة إلى القيم المحدّدة في مستندات المكوّن الإضافي وهذا الدليل.

يجب تعديل القيم هنا وفقًا لذلك.

الرموز

تحتاج التطبيقات المتوافقة مع الأجهزة الجوّالة إلى دقة أعلى لبعض الرموز مقارنةً بتطبيقات Chrome المتوافقة مع أجهزة الكمبيوتر المكتبي.

الأحجام التالية مطلوبة لأجهزة Android:

• ‫36 بكسل أو 48 بكسل أو 78 بكسل أو 96 بكسل

بالنسبة إلى تطبيقات iOS، تختلف الأحجام المطلوبة حسب ما إذا كنت توفّر التوافق مع iOS 6 أو iOS 7. في ما يلي الحد الأدنى لعدد الرموز المطلوبة:

• iOS 6: 57 بكسل، و72 بكسل، و114 بكسل، و144 بكسل
• ‫iOS 7: 72 بكسل و120 بكسل و152 بكسل

ستظهر قائمة الرموز الكاملة على النحو التالي في ملف manifest.json:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

سيتم نسخ الرموز إلى الأماكن المناسبة لكل نظام أساسي في كل مرة تُشغّل فيها cca prepare.

شاشات البداية

تعرض التطبيقات على نظام التشغيل iOS شاشة بداية موجزة أثناء تحميل التطبيق. يتم تضمين مجموعة من شاشات الترحيب الافتراضية في platforms/ios/[AppName]/Resources/splash.

الأحجام المطلوبة هي:

• ‫320 × 480 بكسل + 2x
• ‫‎768 × 1024 بكسل + 2x (شاشة iPad العمودية)
• 1024 بكسل × 768 بكسل + 2x (صورة iPad أفقيّة)
• ‫640 × 1146 بكسل

لا تعدّل cca حاليًا صور شاشة البداية.

الخطوة 5: النشر

في دليل platforms الخاص بمشروعك، لديك مشروعان كاملان متوافقان مع الأجهزة الجوّالة: أحدهما لنظام التشغيل Android، وأحدهما لنظام التشغيل iOS. يمكنك إنشاء إصدارات علنية من هذه المشاريع ونشرها على Google Play أو على App Store لأجهزة iOS.

النشر على "متجر Play"

لنشر تطبيق Android على "متجر Play"، اتّبِع الخطوات التالية:

1. عدِّل معرّفَي إصدار Android، ثم نفِّذ cca prepare:

   • يتم ضبط android:versionName باستخدام مفتاح version في www/manifest.json (يؤدي ذلك أيضًا إلى ضبط إصدار تطبيقك المُحزم المتوافق مع أجهزة الكمبيوتر المكتبي).
   • يتم ضبط android:versionCode باستخدام مفتاح versionCode في www/manifest.mobile.js.

2. عدِّل (أو أنشئ) platforms/android/ant.properties واضبط السمتَين key.store وkey.alias (على النحو الموضّح في مستندات مطوّري تطبيقات Android).

3. إنشاء مشروعك:

   ./platforms/android/cordova/build --release
   

4. ابحث عن حزمة ‎ .apk الموقَّعة في platforms/android/ant-build/.

5. حمِّل تطبيقك الموقَّع على Google Play Console.

النشر في App Store على الأجهزة التي تعمل بنظام التشغيل iOS

1. عدِّل إصدار التطبيق من خلال ضبط مفتاح CFBundleVersion في www/manifest.mobile.js، ثم شغِّل cca prepare.

2. افتح ملف مشروع Xcode المتوفّر ضمن الدليل platforms/ios:

   open platforms/ios/*.xcodeproj

3. اتّبِع دليل توزيع التطبيقات من Apple.

اعتبارات خاصة

إذا كنت مستخدِمًا جديدًا لتطبيقات Chrome، ستلاحظ أنّ بعض ميزات الويب غير مفعّلة. ومع ذلك، تعمل العديد من هذه الأدوات حاليًا ضمن Cordova.

قد لا يعمل تطبيق Chrome على الأجهزة الجوّالة بدون خطوات إعداد. في ما يلي بعض المشاكل الشائعة المتعلّقة بنقل البيانات إلى الأجهزة الجوّالة:

• مشاكل التنسيق على الشاشات الصغيرة، خاصةً عندما تكون في الاتجاه العمودي.
  • الحل المقترَح: استخدِم استعلامات وسائط CSS لتحسين المحتوى ليلائم الشاشات الأصغر حجمًا.
• سيتم تجاهل أحجام نافذة تطبيق Chrome التي تم ضبطها من خلال chrome.app.window، وسيتم بدلاً من ذلك استخدام السمات الأصلية للجهاز.
  • الحلّ المقترَح: يجب إزالة أبعاد النوافذ غير القابلة للتغيير، وتصميم تطبيقك بأحجام مختلفة.
• سيكون من الصعب النقر بإصبعك على الأزرار والروابط الصغيرة.
  • الحلّ المقترَح: عدِّل مساحات اللمس المستهدفة لتبلغ 44 × 44 نقطة على الأقلّ.
• حدث سلوك غير متوقّع عند الاعتماد على تمرير الماوس، وهو غير متوفّر على الشاشات التي تعمل باللمس.
  • الحلّ المقترَح: بالإضافة إلى تمرير المؤشر، فعِّل عناصر واجهة المستخدم، مثل القوائم المنسدلة والتلميحات عند النقر.
• تأخُّر النقر بمقدار 300 ملي ثانية
  • الحلّ المقترَح: استخدِم عنصر JavaScript polyfill في FastClick من FT Labs.
  • يمكنك الاطّلاع على مقالة HTML5Rocks للحصول على بعض المعلومات الأساسية.

واجهات Chrome API المتوافقة

لقد جعلنا العديد من واجهات برمجة تطبيقات Chrome الأساسية متاحة لتطبيقات Chrome للأجهزة الجوّالة، بما في ذلك:

• ‫identity: تسجيل دخول المستخدمين باستخدام OAuth2
• الدفع: بيع سلع افتراضية داخل تطبيقك المتوافق مع الأجهزة الجوّالة
• pushMessaging - إرسال الرسائل إلى تطبيقك من خادمك
• المنافذ: لإرسال البيانات واستلامها عبر الشبكة باستخدام بروتوكولَي TCP وUDP
• الإشعارات (لأجهزة Android فقط): يمكنك إرسال إشعارات غنية من تطبيقك المتوافق مع الأجهزة الجوّالة.
• التخزين: تخزين بيانات المفاتيح والقيم واستردادها محليًا
• ‫syncFileSystem: تخزين الملفات التي يتم الاحتفاظ بنسخة احتياطية منها على Google Drive واستردادها
• المنبّهات: لتشغيل المهام بشكل دوري
• غير نشِط: اكتشاف تغير حالة وضع عدم النشاط للجهاز
• الطاقة: إلغاء ميزات إدارة الطاقة في النظام

ومع ذلك، لا يتم تنفيذ بعض واجهات برمجة تطبيقات Chrome JavaScript. ولا تتوفّر بعض ميزات Chrome المخصّصة لأجهزة الكمبيوتر المكتبي على الأجهزة الجوّالة:

• لا تتوفّر علامة <webview>
• لا يتوفّر IndexedDB
• لا تتوفّر دالة getUserMedia()‎
• لا يحتوي على NaCl

يمكنك تتبُّع مستوى التقدّم من صفحة حالة واجهة برمجة التطبيقات.

أداة مطوّري تطبيقات Chrome

أداة مطوّري تطبيقات Chrome (ADT) لنظام التشغيل Android هي تطبيق Android مستقل يتيح لك تنزيل تطبيق Chrome وتشغيله بدون إعداد سلسلة أدوات التطوير كما هو موضّح أعلاه. استخدِم IDE لتطبيقات Chrome عندما تريد معاينة تطبيق Chrome حالي (تم حزمه مسبقًا بتنسيق ‎ .crx) على جهاز Android.

يتوفّر Chrome ADT لنظام التشغيل Android حاليًا في إصدار ما قبل الإصدار التجريبي. لتجربة هذه الميزة، يمكنك الاطّلاع على ملاحظات إصدار ChromeADT.apk للحصول على تعليمات التثبيت والاستخدام.