The launch of Apple Watch is rapidly approaching. Nearly every iPhone application could benefit from the increased user engagement and convenience that Apple Watch will bring to the masses starting on launch day. As you will see, it is very easy to develop an Apple Watch extension. For most types of applications, it will not be a problem to have an Apple Watch Extension ready on launch day.

Objective

In this tutorial we will develop WatchStocks using the WatchKit SDK. It is an Apple Watch Extension that uses a Page-Based navigation style to show the user two stock quotes that update whenever the user launches the application. We will display the final application running on the Watch Simulator. (Note, you will need to install Xcode 6.2+ to have the Watch simulator)

Click here to download the starter project for this tutorial. It is an empty iPhone demo app configured with an Apple Watch Extension. The WatchKit application’s files are contained in the “WatchStocks WatchKit Extension” folder. These are the files we will be working with throughout the tutorial. It includes sample code that pulls Stock information from the Yahoo Finance API.

A Note About Apple Watch Extensions

For the initial release of Apple Watch, Apple has limited what it is possible to do with an Apple Watch Extension. Complex applications will do most of their work on the user’s iPhone to conserve the Watch’s battery. Furthermore, all Apple Watch extensions must belong to a host iOS application. At least for the initial release of Apple Watch, standalone Watch Apps are not permitted.

Making WatchKit Interfaces

WatchKit provides two basic ways to organize User Interfaces (UI). Hierarchical interfaces are like Table View apps on iOS and are intended for more complicated layouts. Page-Based interfaces are simpler, so our app will use this interface style. All we need the user to be able to do is swipe back and forth between two pages of content: one will show a stock quote for Apple, and the other for Google.

Make a new Swift class in the Apple Watch Extension called AppleDetailController. Make sure it is a subclass of WKInterfaceController. Hooking up the interface will require the following properties to be defined for AppleDetailController:

@IBOutlet var nameLabel : WKInterfaceLabel!
@IBOutlet var askLabel : WKInterfaceLabel!
@IBOutlet var changeLabel : WKInterfaceLabel!
@IBOutlet var changeValue : WKInterfaceLabel!
@IBOutlet var capLabel : WKInterfaceLabel!
@IBOutlet var capValue : WKInterfaceLabel!

Now that we have defined our UI elements, we will manipulate our Stocks API to get our data. Normally, using the word “manipulate” so close to the word “Stocks” is a bad idea, but in this case we will be just fine.

At the bottom of AppleDetailController’s awakeWithContext() function, add the following two lines:

let api = StocksAPI()
api.loadStocks("AAPL" , stocksLoaded)

The first line simply creates a new instance of StocksAPI. The second line calls our StocksAPI instances’ loadStocks() function, which takes a stock ticker and another function as arguments. stocksLoaded() will be called after StocksAPI has some data, but until we define that function Xcode will simply mark an error.

stocksLoaded() reads as follows:

func stocksLoaded(loadedStocks : [Stock]){
     if (loadedStocks.count > 0){
       setupUI(loadedStocks[0])
     }
}

This function receives an array of Stock objects from StocksAPI. When calling loadStocks(), we are not guaranteed to receive any data, and there is even a possibility that the function may return more than one stock. To protect our application against crashes, we first check if the array contains anything. If it does, we use the first object in the array as an argument to another function, setupUI().

setupUI() does exactly what it says: it takes that data for our stock and displays it using the IBOutlets we defined earlier.

func setupUI(stock : Stock){
     nameLabel.setText(stock.companyName)
     askLabel.setText(stock.ask)
     changeValue.setText(stock.change)
     capValue.setText(stock.marketCap)
}

AppleDetailController is now complete. Our second interface, GoogleDetailController, is identical except that Google’s stock ticker is GOOG. The call to api.loadStocks() becomes this:

api.loadStocks("GOOG" , stocksLoaded)

Hooking up the Interface

After programming our interfaces, we will need to hook them up in Interface Builder. If you are used to laying out iPhone and iPad interfaces, there are a few additional considerations to keep in mind. Apple Watch interfaces are much more constrained than other iOS interfaces so you cannot just drop UI elements anywhere you want. To arrange our labels without them stacking vertically, we will use Groups. Open Interface.storyboard and select the topmost interface controller. Go to the Identity Tab in the inspector and change its class to AppleDetailController.

To arrange the interface, add three Groups from the Object Library. Each Group will need two labels. The final layout should look like this:

Next, make the connections between the labels and AppleDetailController. When complete, the connections should be like so:

The Second View

Drop another View Controller onto the storyboard and make its class GoogleDetailController. Follow the same process for laying out the interface and connecting it. To connect the two pages of our application, hook AppleDetailController’s next page outlet to GoogleDetailController as in the diagram below:

Testing WatchKit Applications

Our app is now ready to test! At the time of writing, very few people in the world have Apple Watch test devices. The rest of us must settle for using the iOS Simulator. Since Apple Watch apps run primarily on a connected iPhone, the Apple Watch is handled by the simulator as an external display.

To prepare the simulator for our app, launch it in Xcode > Open Developer Tool > iOS Simulator. In the simulator’s menu, do Hardware > External Displays > Apple Watch - 42mm. You should now have a small, blank window representing the Apple Watch hardware running next to your simulated iPhone.

Back in Xcode, make sure the current scheme is our Apple Watch app by doing Product > Scheme > WatchStocks WatchKit App. If you Build and Run, you should now see the application launch on the simulated Apple Watch. If nothing else, checking Apple’s stock price daily should reassure you about learning to develop for their newest device.

Conclusion

Now that you have completed this tutorial you have a basic grasp on the concepts of Apple Watch development. You can find the finished source code for the tutorial application here. As with the launch of the original iTunes App Store for the iPhone and iPhone 3G back in 2008, the most impressive features of Apple Watch will be the ones that developers provide long after its launch.