Like a lot of people I ordered my Apple watch on April 10th, and now have to wait until June for it to arrive. I’m excited about the possibilities of the watch. I’m excited about writing applications for the watch, and I’m excited about sharing that information with you.

Introducing WatchKit through MVC

Understanding how to program for the Apple Watch is best described by a variation of the Model-View-Controller(MVC) pattern. It’s not exactly how the watch works, but I find it  a better mental framework for building apps than the real thing I’ve seen elsewhere.

MVC stands for Model-View-Controller. It’s a programming pattern to keep one organized. There is  a view which interacts with the user and a model that holds the data.  We can diagram it like this:

The controller in the middle keeps the model and view from talking to each other. They have to go through the controller. If any change happens to the view,  then the controller responds by changing the view or the model. In the same way if there is a change in the data, the controller will change what is necessary in the view. This keeps things modular and allows for the use of different views without a lot of extra coding or modification. If you need more of a detailed explanation of MVC try reading this.

Basically, the Apple Watch is nothing more than a second view. It is not a computing device at all. It has its own mini-controller, but even that is on the phone in an extension.  We can diagram it like this:

The view controller of your app may talk to one of three types of view controllers (apps, glances and notifications) in the extension. The extension transmits just enough from your phone to the watch to make the view. The extension controller can respond to events from the watch or display things.  Compared to a scene on a storyboard, it is quite a limited number of things we can display or sense too.

WatchKit has seemingly many familiar objects to place on the display — until you start to work with them. In many ways, WatchKit is UIKit super-ultra-mega-lite. Most of what you know from iOS has been paired down to a bare minimum, and a delegate controller like UITableViewController now has only parameters instead of delegates and data sources.

Many attributes can only be set on the storyboard, and not programmatically.  There is several places where we have write-only objects, such a labels. You can not  get a label’s text, only set it.

In this series of  articles on WatchKit, I’m going to go through each object one by one. Today, we’ll do some introduction and then in future lessons explain everything.

A Sample project

I’m excited about the Apple watch because I’m a runner and I see it as a great fitness tool. I’ve also been eating too much pizza than is healthy while working on my book Swift Swift View Controllers so I need to get out there and lose some weight. We’ll be making a series of projects which will create a fitness app I’d like to use on my runs.  For the first app in our series, we’ll go through setup of a WatchKit app, and use labels and two new controls unique to watch kit  to make an timer app for me to run after I’ve had some pizza.

Start by creating a new app for your phone by Command-N and picking a single view template.  Name the project SwiftWatchPizzaRun using Swift  as the language. We won’t be writing anything for the phone, we just need it as a base.  I left the device type as Universal.  Save the project.

From the editor, select Editor> Add Target…

Another window pops up asking which template to use for the template. Use the  WatchKit App Template found under Apple Watch  

You will get another window asking what configuration you want:

For this  app, uncheck  the Include Notification Scene. Press Finish.  You will get this message:

Activate the scheme.  You will be in the extension. Look at the Navigator and you will see some unfamiliar folders:

 

We have one folder for the WatchKit extension, and one for the WatchKit app.  The controller is in the extension, and the storyboard with the views is in the WatchKit App.  You only have a view in a watch app.  Click on the storyboard and you will get a blank watch scene.

You will find in the object library some old friends from the iPhone and iPad storyboard.  Find the label and drag out two labels. You’ll immediately notice a difference in the storyboard. The labels stack.

WatchKit uses a different layout system than iOS  storyboards. It will stack items below each other unless you give them one of nine positions. If two labels are in the same position, they stack. Select the top label. In the attributes inspector find Position

Currently it is the left top position.  click the Horizontal  and you will see it has choices for Left, Center and Right. Select Center. Click Vertical and you will see Top, Center and Bottom. Leave it Top.  Now select the other label, and Center Horizontally.  Double click the top label and change the label to read Hello Pizza!! You should now have this:

Using Emoji in an App

A simple way to add graphics to the watch is to use Emoji.  Double click in the second label. Press Control-Command-Spacebar together.  You will get the special character window:

On the right of the window select  Emoji and then find Food and Drink.

Select the Slice of Pizza and then double click the selection. The pizza appears in the label.

Close the special character window for now. Select the pizza on the storyboard and in the attribute inspector change the Font to System and make the Size 30 points to make the pizza bigger.

Adding a Date

We’ll use another object to the watch. We already have a time, let’s add a date.  Given this is a watch, one of the new objects we can drag onto the storyboard is a date. In the Object library find the date:

Now drag it onto the story board.

Position the date Vertical: Bottom and Horizontal: Center. You’ll notice it is giving both the date and time. We can control what it shows and how it shows it in the attributes inspector.  For those who have used NSDateFormatter before, theses choices might look a bit familiar – because the date is a label that uses NSDateFormatter. We have four choices for the date and time: None, Short, Medium, and Long. We already have a time in the status bar,  so let’s put only the date.  Change the date  to Date: Medium, Time: None .

You should now have this,

We are about ready to build and run the app. There are two more steps to do though. First is make sure you are running the correct scheme. At the top left of Xcode see if the device looks like this:

This means we are running the watch app, not the iPhone app.

Secondly, we need to turn on the watch simulator.  You will need to have the simulator running to do this. I keep the simulator in my dock. If you do not,  you can either search for it in finder and run it (it’s hidden inside an Xcode folder)  or run the project and stop the project when the simulator appears.

Once you have the simulator running,  go to Hardware>External Displays. Then select the Apple watch you want to test with. Here I’ll test with the 38mm watch.

 Once you have set up the simulator you won’t have to do this step again.  Build and run, and then click on the simulator.  Unlike a iPhone simulator, the simulator does not automatically make itself the top window – you will have to do this manually.

You should get this:

You have run your first watch app.

Some of you might be seeing a different date format. This uses NSDateFormatter internally, which means it is subject to localization. If you are seeing 12 Apr 2015, that’s why.

Adding a Second Controller

To finish this up, let’s add a second controller to the storyboard. Stop the simulator, and go back to the storyboard.  You’ll find at the top of the object library an Interface Controller.

Drag  an Interface Controller out, then drag two labels out onto the new controller.  There is also a timer in the object library:

Drag out one of these onto the new interface controller. Your interface controller should look like this:

Click on the background of the label and change the background to  green (#00ff00)

On the top label, double click on the label and type Go Run!! In the attributes inspector, Set its position Center and Top. to make the text readable change the text color to black.

On the second label, set its position bottom and center. For the content press Control-Command-Spacebar and in the  Emoji Activities and double click the Runner

.

Close the character window, and go back to the storyboard. Change the font to System 80 point.

Select the timer. Set its position to Center,Center. Change the text color to be visible on the background. I chose a dark green(#003300). Under Timer, check the enabled on. This will start the timer as soon as the view is visible.

Your finished layout should look like this:

We need to connect this by a segue. Drag a button onto our pizza scene. Set it to be Center, Center make the button back ground light gray and the text dark text. Set the title to Work Out.

Control-drag from the button to the go run scene to create a segue. You will get a menu of possible segues:

Select push, which is the watch equivalent of a navigation controller.  Your storyboard should look like this:

Build and Run:

We have working navigation and a working timer.  There’s no code in this lesson, but in our next lesson we’ll work with the buttons and other controls and start to code a more interactive watch app.