Twitter URL Request

The first step is to setup the appropriate URL to post to a twitter account, replace your twitter account and password for the placeholder values.

NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:
  [NSURL URLWithString:@"http://TWITTER_ACCOUNT:PASSWORD@twitter.com/statuses/update.xml"] 
  cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0];

Data Related Setup

With the URL ready, we need to setup the HTTP request types as well as the text to twit:

// The text to post
NSString *msg = @"testing";
 
// Set the HTTP request method
[request setHTTPMethod:@"POST"];
 
[request setHTTPBody:[[NSString stringWithFormat:@"status=%@", msg] 
    dataUsingEncoding:NSASCIIStringEncoding]];
 
NSURLResponse *response;
NSError *error;
 
if ([NSURLConnection sendSynchronousRequest:request 
    returningResponse:&response error:&error] != nil)
  NSLog(@"Posted to Twitter successfully.");
else 
  NSLog(@"Error posting to Twitter.");

Asynchronous Requests

Notice in the code above that the URL connection request is sent synchronously, so the UI will block waiting for this to return. One relatively straightforward option is to wrap the above code inside a method, and call that method in a background thread.

For example, in the example below I’ve added the code into a method named postToTwitter, and requested this method to run in a new thread. The example is a little contrived as you wouldn’t hard-code the text to post to Twitter, however, you get the idea.

- (void) postToTwitter
{
  // Since this will be launched in a separate thread, we need
  // an autorelease pool
  NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
 
  NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:
    [NSURL URLWithString:@"http://TWITTER_ACCOUNT:PASSWORD@twitter.com/statuses/update.xml"] 
    cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0];
 
  // The text to post
  NSString *msg = @"testing";
 
  // Set the HTTP request method
  [request setHTTPMethod:@"POST"];
 
  [request setHTTPBody:[[NSString stringWithFormat:@"status=%@", msg] 
    dataUsingEncoding:NSASCIIStringEncoding]];
 
  NSURLResponse *response;
  NSError *error;
 
  if ([NSURLConnection sendSynchronousRequest:request 
      returningResponse:&response error:&error] != nil)
    NSLog(@"Posted to Twitter successfully.");
  else 
    NSLog(@"Error posting to Twitter."); 
 
  // Release pool
  [pool release]; 
}    
 
...
 
[NSThread detachNewThreadSelector:@selector(postToTwitter)
   toTarget:self withObject:nil];

In Part 2 of the series we dove into the how to quickly parse information returned from a JSON service using a JSON framework. We also created a table to display images returned from Flickr.

In this tutorial we wrap up by adding a simple image viewer that will display a larger variation of the image when the user taps on a row in the table. We’ll add some code to slide the larger images on/off screen, which is a nice visual effect for this application. You can review the finished application by watching the video below:

Download iPhone JSON Xcode Project

You can download the Xcode project and walk through the source code:

1. Download iPhone, JSON and Flickr – Part 3 Xcode project

Zoomed Image Viewer

Let’s begin by creating a simple class for viewing the larger variation of the image in the table. The class definition follows:

@interface ZoomedImageView : UIView
{
  UIImageView *fullsizeImage;
}
 
- (id)initWithURL:(NSURL *)url;
 
@end

Not much here – just a UIView with an UIImageView to hold the large image downloaded from Flickr. Let’s look at the implementation of this class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

#import "ZoomedImageView.h"
 
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* Private interface definitions
*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@interface ZoomedImageView(private)
- (void)slideViewOffScreen;
@end
 
@implementation ZoomedImageView
 
/**************************************************************************
*
* Private implementation section
*
**************************************************************************/
 
#pragma mark -
#pragma mark Private Methods
 
- (void)slideViewOffScreen
{
  // Get the frame of this view
  CGRect frame = self.frame;
 
  [UIView beginAnimations:nil context:NULL];
  [UIView setAnimationDuration:.45];
 
  // Set view to this offscreen location
  frame.origin.x = -320;
  self.frame = frame;
 
  // Slide view
  [UIView commitAnimations];
}
 
/**************************************************************************
*
* Class implementation section
*
**************************************************************************/
 
