Cross platform mobile development tutorial

In this series, we will develop a Twitter client using the jQuery Mobile and PhoneGap frameworks. This project will be deployed to Android and iOS environments as a native application. The user interface of the application, called simply "Tweets", will be built using jQuery Mobile and PhoneGap will be used to create the native application. We will also use the PhoneGap Storage API to access native database functionality. All coding will be done with HTML and JavaScript utilizing jQuery, jQuery Mobile, and the PhoneGap libraries.

Also available in this series:

The main features of the Tweets application discussed in this series are as follows:

  • There is a single instance of application code that caters to both Android and iOS platforms. This illustrates the 'write once, deploy anywhere' aspect of the jQuery Mobile and PhoneGap frameworks.
  • The main functionality of the Tweets application is two-fold: (1) obtain a user's timeline (e.g. the most recent tweets posted by the user) and (2) find tweets by any user where the tweet content matches a search query. To implement that functionality, the application utilizes the web based Twitter API methods user_timeline and search. The application code is based on the jQuery ajax function to access those API methods.
  • The user screen names and search terms are kept in a permanent store in order for them to persist between application restarts. For that purpose, we will use the PhoneGap Database and SQLTransaction objects.
  • The user interface of the Tweets application supports different layouts for narrow-screen devices, where display width is less than 500 pixels, and wide-screen devices, where display width is greater than or equal to 500 pixels. In that regard, a typical Android phone or an iPod touch device is considered a narrow-screen device, whereas a tablet (e.g. the iPad) is considered a wide-screen device. The threshold separating the narrow and wide-screen devices is a constant in the application code and can be changed if further customization is needed.
  • The application employs jquery-mobile-960, a grid implementation for jQuery Mobile, to display content in wide-screen devices. In the original grid implementation of jQuery Mobile, the columns are split evenly. The jquery-mobile-960 grid allows variable width grid columns giving the user interface designer more flexibility. This is particularly useful for tablet environments.
  • The Tweets application can be imported into Eclipse for the Android platform or Xcode for the iOS platform. An archive file accompanying this series contains all the files needed to import the application to those IDEs. We provide instructions for importing the Tweets application into both Eclipse and Xcode.

You might also like

Why old iPhones become sluggish over time  — Macworld
One of the unusual consequences of being in the computer business is that I tend to own more devices than the average person.

Q&A

avatar
Which mobile platform to develop for?

I want to develop apps for a mobile platform. I want to learn the code too BUT i have windows but want to do iOS but again I have windows. If possible I want to get a developer device too. If possible maybe Android but I would like details too. Maybe if I got the device I could test it too. Please tell me what I should do.
Thanks

Start by asking questions in the right category.