Building Watch Apps...Architecture Interface UI is stored in Watch app Plan your UI in advance Code...

© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

#WWDC15

Building Watch Apps

Neil Desai watchOS Engineer

Featured

Session 108

Agenda

Agenda

Architecture

Agenda

ArchitectureInterface elements

Agenda

ArchitectureInterface elementsDebugging

Agenda

ArchitectureInterface elementsDebuggingwatchOS 2 Features

Architecture

Architecture

iPhone Apple Watch

Architecture

iPhone Apple Watch

Watch App

Architecture

iPhone Apple Watch

Watch App

Watch Extension

Architecture

iPhone Apple Watch

WatchConnectivity

iOS App

Watch App

Watch Extension

ArchitectureInterface

UI is stored in Watch app

ArchitectureInterface

UI is stored in Watch appPlan your UI in advance

ArchitectureInterface

UI is stored in Watch appPlan your UI in advanceCode updates UI from the extension

ArchitectureWatchKit Framework

One controller per screen of content

ArchitectureWatchKit Framework

One controller per screen of contentManages UI elements through outlets

ArchitectureWatchKit Framework

One controller per screen of contentManages UI elements through outletsUses target-action design pattern

Adding a Watch App

Adding a Watch App

Add Watch App target

Adding a Watch App

Add Watch App targetConfigure interface elements

Adding a Watch App

Add Watch App targetConfigure interface elementsBuild and run

Simulator

SimulatorOverview

SimulatorOverview

Full simulator

SimulatorOverview

Full simulator38mm and 42mm

SimulatorOverview

Full simulator38mm and 42mmSimulate Touch Pressure

SimulatorOverview

Full simulator38mm and 42mmSimulate Touch PressureClock faces

SimulatorOverview

Full simulator38mm and 42mmSimulate Touch PressureClock facesMultiple apps

SimulatorTouch Pressure

SimulatorTouch Pressure

Demo

App Lifecycle

Watch Extension Watch App

Watch Extension Watch App

WKExtensionDelegate

DidFinishLaunching() Initialize app

Watch Extension Watch App

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Watch Extension

WKInterfaceController

Watch App

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Watch Extension

WKInterfaceController

Watch App

awakeWithContext()

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Initialize UI

Watch Extension

WKInterfaceController

Watch App

awakeWithContext()

willActivate()

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Initialize UI

Display UI

Watch Extension

WKInterfaceController

Watch App

awakeWithContext()

willActivate()

(various action methods)

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Initialize UI

Display UI

Wearer interacts with UI

Watch Extension

WKInterfaceController

Watch App

awakeWithContext()

willActivate()

(various action methods)

didDeactivate()

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Initialize UI

Display UI

Wearer interacts with UI

Wearer stops interacting

Watch Extension

WKInterfaceController

Watch App

awakeWithContext()

willActivate()

(various action methods)

didDeactivate()

WKExtensionDelegate

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Initialize UI

Display UI

Wearer interacts with UI

Wearer stops interacting

Watch Extension

WKInterfaceController

Watch App

awakeWithContext()

willActivate()

(various action methods)

didDeactivate()

WKExtensionDelegate

WillResignActive()

WKExtensionDelegate

DidFinishLaunching()

DidBecomeActive()

Initialize app

Update modeI

Initialize UI

Display UI

Wearer interacts with UI

Wearer stops interacting

Active app to inactive

WatchKit Layout

WatchKit LayoutModel

WatchKit LayoutModel

Different from UIKit and AppKit

WatchKit LayoutModel

Different from UIKit and AppKitFlow-based layout

WatchKit LayoutModel

Different from UIKit and AppKitFlow-based layoutUI created in Interface Builder

WatchKit Layout ModelFlow-based layout

Interface Controller

10:09

WatchKit Layout ModelFlow-based layout

Interface Controller

10:09

WatchKit Layout ModelFlow-based layout

Interface Controller

10:09

Image

WatchKit Layout ModelFlow-based layout

Interface Controller

10:09

Image

WatchKit Layout ModelFlow-based layout

Interface Controller

10:09

Image

Button

WatchKit Layout ModelFlow-based layout

Interface Controller

10:09

Image

Button

WatchKit Layout ModelGroups are containers of elements

Group

Interface Controller

10:09

Image

Button

WatchKit Layout ModelGroups are containers of elements

Group

Interface Controller

10:09

Image

Button

Label

WatchKit Layout ModelGroups are containers of elements

10:09

Image

Button

Image

WatchKit LayoutProgramming Model

WatchKit LayoutProgramming Model

You don’t write object creation code

WatchKit LayoutProgramming Model

