Session 7

Splitting Up Is Easy to Do (With a Split View Controller)

Session Materials

Resources

Assignment

In this assignment, “Go Ask a Duck”, you will create an instant answers search engine using the DuckDuckGo Instant Answer API. The application will make use of a UISplitViewController for the application’s main interface and use NSFoundation and native Swift networking classes. This assignment will require the use of both Storyboards and programmatic interface design.

image-title-here

Project Setup

Figure 1. Storyboard layout for Master-Detail Application.
Figure 1. Storyboard layout for Master-Detail Application.
Tip: If you use the Xcode template, this should happen almost automatically. The default behavior provides the adaptive layout that we want. You may just need to check the contraints on your views to provide different values between **Regular** and **Compact** size classes.



Figure 2. The application interface should look similar to this.
Figure 2. The application interface should look similar to this.

The View Controllers

MasterViewController

http://api.duckduckgo.com/?q=<QUERY TERM>&format=json&pretty=1

For example:

http://api.duckduckgo.com/?q=tesla&format=json&pretty=1

Tip: You do not need to show results for any additional named `Topics`. Only show the top level `RelatedTopcics`.



// The result from DDG
let result = "<a href=\"https://duckduckgo.com/Apple\">Apple</a>A deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple."

// Use componentsSeparatedByString to split the string.
let text = result.componentsSeparatedByString("</a>")
let cleanSnippet = text[1]
Tip: Some results will contain an *Icon* dictionary. You do not need to include the icon in the table cell for this assignment.



DetailViewController

Figure 3. A list of results from the Duck Duck Go Instant Answers API should show in the detail view controller.  Explore the properties of `UIWebView` that allows the content to be best displayed in the view.  There is one property that you can set to make sure that the page scales correctly.
Figure 3. A list of results from the Duck Duck Go Instant Answers API should show in the detail view controller. Explore the properties of `UIWebView` that allows the content to be best displayed in the view. There is one property that you can set to make sure that the page scales correctly.
Tip: You can use the system bar item Bookmark icon or a custom image.



BookmarkViewController

Figure 4. The BookmarkViewController should list all the user's favorite links.  The table should be editable to allow the user to delete link.  Tapping on a table view cell should dismiss the view controller and load the URL in the web view.
Figure 4. The BookmarkViewController should list all the user's favorite links. The table should be editable to allow the user to delete link. Tapping on a table view cell should dismiss the view controller and load the URL in the web view.
Tip: Remember to update your data model being stored in `UserDefaults` when you are editing tables. What you see onscreen does not always correspond to your model.



Figure 5.  Set the attributes of the view controller using Interface Builder.  You can change the size of a view controller in Storyboard by changing the Size inspector to freeform.  You still need to change the size of the view controller, as this only effects what you see on the screen.
Figure 5. Set the attributes of the view controller using Interface Builder. You can change the size of a view controller in Storyboard by changing the Size inspector to freeform. You still need to change the size of the view controller, as this only effects what you see on the screen.
protocol DetailBookmarkDelegate: class {
  func bookmarkPassedURL(url: String) -> Void
}
extension DetailViewController: DetailBookmarkDelegate {
  func bookmarkPassedURL(url: String) {
    // Load the passed in URL to the webview
  }
}
  weak var delegate: DetailBookmarkDelegate?

Networking

Tip: Make sure that the data type you are returning from your class is correct. It will depend on your implementation, but it may be different from what was passed from the Issues application.



Figure 6. Add heads-up-display to indicate to the user that content is downloading.
Figure 6. Add heads-up-display to indicate to the user that content is downloading.
Tip: The instructurs will test this by turning wifi off and running your application. You should test your code using this technique. If you are testing on a device, put the deivice in airplane mode. You will immediately loose 2 points if your app does not handle this appropriately.



Functionality

Grading

The application should compile with no errors or warnings and perform all described behaviors. If the app does not compile you will receive a 0. Feel free to explore additional enhancements to improve the appearance or functionality of the application.

The 11th point will be awarded for applications that implement a “Night” mode for their application. Combining many of the techniques from this assignment, you should be able to invert the color palette to make the application easier to use in a dark setting.

Figure 7. An example of day and night mode in Tweetbot 4.
Figure 7. An example of day and night mode in Tweetbot 4.
Tip: Store the state in user defaults.



Tip: You can use `UIAppearance` to make application-wide changes to `UIKit` view attributes, but there are other ways to accomplish this.



Grading

The application should compile with no errors or warnings and perform all described behaviors. If the app does not compile you will receive a 0. Feel free to explore additional enhancements to improve the appearance or functionality of the application.

Due Date

Assignment 6 is due August 9, 2017 at 5:29pm.