WatchKit workshop at Tuenti

We held another theEvnt workshop at Tuenti where Víctor Corugedo, César Estébanez and Eduardo González (Tuenti iOS Team members) gave a complete workshop about WatchKit SDK and how to develop Apple Watch Apps.

Transcript

1. WatchKit
   

   View Slide

2. WatchKit
   Victor Corugedo Cesar Estebanez Eduardo Gonzalez
   

   View Slide

3. Introduction to WatchKit
   Project set up
   Example
   

   View Slide

4. 9th september 2014
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. • Apple S1 integrate computer (SiP)
   • Sensors:
   • Accelerometer
   • Gyroscope
   • Heart rate monitor
   • Processor Broadcom handling WIFI
   and Bluetooth
   

   View Slide

10. Developing for Apple Watch
    

    View Slide

11. WatchKit
    Set of tools to easily create
    experiences designed specifically
    for Apple Watch
    

    View Slide

12. Preliminar SDK versions
    Xcode 6.2 beta 5 & iOS 8.2
    Apple Watch requires iPhone 5 or later
    https://developer.apple.com/watchkit/
    

    View Slide

13. WatchKit Apps Glances Actionable Notifications
    

    View Slide

14. • WatchKit Apps
    • User interacts launching it from home screen
    • Full user interface with multiple screens of
    content
    

    View Slide

15. • Glances
    • Timely read-only information. Lightweight view
    on watch app.
    • Glances do not scroll
    • Glance interface must fit on a single screen.
    • Optionals and watch could turn them on/off
    when they want :)
    • Tapping launches watch app (deep linking)
    

    View Slide

16. • Notifications
    • Short supported by default (Local/Remote)
    • Displays alert message from notification
    • Long Look interface
    • Static version
    • Dinamic Version
    

    View Slide

17. Short Look Long Look
    

    View Slide

18. WatchKit Architecture
    

    View Slide

19. View Slide

20. • Two separate bundles:
    • Watch app runs on Apple Watch
    • WatchKit Extension runs on user’s iPhone
    • UI Resources stored on the Watch App
    • Code runs on WatchKit extension manages Watch App user
    interfaces and respond to user interactions
    

    View Slide

21. • WatchKit App & WatchKit Extension are packaged inside iOS App
    bundle
    • During installation of your iOS app, the system prompts the user to
    install the WatchKit app when a paired Apple Watch is present.
    

    View Slide

22. iOS App
    WatchKit Extension
    WatchKitApp
    Resources
    WatchKitCode
    WatchKitApp
    iOS Code
    WatchKit Extension
    WatchKitApp Target
    WatchKit Extension Target
    iOS AppTarget
    

    View Slide

23. 3 bundles!!!
    

    View Slide

24. 3 different bundle IDs
    

    View Slide

25. 2 based on iOS App bundle Id
    

    View Slide

26. The base IDs for all three bundles
    must match
    

    View Slide

27. Watch App
    WatchKit Extension
    

    View Slide

28. WatchKit App Life Cycle
    

    View Slide

29. • Each scene is managed by a single interface controller object,
    which is an instance of the WKInterfaceController class.
    • Interface controller presents and manages content on the screen
    and responds to user interactions with that content.
    • Only one controller at a time is displayed onscreen.
    

    View Slide

30. Sharing data between iOS App
    and App extension
    

    View Slide

31. iOS App and WatchKit Extension run
    in separate sandbox environments
    

    View Slide

32. Shared app group lets the two
    processes share files or user
    defaults information between them.
    

    View Slide

33. At runtime, you share files between
    processes by reading and writing those
    files in the shared container directory
    

    View Slide

34. Make sure that you don't accidentally
    corrupt the data.
    Sharing data files means there might
    be more than one process trying to
    use a file at the same time.
    

    View Slide

35. Share preferences data between apps?
    NSUserDefaults initWithSuiteName:
    

    View Slide

36. access the container directory?
    NSFileManager
    containerURLForSecurityApplicationGroupIdentifier:
    

    View Slide

