WatchKit

Developing apps for WatchKit for Swift belling talk

Transcript

1. What do you need to know about WatchKit? Kostiantyn Koval
2. Me - ¯\_(ツ)_/¯ Kostiantyn Koval Work:  + + I ❤ : Kostiantyn Koval @KostiaKoval
3. Watch & Apps ❖ Watch is worn not used ❖ Quick Interaction ❖ New use scenarios
4. Watch & Apps ❖ Watch is worn not used ❖ Quick Interaction ❖ New use scenarios Small
5. 1. Create WatchKit App iOS Project WatchKit
 Project ❖ An Extension to iOS app ❖ Most important feature
6. 1. Create WatchKit App iOS Project WatchKit
 Project ❖ An Extension to iOS app ❖ Most important feature ❖ Require iOS app and iPhone
7. 2. WatchKit Target Content WatchKit App WatchKit Extension ❖ UI - Storyboard and Images ❖ Lives on  Watch ❖ Static UI ❖ Code - Swift and Objc ❖ Lives on iPhone ❖ Extension Limitations
8. Architecture iOS Project WatchKit Project WatchKit App
 - UI WatchKit Extension
 - Code
9. Send to AppStore iOS Project WatchKit Project WatchKit App WatchKit Extension
10. W W Download iOS app
11. W W Download iOS app
12. W W Download iOS app
13. W W Install Watch App WatchKit App
14. UI - Watch App ❖ Interface Builder (Drag & Drop)
 
 

15. UI - Watch App ❖ Interface Builder (Drag & Drop) ❖ No X, Y, Z coordinate system (0,0) Y X
16. UI - Watch App ❖ Interface Builder (Drag & Drop) ❖ No X, Y, Z coordinate system ❖ Stack layout
17. UI - Watch App ❖ Interface Builder (Drag & Drop) ❖ No X, Y, Z coordinate system ❖ Stack layout ❖ Static Interface
18. Layout Vertical Horizontal
19. Layout Vertical Horizontal Nested
20. Elements ❖ Layout ❖ Group, Table, Separator ❖ Controls ❖ Button, Switch, Slider ❖ Content ❖ Image, Map, Label ❖ Date and Time ❖ Menus
21. Element Attributes ❖ Element Specific (Button) ❖ View ❖ Alpha, Hidden ❖ Position ❖ Horizontal, Vertical ❖ Size ❖ Width , Height
22. Position Left - Center - Right Top - Center - Bottom Vertical Horizontal
23. Size Fit Content Relative to Container Fixed ❖ Percent: 0,3 ❖ Adjustment : 2 or -2 ❖ Point : 
 38mm 134 - 151
 42mm 155 - 175
24. Layout Order 1. By Position rule 2. By Order Top Center Bottom
25. Layout Order 1. By Position rule 2. By Order Top Center Bottom Keep elements order the same as Layout
26. Code - WatchKit Extension ❖ Delegate hard work to parent iPhone app, iPhone app is a brain
27. Code - WatchKit Extension ❖ Delegate hard work to parent iPhone app, iPhone app is a brain ❖ Cocoa and Foundation
28. Code - WatchKit Extension ❖ Delegate hard work to parent iPhone app, iPhone app is a brain ❖ Cocoa and Foundation ❖ Extension Limitation: ❖ No background tasks ❖ Avoid long running tasks ❖ No UIApplication
29. WatchKit ❖ UI Elements ❖ Interface Controller ❖ Device Info
30. Controlling UI ❖ Create UI in Storyboard ❖ Create WKInterfaceController subclass ❖ Set Custom class in Storyboard ❖ Set @IBOutlet and @IBAction
31. UI - Code WatchKit App WatchKit Extension Actions Set values
32. UI - Code WatchKit App WatchKit Extension Proxy Actions Set values Actions Set values
33. UI - Code WatchKit App WatchKit Extension Proxy Actions Set values Actions Set values ❖ Run loop batch update ❖ No animation
34. Code … class ButtonsInterfaceController: WKInterfaceController { @IBOutlet weak var button1: WKInterfaceButton! @IBOutlet weak var button2: WKInterfaceButton! @IBOutlet weak var button3: WKInterfaceButton! @IBAction func action1() { println("Action 1") } @IBAction func action2() { println("Action 2") } @ IBAction func action3() { println("Action 3") } override func awakeWithContext(context: AnyObject?) { super.awakeWithContext(context) button1.setTitle("Title 1") button2.setTitle("Title 2") button3.setTitle("Title 3") } override func willActivate() { // This method is called when watch view controller is about to be visible to user super.willActivate() NSLog("%@ will activate", self) } override func didDeactivate() { // This method is called when watch view controller is no longer visible NSLog("%@ did deactivate", self) super.didDeactivate() } }
35. Lifecycle Create WKInterfaceController subclass
 ❖ init ❖ awakeWithContext(context: AnyObject!) ❖ willActivate ❖ didDeactivate
 Initialize UI Configure Display Hide
36. Share Data ❖ Setup ❖ Enable App Groups ❖ Set group name “group.com.me.myapp” ❖ Share Data ❖ NSUserDefaults ❖ Files ❖ MMWormhole ❖ CoreData
37. Share Data // NSUserDefaults let defaults = NSUserDefaults(suiteName: "group.com.kkoval.DataSharing") defaults?.objectForKey(itemsKey) // File let containerURL = NSFileManager.defaultManager().containerURLForSecurityApplicationGroupIdentifier(groupName) // CoreData … let url = containerURL.URLByAppendingPathComponent(“db.sqlite”) coordinator.addPersistentStoreWithType(NSSQLiteStoreType, configuration: nil, URL: url, options: nil, error: &error) … Or use Seru var persistance = PersistenceLayer(name: "Database", location: .SharedGroup("group.com.myapp"))
38. Share Code ❖ Model ❖ Data Access ❖ Business Logic ❖ Add to both Targets ❖ Make a Framework ( ✓App Extension Api only) ❖ !! NSBundle.mainBundle wont work
39. Communication ❖ OpenParentApp From watch to iPhone with result callback ❖ Notifications CFNotificationCenter
40. Communication // iOS App func application(application: UIApplication!, handleWatchKitExtensionRequest userInfo: [NSObject : AnyObject]!, reply: (([NSObject : AnyObject]!) -> Void)?) { if let info = userInfo as? [String: String] { personViewController.showPerson(info["personName"]!) reply.map { $0(["response" : "success"]) } } else { reply.map { $0(["response" : "fail"]) } } } // WatchKit Extension App var userInfo = ["personName" : person] WKInterfaceController.openParentApplication(userInfo, reply: { (data, error) in if let error = error { println(error) } if let data = data { println(data) } })
41. Kostiantyn Koval @KostiaKoval Thanks medium@kostiakoval github.com/kostiakoval https://github.com/kostiakoval/WatchKit-Apps https://github.com/kostiakoval/Seru 6 - UI Playgrounds https://github.com/mutualmobile/MMWormhole