The Twitter API provides a wealth of resources to extend the functionality of mobile applications. When working with this API, results can be provided in either the XML or JSON data format, and this tutorial will be using the lightweight JSON format to create a Twitter iPhone application that will read the latest tweets by Mobiletuts+. We will see how the Appcelerator SDK makes the development of our application a piece of cake!

Step 1: Create the Twitter App Project

Fire up Titanium Developer and create a new project. Select “Mobile” from the drop-down for the Project Type.

Give your application a Name and an App ID, choose a directory to save your project within, and pass in a URL in the Company/Personal URL field.

Finally, select the latest Titanium SDK and click “create project.”

NOTE:
This tutorial is created with the Titanium SDK version 1.3.0 and will work perfectly with the SDK versions 1.3.0 and below. The Titanium SDK version 1.4.0 is up for release and is available for download here. This application may not work with SDK 1.4.0 as the SDK is still undergoing beta testing.

Step 2: Create a Tab Group

Titanium Developer provides us with the following default application when we create our project:

The default application consists of two tabs at the bottom of the screen, and a navigation bar on the top. The white area in the middle is referred to as a window. Each tab is held by a tab group, and, further up the view hierarchy, each tab is associated with its own window to be displayed when the tab is selected. The labels in the window are considered “children” of the window.

The project consists of multiple files by default. The file “app.js” (located in the Resources folder) is the backbone of our application. All the coding is done in this file and other files linked to this file.

So, let’s begin by opening app.js. Delete the default code, and create our tab group by entering the following:

// Creates a tab group with Titanium.UI API. var tabGroup =
Titanium.UI.createTabGroup();

tabGroup.open();

The above code creates a tab group named “tabGroup” that will hold out tabs. The “open()” method will open our tab group after the application loads.

Note:
All user interface elements in Appcelerator are variables.

Step 3: Create the Twitter Tab

We will now create the tab which will hold our Twitter window and content. The tab will be a child of the tab group we created in step 2.

The method for creating a tab requires three arguments: “title,” “icon,” and “window.” The arguments are passed inside of a pair of curly braces.

Let’s go over what each argument does:

• title: This argument takes a string as a name for our tab.
• icon: The “icon” argument shows the image on the tab. The image name is passed in as a string.
• window: This argument is perhaps the most important of all. This argument links the tab to its corresponding window.

Apply the above with the following code:

// Create the tab "mainTab"
var mainTab = Titanium.UI.createTab({
    title: "Twitter", // Title of the tab: "Twitter"
    icon: "KS_nav_mashup.png", // Icon for tab : Included in the source files
    window: mainWin  // We will create the window "mainWin"
});

// Add the tab to our tab group
tabGroup.addTab(mainTab);

Lines 2- 6 create the main tab for our application, and line 9 adds that tab to our tabGroup to be displayed on the screen.

Step 4: Create the Twitter Window

Let’s continue by creating our window.

A “window” can be thought of as a UI element that is able to hold other UI elements. Another UI element that is able to do this is called a “view,” but one of the main differences between views and windows is that views are able to embed additional views within themselves, whereas windows are unable to embed other windows, but are able to embed views.

The method to create a window is similar to those used to create our tab group and tab. The arguments are:

• title: This argument shows the title of the window in the navigation bar at the top of the screen. The name is passed in as a string.
• backgroundColor: This argument gives our window a backgroundColor. If you don’t pass in this argument, the window remains transparent.
• url: This argument provides link to the file which will contain the code for our window. The path is passed in as a string

Type the following to create the main window:

// Create the window "mainWin"
var mainWin = Titanium.UI.createWindow ({
    title: "@mobtuts", // Set the title
    backgroundColor: "#fff", // Set the background color to white
    url: "tweets.js" // Link to file which will handle the code for the window
});

Your code should now look something like this in app.js:

// Creates a tab group with Titanium.UI API.
var tabGroup = Titanium.UI.createTabGroup();

// Create the window "mainWin"
var mainWin = Titanium.UI.createWindow ({
    title: "@mobtuts", // Set the title
    backgroundColor: "#fff", // Set the background color to white
    url: "tweets.js" // Link to file which will handle the code for the window
});

// Create the tab "mainTab"
var mainTab = Titanium.UI.createTab ({
    title: "Twitter", // Title of the tab: "Twitter"
    icon: "KS_nav_mashup.png", // Icon for tab, Included in the source files
    window: mainWin // We will create the window "mainWin"
});

