Watch App: คืออะไร, การพัฒนาสำหรับ Apple Watch และ Wear OS

Watch App คืออะไร

Watch App คือแอปพลิเคชันที่ออกแบบมาเพื่อทำงานบนอุปกรณ์สวมใส่: Apple Watch (watchOS) และสมาร์ทวอทช์บน Wear OS ความแตกต่างหลักจากแอปพลิเคชันมือถือคือรูปแบบปัจจัย หน้าจอนาฬิกามีเส้นทแยงมุม 1.5–2 นิ้ว (เทียบกับ 6–7 นิ้วของสมาร์ทโฟน) ซึ่งจำกัดปริมาณข้อมูลที่แสดงพร้อมกัน การโต้ตอบกับแอปพลิเคชันสั้น — ผู้ใช้ตรวจสอบเวลา การแจ้งเตือน อัตราการเต้นของหัวใจ หรือจำนวนก้าวใน 5–15 วินาที จากนั้นลดมือลง

สถานการณ์หลักของ Watch App: ตัวติดตามฟิตเนส (ก้าว อัตราการเต้นของหัวใจ แคลอรี่ การนอนหลับ) การแจ้งเตือน (ข้อความ สายเรียกเข้า ปฏิทิน) การดำเนินการด่วน (เริ่มจับเวลา ตอบข้อความด้วยเสียง ควบคุมเพลง) คู่หู (รีโมทกล้อง กุญแจรถ ชำระเงิน NFC) ตามข้อมูลของ Counterpoint Research (2026) ตลาดสมาร์ทวอทช์ทั่วโลกเกิน 150 ล้านเครื่องต่อปี โดย Apple Watch ครองส่วนแบ่ง 35% Wear OS 20% ที่เหลือคือ Fitbit, Garmin และอื่นๆ

ข้อจำกัดของ Watch App: หน้าจอเล็ก (สูงสุด 2 นิ้ว) อายุการใช้งานแบตเตอรี่จำกัด (สูงสุด 18–24 ชั่วโมง) ไม่มีแป้นพิมพ์เต็มรูปแบบ (ป้อนข้อมูลด้วยเสียงหรือคำบอกเท่านั้น) ข้อจำกัดงานพื้นหลัง (watchOS — สูงสุด 10 นาที, Wear OS — สูงสุด 5 นาที) จำเป็นต้องซิงค์กับโทรศัพท์สำหรับฟังก์ชันส่วนใหญ่ เริ่มตั้งแต่ watchOS 6 (2019) และ Wear OS 3 (2022) แอปพลิเคชันสามารถทำงานอย่างอิสระผ่านโมดูล LTE โดยไม่ต้องจับคู่กับโทรศัพท์

Apple Watch: watchOS และ SwiftUI

watchOS คือระบบปฏิบัติการของ Apple สำหรับสมาร์ทวอทช์ ซึ่งใช้ iOS เป็นพื้นฐานและใช้เฟรมเวิร์กเดียวกัน (Foundation, UIKit ในเวอร์ชันที่ปรับตัว, SwiftUI) การพัฒนาทำใน Xcode ด้วย Swift เฟรมเวิร์ก UI หลักคือ SwiftUI ซึ่งมีส่วนประกอบเฉพาะของ watchOS: TabView แบบหมุน, NavigationStack, Digital Crown ผ่าน DigitalCrownModifier, เมนูกดค้าง

การนำทางบน watchOS สร้างขึ้นบนกระบวนทัศน์แบบลำดับชั้น องค์ประกอบหลัก: สแต็คลำดับชั้น (NavigationStack ที่กลับอัตโนมัติ) การนำเสนอแบบโมดอล (sheet) การนำทางแบบหน้า (ผ่าน TabView กับ .tabViewStyle(.page)) เมนูบริบทเมื่อกดค้าง Digital Crown ช่วยให้เลื่อนเนื้อหาและเปลี่ยนค่า ท่าทาง: แตะ กดค้าง ปัด Force Touch (จนถึง watchOS 7) หมุน Digital Crown

