This presentation will cover how developers can take advantage of the most beneficial aspects of the watch in their apps, along with optimal ways of using watch frameworks. Looking at current user behavior, I'll pair these habits with key features that any compelling watch app should have. This includes: Watch accessibility Animations Data and file transfer (Watch Connectivity) Optimal battery performance Dictation I'll also take a look at the best uses for complications (widgets on watch home screen), and how to use the ClockKit framework better-suited to developers' needs. This largely differs based on the type of service that developers' apps provide and the talk will cover the most optimal ways to show their users the information that is most useful to them. The audience will be able to walk away with a better idea of what it takes to create a watch app experience that will keep users coming back again and again.

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. 1. FIND A GOOD USE CASEOr don’t build one at all.

7. @kristinathai

8. @kristinathai

9. @kristinathai
THEY'RE LIKE DIET VERSIONS OF THE
FULL SMARTPHONE APP, AND THEY
MAKE NO SENSE ON THE WATCH.
Steve Kovach
“APPLE WATCH APPS ARE BAD” - BUSINESS INSIDER
businessinsider.com/apple-watch-apps-are-bad-2015-5

10. @kristinathai

11. 2. USE ANIMATIONS

12. @kristinathai
Simple Designs

13. @kristinathai

14. @kristinathai

15. @kristinathai

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

17. @kristinathai

18. @kristinathai@IBOutlet var animateButton: WKInterfaceButton!
@IBOutlet var buttonSpacerGroup: WKInterfaceGroup!
var buttonMoved: Bool!
@IBAction func animateMovingButton() {
if (buttonMoved != true) {
animateWithDuration(0.3, animations: {
self.buttonSpacerGroup.setHeight(100)
})
buttonMoved = true
animateButton.setTitle("Reset")
} else {
animateWithDuration(0.3, animations: {
self.buttonSpacerGroup.setHeight(0)
})
buttonMoved = false
animateButton.setTitle("Animate!")
}
}

19. 3. DICTATION IS KEY

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

21. @kristinathai

22. @kristinathai
let suggestions = ["Hello", "Self", "Conference"]
presentTextInputControllerWithSuggestions(suggestions, allowedInputMode: .AllowEmoji)
{ (input) -> Void in
if let userInput = input?.first {
// Do something with user input here
self.contentLabel.setText(userInput as? String)
}
}

23. @kristinathai
presentTextInputControllerWithSuggestions(nil, allowedInputMode: .Plain)
{ (input) -> Void in
if let userInput = input?.first {
// Do something with user input here
self.contentLabel.setText(userInput as? String)
}
}

24. 4. DEVICE-TO-DEVICE
COMMUNICATION

25. WATCH CONNECTIVITY

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

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

28. @kristinathai
WATCH CONNECTIVITY
SENDER AND RECEIVER
applicationData
⌚

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

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

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

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

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

34. 5. CLOCKKIT

35. COMPLICATIONS
CLOCKKIT

36. @kristinathai

37. @kristinathai

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

39. @kristinathai

40. @kristinathai

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

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

43. @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)

44. @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"];

45. DATA POPULATION
CLOCKKIT

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

47. @kristinathai

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

49. @kristinathai
func getTimelineEntriesForComplication(complication: CLKComplication, beforeDate date: NSDate, limit:
Int, withHandler handler: (([CLKComplicationTimelineEntry]?) -> Void)) {
// Call the handler with the timeline entries prior to the given date
handler(nil)
}
2: PREVIOUS TIMELINE ENTRIES

50. @kristinathai
func getTimelineEntriesForComplication(complication: CLKComplication, afterDate date: NSDate, limit:
Int, withHandler handler: (([CLKComplicationTimelineEntry]?) -> Void)) {
// Call the handler with the timeline entries after to the given date
handler(nil)
}
3: LATER TIMELINE ENTRIES

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

52. FETCH NEW DATA
CLOCKKIT

53. @kristinathai
func getNextRequestedUpdateDateWithHandler(handler: (NSDate?) -> Void) {
// Call the handler with the date when you would next like
to be given the opportunity to update your complication content
handler(nil);
}
May be unreliable to give you the date that you want
May exhaust your limited update budget

54. @kristinathai
IN YOUR MAIN IOS PARENT APP
BACKGROUND FETCH
func application(application: UIApplication, performFetchWithCompletionHandler
completionHandler: (UIBackgroundFetchResult) -> Void) {
// use Watch Connectivity to transfer data back to watch in here
getUpdatedWatchComplicationData()
completionHandler(UIBackgroundFetchResult.NewData)
}

55. 6. ACCESSIBILITY = INCLUSIVITY

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

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

58. @kristinathai

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

60. @kristinathai
RESOURCES
ANIMATIONS & DICTATION
▸ http://kristina.io/watchos-2-tutorial-animations-using-groups/
▸ http://natashatherobot.com/watchkit-text-input-dictation-api/
▸ http://develop.watch/text-input-in-watchkit/

61. @kristinathai
RESOURCES
WATCH CONNECTIVITY & ACCESSIBILITY
‣ 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/
‣ https://www.youtube.com/watch?v=nqX2rNbZSyg
(Apple Watch Accessibility by Paul Adam)

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

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