1.Hello, Apple Watch

Written by Scott Grosch

In 2015, Apple promised the world it was going to release a new, revolutionary device. On April 24, 2015, it released the first generation Apple Watch to the public. Some people felt the device was awesome and had huge potential, while others were firmly in the “meh” camp.

Full disclosure, I was initially one of the latter people.

However, with the addition of features like the Wallet and Apple Pay, as well as the option to purchase cellular data plans for the watch, it’s hard to dismiss the device as a fad. Whatever your feelings regarding the Apple Watch, it’s a part of the Apple ecosystem you’ll definitely want to support to ensure maximum exposure for your apps.

During this chapter, you’ll create your first watchOS app and see how much of your existing iOS development knowledge directly transfers to the Apple Watch.

Hello, World!

Open Xcode and create a new project by selecting File ▸ New ▸ Project… or pressing Shift-Command-N. In the dialog window where you choose your project type, select the watchOStab and then choose the App template:

Press Next and, after selecting location for your project, you’ll see the standard options dialog. Enter a Product Name, such as HelloAppleWatch, and be sure that Watch-only Appis checked:

When developing projects that support the Apple Watch, you can choose whether you’ll provide a companion iOS app. Since this book aims to teach items specific to watchOS development, most of the chapters focus exclusively on the watchOS project. Only features that require a companion iOS app will include an iOS project.

Select Product ▸ Run or press Command-R to build and run the app. After a moment, the Apple Watch simulator will appear and show a spinner:

It usually takes a few minutes for the simulator to load the watchOS app, so don’t worry if the app doesn’t start immediately. After a while, you’ll see the obligatory “Hello, World!” example that all good programming books start with:

It’s Just SwiftUI

Take a look at ContentView.swift. You’ll see something surprising.

It’s just SwiftUI code! If you’ve written apps for watchOS in the past, you’re probably incredibly excited right now. You no longer have to use the watchOS specific classes, such as WKInterfaceController and WKInterfaceLabel, or any other UI-type class. Now, you simply write SwiftUI code, just like you do for iOS. :]

The WatchKit specific classes are still available and supported, but there’s no reason to use them for new apps unless you need to target devices that aren’t running watchOS 6.0 or newer.

Sprucing Things Up

You won’t win any awards if you deploy the app as it looks now. The materials for this project include a fortune cookie image. Import that into your HelloAppleWatch Watch App group’s assets.

Adding an Image

1. Click Assets.
2. Near the bottom of Xcode, click the + button to bring up a context menu.
3. Select Import….
4. Navigate to this chapter’s materials and select Cookie.imageset.

Now you have the fortune cookie image available for your app:

Open ContentView and replace the contents of body with:

VStack {
  Image("Cookie")
    .resizable()
    .scaledToFit()
}

Xcode’s preview now shows two pieces of a fortune cookie with a blank sheet of paper between them:

Now you need some fortunes!

Adding Fortunes

The materials for this chapter also include a file named EmojiSentence.swift. Add that to your project by dragging and dropping it into HelloAppleWatch Watch App.

Feel free to look at the code. It provides some example sentences in both English and Emoji, such as:

(text: "Not my cup of tea", emoji: "🙅‍♀️ ☕️")

Back in ContentView, add a new property to the View:

@StateObject private var sentence = EmojiSentence()

The @StateObject property wrapper ensures sentence is only created a single time, not each time the view’s body recalculates. Add the following code just after the .scaledToFit() lines:

// 1
.overlay(
  // 2
  Text(sentence.emoji)
    // 3
    .font(.title3)
    .padding(.top, 10)
    .buttonStyle(.plain)
)

Here’s what the preceding code does:

1. You use the .overlay call when you wish to layer one view on top of another.
2. You add the emoji symbols as text on top of the fortune cookie image.
3. Then, you use a few modifiers to change the font size and position to make everything fit nicely.

Build and run again. You’ll see your emoji fortune:

Unfortunately, not everyone is fluent in Emoji. After the full Image definition, just before closing the VStack, add:

Text(sentence.text)
  .font(.caption)
  .padding(.top, 20)

Build and run again — or look in the Xcode preview — and you’ll see the English version of the emoji text:

Getting New Fortunes

There’s one last improvement to add to your app. Just after closing the VStack, before the end of body, add a tap gesture recognizer:

.onTapGesture { sentence.next() }

Build and run one final time. Tap the screen, and the fortune changes. Each time you tap, you’ll receive the next fortune in the list.

But… watchOS Code?

At this point, you may be thinking that there’s nothing watchOS specific here, other than the different folder structure and using the watch simulator instead of the phone simulator.

That’s the whole point of this chapter! By finally supporting SwiftUI on the Apple Watch, Apple has made it much easier for you to delve into supporting watchOS. You no longer need a very specific skill set to create an Apple Watch app.

The rest of the chapters in this book will delve into development specific to the Apple Watch.

Key Points

• SwiftUI removes the need for custom frameworks to develop watchOS apps.
• Storyboards are no longer required.
• SwiftUI has been supported since watchOS 6.0.