#pragma mark -
#pragma mark Initialization
 
- (id)initWithURL:(NSURL *)url
{
  if (self = [super init])
  {
    // Create the view offscreen (to the right)
    self.frame = CGRectMake(320, 0, 320, 240);
 
    // Setup image
    NSData *imageData = [NSData dataWithContentsOfURL:url];
    fullsizeImage = [[UIImageView alloc] initWithImage:[UIImage imageWithData:imageData]];
 
    // Center the image...
    int width = fullsizeImage.frame.size.width;
    int height = fullsizeImage.frame.size.height; 
 
    int x = (320 - width) / 2;
    int y = (240 - height) / 2;
 
    [fullsizeImage setFrame:CGRectMake(x, y, width, height)];     
    fullsizeImage.userInteractionEnabled = YES;                                      
    [self addSubview:fullsizeImage];
 
  }
 
  return self;  
}
 
#pragma mark -
#pragma mark Event Mgmt
 
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
  [self slideViewOffScreen];
 
  // We now send the same event up to the next responder
  // (the JSONFlickrViewController) so we can show enable
  // the search textfield again
  [self.nextResponder touchesBegan:touches withEvent:event];
 
}
 
#pragma mark -
#pragma mark Cleanup
 
- (void)dealloc 
{
  [fullsizeImage release];
  [super dealloc];
}
 
@end

It starts the the initialization code on line 46 – we pass in the URL of the larger image that we saved previously when making the original request for images matching a search string (more on that below).

Notice the x coordinate on line 51 has a value of 320, which sets this view off-screen to the right. As we’ll see momentarily, to accomplish the slide-in effect we’ll move the x coordinate to an on-screen location, which will slide the image into place. We wrap up the initialization code by creating the image, centering the image in the view, and adding the image as a subview.

Once an image is shown on screen, when a new image is requested by the user (tapping on a table row) we need to slide the current view off the screen to the left. The code beginning on line 21 shows how we accomplish this – setup the animation, move the frame for the current image off-screen to the left (-320) and commit the animation.

Search TextField and Activity Indicator

Our next task is to create the search textfield. Head over to the JSONFlickrViewController implementation file, where we need to add a UITextField, also add an activity indicator as shown here:

@interface JSONFlickrViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, UITextFieldDelegate>
{
  UITextField     *searchTextField;
  UITableView     *theTableView;
  NSMutableArray  *photoTitles;         // Titles of images
  NSMutableArray  *photoSmallImageData; // Image data (thumbnail)
  NSMutableArray  *photoURLsLargeImage; // URL to larger image
 
  ZoomedImageView  *fullImageViewController;
  UIActivityIndicatorView *activityIndicator;      
}

The code for initializing the textfield and activity indicator are inside the init method of the JSONFlickrViewController class:

- (id)init
 
   ...
 
    // Create textfield for the search text
    searchTextField = [[[UITextField alloc] initWithFrame:CGRectMake(110, 100, 100, 40)] retain];
    [searchTextField setBorderStyle:UITextBorderStyleRoundedRect];
    searchTextField.placeholder = @"search";
    searchTextField.returnKeyType = UIReturnKeyDone;
    searchTextField.clearButtonMode = UITextFieldViewModeWhileEditing;
    searchTextField.delegate = self;
    [self.view addSubview:searchTextField];
    [searchTextField release];
 
    // Create activity indicator
    activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(220, 110, 15, 15)];
    activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhite;
    activityIndicator.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin |
                      UIViewAutoresizingFlexibleRightMargin |
                      UIViewAutoresizingFlexibleTopMargin |
                      UIViewAutoresizingFlexibleBottomMargin);
    [	activityIndicator sizeToFit];
    activityIndicator.hidesWhenStopped = YES; 
    [self.view addSubview:activityIndicator];
 
  ...
}

When new search text is entered, the code in the method textFieldShouldReturn will be run. Inside this method we remove all the objects from each of the arrays we created previously when calling Flickr (if we’ve called Flickr previously) and start the activity indicator.

