Membuat Aplikasi watchOS

Panduan ini akan memandu Anda membuat watchOS companion app dari awal, termasuk setup proyek di Xcode, integrasi CapgoWatchSDK, dan membangun watch app fungsional dengan SwiftUI.

Untuk Wear OS, gunakan Membuat aplikasi Wear OS instead.

Prerequisites

Sebelum memulai, pastikan Anda sudah memiliki:

• Xcode 15 atau versi terbaru (unduh dari Mac App Store)
• macOS Sonoma atau versi terbaru (untuk watchOS SDK terbaru)
• Proyek iOS Capacitor yang sudah ada (jalankan npx cap add ios jika belum)
• Akun Apple Developer (akun gratis bisa untuk development)

Ringkasan Struktur Proyek

Setelah mengikuti panduan ini, struktur proyek Anda akan menjadi seperti ini:

• Direktoriios/

  • DirektoriApp/

    • DirektoriApp/ (aplikasi iOS utama Anda)

      • …
    • App.xcodeproj
    • App.xcworkspace (gunakan ini untuk membuka proyek)
    • Podfile
  • DirektoriMyWatch/ (aplikasi watch baru)

    • DirektoriMyWatch/ (source code aplikasi watch)

      • MyWatchApp.swift
      • ContentView.swift
      • DirektoriAssets.xcassets/

        • …
    • MyWatch.xcodeproj

Langkah 1: Buka Proyek iOS Anda di Xcode

1. Navigasi ke proyek Capacitor Anda ios/App folder
2. Buka App.xcworkspace (bukan .xcodeproj) dengan klik dua kali
3. Tunggu Xcode mengindeks proyek

Peringatan

Selalu buka .xcworkspace file, bukan .xcodeproj. Workspace mencakup dependensi CocoaPods yang dibutuhkan proyek Anda.

Langkah 2: Tambahkan Target watchOS

1. Di Xcode, buka File → New → Target…

2. Pada pemilih template:

   • Pilih watchOS tab di bagian atas
   • Pilih App
   • Klik Berikutnya

3. Konfigurasi watch app Anda:

   • Nama Produk: MyWatch (atau nama pilihan Anda)
   • Tim: Pilih tim Apple Developer Anda
   • Identifier Organisasi: Harus sesuai dengan aplikasi iOS Anda (misal, app.capgo)
   • Bundle Identifier: Akan dibuat otomatis (misal, app.capgo.myapp.watchkitapp)
   • Bahasa: Swift
   • Antarmuka Pengguna: SwiftUI
   • Tipe Watch App: App (bukan App untuk Existing iOS App)
   • Hapus centang Sertakan Notification Scene (kecuali jika dibutuhkan)
   • Hapus centang Sertakan Complication (kecuali jika dibutuhkan)

4. Klik Selesai

5. Saat muncul prompt “Activate ‘MyWatch’ scheme?”, klik Activate

Langkah 3: Konfigurasi Pengaturan Watch App

1. Di Project Navigator (sidebar kiri), pilih proyek Anda (ikon biru di bagian atas)

2. Pilih target watch Anda (misalnya, “MyWatch”) dari daftar targets

3. Buka tab General :

   • Nama Tampilan: Nama yang muncul di bawah ikon aplikasi (misalnya, “My App”)
   • Bundle Identifier: Harus diakhiri dengan .watchkitapp
   • Versi: Harus sama dengan versi aplikasi iOS Anda
   • Build: Sesuaikan build number aplikasi iOS Anda

4. Buka Signing & Capabilities tab:

   • Aktifkan Kelola signing secara otomatis
   • Pilih Team
   • Xcode akan membuat provisioning profiles secara otomatis

5. Atur Info Deployment:

   • Minimum Deployment: watchOS 9.0 atau versi terbaru

Langkah 4: Tambahkan CapgoWatchSDK via Swift Package Manager

CapgoWatchSDK menyediakan yang siap pakai WatchConnector class siap pakai untuk komunikasi.

1. Di Xcode, buka File → Tambah Dependensi Package…

2. Di kolom pencarian, masukkan:

   https://github.com/Cap-go/capacitor-watch.git

3. Tekan Enter dan tunggu Xcode mengambil package

4. Konfigurasi package:

   • Aturan Dependency: “Up to Next Major Version” dengan “8.0.0”
   • Klik Tambah Package

5. Pilih produk yang ingin ditambahkan:

   • PENTING: Hanya pilih CapgoWatchSDK
   • Pastikan sudah ditambahkan ke target watch (misalnya, “MyWatch”), bukan ke aplikasi iOS
   • Klik Tambah Package

Tips

Skill CapgoWatchSDK dirancang khusus untuk aplikasi watchOS. Ini menyediakan WatchConnector, sebuah ObservableObject yang menangani semua kompleksitas WatchConnectivity untuk Anda.

