WatchKit

An overview of the first WatchKit SDK, and details on writing WathKit app extensions.

Transcript

1. WatchKit Jonathan Blocksom @jblocksom
 Capital One CocoaConf Atlanta 2014 Friday Dec 5, 2014
2. Agenda • WatchKit Overview • Hello, Wrist • Glances and Notifications • GUI Overview • Apps • “Advanced” WatchKit
3. WatchKit Overview
4. The SDK So Far • No native code • Glances
 Notifications
 Watch Apps • Extension Model • Limited Functionality
5. Display
6. Host App WatchKit Extension Watch iPhone Watch App Bluetooth Outlet setters Actions Shared Container • Extension model for app • Data, remote messages over bluetooth • No code on device • Watch App bundle contains only assets
7. Watch App Limitations • Code is running on phone • Watch - Phone comms takes power • No access to Watch sensor data • No access to Phone sensor data • No background jobs
8. Looking Forward • Apple Sept 9 2014 Press Release:
 ”With Apple Watch, developers can create WatchKit apps with actionable notifications and Glances that provide timely information. Starting later next year, developers will be able to create fully native apps for Apple Watch.”
 
 (emphasis added)
9. Hackathon Crime Tracker Get out of meeting Love tap Health Data Heart Rate Audio Player Real Time Money
10. Hello, Wrist
11. Hello, Wrist • Walk through simple Watch app
12. Add Watch App Target
13. Add Watch App Target
14. Use New Scheme to Run • iOS Simulator: Hardware -> External Displays
15. Glances
16. Glances • Quick look at some data • Non-interactive • Code to prep runs ahead of display • Invoked when user swipes from bottom
 User can select which glances to display
