Skip to main content

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. 


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. 


Linoy K George said…
Good Gnana, thanks for the information. Keep writing. Waiting for the next part.
Linoy K George said…
This comment has been removed by the author.
Unknown said…

This is really a great post. Thank you for taking time to provide us some of the useful and exclusive information with us. Keep on blogging!
Melisa said…
Thanks Admin for sharing such a useful post, I hope it’s useful to many individuals for whose looking this precious information to developing their skill.
Android Training in Chennai|Android Course in Chennai|Android Training Chennai|iOS Training|iOS Course in Chennai
Gopi said…
Good information and It will be really helpful for the mobile application developers!! The screenshots explain more to understand better!! Check our mobile application blogs also.
Best Android Training in Chennai | Best Android Training institute in Chennai
joyti said…
We share it this article blog information is very effectively.We post this information is exclusive content.Keep it touch!!!
Selenium Training in Chennai | Selenium Training Institutes in Chennai
Unknown said…
Good one... interesting article, thanks for sharing your views and information.. it is very useful to me...
Java Training in chennai | IOS Training in chennai with placement
srihariparu said…
This comment has been removed by the author.
Unknown said…
The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. IOT is one such technology where all the things communicate through the cloud, make decisions, and share information. To know more about the course there are many training institutes who provide complete IOT Training effectively
Very informative blog, keep posting learn more about aws with cloud computing.
Cognex providing was a course in Chennai. Cognex has a high quality of service and development.
AWS becoming a strong career opportunity in IT. Amazon Web Services (AWS) is a secure cloud services platform. To study AWS course check Cognex Technologies in Chennai
To visit the website, click here
Tshewangpema said…
The blog content contains informative information which I found pretty interesting. This is surely going to help those looking to know about cloud computing. similar to this post, I am here with the information to share about the most happening course of digital marketing in India. Visit digital marketing course in Delhi
to know about the details.
Anonymous said…
Great blog. Thanks for sharing your views with us. Know more Digital marketing course in delhi
Anonymous said…
Great content. The views are surely going to love it. Similar to this content, we have exciting content. To know more digital marketing course in Delhi

Popular posts from this blog

Ext JS 4 – Creating web page using Ext.container.Viewport class and region propery

The Ext.container.Viewport is used for creating general web page and region property is used for splitting web page into different parts. Ext.container.Viewport is a specialized container represents the viewable area of the application (the browser area). It render itself to the document body, there is no need for providing renderTo property and it automatically sizes itself to size of the browser viewport. The viewport also re-size the child elements based on view area(based on browser width and height). The default layout of the viewport is border layout and we can customize this property according to our requirements. The viewport does not provide any scrolling. If necessary, the child elements(generally panels) within viewport needs to provide a scroll feature by using autoScroll property. See the below example for better understanding. This is Home.js file placed into app/view folder. Ext.define('MyApp.view.Home', { extend : 'Ext.container.Viewport&#

Simple Login Application Using Spring MVC and Hibernate – Part 1

 I hope developers working in web application development might hear about MVC architecture. Almost all technologies provide support for MVC based web application development, but the success is based on many factors like reusable of the code, maintenance of the code, future adaption of the code, etc..,  The success of the Spring MVC is “ Open for extension and closed for modification ” principle. Using Spring MVC the developers can easily develop MVC based web application. We don’t need any steep learning curve at the same time we need to know the basics of spring framework and MVC architecture. The Spring MVC consists of following important components. 1. Dispatcher servlet 2. Controller 3. View Resolver 4. Model Spring MVC - Overview  The overall architecture of Spring MVC is shown here.  1. When “Dispatcher Servlet” gets any request from client, it finds the corresponding mapped controller for the request and just dispatches the request to the corresponding contro

Getting key/value pair from JSON object and getting variable name and value from JavaScript object.

 Hi, I had faced one issue like this. I have an JSON object but I don't know any key name but I need to get the all the key and corresponding value from JSON object using client side JavaScript. Suddenly I wondered whether it's possible or not, after that I had done lot of workaround and finally got this solution. See the below example.    function getKeyValueFromJSON() {     var jsonObj =  {a:10,b:20,c:30,d:50} ;     for ( var key in jsonObj) {       alert( "Key: " + key + " value: " + jsonObj[key]);     }  }  In this example I have created the one json array as string, and converted this string into JSON object using eval() function. Using for-each loop I got all the key value from jsonObj, and finally using that key I got the corresponding value.  Finally I got the alert like this,    Key: a value:10    Key: b value:20    Key: c value:30    Key: d value:50  During this workaround I got one more idea, using this same way I got