It is a myth that using apps on an Apple watch requires a phone. This was true of Watch OS1, but not true of its successor OS. Granted, you still need a phone to load apps, but standalone apps are possible. With the introduction of WatchOS2, this becomes easier as the watch is less dependent on the phone than it was during the Apple Watch’s introduction. Sadly many developers have not realized this yet. You might still need your phone to load an app but independent apps of the phone are easier and more robust than ever under WatchOS2. The Apple Watch’s success is still being debated, but it relies greatly on the apps developed for it. In this new Series of tutorials we’ll discuss writing native apps for the Apple watch.

Introducing WatchOS1 and WatchOS2 through MVC

Understanding how to program for the Apple Watch is best described by a variation of the Model-View-Controller(MVC) pattern. It’s a programming pattern to keep one organized. There is a view which interacts with the user and a model that holds the data. We can diagram it like this:

The controller in the middle keeps the model and view from talking to each other. They have to go through the controller. If any change happens to the view, the controller responds by changing the view or the model. In the same way if there is a change in the data, the controller will change what is necessary in the view. This keeps things modular and allows for the use of different views without a lot of extra coding or modification. If you need more of a detailed explanation of MVC you can find it here.

In WatchOS1 the Apple Watch is nothing more than a second view. It is not a computing device at all. It has its own mini-controller, but even that is on the phone in an extension, which is why in Watch OS1 you had to carry your phone for an app to work. We can diagram it like this:

The view controller of your app may talk to one of three types of view controllers (apps, glances and notifications) in extensions. The extension transmits just enough from your phone to the watch to make the view. The extension controller can respond to events from the watch or display things. Compared to a scene on a storyboard, it is a limited number of things we can display or sense too.

This changes in WatchOS2. The extension moves on board the watch.

The watch app thus runs on the watch not the phone. With a few important exceptions, you don’t need the phone to run a watch app.

What didn’t change is the WatchKit library. Watchkit is the equivalent of UIKit in iOS, giving us our view objects like buttons and labels. WatchKit has seemingly many familiar objects from UIKit to place on the display — until you start to work with them. In many ways, WatchKit is UIKit super-ultra-mega-lite. Most of what you know from iOS has been paired down to a bare minimum. Many attributes can only be set on the storyboard, and not programmatically. There are many write-only objects, such a labels. You can not get a label’s text, only set it.

In this series of articles on WatchOS, I’m going to go show you how to use Xcode and the Watch API’s. We’ll start with a few demonstration apps, then begin to build a full app for the fitness market in later tutorials.

Before You Begin: Setting up XCode and the Simulators

For this tutorial I’m using Xcode 7.3 beta, with WatchOS2.2. The watch simulators in Xcode can be kind of cranky and slow, so its a good idea to pre-load your simulators before opening Xcode. I’ll assume you’ve loaded a copy of Xcode 7.2 or 7.3beta for this tutorial. I make this easier by keeping them in the dock once I start them up, but this first time is a little more difficult, since I start them manually. Navigate to the applications folder by clicking Applications in the dock, and click the open in finder icon. In Finder, find the Xcode or Xcode-beta application, depending which one you plan to use. Right-click on the file and select Show package Contents

Finder will show you a directory Contents. Navigate to ./contents developer/applications.

Run both the Simulator and the Simulator(Watch). Once you started both of them, Right-click on their icons in the dock, and select Options>Keep in Dock. Every time you start Xocde, Start them before you start Xcode to give them time to boot up.

A Sample Project:Hello Pizza Run

Like many first apps in a new language, we’ll do a variation on the classic “hello world” program. I like to eat pizza or run when I’m not behind the keyboard. For the first app in our series, we’ll go through setup of a WatchKit app, and switch between these two activities.

Open Xcode if not already open. Create a new project and pick the iOS app with Watchkit App Watch project template.

You’ll get a configuration window like this:

Name the project HelloRunPizzaDemo using Swift as the language. Use a Universal device and have Include Notification Scene checked as shown above. Look at the Navigator and you will see some unfamiliar folder. Open them up and you’ll find all these files:

We have one folder for the WatchKit extension, and one for the WatchKit app. The controller is in the extension, and the storyboard with the views is in the WatchKit App. You only have a view in a watch app. Click on the Interface.storyboard in the HelloRunPizzaDemo WatchKit App group. You will get a blank watch scene with a watch controller and a notifications controller.

