featured,
javascript,
Jquery,
meteor js
A Beginners Guide to Meteor Js Mobile Development Part - 1
If you’re a web developer who wants to release their work on iOS and Android (while harnessing the features of those platforms), you don’t have to learn a new language or entirely new concepts. You just need a basic grasp of Meteor, and then a basic grasp of details specific to mobile development.
Step #1: Prepare for mobile development with Meteor.
Obviously, you’ll need to install Meteor on your computer if you’re looking to develop with it. If it’s not installed, enter this command into the terminal:
curl https://install.meteor.com/ | sh
You’ll need a basic grasp of Meteor, so either check out the “Learning Resources” section of the official website, or the book I wrote for beginners.
To develop for iOS, a copy of Xcode needs to be installed on your system. This can be downloaded for free from the Mac App Store.
Step #2: Add mobile support to a project.
Cordova is included with Meteor itself but has to be manually added to any particular Meteor project. This avoids bloating every project with code it may not need. You add support for Cordova by adding specific platforms.
For example, to add support for iOS, enter the following into the terminal:
meteor add-platform ios
Or to add support for Android, enter the following into the terminal:
meteor add-platform android
When adding support for Android, you’ll be prompted to install any relevant software that is not already installed.
Step #3: Create a mobile configuration file.
Within your project folder, create a
mobile-config.js file. Inside this file, we’re able to set a number of configuration options for the mobile portion of the application, including:- Meta-data, like the application name and description.
- Preferences, like the default orientation of the application.
- Additional preferences for specific Cordova plugins.
You can see an example of this configuration in the official Meteor docs:
// This section sets up some basic app metadata,
// the entire section is optional.
App.info({
id: 'com.example.matt.uber',
name: 'über',
description: 'Get über power in one button click',
author: 'Matt Development Group',
email: 'contact@example.com',
website: 'http://example.com'
});
// Set up resources such as icons and launch screens.
App.icons({
'iphone': 'icons/icon-60.png',
'iphone_2x': 'icons/icon-60@2x.png',
// ... 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);
// Pass preferences for a particular PhoneGap/Cordova plugin
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: '1234567890',
API_KEY: 'supersecretapikey'
});
For a full run-down of the available options, check out the “The config.xml File” section of the Cordova documentation.
Step #4: Write Cordova-only Code.
By making mobile applications with Meteor, you can write the majority of the functionality once. Most of the code will work across platforms. But not all code should run across platforms and in the same way we can control whether or not certain code runs on the client or the server with the
isClient andisServer conditionals, there’s also a isCordova conditional:if(Meteor.isCordova){
// code goes here
}
The above block of code will only run if it’s being executed within a Cordova mobile environment. (We won’t use this code in this particular tutorial but it won’t take long to find a situation where it comes in handy.)
To Be continued..... in Part- 2
0 comments