meteor => Aplicaciones móviles

Diseño de página en diferentes dispositivos - CSS

Si su aplicación va a ejecutarse en diferentes dispositivos, deberá renderizar a diferentes ViewPorts, según el tamaño del dispositivo. Puede lidiar con esto de dos maneras: con reglas de javascript o estilos de medios CSS. Si ha estado usando una biblioteca de MVC o MVVM, como Angular o Ember (o Blaze, por cierto) y solo se ha dirigido a un solo dispositivo o plataforma de hardware, es posible que deba reconsiderar su modelo de MVC, ya que los diferentes puertos de vista del hardware son introducido a su aplicación.

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

Tendrá que averiguar si desea romper los estilos a 768 píxeles (modo vertical) o a 1024 píxeles (paisaje). Suponiendo que su dispositivo móvil de destino sea el iPad, que utiliza una proporción de 3: 4. De lo contrario, deberá establecer las relaciones de aspecto de los dispositivos a los que desea apuntar y determinar los niveles de umbral a partir de ahí.

Windows de tamaño fijo

Si va a diseñar diseños con pantallas de tamaño fijo para diferentes dispositivos móviles, es posible que desee reflejar ese diseño cuando ejecute su aplicación en un escritorio. El siguiente método corrige el tamaño de la ventana FUERA de PhoneGap, dando una ventana de tamaño fijo en el escritorio. A veces es más fácil administrar las expectativas del usuario y el diseño de la interfaz de usuario limitando las opciones.

// 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

Para que todo esto funcione, es probable que necesites asistencia sin conexión, lo que significa el almacenamiento en caché de los datos de la aplicación y los datos del usuario.

meteor add appcache
meteor add grounddb

Deshabilitar Scroll-Bounce

En las aplicaciones de escritorio, es posible que desee deshabilitar el rebote de desplazamiento para dar a su aplicación una sensación más nativa. Puedes hacer esto con javascript, deshabilitando cómo el navegador controla el 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()};

Alternativamente, puede usar css, y los estilos de desbordamiento y desplazamiento.

#appBody {
  overflow: hidden;
}

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

El modelo de objeto necesario para que funcione lo anterior es algo así:

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

Multitouch y gestos

Los dispositivos móviles generalmente no tienen teclados, por lo que deberá agregar algunos controladores hápticos a su aplicación. Los dos paquetes populares que la gente parece estar usando son FastClick y Hammer. La instalación es fácil.

meteor add fastclick
meteor add hammer:hammer

FastClick casi no requiere configuración, mientras que Hammer requiere un poco de trabajo para conectarse. El ejemplo cónico de la aplicación Todos se ve así:

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 tus iconos y activos de pantalla de bienvenida

Antes de compilar su aplicación y ejecutarla en su dispositivo, necesitará crear algunos íconos y pantallas mobile-config.js y agregar un archivo mobile-config.js a su aplicación.

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

Ahora es el momento de revisar la documentación de integración de Phonegap de Meteor Cordova .

Desde que se escribió esa documentación, XCode y Yosemite han sido liberados, lo que ha causado algunos problemas en la instalación. Estos son los pasos que tuvimos que seguir para compilar Meteor en un dispositivo iOS.

Actualizar a Yosemite.
Eliminar XCode (arrastre desde la carpeta Aplicaciones a la Papelera)
Instale XCode 6.1 desde la tienda de aplicaciones.
De acuerdo con varios términos y condiciones.

# 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 debería iniciarse durante el proceso. Selecciona tu simulador y presiona el botón 'Play'.

Desarrollo IOS

Registre su cuenta de desarrollador de Apple
Registre un ID de aplicación para su aplicación
Registre el UUID de sus dispositivos de prueba
Generar un perfil de aprovisionamiento de desarrollo de aplicaciones iOS
- Generar un CertificateSigningRequest desde KeychainAccess
- Enviar CertificateSigningRequest a https://developer.apple.com/account/ios/profile/profileCreate.action
- Descargue y haga doble clic en el certificado para importarlo a Keychain
Vaya a XCode> Preferencias> Cuentas y registre su cuenta de desarrollador de Apple

Pruebas de dispositivos IOS

Asegúrese de que su estación de trabajo de desarrollo y su iPhone estén conectados a la misma red WiFi. Tethering, hotspots y otras redes ad-hoc no funcionarán.
Ejecutar sudo meteor run ios-device
Despliegue en su dispositivo!

Configure su proyecto Cordova (config.xml)

Meteor lee un archivo mobile-config.js en la raíz de su directorio de aplicaciones durante la compilación, y usa la configuración especificada allí para generar el config.xml de Cordova.

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

La mayoría de las configuraciones se pueden lograr con mobile-config.js (metadatos de la aplicación, preferencias, iconos y pantallas de inicio, así como con los parámetros de instalación de los complementos de 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'
});

No edite manualmente el archivo /.meteor/local/cordova-build/config.xml , ya que se regenerará en cada meteor build meteor run ios/android o meteor build , por lo que perderá todas sus modificaciones.

Página de referencia: Guía Meteor> Construir> Móvil> Configurar su aplicación

Detectando el evento deviceready

Por supuesto, la mejor forma de detectar dispositivos móviles es que el hardware se lo notifique directamente. Cordova PhoneGap expone un evento 'deviceready', al que puede agregar un detector de eventos.

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

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

meteor
Aplicaciones móviles

Buscar..