Membuat Aplikasi watchOS

Copy untuk AI

Persyaratan

Sebelum 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 cukup untuk pengembangan)

Struktur Proyek Ringkasan

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/ (aplikasi jam baru)

    • DirektoriMyWatch/ (sumber aplikasi jam)

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

        • …
    • Project 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 cara mengklik ganda
3. Tunggu Xcode untuk mengindeks projek

Peringatan

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

Langkah 2: Tambahkan Target watchOS

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

2. Pada pilihan template:

   • Pilih tab watchOS di atas Pilih
   • App App
   • 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)
   • Bahasa: Swift
   • Antarmuka Pengguna: SwiftUI
   • Jenis Aplikasi Jam Tangan: Aplikasi (bukan Aplikasi untuk Aplikasi iOS yang Sudah Ada)
   • Tidak Pilih Inklusif Skenario Notifikasi (kecuali Anda membutuhkannya)
   • Tidak Pilih Inklusif 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. Atur Informasi Pengiriman:

   • Deploymen Minimum: watchOS 9.0 atau lebih baru

Langkah 4: Tambahkan CapgoWatchSDK melalui Swift Package Manager

CapgoWatchSDK menyediakan kelas yang siap digunakan WatchConnector untuk komunikasi.

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

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 : “Hingga Versi Utama Berikutnya” dengan “8.0.0”
   • Klik Tambahkan Paket

5. Pilih produk mana yang ingin ditambahkan:

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

Trik

Yaitu CapgoWatchSDK terutama dirancang 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 yang dihasilkan secara otomatis dengan yang berikut:

Membuat 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()
        }
    }
}

Membuat 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. Select your Pilih Target Aplikasi iOS (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 Plugin __CAPGO_KEEP_0__ menghandle sisi iOS secara otomatis, namun pastikan Anda memiliki: Info.plist

6. The Capacitor plugin handles the iOS side automatically, but ensure your Info.plist has:

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

Langkah 7: Bangun dan Jalankan

Jalankan di 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 baik 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 debug aplikasi baik secara bersamaan:

1. Jalankan aplikasi iOS terlebih dahulu
2. Lalu jalankan aplikasi jam tangan dengan “Debug → Ikuti 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 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 Perbaikan

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 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. Pastikan kedua aplikasi memiliki WCSession diaktifkan
2. Periksa isReachable sebelum mengirim pesan
3. Untuk pengiriman yang terjamin, 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 kembali cache paket: File → Paket → Mengatur Kembali Cache Paket

Masalah Simulator

1. Mengatur kembali 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
• 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 native di 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, Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin, dan Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic.