Developing mobile apps with Meteor
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
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
)