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

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

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

نظرة عامة

يمكنك تشغيل تطبيقات 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).

مراجع إضافية

يَلَّا نِبْدَأْ.

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

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

تبعيات التطوير لجميع المنصات

  • الإصدار 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 (أو أعلى)
  • حزمة تطوير البرامج (SDK) لنظام التشغيل Android، الإصدار 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

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

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

  • Xcode 5 (أو إصدار أحدث) الذي يتضمّن أدوات سطر أوامر Xcode
  • ios-deploy (مطلوب النشر على جهاز iOS)
    • npm install -g ios-deploy
  • ios-sim (يجب نشره على iOS Simulator)
    • 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 بشكل أسرع، ثبِّت Intel's HAXM.
  • لتشغيل تطبيقك على جهاز 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 من خلال كتابة ما يلي في نافذة طرفية:

    cd YourApp
open platforms/ios/*.xcodeproj

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

    في أعلى اليسار (بجانب زري "Run" و"Stop")، توجد قائمة منسدلة لتحديد المشروع والجهاز المستهدف. تأكَّد من اختيار 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 App Store.

النشر على "متجر 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. ابحث عن ملف AP .الموقَّع في platforms/android/ant-build/.

  5. حمِّل تطبيقك الموقَّع إلى وحدة تحكم مطوّري البرامج في Google Play.

النشر على iOS App Store

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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