Getting Started with Developing for the Apple Watch

Murtza Manzur, Developer Evangelist at InMobi

About InMobi

● Largest independent mobile ad network

● 1 billion unique devices

● Products for Publishers: Native Ads, Video Ads

● Products for Advertisers: App-Install Platform

MASSIVE REACH ACROSS TOP COMPANIES

Agenda

● Apple Watch architecture

● Hello World app for the Apple Watch

● Counter app for the Apple Watch

● Communicating from the Apple Watch to the iOS App

Architecture

● Apple Watch app requires an iOS app

● WatchKit apps have two parts

○ A WatchKit extension that runs on iPhone

○ A set of user interface resources that are installed on Apple

Watch.

● Glance

○ Supplemental way for the user to view important

information from your app

Architecture

● When Apple Watch app is launched, WatchKit extension on

iPhone runs in the background

○ Updates UI and responds to user interactions

● Watch App

○ Storyboard and resource files

● WatchKit Extension

○ Code associated with the Watch App is executed here

Architecture

Hello World App for the Apple Watch

● Let’s build a Hello Word app

Hello World App - Step 1

Click Create a new Xcode

Project.

Hello World App - Step 2

Select Single View

Application, and then click

Next.

Hello World App - Step 3

Enter values for

Product Name and

Organization Name.

Select Objective-C as

Language and iPhone

as Devices. Leave Use

Core Data unchecked.

Hello World App - Step 4

Select a directory to save the project in, and then click

Create.

Hello World App - Step 5

Select File, New, then

click on Target.

Hello World App - Step 6

Select Apple Watch in

the left-hand menu.

Then click Next.

Hello World App - Step 7

Uncheck Notification

Scene and Glance

Scene. Then click

Finish.

Hello World App - Step 8

Click Activate.

Hello World App - Step 9

In the left-hand menu,

select the

Interface.storyboard

file from the WatchKit

App folder.

Hello World App - Step 10

This is the Interface

Builder for Apple Watch. In

the next step, we will drag

a Label object from the

Object Library to the Apple

Watch interface.

Interface Controller

● Like a View Controller in iOS

● Support two navigation styles, which are mutually exclusive

○ Hierarchal

○ Paged based

● Interface navigation through segues or programmatically

○ To implement a modal in your storyboard file, create a modal

segue.

○ To implement a modal programmatically, call the

presentControllerWithName:context: method

Interface Controller

● awakeWithContext

○ System calls this method at initialization time to provide the

interface controller with any relevant contextual data from a

previous interface controller

● willActivate

○ System calls this method to notify the interface controller that

its content is about to be displayed onscreen

● didDeactivate

○ System calls this method to notify the interface controller that

it is no longer onscreen

Hello World App - Step 10

Search for the Label object in the Object Library (lower

right-hand menu in Xcode). Then drag the Label

Object to the Apple Watch interface.

Interface Objects

● Arrange themselves

● Two unique view objects to Watch

App

○ Date

○ Timer

● Can be embedded in vertical or

horizontal groups

Hello World App - Step 11

Double click on the Label

object you added to the

Apple Watch interface, and

change the text to Hello

World.

Hello World App - Step 11

Click the run icon in Xcode. This will build your app, and

then run it in a simulator.

Hello World App - Step 12

To enable the

Apple Watch

simulator, select

Hardware,

External Displays

and then click on

Apple Watch -

42mm.

Hello World App - Step 13

Simulator will show

Hello World.

Counter App for the Apple Watch

● Let’s build a counter app for the Apple Watch

Counter App - Step 1

Navigate back to

Interface.storyboard. Double

click the label text to change

it from Hello World to 0. Add

two Button objects from the

Object Library. Rename the

button text: one for “+”, and

a second for “-”.

Counter App - Step 2

Navigate to the InterfaceController.m file in the WatchKit

Extension folder. As shown in the screenshot above, add

two properties between @interface and @end.

Counter App - Step 3

In @implementation, add two methods to increment and

decrement the counter property. We will connect these

two methods with the button objects in the Interface

Builder.

Counter App - Step 4

In @implementation, add a third method to set the text of

the counter label in the interface to value of the counter

property. We will connect the counter label property to

the counter label object in the interface in a later step.

Counter App - Step 5

Connect the

decrementCounter

action to the “-”

button object.

Connect the

incrementCounter

action to the “+”

button object.

Counter App - Step 6

Connect the

counterLabel

property from the

Interface Controller

to the counter label

object in the

interface.

Counter App - Step 7

Click the run icon in Xcode.

Counter App - Step 8

The Watch App will run in

the simulator. If the “+” and

“-” buttons are working

correctly, they will increment

and decrement the counter.

Communicating from Watch to iOS App

● Use openParentApplication method to send data from WatchKit

extension to iOS app

■ Passed as a dictionary object

● handleWatchKitExtensionRequest method to receive data on

iOS app

● Reference

○ https://developer.apple.com/library/prerelease/ios/documentati

on/WatchKit/Reference/WKInterfaceController_class/index.ht

ml

Resources

● WatchKit Development Tips

○ https://developer.apple.com/watchkit/tips/

● Developing for Apple Watch

○ https://developer.apple.com/library/ios/documentation/General/Con

ceptual/WatchKitProgrammingGuide/index.html

Resources

● Tips for Submitting Apple Watch App

○ http://www.fiveminutewatchkit.com/blog/2015/4/2/submitting-your-

watchkit-app

● Bezel, a tool to simulate the look of an Apple Watch

Murtza Manzur

Developer Evangelist

murtza.manzur@inmobi.com

Questions?