Building an Apple Watch App

We are faced with a new breed of mobile devices. Smart watches are clearly the next step forward in the mobile revolution. Tablets were ok when they first hit the scene, but its implications of how it affects our lives are not as significant as smart watches. Smart watches are a new approach, a new way of thinking, a new way of designing, and it’s on your freaking body! Smart watches will change the way we interact with our devices unlike any time before. And Apple has the track record to lead the mobile revolution forward. In this post, I will show you how to create your first Apple Watch app.

Getting Started

Although UX and design is vastly different in the realm of watch apps, development for it is not that much different than developing for an iPhone. As a matter of fact, Apple Watch apps are actually iPhone apps that have a WatchKit extension in the same project. So the first step is to create an iPhone app as you normally would:

For the next screen, give your app a name and close “iPhone” for “Devices”. Also please choose “Swift” for the language if you want to remain friends ;). It’s a beautiful language that I plan to cover in other posts. Finally, I always enable “Use Core Data” for good practice, which is a more sophisticated way of storing data and entities (its Xcode’s version of an ORM tool).

When you choose a location on your machine to save it, I highly suggest you enable “Create Git repository”. Even if you are a one-dev show, it’s important to version code and view the history, whether it be remotely in the cloud like GitHub or on you local machine.

Noticed we haven’t done anything regarding the watch part of the app yet. Now in Xcode, click on File > New > Target, then choose iOS > Apple Watch > WatchKit App:

On the next screen, the defaults are fine, but you can remove “Include Notification Scene” and “Include Glance Scene” which I will cover in separate posts:

Once you hit finish, click finish and now this creats a new target in the project for the Apple Watch. This is what your files list should look like:

Anatomy of a WatchKit App

You are ready to rock and roll with your watch app, but some explaining is needed here though. In the project, there are three areas you will be working with:

1. The iPhone app labeled here as “My First Watch App”. At the time of this writing, there is no way around this; you need an iPhone app for every Apple Watch app! If you are racking your brain what the iPhone app will do, make it a simple configuration page for your watch app.
2. The WatchKit extension labeled here as “My First Watch App WatchKit Extension App”. This where most of the code for your watch app will be, such as interface controller classes. What’s interesting to note is that this area will actually be executed on the iPhone via bluetooth or wifi, not on the Apple Watch. This is to remove burden and power consumption from the watch.
3. The WatchKit app labeled here as “My First Watch App”. This is everything that will be stored on the Apple Watch itself, such as storyboards, images, etc.

Show Me the App!

Are you ready to see the app? Tada:

The storyboard starts off as a blank black screen. In the top of Xcode, click the play button to make sure it runs before going any further:

The emulator for the iPhone and the Apple Watch should spring up:

The Apple Watch should be a blank black screen if there were no errors. Also, on the iPhone emulator you will see the app associated with your watch app. Clicking it will bring up a blank white screen on the iPhone. Just add some labels, textbooks, etc to house the configurations for you watch app if you can’t think of anything. Apple will reject your app if your iPhone app doesn’t do anything.

Ok, now let’s do something a bit more interesting. Drag a few components onto your WatchKit storyboard, such as a label, button, switch, slider, etc:

Press play again on the debugger and see the beauty:

 

Notice if you put more controls onto the storyboard, it just expands vertically. This will just manifest as scrolling on the actual device.

Show Me the Code!

The interface controller in your storyboard has an associated WKInterfaceController class:

There are events in the interface controller already created for you:

1. “awakeWithContext” is the initialize or constructor of this screen. It will only be triggered once.
2. “willActivate” is the event that will get triggered when this screen is viewed, which can be multiple times.
3. “didDeactivate” is the event that will get triggered when the user leaves this screen, which can also be multiple times.

Gluing the Interface to the Code

Now comes time for a little interactivity. In Xcode, show the assistant editor to create a split screen: left side will be the storyboard and right side will be the code. Hold down on the Control button and drag the label from the storyboard onto the controller class:

This will create an “Outlet”, which is a reference to the control in code. Name it anything you like then you can modify the control via code going forward:

To test this out, in the “awakeWithContext” method, add this line of code then run the debugger: myLabel.setText(“This is my test!”). It should look like this:

Let’s take this a step further ad update the label when the button is clicked. To do this, Control+drag the button from the storyboard to the class, except this time, choose “Action” in the popup:

This will create a new method that will be triggered when the button is tapped. In this method, add this line of code to update the label: myLabel.setText(“\(NSDate())”). This will update the label with the current time each time the button is tapped:

Conclusion

Congratulations and welcome to the next phase in the mobile revolution; you’ve just created your first Apple Watch app! This is just scratching the surface. Stay tuned for more WatchKit posts.

HAPPY CODING!!