meteor => Application mobile

Mise en page sur différents appareils - CSS

Si votre application doit s'exécuter sur différents périphériques, il faudra la rendre dans différents ViewPorts, en fonction de la taille de l'appareil. Vous pouvez y faire face de deux manières: avec des règles javascript ou des styles de support CSS. Si vous avez utilisé une bibliothèque MVC ou MVVM, telle que Angular ou Ember (ou Blaze, par exemple) et que vous ne ciblez qu'un seul périphérique ou une seule plate-forme matérielle, vous devrez peut-être repenser votre modèle MVC. présenté à votre application.

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

Vous devrez déterminer si vous voulez casser les styles à 768px (mode portrait) ou à 1024 pixels (paysage). En supposant que votre appareil mobile cible soit l'iPad, qui utilise un ratio de 3: 4. Sinon, vous devrez déterminer les proportions des périphériques que vous souhaitez cibler et déterminer les niveaux de seuil à partir de là.

Windows de taille fixe

Si vous envisagez de concevoir des mises en page avec des écrans de taille fixe pour différents appareils mobiles, vous souhaiterez peut-être reproduire cette conception lors de l'exécution de votre application sur un bureau. La méthode suivante corrige la taille de la fenêtre OUTSIDE de PhoneGap, donnant une fenêtre de taille fixe sur le bureau. Parfois, il est plus facile de gérer les attentes des utilisateurs et la conception de l'interface utilisateur en limitant les options!

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

Mise en cache hors ligne

Pour que tout cela fonctionne, vous aurez probablement besoin d'une assistance hors ligne, ce qui signifie la mise en cache des données d'application et des données utilisateur.

meteor add appcache
meteor add grounddb

Désactiver Scroll-Bounce

Sur les applications de bureau, vous pouvez désactiver le défilement-défilement pour donner à votre application un aspect plus natif. Vous pouvez le faire avec JavaScript, en désactivant la façon dont le navigateur contrôle le 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()};

Vous pouvez également utiliser css, ainsi que les styles de débordement et de défilement.

#appBody {
  overflow: hidden;
}

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

Le modèle d'objet nécessaire au fonctionnement ci-dessus ressemble à ceci:

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

Multitouch et gestes

Les appareils mobiles n'ont généralement pas de clavier, vous devrez donc ajouter des contrôleurs haptiques à votre application. Les deux paquets populaires que les gens semblent utiliser sont FastClick et Hammer. L'installation est facile.

meteor add fastclick
meteor add hammer:hammer

FastClick ne nécessite presque aucune configuration, tandis que Hammer nécessite un peu de travail pour se connecter. L'exemple cononical de l'application Todos ressemble à ceci:

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

Créez vos icônes et vos ressources d'écran de démarrage

Avant de compiler votre application et de l'exécuter sur votre appareil, vous devez créer des icônes et des écrans de démarrage et ajouter un fichier mobile-config.js à votre application.

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 d'Architecture Meteor Cordova

Maintenant, il est temps de passer par la documentation de Meteor Cordova Phonegap Integration .

Depuis que cette documentation a été écrite, XCode et Yosemite ont été publiés, ce qui a causé quelques problèmes lors de l'installation. Voici les étapes à suivre pour compiler Meteor sur un appareil iOS.

Passez à Yosemite.
Supprimer XCode (faites glisser depuis le dossier Applications vers la corbeille)
Installez XCode 6.1 à partir de l'App Store.
Acceptez les différents termes et conditions.

# 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 doit être lancé pendant le processus. Sélectionnez votre simulateur et appuyez sur le bouton 'Play'.

Développement IOS

Enregistrez votre compte de développeur Apple
Enregistrer un identifiant d'application pour votre application
Enregistrez l'UUID de vos appareils de test
Générer un profil d'approvisionnement iOS App Development
- Générer un CertificateSigningRequest à partir de KeychainAccess
- Soumettez CertificateSigningRequest à https://developer.apple.com/account/ios/profile/profileCreate.action
- Téléchargez et double-cliquez sur le certificat à importer dans Keychain
Accédez à XCode> Préférences> Comptes et enregistrez votre compte de développeur Apple.

Test de périphérique IOS

Assurez-vous que votre poste de travail de développement et votre iPhone sont connectés au même réseau WiFi. Le partage de connexion, les zones sensibles et d'autres réseaux ad hoc ne fonctionneront pas.
Exécuter sudo meteor run ios-device
Déployez sur votre appareil!

Configurez votre projet Cordova (config.xml)

Meteor lit un fichier mobile-config.js à la racine de votre répertoire d'application pendant la génération et utilise les paramètres spécifiés pour générer le config.xml de Cordova.

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

La plupart des configurations peuvent être réalisées avec mobile-config.js (métadonnées d'application, préférences, icônes et écrans de lancement, ainsi que les paramètres d'installation des plug-ins 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'
});

Ne modifiez pas manuellement le fichier /.meteor/local/cordova-build/config.xml , car il sera régénéré lors de chaque meteor build meteor run ios/android ou meteor build , vous perdrez ainsi toutes vos modifications.

Page de référence: Meteor Guide> Build> Mobile> Configurer votre application

Détecter l'événement déviant

Bien entendu, le meilleur moyen de détecter le mobile est que le matériel vous avertisse directement. Cordova PhoneGap expose un événement «deviceready», auquel vous pouvez ajouter un écouteur d'événement.

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

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

meteor
Application mobile

Recherche…