HOW TO BUILD A COMPELLING WATCH APP

KRISTINA THAI

@kristinathai

@kristinathaiHI. I’M KRISTINA

📱 ⌚ 🍦

HOW TO BUILD A COMPELLING WATCH APP

KRISTINA THAI

HOW TO BUILD A COMPELLING WATCH APP

COMPELLINGevoking interest, attention, or admiration in a powerfully irresistible way

NEW

ACTIONABLE

RESPONSIVE

GLANCEABLE

NEW

ACTIONABLE RESPONSIVEGLANCEABLE

1. FIND A GOOD USE CASEOr don’t build one at all.

@kristinathai

@kristinathai

@kristinathai

2. QUICK ACTIONS ARE KEY

@kristinathai

http://www.imore.com/apple-watch-usage-survey-study-2015-q2

@kristinathai

@kristinathai

let suggestions = [“Hello world!”, “I’m on my way"] presentTextInputControllerWithSuggestions(suggestions, allowedInputMode: .AllowEmoji)

{ (input) -> Void in if let userInput = input?.first { // Do something with user input here self.contentLabel.setText(userInput as? String) } }

@kristinathai

NEW

@kristinathai

3. USE ANIMATIONS

@kristinathai

Simple Designs

@kristinathai

NEW

@kristinathai

@kristinathai

@kristinathai

@kristinathai

@IBOutlet var spacerGroup: WKInterfaceGroup! @IBAction func animate() { animateWithDuration(0.3, animations: { self.spacerGroup.setWidth(0) }) }

@IBAction func reset() { self.spacerGroup.setWidth(100) }

@kristinathai

4. DEVICE-TO-DEVICE COMMUNICATION

WATCH CONNECTIVITY

@kristinathaiWATCH CONNECTIVITY

WCSESSION

▸ Facilitates communication between WatchKit extension & companion iOS app

▸ Needs to be configured on both devices

@kristinathaiWATCH CONNECTIVITY

WCSESSION CONFIGURATIONimport WatchConnectivity

class InterfaceController: WKInterfaceController, WCSessionDelegate {

}

private let session : WCSession? = WCSession.isSupported() ? WCSession.defaultSession() : nil

override init() { super.init() session?.delegate = self session?.activateSession() }

@kristinathaiWATCH CONNECTIVITY

SENDER AND RECEIVER

applicationData⌚

@kristinathaiWATCH CONNECTIVITY

SENDER AND RECEIVER

applicationDatatransferUserInfo( )⌚

@kristinathaiWATCH CONNECTIVITY

SENDER AND RECEIVER

applicationDatatransferUserInfo( ) didReceiveUserInfo( )📲⌚

transferUserInfo( ) didReceiveUserInfo(📲 ⌚

applicationData)

@kristinathaiWATCH CONNECTIVITY

COMMUNICATION CATEGORIES

Background transfers Interactive messaging

Information isn’t needed immediately

Information needed immediately

Operating system determines the most suitable time to send

the data

Requires reachable state

Content is queued for transfer

@kristinathaiWATCH CONNECTIVITY

SENDER AND RECEIVERS - BACKGROUND TRANSFERS

Data Type Sender Receiver

Dictionary (overwrite latest data) updateApplicationContext didReceiveApplicationContext

Dictionary (keep all data - FIFO) transferUserInfo didReceiveUserInfo

File, Dictionary (metadata) transferFile didReceiveFile

@kristinathaiWATCH CONNECTIVITY

SENDER AND RECEIVERS - INTERACTIVE MESSAGING

Data Type Sender Receiver

Dictionary sendMessage didReceiveMessage

NSData sendMessageData didReceiveMessageData

@kristinathaiWATCH CONNECTIVITY

2 NEW WATCH CONNECTIVITY PROPERTIES

‣ hasContentPending

‣ Checks if session data has been received in background that needs to be delivered

‣ remainingComplicationUserInfoTransfers

‣ Gives you remaining number of times you can send complication data from iOS app to WatchKit extension

NEW

5. CLOCKKIT

COMPLICATIONSCLOCKKIT

@kristinathai

@kristinathai

@kristinathai

https://theswiftdev.com/2016/04/28/clockkit-complications-cheat-sheet/

CLKComplicationTemplate

@kristinathai

@kristinathai

@kristinathaiCLOCKKIT

TEXT PROVIDERS

▸ Smartly truncate & display text in watch complications

▸ Available for most data types

@kristinathaiCLOCKKIT - TEXT PROVIDERS

CLKSimpleTextProvider

let textProvider =

CLKSimpleTextProvider(text: "your string here", shortText: "string")

@kristinathaiCLOCKKIT - TEXT PROVIDERS

CLKDateTextProviderThursday, January 14, 2016

Thursday, January 14

Thursday, Jan 14

Thurs, Jan 14

Jan 14

14

let textProvider = CLKDateTextProvider(date: NSDate(), units: .Day)

@kristinathaiCLOCKKIT - TEXT PROVIDERS

CLKTextProvider - Custom text provider

CLKSimpleTextProvider *textProvider1 = [CLKSimpleTextProvider textProviderWithText:@"your string here" shortText:@"string"];

CLKTextProvider *textProvider = [CLKTextProvider textProviderWithFormat:@"%@ & %@", textProvider1, textProvider2];

CLKSimpleTextProvider *textProvider2 = [CLKSimpleTextProvider textProviderWithText:@"your string here" shortText:@"string"];

DATA POPULATIONCLOCKKIT

@kristinathaiCOMPLICATION TIMELINE

https://developer.apple.com/videos/play/wwdc2015/209/

@kristinathai

@kristinathai

Optional

NEW

@kristinathai

// MARK: - Timeline Population

func getCurrentTimelineEntryForComplication(complication: CLKComplication, withHandler handler: ((CLKComplicationTimelineEntry?) -> Void)) {

// Call the handler with the current timeline entry

handler(nil)

}

1: CURRENT TIMELINE ENTRY

6. ACCESSIBILITY = INCLUSIVITY

@kristinathai

15% OF THE WORLD’S POPULATION LIVES WITH SOME FORM OF DISABILITY

World Health Organization

WORLD REPORT ON DISABILITY

http://www.who.int/disabilities/world_report/2011/report/en/

@kristinathai

https://twitter.com/dstorey/status/649636741033279488

@kristinathai

@kristinathai

@IBOutlet var userInputButton: WKInterfaceButton! override func awakeWithContext(context: AnyObject?) { super.awakeWithContext(context) // Configure interface objects here. userInputButton.setAccessibilityLabel("Take user input") userInputButton.setAccessibilityHint("Open dictation") }

@kristinathai

NEW

@kristinathai

enum WKHapticType : Int { case Notification case DirectionUp case DirectionDown case Success case Failure case Retry case Start case Stop case Click}

@kristinathai

playHaptic(.Notification)

@kristinathaiRESOURCES

ANIMATIONS & TEXT INPUT

▸ http://kristina.io/watchos-2-tutorial-animations-using-groups/

▸ http://natashatherobot.com/watchkit-text-input-dictation-api/

@kristinathaiRESOURCES

WATCH CONNECTIVITY

‣ http://kristina.io/watchos-2-how-to-communicate-between-devices-using-watch-connectivity/

‣ http://kristina.io/watchos-2-tutorial-using-sendmessage-for-instantaneous-data-transfer-watch-connectivity-1/

‣ http://kristina.io/watchos-2-tutorial-using-application-context-to-transfer-data-watch-connectivity-2/

@kristinathaiRESOURCES

CLOCKKIT

▸ http://kristina.io/clockkit-tutorial-add-complication-to-an-already-existing-watch-project-clockkit-1/

▸ http://kristina.io/clockkit-deep-dive-text-providers-clockkit-2/

▸ http://code.tutsplus.com/tutorials/an-introduction-to-clockkit--cms-24247

▸ https://theswiftdev.com/2016/04/28/clockkit-complications-cheat-sheet/

@kristinathaiRESOURCES

ACCESSIBILITY

‣ https://www.youtube.com/watch?v=nqX2rNbZSyg (Apple Watch Accessibility by Paul Adam)

‣ http://www.sneakycrab.com/blog/2015/6/22/haptic-feedback-with-the-taptic-engine-in-watchkit-and-watchos-2-wkinterfacedevice-and-wkhaptic

THANKS! @kristinathai

me@kristina.io

kristina.io