Core Spotlight Featuring colors, table views, and spotlight search! Made with Xcode 8.0 beta 3 By Bliss Chapman © 2016 CocoaNuts

Welcome •

CocoaNuts is a community of love-of-the-game iOS developers who meet weekly to discuss Apple platform technologies and the app development process.

•

If you are a beginner, please do not feel overwhelmed! You are in the right place and we are here to help you ❤

•

As you make your way through the demo, don’t worry about understanding every little detail. Instead, try to familiarize yourself with the larger patterns in the development process and the Xcode environment. Most importantly, ask lots of questions and have fun!

Core Spotlight •

In iOS 9, Apple introduced a new technology called “Core Spotlight” that allows users to access your app’s content through Spotlight and Safari searches, Handoff, Siri Suggestions, and Reminders.

•

Spotlight search results are “deeplinked” to your application, improving the user experience and discoverability of your product.

Core Spotlight Today we will create a simple tool to help users keep track of their favorite colors by selecting them from a list! These selections will be saved and indexed for search.

Demo Orange = Instructions

Blue = Information

Launch Xcode. Xcode is an integrated development environment (IDE) which contains all the tools you need to build an iOS, watchOS, macOS, or tvOS app.

NOTE: If you do not have Xcode installed, you can download it from the Mac App Store.

Create a new project.

Select the template for this project.

Select the options shown above and then create your project.

Welcome to Xcode!

Toolbar

Navigator

Editor

Utilities

1

Select the Main.storyboard file.

Storyboards are used to graphically lay out the user’s path through your iOS or macOS app.

Select the 3rd tab at the bottom of the Utilities area. Explore! This object library contains representations of many UIKit objects you might recognize from apps you use every day.

Drag a Table View onto the canvas.

2 1

Look at all the shapes and sizes iOS devices can take! After adding in software features like layout direction to support left-to-right AND right-to-left languages, split screen mode, dynamic type, and localization, there are over 300+ combinations of environmental traits that your iOS app needs to handle. As thoughtful developers, we should design our user interface to adapt to this variability. We do this with a powerful system called Auto Layout. Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.

1

2

Select the table view then hold down control while dragging from the table view towards the top of the canvas.

3

Select “Vertical Spacing to Top Layout Guide.”

4

Repeat this process three more times to add a constraint from the table view to the bottom layout guide, trailing margin, and leading margin.

Your table view should now be “pinned” on all 4 sides.

The four constraints we just created are visible on our canvas represented by blue lines and in the size inspector tab ( )

The layout of your view hierarchy is defined as a series of linear equations represented by constraints. Your goal is to declare enough constraints so only one layout/solution is possible.

1

2

Double click on a constraint in the size inspector

3

Change the constant to 0.

to edit it.

4

Repeat this process for the other 3 constraints.

Make sure the constraint is NOT relative to margin.

1

2

Select dataSource from the popup then repeat the process and select delegate.

Finally, control drag from the table view to the “View Controller” yellow circle at the top of our canvas. This yellow circle is a placeholder reference to the UIViewController subclass which “controls” this scene’s view. UITableView off-loads the responsibility of configuring its cells to other objects. Right now, we are setting our ViewController class as the delegate and dataSource of this table view. This means the UITableView can request our ViewController class to provide information about how the table view should appear, what it should show, and how it should behave.

Delegation is a common Cocoa design pattern.

Code! •

Now we are finally ready to write some code! Our entire user interface has been set up however our table view doesn’t know what it should look like, how it should behave, or what content it should display.

•

Before we can run our app to test it out, our ViewController class needs to fulfill its responsibility as the delegate and dataSource of our table view object. At minimum, it needs to tell the table view how many sections it should have, the number of rows per section, and what each cell should look like.

•

Wow, that’s a lot of syntactic gibberish! If this is reading like Klingon to you, don’t worry! Hopefully it will become a lot more clear in a few slides. In the meantime, focus on the big picture, ask questions, and don’t forget to have fun!

2 1

3

Before we leave our storyboard, select the view controller scene and open the identity inspector. Notice how this view controller scene is a custom subclass of UIViewController called ViewController? Xcode initialized this project with a ViewController class already stubbed out and set the view controller scene we’ve been modifying to be controlled by this ViewController class.

If what I’m saying sounds like Dothraki, don’t worry! Just click the little gray arrow from step two to have Xcode automagically open the ViewController.swift file.

In the model view controller (MVC) design paradigm, the ViewController class we are editing is the controller. The controller’s role is to interpret the model and display it’s state in the view which is what we created in the storyboard.

First things first, we need to keep our promise to the table view we created by adopting the UITableViewDelegate and UITableViewDataSource protocols. We will do this with extensions for better code organization. Notice that Xcode is showing an error. This is because our ViewController class has not implemented any/all of the required methods for the UITableViewDataSource protocol. We haven’t told our table view what to display yet!

Remember that table view’s are customized through delegation. This means that at the appropriate times our table view will call methods in its dataSource object (our ViewController) to determine out how to display itself. To fulfill our duty as dataSource, we need to implement at minimum three methods. These are numberOfSections(in tableView), numberOfRowsInSection, and cellForRowAt indexPath. If you are confused, don’t worry! This is pretty complicated stuff so be sure to ask lots of questions.

