Membuat Aplikasi watchOS

Panduan ini akan membawa Anda melalui pembuatan aplikasi pengiring watchOS dari awal, termasuk pengaturan proyek di Xcode, mengintegrasikan CapgoWatchSDK, dan membuat aplikasi jam yang berfungsi dengan SwiftUI.

Prasyarat

Sebelum Anda memulai, pastikan Anda memiliki:

• Xcode 15 atau lebih baru (download dari Mac App Store)
• macOS Sonoma atau lebih baru (untuk versi watchOS terbaru SDK)
• An existing Capacitor iOS project (jalankan npx cap add ios jika Anda belum memiliki akun)
• Akun Pengembang Apple (akun gratis berfungsi untuk pengembangan)

Ringkasan Struktur Proyek

Setelah menyelesaikan panduan ini, proyek Anda akan memiliki struktur sebagai berikut:

• Direktoriios/

  • DirektoriApp/

    • DirektoriApp/ Aplikasi iOS utama Anda

      • …
    • App.xcodeproj
    • App.xcworkspace Gunakan ini untuk membuka proyek
    • Podfile
  • DirektoriMyWatch/ Direktori

    • MyWatch/Sumber aplikasi jam tangan MyWatchApp.swift

      • Direktori
      • ContentView.swift
      • DirektoriAssets.xcassets/

        • …
    • MyWatch.xcodeproj

Langkah 1: Buka Projek iOS Anda di Xcode

1. Navigasikan ke proyek Capacitor Anda’s ios/App folder
2. Buka App.xcworkspace tidak .xcodeproj) dengan mengklik ganda
3. Tunggu Xcode untuk mengindeks proyek

Peringatan

Selalu buka .xcworkspace file, bukan .xcodeprojThe workspace includes CocoaPods dependencies that your project needs.

Langkah 2: Tambahkan Target watchOS

1. Dalam Xcode, pergi ke File → Baru → Target…

2. Dalam pilihan template:

   • Pilih watchOS Tombol di atas
   • Pilih Aplikasi
   • Klik Berikutnya

3. Konfigurasi aplikasi jam Anda:

   • Nama Produk: MyWatch (atau nama yang Anda inginkan)
   • Tim: Pilih tim pengembang Apple Anda
   • Identifikasi Organisasi: Harus sesuai dengan aplikasi iOS Anda (misal, app.capgo)
   • Identifier Paket: Akan dihasilkan secara otomatis (misalnya, app.capgo.myapp.watchkitapp)
   • Bahasa: Swift
   • Antarmuka Pengguna: SwiftUI
   • Jenis Aplikasi Jam Tangan: Aplikasi (bukan Aplikasi untuk Aplikasi iOS yang Sudah Ada)
   • Tidak Periksa Termasuk Scene Notifikasi (kecuali Anda membutuhkannya)
   • Tidak Periksa Termasuk Keterlibatan (kecuali Anda membutuhkannya)

4. Klik Selesai

5. Ketika diminta “Aktifkan skema ‘MyWatch’?”, klik Aktifkan

Langkah 3: Konfigurasi Pengaturan Aplikasi Jam Tangan

1. Dalam Navigator Proyek (sisi kiri), pilih proyek Anda (ikon biru di atas)

2. Pilih target jam tangan Anda (misalnya, “MyWatch”) dari daftar target

3. Pergi ke Umum tab:

   • Nama Tampilan: Nama yang ditampilkan di bawah ikon aplikasi (misalnya "Aplikasi Saya")
   • Identifikasi Paket: Harus diakhiri dengan .watchkitapp
   • Versi: Sesuaikan dengan versi aplikasi iOS Anda
   • Build: Sesuaikan dengan nomor pembangunan aplikasi iOS Anda

4. Lihat Tanda Tangan & Kemampuan tab:

   • Aktifkan Atur otomatis tanda tangan
   • Pilih tim Anda Tim
   • Xcode akan membuat profil pengaturan otomatis

5. Atur Informasi Pengiriman:

   • Deploymen Minimum: watchOS 9.0 atau lebih baru

Langkah 4: Tambahkan CapgoWatchSDK melalui Swift Package Manager

CapgoWatchSDK menyediakan CapgoWatchSDK yang siap digunakan WatchConnector kelas untuk komunikasi.

1. Di Xcode, pergi ke File → Tambahkan Paket Ketergantungan…

2. Di bidang pencarian, masukkan:

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

3. Tekan Enter dan tunggu Xcode untuk mengambil paket

