Integrating Facebook and Parse Tutorial: Part 2

Polishing Your App

Your app works, and looks great. However, as with any app, there’s always a couple of ways to make it shine.

The initialization of NSDateFormatter is a rather expensive operation. It’s not a terribly good idea to initialize it in a table view cell; instead you will create a single instance of NSDateFormatter to use in the ImageWallViewController.

Open ImageWallViewController.m and declare a new variable in the class extension:

NSDateFormatter *_dateFormatter;

Next, add the following code to viewDidLoad in ImageWallViewController.m, just below the call to [super viewDidLoad]:

// Create a re-usable NSDateFormatter
_dateFormatter = [[NSDateFormatter alloc] init];
[_dateFormatter setDateFormat:@"MMM d, h:mm a"];

Still in the same file, update tableView:viewForHeaderInSection: by replacing the following lines:

NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateFormat:@"MMM d, h:mm a"];
[imageCell.lblUploadedDate setText:[dateFormatter stringFromDate:wallImage.createdDate]];

with the code below:

[imageCell.lblUploadedDate setText:[_dateFormatter stringFromDate:wallImage.createdDate]];

At the moment, the Image Wall refreshes only when you launch the app or upload images or comments yourself. A pull-to-refresh would allow the user to request an update of the Image Wall whenever they wish.

Open ImageWallViewController.m and add the following code to viewDidLoad just before you call getWallImagesSince:delegate::

// If we are using iOS 6+, put a pull to refresh control in the table
if (NSClassFromString(@"UIRefreshControl") != Nil) {
	UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
	refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"Pull to Refresh"];
	[refreshControl addTarget:self action:@selector(refreshImageWall:) forControlEvents:UIControlEventValueChanged];
	self.refreshControl = refreshControl;
}

This checks to see if UIRefreshControl is supported in the OS, and if so, instantiates the UIRefreshControl and sets action selector to refreshImageWall:.

Still in ImageWallViewController.m, add the following refresh method:

- (void) refreshImageWall:(UIRefreshControl *)refreshControl
{
	if (refreshControl) {
		[refreshControl setAttributedTitle:[[NSAttributedString alloc] initWithString:@"Refreshing data..."]];
		[refreshControl setEnabled:NO];
	}

	// Get any new Wall Images since the last update
	[Comms getWallImagesSince:_lastImageUpdate forDelegate:self];
}

The above method checks if the caller passed in a UIRefreshControl. This check is necessary since you’ll use refreshImageWall to refresh the table view in other situations that don’t use the refresh control, such as after uploading an image or comment.Then you call getWallImagesSince:forDelegate as you have before.

Now you can tidy up all the calls to getWallImagesSince:forDelegate in the rest of your code.

Still in ImageWallViewController.m, find the call to getWallImagesSince:forDelegate in viewDidLoad and replace it with:

[self refreshImageWall:nil];

This will have the same effect, but use your new method instead to refresh the table.

Now, find imageUploaded: in the same file, and replace the contents of the method with:

[self refreshImageWall:nil];

Finally, find commentUploaded: replace the contents of the method with:

[self refreshImageWall:nil];

There — that looks a lot cleaner. All that’s left is to clean up the UIRefreshControl after the refresh is complete.

Find commsDidGetNewWallImageComments: in ImageWallViewController.m and add the following code to the end of the method, just after you have reloaded the table data:

// Update the refresh control if we have one
if (self.refreshControl) {
	NSString *lastUpdated = [NSString stringWithFormat:@"Last updated on %@", [_dateFormatter stringFromDate:[NSDate date]]];
	[self.refreshControl setAttributedTitle:[[NSAttributedString alloc] initWithString:lastUpdated]];
	[self.refreshControl endRefreshing];
}

Build and run your project. If you’re on iOS6 or better, you can now pull down the Image Wall to refresh it.

Where To Go From Here?

Astute readers will have noticed that the app has a Facebook Share button sitting on the section headers in the Image Wall. This button is all wired up in the Storyboard for you to share your image on Facebook. To learn a bit more about the Facebook APIs, try to add the code that takes care of publishing your images to your Facebook feed.

Another neat offering from Parse is their new app-driven push notification. If you’re familiar with setting up push notifications, then it should be a simple manner to update your app to listen for new comments on your Image Wall and respond to the push notification appropriately.

If this is something you’d like to try, take a look at Apple Push Notification Services in iOS 6. Then, read through Parse Push Notifications for more detail on how to hook up push notification Parse.

You can download the completed project for this Parse tutorial series here, including an implementation of the Facebook share noted above.

I hope you’ve enjoyed learning about Facebook and Parse; feel free to post your comments or questions about integrating Facebook and/or Parse, along with any suggestions for related tutorials in the future!