Native watch apps and third-party complications

Let's take a practical look at Apple's newest development platform watchOS, by implementing a GitHub streak custom complication and a native Spotify watch app.

Transcript

1. BUILDING WATCHOS APPS
   SWIFT.BERLIN, JULY 2015
   BORIS BÜGLING - @NEONACHO
   

   View Slide

2. COCOAPODS
   

   View Slide

3. CONTENTFUL
   

   View Slide

4. View Slide

5. !!!!
   

   View Slide

6. ᴡᴀᴛᴄʜ
   

   View Slide

7. WATCHOS 1.X
   ▸ Notifications
   ▸ Glances
   ▸ WatchKit apps
   

   View Slide

8. NOTIFICATIONS
   

   View Slide

9. GLANCES
   

   View Slide

10. WATCHKIT
    

    View Slide

11. WATCHOS 2.X
    ▸ Apps run natively on the watch
    ▸ Custom complications
    

    View Slide

12. !!!
    

    View Slide

13. View Slide

14. COMPLICATIONS
    

    View Slide

15. ARCHITECTURE
    

    View Slide

16. View Slide

17. WATCHOS 2
    Extension
    phone => watch
    

    View Slide

18. RESOURCES
    ▸ Interface.storyboard
    ▸ Asset catalogs
    

    View Slide

19. EXTENSION DELEGATE
    class ExtensionDelegate: NSObject, WKExtensionDelegate {
    func applicationDidFinishLaunching() {
    }
    func applicationDidBecomeActive() {
    }
    func applicationWillResignActive() {
    }
    }
    

    View Slide

20. INTERFACE CONTROLLER
    class InterfaceController: WKInterfaceController {
    override func awakeWithContext(context: AnyObject?) {
    super.awakeWithContext(context)
    }
    override func willActivate() {
    super.willActivate()
    }
    override func didDeactivate() {
    super.didDeactivate()
    }
    }
    

    View Slide

21. WKINTERFACECONTROLLER
    ▸ Navigation
    ▸ Presentation
    ▸ Handoff
    ▸ Handle notification actions
    ▸ Communicate with parent app
    

    View Slide

22. CLKCOMPLICATIONFAMILY
    enum CLKComplicationFamily : Int {
    case ModularSmall
    case ModularLarge
    case UtilitarianSmall
    case UtilitarianLarge
    case CircularSmall
    }
    

    View Slide

23. CLKCOMPLICATIONTIMELINEENTRY
    class CLKComplicationTimelineEntry : NSObject {
    var date: NSDate
    @NSCopying var complicationTemplate: CLKComplicationTemplate
    }
    

    View Slide

24. CLKCOMPLICATIONTEMPLATE
    The CLKComplicationTemplate class is a base class for specifying the
    arrangement of data in your custom watch complication.
    

    View Slide

25. CLKCOMPLICATIONTEMPLATECIRCULARSMALLRIN
    GIMAGE
    

    View Slide

26. CLKCOMPLICATIONTEMPLATECIRCULARSMALLSI
    MPLEIMAGE
    

    View Slide

27. ...
    

    View Slide

28. DESIGN
    

    View Slide

29. If you measure interactions with your
    iOS app in minutes, you can expect
    interactions with your Watch app to be
    measured in seconds.
    

    View Slide

30. PRINCIPLES
    ▸ Lightweight interactions
    ▸ Holistic design
    ▸ Personal communication
    

    View Slide

31. LAYOUT
    ▸ based on horizontal or vertical groups
    ▸ very similar to UIStackView
    ▸ two device sizes (38mm and 42mm)
    ▸ edge-to-edge, bezel provides margins
    

    View Slide

32. View Slide

33. SOME EXAMPLES
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. BUILDING A
    SIMPLE APP
    

    View Slide

39. View Slide

40. WATCHPRESENTER
    ▸ Remote controls Deckset instead
    ▸ Direct connection to the Mac
    ▸ Shows a preview of the slides
    ▸ Measures heartrate to display the "most exciting" slide
    ▸ Taps you if you're running out of time
    

    View Slide

