Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WatchKit workshop at Tuenti

Tuenti
February 28, 2015

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.

Tuenti

February 28, 2015
Tweet

More Decks by Tuenti

Other Decks in Technology

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