Building Watch Apps #WWDC15. Featured. Session 108. Neil Desai watchos Engineer

Transcription

1 Featured #WWDC15 Building Watch Apps Session 108 Neil Desai watchos Engineer 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Agenda

3 Agenda Architecture

4 Agenda Architecture Interface elements

5 Agenda Architecture Interface elements Debugging

6 Agenda Architecture Interface elements Debugging watchos 2 Features

7

8

9

10

11

12 Architecture

13

14

15 Architecture iphone Apple Watch

16 Architecture iphone Apple Watch Watch App

17 Architecture iphone Apple Watch Watch App Watch Extension

18 Architecture iphone Apple Watch Watch App WatchConnectivity ios App Watch Extension

19 Architecture Interface UI is stored in Watch app

20 Architecture Interface UI is stored in Watch app Plan your UI in advance

21 Architecture Interface UI is stored in Watch app Plan your UI in advance Code updates UI from the extension

22 Architecture WatchKit Framework One controller per screen of content

23 Architecture WatchKit Framework One controller per screen of content Manages UI elements through outlets

24 Architecture WatchKit Framework One controller per screen of content Manages UI elements through outlets Uses target-action design pattern

25

26

27

28

29 Adding a Watch App

30 Adding a Watch App Add Watch App target

31 Adding a Watch App Add Watch App target Configure interface elements

32 Adding a Watch App Add Watch App target Configure interface elements Build and run

33 Simulator

34

35

36 Simulator Overview

37 Simulator Overview Full simulator

38 Simulator Overview Full simulator 38mm and 42mm

39 Simulator Overview Full simulator 38mm and 42mm Simulate Touch Pressure

40 Simulator Overview Full simulator 38mm and 42mm Simulate Touch Pressure Clock faces

41 Simulator Overview Full simulator 38mm and 42mm Simulate Touch Pressure Clock faces Multiple apps

42 Simulator Touch Pressure

43 Simulator Touch Pressure

44 Demo

45 App Lifecycle

46

47 Watch Extension Watch App

48 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() Initialize app

49 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei

50 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei WKInterfaceController

51 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei WKInterfaceController awakewithcontext() Initialize UI

52 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei WKInterfaceController awakewithcontext() willactivate() Initialize UI Display UI

53 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei WKInterfaceController awakewithcontext() willactivate() (various action methods) Initialize UI Display UI Wearer interacts with UI

54 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei WKInterfaceController awakewithcontext() willactivate() (various action methods) diddeactivate() Initialize UI Display UI Wearer interacts with UI Wearer stops interacting

55 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei WKInterfaceController awakewithcontext() willactivate() (various action methods) diddeactivate() Initialize UI Display UI Wearer interacts with UI Wearer stops interacting WKExtensionDelegate

56 Watch Extension Watch App WKExtensionDelegate DidFinishLaunching() DidBecomeActive() Initialize app Update modei WKInterfaceController awakewithcontext() willactivate() (various action methods) diddeactivate() Initialize UI Display UI Wearer interacts with UI Wearer stops interacting WKExtensionDelegate WillResignActive() Active app to inactive

57 WatchKit Layout

58 WatchKit Layout Model

59 WatchKit Layout Model Different from UIKit and AppKit

60 WatchKit Layout Model Different from UIKit and AppKit Flow-based layout

61 WatchKit Layout Model Different from UIKit and AppKit Flow-based layout UI created in Interface Builder

62 WatchKit Layout Model Flow-based layout Interface Controller 10:09

63 WatchKit Layout Model Flow-based layout Interface Controller 10:09

64 WatchKit Layout Model Flow-based layout Interface Controller 10:09 Image

65 WatchKit Layout Model Flow-based layout Interface Controller 10:09 Image

66 WatchKit Layout Model Flow-based layout Interface Controller 10:09 Image Button

67 WatchKit Layout Model Flow-based layout Interface Controller 10:09 Image Button

