javascript,
Jquery,
meteor js
A Beginners Guide to Meteor Js Mobile Development Part - 2
Step #5: Add mobile packages to your application.
Currently, there are three official Meteor packages that make it easy to add mobile features to your application:
- Camera, for taking photos on either mobile devices or desktop computers.
- Geolocation, for tracking the user’s location with a device’s GPS.
- Reload on Resume, which can notify users when an update is available for the application and encourage them to restart to see the changes.
Further, unofficial packages can be found on atmospherejs.com.
The links above provide documentation on how to use all of these packages and they’re simple enough that you can probably understand them without further explanation. As an example, let’s play around with the “Camera” package.
What we’ll do is create a button that, when clicked, opens the camera on the user’s device (Android, iOS, or desktop) and allows them to take a photo. If they take a photo, that data will be returned to the application and we’ll be able to do whatever we want with the picture.
First, add the “Camera” package to the project:
meteor add mdg:camera
Then delete the contents of your project’s default HTML file and replace it with the following:
<head>
<title>Camera Example</title>
</head>
<body>
{{> takePhoto}}
</body>
<template name="takePhoto">
<p><input type="button" class="capture" value="Take Photo"></p>
</template>
Here, we’re creating an interface that contains a “Take Photo” button.
Inside the default JavaScript file, delete the current contents and replace it with the following:
if(Meteor.isClient){
Template.takePhoto.events({
'click .capture': function(){
console.log("Button clicked.");
}
});
}
Because of this event we’ve now created, a message will appear inside the JavaScript Console whenever the button is clicked (or in the case of a smart phone, whenever the button is tapped).
Within this event, write the following:
MeteorCamera.getPicture();
This is the function that’s built into the “Camera” package that allows us to tap into the user’s hardware to capture a photo. It accepts two parameters:
- Options, such as setting the width and height for the photo.
- A callback function, for retrieving the data of the photo.
Just for the moment, we won’t pass through any options:
MeteorCamera.getPicture({});
But we will pass through a callback function as the second parameter:
MeteorCamera.getPicture({}, function(error, data){
// something goes here
});
Because of this callback function, we can now retrieve any errors, along with the data of the captured photo. To see this in action, use a log statement:
MeteorCamera.getPicture({}, function(error, data){
console.log(data);
});
Test the application on a webcam-enabled computer and notice that a URL appears in the Console after you’ve captured a photo. We can use this URL to embed the photo within the interface.
First, store the image data inside a session:
MeteorCamera.getPicture({}, function(error, data){
Session.set('photo', data);
});
Then create a
helpers block for the “takePhoto” template:Template.takePhoto.helpers({
'photo': function(){
/// code goes here
}
});
Here, I’ve created a “photo” helper that we’ll embed in our template in a moment, but we’ll need to return the value of the “photo” session:
Template.takePhoto.helpers({
'photo': function(){
return Session.get('photo');
}
});
Then, in the “takePhoto” template, simply reference this helper:
<template name="takePhoto">
<p><input type="button" class="capture" value="Take Photo"></p>
<p>{{photo}}</p>
</template>
Now when we capture a photo, a similar string from before will appear inside the interface, and that string will work perfectly fine within the
src attribute of an img tag:<template name="takePhoto">
<p><input type="button" class="capture" value="Take Photo"></p>
<p><img src="{{photo}}"></p>
</template>
But of course, we’re only executing this code on a computer at the moment, when what we really want is to execute it within a mobile application.
Step #6: Test your application.
You can run the application within the iOS simulator by enter the following command into the command line:
meteor run ios
Note that the photo feature won’t actually work within the iOS simulator. It’ll work on the phone itself, and in the Android simulator, and in a desktop browser, but not in the iOS simulator. (You can, however, use the other mobile packages, so I’d suggest playing around with them.)
To run the application within the Android simulator, use this command:
meteor run android
If you haven’t yet used the
meteor add-platform android command, you will have so install some additional software, but the terminal will guide you through this process.Conclusion
In this tutorial, we’ve only covered the basics of creating a mobile-friendly application with Meteor, but I hope it’s been enough to entice you to dig further. Meteor is a wonderfully fun framework and, while building mobile applications natively might make more sense in many cases, the Cordova integration nevertheless provides an elegant option for people who aren’t interested in learning a whole other technology.
0 comments