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

▶
apple watch
SMART_READER_LITE
LIVE PREVIEW

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

Jul 12, 2023 140 likes •461 views

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

slide-1
SLIDE 1

Apple Watch

Mobile Application Development in iOS School of EECS Washington State University

Mobile Application Development in iOS 1

slide-2
SLIDE 2

Outline

  • Xcode configuration
  • WatchKit
  • Notifications
  • Complications
  • Sensors

Mobile Application Development in iOS 2

slide-3
SLIDE 3

Xcode Configuration: New Project

Mobile Application Development in iOS 3

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

slide-4
SLIDE 4

Xcode Configuration: Add to Existing Project

Mobile Application Development in iOS 4

File à Newà Target

slide-5
SLIDE 5

WatchKit App and Extension

  • WatchKit App

– Storyboard – Storyboard assets

  • WatchKit Extension

– App code

Mobile Application Development in iOS 5

slide-6
SLIDE 6

Interface Storyboard

Mobile Application Development in iOS 6

slide-7
SLIDE 7

Interface Storyboard

Mobile Application Development in iOS 7

slide-8
SLIDE 8

Interface Storyboard

Mobile Application Development in iOS 8

slide-9
SLIDE 9

Interface Controller

Mobile Application Development in iOS 9

import WatchKit import Foundation class InterfaceController: WKInterfaceController { @IBAction func pageTwoManualTapped() { pushController(withName: "Page Two", context: "Hello Manually") }

  • verride func contextForSegue(withIdentifier segueIdentifier: String)
  • > Any? {

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

InterfaceController.swift

slide-10
SLIDE 10

Page Two Interface Controller

Mobile Application Development in iOS 10

import WatchKit import Foundation class PageTwoInterfaceController: WKInterfaceController { @IBOutlet weak var messageLabel: WKInterfaceLabel!

  • verride func awake(withContext context: Any?) {

super.awake(withContext: context) // Configure interface objects here. if let message = context as? String { messageLabel.setText(message) } } }

PageTwoInterfaceController.swift

slide-11
SLIDE 11

Other Interface Objects

Mobile Application Development in iOS 11

slide-12
SLIDE 12

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]) }

slide-13
SLIDE 13

Notifications

Mobile Application Development in iOS 13

slide-14
SLIDE 14

Notifications

  • watchOS uses same technique as iOS

– Call requestAuthorization on watch – Handle notifications using didReceive 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

Short Look Long Look

slide-15
SLIDE 15

Authorize Notifications

Mobile Application Development in iOS 15

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") } } } }

ExtensionDelegate.swift

slide-16
SLIDE 16

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

slide-17
SLIDE 17

Notification Interfaces

Mobile Application Development in iOS 17

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

slide-18
SLIDE 18

Schedule Notifications

  • Careful

– Make sure Notification Category Name is empty – Or, make sure notifications have same category identifier

Mobile Application Development in iOS 18

slide-19
SLIDE 19

Simulate Push Notification

Mobile Application Development in iOS 19

slide-20
SLIDE 20

Schedule Notification Programmatically

Mobile Application Development in iOS 20 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) } }) }

InterfaceController.swift

slide-21
SLIDE 21

Handle Notifications

Mobile Application Development in iOS 21

import WatchKit import Foundation import UserNotifications class NotificationController: WKUserNotificationInterfaceController { @IBOutlet var dynamicInteractiveLabel: WKInterfaceLabel!

  • verride func didReceive(_ notification: UNNotification) {

let title = notification.request.content.title dynamicInteractiveLabel.setText(title) } }

NotificationController.swift

slide-22
SLIDE 22

Complications

Mobile Application Development in iOS 22

slide-23
SLIDE 23

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

slide-24
SLIDE 24

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

slide-25
SLIDE 25

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

slide-26
SLIDE 26

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 [] } }

slide-27
SLIDE 27

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 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) } }

slide-28
SLIDE 28

Complications: Testing

Mobile Application Development in iOS 28

(1) Configure Complications (2) Choose Complication scheme

slide-29
SLIDE 29

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 face Rotate crown to select

slide-30
SLIDE 30

Sensors

  • CoreMotion framework

– Accelerometer – Gyroscope

  • CoreLocation framework

– GPS

  • HealthKit framework

– Heart rate

Mobile Application Development in iOS 30

slide-31
SLIDE 31

Other Elements

  • Core Data
  • SpriteKit

Mobile Application Development in iOS 31

slide-32
SLIDE 32

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