Build a Cross-Platform Twitter Client – Tuts+ Premium

In this series, we will develop a Twitter client, called “Tweets”, 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 Tweets will be built using jQuery Mobile and creating the native application will be done via PhoneGap. 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.

Tutorial Teaser

Organization Of The Series

This tutorial has been organized into 4 parts. In the next section of Part I, named “jQuery Mobile and PhoneGap”, we briefly introduce jQuery Mobile and PhoneGap and discuss developing cross-platform native applications using those frameworks. In the following section, “Screen Flow”, we present the Tweets application and describe its screen flow. The section named “jQuery Mobile Page Structure” is an introduction to several high level concepts in the jQuery Mobile framework, in particular, container and content pages.

In Part II, we will start reviewing the Tweets application. In “Review Of index.html”, our main focus is on the static structure of the HTML and jQuery Mobile code that makes up the application screens. The section named “Twitter API” gives an overview of the Twitter API methods user_timeline and search. The next section, “Code Review”, gives a review of the JavaScript code that implements the application functionality. Part II will discuss “Initial Page Load”, “Utility Functions”, and “Database Access Functions”, and will start the discussion on “Core Business Logic Functions”.

In Part III, we will continue inspecting the “Core Business Logic Functions”, taking up from where we left off in Part II and finishing the code review of the Tweets application by looking at “Event Handlers” and “Page Display Functions”.

The final part of our tutorial, Part IV, starts with the section named “Files In the Download Archive”, where we describe the contents of the archive file accompanying this series. In “Environment Specific Topics”, we explain how to import the application into Eclipse for the Android platform and Xcode for the iOS platform. In that section, we also give screen images of the application in an Android phone, an iPod touch, and an iPad 2. Finally, we give concluding remarks in “Conclusions”.

Get the Full Tutorial!

This tutorial is available to Tuts+ Premium members only. Read a preview of this tutorial on the Tuts+ Premium web site or login to Tuts+ Premium to access the full content.

Joining Tuts+ Premium. . .

For those unfamiliar, the family of Tuts+ sites runs a premium membership service called Tuts+ Premium. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Mobiletuts+, Nettuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+. You’ll learn from some of the best minds in the business. Become a premium member to access this tutorial, as well as hundreds of other advanced tutorials and screencasts.