This post is the text of my presentation at Meteor Lund meetup about mobile app development with Meteor.

Meteor integrates with Cordova, a well-known Apache open source project, to build mobile apps from the same codebase you use to create regular web apps. With the Cordova integration in Meteor, you can take your existing app and run it on an iOS or Android device with a few simple commands.

Agenda

  • Tools
  • Setup
  • Packages
  • Scrolling
  • mobile-config.js
  • Cordova
  • App Store
  • Play Store
  • Native Clients
  • React Native

Tools

Android Studio for Android apps:

  meteor install-sdk android
  Install JDK
  Install Intel Accelerator

Xcode for iOS apps:

  meteor install-sdk ios

Setup

  meteor create myapp
  meteor add-platform android
  meteor add-platform ios
  meteor run android
  meteor run android-device
  meteor run ios
  meteor run ios-device
  meteor list-platforms
  meteor remove-platform ios

Packages

  meteor add fastclick
  meteor add mdg:camera
  meteor add reload-on-resume (Meteor 1.1)
  meteor add mdg:geolocation

To enable hot code push, ROOT_URL has to be set on the server.

Examples: Mobile Packages

Scrolling

Smooth scrolling:

  HTML
  <div class="scroll-area">Some content</div>

  CSS
  .scroll-area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

mobile-config.js

  App.info({
    id: 'net.easydoneit',
    name: 'Easydoneit net',
    description: 'An app built by Spartatek',
    author: 'Spartatek AB',
    email: 'contact@spartatek.se',
    version: '0.0.30',
    website: 'https://easydoneit.net/'
  });

  App.icons({
    'iphone': 'resources/icons/edi_apple_icon-60.png',
    'iphone_2x': 'resources/icons/edi_apple_icon-60x2.png',
    'iphone_3x': 'resources/icons/edi_apple_icon-60x3.png',
    'ipad': 'resources/icons/edi_apple_icon-76.png',
    'ipad_2x': 'resources/icons/edi_apple_icon-76x2.png',
    'android_ldpi': 'resources/icons/edi_android_icon-36.png',
    'android_mdpi': 'resources/icons/edi_android_icon-42.png',
    'android_hdpi': 'resources/icons/edi_android_icon-72.png',
    'android_xhdpi': 'resources/icons/edi_android_icon-96.png',
  });

  // android slash are nine-patch black border to stretch
  App.launchScreens({
    'iphone': 'resources/splash/edi_apple_splash-480.png',
    'iphone_2x': 'resources/splash/edi_apple_splash-960.png',
    'iphone5': 'resources/splash/edi_apple_splash-1136.png',
    'iphone6': 'resources/splash/edi_apple_splash-1334.png',
    'iphone6p_portrait': 'resources/splash/edi_apple_splash-2209.png',
    'iphone6p_landscape': 'resources/splash/edi_apple_splash-1242.png',
    'ipad_portrait': 'resources/splash/edi_apple_splash-1004.png',
    'ipad_portrait_2x': 'resources/splash/edi_apple_splash-2008.png',
    'ipad_landscape': 'resources/splash/edi_apple_splash-748.png',
    'ipad_landscape_2x': 'resources/splash/edi_apple_splash-1496.png',
    'android_ldpi_portrait': 'resources/splash/edi_android_splash-426.png',
    'android_ldpi_landscape': 'resources/splash/edi_android_splash-320.png',
    'android_mdpi_portrait': 'resources/splash/edi_android_splash-470.png',
    'android_mdpi_landscape': 'resources/splash/edi_android_splash-320a.png',
    'android_hdpi_portrait': 'resources/splash/edi_android_splash-640.png',
    'android_hdpi_landscape': 'resources/splash/edi_android_splash-480.png',
    'android_xhdpi_portrait': 'resources/splash/edi_android_splash-960.png',
    'android_xhdpi_landscape': 'resources/splash/edi_android_splash-720.png',
  });

  // allow loading external images from markdown
  App.accessRule("*");

Cordova

To add cordova plugins:

  meteor add cordova:cordova-plugin-camera@1.2.0

Plugins can be used after Meteor.startup().

App Store

  • Developer Account
  • Set new version in mobile-config.js

Meteor build:

  meteor build ~/meteor/builds/ --server=https://easydoneit.net
  cd ~/meteor/builds/ios/project
  open Easydoneit\ net.xcodeproj
  • Choose: Requires full screen
  • Then normal publishing process

Play Store

  • Developer Account

Generate a key to sign the app:

  keytool -genkey -alias easydoneit -keyalg RSA -keysize 2048 -validity 10000
  • Set new version in mobile-config.js

Meteor build:

  meteor build ~/meteor/builds/ --server=https://easydoneit.net
  cd ~/meteor/builds/android/
  jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 unaligned.apk easydoneit

  ENTER PASSWORD

  rm production.apk ; ~/.meteor/android_bundle/android-sdk/build-tools/20.0.0/zipalign 4 unaligned.apk production.apk

In play store: menu > APK > Upload new APK - choose production.apk

Native Clients

iOS DDP client

Android DDP client

React Native

Meteor + React Native

  npm install ddp

  DDPClient = require('ddp/lib/ddp-client')

  ddpclient = new DDPClient(
    host: 'localhost'
    port: 3000
    ssl: false
    autoReconnect: true
    autoReconnectTimer: 500
    maintainCollections: true
    ddpVersion: '1'
    useSockJs: true
  )