تشغيل تطبيقات 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 (أو أعلى)
• Android SDK الإصدار 4.4.2 (أو أحدث)
  • ثبِّت حزمة تطوير البرامج (SDK) لنظام التشغيل Android وأدوات مطوّري برامج Android المضمّنة في حزمة Android ADT Bundle.
  • أضِف sdk/tools وsdk/platform-tools إلى متغيّر البيئة PATH.
  • نظام التشغيل OS X: يتطلّب إصدار Eclipse المتوفّر مع حزمة تطوير البرامج (SDK) لنظام التشغيل Android JRE 6. في حال فتح لا يطلب منك تطبيق Eclipse.app تثبيت JRE 6، ويمكنك الحصول عليه من خلال متجر تطبيقات Mac.
  • نظام التشغيل 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 لإنشاء رابط رمزي إليها:

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، أو
• الخيار ب: باستخدام بيئة تطوير متكاملة (IDE)، مثل Eclipse أو Xcode. إنّ استخدام بيئة التطوير المتكاملة (IDE) أمر اختياري تمامًا (ولكن مفيدة في الغالب) للمساعدة في إطلاق تطبيق الأجهزة الجوّالة المختلط وإعداده وتصحيح الأخطاء فيه.

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

من جذر مجلد المشروع الذي تم إنشاؤه من قِبل "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
  • ملاحظة: يتطلب ذلك إعداد ملف شخصي لإدارة الحسابات لجهازك.

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

Android

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

iOS

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

   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 شاشة بداية مختصرة أثناء تحميل التطبيق. مجموعة من ميزات Cordova التلقائية يتم تضمين الشاشات في 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 أو متجر تطبيقات 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:

   فتح الأنظمة الأساسية/ios/*.xcodeproj

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

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

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

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

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

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

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

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

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

• ما مِن علامة <webview>
• لا قاعدة بيانات مفهرسة
• لا getUserMedia()
• بدون NaCl

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

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

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

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