لا تزال سلسلة أدوات تشغيل تطبيقات 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 للجوّال استهداف نظام التشغيل 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
- أضِف
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 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
- في Eclipse، اختَر
File
->Import
. - اختر
Android
>Existing Android Code Into Workspace
. - استيراد من المسار الذي أنشأته للتو باستخدام
cca
.- من المفترض أن يكون هناك مشروعان لاستيرادهما، أحدهما
*-CordovaLib
.
- من المفترض أن يكون هناك مشروعان لاستيرادهما، أحدهما
- انقر على الزر "تشغيل" لتشغيل تطبيقك.
- ينبغي إنشاء إعداد تشغيل (كما هو الحال مع جميع تطبيقات جافا). يُطلب منك عادةً تنفيذ هذا الإجراء للمرة الأولى تلقائيًا.
- ستحتاج أيضًا إلى إدارة أجهزتك/أدوات المحاكاة لأول مرة.
iOS
افتح المشروع في Xcode من خلال كتابة ما يلي في نافذة طرفية:
cd YourApp open platforms/ios/*.xcodeproj
تأكد من بناء الهدف الصحيح.
في أعلى اليسار (بجانب زري "Run" و"Stop")، توجد قائمة منسدلة لتحديد المشروع والجهاز المستهدف. تأكَّد من اختيار
YourApp
وليسCordovaLib
.انقر على الزر "تشغيل".
إجراء تغييرات على رمز مصدر التطبيق
تكون ملفات 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":
حدِّث رقمَي تعريف إصدار Android، ثم شغِّل
cca prepare
:- يتم ضبط
android:versionName
باستخدام المفتاحversion
فيwww/manifest.json
(يؤدي هذا الإجراء إلى ضبط إصدار التطبيق المجمّع لسطح المكتب أيضًا). - تم ضبط
android:versionCode
باستخدام المفتاحversionCode
فيwww/manifest.mobile.js
.
- يتم ضبط
عدِّل (أو أنشئ)
platforms/android/ant.properties
واضبط السمتَينkey.store
وkey.alias
(كما هو موضّح في مستندات مطوّري برامج Android).إنشاء مشروعك:
./platforms/android/cordova/build --release
ابحث عن ملف AP .الموقَّع في
platforms/android/ant-build/
.حمِّل تطبيقك الموقَّع إلى وحدة تحكم مطوّري البرامج في Google Play.
النشر على iOS App Store
- عليك تحديث إصدار التطبيق من خلال ضبط المفتاح
CFBundleVersion
فيwww/manifest.mobile.js
، ثم تشغيلcca prepare
. افتح ملف مشروع Xcode الموجود ضمن دليل
platforms/ios
:فتح الأنظمة الأساسية/ios/*.xcodeproj
اتبع دليل توزيع التطبيقات من Apple.
اعتبارات خاصة
إذا كنت مستخدمًا جديدًا لتطبيقات Chrome، فإن أكبر مشكلة تتمثل في أنه يتم إيقاف بعض ميزات الويب. ومع ذلك، يعمل العديد منها حاليًا داخل كوردوفا.
قد لا يعمل تطبيق Chrome بشكل فوري على الجوّال. بعض المشاكل الشائعة المتعلقة بالنقل إلى جهاز جوّال:
- هناك مشاكل في التنسيق في الشاشات الصغيرة، خاصةً في الاتجاه العمودي.
- الحلّ المقترَح: استخدِم استعلامات وسائط CSS لتحسين المحتوى الخاص بك للشاشات الأصغر حجمًا.
- سيتم تجاهل أحجام نوافذ تطبيقات Chrome التي تم ضبطها من خلال chrome.app.window، بدلاً من استخدام
الأبعاد الأصلية للجهاز.
- الحل المقترح: أزل أبعاد النوافذ غير القابلة للتغيير في البرنامج، وصمِّم تطبيقك بأحجام مختلفة في الاعتبار.
- سيكون من الصعب النقر على الأزرار والروابط الصغيرة بإصبع.
- الإصلاح المقترَح: اضبط مساحات اللمس لتكون 44 × 44 نقطة على الأقل.
- سلوك غير متوقع عند الاعتماد على تمرير الماوس ولا يتوفّر على الشاشات التي تعمل باللمس
- الإصلاح المقترَح: بالإضافة إلى التمرير، يمكنك تفعيل عناصر واجهة المستخدم مثل القوائم المنسدلة وتلميحات الأدوات عند النقر.
- مهلة النقر بمقدار 300 ملي ثانية
- الحلّ المقترَح: استخدِم رمز polyfill JavaScript FastClick by FT Labs.
- اقرأ مقالة HTML5Rocks هذه للحصول على بعض المعلومات الأساسية.
واجهات 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 للاطّلاع على تعليمات التثبيت والاستخدام.