Apache Cordova का इस्तेमाल करके, मोबाइल पर Chrome ऐप्लिकेशन चलाएं

अहम जानकारी: Chrome सभी प्लैटफ़ॉर्म पर, 'Chrome ऐप्स' के साथ काम करने की सुविधा बंद कर देगा. Chrome ब्राउज़र और Chrome वेब स्टोर एक्सटेंशन को सपोर्ट करते रहेंगे. एलान पढ़ें और अपने ऐप्लिकेशन को माइग्रेट करने के बारे में ज़्यादा जानें.

मोबाइल पर Chrome ऐप्स चलाने के लिए टूलचेन, शुरुआती डेवलपर झलक में है. GitHub से जुड़ी समस्या को ट्रैक करने वाले टूल, हमारे Chrome ऐप्लिकेशन के डेवलपर फ़ोरम, स्टैक ओवरफ़्लो या हमारे G+ डेवलपर पेज का इस्तेमाल करके, बेझिझक हमें सुझाव दें.

खास जानकारी

आपके पास Android और iOS पर, Chrome ऐप्लिकेशन चलाने का विकल्प होता है. इसके लिए, Apache Cordोवा पर आधारित टूलचेन का इस्तेमाल किया जा सकता है. यह एचटीएमएल, सीएसएस, और JavaScript का इस्तेमाल करके, नेटिव क्षमताओं वाले मोबाइल ऐप्लिकेशन बनाने के लिए, ओपन सोर्स मोबाइल डेवलपमेंट फ़्रेमवर्क है.

Apache Cordova आपके ऐप्लिकेशन के वेब कोड को नेटिव ऐप्लिकेशन शेल के साथ रैप करता है और आपको Google Play और/या Apple App Store के ज़रिए अपना हाइब्रिड वेब ऐप्लिकेशन लोगों तक पहुंचाने की सुविधा देता है. किसी मौजूदा Chrome ऐप्लिकेशन के साथ Apache Cordova का इस्तेमाल करने के लिए, cca (c ordow c h बदलावों a pp) कमांड-लाइन टूल का इस्तेमाल किया जाता है.

अन्य संसाधन

• कोर्डोवा के साथ डेवलप करते समय आपको कुछ खास बातों का ध्यान रखना चाहिए. हमने इन्हें अहम जानकारी वाले सेक्शन में शामिल किया है.
• यह देखने के लिए कि मोबाइल पर कौनसे Chrome API काम करते हैं, एपीआई की स्थिति पेज पर जाएं.
• टूलचेन के बिना, किसी Android डिवाइस पर अपने Chrome ऐप्लिकेशन की झलक देखने के लिए, Chrome ऐप्लिकेशन डेवलपर टूल (ADT) का इस्तेमाल करें.

आइए शुरू करें।

पहला चरण: डेवलपमेंट टूल इंस्टॉल करना

मोबाइल के लिए Chrome ऐप्स टूलचेन iOS 6+ और Android 4.x+ को टारगेट कर सकता है.

सभी प्लैटफ़ॉर्म के लिए डेवलपमेंट डिपेंडेंसी

• npm के साथ Node.js का 0.10.0 (या इसके बाद का वर्शन) वर्शन ज़रूरी है:

  • Windows: nodejs.org से डाउनलोड किए जा सकने वाले इंस्टॉलेशन एक्ज़ीक्यूटेबल का इस्तेमाल करके, Node.js को इंस्टॉल करें.
  • 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 या इसके बाद वाला वर्शन
  • Android SDK और Android डेवलपर टूल इंस्टॉल करें. ये टूल, Android ADT बंडल के साथ आते हैं.
  • अपने PATH के एनवायरमेंट वैरिएबल में sdk/tools और sdk/platform-tools जोड़ें.
  • ओएस X: Android SDK के साथ मिलने वाले Eclipse के वर्शन के लिए JRE 6 ज़रूरी है. अगर Eclipse.app खोलने पर आपको JRE 6 इंस्टॉल करने का संकेत नहीं मिलता, तो इसे Mac App Store से इंस्टॉल करें.
  • Linux: Android SDK को 32 बिट की सपोर्ट लाइब्रेरी की ज़रूरत होती है. Ubuntu पर, इसके ज़रिए ये पाएं: apt-get install ia32-libs.
• Apache Ant
  • अपने PATH के एनवायरमेंट वैरिएबल में apache-ant-x.x.x/bin जोड़ें.

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 install -g cca

