apple watch - eecs.wsu.eduholder/courses/mad/slides/15-watch.pdf · apple watch mobile application...
TRANSCRIPT
![Page 1: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/1.jpg)
Apple WatchMobile Application Development in iOS
School of EECS
Washington State University
Mobile Application Development in iOS 1
![Page 2: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/2.jpg)
Outline
• Xcode configuration
• WatchKit
• Notifications
• Complications
• Sensors
Mobile Application Development in iOS 2
![Page 3: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/3.jpg)
Xcode Configuration:New Project
Mobile Application Development in iOS 3
New in watchOS 6 (released Sep 2019):Independent watchOS apps
![Page 4: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/4.jpg)
Xcode Configuration:Add to Existing Project
Mobile Application Development in iOS 4
File à Newà Target
![Page 5: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/5.jpg)
WatchKit App and Extension
• WatchKit App
– Storyboard
– Storyboard assets
• WatchKit Extension
– App code
Mobile Application Development in iOS 5
![Page 6: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/6.jpg)
Interface Storyboard
Mobile Application Development in iOS 6
![Page 7: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/7.jpg)
Interface Storyboard
Mobile Application Development in iOS 7
![Page 8: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/8.jpg)
Interface Storyboard
Mobile Application Development in iOS 8
![Page 9: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/9.jpg)
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 10: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/10.jpg)
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
![Page 11: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/11.jpg)
Other Interface Objects
Mobile Application Development in iOS 11
![Page 12: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/12.jpg)
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])
}
![Page 13: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/13.jpg)
Notifications
Mobile Application Development in iOS 13
![Page 14: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/14.jpg)
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
![Page 15: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/15.jpg)
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
![Page 16: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/16.jpg)
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
![Page 17: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/17.jpg)
Notification Interfaces
Mobile Application Development in iOS 17
Interface Load Order: (1) Dynamic Interactive, (2) Dynamic, (3) Static
![Page 18: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/18.jpg)
Schedule Notifications
• Careful
– Make sure Notification
Category Name is empty
– Or, make sure
notifications have same
category identifier
Mobile Application Development in iOS 18
![Page 19: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/19.jpg)
Simulate Push Notification
Mobile Application Development in iOS 19
![Page 20: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/20.jpg)
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
![Page 21: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/21.jpg)
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
![Page 22: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/22.jpg)
Complications
Mobile Application Development in iOS 22
![Page 23: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/23.jpg)
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
![Page 24: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/24.jpg)
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
![Page 25: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/25.jpg)
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
![Page 26: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/26.jpg)
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 []
}
}
![Page 27: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/27.jpg)
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)
}}
![Page 28: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/28.jpg)
Complications: Testing
Mobile Application Development in iOS 28
(1) Configure Complications
(2) Choose Complication scheme
![Page 29: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/29.jpg)
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
![Page 30: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/30.jpg)
Sensors
• CoreMotion framework
– Accelerometer
– Gyroscope
• CoreLocation framework
– GPS
• HealthKit framework
– Heart rate
Mobile Application Development in iOS 30
![Page 31: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/31.jpg)
Other Elements
• Core Data
• SpriteKit
Mobile Application Development in iOS 31
![Page 32: Apple Watch - eecs.wsu.eduholder/courses/MAD/slides/15-Watch.pdf · Apple Watch Mobile Application Development in iOS School of EECS Washington State University Mobile Application](https://reader034.vdocuments.mx/reader034/viewer/2022043014/5fafc5c039536a244d0be7de/html5/thumbnails/32.jpg)
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