Integrating Facebook and Parse Tutorial: Part 2
In part 2 of our Parse + Facebook tutorial series, you’ll wrap up the image sharing app with image wall and comments features. By Toby Stephens.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Integrating Facebook and Parse Tutorial: Part 2
45 mins
- Getting Started
- Retrieving and Storing the Friends List
- Retrieving Images from Parse
- Going to the Background
- Displaying Images
- Asynchronous Downloads and Notifications
- Retrieving User Profile Pictures
- Adding Comments to Images
- Saving Comments to Parse
- Using the New Comment Field
- Uploaded Image Notifications
- Polishing Your App
- Where To Go From Here?
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.
UIRefreshControl
is only available on iOS6 or better, but there are a huge number of open source libraries for adding pull-to-refresh functionality to older OS versions. One favourite is CKRefreshControl; give it a whirl if you need to support iOS 5 in your app.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!