Next, call the method searchFlickrPhotos which will kick-off the process for calling the Flickr API and rebuilding the arrays of content based on the JSON returned from the service – See Part 1 for more information. Once the query is complete, the activity indicator will be stopped (you can see this code in the downloaded Xcode project).

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
  [textField resignFirstResponder];
 
  // Remove any content from a previous search
  [photoTitles removeAllObjects];
  [photoSmallImageData removeAllObjects];
  [photoURLsLargeImage removeAllObjects];
 
  // Begin the call to Flickr
  [self searchFlickrPhotos:searchTextField.text];
 
  // Start the busy indicator
  [activityIndicator startAnimating];
 
  return YES;
}

Wrapping all the Pieces Together

At this point all that’s left is to recognize when a new table row has been selected and begin the process for downloading the larger image view and sliding the image into place on the display. It all begins in the code for managing the table with the method shown below:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{
  searchTextField.hidden = YES;
 
  // If we've created this VC before...
  if (fullImageViewController != nil)
  {
    // Slide this view off screen
    CGRect frame = fullImageViewController.frame;
 
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:.45];
 
    // Off screen location
    frame.origin.x = -320;
    fullImageViewController.frame = frame;
 
    [UIView commitAnimations];
  }
 
  [self performSelector:@selector(showZoomedImage:) withObject:indexPath afterDelay:0.1];
}

We begin by hiding the search textfield, then, if a zoomed image is visible, we need to slide it off-screen – we do this by setting up the animation, move the image location (frame) to an off-screen location (-320) and committing the animation. Once that is complete, we call showZoomedImage to display the image the user requested.

The last chunk of code is for displaying the requested image:

- (void)showZoomedImage:(NSIndexPath *)indexPath
{
  // Remove from view (and release)
  if ([fullImageViewController superview])
  	[fullImageViewController removeFromSuperview];
 
  fullImageViewController = [[ZoomedImageView alloc] initWithURL:[photoURLsLargeImage objectAtIndex:indexPath.row]];
 
  [self.view addSubview:fullImageViewController];
 
    // Slide this view off screen
  CGRect frame = fullImageViewController.frame;
 
  [UIView beginAnimations:nil context:NULL];
  [UIView setAnimationDuration:.45];
 
  // Slide the image to its new location (onscreen)
  frame.origin.x = 0;
  fullImageViewController.frame = frame;
 
  [UIView commitAnimations];
}

We start by releasing the current zoomed view (if there is one). Next, we create a new ZoomedImageView, passing in the URL of the larger image that was saved previously when we parsed the JSON data (see the previous posts). We setup the animation, move x coordinate of the image into place and commit the animation.

Final Notes

With that, we have a complete working application that will call Flickr based on a user requested search string, display a table of images and titles and allow zooming in on each image by selecting a row in the table.

It’s hard to get the big picture when looking at code snippets as shown in this tutorial. Once you download and tinker with the Xcode project, it’ll all make sense.

Summary of Links

1. iPhone, JSON and Flickr Tutorial – Part 1
2. iPhone, JSON and Flickr Tutorial – Part 2
3. Download iPhone, JSON and Flickr – Part 3 Xcode Project
4. Get Flickr API key
5. Flickr API documentation
6. Download JSON framework
7. JSON Framework Google Group
8. Stig Brautaset’s Blog

The application created in Part 1 had no UI to speak of, the only output was debug information written directly to the console as a test case to verify we could successfully request and download images using JSON and Flickr.

The video shown in Part 1 that highlights the finished application, developed over the course of these three tutorials, is displayed below if you need a refresher:

Download iPhone JSON Xcode Project File

You may find it helpful to download the Xcode project and walk through the source code as you read this tutorial.

1. Download iPhone, JSON and Flickr – Part 2 Xcode project

Flickr JSON Data

Let’s begin by taking a closer look at the data returned from Flickr and the resulting dictionary that the JSON framework creates for us.

The method that we wrote in Part 1 for receiving date from Flickr, didReceiveData, begins with the following two lines:

1
2
3
4
5

// Store incoming data into a string
NSString *jsonString = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
 