37. Passwords?
    Keychain
    initWithIdentifier:accessGroup
    

    View Slide

38. Network request ?
    Not a good idea.
    Use parent app and a shared group container
    

    View Slide

39. Communicating directly with
    iOS App
    

    View Slide

40. openParentApplication:reply:
    WKInterfaceController
    

    View Slide

41. application:handleWatchKitExtensionRequest:reply:
    iOS AppDelegate
    

    View Slide

42. WatchKit UI
    

    View Slide

43. User Interactions
    • Action-based events
    • Gestures
    • Force touch
    • Digital crown
    

    View Slide

44. Interface Navigation
    • Two navigation methods
    

    View Slide

45. Interface Navigation
    • Two navigation methods
    Hierarchical
    

    View Slide

46. Interface Navigation
    • Two navigation methods
    Hierarchical Page based
    

    View Slide

47. WKInterfaceController
    • Manages elements in the scene
    • Entry point of the Apple Watch app
    • Lifecycle: willActivate and didDeactivate
    

    View Slide

48. WKInterfaceObject
    • Base class of interface objects
    • Proxy objects, NOT the actual views
    • Communicate wirelessly with views in UI on Apple Watch
    

    View Slide

49. Labels (WKInterfaceLabel)
    • Display static formatted text
    • Supports standard and custom fonts
    • Can be internationalized
    • For text input: Dictation or standard set of phrases or emoji
    

    View Slide

50. Images (WKInterfaceImage)
    • Display single image or a sequence of images
    • Control animations programmatically
    • Images or image names are transferred wirelessly
    • Use images names from app bundle
    • Cache when possible
    

    View Slide

51. Groups and Separators
    (WKInterfaceGroup & WKInterfaceSeparator)
    • Groups
    • Container for other interface objects or other groups
    • Layout horizontal or vertically
    • Separators
    • Separating content in a view
    

    View Slide

52. Tables (WKInterfaceTable)
    • Support for single column tables and multiple row types
    • No data source nor delegate
    • Define row layout in storyboard and connect with row controllers
    • WKInterfaceController adds rows and handles interactions
    

    View Slide

53. Buttons, Switches and Slider
    (WKInterfaceButton & WKInterfaceSwitch & WKInterfaceSlider)
    • Buttons
    • Can contain a single label or group
    • Sliders
    • Discrete or continuous
    • One image at each end
    

    View Slide

54. Maps (WKInterfaceMap)
    • Static snapshots of a location
    • Not interactive: tap will open the Maps app
    • Support for annotations
    

    View Slide

55. Dates and Timers
    (WKInterfaceDate & WKInterfaceTimer)
    • Specialized labels
    • Don’t require to be updated by a WatchKit extension
    • Configure display through different formats and calendars
    

    View Slide

56. Menus (WKInterfaceSlider)
    • Display 1 to 4 secondary actions
    • Defined per screen
    • IBAction to handle action
    

    View Slide

57. Settings (Settings-Watch.bundle)
    • Same functionality as iOS settings bundle
    • Shown by the Apple Watch app on the user’s iPhone
    

    View Slide

58. Watch app project set up
    

    View Slide

59. git clone
    https://github.com/WatchKitTheEvnt/
    GitHubStars.git
    git checkout kickoff
    

    View Slide

60. Project Architecture
    The Evnt : WatchKit Workshop
    

    View Slide

61. Hello GitHubStars
    

    View Slide

62. GitHubStars
    • Keep track of your repos
    • See how many stars, forks, and issues you have
    • GitHub API - OctoKit
    • ReactiveCocoa!
    • MVVM
    

    View Slide

63. iOS App Architecture
    VM
    VM
    I
    I
    M
    V
    V
    Network
    Storage
    API
    DB
    M
    Business
    Presentation Data
    

    View Slide

64. GitHubStars Anatomy
    WatchKit Extension
    iOS App
    WatchKit App
    

    View Slide

