watchOS 3 talk about various ways to build a compelling watch app for Apple Watch. Includes how-tos on accessibility, quick actions, watch connectivity, animation and watch complications.

1. HOW TO BUILD A
COMPELLING WATCH APP
KRISTINA THAI
@kristinathai

2. @kristinathai
HI. I’M KRISTINA
📱 ⌚ 🍦

3. HOW TO BUILD A
COMPELLING WATCH APP
KRISTINA THAI

4. HOW TO BUILD A
COMPELLING WATCH APP

5. COMPELLING
evoking interest, attention, or admiration in a powerfully irresistible way

6. NEW
ACTIONABLE
RESPONSIVE
GLANCEABLE

7. NEW
ACTIONABLE RESPONSIVEGLANCEABLE

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

9. @kristinathai

10. @kristinathai

11. @kristinathai

12. 2. QUICK ACTIONS ARE KEY

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

14. @kristinathai

15. @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)
}
}

16. @kristinathai
NEW

17. @kristinathai

18. 3. USE ANIMATIONS

19. @kristinathai
Simple Designs

20. @kristinathai
NEW

21. @kristinathai

22. @kristinathai

23. @kristinathai

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

25. @kristinathai

26. 4. DEVICE-TO-DEVICE
COMMUNICATION

27. WATCH CONNECTIVITY

28. @kristinathai
WATCH CONNECTIVITY
WCSESSION
▸ Facilitates communication between WatchKit extension & companion iOS app
▸ Needs to be configured on both devices

29. @kristinathai
WATCH CONNECTIVITY
WCSESSION CONFIGURATION
import WatchConnectivity
class InterfaceController: WKInterfaceController, WCSessionDelegate {
}
private let session : WCSession? = WCSession.isSupported() ?
WCSession.defaultSession() : nil
override init() {
super.init()
session?.delegate = self
session?.activateSession()
}

30. @kristinathai
WATCH CONNECTIVITY
SENDER AND RECEIVER
applicationData
⌚

31. @kristinathai
WATCH CONNECTIVITY
SENDER AND RECEIVER
applicationDatatransferUserInfo( )
⌚

32. @kristinathai
WATCH CONNECTIVITY
SENDER AND RECEIVER
applicationDatatransferUserInfo( ) didReceiveUserInfo( )
📲⌚
transferUserInfo( ) didReceiveUserInfo(
📲 ⌚applicationData)

33. @kristinathai
WATCH 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

34. @kristinathai
WATCH 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

35. @kristinathai
WATCH CONNECTIVITY
SENDER AND RECEIVERS - INTERACTIVE MESSAGING
Data Type Sender Receiver
Dictionary sendMessage didReceiveMessage
NSData sendMessageData didReceiveMessageData

36. @kristinathai
WATCH 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

37. 5. CLOCKKIT

38. COMPLICATIONS
CLOCKKIT

39. @kristinathai

40. @kristinathai

41. @kristinathai
https://theswiftdev.com/2016/04/28/clockkit-complications-cheat-sheet/
CLKComplicationTemplate

42. @kristinathai

43. @kristinathai

44. @kristinathai
CLOCKKIT
TEXT PROVIDERS
▸ Smartly truncate & display text in watch complications
▸ Available for most data types

45. @kristinathai
CLOCKKIT - TEXT PROVIDERS
CLKSimpleTextProvider
let textProvider =
CLKSimpleTextProvider(text: "your string here", shortText: "string")

46. @kristinathai
CLOCKKIT - TEXT PROVIDERS
CLKDateTextProvider
Thursday, January 14, 2016
Thursday, January 14
Thursday, Jan 14
Thurs, Jan 14
Jan 14
14
let textProvider = CLKDateTextProvider(date: NSDate(), units: .Day)

47. @kristinathai
CLOCKKIT - 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"];

48. DATA POPULATION
CLOCKKIT

49. @kristinathai
COMPLICATION TIMELINE
https://developer.apple.com/videos/play/wwdc2015/209/

50. @kristinathai

51. @kristinathai
Optional
NEW

52. @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

53. 6. ACCESSIBILITY = INCLUSIVITY

54. @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/

55. @kristinathai
https://twitter.com/dstorey/status/649636741033279488

56. @kristinathai

57. @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")
}

58. @kristinathai
NEW

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

60. @kristinathai
playHaptic(.Notification)

61. @kristinathai
RESOURCES
ANIMATIONS & TEXT INPUT
▸ http://kristina.io/watchos-2-tutorial-animations-using-groups/
▸ http://natashatherobot.com/watchkit-text-input-dictation-api/

62. @kristinathai
RESOURCES
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/

63. @kristinathai
RESOURCES
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/

64. @kristinathai
RESOURCES
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

65. THANKS!
@kristinathai
me@kristina.io
kristina.io