टूलचेन को बाद में नई रिलीज़ के साथ अपडेट करने के लिए: npm update -g cca.

कमांड लाइन से इस कमांड को चलाकर पुष्टि करें कि सब कुछ सही तरीके से इंस्टॉल किया गया है:

cca checkenv

आपको अपने Android या iOS SDK टूल को इंस्टॉल करने के बारे में, आउटपुट के तौर पर दिया गया cca का वर्शन नंबर और उसकी पुष्टि दिखेगी.

दूसरा चरण: प्रोजेक्ट बनाना

YourApp नाम की डायरेक्ट्री में, मोबाइल Chrome ऐप्लिकेशन का डिफ़ॉल्ट प्रोजेक्ट बनाने के लिए, इसे चलाएं:

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 ऐप्लिकेशन के सैंपल में से किसी एक को आज़माएं.

तीसरा चरण: प्रॉडक्ट डेवलप करना

दो तरीकों से अपना ऐप्लिकेशन बनाया और चलाया जा सकता है:

• पहला विकल्प: कमांड लाइन से, cca टूल की मदद से या
• विकल्प B: IDE का इस्तेमाल करके, जैसे कि Eclipse या Xcode. अपने हाइब्रिड मोबाइल ऐप्लिकेशन को लॉन्च करने, कॉन्फ़िगर करने, और डीबग करने में मदद के लिए, IDE का इस्तेमाल करना पूरी तरह से ज़रूरी नहीं है. हालांकि, यह अक्सर काम आता है.

पहला विकल्प: कमांड लाइन का इस्तेमाल करके डेवलप करना और बनाना

cca के बनाए गए प्रोजेक्ट फ़ोल्डर के रूट में से:

Android

• Android Emulator पर अपना ऐप्लिकेशन चलाने के लिए: cca emulate android
  • ध्यान दें: इसके लिए ज़रूरी है कि आपने एम्युलेटर सेट अप किया हो. इसे सेट अप करने के लिए, android avd चलाई जा सकती है. android चलाकर, एम्युलेटर की अन्य इमेज डाउनलोड करें. इंटेल इमेज को तेज़ी से चलाने के लिए, Intel का HAXM इंस्टॉल करें.
• कनेक्ट किए गए Android डिवाइस पर ऐप्लिकेशन चलाने के लिए: cca run android

iOS

• iOS सिम्युलेटर पर अपना ऐप्लिकेशन चलाने के लिए: cca emulate ios
• कनेक्ट किए गए iOS डिवाइस पर अपना ऐप्लिकेशन चलाने के लिए: cca run ios
  • ध्यान दें: इसके लिए ज़रूरी है कि आपने डिवाइस के लिए प्रावधान प्रोफ़ाइल सेट की हो.

दूसरा विकल्प: IDE का इस्तेमाल करके डेवलप करना और बनाना

Android

1. एक्लिप्स में, File -> Import चुनें.
2. Android > Existing Android Code Into Workspace चुनें.
3. cca की मदद से बनाए गए पाथ से इंपोर्ट करें.
   • आपको इंपोर्ट करने के लिए दो प्रोजेक्ट की उम्मीद करनी चाहिए, जिनमें से एक *-CordovaLib है.
4. ऐप्लिकेशन चलाने के लिए, 'चलाएं' बटन पर क्लिक करें.
   • आपको एक रन कॉन्फ़िगरेशन बनाना होगा (जैसा कि सभी Java ऐप्लिकेशन के साथ होता है). आपको आम तौर पर, पहली बार अपने-आप ही इसके लिए संकेत दिया जाता है.
   • आपको पहली बार अपने डिवाइस/एम्युलेटर भी मैनेज करने होंगे.

iOS

