apple watch - eecs.wsu.eduholder/courses/mad/slides/15-watch.pdf · apple watch mobile application...

Apple WatchMobile Application Development in iOS

School of EECS

Washington State University

Mobile Application Development in iOS 1

Outline

• Xcode configuration

• WatchKit

• Notifications

• Complications

• Sensors

Mobile Application Development in iOS 2

Xcode Configuration:New Project

Mobile Application Development in iOS 3

New in watchOS 6 (released Sep 2019):Independent watchOS apps

Xcode Configuration:Add to Existing Project

Mobile Application Development in iOS 4

File à Newà Target

WatchKit App and Extension

• WatchKit App

– Storyboard

– Storyboard assets

• WatchKit Extension

– App code

Mobile Application Development in iOS 5

Interface Storyboard

Mobile Application Development in iOS 6

Interface Storyboard

Mobile Application Development in iOS 7

Interface Storyboard

Mobile Application Development in iOS 8

Interface Controller

Mobile Application Development in iOS 9

import WatchKitimport Foundation

class InterfaceController: WKInterfaceController {

@IBAction func pageTwoManualTapped() {pushController(withName: "Page Two", context: "Hello Manually")

}

override func contextForSegue(withIdentifier segueIdentifier: String)-> Any? {

if segueIdentifier == "toPageTwoAuto" {return "Hello Automatically"

}return nil

}}

InterfaceController.swift

Page Two Interface Controller

Mobile Application Development in iOS 10

import WatchKitimport Foundation

class PageTwoInterfaceController: WKInterfaceController {

@IBOutlet weak var messageLabel: WKInterfaceLabel!

override func awake(withContext context: Any?) {super.awake(withContext: context)// Configure interface objects here.if let message = context as? String {

messageLabel.setText(message)}

}}

PageTwoInterfaceController.swift

Other Interface Objects

Mobile Application Development in iOS 11

Alerts and Action Sheets

Mobile Application Development in iOS 12

@IBAction func alertTapped() {let action1 = WKAlertAction(title: "Yes",

style: .default, handler: {print("Yes")})let action2 = WKAlertAction(title: "No",

style: .destructive, handler: {print("No")})presentAlert(withTitle: "Alert", message: "Are you okay?",

preferredStyle: .sideBySideButtonsAlert,actions: [action2,action1])

}

Notifications

Mobile Application Development in iOS 13

Notifications• watchOS uses same technique as iOS

– Call requestAuthorization on watch

– Handle notifications using didReceiveand willPresent

– Schedule UNNotificationRequest using UNUserNotificationCenter.add

– Remote and background notifications can now be sent directly to watch

• Watch first displays Short Look, then Long Look

Mobile Application Development in iOS 14

Short Look

Long Look

Authorize Notifications

Mobile Application Development in iOS 15

import WatchKitimport UserNotifications

class ExtensionDelegate: NSObject, WKExtensionDelegate {

func applicationDidFinishLaunching() {// Perform any final initialization of your application.let center = UNUserNotificationCenter.current()center.requestAuthorization(options: [.alert]){ (granted, error) in

if granted {print("notifications allowed")

} else {print("notifications not allowed")

}}

}}

ExtensionDelegate.swift

Notification Interfaces

Mobile Application Development in iOS 16

• Static Interface

– Simple elements (fast)

• Dynamic Interface

– Outlets in NotificationController

– No interactive elements

– If takes too long, uses Static

• Dynamic Interactive Interface

– Allows interactive elements

– Outlets/Actions in NotificationController

Notification Interfaces

Mobile Application Development in iOS 17

Interface Load Order: (1) Dynamic Interactive, (2) Dynamic, (3) Static

Schedule Notifications

• Careful

– Make sure Notification

Category Name is empty

– Or, make sure

notifications have same

category identifier

Mobile Application Development in iOS 18

Simulate Push Notification

Mobile Application Development in iOS 19

Schedule Notification Programmatically

Mobile Application Development in iOS 20

import UserNotifications