17. Programming Model • Implement WKInterfaceController • Use outlets to customize interface - (instancetype)initWithContext:(id)context; - (void)willActivate; - (void)didDeactivate; @interface GlanceController() @property (weak, nonatomic) IBOutlet WKInterfaceLabel *topLabel; @property (weak, nonatomic) IBOutlet WKInterfaceLabel *bottomLabel; @property (weak, nonatomic) IBOutlet WKInterfaceTimer *bottomTimer; @end
18. Set up glance • Run whatever operations you need — query server, check shared container, etc. • Could be long time from initWithContext: to willActivate - (void)willActivate { NSLog(@"%@ glance will activate", self); self.bottomLabel.text = @"Glancing!"; self.bottomTimer.date = [NSDate date]; [self.bottomTimer start]; }
19. Demo • Glance App
20. Notifications
21. Notifications • Tied to iPhone notifications • Short & long form • Simple controls to launch app
22. Short-Look Interface • Nonscrolling • No customization • Automatic transition to long look short long
23. Long-Look Interface • Tap sash/title to launch app • Use UIUserNotificationAction to register buttons and actions • Foreground Actions launch watch app, sending button ID • Background Actions launch containing iOS app
24. WatchKit GUI Library
25. GUI Elements • Group • Table • Label, Image • Button, Switch, Slider • Date, Timer • Map • Menu
26. Tables • Not quite a data source func setRowTypes(rowTypes: [AnyObject]) // row names. size of array is number of rows func setNumberOfRows(numberOfRows: Int, withRowType rowType: String) // repeating row name var numberOfRows: Int { get } func rowControllerAtIndex(index: Int) -> AnyObject? func insertRowsAtIndexes(rows: NSIndexSet, withRowType rowType: String) func removeRowsAtIndexes(rows: NSIndexSet) func scrollToRowAtIndex(index: Int)
27. Date & Timer • Configure for date/time/display • Timer can count up or down from certain time
28. Maps • Uses Snapshot
29. Menu • Show a menu with up to four buttons typedef NS_ENUM(NSInteger, WKMenuItemIcon) { WKMenuItemIconAccept, // checkmark WKMenuItemIconAdd, // '+' WKMenuItemIconBlock, // circle w/ slash WKMenuItemIconDecline, // 'x' WKMenuItemIconInfo, // 'i' WKMenuItemIconMaybe, // '?' WKMenuItemIconMore, // '...' WKMenuItemIconMute, // speaker w/ slash WKMenuItemIconPause, // pause button WKMenuItemIconPlay, // play button WKMenuItemIconRepeat, // looping arrows WKMenuItemIconResume, // circular arrow WKMenuItemIconShare, // share icon WKMenuItemIconShuffle, // swapped arrows WKMenuItemIconSpeaker, // speaker icon WKMenuItemIconTrash, // trash icon } NS_ENUM_AVAILABLE_IOS(8_2);
30. Layout Groups • No autolayout! • Orientation
 Background Image • Can nest vertical horizontal
31. Watch Apps
32. App Model • Container/Host App
 iOS app • Watch App
 Assets for app, sent to watch by iOS • WatchKit Extension
 Code running on phone for watch app Host App WatchKit Extension Watch iPhone Watch App Bluetooth Outlet setters Actions Shared Container Container App
33. Container App • iOS App • Includes WatchKit extension and Watch App • System finds Watch stuff and uses as needed Host App WatchKit Extension Watch iPhone Watch App Bluetooth Outlet setters Actions Shared Container
34. Watch App • App bundle installed on watch • Storyboards • Image Assets • Other info Host App WatchKit Extension Watch iPhone Watch App Bluetooth Outlet setters Actions Shared Container
35. WatchKit
 Extensions • Standard iOS Extension architecture • Run by system when Watch App is active • Can communicate with host app via shared container directory • Limited functionality Host App WatchKit Extension Watch iPhone Watch App Bluetooth Outlet setters Actions Shared Container
36. Advanced Tips
37. “Advanced Tips” • Glance to App • Server side images • Communicating between phone and watch (app and extension) • Misc From “Getting Started With WatchKit”
38. Launch App from Glance • Tap glance and app will launch • Use Handoff to set up // Use Handoff to route the wearer to the image detail controller when the Glance is tapped. NSDictionary *userInfo = @{ @"controllerName": @"mainController", @"detailInfo": @"Some information" }; [self updateUserActivity:@"com.capitalone.WatchThis.watchkitextension" userInfo:userInfo];
39. Launch App from Glance • Tap glance and app will launch • Use Handoff to set up // Use Handoff to route the wearer to the image detail controller when the Glance is tapped. NSDictionary *userInfo = @{ @"controllerName": @"mainController", @"detailInfo": @"Some information" }; [self updateUserActivity:@"com.capitalone.WatchThis.watchkitextension" userInfo:userInfo]; Storyboard ID
40. Image Sources • Images in Watch App • Image Cache • Sent data
41. Watch App Images • JPEGs, PNGs in App • Access by name:
 WKInterfaceImage -setImageNamed:(NSString *)name • Animated images:
 img0.png, img1.png, img2.png • - startAnimating
 - startAnimatingWithImagesInRange:duration:repeat:
42. Image Cache • 20MB Dynamic cache • WKInterfaceDevice -addCachedImage:name: • After adding, set via setImageNamed: • Automatically managed, will discard old images
43. Dynamically Generating Images • Standard iOS dynamic image generation: • Then send to watch: UIGraphicsBeginImageContext(CGSizeMake(50.0, 50.0)); UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0.0, 0.0, 50.0, 50.0)]; [[UIColor greenColor] setStroke]; path.lineWidth = 3.0; [path stroke]; UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); NSData *pngData = UIImagePNGRepresentation(img); [device addCachedImageWithData:pngData name:@"circle"]; [self.image setImageNamed:@"circle"];
44. Host - Extension Communication • App Groups • NSUserDefaults • Shared Container
45. App Groups • “Capabilities” section for host and extension
46. App Groups • Requires developer account • Can set up automagically • Use group string in code: self.sharedDefaults = [[NSUserDefaults alloc] initWithSuiteName:@"group.com.capitalone.Watch1"];
47. Shared Container • File system directory • Accessible by host and extension Entity Host App WatchKit Extension Shared Container Document Document Document User Defaults
48. NSUserDefaults to share data • Set up using group suite: • Get and set objects:
 [self.sharedDefaults setObject:newMessage
 forKey:@"message"];
 NSString *msg = [self.sharedDefaults 
 objectForKey:@"message"]; self.sharedDefaults = [[NSUserDefaults alloc] initWithSuiteName:@"group.com.capitalone.Watch1"];
49. NSUserDefaults • Demo
 https://github.com/jblocksom/WristComms
50. Further Research • NSFileVersion, NSFilePresenter, NSFileCoordinator • Monitor files using GCD
 https://github.com/azamsharp/WatchNotes
51. What can I call from an extension? • Look in headers for NS_EXTENSION_UNAVAILABLE • Cannot:
 Access sharedApplication
 Access camera, microphone
 Long running background tasks
 HealthKit • https://developer.apple.com/library/ios/documentation/ General/Conceptual/ExtensibilityPG/ExtensionOverview.html
52. Resources • WatchKit Reference Guide • Header Files • Apple Discussion Forum — FAQ
 Apple WatchKit Forum FAQ:
 https://devforums.apple.com/thread/254675 • Twitter search: WatchKit
53. Thanks! Jonathan Blocksom Capital One @jblocksom
 blocksom@gmail.com