Sectioned table example with videos and articles

Sectioned Tables

I wanted to write-up the result of a code challenge that I completed a while ago.   I was asked to create a tabbed iOS app with sectioned tables, pulling video thumbnails and article titles into different sections.    Clicking on a thumbnail or article title would display the corresponding video or article in a separate view.    Adding to the challenge, I was asked to provide bookmarking capability for the videos and articles.  The bookmarked content would be visible in a second tab.

SectionedTable

Challenge Details and GitHub app

The full details of the challenge and resulting project can be found at:

https://github.com/scottcarter/SectionedTableSample

Code Challenge Notes

Caveats

  • Clicking the play on the YouTube video will occasionally launch Safari with an ad instead of starting the video. Seems like an issue with YouTube.
  • Memory optimization needs to be investigated.  The UIWebView is known for being memory intensive and not releasing memory …
  • I started providing support to toggle the bookmark status from the detailed view from the Bookmarked tab. This is not complete and I have temporarily hidden the segmented control when coming from this tab.
  • Progress section on first tab not yet added.
  • There is probably more opportunity for code restructuring.

YouTube

Using YouTube for videos. Created application in Google Developers Console – https://console.developers.google.com

Google APIs Client Library for Objective-C:  https://code.google.com/p/google-api-objectivec-client/

YouTube Data API (v3):  https://developers.google.com/youtube/v3/

Videos list:  https://developers.google.com/youtube/v3/docs/videos/list

YouTube Helper Library

It is not possible to download videos directly from YouTube (violation of TOS) and one must use a UIWebView.   YouTube makes this easier with the YouTube Helper Library: https://developers.google.com/youtube/v3/guides/ios_youtube_helper

https://github.com/youtube/youtube-ios-player-helper

Adding this via a Podfile.

New York Times API

Using New York Times API for articles.

Registered an application and got API key at http://developer.nytimes.com/apps/mykeys

Most Popular API: http://developer.nytimes.com/docs/most_popular_api/

Console: http://developer.nytimes.com/io-docs

Using Unirest for Objective-C for lightweight HTTP client library: https://github.com/Mashape/unirest-obj-c

http://unirest.io/objective-c

Refresh Control

Content can be refreshed with refresh icon on navigation bar, or by pulling down on table using UIRefreshControl. The refresh control indicates the time of the last refresh.

Error Handling

I display a message on main table under Videos, Articles sections (special row) if corresponding API fetch has an error. I also display messages here on a Core Data error.

This is just a basic level of reporting for illustration. A production app would need to handle all the possible errors in the code, distinguish network versus other errors (Reachability code), etc.

Bookmarks

I use a checkmark on main tab to show bookmarks. Bookmarks can be toggled on the individual video/article display view controller.

Tab 1 – Main Content

The number of results for videos and articles can be adjusted. See MainTableViewController.m: VideoNumResults, ArticleNumResults

Tab 2 – Bookmarked Content

I use 2 instances of NSFetchedResultsController to control updates to the sections for videos and articles. The instances will pull results directly from corresponding Entities in Core Data.

It would be possible to use a single instance of NSFetchedResultsController and dedicate an attribute for section name (corresponding to sectionNameKeyPath property of NSFetchedResultsController). I decided that separate instances would offer more flexibility and not require that I merge fields of bookmarked videos and articles into a single Entity.

I will use a Checkmark accessory to indicate bookmarked content.

 

 

Advertisements

One response to “Sectioned table example with videos and articles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s