Membuat Aplikasi watchOS

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

Persyaratan

Sebelum Anda memulai, pastikan Anda memiliki:

• Xcode 15 atau lebih baru (download dari Mac App Store)
• macOS Sonoma atau lebih baru (untuk watchOS terbaru SDK)
• Proyek iOS Capacitor yang sudah ada (jalankan npx cap add ios jika Anda belum)
• Akun Pengembang Apple (akun gratis bekerja untuk pengembangan)

Struktur Proyek Ringkasan

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

• Direktoriios/

  • DirektoriApp/

    • DirektoriApp/ (aplikasi utama iOS Anda)

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

    • DirektoriMyWatch/ (sumber aplikasi jam tangan)

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

        • …
    • MyWatch.xcodeproj

Langkah 1: Buka Projek iOS Anda di Xcode

1. Navigasikan ke folder projek Capacitor Anda ios/App folder
2. Buka App.xcworkspace dengan mengklik ganda .xcodeprojTunggu Xcode untuk mengindeks projek
3. Peringatan

Selalu buka

projek Anda di Xcode .xcworkspace file, bukan .xcodeproj . File workspace ini termasuk ketergantungan CocoaPods yang dibutuhkan oleh proyek Anda.

Langkah 2: Tambahkan Target watchOS

1. Pergi ke Xcode, lalu: File → Baru → Target…

2. Pada pilihan template:

   • Pilih tab watchOS di atas Pilih
   • Aplikasi Section titled “Step 2: Add a watchOS Target”
   • 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 (misalnya, app.capgo)
   • Identifikasi Paket: Akan dihasilkan secara otomatis (misalnya, app.capgo.myapp.watchkitapp)
   • BahasaSwift
   • Antarmuka PenggunaSwiftUI
   • Jenis Aplikasi Jam TanganAplikasi (bukan Aplikasi untuk Aplikasi iOS yang Sudah Ada)
   • Nonaktifkan Termasuk Scene Notifikasi (kecuali Anda membutuhkannya)
   • Nonaktifkan Termasuk Komplikasi (kecuali Anda membutuhkannya)

4. Klik Selesai

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

Langkah 3: Konfigurasi Pengaturan Aplikasi Jam Tangan

1. Pada 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 versi aplikasi iOS Anda
   • Build: Sesuaikan nomor pembangunan aplikasi iOS Anda

4. Pergi ke Pengesahan & Kemampuan tab:

   • Mengaktifkan Menangani otomatis pengesahan
   • Pilih Anda Tim
   • Xcode akan membuat profil pengaturan secara otomatis

5. Set Info Pengiriman:

   • Deploymen Minimum: watchOS 9.0 atau lebih baru

Langkah 4: Tambahkan CapgoWatchSDK melalui Pengelola Paket Swift

CapgoWatchSDK menyediakan kelas yang sudah siap digunakan WatchConnector untuk komunikasi.

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

2. Ini adalah bidang pencarian, masukkan:

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

3. Tekan Enter dan tunggu Xcode untuk mengunduh paket

4. Konfigurasi paket:

   • Aturan Ketergantungan: “Hingga Versi Utama Berikutnya” dengan “8.0.0”
   • Klik Tambahkan Paket

5. Pilih produk mana yang ingin ditambahkan:

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

Trik

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

Langkah 5: Implementasikan Aplikasi Jam

Sekarang mari kita buat aplikasi jam 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 (bukan target jam tangan)

3. Pergi ke Tab Signing & Capabilities Klik

4. Tambahkan Capabilitas Cari dan tambahkan

5. WatchConnectivity (jika tersedia) atau mungkin ditambahkan secara otomatis Plugin __CAPGO_KEEP_0__ menghandle sisi iOS secara otomatis, namun pastikan Info.plist Anda memiliki:

6. Capacitor

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

Langkah 7: Bangun dan Jalankan

Jalankan pada Simulator

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

2. Pilih simulator jam tangan:

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

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

4. Simulator iOS akan diluncurkan dengan 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 kedua perangkat

Tips

Untuk meng-debug aplikasi baik secara bersamaan:

1. Jalankan aplikasi iOS terlebih dahulu
2. Kemudian 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 memerlukan kontrol yang 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

Aplikasi Jam Tangan Tidak Muncul di Jam Tangan

1. Pastikan ID paket yang terkait dengan benar (ID paket aplikasi jam tangan harus sama dengan ID paket aplikasi iOS + .watchkitapp)
2. Pastikan kedua aplikasi tersebut 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 kedua aplikasi tersebut memiliki WCSession yang diaktifkan
2. Cek isReachable sebelum mengirim pesan
3. Untuk pengiriman yang dijamin, gunakan transferUserInfo daripada sendMessage
4. Pastikan pendengar terdaftar sebelum perangkat lain mengirim pesan

”Sesi Tidak Diaktifkan” Error

1. Panggil WatchConnector.shared.activate() di 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, bukan target iOS
2. Membersihkan folder pembangunan: Produk → Membersihkan Folder Pembangunan (Cmd + Shift + K)
3. Mengatur ulang cache paket: File → Paket → Mengatur Ulang Cache Paket

Masalah Simulator

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

Langkah-Langkah Selanjutnya

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

Teruskan dari Membuat Aplikasi watchOS

Jika Anda menggunakan Membuat Aplikasi watchOS untuk merencanakan kerja plugin native, hubungkannya dengan Menggunakan @capgo/capacitor-watch untuk kemampuan native di Menggunakan @capgo/capacitor-watch, Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, dan Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic