Build a Mobile Dude App with PhoneGap and jQuery Mobile

Dipping my toes into mobile app development has been on my to-do list for long enough that I feel like I’ve missed the boat. Not that there aren’t enough boats to go around. But when I heard about PhoneGap, I thought maybe I found an easy way in. There is something that lets me build a mobile app using just HTML, CSS and Javascript? It sounds too good to be true. I decided to find out.

I admit I’m not thrilled about writing lots of HTML and CSS, and I’d like to get something that looks decent quickly. So I decided to use jQuery Mobile to get me what I wanted. I’ve no idea how easily this will come together. Let’s find out.

The App

I run a lot of tabletop games, so I wanted to make something that would work in that context. I settled on the idea of making an app that would generate basic random characters for me. It would be easy enough to do all this as a single-page application, but I want to do add some hardware things: shake the phone to get a new character, and use the camera to add a picture to the character.

Make A Dude

I decided to build just an Android app for now, so I just followed the basic PhoneGap Android Setup Guide to get up and running. Then I built the main page of the application in HTML and Javascript. It mostly consists of some JSON objects containing names and descriptors, and enough HTML to show me that information.

Simply refreshing this page would repopulate all of the various fields. But shaking the device to reload will be cooler. Now it’s time to get into the PhoneGap stuff.

Shake A Dude

The basic accelerometer code for handling shake events is pretty simple. Based on what was listed in the PhoneGap wiki I came up with this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

varshaker=newAccelerometer();

vartracker=shaker.watchAcceleration(

function(measure){

// This one fires for success

if(measure.is_updating==true){

return;

}else{

if(measure.x&gt;=1.5){

makeADude();

}

}

},

function(measure){

// This one fires for errors, which I’m ignoring

},

{frequency:500}

);

Normally, when you’re doing jQuery stuff, you need to wait until the document is ready before trying jQuery type things. You usually see this done like so:

1

2

3

4

5

6

7

8

$(document).ready(function(){

makeADude();

});

functionmakeADude(){

// Update spans with random text using $(‘#spanname’).text();

...

}

And if you’re using jQuery in this context, you might be tempted to do this:

1

2

3

4

5

6

7

8

9

$(document).ready(function(){

makeADude();

varshaker=newAccelerometer();

vartracker=shaker.watchAcceleration(

// All That Code From Above

...

);

});

That Won’t Work.

Similar to the way you need to wait for a document level ready event before trying to use jQuery, you need to wait for a device level deviceready event before trying to use PhoneGap. It would be really nice if we could listen for that event the same way jQuery does, but instead we need to use document.addEventListener:

1

2

3

4

5

6

7

8

document.addEventListener('deviceready',function(){

varshaker=newAccelerometer();

vartracker=shaker.watchAcceleration(

// All That Code From Above

...

);

});

I tried a couple of ways to see if I could listen for deviceready using jQuery, but I didn’t have any luck. I’m sure there’s a way to do it, but I wanted to keep moving on. The threshold value for the accelerometer and the frequency value could use some tweaking, but right now it works. Time to move on to adding a picture.

Give The Dude A Face

I want to use the device’s camera to take a picture of someone or something to use as a profile picture. I’ll start by adding a button to the bottom of the page, along with an empty image:

1

2

3

&lt;li&gt;&lt;input type="button"id="photo"value="Give This Dude A Face"/&gt;&lt;/li&gt;

...

&lt;img src=""id="profile"width="320px"height="480px"/&gt;

Then I wired up the button to some PhoneGap code:

1

2

3

4

5

6

7

8

9

10

11

12

$("#photo").click(function(){

varcam=newCamera();

cam.getPicture(

function(location){

$("#profile").attr("src",location);

},

function(message){

// Handles Failures

},

{quality:50,destinationType:Camera.DestinationType.FILE_URI}

);

});

This code is more or less straight off the API documentation. We’re passing cam.getPicture two functions (success and error), and a JSON object of options. Passing in the destinationType of “Camera.DestinationType.FILE_URI“ tells PhoneGap to give me the location of the file, rather than the raw file data. In the success function, we’re updating the src attribute of the profile image to be the URI of the picture we just took.

How well does it work? You tell me!

Save A Dude

I hadn’t intended to take Make A Dude much further than this. But I have to be honest at this point – getting this far was way easier than I expected it to be. So I decided to add one more piece, which was to Save A Dude.

For this, there’s no need to do anything fancy. We can use localStorage to hold the data we need, as long as we store it as a string. I’ll use the name of the dude we’re saving and a date string as the key.

Then I’ll add a list to hold some dudes, and a button to see the list of dudes.

1

2

3

&lt;div id="alldudes"&gt;

&lt;ul data-role="listview"id="dudelist"class="ui-listview"&gt;

&lt;/ul&gt;

Everytime you click the button, I’ll toggle the dudelist and the onedude divs, and rebuild the dude list to capture any new dudes you saved.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$("#load").click(function(){

$("#onedude").hide();

reloadDudes();

$("#alldudes").show();

});

...

functionreloadDudes(){

$("#dudelist").children().remove();

$.each(localStorage,function(index,value){

$("#dudelist").append(...some code toholdadude row...);

$("#dude-"+index).click(function(){

dude=JSON.parse(localStorage[localStorage.key(index)]);

loadADude(dude);

});

});

}

Once I’ve got everything wired up, I get a decent looking list of dudes:

Conclusion

Granted, I didn’t need to go very deep into the device to get what I needed. But I have to be honest – this was cool! I got an app I can actually use in a very short amount of time. And most of that was learning curve for two new things (jQuery Mobile and PhoneGap).

Safari Books Online has the content you need

Check out these jQuery Mobile and PhoneGap books available from Safari Books Online:

PhoneGap Beginner’s Guide will show you how to use the PhoneGap mobile development framework to target multiple mobile platforms: iOS, Android, BlackBerry, and more with a single application. With PhoneGap, you can use existing web development skills, instead of learning a new environment for every platform on the market.

Through a series of hands-on exercises, jQuery Mobile: Up and Running teaches you the best ways to use the jQuery Mobile’s many interface components to build customizable, multiplatform apps. You don’t need any programming skills or previous experience with jQuery to get started.

Use Beginning PhoneGap to create cross-platform mobile apps without having to learn a new language! PhoneGap is an open source solution, ideal for web developers wanting to build cross-platform mobile apps without having to learn a new language.

Use jQuery Mobile will provide a practical approach to using jQuery Mobile to quickly develop web-based applications for mobile devices. Even though jQuery Mobile is still in alpha, it is already being used to build the next generation of mobile web applications.

Use jQuery Mobile First Look will show you the features of the jQuery Mobile framework, what they do, and how they can be used. It covers the installation thoroughly on all the machines as it is found with any new technology that the most difficult part is getting people to correctly install the product.

About the Author

Duane O’Brien is a tired computer scientist. He has written a number of articles on developing web applications and various PHP frameworks. To learn more about Duane, check out his blog or read his tweets.