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

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

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

खास जानकारी

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

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

अन्य संसाधन

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

चलिए, शुरू करते हैं।

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

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

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

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

  • 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 या इसके बाद वाला वर्शन
  • Android ADT बंडल के साथ मिलने वाले Android SDK और Android डेवलपर टूल इंस्टॉल करें.
  • अपने PATH के एनवायरमेंट वैरिएबल में sdk/tools और sdk/platform-tools जोड़ें.
  • 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 कमांड-लाइन टूल इंस्टॉल करें

cca को npm से इंस्टॉल करें:

npm install -g cca

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

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

cca checkenv

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

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

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 के कई सैंपल में से कोई एक आज़माएं सहायता पर जाएं.

तीसरा चरण: कॉन्टेंट बनाना

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

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

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

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
  • ध्यान दें: इसके लिए ज़रूरी है कि आपने अपने डिवाइस के लिए प्रॉविज़निंग प्रोफ़ाइल सेट अप की हो.

विकल्प B: 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. पक्का करें कि आप सही टारगेट बना रहे हैं.

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

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

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

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

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

डीबग करना

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

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

अब जब आपके पास एक चालू Chrome ऐप्लिकेशन है, तो 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 में स्क्रीन शामिल हैं.

ज़रूरी साइज़:

• 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 प्रोजेक्ट फ़ाइल को खोलें:

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

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

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

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

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

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

इस्तेमाल किए जा सकने वाले Chrome API

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

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

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

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

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

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

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

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