Membuat Aplikasi watchOS

Petunjuk 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.

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)
• Aplikasi iOS yang sudah ada Capacitor (jalankan npx cap add ios Jika Anda belum)
• Rekening 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

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

    • DirektoriMyWatch/ (sumber aplikasi jam)

      • 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 (bukan .xcodeproj) dengan mengklik ganda
3. Tunggu Xcode untuk mengindeks projek

Hati-hati

Selalu buka file ini, bukan .xcworkspace . .xcodeprojWorkspace ini termasuk ketergantungan CocoaPods yang dibutuhkan oleh proyek Anda.

Langkah 2: Tambahkan Target watchOS

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

2. Pada pilihan template:

   • Pilih watchOS tab 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 (misalnya, app.capgo)
   • Identifikasi Paket: Akan dihasilkan secara otomatis (misalnya, app.capgo.myapp.watchkitapp)
   • Bahasacontext
   • : SwiftAntarmuka Pengguna
   • : SwiftUIJenis Aplikasi Jam Tangan
   • : Aplikasi (bukan Aplikasi untuk Aplikasi iOS yang Sudah Ada) Nonaktifkan Termasuk Scene Notifikasi
   • (kecuali Anda membutuhkannya) Inklusif Komplikasi (kecuali Anda membutuhkannya)

4. Klik Selesai

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

Langkah 3: Konfigurasi Pengaturan Jam Tangan

1. Pilih proyek Anda (ikon biru di atas) di Navigasi Proyek (sisi kiri)

2. Pilih target jam tangan Anda (misalnya, ‘MyWatch’) dari daftar target

3. Pergi ke Pengaturan Umum tab:

   • Nama Tampilan: Nama yang ditampilkan di bawah ikon aplikasi (misalnya, “Aplikasi Saya”)
   • Identifier Paket: Harus diakhiri dengan .watchkitapp
   • Versi: Sesuaikan dengan versi aplikasi iOS Anda
   • Buildcontext: Bagian halaman utama produk fitur. Peran: Label UI singkat atau item navigasi. Dilihat di: komponen landing/AutomationFeatures.astro. Kunci pesan `landing_automation_build` (Landing Automation Build).

4. : Sesuaikan dengan nomor pembangunan aplikasi iOS Anda Ke Penandatanganan & Kemampuan Capabilitas

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

5. Atur Informasi Pengiriman:

   • Minimum PengirimanwatchOS 9.0 atau lebih baru

Langkah 4: Tambahkan CapgoWatchSDK melalui Swift Package Manager

SDK CapgoWatch menyediakan sebuah capaian siap pakai WatchConnector kelas untuk komunikasi.

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

2. Dalam 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:

   • PENTINGHanya pilih CapgoWatchSDK
   • Pastikan sudah ditambahkan ke target Anda (misalnya, “MyWatch”), bukan aplikasi iOS Klik
   • Tambah Paket TIPS

Komponen ini dirancang khusus untuk aplikasi watchOS. Ia menyediakan

, sebuah ObservableObject yang mengelola semua kompleksitas WatchConnectivity untuk Anda. CapgoWatchSDK __CAPGO_KEEP_0__ WatchConnector__CAPGO_KEEP_1__

Langkah 5: Implementasi Aplikasi Jam Tangan

Sekarang mari kita buat aplikasi jam tangan 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. Pilih proyek Anda di Navigasi Proyek

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

3. Pilih Tab Tanda Tangan & Kemampuan Klik

4. + Kemampuan Cari dan tambahkan

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

6. Plugin Capacitor mengelola sisi iOS secara otomatis, namun pastikan file 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 (atas jendela Xcode)

2. Pilih simulator jam tangan Apple:

   • Pilih simulator Apple Watch (misalnya, “Apple Watch Series 9 (45mm)”)
   • Pilih simulator Apple Watch (misalnya, “Apple Watch Series 9 (45mm)”)

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

4. Tombol

Perangkat iOS akan meluncur dengan iPhone dan Apple Watch

1. Bab berjudul “Jalankan pada Perangkat Fisik”

2. Hubungkan iPhone Anda melalui USB

3. Pastikan Apple Watch Anda terpasang dengan iPhone tersebut

4. Pilih skema jam tangan Anda

5. Pilih Apple Watch fisik Anda dari daftar perangkat Klik

6. Kali Pertama: Anda mungkin perlu memercayai komputer Anda di kedua perangkat

Tip

Untuk meng-debug aplikasi keduanya secara bersamaan:

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

Langkah 8: Uji Komunikasi

Dari iPhone (Capacitor) ke Jam Tangan

Pada 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!' }
  });
}

From Watch to iPhone

The watch app uses 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)")
}

Handle Messages on 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'] }
  });
});

Advanced: Custom Delegate for More Control

If you need more control, implement 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 Tambahan

Aplikasi Jam Tangan Tidak Muncul

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 → Jam Tangan Saya → gulir ke bawah untuk menemukan aplikasi Anda → aktifkan

Pesan Tidak Diterima

1. Verifikasi apakah kedua aplikasi telah mengaktifkan WCSession
2. Periksa isReachable sebelum mengirim pesan
3. Untuk pengiriman yang dapat dipastikan, gunakan transferUserInfo bukannya sendMessage
4. Pastikan pemangku jawab telah terdaftar sebelum perangkat lain mengirim pesan

Error "Sesi Tidak Diaktifkan"

1. Panggil WatchConnector.shared.activate() context":"HTML teks fragmen dari string Capgo UI yang lebih panjang (kunci induk `appflow_migration_step2`). Halaman/area: Perbandingan/migrasi Capflow / pemasaran copy. Peran: Kalimat website. Dilihat di: halaman ionic-appflow.astro. Simpan Capgo produk/merek dan istilah pengembang secara tepat. Kunci pesan `appflow_migration_step2` (Appflow Migration Step2)."
2. pada awal siklus aplikasi
3. Pada iOS, plugin diaktifkan secara otomatis - pastikan plugin telah diimport

Pastikan kemampuan WatchConnectivity telah ditambahkan ke target iOS

1. Judul "Error Pembangunan dengan CapgoWatchSDK" Pastikan paket telah ditambahkan ke target watchtidak untuk 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 Selanjutnya

• API Referensi - Dokumentasi 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 asli, hubungkannya dengan Menggunakan @capgo/capacitor-watch untuk kemampuan asli dalam Menggunakan @capgo/capacitor-watch, Capgo Direktori Plugin untuk alur kerja produk dalam Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi dalam Capacitor Plugin oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi dalam Menambahkan atau Mengupdate Plugin, dan Alternatif Plugin Enterprise Ionic untuk alur kerja produk dalam Alternatif Plugin Enterprise Ionic.