Apple Watch Demo App and Lessons Learnt

I created a simple Apple Watch app for learning and demo purpose and learnt a few things along the way.

This is the second post of my Apple Watch expedition.

Focus - A simple, open-sourced Apple Watch App

Apple Watch Demo App

This app is called "Focus" and is really simple - it has a button that allows switching between the On and Off state, and an image that reflects the current state.

When the state is on, you focus on your current task. When it is off, you take a break.

I shared the codes in github here.

Creating an Apple Watch App

  1. You need Xcode 6.2 or above.
  2. Create an iPhone app as you normally would.
  3. Add a target. Choose iOS -> Apple Watch -> Watch App.
  4. Tick “Include Notification Scene” even if you don’t need one now, because it’s much more work to add later.

That’s it. Now choose the Watch App scheme and run it. The Watch App will run and appear in the Apple Watch simulator immediately. The WatchKit Extension is also triggered to run in the iPhone at the same time, but it runs in the background so you will not see it.

Since there are two targets running, you need to stop two times in order to stop the running Watch app. The first stop is for the WatchKit Extention process.

Dimension

When you run a Watch App in simulator, you would notice that the title bar shows you the following:

  • 38mm - 272 x 340
  • 42mm - 312 x 390

However, when you set the width/height value in interface file, they need to be halved. This is because the values in simulator are hi-res @2x values. The storyboard uses @1x values, i.e.

  • 38mm - 136 x 170
  • 42mm - 156 x 195

This should be kept in mind when preparing image files. All images should be in hi-res, with filename ends in @2x and have the corresponding dimension. For example, if an image is supposed to occupy the whole background of the 38mm Watch, it should be 272 by 340 pixels and in the @2x slot of the image asset.

Project Targets

When adding Watch App target to the project, Xcode will actually be creating two new targets to the project, instead of one. The created targets have these names:

  • "[Project name] WatchKit Extension target"
  • "[Project name] Watch App target"

Miscellaneous notes related to targets:

  • The main app target includes the WatchKit Extension target as an "Embedded App Extension" (Main app target - Build Phases - Embed App Extensions).
  • WatchKit Extension target includes Watch App target as a Bundle Resource (WatchKit Extention target - Build Phases - Copy Bundle Resources).
  • When user taps on Watch app, your WatchKit app loads, and the iPhone automatically lauches its corresponding WatchKit Extension as well.
  • As long as user is using your Watch app, the WatchKit Extension will be running in your phone.

Layout using Groups

If you have ever done HTML in a past life when CSS was merely a colouring/styling tool (yeah, long time ago), you know that website layout used to be done by carefully allocating text/image components in table rows and columns, using "table", "tr", "td" tags.

Can you imagine how hacky, ugly and messy it could get? Unfortunately, doing layout in Watch App is similar to doing those old-school HTML positioning. However, fortunately, it is relatively simple because a Watch app can't fit many UI components anyway, therefore the complexity is limited.

In Xcode storyboard, you can arrange UI components of a Watch App using Groups.

  • In storyboard, you can find the "Group" UI component in Object Library and drag it to your Interface Controller.
  • Official definition: A WKInterfaceGroup object is a container for one or more interface objects. A group is conceptually similar to a superview in UIKit, in that it handles layout for its contained items. A group arranges items vertically or horizontally in your interface.
  • Consider a Group as an one-column table in which you can have multiple rows. Or an one-row table in which you can have multiple columns.
  • You can put Groups inside a Group.
  • When working on complicated layout, it may help to draw up a grid and see how you would fit your UI components into the boxes. Note that the columns/rows can be merged.

WatchKit App Hangs

I found that sometimes the Watch App would not respond and hang, while showing a loading indicator. When this happens, I see error messages like the following in the console log,

2014-12-15 22:05:24.892 Focus WatchKit Extension[54349:699963] *********** ERROR -[SPRemoteInterface _interfaceControllerClientIDForControllerID:] clientIdentifier for interfaceControllerID:D4430002 not found
2014-12-15 22:05:24.893 Focus WatchKit Extension[54349:700693] Can't append data to log file, even after retrying. Giving up. Facilities: <CFArray 0x7fdf82b02c10 [0x108e0fef0]>{type = immutable, count = 1, values = (
0 : <CFString 0x1089eec48 [0x108e0fef0]>{contents = "Kermit"}
)}

Upon further investigation, I found that this would happen if the Watch Extension process no longer runs (for example, if I stopped it manually) and the Watch app attempts to connect to it.

Other Apple Watch Demo Apps

Apple Watch Demo App and Lessons Learnt
Share this