Apple Watch Mobile Application Development in iOS School of EECS - PowerPoint PPT Presentation

Apple Watch Mobile 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 New in watchOS 6 (released Sep 2019): Independent watchOS apps Mobile Application Development in iOS 3

Xcode Configuration: Add to Existing Project File à New à Target Mobile Application Development in iOS 4

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 InterfaceController.swift import WatchKit import 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 } } Mobile Application Development in iOS 9

Page Two Interface Controller PageTwoInterfaceController.swift import WatchKit import 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) } } } Mobile Application Development in iOS 10

Other Interface Objects Mobile Application Development in iOS 11

Alerts and Action Sheets @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]) } Mobile Application Development in iOS 12

Notifications Mobile Application Development in iOS 13

Notifications Short Look watchOS uses same technique as iOS • – Call requestAuthorization on watch – Handle notifications using didReceive Long Look and 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

Authorize Notifications ExtensionDelegate.swift import WatchKit import 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") } } } } Mobile Application Development in iOS 15

Notification Interfaces 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 Mobile Application Development in iOS 16

Notification Interfaces Interface Load Order: (1) Dynamic Interactive, (2) Dynamic, (3) Static Mobile Application Development in iOS 17

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 InterfaceController.swift import UserNotifications func scheduleNotification() { // Same as in Notifications lecture notes let 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 now let trigger = UNTimeIntervalNotificationTrigger(timeInterval: 5.0, repeats: false) // Create request let request = UNNotificationRequest(identifier: "NowPlusFive", content: content, trigger: trigger) // Schedule request let center = UNUserNotificationCenter.current() center.add(request, withCompletionHandler: { (error) in if let err = error { print(err.localizedDescription) } }) } Mobile Application Development in iOS 20

Handle Notifications NotificationController.swift import WatchKit import Foundation import UserNotifications class NotificationController: WKUserNotificationInterfaceController { @IBOutlet var dynamicInteractiveLabel: WKInterfaceLabel! override func didReceive(_ notification: UNNotification) { let title = notification.request.content.title dynamicInteractiveLabel.setText(title) } } Mobile Application Development in iOS 21

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 import ClockKit class ComplicationController: NSObject, CLKComplicationDataSource { func getSupportedTimeTravelDirections(for complication: CLKComplication, withHandler handler: @escaping(CLKComplicationTimeTravelDirections) -> Void) { handler([.forward, .backward]) // or .forward, or .backward, or [] } } Mobile Application Development in iOS 26

Complications func getCurrentTimelineEntry(for complication: CLKComplication, withHandler handler: @escaping (CLKComplicationTimelineEntry?) -> Void) { if (complication.family == .graphicCircular) { // Construct template with image, open gauge, and text let 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) } } Mobile Application Development in iOS 27

Complications: Testing (1) Configure Complications (2) Choose Complication scheme Mobile Application Development in iOS 28

Complications: Testing (3) Customize clock face Deep Customize Goto Press clock Swipe face to end Goto Note: Shift-Command-1/2 clock Rotate to set shallow/deep press face crown in simulator. to select Mobile Application Development in iOS 29

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