41. MULTIPEER CONNECTIVITY!
    

    View Slide

42. AVAILABLE
    FRAMEWORKS
    

    View Slide

43. CFNetwork.framework
    ClockKit.framework
    Contacts.framework
    CoreData.framework
    CoreFoundation.framework
    CoreGraphics.framework
    CoreLocation.framework
    CoreMotion.framework
    EventKit.framework
    Foundation.framework
    

    View Slide

44. HealthKit.framework
    HomeKit.framework
    ImageIO.framework
    MapKit.framework
    MobileCoreServices.framework
    PassKit.framework
    Security.framework
    UIKit.framework
    WatchConnectivity.framework
    WatchKit.framework
    

    View Slide

45. BT APIS ARE
    PRIVATE :(
    

    View Slide

46. OTHER OPTIONS
    ▸ NSURLSession via Wi-Fi
    ▸ WatchConnectivity.framework to talk via the phone
    

    View Slide

47. HEALTHKIT.FRAMEWORK
    let anchorValue = Int(HKAnchoredObjectQueryNoAnchor)
    let sampleType = HKObjectType.quantityTypeForIdentifier(HKQuantityTypeIdentifierHeartRate)
    let heartRateQuery = HKAnchoredObjectQuery(type: sampleType!,
    predicate: nil, anchor: anchorValue,
    limit: 0) { (query, sampleObjects, deletedObjects,
    newAnchor, error) -> Void in
    guard let heartRateSamples = sampleObjects as?[HKQuantitySample] else {return}
    let sample = heartRateSamples.first
    let value = sample!.quantity.doubleValueForUnit(self.heartRateUnit)
    print(value)
    }
    heartRateQuery.updateHandler = // ...
    

    View Slide

48. View Slide

49. HEALTHKIT.FRAMEWORK
    ▸ not usable in the Watch simulator
    

    View Slide

50. TAPTIC ENGINE
    typedef NS_ENUM(NSInteger, WKHapticType) {
    WKHapticTypeNotification,
    WKHapticTypeDirectionUp,
    WKHapticTypeDirectionDown,
    WKHapticTypeSuccess,
    WKHapticTypeFailure,
    WKHapticTypeRetry,
    WKHapticTypeStart,
    WKHapticTypeStop,
    WKHapticTypeClick
    } WK_AVAILABLE_WATCHOS_ONLY(2.0);
    WKInterfaceDevice.currentDevice().playHaptic(.Start)
    

    View Slide

51. BUT ALSO NOT USABLE IN THE SIM
    

    View Slide

52. SPOTIFY REMOTE
    

    View Slide

53. DEMO
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. TIPS
    

    View Slide

59. printf
    DEBUGGING IS
    GREAT!
    

    View Slide

60. MMWORMHOLE
    ▸ watchOS 1.0: CFNotificationCenter
    ▸ watchOS 2.0: WatchConnectivity.framework
    

    View Slide

61. FORCE QUIT APPS
    ▸ Long press until "reboot" menu
    ▸ Long press again
    

    View Slide

62. IF IN DOUBT, REBOOT THE
    WATCH :)
    

    View Slide

63. WHAT HAVE WE LEARNED?
    ▸ Code isn't very different from iOS apps
    ▸ But design very much is
    ▸ Rethink your app for the watch, don't port it
    ▸ If you can't - maybe you don't need a watch app
    

    View Slide

64. Don’t be afraid to not ship.
    @orta
    

    View Slide

65. THANK YOU!
    

    View Slide

66. ▸ https://developer.apple.com/watch/human-interface-guidelines/
    ▸ https://developer.apple.com/library/prerelease/watchos/
    documentation/General/Conceptual/AppleWatch2TransitionGuide/
    ▸ https://github.com/shu223/watchOS-2-Sampler
    ▸ http://www.kristinathai.com/category/watchkit/
    ▸ https://realm.io/news/watchkit-mistakes/
    

    View Slide

67. @NeoNacho
    boris@contentful.com
    http://buegling.com/talks
    

    View Slide