Meteor tutorial - Part II - Building mobile applications

In my previous blog post, I have explained basics of meteor. In this tutorial I am going to add mobile support to the existing meteor application.

Installing mobile SDKs

Before going to start we need to install IOS and android SDKs (Software development kit). Here I am installing SDKs for iOS. Please keep in mind this is one time process.

For installing iOS SDKs, we need to invoke “meteor install-sdk ios”.

The same way you can install android SKDs by invoking “meteor install-sdk android” command.

Adding mobile platform support

I am using already created application called “myapp” and going to add iOS platform support by invoking a command “meteor add-platform ios”.

We can add android platform by invoking a command  “meteor add-platform android”.

Running application on mobile emulator

Once we add mobile platform then we can run our application by using real mobile device or emulator. I have added IOS platform to myapp already. Now I am going to run that application by using iPhone emulator by invoking command called “meteor run ios”. 

Whenever we run above command that will add cordova support to the application and convert our web application into mobile hybrid application by using cordova. Cordova internally use webview for rendering web page. If everything is done, you can see iPhone simulator, that will display our web page.

Running application

By using same way we can launch android simulator by invoking “meteor run android” command.

Running application on real device

We can run our application on real device by invoking below commands.

For iOS - meteor run ios-device

For android - meteor run android-device

Obviously the mobile should be connected to the computer. For iOS, we need to install corresponding provisioning profile into the device before using it for testing. 

Personally I like this approach because there is no real IDE like XCode, Eclipse involved in this process. This is really helpful for beginners because it is very simple and hides lot of internal mechanism involved in the process.

Configuring mobile app – metadata

In mobile application we need to configure lot of information in info.plist (for iOS) and android manifestfile.xml (for android). The meteor simplifies lot of stuffs, which involved in the configuration. For configuring, we simply need to create a JavaScript file called mobile-config.js and needs to include our configuration. Look into the below url for more information. 

http://docs.meteor.com/#/full/mobileconfigjs

Conclusion

In this tutorial we got steps involved in,

1. Adding mobile support to meteor application.

2. Running application on emulators.

3. Running application on real devices

4. Configuring mobile application metadata by using mobile-config.js.

In my next tutorial, I am going to explain internal architecture of the meteor application.