meteor
मोबाईल ऐप्स

विभिन्न उपकरणों पर पृष्ठ लेआउट - सीएसएस

यदि आपका एप्लिकेशन विभिन्न उपकरणों पर चलने वाला है, तो उसे डिवाइस के आकार के आधार पर अलग-अलग ViewPorts को प्रस्तुत करना होगा। आप इससे दो तरह से निपट सकते हैं: जावास्क्रिप्ट नियमों या CSS मीडिया शैलियों के साथ। यदि आप MVC या MVVM लाइब्रेरी का उपयोग कर रहे हैं, जैसे कि Angular या Ember (या ब्लेज़, उस मामले के लिए) और केवल एक उपकरण या हार्डवेयर प्लेटफ़ॉर्म को लक्षित कर रहा है, तो आपको अपने MVC मॉडल को फिर से कनेक्ट करने की आवश्यकता हो सकती है क्योंकि विभिन्न हार्डवेयर व्यूअरपोर्ट हैं अपने आवेदन के लिए पेश किया।

// desktop 
@media only screen and (min-width: 960px) {
}

// landscape orientation
@media only screen and (min-width: 768px) {
}

// portrait orientation
@media only screen and (min-width: 480px) {
}

अगर आपको 768px (पोर्ट्रेट मोड) या 1024 पिक्सेल (लैंडस्केप) पर शैलियों को तोड़ना है तो आपको यह पता लगाना होगा। यह मानते हुए कि आपका लक्ष्य मोबाइल डिवाइस iPad है, जो 3: 4 अनुपात का उपयोग करता है। अन्यथा, आपको उन उपकरणों के पहलू अनुपात पर काम करना होगा जिन्हें आप लक्षित करना चाहते हैं, और वहां से थ्रेसहोल्ड स्तरों का पता लगाना है।

फिक्स्ड आकार का विंडोज

यदि आप विभिन्न मोबाइल उपकरणों के लिए निश्चित आकार स्क्रीन वाले लेआउट डिजाइन करने जा रहे हैं, तो आप डेस्कटॉप पर अपना ऐप चलाते समय उस डिज़ाइन को मिरर कर सकते हैं। निम्न विधि PhoneGap की विंडो OUTSIDE के आकार को ठीक करती है, डेस्कटॉप पर एक निश्चित आकार की विंडो देती है। कभी-कभी विकल्पों को सीमित करके उपयोगकर्ता की अपेक्षाओं और UI डिज़ाइन को प्रबंधित करना सबसे आसान होता है!

// create a window of a specific size
var w=window.open('','', 'width=100,height=100');
w.resizeTo(500,500);

// prevent window resize
var size = [window.width,window.height];  //public variable
$(window).resize(function(){
    window.resizeTo(size[0],size[1]);
});

ऑफ़लाइन कैशिंग

यह सब काम करने के लिए, आपको संभवतः ऑफ़लाइन समर्थन की आवश्यकता होगी, जिसका अर्थ है एप्लिकेशन डेटा और उपयोगकर्ता डेटा का कैशिंग।

meteor add appcache
meteor add grounddb

स्क्रॉल-बाउंस को अक्षम करें

डेस्कटॉप एप्लिकेशन पर, आप अपने ऐप को अधिक मूल अनुभव देने के लिए स्क्रॉल-बाउंस को अक्षम करना चाह सकते हैं। आप इसे जावास्क्रिप्ट के साथ कर सकते हैं, यह अक्षम करके कि ब्राउज़र DOM को कैसे नियंत्रित करता है:

// prevent scrolling on the whole page
// this is not meteorish; TODO: translate to meteor-centric code
document.ontouchmove = function(e) {e.preventDefault()};

// prevent scrolling on specific elements
// this is not meteorish; TODO: translate to meteor-centric code
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};

वैकल्पिक रूप से, आप सीएसएस, और अतिप्रवाह और स्क्रॉलिंग शैलियों का उपयोग कर सकते हैं।

#appBody {
  overflow: hidden;
}

#contentContainer {
  .content-scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

ऊपर काम करने के लिए आवश्यक वस्तु मॉडल कुछ इस तरह दिखता है:

<div id="appBody">
  <div id="contentContainer">
    <div class="content-scrollable">
      <!-- content -->
    </div>
  </div>
</div>

मल्टीटच और इशारे

मोबाइल उपकरणों में आमतौर पर कीबोर्ड नहीं होते हैं, इसलिए आपको अपने एप्लिकेशन में कुछ हैप्टिक कंट्रोलर जोड़ने की आवश्यकता होगी। जिन दो लोकप्रिय पैकेजों का उपयोग लोग करते हैं, वे हैं FastClick और हैमर। स्थापना आसान है।

