meteor => App per dispositivi mobili

Layout di pagina su diversi dispositivi - CSS

Se l'applicazione verrà eseguita su dispositivi diversi, sarà necessario eseguire il rendering su diversi ViewPort, in base alle dimensioni del dispositivo. Puoi gestirlo in due modi: con le regole javascript o con gli stili multimediali CSS. Se hai utilizzato una libreria MVC o MVVM, come Angular o Ember (o Blaze, se è per questo) e hai scelto come target solo un singolo dispositivo o piattaforma hardware, potresti dover ripensare il tuo modello MVC in quanto i diversi ViewPort hardware sono presentato alla tua domanda.

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

Avrai bisogno di capire se vuoi rompere gli stili a 768px (modalità verticale) oa 1024 pixel (orizzontale). Ciò presuppone che il tuo dispositivo mobile di destinazione sia l'iPad, che utilizza un rapporto 3: 4. In caso contrario, dovrai calcolare le proporzioni dei dispositivi che desideri utilizzare come target e calcolare i livelli di soglia da lì.

Risolto il problema delle dimensioni

Se stai progettando layout con schermi di dimensioni fisse per diversi dispositivi mobili, potresti voler rispecchiare il progetto quando esegui l'app su un desktop. Il seguente metodo corregge le dimensioni della finestra OUTSIDE di PhoneGap, fornendo una finestra a dimensione fissa sul desktop. A volte è più semplice gestire le aspettative dell'utente e la progettazione dell'interfaccia utente limitando le opzioni!

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

Memorizzazione nella cache offline

Per far funzionare tutto questo, probabilmente avrai bisogno del supporto offline, il che significa memorizzare nella cache i dati delle applicazioni e i dati dell'utente.

meteor add appcache
meteor add grounddb

Disattiva Scroll-Bounce

Nelle app desktop, potresti voler disattivare la funzione di scorrimento a scorrimento per dare alla tua app una sensazione più nativa. Puoi farlo con javascript, disabilitando il modo in cui il browser controlla il 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()};

In alternativa, puoi usare css e gli stili di overflow e scorrimento.

#appBody {
  overflow: hidden;
}

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

Il modello di oggetti necessario per il funzionamento di cui sopra ha un aspetto simile al seguente:

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

Multitouch e gesti

I dispositivi mobili in genere non hanno tastiere, quindi dovrai aggiungere alcuni controller tattili alla tua applicazione. I due pacchetti popolari che le persone sembrano utilizzare sono FastClick e Hammer. L'installazione è facile.

meteor add fastclick
meteor add hammer:hammer

FastClick richiede quasi nessuna configurazione, mentre Hammer richiede un po 'di lavoro da cablare. L'esempio cononico dell'app Todos è simile a questo:

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

Crea le tue icone e le risorse dello schermo Splash

Prima di compilare la tua app ed eseguirla sul tuo dispositivo, dovrai creare alcune icone e schermate mobile-config.js e aggiungere un file mobile-config.js alla tua app.

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

Pipeline di Meteor Cordova Architecture

Ora è il momento di consultare la documentazione sull'integrazione di Meteor Cordova Phonegap .

Da quando è stata scritta la documentazione, sono stati rilasciati XCode e Yosemite, che ha causato alcuni problemi nell'installazione. Ecco i passaggi che abbiamo dovuto seguire per ottenere Meteor compilato su un dispositivo iOS.

Esegui l'upgrade a Yosemite.
Elimina XCode (trascina dalla cartella Applicazioni a Cestino)
Installa XCode 6.1 dall'app store.
Accetto i vari termini e condizioni.

# 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 dovrebbe avviarsi durante il processo. Seleziona il tuo simulatore e premi il pulsante "Gioca".

Sviluppo IOS

Registra il tuo account sviluppatore Apple
Registra un ID app per la tua app
Registra l'UUID dei tuoi dispositivi di test
Genera un profilo di provisioning per lo sviluppo di app per iOS
- Genera un CertificateSigningRequest da KeychainAccess
- Invia CertificateSigningRequest a https://developer.apple.com/account/ios/profile/profileCreate.action
- Scarica e fai doppio clic sul certificato da importare in Portachiavi
Vai a XCode> Preferenze> Account e registra il tuo account sviluppatore Apple

Test dei dispositivi IOS

Assicurati che la tua workstation di sviluppo e l'iPhone siano connessi alla stessa rete WiFi. Tethering, hotspot e altre reti ad hoc non funzioneranno.
Esegui sudo meteor run ios-device
Distribuisci sul tuo dispositivo!

Configura il tuo progetto Cordova (config.xml)

Meteor legge un file mobile-config.js nella directory principale della directory dell'app durante la compilazione e utilizza le impostazioni specificate per generare il file config.xml di Cordova.

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

La maggior parte delle configurazioni può essere ottenuta con mobile-config.js (metadati dell'app, preferenze, icone e launchscreens, oltre ai parametri di installazione dei plug-in Cordova).

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

Non modificare manualmente il file /.meteor/local/cordova-build/config.xml , poiché verrà rigenerato in ogni meteor run ios/android o meteor build , quindi perderai tutte le tue modifiche.

Pagina di riferimento: Meteor Guide> Build> Mobile> Configurazione della tua app

Rilevare l'evento deviceready

Naturalmente, il modo migliore per rilevare i dispositivi mobili è che l'hardware ti informi direttamente. Cordova PhoneGap espone un evento 'deviceready', a cui è possibile aggiungere un listener di eventi.

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

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

meteor
App per dispositivi mobili

Ricerca…