4. Konfigurasi paket:

   • Aturan Ketergantungan: “Sampai Versi Mayor Berikutnya” dengan “8.0.0”
   • Klik Tambahkan Paket

5. Pilih produk mana yang ingin ditambahkan:

   • PENTING: Pilih hanya CapgoWatchSDK
   • Pastikan sudah ditambahkan ke aplikasi watch target (misalnya, “MyWatch”), bukan aplikasi iOS
   • Klik Tambah Paket

Tip

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

Langkah 5: Implementasi Aplikasi Jam Tangan

Sekarang mari kita buat aplikasi jam tangan code. Ganti file-file yang dihasilkan secara otomatis dengan yang berikut:

5.1 Buat Poin Masuk Aplikasi

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 Tampilan Utama

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 Aplikasi iOS untuk WatchConnectivity

Aplikasi iOS Anda juga memerlukan kemampuan WatchConnectivity.

1. Dalam Navigator Proyek, pilih proyek Anda

2. Pilih Target Aplikasi iOS Anda (bukan target jam tangan)

3. Buka Tanda Tangan & Kemampuan tab

4. Klik Tambahkan Kemampuan

5. Cari dan tambahkan Koneksi Watch (jika tersedia) atau mungkin ditambahkan secara otomatis

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

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

Langkah 7: Bangun dan Jalankan

Jalankan pada Simulator

1. Pilih skema jam tangan Anda dari pilihan skema (atas jendela Xcode)

2. Pilih simulator jam tangan Apple:

   • Klik pada selector perangkat di samping skema
   • Pilih simulator jam tangan Apple (misalnya, “Apple Watch Series 9 (45mm)”)

3. Klik tombol Jalankan atau tekan Cmd + R

4. Simulator iOS akan meluncur dengan baik iPhone dan Apple Watch

Jalankan pada Perangkat Fisik

1. Hubungkan iPhone Anda melalui USB

2. Pastikan Apple Watch Anda terpasang dengan iPhone tersebut

3. Pilih skema jam tangan Anda

4. Pilih Apple Watch fisik Anda dari daftar perangkat

5. Klik Jalankan

6. Pertama kali: Anda mungkin perlu mempercayai komputer Anda pada perangkat yang sama

Tip

Untuk meng-debug aplikasi baik secara bersamaan:

1. Jalankan aplikasi iOS terlebih dahulu
2. Lalu jalankan aplikasi jam tangan dengan “Debug → Mengikuti Proses” untuk jam tangan

Langkah 8: Tes Komunikasi

Dari iPhone (Capacitor) ke Jam Tangan

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 Jam Tangan ke iPhone

Aplikasi jam tangan 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)")
}

Tangani 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'] }
  });
});

Maju: Delegasi Kustom untuk Kontrol Lebih Lanjut

Jika Anda membutuhkan kontrol lebih lanjut, 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()

Pengaturan Masalah

Aplikasi Jam Tangan Tidak Muncul di Jam Tangan

1. Pastikan ID Paket yang Benar (ID Paket Aplikasi Jam Tangan harus sama dengan ID Paket Aplikasi iOS + .watchkitapp)
2. Periksa apakah kedua aplikasi telah ditandatangani dengan tim yang sama
3. Pada perangkat fisik: Buka Aplikasi Jam Tangan di iPhone → My Watch → gulir ke bawah untuk menemukan aplikasi Anda → aktifkan ON

Pesan Tidak Diterima

1. Verifikasi apakah kedua aplikasi telah mengaktifkan WCSession
2. Periksa isReachable sebelum mengirim pesan
3. Untuk pengiriman yang dijamin, gunakan transferUserInfo bukanlah sendMessage
4. Pastikan pendengar terdaftar sebelum perangkat lain mengirim pesan

”Tidak Aktif” Error Sesi

1. Panggil WatchConnector.shared.activate() pada awal siklus aplikasi
2. Pada iOS, plugin diaktifkan secara otomatis - pastikan plugin diimpor
3. Periksa bahwa kemampuan WatchConnectivity ditambahkan ke target iOS

Error Pembangunan dengan CapgoWatchSDK

1. Pastikan paket ditambahkan ke target jam, tidak target iOS
2. Membersihkan folder build: Produk → Membersihkan Folder Build (Cmd + Shift + K)
3. Reset cache paket: File → Paket → Reset Cache Paket

Masalah Simulator

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

Langkah Selanjutnya

• API Referensi - Dokumentasi lengkap API
• Polanya Komunikasi - Kapan menggunakan metode masing-masing
• Aplikasi Contoh - Contoh aplikasi yang berjalan penuh