เฟรมเวิร์กหลักของ watchOS: HealthKit (เข้าถึงข้อมูลสุขภาพ — อัตราการเต้นของหัวใจ ก้าว การนอนหลับ ECG), CoreMotion (มาตรความเร่ง, ไจโรสโคป), WatchConnectivity (แลกเปลี่ยนข้อมูลกับ iPhone), ClockKit (ส่วนประกอบบนหน้าปัด), BackgroundTasks (อัปเดตพื้นหลังสูงสุด 10 นาที), ARKit (เอฟเฟกต์ FaceTime บน Series 9+) Watch App สามารถเป็นแบบเต็มรูปแบบ (แอปแยกใน dock) หรือส่วนขยาย (พร้อมกันกับเวอร์ชัน iOS)

Wear OS: Kotlin และ Compose

Wear OS คือแพลตฟอร์มของ Google สำหรับสมาร์ทวอทช์ ซึ่งใช้ Android เป็นพื้นฐาน การพัฒนาสมัยใหม่ทำด้วย Kotlin กับ Jetpack Compose for Wear OS — ชุดส่วนประกอบที่ปรับให้เหมาะสมสำหรับหน้าจอกลม: Scaffold, ScalingLazyColumn, Chip, Button, Card, Stepper แตกต่างจาก Compose บนมือถือ Wear OS ใช้ตัวปรับแต่งของตัวเอง: scrollable สำหรับเลื่อนแนวตั้ง, swipable สำหรับปัด, RotaryInput สำหรับควบคุมเม็ดมะยม

การนำทางบน Wear OS ใช้แผงด้านข้าง (SwipeToDismiss) และหน้าจอการ์ด องค์ประกอบหลัก: SwipeDismissableNavHost (การนำทางด้วยการปัดกลับ) การวางตำแหน่งหน้าจอ (ScalingLazyColumn สำหรับรายการ) การหมุนแนวนอน (Carousel) หน้าปัดนาฬิกา (WatchFace ผ่าน WatchFaceService) Google แนะนำให้ใช้การปัดด้านข้างเพื่อกลับและการเลื่อนแนวตั้งสำหรับรายการ ปุ่มเปิดปิดบนนาฬิกาจะเปิดรายการแอปล่าสุด

สุขภาพและเซ็นเซอร์บน Wear OS: Health Services API (ก้าว อัตราการเต้นของหัวใจ แคลอรี่ การนอนหลับ SpO2 ผ่านผู้ให้บริการข้อมูล), SensorManager (มาตรความเร่ง, ไจโรสโคป, บารอมิเตอร์, แมกนีโตมิเตอร์), Location Services (GPS ผ่าน FusedLocationProvider) Wear OS 5+ รองรับการติดตามการวิ่ง เดิน ปั่นจักรยาน และว่ายน้ำ พร้อมตรวจจับประเภทกิจกรรมอัตโนมัติ ข้อมูลซิงค์กับ Google Fit ผ่าน Health Connect

ตัวอย่างโค้ด: Swift สำหรับ Apple Watch

มาดูแอปพลิเคชันติดตามอัตราการเต้นของหัวใจสำหรับ Apple Watch โดยใช้ SwiftUI และ HealthKit

import SwiftUI
import HealthKit

// โมเดลข้อมูลอัตราการเต้นของหัวใจ
struct HeartRateData: Identifiable {
    let id = UUID()
    let bpm: Double
    let date: Date
}

// ViewModel สำหรับ HealthKit
@Observable
final class HealthViewModel {
    private let healthStore = HKHealthStore()
    var currentHeartRate: Double = 0
    var isAuthorized: Bool = false

    func requestAuthorization() {
        guard let heartRateType = HKQuantityType.quantityType(forIdentifier: .heartRate)
        else { return }
        let types = Set([heartRateType])
        healthStore.requestAuthorization(toShare: nil, read: types) { success, _ in
            Task { @MainActor in
                self.isAuthorized = success
                if success { self.startHeartRateQuery() }
            }
        }
    }

    func startHeartRateQuery() {
        guard let heartRateType = HKQuantityType.quantityType(forIdentifier: .heartRate)
        else { return }
        let query = HKObserverQuery(
            sampleType: heartRateType, predicate: nil
        ) { [weak self] _, _, _ in
            self?.fetchLatestHeartRate()
        }
        healthStore.execute(query)
    }