1. टर्मिनल विंडो में यह टाइप करके प्रोजेक्ट को Xcode में खोलें:

   cd YourApp
   open platforms/ios/*.xcodeproj
   

2. पक्का करें कि आप सही टारगेट बना रहे हों.

   सबसे ऊपर बाईं ओर ('रन और बंद करें' बटन के बगल में), टारगेट प्रोजेक्ट और डिवाइस चुनने के लिए एक ड्रॉपडाउन मौजूद है. पक्का करें कि आपने CordovaLib को नहीं, बल्कि YourApp को चुना हो.

3. चलाएं बटन पर क्लिक करें.

अपने ऐप्लिकेशन के सोर्स कोड में बदलाव करना

आपकी एचटीएमएल, सीएसएस, और JavaScript फ़ाइलें, आपके cca प्रोजेक्ट फ़ोल्डर की www डायरेक्ट्री में मौजूद होती हैं.

अहम जानकारी: www/ में बदलाव करने के बाद, आपको अपना ऐप्लिकेशन डिप्लॉय करने से पहले, cca prepare चलाना होगा. अगर कमांड लाइन से cca build, cca run या cca emulate चलाया जा रहा है, तो तैयारी अपने-आप पूरी हो जाएगी. अगर Eclipse/XCode का इस्तेमाल करके डेवलप किया जा रहा है, तो आपको cca prepare को मैन्युअल तरीके से चलाना होगा.

डीबग करना

अपने Chrome ऐप्लिकेशन को मोबाइल पर उसी तरह डीबग किया जा सकता है जिस तरह Cordov ऐप्लिकेशन को डीबग किया जाता है.

चौथा चरण: अगले चरण

अब जब आपके पास एक चालू मोबाइल 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 में, Cordova की डिफ़ॉल्ट स्प्लैश स्क्रीन का सेट शामिल है.

ये साइज़ ज़रूरी हैं:

• 320 पिक्सल x 480 पिक्सल + 2x
• 768 पिक्सल x 1024 पिक्सल + 2x (iPad पोर्ट्रेट)
• 1024 पिक्सल x 768 पिक्सल + 2x (iPad लैंडस्केप)
• 640 पिक्सल x 1146 पिक्सल

फ़िलहाल, स्प्लैश स्क्रीन की इमेज में cca ने बदलाव नहीं किया है.

पांचवां चरण: पब्लिश करें

आपके प्रोजेक्ट की platforms डायरेक्ट्री में, आपके पास दो पूरे नेटिव प्रोजेक्ट हैं: एक Android के लिए और दूसरा iOS के लिए. आपके पास इन प्रोजेक्ट के रिलीज़ वर्शन बनाने और उन्हें Google Play या iOS App Store पर पब्लिश करने का विकल्प है.

Play Store पर पब्लिश करें

अपने Android ऐप्लिकेशन को Play Store पर पब्लिश करने के लिए:

1. Android के दो वर्शन आईडी अपडेट करें. इसके बाद, cca prepare चलाएं:

   • android:versionName को www/manifest.json में version कुंजी का इस्तेमाल करके सेट किया गया है (यह आपके डेस्कटॉप पैकेज किए गए ऐप्लिकेशन का वर्शन भी सेट करता है).
   • android:versionCode को www/manifest.mobile.js में versionCode कुंजी का इस्तेमाल करके सेट किया गया है.

2. platforms/android/ant.properties में बदलाव करें या नया बनाएं. साथ ही, key.store और key.alias प्रॉपर्टी सेट करें (जैसा कि Android डेवलपर दस्तावेज़ में बताया गया है).

3. अपना प्रोजेक्ट बनाएं:

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

4. platforms/android/ant-build/ में मौजूद अपना साइन किया हुआ .apk ढूंढें.

5. साइन किया गया ऐप्लिकेशन Google Play डेवलपर कंसोल पर अपलोड करें.

iOS App Store पर पब्लिश करें

1. ऐप्लिकेशन वर्शन अपडेट करने के लिए, www/manifest.mobile.js में CFBundleVersion कुंजी सेट करें. इसके बाद, cca prepare चलाएं.

2. अपनी platforms/ios डायरेक्ट्री में मौजूद Xcode प्रोजेक्ट फ़ाइल खोलें:

   प्लैटफ़ॉर्म/iOS/*.xcodeproj खोलें

3. Apple की App Distribution गाइड देखें.

ध्यान देने वाली खास बातें

अगर आपने Chrome ऐप्स का इस्तेमाल पहले कभी नहीं किया है, तो इसमें सबसे बड़ी समस्या यह है कि कुछ वेब सुविधाएं बंद हो गई हैं. हालांकि, फ़िलहाल इनमें से कई सुविधाएं कोर्डोवा में काम करती हैं.

ऐसा हो सकता है कि Chrome ऐप्लिकेशन, मोबाइल पर ठीक से काम न करे. मोबाइल पर पोर्ट करने से जुड़ी कुछ सामान्य समस्याएं:

• छोटी स्क्रीन के साथ लेआउट की समस्याएं, खास तौर पर जब पोर्ट्रेट ओरिएंटेशन में हों.
  • सुझाया गया सुधार: छोटी स्क्रीन के लिए अपने कॉन्टेंट को ऑप्टिमाइज़ करने के लिए, सीएसएस मीडिया क्वेरी का इस्तेमाल करें.
• chrome.app.window से सेट की गई Chrome ऐप्लिकेशन विंडो के साइज़ को अनदेखा कर दिया जाएगा. इसके बजाय, डिवाइस के नेटिव डाइमेंशन का इस्तेमाल किया जाएगा.
  • सुझाया गया समाधान: हार्ड कोड किए गए विंडो डाइमेंशन हटाएं. अपने ऐप्लिकेशन को अलग-अलग साइज़ को ध्यान में रखकर डिज़ाइन करें.
• छोटे बटन और लिंक को उंगली से टैप करना मुश्किल होगा.
  • सुझाया गया सुधार: अपने टच टारगेट को कम से कम 44 x 44 पॉइंट पर सेट करें.
• माउस होवर पर निर्भर रहने से अनपेक्षित व्यवहार, जो टच स्क्रीन पर मौजूद नहीं है.
  • सुझाया गया सुधार: कर्सर घुमाने के अलावा, टैप करने पर ड्रॉपडाउन और टूलटिप जैसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट चालू करें.
• 300 मि.से. की देरी से.
  • सुझाया गया सुधार: FT Labs by FastClick JavaScript पॉलीफ़िल का इस्तेमाल करें.
  • इससे जुड़ी ज़्यादा जानकारी के लिए, HTML5Rocks का यह लेख पढ़ें.

साथ काम करने वाले Chrome API

हमने मोबाइल के लिए Chrome Apps के लिए कई मुख्य Chrome API उपलब्ध कराए हैं, जिनमें शामिल हैं:

• identity - OAuth2 का इस्तेमाल करके साइन-इन करने वाले उपयोगकर्ता
• payments - अपने मोबाइल ऐप्लिकेशन में वर्चुअल सामान बेचें
• pushMessaging - अपने सर्वर से अपने ऐप्लिकेशन पर मैसेज पुश करें
• सॉकेट - टीसीपी और यूडीपी का इस्तेमाल करके, नेटवर्क पर डेटा भेजें और पाएं
• सूचनाएं (सिर्फ़ Android पर) - अपने मोबाइल ऐप्लिकेशन से बेहतर सूचनाएं भेजें
• storage - कुंजी-वैल्यू डेटा को स्थानीय तौर पर सेव और वापस पाएं
• syncFileSystem - Google Drive में मौजूद फ़ाइलों को सेव करें और वापस पाएं
• alarms - समय-समय पर टास्क करते हैं
• idle - मशीन के इस्तेमाल न होने की स्थिति में बदलाव होने पर पता लगाएं
• पावर - सिस्टम की पावर मैनेजमेंट सुविधाओं को बदलें

हालांकि, सभी Chrome JavaScript API लागू नहीं किए गए हैं. साथ ही, सभी Chrome डेस्कटॉप सुविधाएं मोबाइल पर उपलब्ध नहीं होती हैं:

• कोई <webview> टैग नहीं है
• कोई IndexedDB नहीं
• कोई getUserMedia() नहीं
• कोई NaCl नहीं

एपीआई के स्टेटस वाले पेज पर जाकर, प्रोग्रेस को ट्रैक किया जा सकता है.

Chrome ऐप्लिकेशन डेवलपर टूल

Android के लिए Chrome ऐप्स डेवलपर टूल (ADT) एक स्टैंडअलोन Android ऐप्लिकेशन है, जो आपको ऊपर बताए गए डेवलपमेंट टूलचेन को सेट किए बिना Chrome ऐप्लिकेशन डाउनलोड करने और चलाने की सुविधा देता है. अपने Android डिवाइस पर, किसी मौजूदा Chrome ऐप्लिकेशन (पहले से ही .crx के तौर पर पैकेज किया गया) की झलक देखने के लिए, Chrome ADT का इस्तेमाल करें.

Android के लिए Chrome ADT फ़िलहाल प्री-ऐल्फ़ा रिलीज़ में है. इसे आज़माने के लिए, ChromeADT.apk के रिलीज़ नोट देखें, ताकि आपको इंस्टॉलेशन और इस्तेमाल करने के निर्देश मिल सकें.