WatchKit workshop at Tuenti

Slide 1

Slide 1 text

WatchKit

Slide 2

Slide 2 text

WatchKit Victor Corugedo Cesar Estebanez Eduardo Gonzalez

Slide 3

Slide 3 text

Introduction to WatchKit Project set up Example

Slide 4

Slide 4 text

9th september 2014

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Developing for Apple Watch

Slide 11

Slide 11 text

WatchKit Set of tools to easily create experiences designed speciﬁcally for Apple Watch

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

WatchKit Apps Glances Actionable Notiﬁcations

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

• Notiﬁcations • Short supported by default (Local/Remote) • Displays alert message from notiﬁcation • Long Look interface • Static version • Dinamic Version

Slide 17

Slide 17 text

Short Look Long Look

Slide 18

Slide 18 text

WatchKit Architecture

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

• 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

Slide 21

Slide 21 text

• 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.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

3 bundles!!!

Slide 24

Slide 24 text

3 different bundle IDs

Slide 25

Slide 25 text

2 based on iOS App bundle Id

Slide 26

Slide 26 text

The base IDs for all three bundles must match

Slide 27

Slide 27 text

Watch App WatchKit Extension

Slide 28

Slide 28 text

WatchKit App Life Cycle

Slide 29

Slide 29 text

• 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.

Slide 30

Slide 30 text

Sharing data between iOS App and App extension

Slide 31

Slide 31 text

iOS App and WatchKit Extension run in separate sandbox environments

Slide 32

Slide 32 text

Shared app group lets the two processes share ﬁles or user defaults information between them.

Slide 33

Slide 33 text

At runtime, you share ﬁles between processes by reading and writing those ﬁles in the shared container directory

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Share preferences data between apps? NSUserDefaults initWithSuiteName:

Slide 36

Slide 36 text

access the container directory? NSFileManager containerURLForSecurityApplicationGroupIdentiﬁer:

Slide 37

Slide 37 text

Passwords? Keychain initWithIdentiﬁer:accessGroup

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Communicating directly with iOS App

Slide 40

Slide 40 text

openParentApplication:reply: WKInterfaceController

Slide 41

Slide 41 text

application:handleWatchKitExtensionRequest:reply: iOS AppDelegate

Slide 42

Slide 42 text

WatchKit UI

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Interface Navigation • Two navigation methods

Slide 45

Slide 45 text

Interface Navigation • Two navigation methods Hierarchical

Slide 46

Slide 46 text

Interface Navigation • Two navigation methods Hierarchical Page based

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Menus (WKInterfaceSlider) • Display 1 to 4 secondary actions • Deﬁned per screen • IBAction to handle action

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Watch app project set up

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Project Architecture The Evnt : WatchKit Workshop

Slide 61

Slide 61 text

Hello GitHubStars

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

GitHubStars Anatomy WatchKit Extension iOS App WatchKit App

Slide 65

Slide 65 text

GitHubStars Anatomy WatchKit Extension iOS App WatchKit App

Slide 66

Slide 66 text

GitHubStars Anatomy WatchKit Extension iOS App WatchKit App Embedded Framework

Slide 67

Slide 67 text

GitHubStars Anatomy WatchKit Extension iOS App WatchKit App Embedded Framework

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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.

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

WatchKit App Architecture

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Hands on • What are you learning? • WatchKit App • Static & Dynamic Notiﬁcations • Glance

Slide 82

Slide 82 text

Hands on • Two ﬂavours: • checkout kickoff and write code with us • checkout master and follow the explanations

Slide 83

Slide 83 text

Hands on • What are we providing?

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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