Watch tutorial 2: Watch Architecture

This post is the second post of a set of short tutorials on Watch. If you want to see the previous post. In this tutorials, you're going to build your first AppleWatch app: DoItCoach.

Let's start by talking about what is an Watch app...

How does a watch app work?

First thing to know about AppleWatch app is that is always come bundles with its companion iOS app. It's the same idea as the App extensions introduced in iOS8, where you have a main iOS app and you can add extensions. Those extensions are embedded into Today, Shared (depending on their type) component. Like Extension, for AppleWatch app, you create an app project which comes with several build targets.

A Watch app consists of two separate bundles that work together.

• WatchKit App: contains the storyboards and resource files needed to display your interface.
• WatchKit Extension: contains the code needed for your native AppleWatch app. This is the part to get compiled and the binaries get transferred to your watch.

Side note: WatchOS vs watchOS2

As a side note, I think it's interesting to look back and know the differences between watchOS (the first version released in April 2015) and watchOS2 (released in September 2015). An image is worth a thousand worlds:

Now In watchOS 2, the extension runs on the user’s Apple Watch instead of on the user’s iPhone, as was the case in watchOS 1. This is the fundamental change for watchOS2: you can run watch native apps. The separation into Watch app / Watch Extension makes even more sense in the context of WatchOS1 as the binaries were deployed in different physical targets. In watchOS2, there is still the distinction of Watch app (storyboard, resources) and Watch extension (code binaries) although both are deployed natively to the AppleWatch.

The separation between WatchKit App and WatchKit Extension also means that the app's user interface is static and can't be changed at runtime. Adding or removing elements, for example, isn't possible. You can show and hide user interface elements though (I'll tell you more about that in Layout tutorial). This is done this way to save Watch resources so that it doesn't drain the battery.

Having the code binaries deployed natively makes your apps launch quicker, and be far more responsive as you remove the bluetooth latency. It also changes drastically the way you communicate/synchronize data between AppleWatch and its companion app. I tell you more about that in WatchConnectivity tutorial.

You now need to share a common business model between you iOS app and your Watch app. For that purpose, I like to separate the business model in a Shared group. This group is included in both iOS and Watch Extension target so it gets compiled and deployed on both.

Shared business model

Before you start coding,have a look at the shared business model. This model is used in the iOS app and will also be used in the Watch to represent a Task. Looking at the Task protocol:

public protocol Task: CustomStringConvertible {
  var name: String {get}
  var duration: NSTimeInterval {get}
  var startDate: NSDate? {get set}
  var endDate: NSDate? {get set}
  var timer: NSTimer? {get set}
  var type: TaskType {get set}
  func start()
  func stop()
...
}

We see a Task has a name, a duration, a startDate and endDate and two methods to start and stop the Task.

Ready for some code?
3, 2, 1... Go

Get starter project

In case you missed Watch tutorial 1: Which app?, here are the instructions how to get the starter project. Clone and get the initial project by running:

git clone https://github.com/corinnekrych/DoItCoach.git
cd DoItCoach
git checkout step1
open DoItCoach.xcodeproj

Create your Watch targets

To add an AppleWatch deployment target, in Xcode:

• Go to File -> New -> Target...
• Under watchOS, select Application tab and then choose WatchKit app
• In product name enter DoItCoach WatchKit App
• Untick all include scene, hit Finish button
• Click yes when Xcode prompts you to activate Apple Watch schema

If prompted: Activate “DoItCoach WatchKit App” scheme?, answer yes.

You should now be able to see your the new target: DoItcoach Watch App, Xcode should have created its matching schema:

You've just created your first Watch app, but if you run the appleWatch screen is all black :(

Let's add a label

In Xcode:

• Go to newly created Group named DoItCoach Watch App
• Select Interface.storyboard, in the bottom right hand side Object Library search for a Label UI control.
• Drag and drop the label onto your main screen
• In Attributes Inspector:
  • in Alignment section, select Horizontal: center
  • change Text Color to Blue
  • in Font select System, UltraLight 17

Build and Run

To run in the simulator

Select DoItCoach WatchKit App schema with iPhone6sPlus + AppleWatch - 42 mm as targeted simulators.
The command should start both simulators and launch the iOS app and the AppleWatch app. In Xcode, in the left hand side Debug Navigator, you can see debug information for each app.

Note: Sometimes, Xcode failed to attache the debug process of the iOS app, you can do it manually:

• either by selecting the schema that is not launched and run it again.
• or by manually attaching the iOS app debug process to Xcode. It quite simple and I think this blog post explained it well

To run on Watch

When you want to run your app on Watch, plug your phone to a USB port, and keep you watch close by. You can install the app on your phone:

either by selecting DoItCoach WatchKit App schema with your iPhone and Paired Watch. This way, you can install the app in debug mode.

or by selecting by selecting DoItCoach schema with your iPhone selected. Open Watch app, in General -> App Install section, make sure Automatic App Install is checked. Once the app is installed on your iPhone, its Watch app will be automatically installed on your Watch. With this approach you won't be able to debug your Watch app but the install might be quicker.

Get final project

If you want to check the final project, here are the instructions how to get it.

cd DoItCoach
git checkout step2
open DoItCoach.xcodeproj

What's next?

With this first introduction tutorial, you saw how the Watch app is architectured:

To sum up, an AppleWatch project is typically build three main parts: iOS app (iOS storyboard, iOS code), Watch app (watch storyboard), Watch extension (Watch code).

You also created you first AppleWatch target, see how to build and run the apps on simulators or iPhone/paired Watch. You are now ready to add more UI controls on your watch screen. See Watch tutorial 3: Layout.

Tweet