In this post, I want to show you how SensibleTableView’s Web services capabilities coupled with some good design can help you create an app much faster than you think.

The app is called SensibleShare and it is basically an app that pulls a list of popular posts from the Instagram API and displays it in a list. When you tap on a post, a detail view pops up to show you the profile of the poster with his/her recent posts on Instagram.

This app uses STV 3.1.8 Pro to access the Instagram API and the Socioville template to achieve the design.

Let’s get started.

Getting access to the Instagram API

First off, you will need an API access code from Instagram to use the API. Please register here as a developer.

After you register, you will need to create a new client app that will connect to the API. Go back to the developer portal and click on the “Manage Clients” button and follow the steps to create a new client.

The last step is to get the access token. Normally, you would have to create a sample web app and create redirect to get an access token. That takes too much effort. On this page, you can easily generate an access token by setting your redirect URI to this link.

Go to the page, fill your client ID in the form and hit submit. You will then be presented with an access token that you can now copy and use in your app.

Getting the List Of Popular Posts

STV 3.0 has web service capabilities and it makes it easy to consume an API and get the variables you need quickly. Create a new SCTableViewController in your app and add the following bit of code to the viewDidLoad method.

NSString* url = @"https://api.instagram.com/v1/media/popular/"
 
SCWebServiceDefinition *definition = [SCWebServiceDefinition
                                        definitionWithBaseURL:url
                                        fetchObjectsAPI:@""
                                        resultsKeyName:@"data"
                                        resultsDictionaryKeyNamesString:@"images"];
 
    NSString *accessToken = @"19816542.xxxxx.xxxxxxxxxxxxxxxxxxxxxx";
    [definition.fetchObjectsParameters setValue:accessToken forKey:@"access_token"];
 
 
    SCPropertyDefinition *imagePropertyDef = [definition propertyDefinitionWithName:@"images"];
    imagePropertyDef.title = @"Images";
    imagePropertyDef.type = SCPropertyTypeAutoDetect;
 
 
    SCArrayOfObjectsSection *popularPostsSection = [SCArrayOfObjectsSection sectionWithHeaderTitle:nil webServiceDefinition:definition batchSize:7];
    popularPostsSection.itemsAccessoryType = UITableViewCellAccessoryNone;
 
 
    popularPostsSection.sectionActions.cellForRowAtIndexPath = ^SCCustomCell*(SCArrayOfItemsSection *itemsSection, NSIndexPath *indexPath){
        SCCustomCell *customCell = [SCCustomCell cellWithText:nil
                                         objectBindingsString:@"3:user.username"
                                                      nibName:@"PostCell"];
 
[self.tableViewModel addSection:popularPostsSection];

The code above creates a new web service definition with the Instagram endpoint for “Popular posts”. The access code is added as a parameter. (You should now paste the code you created in the first step.)

A new section for our table is now created and added.

Designing the List Of Popular Posts

In the sample project, you will see that we have created a custom cell that will house all our posts. This cell is designed using a modified version of the Socioville template from App Design Vault.

This version also uses the SCTheme theming capabilities of STV 3.0+.

Here is the navigation bar image we are using in the template.

And we configure the navigation bar by using the following code in the iPhoneTheme.sct file

NavigationBar
{
    backgroundImage: "menubar.png";
}

and this to apply the style in code

[theme styleObject:self.navigationController.navigationBar usingThemeStyle:@"NavigationBar"];

You will find more configurations in the iPhoneTheme.sct file which is included in the project. Below you will see how the app looks with and without the design.

Implementing the Detail View

When setting up the table section that holds the popular posts, we create a hook to show a custom detail view controller using the code below

popularPostsSection.sectionActions.detailViewControllerForRowAtIndexPath = ^UIViewController*(SCTableViewSection *section, NSIndexPath *indexPath){
 
        DetailViewController* detail = [[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:nil];
 
        id userId = [self.userIds objectForKey:indexPath];
 
        detail.userId = [userId intValue];
 
        return detail;
    };

Our DetailViewController looks like this in our nib file.

In the detail view, we want to load the profile information of the person that posted the original image we have selected. We pass on the user id to the detail view controller and use this to query the instagram API again.

This time we do it differently because our result is not a list of items but a single user profile.

NSString* userURL =  @"https://api.instagram.com/v1/users/%d/";
userURL = [NSString stringWithFormat:userURL, self.userId];
 
 self.userDefinition = [SCWebServiceDefinition
                           definitionWithBaseURL:userURL
                           fetchObjectsAPI:@""
                           resultsKeyName:nil
                           resultsDictionaryKeyNamesString:nil];
 
    NSString *accessToken = @"19816542.cb1db93.xxxxxxxxxxxxxxxx";
 
    [self.userDefinition setAtomicResultKeyName:@"data"];
    [self.userDefinition.fetchObjectsParameters setValue:accessToken forKey:@"access_token"];
 
 
    SCWebServiceStore *userStore = (SCWebServiceStore *)[self.userDefinition generateCompatibleDataStore];
 
    [userStore asynchronousFetchObjectsWithOptions:[SCDataFetchOptions options]
                                                 success:^(NSArray* res)
    {
        if(res.count > 0){
 
            [self getUserDataFromResult:res[0]];
        }
    }
    failure: ^(NSError *error)
    {
        NSLog(@"Failed due to: %@", error);
    }];

From the code above, we create the web service definition but this time we set the resultsKeyName to nil and the atomicResultsKeyName to “data”. Then we create SCWebServiceStore to asynchronously pull our user data.

This is then displayed on the screen in the method getUserDataFromResult:

-(void)getUserDataFromResult:(NSDictionary*)result{
 
    NSString* fullname = [result objectForKey:@"full_name"];
    NSString* profilePicLink = [result objectForKey:@"profile_picture"];
 
    NSDictionary* counts = [result objectForKey:@"counts"];
 
    NSString* photoCount = [[counts objectForKey:@"media"] stringValue];
    NSString* followerCount = [[counts objectForKey:@"followed_by"] stringValue];
 
    [self.photoCountLabel setText:photoCount];
    [self.followerCountLabel setText:followerCount];
 
    UIImage* image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:profilePicLink]]];
    [self.profilePictureImageView setImage:image];
 
    [self.mainImageView setImage:image];
 
    [self.usernameLabel setText:fullname];
 
}

This is the final result of the detail view. The recent posts from the current user is pulled using the same technique as the list on the first ViewController.

Download the Final Sample Project

You can download the full sample here and browse the project to see how everything was implemented in full detail.

Would you like more design templates to make your apps stand out? You can get our free Ocean template by signing up here. It will be sent directly to your inbox.

3 comments

  1. Dario

    The download will not compile, it says Lexical or Preprocessor Issue:
    SensibleTableView/SensibleTableView.h missing

    Do we need to include it ourself?

    • Christopher

      The example does come with the sensible table view framework (the lite version) – so it should work.
      However, if it doesn’t for some reason, you can download it from here:
      http://sensiblecocoa.com

      Also note that you can only download the lite version for free (which doesn’t have any web capabilities).
      In this article, Tope used the pro version – which currently costs $499 to buy.

      You could still get around this by just using the instagram API and create your own table views.