func scheduleNotification() { // Same as in Notifications lecture noteslet content = UNMutableNotificationContent()content.title = "Hey!"content.body = "What’s up?"content.userInfo["message"] = "Yo!"// If Notification Category set in Storyboard, then set here too// content.categoryIdentifier = "myCategory"

// Configure trigger for 5 seconds from nowlet trigger = UNTimeIntervalNotificationTrigger(timeInterval: 5.0, repeats: false)// Create requestlet request = UNNotificationRequest(identifier: "NowPlusFive",

content: content, trigger: trigger)// Schedule requestlet center = UNUserNotificationCenter.current()center.add(request, withCompletionHandler: { (error) in

if let err = error {print(err.localizedDescription)

}})

}

InterfaceController.swift

Handle Notifications

Mobile Application Development in iOS 21

import WatchKitimport Foundationimport UserNotifications

class NotificationController: WKUserNotificationInterfaceController {

@IBOutlet var dynamicInteractiveLabel: WKInterfaceLabel!

override func didReceive(_ notification: UNNotification) {let title = notification.request.content.titledynamicInteractiveLabel.setText(title)

}

}

NotificationController.swift

Complications

Mobile Application Development in iOS 22

Complications

• ClockKit framework

• CLKComplicationDataSource

• Provide data for a specific date/time

• Time Travel allows user to view past, present and future complication data (e.g., appointments)

• See different styles at developer.apple.com/design/human-interface-guidelines/watchos/app-architecture/complications

Mobile Application Development in iOS 23

Required Delegate Methods

• In ComplicationController.swift

– getSupportedTimeTravelDirections(complication, handler)

• Send .backward, .forward, neither, or both to handler

– getCurrentTimelineEntry(complication, handler)

• Create and pass time line entry to handler

Mobile Application Development in iOS 24

getCurrentTimeLineEntry

• For desired complication families (.circularSmall, etc.)

– Create a CLKComplicationTemplate, e.g., • CLKComplicationTemplateGraphicCircularImage

• CLKComplicationTemplateCircularSmallSimpleText

– Create and set providers for template, e.g.,• CLKFullColorImageProvider(UIImage)

• CLKSimpleTextProvider(String)

– Create time line entry for template at date

• CLKComplicationTimelineEntry(Date, CLKComplicationTemplate)

– Send entry to handler

Mobile Application Development in iOS 25

Complications

Mobile Application Development in iOS 26

import ClockKit

class ComplicationController: NSObject, CLKComplicationDataSource {

func getSupportedTimeTravelDirections(for complication: CLKComplication, withHandler handler: @escaping(CLKComplicationTimeTravelDirections)

-> Void) {handler([.forward, .backward]) // or .forward, or .backward, or []

}

}

Complications

Mobile Application Development in iOS 27

func getCurrentTimelineEntry(for complication: CLKComplication, withHandler handler: @escaping (CLKComplicationTimelineEntry?) -> Void) {

if (complication.family == .graphicCircular) {// Construct template with image, open gauge, and textlet template = CLKComplicationTemplateGraphicCircularImage()let image = UIImage(named: "Complication/Graphic Circular")template.imageProvider = CLKFullColorImageProvider(fullColorImage: image!)// Create the timeline entry.let entry = CLKComplicationTimelineEntry(date: Date(),

complicationTemplate: template)handler(entry)

} else {handler(nil)

}}

Complications: Testing

Mobile Application Development in iOS 28

(1) Configure Complications

(2) Choose Complication scheme

Complications: Testing

Mobile Application Development in iOS 29

(3) Customize clock face

Note: Shift-Command-1/2 to set shallow/deep press in simulator.

Goto clock face

Deep Press Customize

Swipe to end

Goto clock faceRotate

crown to select

Sensors

• CoreMotion framework

– Accelerometer

– Gyroscope

• CoreLocation framework

– GPS

• HealthKit framework

– Heart rate

Mobile Application Development in iOS 30

Other Elements

• Core Data

• SpriteKit

Mobile Application Development in iOS 31

Resources

• WatchKit framework

– developer.apple.com/documentation/watchkit

– Notifications• developer.apple.com/documentation/watchkit/adding_notifications_to_your_watchos_app

• ClockKit framework

– developer.apple.com/documentation/clockkit

– Complications• developer.apple.com/documentation/clockkit/adding_a_complication_to_your_watchos_app

• HealthKit framework

– developer.apple.com/documentation/healthkit

Mobile Application Development in iOS 32