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 Part IV Of This Series

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

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

Files In Download Archive

In this section, we will describe the contents of the archive file accompanying this article.

The Android folder consists of a single file, Tweets.zip. This is an Eclipse project that has all the required files to create the Tweets application in an Android 2.2 device. See also “Android Development Environment” below.

The iOS folder consists of three sub-folders: www, icons, and splash. Those folders store various files that need to be copied to the Xcode project for creating the Tweets application in iOS devices. For details see the “iOS Development Environment” section below.

Please note that all the icons and splash images in the download archive have been created based on an icon set provided by http://www.smashingmagazine.com/2008/09/23/practika-a-free-icon-set/. As stated on the web site “You can use the set for all of your projects for free and without any restrictions. However, it ís forbidden to sell them.”

An example of a startup icon for the Tweets application:

Figure: A Start-up Icon

An example of a splash screen image for the Tweets application:

Figure: A Splash Image

Environment Specific Topics

In this section, we will discuss topics regarding the development environments for Android and iOS versions of the sample application.

For both Android and iOS environments, the latest version of jQuery Mobile can be downloaded from http://jquerymobile.com/download/ and related documentation is available via the Documentation link in http://jquerymobile.com/.

As a prerequisite for both Android and iOS environments, PhoneGap must be installed in the development machine. PhoneGap documentation can be accessed from http://wiki.phonegap.com/. From that page, follow the links to tutorials for Android and iOS specific installation instructions and other environment specific documentation. The most recent version of PhoneGap can be downloaded from the download link on http://phonegap.com.

Get the Full Series!

This tutorial series 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.