65. GitHubStars Anatomy
    WatchKit Extension
    iOS App
    WatchKit App
    

    View Slide

66. GitHubStars Anatomy
    WatchKit Extension
    iOS App
    WatchKit App
    Embedded Framework
    

    View Slide

67. GitHubStars Anatomy
    WatchKit Extension
    iOS App
    WatchKit App
    Embedded Framework
    

    View Slide

68. That’s why
    VM
    VM
    I
    I
    M
    V
    V
    Network
    Storage
    API
    DB
    M
    Business
    Presentation Data
    

    View Slide

69. Reuse Code!
    • User Embedded Frameworks to share code between iOS App and WatchKit Extension
    • Limitations:
    • Extensions and iOS app run in separated processes
    • Some APIs are not available to App Extensions
    • Access sharedApplication
    • Camera, micro
    • Long-running background tasks (networking!)
    • HealthKit, EventKit UI, AirDrop, etc.
    

    View Slide

70. WatchKit App Architecture WatchKit Extension
    iOS App
    Embedded
    API
    DB
    Data
    ?
    ?
    

    View Slide

71. WatchKit Extension
    iOS App
    Embedded
    API
    DB
    Data
    ?
    Storage
    App Groups!
    WatchKit App Architecture
    [[NSUserDefaults alloc]
    initWithSuiteName:GitHubStarsCoreKitAppGroupName];
    

    View Slide

72. WatchKit Extension
    iOS App
    Embedded
    API
    DB
    Data
    ?
    Storage
    WatchKit App Architecture
    

    View Slide

73. WatchKit Extension
    iOS App
    Embedded
    API
    DB
    Data
    ?
    Storage
    Background NSURLSessionTask + App Groups
    WatchKit App Architecture
    application:handleEventsForBackgroundURLSession:completionHandler:
    

    View Slide

74. WatchKit Extension
    iOS App
    Embedded
    API
    DB
    Data
    Communicating
    with containing App
    Storage
    Network iOS
    WatchKit App Architecture
    WKInterfaceController openParentApplication:reply:
    

    View Slide

75. WatchKit Extension
    iOS App
    Embedded
    M
    M
    Business
    API
    DB
    Data
    Storage
    Network iOS
    WatchKit App Architecture
    

    View Slide

76. WatchKit Extension
    iOS App
    Embedded
    WKInterfaceController
    M
    M
    Business
    Presentation
    WKInterfaceController API
    DB
    Data
    Storage
    Network iOS
    WatchKit App Architecture
    

    View Slide

77. WatchKit Extension
    iOS App
    Embedded
    WKInterfaceController I
    M
    M
    Business
    Presentation
    WKInterfaceController API
    DB
    Data
    Storage
    Network iOS
    I
    WatchKit App Architecture
    

    View Slide

78. WatchKit App Architecture
    

    View Slide

79. Pro Tips
    • Inter-process Communication & Debugging
    • Write tests. No, seriously.
    • Serialisation for inter-process communication
    • NSCoding?
    

    View Slide

80. Pro Tips
    • Inter-process Communication & Debugging
    • Write tests. No, seriously.
    • Serialisation for inter-process communication
    • NSCoding
    • NSSecureCoding!
    

    View Slide

81. Hands on
    • What are you learning?
    • WatchKit App
    • Static & Dynamic Notifications
    • Glance
    

    View Slide

82. Hands on
    • Two flavours:
    • checkout kickoff and write code with us
    • checkout master and follow the explanations
    

    View Slide

83. Hands on
    • What are we providing?
    

    View Slide

84. Hands on
    • What are we providing?
    I
    I
    M
    M
    Business
    Presentation
    API
    DB
    Data
    Storage
    Network iOS
    

    View Slide

85. Hands on
    • What are we providing?
    I
    I
    M
    M
    Business
    Presentation
    API
    DB
    Data
    Storage
    Network iOS
    

    View Slide

86. Let’s write some code!
    

    View Slide

87. Let’s write some code!
    

    View Slide