68 WatchKit Layout Model Groups are containers of elements Interface Controller 10:09 Image Button Group

69 WatchKit Layout Model Groups are containers of elements Interface Controller 10:09 Image Button Group

70 WatchKit Layout Model Groups are containers of elements 10:09 Image Button Image Label

71 WatchKit Layout Programming Model

72 WatchKit Layout Programming Model You don t write object creation code

73 WatchKit Layout Programming Model You don t write object creation code Fine tuned control of

74 WatchKit Layout Programming Model You don t write object creation code Fine tuned control of Positioning and Sizing

75 WatchKit Layout Programming Model You don t write object creation code Fine tuned control of Positioning and Sizing Layout hierarchy

76 WatchKit Layout Programming Model You don t write object creation code Fine tuned control of Positioning and Sizing Layout hierarchy Animation

77 WatchKit Layout Programming Model You don t write object creation code Fine tuned control of Positioning and Sizing Layout hierarchy Animation Layout and Animation Techniques for WatchKit Pacific Heights Thursday 10:00AM

78

79

80

81 Creating My UI

82 Creating My UI Main App UI Glance Notification

83 Demo

84

85

86

87 WatchConnectivity

88 WatchConnectivity Framework

89 WatchConnectivity Framework

90 WatchConnectivity Framework Application Context

91 WatchConnectivity Framework Application Context Send Message

92 WatchConnectivity Framework Application Context Send Message File Transfer

93 WatchConnectivity Framework Application Context Send Message File Transfer Transfer User info

94 WatchConnectivity Framework Application Context Send Message File Transfer Transfer User info Introducing Watch Connectivity Pacific Heights Thursday 11:00AM

95 WatchConnectivity Framework

96 WatchConnectivity Framework Add WatchConnectivity

97 WatchConnectivity Framework Add WatchConnectivity Debug my app

98 WatchConnectivity Framework Add WatchConnectivity Debug my app Profile with Instruments

99 Instruments

100

101

102 Instruments

103 Instruments Engagement times are short

104 Instruments Engagement times are short Performance is critical

105 Instruments Engagement times are short Performance is critical Device

106 Instruments Engagement times are short Performance is critical Device Simulator

107 Demo

108 WWDC CallMeLately

109 WWDC CallMeLately Added a Watch app

110 WWDC CallMeLately Added a Watch app Created an interface for our app and glance

111 WWDC CallMeLately Added a Watch app Created an interface for our app and glance WatchConnectivity

112 WWDC CallMeLately Added a Watch app Created an interface for our app and glance WatchConnectivity Debugged our ios and watchos apps

113 WWDC CallMeLately Added a Watch app Created an interface for our app and glance WatchConnectivity Debugged our ios and watchos apps Profiled in Instruments

114 watchos 2 Features

115 Complications

116 Complications

117 Digital Crown

118 Digital Crown

119 Animations

120 Animations

121 Heart Rate Sensors

122 Haptics

123 Haptics

124 Media Playback

125 Media Playback

126 Media Playback

127 Audio Recording

128 Audio Recording

129 Security

130 Recap

131 Recap Architecture

132 Recap Architecture Adding a Watch app

133 Recap Architecture Adding a Watch app App Lifecycle

134 Recap Architecture Adding a Watch app App Lifecycle Use interface elements

135 Recap Architecture Adding a Watch app App Lifecycle Use interface elements Build and run

136 Recap Architecture Adding a Watch app App Lifecycle Use interface elements Build and run Debugging

137 Recap Architecture Adding a Watch app App Lifecycle Use interface elements Build and run Debugging Use watchos capabilities

138 More Information Documentation watchos 2 Transition Guide WatchKit Programming Guide Technical Support Apple Developer Forums Developer Technical Support Sample Code Lister WatchKit Catalog General Inquiries Jake Behrens, watchos Frameworks Evangelist behrens@apple.com

139 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

140 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

141