We’ll ignore the notification controller for now. You will find in the object library some old friends from the iPhone and iPad storyboard. Find the label and drag out two labels. Then find the button and drag out a button. You’ll immediately notice a difference in the storyboard. The labels stack.

WatchKit uses a different layout system than iOS storyboards. This is the early, simpler version of what would become stack views in iOS. It will stack items below each other unless you give them specific alignment instructions in the attributes inspector. If two labels are in the same position, they stack. Select the top label. In the attributes inspector find Alignment

Currently it is the left top position. Click the Horizontal drop down and you will see it has choices for Left, Center and Right. Select Center. Click Vertical and you will see Top, Center and Bottom. Leave it Top. Now select the other label, and Center both horizontally and vertically. Click the button and align it Center horizontally and Bottom vertically. Double click the top label and change the label to read Hello Pizza!!. Double click the button and change its title to Change. In the button, change the text color to Dark Text Color. Change the background for the button to #AACC00. If you are not familiar how to do this click on the Default part of the drop down for the background color in the attributes inspector. Select Other Color…. You will get a color palette window. Select the sliders and Select RGB Sliders.

Change the Hex Color to AACC00. Close the palette You should now have this:

Using Emoji in an App

A simple way to add graphics to the watch is to use Emoji. Double click in the second label. Press Control-Command-Spacebar together. You will get the special character window:

On the right of the window select Emoji and then find Food and Drink.

Select the Slice of Pizza and then double-click the selection. The pizza appears in the label. Close the special character window for now. Select the pizza emoji on the storyboard. In the attribute inspector change the Font to System and make the Size 60 points to make the pizza bigger. You’ll end up with this:

First Run

Before we test run our app, we need to change the run scheme. The simulator is set to run the iOS app, not the watch app. We need to tell Xcode to run this on the watch simulator. At the upper left of the Xcode window you will find this:

Change the scheme to Watchkit app > Apple watch 42mm.

Watch apps in the simulator can get cranky. It’s a good idea to clean the app before you build and run each time. Press Command-Shift-K or in the menu Product>Clean.

Build and run. Once the app compiles and begins to run you will see the watch simulator as a watch

It will eventually start the app with a loading screen

Finally, it will show our app

Connect Actions and Outlets

Let’s connect some outlets and actions to the app. Stop the simulator. Go back to XCode. With the storyboard showing, open the Assistant editor. It will show a file InterfaceController.swift which is in the extension group. Control-drag the Hello Pizza!! label from the storyboard to the code. We get an outlet dialog box.

Name the outlet pizzaRunLabel. Make another outlet for the pizza emoji, naming the outlet pizzaRunEmojiControl drag from the button. Change the dialog box to an action.Make an action named changeButton.

Add Constants and a Variable

We’ll add two constants and a Bool variable for this code. Above the outlets add this code:

let pizzaEmoji = "" //pizza emoji character goes here
let runEmoji = "" //runner emoji character goes here
var running = false

Click between the quotes in the string for the Pizza emoji. As we did before with the label, put a Pizza Emoji as the string. For our second emoji, add a runner. In the current versions of iOS and OSX, you can change the skin color on people emoji. With the characters window still open, select People and find the runner. Click and hold on the runner and you will get a pop up menu with different color runners.

Click on a runner you like and it will change color. Double click the runner to get the runner character in the runEmoji string.

Code the Action

Add the following code to the action.

@IBAction func changeButton() {
    running = !running
        if running {
            pizzaRunLabel.setText("Hello Running")
            pizzaRunEmoji.setText(runEmoji)
        }else{
            pizzaRunLabel.setText("Hello Pizza")
            pizzaRunEmoji.setText(pizzaEmoji)
        }
}

We use a method setText to set the text of the label. One of the biggest difference between WatchOS and iOS is the lack of properties in WatchKit. Here instead of setting a property text, we use a method setText(string:).

Clean the code with Command-Shift-K and then build and run. When our apps finally runs, we get this the same as we did last time.

But now we press the button, and it changes

Notifications and the simulator

While we’ll cover how to use notifications later, sometimes the watch simulator gets really cranky for no reason. One way to get around this is to launch the app from the notification instead of the app. Stop the simulator. In the devices, change from a watch app to a notification, again using a 42mm watch.

Clean, build and run. About 30 seconds to a minute after the watch simulator starts you will get a notification screen.

Tap the button, and the app launches.

We’ll talk more about notifications in a later tutorial. In the next WatchOS2 tutorial, we’ll discuss timers.