Langkah 5: Implementasi Watch App

Sekarang mari buat watch app code. Ganti file yang dibuat otomatis dengan kode berikut:

5.1 Buat App Entry Point

Edit MyWatch/MyWatchApp.swift:

import SwiftUI
import CapgoWatchSDK

@main
struct MyWatchApp: App {
    init() {
        // Activate WatchConnectivity when app launches
        WatchConnector.shared.activate()
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

5.2 Buat Main View

Edit MyWatch/ContentView.swift:

import SwiftUI
import CapgoWatchSDK

struct ContentView: View {
    // Observe the WatchConnector for automatic UI updates
    @ObservedObject var connector = WatchConnector.shared

    // Local state
    @State private var messageText = ""
    @State private var statusMessage = "Ready"

    var body: some View {
        ScrollView {
            VStack(spacing: 16) {
                // Connection Status
                ConnectionStatusView(connector: connector)

                Divider()

                // Message Input
                TextField("Message", text: $messageText)
                    .textFieldStyle(.roundedBorder)

                // Send Buttons
                HStack {
                    Button("Send") {
                        sendMessage()
                    }
                    .disabled(!connector.isReachable || messageText.isEmpty)

                    Button("Request") {
                        sendWithReply()
                    }
                    .disabled(!connector.isReachable || messageText.isEmpty)
                }

                Divider()

                // Status
                Text(statusMessage)
                    .font(.caption)
                    .foregroundColor(.secondary)

                // Last Received Message
                if !connector.lastMessage.isEmpty {
                    VStack(alignment: .leading) {
                        Text("Last Message:")
                            .font(.caption)
                            .foregroundColor(.secondary)
                        Text(formatMessage(connector.lastMessage))
                            .font(.caption2)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                }
            }
            .padding()
        }
    }

    private func sendMessage() {
        connector.sendMessage(["text": messageText, "timestamp": Date().timeIntervalSince1970])
        statusMessage = "Message sent"
        messageText = ""
    }

    private func sendWithReply() {
        connector.sendMessage(["text": messageText, "needsReply": true]) { reply in
            DispatchQueue.main.async {
                statusMessage = "Reply: \(formatMessage(reply))"
            }
        }
        messageText = ""
    }

    private func formatMessage(_ message: [String: Any]) -> String {
        message.map { "\($0.key): \($0.value)" }.joined(separator: ", ")
    }
}

// Separate view for connection status
struct ConnectionStatusView: View {
    @ObservedObject var connector: WatchConnector

    var body: some View {
        HStack {
            Circle()
                .fill(connector.isReachable ? Color.green : Color.red)
                .frame(width: 12, height: 12)

            Text(connector.isReachable ? "Connected" : "Disconnected")
                .font(.headline)

            Spacer()

            if connector.isActivated {
                Image(systemName: "checkmark.circle.fill")
                    .foregroundColor(.green)
            }
        }
    }
}

#Preview {
    ContentView()
}

Langkah 6: Konfigurasi iOS App untuk WatchConnectivity

iOS app Anda juga memerlukan capability WatchConnectivity.

1. Di Project Navigator, pilih project Anda

2. Pilih target iOS App (bukan target watch)

3. Buka Signing & Capabilities tab

4. Klik + Capability

5. Cari dan tambahkan WatchConnectivity (jika tersedia) atau mungkin ditambahkan otomatis

6. Plugin Capacitor menangani sisi iOS secara otomatis, namun pastikan Info.plist Anda memiliki:

   <key>WKCompanionAppBundleIdentifier</key>
   <string>app.capgo.myapp.watchkitapp</string>

Langkah 7: Build dan Jalankan

Jalankan di Simulator

1. Pilih scheme watch Anda dari selector scheme (bagian atas jendela Xcode)

2. Pilih simulator watch:

   • Klik pada device selector di sebelah scheme
   • Pilih simulator Apple Watch (misalnya, “Apple Watch Series 9 (45mm)”)

3. Klik tombol Jalankan tombol (▶️) atau tekan Cmd + R

4. iOS Simulator akan berjalan dengan iPhone dan Apple Watch

Jalankan di Perangkat Fisik

1. Hubungkan iPhone Anda via USB

2. Pastikan Apple Watch Anda sudah terhubung dengan iPhone tersebut

3. Pilih scheme watch Anda

4. Pilih Apple Watch fisik Anda dari daftar perangkat

5. Klik Jalankan

6. Pertama kali: Anda mungkin perlu mempercayai komputer di kedua perangkat

Tips

Untuk debug kedua aplikasi secara bersamaan:

1. Jalankan aplikasi iOS terlebih dahulu
2. Lalu jalankan watch app dengan “Debug → Attach to Process” untuk watch

Langkah 8: Tes Komunikasi

Dari iPhone (Capacitor) ke Watch

Di dalam aplikasi Capacitor Anda:

import { CapgoWatch } from '@capgo/capacitor-watch';

// Check connection
const info = await CapgoWatch.getInfo();
console.log('Watch reachable:', info.isReachable);

// Send a message
if (info.isReachable) {
  await CapgoWatch.sendMessage({
    data: { action: 'update', value: 'Hello from iPhone!' }
  });
}

Dari Watch ke iPhone

Aplikasi watch menggunakan WatchConnector:

// Send message (fire and forget)
WatchConnector.shared.sendMessage(["action": "buttonTapped"])

// Send message with reply
WatchConnector.shared.sendMessage(["request": "getData"]) { reply in
    print("Got reply: \(reply)")
}

Menangani Pesan di iPhone

// Listen for messages from watch
await CapgoWatch.addListener('messageReceived', (event) => {
  console.log('Message from watch:', event.message);
  // { action: 'buttonTapped' }
});

// Handle messages that need a reply
await CapgoWatch.addListener('messageReceivedWithReply', async (event) => {
  console.log('Request from watch:', event.message);

  // Send reply back
  await CapgoWatch.replyToMessage({
    callbackId: event.callbackId,
    data: { status: 'success', items: ['item1', 'item2'] }
  });
});

Lanjutan: Custom Delegate untuk Kontrol Lebih

Jika Anda butuh kontrol lebih, implementasikan WatchConnectorDelegate:

import SwiftUI
import CapgoWatchSDK

class WatchHandler: WatchConnectorDelegate {
    func didReceiveMessage(_ message: [String: Any]) {
        print("Received: \(message)")
        // Handle incoming message
    }

    func didReceiveMessageWithReply(_ message: [String: Any],
                                     replyHandler: @escaping ([String: Any]) -> Void) {
        print("Received request: \(message)")
        // Process and send reply
        replyHandler(["status": "processed"])
    }

    func didReceiveApplicationContext(_ context: [String: Any]) {
        print("Context updated: \(context)")
    }

    func didReceiveUserInfo(_ userInfo: [String: Any]) {
        print("User info received: \(userInfo)")
    }

    func reachabilityDidChange(_ isReachable: Bool) {
        print("Reachability changed: \(isReachable)")
    }

    func activationDidComplete(with state: WCSessionActivationState) {
        print("Activation completed: \(state.rawValue)")
    }
}

// In your app setup:
let handler = WatchHandler()
WatchConnector.shared.delegate = handler
WatchConnector.shared.activate()

Pemecahan Masalah

Watch App Tidak Muncul di Watch

1. Pastikan bundle ID sudah terhubung dengan benar (bundle ID watch app harus iOS app bundle ID + .watchkitapp)
2. Pastikan kedua app ditandatangani dengan team yang sama
3. Pada perangkat fisik: Buka Watch app di iPhone → My Watch → scroll untuk cari app Anda → aktifkan ON

Pesan Tidak Diterima

1. Pastikan kedua aplikasi sudah mengaktifkan WCSession
2. Cek isReachable sebelum mengirim pesan
3. Untuk pengiriman yang terjamin, gunakan transferUserInfo alih-alih sendMessage
4. Pastikan listener sudah terdaftar sebelum perangkat lain mengirim pesan

Error “Session Not Activated”

1. Panggil WatchConnector.shared.activate() di awal lifecycle aplikasi
2. Di iOS, plugin akan aktif secara otomatis - pastikan plugin sudah di-import
3. Pastikan capability WatchConnectivity sudah ditambahkan ke target iOS

Error Build dengan CapgoWatchSDK

1. Pastikan package sudah ditambahkan ke target watch, bukan target iOS
2. Bersihkan folder build: Produk → Bersihkan Folder Build (Cmd + Shift + K)
3. Reset cache package: File → Packages → Reset Package Caches

Masalah Simulator

1. Reset simulator Anda: Perangkat → Hapus Semua Konten dan Pengaturan
2. Pastikan simulator iOS dan watchOS adalah pasangan yang kompatibel
3. Kedua simulator harus berjalan agar komunikasi berfungsi

Next Steps

• Membuat aplikasi Wear OS untuk jam tangan Android
• Referensi API - Selesaikan dokumentasi API
• Communication Patterns - Kapan menggunakan masing-masing metode
• Aplikasi Contoh - Contoh kerja lengkap

Lanjutkan dari Membuat watchOS App

Jika Anda menggunakan Membuat watchOS App untuk merencanakan pekerjaan plugin native, hubungkan dengan Menggunakan @capgo/capacitor-watch untuk kapabilitas native di Menggunakan @capgo/capacitor-watch, Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi di Capacitor Plugins oleh Capgo, Menambahkan atau Memperbarui Plugin untuk detail implementasi pada Menambahkan atau Memperbarui Plugin, dan Alternatif Plugin Ionic Enterprise untuk alur kerja produk pada Alternatif Plugin Ionic Enterprise.