// Add the tab to our tab group
tabGroup.addTab(mainTab);
tabGroup.open(); 

Don’t forget to create the “tweets.js” file in the Resources folder or you will get an error when you launch the application. You can leave it empty for now.

Launch the project from Titanium Developer. If you have followed correctly, you should see something like this in the iPhone Simulator:

Step 5: Setup the tweets.js Shell

Now we are done with coding in “app.js.” The rest of the tutorial will cover the code needed for “tweets.js.” Go ahead and open it now.

We need a variable to hold the current window. This is done by the following method:

// Create variable "win" to refer to current window
var win = Titanium.UI.currentWindow;

Now we can communicate with the window which we are currently in through the variable “win.” To keep our code semantic, we would like to make a function that is responsible for getting our tweets, and displaying them in our application. Let’s create a function called loadTweets():

// Function loadTweets()
function loadTweets() {

}

Let’s continue by creating an empty array that will hold the data for our table view which we will create later on in this tutorial. The data for each row is passed inside of a pair of curly braces:

function loadTweets() {
    // Empty array "rowData" for our tableview
    var rowData = [];
}

Step 6: Working With the Twitter API

The Twitter API provides us with many methods to get tweets from Twitter. You may want to head over to the official Twitter API documentaiton for further details. The method that we are interested in is statuses / user_timeline.

A typical response from Twitter to the request we are going to make looks something like this in JSON:

{
    "in_reply_to_screen_name": null,
    "created_at": "Thu Mar 18 14:57:04 +0000 2010",
    "favorited": false,
    "place": null,
    "coordinates": null,
    "source": "Crying Indian",
    "contributors": null,
    "in_reply_to_user_id": null,
    "truncated": false,
    "geo": null,
    "in_reply_to_status_id": null,
    "user": {
        "statuses_count": 17,
        "created_at": "Wed Mar 03 19:37:35 +0000 2010",
        "description": "",
        "favourites_count": 0,
        "profile_sidebar_fill_color": "DDEEF6",
        "screen_name": "oauth_dancer",
        "contributors_enabled": false,
        "following": true,
        "geo_enabled": false,
        "time_zone": null,
        "profile_sidebar_border_color": "C0DEED",
        "url": "http://bit.ly/oauth-dancer",
        "verified": false,
        "location": "San Francisco, CA",
        "profile_text_color": "333333",
        "notifications": false,
        "profile_background_image_url": "http://a3.twimg.com/profile_background_images/80151733/oauth-dance.png",
        "protected": false,
        "profile_link_color": "0084B4",
        "followers_count": 9,
        "name": "OAuth Dancer",
        "profile_background_tile": true,
        "id": 119476949,
        "lang": "en",
        "utc_offset": null,
        "friends_count": 11,
        "profile_background_color": "C0DEED",
        "profile_image_url": "http://a3.twimg.com/profile_images/730275945/oauth-dancer_normal.jpg"
    },
    "id": 10674682220,
}

As you might notice, the keys that we are looking for are “screen_name,” “text,” and “profile_image_url.” Both “screen_name” and “profile_image_url” are located under the “user” key.

We need to make an HTTP request in order to get the data from Twitter. The method type for our HTTP request is going to be “GET” and the url will be:

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mobtuts

We ask the Twitter API for the user timeline and the type of format we would like to receive our response in. Finally, we provide the screen name of the user we would like to get our tweets from.

Step 7: Communicate with the Twitter API

We are going to use the createHTTPClient() method provided by the Titanium API to make our HTTP request to Twitter API. You might want to head over to Titanium documentation for more information on the HTTP Client over here. Let’s implement this in our code:

function loadTweets() {
    // Empty array "rowData" for our tableview
    var rowData = [];

    // Create our HTTP Client and name it "loader"
    var loader = Titanium.Network.createHTTPClient();
}

We need to run three methods for our HTTP client. Let’s implement the three methods in our code:

// Sets the HTTP request method, and the URL to get data from
loader.open("GET","http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mobtuts");

