Archive by Author

WatchKit Apps & Sending Data From Apple Watch To iPhone

Since the launch of WatchKit in November 2014, I have been doing research and development for the Apple Watch.

In this post, I’ll be offering some insight based on my experience building an app using the WatchKit SDK. We will cover the structure of a Watch application, information about interfacing, and a method of connecting a Watch App to its iOS counterpart.

WatchKit Apps

A Watch app split into two parts: a WatchKit App containing the storyboard and resources which is installed on the Watch device, and a WatchKit Extension containing all of the code and other supporting files. With this configuration, when an app is launched on the Watch, the Watchkit Extension runs on the iPhone in the background. The WatchKit App and the WatchKit Extension work hand-in-hand and function as a single app for the Watch.

01

Watch apps exist as children of regular iPhone apps. A Watch app is intended to complement its iPhone counterpart and they both will exist as a part of the same Xcode project. Despite this, the WatchKit and iPhone apps run independently of each other.

02

In order to send data from the Apple Watch to the iPhone, we need a way of communicating from the Watch app to the iPhone app.

The WatchKit Interface

Managing layouts for views with WatchKit is done in a way that is familiar to iOS developers, using a storyboard and controllers. Watch Apps contain a storyboard file called “Interface” and the WatchKit Extension contains WKInterfaceController classes. These files work as WatchKit’s version of the Main.storyboard and UIViewController classes for iOS.

03

WatchKit Interface Controllers work very similarly to View Controllers – for example, they can have bound IBOutlets and IBActions for objects in the storyboard.

04

The main difference lies within the interface layouts in the storyboards. When interface objects such as Tables, Buttons, or Labels are dragged into an interface layout, instead of being placed wherever it was dragged to and defaulting to no constraints, the object will snap into place filling the width of the layout with a fixed height.

05

With some experimentation, I quickly learned that there isn’t much versatility in the layout design. In my time messing around in Xcode, I found that each element of my layouts needs to be adequately spaced to be easily readable by the user. WatchKit’s storyboard seems to encourage developers to abide by Apple’s guidelines for Watch Apps, which emphasize that these layouts should be made to be simplistic and readable. Also mentioned in Apple’s guidelines are the navigation schemes that interfaces must follow: Page based or Hierarchical.

06

07

Read more information about this on the Apple Watch Programming Guide.

Code Example: Sending data to iPhone

As a part of my research and development, I’ve been working on an app for the popular social website, reddit, which essentially involves showing a feed of information on the Watch. Over the course of developing this app, I discovered how the pairing of the iPhone and the Apple Watch has the potential to be useful. In this case, tapping on a button on the Watch app will open the link on the iPhone, where you can interact on a larger screen and take many more actions.

To make a simple demo of this functionality, place a button on the WatchKit interface and a label on the iOS app’s storyboard.

08

Now, hook up the button to the WatchKit Interface Controller as an IBAction in order to respond to button tap events. Also hook up the Label to the UI View Controller as an IBOutlet.

09

In the Interface Controller, we make up a string variable to send to the label.

10

In the button’s IBAction method, make a dictionary that includes the string variable you made. This dictionary is what is passed to the iPhone app:

11

Use the following method to send the dictionary to the iPhone:

12

In the AppDelegate of the iOS app, add the following application method. This is what will handle the previous methods communication from the Watch:

13

A notification can be used to notify a view controller that data has been received and to pass it along:

14

Finally in the view controller, make a listener for the notification that will update the label’s text to the string that was sent with the data:

15

To run this demo, be sure to first build both the iOS and Watch Apps. Run the Watch app from Xcode and launch the iOS app from the iOS Simulator. Tap the button on the Watch to see the text on the label update on the iPhone.

16

See example code on GitHub.

The reddit watch app I built based on this is featured in this demo video:

For the complete code see this GitHub link:  https://github.com/NetFunctional/reddit4watch

 

Ultimately, while the pairing of the iPhone and the Apple Watch highlights the idea that the Apple Watch is a mere “second display” for the iPhone, in actuality, it can pose benefits to users. People will tend to use their Apple Watch to quickly check on information that is immediately relevant like notifications or weather. If more action is required from the user to browse as site, for example, it may be beneficial to refer the user to the parent iPhone app from the Watch, as demonstrated in this guide.

Comments Off on WatchKit Apps & Sending Data From Apple Watch To iPhone