    private func fetchLatestHeartRate() {
        guard let heartRateType = HKQuantityType.quantityType(forIdentifier: .heartRate)
        else { return }
        let sort = NSSortDescriptor(key: HKSampleSortIdentifierStartDate, ascending: false)
        let query = HKSampleQuery(
            sampleType: heartRateType, predicate: nil,
            limit: 1, sortDescriptors: [sort]
        ) { _, samples, _ in
            guard let sample = samples?.first as? HKQuantitySample else { return }
            let bpm = sample.quantity.doubleValue(for: HKUnit.count().unitDivided(by: .minute()))
            Task { @MainActor in
                self.currentHeartRate = bpm
            }
        }
        healthStore.execute(query)
    }
}

// หน้าจอหลัก
struct HeartRateView: View {
    @State private var viewModel = HealthViewModel()

    var body: some View {
        VStack {
            Image(systemName: "heart.fill")
                .foregroundColor(.red)
                .font(.largeTitle)

            Text("\(Int(viewModel.currentHeartRate))")
                .font(.system(size: 60, weight: .bold, design: .rounded))
                .foregroundColor(.red)

            Text("BPM")
                .font(.caption)
                .foregroundColor(.secondary)
        }
        .padding()
        .onAppear(perform: viewModel.requestAuthorization)
    }
}

ประเด็นสำคัญ: HKHealthStore ขอเข้าถึงข้อมูล HealthKit; HKObserverQuery แจ้งเตือนการเปลี่ยนแปลงอัตราการเต้นของหัวใจแบบเรียลไทม์; HKSampleQuery รับค่าล่าสุด Watch App อัปเดต UI โดยอัตโนมัติเมื่อ currentHeartRate เปลี่ยนไปด้วย @Observable HealthKit ประมวลผลข้อมูลในเครื่องบนอุปกรณ์ — ไม่จำเป็นต้องขอข้อมูลจากเซิร์ฟเวอร์

ตัวอย่างโค้ด: Kotlin สำหรับ Wear OS

แอปพลิเคชันที่คล้ายกันสำหรับ Wear OS ด้วย Kotlin กับ Jetpack Compose และ Health Services API

// MainActivity.kt
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.wear.compose.material.*
import androidx.wear.compose.foundation.arc.BasicArcParams
import com.google.android.horologist.health.HealthService

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WearAppTheme {
                HeartRateScreen()
            }
        }
    }
}

@Composable
fun HeartRateScreen() {
    var heartRate by remember { mutableIntStateOf(0) }
    var isConnected by remember { mutableStateOf(false) }

    LaunchedEffect(Unit) {
        // HealthService — API สำหรับเข้าถึงเซ็นเซอร์
        val healthService = HealthService()
        healthService.connect().onSuccess {
            isConnected = true
        }
    }

    Scaffold(
        timeText = { TimeText() },
        vignette = { Vignette(vignettePosition = VignettePosition.TopAndBottom) }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .scrollable(state = ScrollState),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "อัตราการเต้นของหัวใจ",
                modifier = Modifier.size(40.dp),
                tint = MaterialTheme.colors.error
            )

            Text(
                text = heartRate.toString(),
                style = MaterialTheme.typography.display1
            )
            Text(
                text = "BPM",
                style = MaterialTheme.typography.caption2
            )
        }
    }
}

ส่วนประกอบหลักของ Wear OS: Scaffold กับ TimeText และ Vignette สำหรับเค้าโครงมาตรฐาน; ตัวปรับแต่ง .scrollable() สำหรับความเข้ากันได้กับหน้าจอกลม; HealthService (Horologist) สำหรับเข้าถึงเซ็นเซอร์วัดอัตราการเต้นของหัวใจ Jetpack Compose for Wear OS ปรับอินเทอร์เฟซให้เข้ากับหน้าจอกลมและสี่เหลี่ยมโดยอัตโนมัติ — นักพัฒนาไม่จำเป็นต้องจัดการกับรูปแบบปัจจัยต่างๆ ด้วยตนเอง