meteor => Mobiele apps

Pagina-indeling op verschillende apparaten - CSS

Als uw toepassing op verschillende apparaten wordt uitgevoerd, moet deze worden weergegeven naar verschillende ViewPorts, op basis van de apparaatgrootte. U kunt dit op twee manieren aanpakken: met javascript-regels of CSS-mediastijlen. Als u een MVC- of MVVM-bibliotheek gebruikt, zoals Angular of Ember (of Blaze, wat dat betreft) en u zich slechts op één apparaat of hardwareplatform hebt gericht, moet u mogelijk uw MVC-model heroverwegen omdat verschillende hardware ViewPorts zijn geïntroduceerd in uw toepassing.

// 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) {
}

Je moet uitzoeken of je de stijlen wilt breken met 768px (portretmodus) of met 1024 pixels (liggend). We gaan ervan uit dat je mobiele apparaat de iPad is, die een verhouding van 3: 4 gebruikt. Anders moet u de beeldverhoudingen berekenen van de apparaten die u wel wilt targeten en de drempelwaarden vanaf daar bepalen.

Windows met vaste grootte

Als u lay-outs gaat ontwerpen met schermen met een vast formaat voor verschillende mobiele apparaten, wilt u dat ontwerp mogelijk spiegelen wanneer u uw app op een desktop uitvoert. De volgende methode stelt de grootte van het venster BUITEN van PhoneGap vast, waardoor een venster met een vaste grootte op het bureaublad ontstaat. Soms is het het gemakkelijkst om de verwachtingen van gebruikers en het ontwerp van de gebruikersinterface te beheren door opties te beperken!

// 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]);
});

Offline caching

Om dit allemaal te laten werken, hebt u waarschijnlijk offline ondersteuning nodig, wat betekent dat toepassingsgegevens en gebruikersgegevens in de cache worden opgeslagen.

meteor add appcache
meteor add grounddb

Schakel Scroll-Bounce uit

In desktop-apps wilt u misschien het scroll-bounce uitschakelen om uw app een meer native gevoel te geven. U kunt dit doen met javascript, door uit te schakelen hoe de browser de DOM bestuurt:

// 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()};

Als alternatief kunt u css en de overloop- en schuifstijlen gebruiken.

#appBody {
  overflow: hidden;
}

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

Het objectmodel dat nodig is om het bovenstaande te laten werken, ziet er ongeveer zo uit:

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

Multitouch & gebaren

Mobiele apparaten hebben over het algemeen geen toetsenborden, dus je moet een paar haptische controllers toevoegen aan je applicatie. De twee populaire pakketten die mensen lijken te gebruiken zijn FastClick en Hammer. Installatie is eenvoudig.

meteor add fastclick
meteor add hammer:hammer

FastClick vereist bijna geen configuratie, terwijl Hammer wat werk vereist om de draad te sluiten. Het cononische voorbeeld uit de Todos-app ziet er als volgt uit:

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);
      }
    });
  }
});

Maak uw pictogrammen en Splash Screen Assets

Voordat u uw app compileert en op uw apparaat uitvoert, moet u enkele pictogrammen en splash-schermen maken en een mobile-config.js bestand aan uw app toevoegen.

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'
});

Meteor Cordova Architecture Pipeline

Nu is het tijd om de documentatie van Meteor Cordova Phonegap Integration door te nemen.

Sinds die documentatie is geschreven, zijn XCode en Yosemite vrijgegeven, wat voor een paar hik tijdens de installatie heeft gezorgd. Hier zijn de stappen die we moesten doorlopen om Meteor op een iOS-apparaat te compileren.

Upgrade naar Yosemite.
XCode verwijderen (slepen van de map Programma's naar de prullenbak)
Installeer XCode 6.1 vanuit de app store.
Ga akkoord met verschillende algemene voorwaarden.

# 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 moet tijdens het proces worden gestart. Selecteer uw simulator en druk op de knop 'Spelen'.

IOS-ontwikkeling

Registreer uw Apple Developer-account
Registreer een app-ID voor uw app
Registreer de UUID van uw testapparatuur
Genereer een inrichtingsprofiel voor iOS App Development
- Genereer een CertificateSigningRequest van KeychainAccess
- Verzend CertificateSigningRequest naar https://developer.apple.com/account/ios/profile/profileCreate.action
- Download en dubbelklik op het certificaat om in Keychain te importeren
Ga naar XCode> Voorkeuren> Accounts en registreer uw Apple Developer-account

IOS apparaat testen

Zorg ervoor dat uw ontwikkelingswerkstation en iPhone zijn verbonden met hetzelfde wifi-netwerk. Tethering, hotspots en ander ad-hocnetwerk werken niet.
Voer sudo meteor run ios-device
Implementeer op uw apparaat!

Configureer uw Cordova-project (config.xml)

Meteor leest een mobile-config.js bestand in de root van je app-directory tijdens het bouwen en gebruikt de daar opgegeven instellingen om de config.xml Cordova te genereren.

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

De meeste configuraties kunnen worden bereikt met mobile-config.js (metagegevens van apps, voorkeuren, pictogrammen en startschermen, evenals installatieparameters van Cordova-plug-ins).

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'
});

Bewerk het bestand /.meteor/local/cordova-build/config.xml niet handmatig, omdat het bij elke meteor run ios/android of meteor build wordt geregenereerd, waardoor u al uw wijzigingen verliest.

Referentiepagina: Meteor Guide> Build> Mobile> Uw app configureren

De deviceready-gebeurtenis detecteren

De beste manier om mobiel te detecteren, is natuurlijk dat de hardware u rechtstreeks op de hoogte brengt. Cordova PhoneGap onthult een 'deviceready'-gebeurtenis, waaraan u een gebeurtenis-luisteraar kunt toevoegen.

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

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

meteor
Mobiele apps

Zoeken…