// Create a dictionary from the JSON string
NSDictionary *results = [jsonString JSONValue];

Below is a screenshot of the jsonString (line 2 from above) as shown in the Xcode console. Everything you need is here, however, it would be a mess to parse this ourselves.

With one line of code (on line 5 above) the JSON framework will convert the string format into a dictionary. The image below shows a formatted output of the JSON, which better describes the dictionary – photos is a dictionary, and looking down to the fifth entry in the list, the key-value pair, with the key photo is an array of each photo returned from Flickr based on the search query we request. Each entry in the photo array is a dictionary as well, with keys “id”, “owner”, “secret”, “server”, etc.

With the help of the JSON framework and conversion to a dictionary, accessing the contents from Flickr becomes as easy as requesting key-value pairs. For example, to loop through the titles for each image we begin by creating a reference to the array of photos as listed here:

NSArray *photos = [[results objectForKey:@"photos"] objectForKey:@"photo"];

With the array in hand, we now access each entry in the array and create an NSString object from the key-value pair with the key “title”:

for (NSDictionary *photo in photos)
{
  // Get title of the image
  NSString *title = [photo objectForKey:@"title"];
  ...
}

Building Paths to the Images

Let’s review how to build the path to images hosted on Flickr, based on values in the JSON return data. To access an image, the path looks like this: http://farmX.static.flickr.com/server/id_secret.jpg, where each of the bold entries in the path is mapped to one of the entries in the photos array (see the image above).

For example, in the return results shown below, note the values for farm, server, id and secret.

Using the values above, we can now build a path to each image. For example, the path for the image data shown above looks as follows (screenshot of the Xcode console):

Define Table for Images and Titles

Let’s add code to the previous project to store the images and title returned from Flickr into a table. The result will look as shown below:

Begin by adding a tableview to JSONFlickrViewController to the implementation file JSONFlickrViewController.m as follows:

 
@interface JSONFlickrViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
{
  UITableView     *theTableView;
  NSMutableArray  *photoTitles;         // Titles of images
  NSMutableArray  *photoSmallImageData; // Image data (thumbnail)
  NSMutableArray  *photoURLsLargeImage; // URL to larger image
}

Now, inside the same file, we need to add code to initialize the table. In the init method, we’ll create the table as follows:

...
// Create table view
theTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 240, 320, 220)];
[theTableView setDelegate:self];
[theTableView setDataSource:self];
[theTableView setRowHeight:80];
[theTableView setBackgroundColor:[UIColor grayColor]];
[theTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
[self.view addSubview:theTableView];
...

Notice the row height set to 80, as the Flickr thumbnail images are 75 x 75 pixels. The extra space allows some room around the image so it fits snuggly within the table row, yet has some visual padding.

Populate Table with Flickr Content

Next up is adding content to the table – we want an image on the left and its title text on the right. The code follows:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
{
  return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView 
      numberOfRowsInSection:(NSInteger)section 
{
  return [photoTitles count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView 
      cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
  UITableViewCell *cell = 
      [tableView dequeueReusableCellWithIdentifier:@"cachedCell"];
 
if (cell == nil)
    cell = [[[UITableViewCell alloc] 
      initWithFrame:CGRectZero reuseIdentifier:@"cachedCell"] autorelease];
 
#if __IPHONE_3_0
  cell.textLabel.text = [photoTitles objectAtIndex:indexPath.row];
  cell.textLabel.font = [UIFont systemFontOfSize:13.0];
#else
  cell.text = [photoTitles objectAtIndex:indexPath.row];
  cell.font = [UIFont systemFontOfSize:13.0];
#endif
 
  NSData *imageData = [photoSmallImageData objectAtIndex:indexPath.row];
 
#if __IPHONE_3_0
  cell.imageView.image = [UIImage imageWithData:imageData];
#else
  cell.image = [UIImage imageWithData:imageData];
#endif
 
  return cell;
}

Most of this code is straightforward – there is one section in the table, the number of rows in that sole section is equal to the number of entries in the photoTitles array (which we built from the Flickr return data).

For each row in the table, we set the cell text by accessing the desired row from the photoTitles array. For the cell image we create a UIImage object from the photoSmallImageData array (again, from data we retreived from Flickr).

The last step is to make a call to populate the tableview once the data has been downloaded. Inside the method didReceiveData, at the bottom, once we’ve built all the internal arrays to hold the Flikr results, we make a request to reload the table data (see the project source code for the big picture of where this line of code lives):

// Update the table with data
[theTableView reloadData];

Looking Ahead to Part 3

At this point we can request data from Flickr, store the results into internal variables and populate and display a table of images and descriptions.

There are two things we need to finish before we can call this application complete. First, we need to add a textfield so users can input their desired search strings. Second, when a user taps on a row in the table, we want to display a larger version of the image above the table. We’ll do this by sliding a view onto the screen from right.

Summary of Links

1. iPhone, JSON and Flickr Tutorial – Part 1
2. iPhone, JSON and Flickr Tutorial – Part 3
3. Download iPhone, JSON and Flickr – Part 2 Xcode Project
4. Get Flickr API key
5. Flickr API documentation
6. Download JSON framework
7. JSON Framework Google Group
8. Stig Brautaset’s Blog

Stay tuned for Part 3 of the iPhone, JSON and Flickr tutorial…

This is part one of a three part series in which I’ll build a Flickr photo viewer, a pretty simple application, however, we’ll cover some interesting stuff with the primary goal of understanding the nuts and bolts of working with JSON to build a complete working application accessing web-services.

Let’s start by looking at the finished application – the video below shows the end result we’re after – it starts with a search box (UITextField) and an empty table. Once you enter a search string, the application will construct a URL to call a photo search method at Flickr. The return data will be used to populate a table with thumbnails images and any title associated with the photo.

As you browse the table, you can touch an image and a second request will be submitted to Flickr for a larger variation of the same image. The larger image will be displayed above the table. As you select additional rows in the table, the current image will slide off the screen and a new image will slide into place. Watch the video below, it’ll make more sense once you see everything pulled together.

Setting up JSON Framework

The library used in this application is one written by Stig Brautaset and hosted at code.google.com. I’ve used this library in two applications that are in the App Store, Today’s Horoscope, free and paid. This is an excellent library, you can’t go wrong.

1. Download the iPhone JSON framework

There are a few variations on the install process, the easiest and least prone to errors is to copy the source files directly into your project. In the project that is attached to this post, this is done for you, however, it’s shown here if you need to add the framework to an existing or future project.

1. Open the dmg file from the download.
2. Drag the JSON folder and drop it on the ‘Classes’ group in the ‘Groups & Files’ in your Xcode project.
3. Check the “Copy items into destination group’s folder” option.
4. You can now use #import “JSON.h” in your source files.

Xcode Project Download – Part 1

To keep this post to a manageable length, I’ll show only the code that is most pertinent to JSON, Flickr and the overall application flow, the code on the periphery you’ll be familiar with and you can browse through at any time in the project source code.

1. Download iPhone, JSON and Flickr – Part 1 Xcode project

Get Flickr API Key

If you don’t already have a Flickr API key, that’s the next step.

1. Get Flickr API key.

The key will be an alpha-numeric value that you pass into all requests when calling a Flickr API. You’ll need to replace the key in the project for this post with your own Flickr key. Once you have the key, you’ll need to copy/paste the same into the FlickrAPIKey variable in the file JSONFlickrViewController.m.

NSString *const FlickrAPIKey = @"your-key-here";

Flickr APIs

Flickr has an impressive list of APIs you can access, take a look here Flickr API’s.

We’ll be using REST request format for calling Flickr, here is basic layout for how calls will look:

http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value

For our interests, we want to search for photos, so the method we are after is: flickr.photos.search. The Flickr API page for this method is here.

The full URL we’ll pass to Flickr will look as follows:

NSString *urlString = 
  [NSString stringWithFormat:
     @"http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=%@&tags=%@&per_page=25&format=json&nojsoncallback=1", 
     FlickrAPIKey, text];

The parameters to the query are:

1. api_key: your specific developer key
2. tags: the search text
3. per_page: the number of images to return
4. format=json&nojsoncallback: request the results to be returned as JSON

Earth to Flickr, Come in Flickr

With our URL complete, our next step is to make sure we can talk to the appropriate Flickr API and retrieve images based on a search string.

We have a very basic application framework at this point, an App Delegate class and a bare bones view controller. The interface definition for the view controller follows:

@interface JSONFlickrViewController : UIViewController
{
  NSMutableArray  *photoTitles;         // Titles of images
  NSMutableArray  *photoSmallImageData; // Image data (thumbnail)
  NSMutableArray  *photoURLsLargeImage; // URL to larger image
}

At this point all we are concerned about is capturing the names of the images from Flickr, the image data for our thumbnail image and also, the URL’s for the larger images. The initialization code consists of allocating a view, initializing the arrays, and calling the method to search Flickr for photos matching a search string:

- (id)init
{
  if (self = [super init])
  {
    self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease];
 
    // Initialize our arrays
    photoTitles = [[NSMutableArray alloc] init];
    photoSmallImageData = [[NSMutableArray alloc] init];
    photoURLsLargeImage = [[NSMutableArray alloc] init];
 
    // Notice that I am hard-coding the search tag at this point (@"iPhone")    
    [self searchFlickrPhotos:@"iPhone"];
 
  }
  return self;
}

The call to [self searchFlickrPhotos:@"iPhone"]; begins the process of creating the URL to call Flickr, which in turn will kick off an asynchronous request to download the image data.

-(void)searchFlickrPhotos:(NSString *)text
{
  // Build the string to call the Flickr API
  NSString *urlString = 
    [NSString stringWithFormat:
      @"http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=%@&tags=%@&per_page=15&format=json&nojsoncallback=1", FlickrAPIKey, text];
 
  // Create NSURL string from formatted string
  NSURL *url = [NSURL URLWithString:urlString];
 
  // Setup and start async download
  NSURLRequest *request = [[NSURLRequest alloc] initWithURL: url];
  NSURLConnection *connection = [[NSURLConnection alloc] initWithRequest:request delegate:self];
  [connection release];
  [request release];
 
}

At this point we’ve made our request to Flickr to search for photos that are tagged with the text “iPhone” From here, we need to process the incoming data. The method didReceiveData: is the callback that will deal with the incoming data. Within this method we’ll save the title of the image, the image data for the thumbnail as well as the URL for the large image. Here’s what that code looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data 
{
  // Store incoming data into a string
  NSString *jsonString = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
 
  // Create a dictionary from the JSON string
  NSDictionary *results = [jsonString JSONValue];
 
  // Build an array from the dictionary for easy access to each entry
  NSArray *photos = [[results objectForKey:@"photos"] objectForKey:@"photo"];
 
  // Loop through each entry in the dictionary...
  for (NSDictionary *photo in photos)
  {
    // Get title of the image
    NSString *title = [photo objectForKey:@"title"];
 
    // Save the title to the photo titles array
    [photoTitles addObject:(title.length > 0 ? title : @"Untitled")];
 
    // Build the URL to where the image is stored (see the Flickr API)
    // In the format http://farmX.static.flickr.com/server/id_secret.jpg
    // Notice the "_s" which requests a "small" image 75 x 75 pixels
    NSString *photoURLString = 
      [NSString stringWithFormat:@"http://farm%@.static.flickr.com/%@/%@_%@_s.jpg", 
      [photo objectForKey:@"farm"], [photo objectForKey:@"server"], 
      [photo objectForKey:@"id"], [photo objectForKey:@"secret"]];
 
    NSLog(@"photoURLString: %@", photoURLString);
 
    // The performance (scrolling) of the table will be much better if we
    // build an array of the image data here, and then add this data as
    // the cell.image value (see cellForRowAtIndexPath:)
    [photoSmallImageData addObject:[NSData dataWithContentsOfURL:[NSURL URLWithString:photoURLString]]];
 
    // Build and save the URL to the large image so we can zoom
    // in on the image if requested
    photoURLString = 
      [NSString stringWithFormat:@"http://farm%@.static.flickr.com/%@/%@_%@_m.jpg", 
      [photo objectForKey:@"farm"], [photo objectForKey:@"server"], 
      [photo objectForKey:@"id"], [photo objectForKey:@"secret"]];
    [photoURLsLargeImage addObject:[NSURL URLWithString:photoURLString]];        
 
    NSLog(@"photoURLsLareImage: %@\n\n", photoURLString); 
  } 
}

Look closely at line 7: NSDictionary *results = [jsonString JSONValue]; which is where the magic occurs, converting the incoming JSON data into a dictionary, which makes our parsing the Flickr data as simple as working with key-value pairs. We’ll look closer at the JSON return values from Flickr, converting to a dictionary and building the arrays of image data in Part 2 of this tutorial.

Flickr Image Data

Notice in the code above how I added to NSLog statements to verify the return results. A partial listing of the output is shown below:

As one last sanity check, you can copy/paste a few of the links shown in the Xcode console into a browser window to see what photos Flickr is returning.

Looking Ahead to Part 2

In Part 2 of this tutorial we’ll start by looking at the raw data returned from Flickr and walk through how to map that information into dictionaries and arrays. We will also extend the current application to store the results from our query into a table. We’ll also add a textfield to the interface so we can search for photos matching any tag.

Summary of Links

1. iPhone, JSON and Flickr Tutorial – Part 2
2. iPhone, JSON and Flickr Tutorial – Part 3
3. Download iPhone, JSON and Flickr – Part 1 Xcode Project
4. Get Flickr API key
5. Flickr API documentation
6. Download JSON framework
7. JSON Framework Google Group
8. Stig Brautaset’s Blog

If you’ve found a need to work with JSON and the iPhone, I want to point you to an excellent Google code project: http://code.google.com/p/json-framework/. The author of this framework can be found here.

This framework implements a strict JSON parser and generator in Objective-C. It’s easy to work with and can be used across any number of projects with ease.

To use this framework it was pretty straightforward to get things in place, copy the included "SDKs" folder onto your local system (into ~/Library/SDKs). From within a project, modify the target build options to point to the SDK and add a link option to include the necessary library into the build.

From this point forward, the SDK is now available for use within any iPhone project, simply update the build settings and you are good to go.

You can find Part 2 of working with JSON here.

The basic idea was to download thumbnail images in the background, and update rows in a table in realtime, as the images were retrieved. This lends to a really nice visual effect on the iPhone. Picture a table with two columns; the right column displays text and the left column shows an avatar (as png file). For each visible row, the text is immediately shown, and the image on the left starts out with a placeholder image (packaged with the application). As each avatar is downloaded, the applicable row in the table is updated with the new image.

The basic idea was to create a URL request (NSURLRequest) specifying the desired URL. With this in hand, create a URL connection (NSURLConnection) to load the URL request.

1
2
3

NSURLRequest *request = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:_url]];
[NSURLConnection connectionWithRequest:request delegate:self];
[connection start];

From the reference documentation, the description for the start method is as follows: “Causes the receiver to begin loading data, if it has not already.” Seems the right thing to do after creating the URL and connection requests.

Using delegate methods of NSURLConnection, you can receive callbacks for things such as when data is received and when a connection has finished loading. This is handy, as our approach was to initiate additional requests for images while waiting for others to download.

The trouble we ran into was that we kept getting time out errors. The specific error was often displayed as “EXC_BAD_ACCESS” in the debug console. What was odd, was that we could account for each URL request, connection and download completing. It was obvious that a connection was being created somewhere on the way, and timing out, question was, what connection?

Here’s where we went wrong…when calling connectionWithRequest: (line #2 above) an initialized URL connection is returned and the data is immediately requested. The call to start must of begun a new connection request, which would eventually timeout as the original request was already underway. When we removed the call to start the application worked like a champ.

This was a surprisingly tricky bug to track down. From reading the documentation one would think calling start would be a reasonable thing to do, in other words, if the receiver hasn’t begun to download data, begin to do so (it’s obviously not quite that simple). It’s not clear to me when one would use this method. If anyone has some insight, I’d love to hear it.