meteor add fastclick
meteor add hammer:hammer

FastClick के लिए लगभग किसी कॉन्फ़िगरेशन की आवश्यकता नहीं होती है, जबकि हैमर को वायर अप करने के लिए थोड़े से काम की आवश्यकता होती है। टोडोस ऐप का अनुमानात्मक उदाहरण इस तरह दिखता है:

Template.appBody.onRendered(function() {
  if (Meteor.isCordova) {
    // set up a swipe left / right handler
    this.hammer = new Hammer(this.find('#appBody'));
    this.hammer.on('swipeleft swiperight', function(event) {
      if (event.gesture.direction === 'right') {
        Session.set(MENU_KEY, true);
      } else if (event.gesture.direction === 'left') {
        Session.set(MENU_KEY, false);
      }
    });
  }
});

अपने प्रतीक और स्पलैश स्क्रीन संपत्ति बनाएँ

इससे पहले कि आप अपना ऐप संकलित करें और इसे अपने डिवाइस पर चलाएं, आपको कुछ आइकन और स्प्लैश स्क्रीन बनाने और अपने ऐप में एक mobile-config.js फ़ाइल जोड़ने की आवश्यकता होगी।

App.icons({
  // iOS
  'iphone': 'resources/icons/icon-60x60.png',
  'iphone_2x': 'resources/icons/[email protected]',
  'ipad': 'resources/icons/icon-72x72.png',
  'ipad_2x': 'resources/icons/[email protected]',

  // Android
  'android_ldpi': 'resources/icons/icon-36x36.png',
  'android_mdpi': 'resources/icons/icon-48x48.png',
  'android_hdpi': 'resources/icons/icon-72x72.png',
  'android_xhdpi': 'resources/icons/icon-96x96.png'
});

App.launchScreens({
  // iOS
  'iphone': 'resources/splash/splash-320x480.png',
  'iphone_2x': 'resources/splash/[email protected]',
  'iphone5': 'resources/splash/[email protected]',
  'ipad_portrait': 'resources/splash/splash-768x1024.png',
  'ipad_portrait_2x': 'resources/splash/[email protected]',
  'ipad_landscape': 'resources/splash/splash-1024x768.png',
  'ipad_landscape_2x': 'resources/splash/[email protected]',

  // Android
  'android_ldpi_portrait': 'resources/splash/splash-200x320.png',
  'android_ldpi_landscape': 'resources/splash/splash-320x200.png',
  'android_mdpi_portrait': 'resources/splash/splash-320x480.png',
  'android_mdpi_landscape': 'resources/splash/splash-480x320.png',
  'android_hdpi_portrait': 'resources/splash/splash-480x800.png',
  'android_hdpi_landscape': 'resources/splash/splash-800x480.png',
  'android_xhdpi_portrait': 'resources/splash/splash-720x1280.png',
  'android_xhdpi_landscape': 'resources/splash/splash-1280x720.png'
});

उल्का कॉर्डोवा वास्तुकला पाइपलाइन

अब यह उल्का कॉर्डोवा फोनगैप एकीकरण प्रलेखन के माध्यम से जाने का समय है।

चूंकि उस दस्तावेज को लिखा गया था, एक्सकोड और योसेमाइट जारी किए गए हैं, जिससे स्थापना में कुछ हिचकी आई हैं। यहां उन चरणों को बताया गया है जिनके तहत आईओएस डिवाइस को संकलित करने के लिए हमें जाना चाहिए।

• योसेमाइट में अपग्रेड करें।
• XCode हटाएं (एप्लिकेशन फ़ोल्डर से ट्रैशेन तक खींचें)
• ऐप स्टोर से XCode 6.1 स्थापित करें।
• विभिन्न नियमों और शर्तों से सहमत हैं।

# 5.  clone and rebuild the ios-sim locally
#     (this step will not be needed in future releases)
git clone https://github.com/phonegap/ios-sim.git
cd ios-sim
rake build

# 6.  make sure we can update the .meteor/packages locations
#     (this step will not be needed in future releases)
sudo chmod -R 777 ~/.meteor/packages

# 7.  copy the new build into Meteor locations
#     (this step will not be needed in future releases)
for i in `find ~/.meteor/packages/meteor-tool/ -name ios-sim -type f`; do
  cp -R ./build/Release/ios-sim "$i"
done

# 8.  install the ios platform to your app
cd myapp
meteor list-platforms
meteor add-platform ios
meteor list-platforms