You don’t write object creation codeFine tuned control of

WatchKit LayoutProgramming Model

You don’t write object creation codeFine tuned control of• Positioning and Sizing

WatchKit LayoutProgramming Model

You don’t write object creation codeFine tuned control of• Positioning and Sizing• Layout hierarchy

WatchKit LayoutProgramming Model

You don’t write object creation codeFine tuned control of• Positioning and Sizing• Layout hierarchy• Animation

WatchKit LayoutProgramming Model

You don’t write object creation codeFine tuned control of• Positioning and Sizing• Layout hierarchy• Animation

Layout and Animation Techniques for WatchKit Pacific Heights Thursday 10:00AM

Creating My UI

Creating My UI

Main App UIGlanceNotification

Demo

WatchConnectivity

WatchConnectivity Framework

WatchConnectivity Framework

WatchConnectivity Framework

Application Context

WatchConnectivity Framework

Application Context Send Message

WatchConnectivity Framework

Application Context Send MessageFile Transfer

WatchConnectivity Framework

Application Context Send MessageFile TransferTransfer User info

WatchConnectivity Framework

Application Context Send MessageFile TransferTransfer User info

Introducing Watch Connectivity Pacific Heights Thursday 11:00AM

WatchConnectivity Framework

WatchConnectivity Framework

Add WatchConnectivity

WatchConnectivity Framework

Add WatchConnectivityDebug my app

WatchConnectivity Framework

Add WatchConnectivityDebug my appProfile with Instruments

Instruments

Instruments

Instruments

Engagement times are short

Instruments

Engagement times are shortPerformance is critical

Instruments

Engagement times are shortPerformance is criticalDevice

Instruments

Engagement times are shortPerformance is criticalDeviceSimulator

Demo

WWDC CallMeLately

WWDC CallMeLately

Added a Watch app

WWDC CallMeLately

Added a Watch appCreated an interface for our app and glance

WWDC CallMeLately

Added a Watch appCreated an interface for our app and glanceWatchConnectivity

WWDC CallMeLately

Added a Watch appCreated an interface for our app and glanceWatchConnectivityDebugged our iOS and watchOS apps

WWDC CallMeLately

Added a Watch appCreated an interface for our app and glanceWatchConnectivityDebugged our iOS and watchOS appsProfiled in Instruments

watchOS 2 Features

Complications

Complications

😎

Digital Crown

😎

Digital Crown

Animations

Animations

Heart Rate Sensors

Haptics

Haptics

Media Playback

Media Playback

Media Playback

Audio Recording

Audio Recording

Security

Recap

Recap

Architecture

Recap

ArchitectureAdding a Watch app

Recap

ArchitectureAdding a Watch appApp Lifecycle

Recap

ArchitectureAdding a Watch appApp LifecycleUse interface elements

Recap

ArchitectureAdding a Watch appApp LifecycleUse interface elementsBuild and run

Recap

ArchitectureAdding a Watch appApp LifecycleUse interface elementsBuild and runDebugging

Recap

ArchitectureAdding a Watch appApp LifecycleUse interface elementsBuild and runDebuggingUse watchOS capabilities

More Information

DocumentationwatchOS 2 Transition GuideWatchKit Programming Guide

Sample CodeListerWatchKit Cataloghttp://developer.apple.com/watchOS

Technical SupportApple Developer ForumsDeveloper Technical Support

General InquiriesJake Behrens, watchOS Frameworks Evangelistbehrens@apple.com

Related Sessions

Apple Watch Accessibility Pacific Heights Tuesday 1:30PM

WatchKit In-Depth, Part 1 Pacific Heights Wednesday 9:00AM

WatchKit In-Depth, Part 2 Pacific Heights Wednesday 10:00AM

Creating Complications with ClockKit Pacific Heights Wednesday 11:00AM

Layout and Animation Techniques for WatchKit Pacific Heights Thursday 10:00AM

WatchKit Tips and Tricks Presidio Friday 10:00AM

Introducing Watch Connectivity Pacific Heights Thursday 11:00AM

Designing for Apple Watch Presidio Wednesday 4:30PM

Apple Watch Design Tips and Tricks Presidio Friday 3:30PM

Labs

ClockKit Complications Lab Frameworks Lab D Wednesday 1:30PM

WatchKit Lab Frameworks Lab D Wednesday 3:30PM

Watch Connectivity Lab Frameworks Lab B Thursday 1:30PM

WatchKit Layout and Animation Lab Frameworks Lab A Thursday 3:30PM

WatchKit and ClockKit Complications Lab Frameworks Lab A Friday 1:30PM