Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton 5

In this series, I will explain how I am using PhoneGap & jQuery.Mobile (on top of jQuery) to build an App for Android while being able to test it in my desktop browser. This is not an introduction on PhoneGap or jQuery.Mobile per se. I will not focus on Java and I won’t explain how to install PhoneGap or build the app from an IDE like Eclipse; you may need to read some other tutorial first to cover those points and then come back to this page when you can build your app from your IDE. Don’t worry too much though, you won’t need much knowledge of Java for I will expose some ways we can use to test the app in a desktop browser without the need to recompile it everytime we change something.

Now this is my first app, which means that most of the code I’ve put in so far required some trial-and-error for it to work. Hopefully you’ll find (parts of) this tutorial useful and you’ll be able to code your way faster than me!

Note: I wouldn’t dare pretending my code is perfect, and for the very same reason it’s my first app there are most certainly better ways of doing some things; if you have any question or remark concerning my code, please do not hesitate to leave a comment, that’s the best way for everyone to improve their skills.

Table of Contents

Here is how the tutorial is split:

Part I: A Simple HTML5 Skeleton
HTML5 basic structure, resources order, multiple pages and a menu with icons
Part II: Loading JavaScript The Right Way
JavaScript load order, jqm settings, App.init() & execution levels
Part III: A Stateless Authentication Layer
REST concepts, public/private tokens, some PHP server code
Part IV: ?
I’m not there yet!

Let’s Start With a (Very) Basic HTML5 Template