Now that we have the basic functions stubbed out, lets think about what we actually want our table view to look like. We will only ever want one section so in numberOfSections(in tableView) we can simply return one. However, the other two methods are slightly more complicated. We are going to want to show as many rows as we have colors and we are going to want to configure our cells with the background color and description of the color they are displaying. Since these two methods are dynamic depending on the information we are presenting, it’s time to organize our color data set. TABLE VIEW CREATION The view controller creates a UITableView instance programmatically or in a storyboard. 1. The view controller sets the data source and delegate of the table view and sends a reloadData message to it. 2. 3. The data source receives a numberOfSectionsInTableView: message from the UITableView object and returns the number of sections in the table view. For each section, the data source receives a tableView:numberOfRowsInSection: message and responds by 4. returning the number of rows for the section. 5. The data source receives a tableView:cellForRowAtIndexPath: message for each visible row in the table view. It responds by configuring and returning a UITableViewCell object for each row. The UITableView object uses this cell to draw the row.

The UIKit framework has a handy class called UIColor which allows the creation of custom colors but also has default colors. We are going to create a new public property of our ViewController class to hold our color information. This property is an array of tuples with colors and corresponding color descriptions. A tuple type in Swift is a comma-separated list of zero or more types enclosed in parentheses.

1 2

Now that our model is set up, we are ready to complete our table view’s data source methods. 1) We want as many rows as there are colors so we can simply return the number of items in our colors array. 2) We want to configure the cell at the requested row with the background color and description of the color at that index in the array. 3) We need to make sure our cell identifier matches our table view’s prototype cell identifier in the storyboard. Copy the “colorCellReuseID” text.

1

2

1) Open the storyboard. 2) Select the table view. 3) Add one prototype cell if one doesn’t already exist. Table View’s are incredibly powerful and flexible tools because they can easily display hundreds of thousands of cells. This works by “reusing” templates for cells so it doesn’t have to create and store each cell in memory ALL the time. In fact, it only ever needs to keep the cells currently on screen in memory.

2 1

1) Select the prototype cell. 2) Set the identifier to “colorCellReuseID”

1

Run your app!

Ok great! The basics of our app are now in place. We have successfully created a list of colors and now we need to allow users to 1) Select their favorites. 2) Make sure these selections are saved. 3) Index these selections for search.

1

Open the ViewController.swift file.

2

Add two new table view delegate methods that allow our view controller to handle when a row is selected and deselected.

To test that these delegate methods are acting as expected, lets add a checkmark accessory when a row is selected and remove all accessories when a row is deselected.

Yay, checkmarks appear and disappear when I tap a row! Hmm, on further inspection it appears I can only select ONE favorite color. How cruel! This issue must be resolved. Fortunately it’s an easy fix.

1

While holding down option, select the Main.storyboard file in the project navigator to open Assistant Editor mode.

While holding down control, click and drag from the table view in the storyboard to the space below the class declaration and above the model. Name the outlet "tableView" and hit connect. See illustrations on the next slide. Outlets enable code to send messages to a user interface object. For example, programmatically telling a table view to allow multiple selection.

1

2

1

Now we can use our tableView outlet to configure our table view to allow selection of multiple rows.

2

If you build and run again ( should be able to select as many rows as you want!

) you

However, if you build and run again those selections will be lost! Our next objective is to make sure that these selections persist between app launches. To do this, we are going to create a new property of our ViewController class that saves the indices of our favorite colors to disk. viewDidLoad is part of the View Controller Lifecycle. A UIViewController object comes with a set of methods that manage its view hierarchy. These methods are called by iOS automatically at the appropriate times during transitions between states and serve as useful points for customization.

1

Add a new “favoriteColorIndices” property to our class with a custom getter and setter. When we “get” the property we retrieve the value from disk. If no value has been saved, we return an empty array. When we set the property to a new value, we save that new value to disk. UserDefaults is a simple way to store key value pairs like user preferences such that they persist between app launches.

1

Now when a row is selected, we can append the new color indice to our array and it will be saved to disk. Likewise, when we deselect a row we can filter out any elements of value 'indexPath.row' from the favoriteColorIndices array.

2

Add a for loop in viewDidLoad to loop through the user’s favorite indices and mark the corresponding rows as selected. Now building and running should persist selections.

Our final step is to index the selected colors for Core Spotlight. To do this, we will write a function that takes the index of the color and indexes it for searching. But first we need to import the CoreSpotlight and MobileCoreServices modules.

1) 2) 3) 4)

We need to configure the item’s attributes - set the title, description, and keywords the user can search. Create the searchable item with a unique identifier and the item’s attribute set. Add or update the item in the device’s default index. Check for errors after indexing has completed and print if the operation was successful.

Next we need to create the counterpart method to de-index colors if the user deselects them. The structure should look familiar. Finally, add calls to index and de-index favorite colors as the user selects and deselects rows.

2 1 Selecting colors should trigger a print statement in the console confirming they were successfully indexed.

By hitting command-shift-h you can return to the home screen. Swiping down will open a spotlight search where you can search for “favorite colors” or individual colors to see your indexed results.

Congratulations! •

Great job making it through those walls of text ☺!

•

Thank you so much for coming. Remember, if you have any questions please, please ask!

•

There are lots of past demos on the CocoaNuts website for you to work through and many other fantastic resources we recommend to further you on your iOS development journey.

•

Best of luck and I hope to see you next week!

BONUS 1

2

If for some reason, you wish to change application behavior based on what was selected in Spotlight search, you can add this method to your AppDelegate. You can test it out in the app you just built! On launch from a search result, your app should print which color was tapped.