Membuat Aplikasi watchOS

Petunjuk ini akan membantu Anda membuat 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 versi watchOS terbaru SDK)
• An existing Capacitor iOS project (jalankan npx cap add ios jika Anda belum memiliki)
• 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 untuk membuka proyek)
    • Podfile
  • DirektoriMyWatch/ (aplikasi jam tangan baru)

    • DirektoriMyWatch/ (sumber aplikasi jam tangan)

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

        • …
    • Projek Watch saya.xcodeproj

Langkah 1: Buka Projek iOS Anda di Xcode

1. Navigasikan ke folder projek Capacitor Anda ios/App folder
2. Buka App.xcworkspace (bukan .xcodeproj) dengan cara mengklik ganda
3. Tunggu Xcode untuk mengindex projek

Peringatan

Selalu buka file, bukan .xcworkspace . Ruang kerja termasuk ketergantungan CocoaPods yang dibutuhkan oleh proyek Anda. .xcodeprojLangkah 2: Tambahkan Target watchOS

Judul bagian “Langkah 2: Tambahkan Target watchOS”

1. File → Baru → Target… Pada pilihan template:

2. Pilih

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

3. Konfigurasi aplikasi jam tangan 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)
   • Bahasa: Swift
   • Antarmuka Pengguna: SwiftUI
   • Jenis Aplikasi Jam Tangan: Aplikasi (bukan Aplikasi untuk Aplikasi iOS yang Sudah Ada)
   • Hapus Pilihan Termasuk Scene Notifikasi (kecuali Anda membutuhkannya)
   • Hapus Pilihan Termasuk Komplikasi (kecuali Anda membutuhkannya)

4. Klik Selesai

5. Ketika 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 (misalnya, “MyWatch”) dari daftar target

3. Pergi ke Umum tab:

   • Nama TampilanNama yang ditampilkan di bawah ikon aplikasi (misalnya, “Aplikasi Saya”)
   • Identifier Paket: Harus diakhiri dengan .watchkitapp
   • Versi: Sesuaikan dengan versi aplikasi iOS Anda
   • Build: Sesuaikan dengan nomor pembangunan aplikasi iOS Anda

4. Pergi ke Tanda Tangan & Kemampuan tab:

   • Mengaktifkan Menangani secara otomatis tanda tangan
   • Pilih Tim
   • Xcode akan membuat profil pengaturan secara otomatis

5. Atur Info Pengiriman:

   • Minimum Pengiriman: watchOS 9.0 atau lebih baru

Langkah 4: Tambahkan CapgoWatchSDK melalui Swift Package Manager

SDK CapgoWatch menyediakan kelas yang sudah siap digunakan WatchConnector untuk komunikasi.

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

2. Pada 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: “Hingga 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 target jam tangan (misalnya, “MyWatch”), bukan aplikasi iOS
   • Klik Tambah Paket

Tips

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

Langkah 5: Implementasikan Aplikasi Jam Tangan

Sekarang mari kita buat aplikasi jam code. Ganti 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. In Project Navigator, pilih proyek Anda

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

3. Pergi ke Tab Tanda Tangan & Kemampuan Klik

4. Tambahkan Kemampuan Cari dan tambahkan

5. WatchConnectivity (jika tersedia) atau mungkin ditambahkan secara otomatis __CAPGO_KEEP_0__

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

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

Langkah 7: Bangun dan Jalankan

Jalankan pada Simulator

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

2. Pilih simulator jam tangan:

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

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

4. Simulator iOS akan meluncur dengan iPhone dan Apple Watch

Jalankan pada Perangkat Fisik

1. Hubungkan iPhone Anda melalui USB

2. Pastikan Apple Watch Anda dipasangkan 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 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 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 Benar (ID Paket Jam Tangan harus sama dengan ID Paket iOS App + .watchkitapp)
2. Periksa bahwa kedua aplikasi telah ditandatangani dengan tim yang sama
3. Pada perangkat fisik: Buka Aplikasi Jam di iPhone → My Watch → gulir ke bawah untuk menemukan aplikasi Anda → aktifkan ON

Pesan Tidak Diterima

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

”Tidak Aktif” 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 iOSMembersihkan folder pembangunan:
2. __CAPGO_KEEP_0__ Produk → Bersihkan Folder Pembangunan (Cmd + Shift + K)
3. Reset kembali cache paket: File → Paket → Reset Cache Paket

Masalah Simulator

1. Reset ulang 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-Langkah Selanjutnya

• Referensi API - Dokumentasi lengkap API
• Gaya Komunikasi - Kapan menggunakan metode masing-masing
• Contoh Aplikasi - Contoh aplikasi yang berfungsi sepenuhnya

Teruskan dari Membuat Aplikasi watchOS

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