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

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

डेस्कटॉप और मोबाइल, दोनों पर काम करने वाला Chrome ऐप्लिकेशन

खास जानकारी

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

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

अन्य संसाधन

  • कुछ खास बातों का ध्यान रखना चाहिए, जिन्हें Cordava के साथ डेवलप करते समय आपको ध्यान में रखना चाहिए. हमने इन विषयों को विचार सेक्शन में शामिल किया है.
  • यह देखने के लिए कि मोबाइल पर कौनसे 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 ADT बंडल के साथ मिलने वाले Android SDK और Android डेवलपर टूल इंस्टॉल करें.
    • sdk/tools और sdk/platform-tools को अपने PATH एनवायरमेंट वैरिएबल में जोड़ें.
    • OS 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
    • 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 कमांड-लाइन टूल इंस्टॉल करना

npm की मदद से cca इंस्टॉल करें:

npm install -g cca

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

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

cca checkenv

आपको cca का वर्शन नंबर दिखेगा. साथ ही, Android या iOS SDK टूल के इंस्टॉल होने की पुष्टि भी दिखेगी.

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

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

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

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

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

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

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

cca के जनरेट किए गए प्रोजेक्ट फ़ोल्डर के रूट से:

Android

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

iOS

  • iOS सिम्युलेटर पर अपना ऐप्लिकेशन चलाने के लिए: cca emulate ios
  • कनेक्ट किए गए iOS डिवाइस पर अपना ऐप्लिकेशन चलाने के लिए: cca run ios

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

Android

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

iOS

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

    cd YourApp
    open platforms/ios/*.xcodeproj
    
  2. पक्का करें कि आपने सही टारगेट बनाया हो.

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

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

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

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

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

डीबग करना

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

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

अब जब आपके पास एक चालू मोबाइल 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 प्रोजेक्ट फ़ाइल खोलें:

    platforms/ios/*.xcodeproj खोलें

  3. Apple की App Distribution Guide फ़ॉलो करें.

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

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

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

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

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

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

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

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

  • कोई <webview> टैग नहीं
  • IndexedDB नहीं
  • getUserMedia() का इस्तेमाल नहीं किया गया
  • no NaCl

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

Chrome ऐप्स डेवलपर टूल

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

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