An Introduction to Watchkit for iOS Developers

Watchkit is Apple's framework that allows you to create apps for the iWatch. Watchkit based apps are created in Xcode using Swift or Objective-C.

The process for creating a Watch app will be familiar to those who have written iOs apps. Watchkit apps use storyboards and have controller UIs that can connect with a controller class for custom code. But there are some differences between developing for the two platforms which I'll share in this article.

Architecture Of A Watchkit App

In comparison to iOS Apps, Watchkit apps are structured differently in Xcode. There are several restrictions in regards to what can be accomplished with the UI. Interface Builder is a good guide when it comes to UI restrictions, it helps demonstrate the boundaries of what is appropriate for a Watchkit app UI.

Watchkit apps don't run on their own, at least not yet, that feature may be coming this autumn (2015). Apple requires any watch app to be associated with an iOS app, making the watch app an extension of an iOS app.

There are two main parts to a watch app, the extension and the app. The app is what gets pushed to the iWatch, while the extension remains on the iPhone as part of the iOS app package.

The extension is the workhorse of the watch app, where the business logic lives. Because the extension is part of the iOS app, this means the iPhone must be present in order for a watch app to run.

The watch app side is basically just UI, it displays UI elements and sends back any interactions from the user. It receives interactions from the extension and the UI changes based on both types of interactions. This split between the watch extension and watch app helps to save battery life on the iWatch. The watch app communicates with the watch extension on the iPhone via bluetooth.

The iPhone checks if an iWatch is available and if so, any apps that have an associated watch app can then push their watch app to the iWatch.

Glances and Notifications

Glances

Watchkit has a new feature not found in iOS apps called glances. Glances are read only for the user and appear at certain intervals based on events happening in the app. They display summary information to the user, designed to be read in a matter of seconds.

Glances have limited customization options in Storyboard, they are template based and these templates can't be modified. There are two areas that are customizable for glances. The Upper and Lower, as shown below in the Attributes Inspector.

Clicking one of these will reveal the available templates.

Notifications

Notifications are similar to those available in iOS apps. If the iOS app sends notifications, a Watchkit app is not needed for for those to be sent to the iWatch, they will be supported automatically. But without a Watch app, you can't customize your notifications. Notifications work with a JSON file in your project called PushNotificationPayload.apns. It's where you set the notification title, body, button text and further options. Notifications are available in two flavors – static and dynamic.

Static notifications are default and these notifications will appear if there is no associated Watch app. When there is an associated Watch app, static notifications might still be used in place of dynamic notifications if there is a problem getting dynamic notifications to appear. They have restrictions on what can be done with the UI layout. While not as restrictive as glances, you still can't add buttons through the storyboard.

Dynamic notifications do offer more UI customization and allow for more user interactivity.

What Does It Look Like In Xcode?

To add an iWatch app to an existing iOS app, in Xcode click the plus icon in the project target pane and choose Watchkit App under the iOS section.

Next, check Notification and Glance Scenes if these options are desired. Notifications are selected by default.

The next screen will ask if you want to accept the new Watchkit scheme. Click the Activate button to accept.

Now we have all the code needed to start creating a Watchkit app. There are several new folders in Xcode, these include:

• Tests folder for your Watchkit app
• X Watchkit Extension
• X Watchkit App

Where "X" is the iOS app name. I'll focus on the last two folders, Watchkit Extension and Watchkit App. In the screenshot below, all three new folders are visible.

In this project, the name of the iOS app is WatchAppSample. The Watchkit extension and app inherits this name. The custom code will be written in the InterfaceController.swift file.

Notice the notifications and glance UI objects in the storyboard.

Static notifications are first, followed by Dynamic notifications. This ensures static notification take precedence and can be used as a fall back.

iOS App vs Watchkit App

Here's a quick look at some framework comparison's between an iOS app and Watchkit App:

There are many similarities between the two, allowing for great knowledge transfer from iOS app creation to Watchkit app creation. Names have changed but the concepts remain the same.

Groups are new to Watchkit and these are used in the storyboard. UI elements in Watchkit must be within a group so the watch understands how to lay them out using horizontal or vertical rules.

What Gets Deployed To The App Store?

When the Watchkit app is deployed to the App Store, an iOS app is deployed as the Watchkit code is packaged into the iOS app package. Once on the iPhone, if an iWatch is detected, the Watchkit app is then deployed to the iWatch via Bluetooth.

Summary

There isn't a big learning curve for developing Watchkit apps if you are already familiar with developing iOS apps. Apple have done a good job to keep things familiar. I hope you have enjoyed this introduction to Watchkit and for the next tutorial we will get coding a real app.