With the initial release of the WatchKit SDK expected later this month, it’s not too early to start thinking about apps you might want to work on.

How can you add a small-screen component to your own apps? And what kinds of new apps can you think of that really take advantage of the watch and all its features?

We know we won’t get WatchKit until later this month, and won’t see any actual hardware until 2015, but what if you want to start preparing in advance?

Good news: to help us get started early, I have written a Watch Simulator template app that can run on iPhone and iPad! You can use the familiar interface builder tools, storyboards, and Swift code to build a prototype Apple Watch app.

In this tutorial, you’ll use the watch simulator to get a feel for what the hardware will be like. The actual WatchKit SDK might be quite different, but this at least helps you prototype some ideas, allowing you to get a good head start.

Getting Started

Apple Watch has a few nifty features that you’ll want to keep in mind as you dream up apps for it. It has a flexible display that can distinguish the difference between a light tap and a hard press, known as Force Touch. This might be useful in a space-based shooter game; taps could shoot the machine-gun, and a hard press fire a missile.

Apple Watch also has a scroll wheel on the side that is known as the Digital Crown. By spinning it, you can collect one-dimensional movement information to zoom maps and images, or scroll through a list.

The vibration motor is extremely precise. You’ll be able to feel different parts of the backface face vibrate, so for example if you are using it for GPS directions, you could feel the difference between a right turn and a left turn vibration.

Finally, Apple Watch has a sensor that uses infrared, visible-light LEDs and photodiodes to detect your heart rate. In the prototype app for this tutorial, you’re going to build something that makes use of the heart rate sensor.

Watch Simulator

You’ll use the Watch Simulator template project to provide a nice place to start. Download the Watch Simulator project, unzip the file, and open WatchSimulator.xcodeproj in Xcode.

Open Main.storyboard by selecting it in the File Navigator.

You’ll see a simulated watch in the Main View Controller Scene and an embedded App View Controller Scene that will hold the user interface for your app. As you set up the UI, remember to add all the views to the App View Controller scene!

First, you’ll set up the label that will show the user’s heart rate. Drag a Label from the object library to the App View Controller.

With the label selected, open the Attributes Inspector and change the label’s text to 80 (the text, not the font size).

Then open the font popup and change Font to Custom, and then the rest of the settings to Helvetica Neue, Light, and a size of 32.

Next, update Color to white, with 60% opacity.

Click the Pin button in the lower right, which looks like a TIE fighter, for the Star Wars fans. Uncheck Constrain To Margins. Set the right constraint to 4 and the bottom constraint to -1 – that is indeed negative. Change Update Frames to Items of New Constraints.

Finally, click Add 2 Constraints to add the constraints and update the layout.

You should see the label move to the bottom-right of the view.

Since the user’s heart rate will change, you’ll need to connect an outlet so you can change the value from code.

Open the Assistant Editor and make sure AppViewController.swift is open in the editor; if it’s not then select it from the jump bar at the top. Control-drag from the label to a spot inside the class definition.

Name your outlet bpmLabel and hit Connect.

Good work! Now you have your completed view.

Creating the Model

Now that view is set up, the next step is to model the data. You’ll need some place to store the heartbeat data – for this app, that’ll consist of an icon, some descriptive text, and the actual beats per minute value.

In the Project Navigator, right-click the WatchSimulator group and select New File…. Select the iOS\Source\Swift File template and click Next.

Name the file BeatPattern.swift and click Create.

Make sure BeatPattern.swift is open and replace the contents with the following:

This sets up the previously-mentioned properties for the struct. You’ll be using emoji rather than an image for the icon, so that’s a String rather than an instance of UIImage.

Next, add the following computed property to the bottom of the struct:

var duration: Double {
return 60.0 / Double(bpm)
}

This property tells you how much time each heartbeat takes. For the math nerds amongst you, here’s how this is derived:

60 seconds/minute ÷ X beats/minute = Y seconds/beat

That’s all you’ll need for the model! Since you’ve provided default values for the properties, you don’t need to explicitly define an initializer. Swift will automatically create an initializer with the init(icon:description:bpm:) signature, which you’ll use to provide your own values.

Displaying Heartbeats

The app will show different icons depending on the user’s heart rate, so you’ll need to define those ranges next.

Open AppViewController.swift and add the following array property to the class:

There’s some emoji there for the icons, and web browsers can have trouble displaying those characters. Instead, here’s a text file with the code snippet above. You can download it, open it in a text editor, copy it, and paste it directly into AppViewController.swift.

This will set the icon label to be as big as the entire watch screen. Since the display will be a single emoji character, you’ll need a large font size of 132 points to get this to look just right.

You might wonder why this code can’t go in viewDidLoad. Although the view is loaded at that point, the subviews are not quite in place yet. By waiting just a bit longer for the call to viewWillAppear(animated:), you make sure that you cad add the new views and place them correctly.

Since this is just a simulation, you’ll cycle through the available beat patterns in sequence. Add the following method to the class to handle the cycling:

First, you increment the current index to switch to the next beat pattern. If you’ve reached the end and the new index is out of the range of the array, reset the index to zero to start from the beginning.

With the new index, you set currentBeatPattern using the array.

Set the values for the two labels in the view. Notice that you’re using Swift’s string interpolation to convert the Int into a String.

For now, you’ll simulate a changing heartbeat by adding a timer to call newBeat() periodically. Add the following method to the class:

This will call newBeat() once to kick things off, and then set up a timer to call newBeat() every eight seconds beyond that to update the view.

Now, build and run. Every eight seconds, you will see the color of the heart change and the beats-per-minute number update.

Animating the Heartbeat

The final thing is to do something interesting in those eight seconds, namely a little animation to make the heartbeat look realistic. Remember, the watch will have sensors to detect the actual heart rate, so showing live data like this is a nice touch!

The shrinkFactor is how much the heart will contract in an animation. The expandFactor is just the inverse of the shrinkFactor, which you’ll use for the second half of the animation.

By doing it this way you ensure that the heart never looks pixelated. Imagine you have an image that is 500 pixels. If you shrink it down to 300 and then return to to 500, you never go beyond the original resolution and you keep the image sharp. Although Emoji is a vector font, when it is rendered in the label, it gets treated as pixels just like any other image.

Next, add the following method to the class to perform the actual animation:

Give the heart a random beat instead of going in through the beat patterns in order

Add and handle an erratic heartbeat. Hint: use a random duration each beat

Give the user a view of their average heartbeat over time

And finally, if you want a real challenge, draw a rhythm strip graph of the beats

The simulator is a great tool to get you thinking about what kinds of apps you can build on such a small screen. You can use the empty starter project for this tutorial, or check out the Watch Simulator project on GitHub, which has a simple tap counter as a starter app.

You can use the Watch Simulator project to practice your ideas ahead of the release of WatchKit. WatchKit is rumoured to be released soon after this post.Update: It was released on November 18, 2014! The community challenged ourselves at the WatchKit Hackathon that same week. Since this first version of WatchKit has a few notable limitations, you can still use the Watch Simulator project to prototype ideas for the future. If you would like to learn more about the real WatchKit check out our video tutorial series.

I hope you’ve enjoyed this tutorial, and welcome to the world of WATCH! :]

Ben Morrow is a developer, author, and hackathon organizer. With the Apple Watch community, he's been teaching tools and techniques for the past year to be ready to launch apps when the new device released. Find more video and code at http://happy.watch­ →