// Runs the function when the data is ready for us to process
loader.onload = function() { // TODO: Implement what to do after the data is received };

// Send the HTTP request
loader.send();

The “open()” methods requires two arguments separated by a comma. The first argument is the method of the HTTP Request, which in our case is going to be the “GET” value.

The second argument is the URL of the API which we will get our data from. The “onload()” method is run when the data is received and is ready for us to work on. This is where we parse the JSON we receive, and display it in a table view. We will work on it in the next step.

The “send()” method sends the HTTP request. One advantage of this method is that it shows an activity indicator in the status bar by itself rather than us coding for it.

Step 8: Parsing the Twitter JSON

Now that we have our HTTP client, let’s parse the JSON that we receive.

First, we evaluate the JSON which we receive through the “eval()” function. We pass in the JSON as a string. Javascript does the rest of work for us. We store the parsed JSON in a variable called “tweets.”

loader.onload = function () {
    // Evaluate the JSON
    var tweets = eval('('+this.responseText+')');
}

Now that we have our parsed JSON in the variable, we would like to run through all the keys inside the variable and get the keys “user,” “text,” and “profile_image_url” for each tweet. We will create a for loop to do so:

var tweets = eval('('+this.responseText+')'); 

for (var i = 0; i < tweets.length; i++) {
    var tweet  = tweets[i].text; // The tweet message
    var user   = tweets[i].user.screen_name; // The screen name of the user
    var avatar = tweets[i].user.profile_image_url; // The profile image
}

Now that we have the tweet, the user, and the avatar, let’s make a view that will hold the information.

We will call this view “post_view.” We would like our post_view to show the avatar on the left, the user’s name on the side, and the tweet below the screen name. Then we will add our post_view to a row. We would like our row to look something like this:

Let’s implement this in our code:

// Create a row and set its height to auto
var row = Titanium.UI.createTableViewRow({height:'auto'});

// Create the view that will contain the text and avatar
var post_view = Titanium.UI.createView({ height:'auto', layout:'vertical', top:5, right:5, bottom:5, left:5 });

First we create our post_view and row. We set our row’s height to auto so that it can expand or contract as needed. We also set our view’s height to auto and layout to vertical. The view positions itself 5 pixels away from all the four sides of its parent.

Step 9: Displaying our Data

Now that we have our post view and row ready for us to work on, let’s create an image view that will hold our profile image. The image view will have both height and width set to 48 pixels. Then we add our image view to the post view, as shown below:

// Create image view to hold profile pic
var av_image = Titanium.UI.createImageView({
    url:avatar, // the image for the image view
    top:0,
    left:0,
    height:48,
    width:48
});

post_view.add(av_image);

Next, create a label that will show the username for our post view:

// Create the label to hold the screen name
var user_lbl = Titanium.UI.createLabel({
    text:user,
    left:54,
    width:120,
    top:-48,
    bottom:2,
    height:16,
    textAlign:'left',
    color:'#444444',
    font:{
        fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'
    }
});

post_view.add(user_lbl);

We format the label to have text grey in color, and also we align it to the left side. We set the text property for our label to variable user. We then add the label to the post view.

Now let’s create our final element for the post view. We will create a label that will contain the tweet message and format it to position properly in the post view:

// Create the label to hold the tweet message
var tweet_lbl = Titanium.UI.createLabel({
    text: tweet,
    left: 54,
    top: 0,
    bottom: 2,
    height: 'auto',
    width: 236,
    textAlign: 'left',
    font:{ fontSize:14 }
});

post_view.add(tweet_lbl); 

Last but not the least, we add our complete post view to our row. Also, we give each row a class name because we might want to refer to them in future. We add our row to the “rowData” array every time the for loop is run. This is the final code for our for loop:

// Add the post view to the row
row.add(post_view);

// Give each row a class name
row.className = "item" + i;

// Add row to the rowData array
rowData[i] = row;

Step 10: Finishing up!

Let’s continue by creating a table view that will show the rows that we have stored in the “rowData” array. We then add the table view to the window. The following code goes outside the for loop but inside the “loader.onload” function:

// Create the table view and set its data source to "rowData" array
var tableView = Titanium.UI.createTableView( { data : rowData } );

//Add the table view to the window
win.add(tableView);

Now we must run the loadTweets() function at the end of our “tweets.js” file:

loadTweets();

Your finished application should look something like this:

Conclusion

In this tutorial, we went over creating table views, tabs, and getting remote data. We also learned how to parse JSON and use it in our application.

You may go to these additional resources to expand your knowledge of the Appcelerator SDK and Titanium APIs:

• Mobile API reference
• Developer at Appcelerator
• Appcelerant Blog
• App U Training
• Twitter API
• Twitter API Documentation