# 9.  and that there aren't dead processes
ps -ax 
kill -9 <pid>
# /Users/abigailwatson/.meteor/packages/meteor-tool/.1.0.35.wql4jh++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/mongodb/bin/mongod
# tail -f /Users/abigailwatson/Code/Medstar/dart/webapp/.meteor/local/cordova-build/platforms/ios/cordova/console.log

# 10.  make sure there are correct permissions on the application (important!)
sudo chmod -R 777 .meteor/local/

# 11.  run app
meteor run ios

# 12.  if that doesn't work, clear the directory
sudo rm -rf .meteor/local

# 13a.  run meteor again to create the default browser build
meteor

# 13b.  run it a second time so bootstrap and other packages get downloaded into the browser build
ctrl-x
meteor

# 14.  then run the ios version
ctrl-x
meteor run ios

XCode को प्रक्रिया के दौरान लॉन्च करना चाहिए। अपने सिम्युलेटर का चयन करें और 'प्ले' बटन दबाएं।

IOS विकास

• अपना Apple डेवलपर खाता पंजीकृत करें
• अपने ऐप के लिए एक ऐप आईडी रजिस्टर करें
• अपने परीक्षण उपकरणों के UUID को पंजीकृत करें
• एक iOS ऐप डेवलपमेंट प्रोविज़निंग प्रोफ़ाइल बनाएं
  • KeychainAccess से एक सर्टिफिकेट साइनिंग जनरेट करें
  • प्रमाण पत्र जमा करें
  • डाउनलोड करें और कीचेन में आयात करने के लिए प्रमाणपत्र को डबल क्लिक करें
• XCode> प्राथमिकताएं> खाते पर जाएं और अपना Apple डेवलपर खाता पंजीकृत करें

IOS उपकरण परीक्षण

• सुनिश्चित करें कि आपका विकास कार्य केंद्र और iPhone एक ही वाईफाई नेटवर्क से जुड़े हैं। टेदरिंग, हॉटस्पॉट और अन्य तदर्थ नेटवर्किंग काम नहीं करेंगे।
• भागो sudo meteor run ios-device
• अपने डिवाइस के लिए तैनात!

अपने कॉर्डोवा प्रोजेक्ट को कॉन्फ़िगर करें (config.xml)

Meteor बिल्ड के दौरान आपकी एप्लिकेशन निर्देशिका की जड़ में एक mobile-config.js फ़ाइल पढ़ता है, और कॉर्डोवा के config.xml को उत्पन्न करने के लिए वहां निर्दिष्ट सेटिंग्स का उपयोग करता है।

Project_folder
 ├── /.meteor
 └── mobile-config.js

अधिकांश कॉन्फ़िगरेशन मोबाइल- mobile-config.js (ऐप मेटाडेटा, प्राथमिकताएं, आइकन और लॉन्चस्क्रीन, साथ ही कॉर्डोवा प्लगइन्स इंस्टॉलेशन मापदंडों) के साथ प्राप्त किया जा सकता है।

App.info({
  id: 'com.example.matt.uber',
  name: 'über',
  description: 'Get über power in one button click',
  author: 'Matt Development Group',
  email: '[email protected]',
  website: 'http://example.com'
});

// Set up resources such as icons and launch screens.
App.icons({
  'iphone': 'icons/icon-60.png',
  'iphone_2x': 'icons/[email protected]',
  // ... more screen sizes and platforms ...
});

App.launchScreens({
  'iphone': 'splash/Default~iphone.png',
  'iphone_2x': 'splash/Default@2x~iphone.png',
  // ... more screen sizes and platforms ...
});

// Set PhoneGap/Cordova preferences
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'all', 'ios');

// Pass preferences for a particular PhoneGap/Cordova plugin
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
  APP_ID: '1234567890',
  API_KEY: 'supersecretapikey'
});

/.meteor/local/cordova-build/config.xml फ़ाइल को मैन्युअल रूप से संपादित न करें, क्योंकि यह प्रत्येक meteor run ios/android या meteor build पर पुनर्जीवित होगा, इसलिए आप अपने सभी संशोधनों को खो देंगे।

संदर्भ पृष्ठ: उल्का गाइड> बिल्ड> मोबाइल> अपने ऐप को कॉन्फ़िगर करना

भक्तिपूर्ण घटना का पता लगाना

बेशक, मोबाइल का पता लगाने का सबसे अच्छा तरीका हार्डवेयर के लिए सीधे आपको सूचित करना है। कॉर्डोवा फोनगैप एक 'डिवेडरेडी' ईवेंट को उजागर करता है, जिसमें आप ईवेंट श्रोता को जोड़ सकते हैं।

 document.addEventListener('deviceready', function(){
  Session.set('deviceready', true);
 }, false);