Preparing for the Apple Watch: a Prototype Heartbeat App

Get a head start preparing for the Apple Watch by prototyping the look of your app! By Ben Morrow.

Leave a rating/review
Save for later
Share

Start prototyping your Apple Watch apps!

Update 12/8/14: Updated for Xcode 6.1.1.

Update 11/18/14: WatchKit is now available – so we recommend you just use that instead. Check out our WatchKit initial impressions!

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.

Screen Shot 2014-11-03 at 2.34.12 PM

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.

Screen_Shot_2014-11-03_at_2_36_23_PM

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.

Screen Shot 2014-11-03 at 2.39.31 PM

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

Screen_Shot_2014-11-03_at_2_41_08_PM

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.

Screen_Shot_2014-11-03_at_2_44_37_PM

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.

Main_storyboard_—_Edited

Name your outlet bpmLabel and hit Connect.

Screen_Shot_2014-11-03_at_2_50_44_PM

Good work! Now you have your completed view.

Screen_Shot_2014-11-03_at_2_50_58_PM

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.

Screen Shot 2014-11-03 at 2.58.12 PM

Name the file BeatPattern.swift and click Create.

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

import UIKit

struct BeatPattern {
  var icon = ""
  var description = "Mid-range"
  var bpm = 80
}

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:

beatPatterns

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.

Next, add the following two properties to the class:

var currentBeatPattern = BeatPattern()
var currentBeatPatternIndex = 0

This will store the current beat pattern using the struct you just defined, as well as which beat pattern to use by storing the necessary index of the beatPatterns array.

You’ll need a label to show the emoji icon. Rather than use the storyboard, you can set that up in code. Add another property to the class:

let iconLabel = UILabel()

Now that you have the label, you’ll need to set it up and add it to the view. Add the following line to the end of viewDidLoad:

self.view.insertSubview(iconLabel, atIndex: 1)

This will add the icon label to the view. To set up the label, add the following method next:

override func viewWillAppear(animated: Bool) {
  super.viewWillAppear(animated)

  iconLabel.frame = self.view.bounds
  iconLabel.textAlignment = .Center
  iconLabel.font = UIFont.boldSystemFontOfSize(132)
}

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:

func newBeat() {
  // 1
  if ++currentBeatPatternIndex == beatPatterns.count {
    currentBeatPatternIndex = 0
  }

  // 2
  currentBeatPattern = beatPatterns[currentBeatPatternIndex]

  // 3
  bpmLabel.text = "\(currentBeatPattern.bpm)"
  iconLabel.text = currentBeatPattern.icon
}

Here’s what’s going on in this method, step-by-step:

  1. 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.
  2. With the new index, you set currentBeatPattern using the array.
  3. 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:

override func viewDidAppear(animated: Bool) {
  super.viewDidAppear(animated)
  
  newBeat()
  
  NSTimer.scheduledTimerWithTimeInterval(8,
    target: self,
    selector: Selector("newBeat"),
    userInfo: nil,
    repeats: true)
}

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.

Screen Shot 2014-11-03 at 4.15.37 PM