Membuat Aplikasi watchOS

This guide walks you through creating a Untuk Aplikasi kompas dari awal, termasuk pengaturan proyek di Xcode, mengintegrasikan CapgoWatchSDK, dan membuat aplikasi jam yang berfungsi dengan SwiftUI.

, gunakan Wear OSsebaliknya. Membuat Aplikasi Wear OS Persyaratan

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)
• An existing Capacitor iOS project (jalankan) npx cap add ios (jika Anda belum)
• Akun Pengembang Apple (akun gratis bekerja untuk pengembangan)

Ringkasan Struktur Proyek

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

• Direktoriios/

  • DirektoriAplikasi/

    • DirektoriAplikasi/ (Aplikasi iOS utama Anda)

      • …
    • Aplikasi.xcodeproj
    • Aplikasi.xcworkspace (Gunakan ini untuk membuka proyek)
    • File Pod
  • DirektoriMyWatch/ (Aplikasi Jam Tangan Baru)

    • DirektoriMyWatch/ (Sumber Aplikasi Jam Tangan)

      • MyWatchApp.swift
      • Tampilan Konten.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 Tidak .xcodeproj) dengan mengklik ganda
3. Tunggu Xcode untuk mengindeks projek

Peringatan

Selalu buka file, bukan .xcworkspace folder .xcodeprojRuangan kerja termasuk ketergantungan CocoaPods yang dibutuhkan oleh proyek Anda.

Langkah 2: Tambahkan Target watchOS

1. Judul bagian "Langkah 2: Tambahkan Target watchOS" Di Xcode, pergi ke

2. File → Baru → Target…

   • Select Pilih tab watchOS di atas
   • Pilih App
   • Klik Selanjutnya

3. Konfigurasi aplikasi jam Anda:

   • Nama Produk: MyWatch (atau nama yang Anda inginkan)
   • TimSelect 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 TanganAplikasi Baru (bukan Aplikasi iOS yang Sudah Ada)
   • Hapus Pilihan Termasuk Scene Peringatan (kecuali Anda membutuhkannya)
   • Hapus Pilihan Termasuk Komplikasi (kecuali Anda membutuhkannya)

4. Klik Selesai

5. When 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’)
   • Identifier PaketSeharusnya berakhir dengan .watchkitapp
   • Versi: Sesuaikan dengan versi aplikasi iOS Anda
   • BuildMatchkan nomor build aplikasi iOS Anda

4. Pergi ke Tanda Tangan & Kemampuan tab:

   • Enable Atur Otomatis Tanda Tangan
   • Pilih aplikasi Ke
   • Xcode akan membuat profil pengaturan secara otomatis

5. Set Informasi Pengembangan:

   • Info PengembanganDeploymen Minimum

Langkah 4: Tambahkan CapgoWatchSDK melalui Swift Package Manager

SDK Capgo Watch menyediakan sebuah aplikasi siap digunakan WatchConnector CapgoWatchSDK menyediakan kelas yang siap digunakan

1. Untuk berkomunikasi dengan pengguna. Tambahkan Dependensi Paket...

2. File → Tambahkan Paket Ketergantungan…

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

3. Tunggu Xcode mengambil paket selama menekan Enter

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 Anda target Watch Contoh (misalnya “MyWatch”), bukan aplikasi iOS
   • Klik Tambah Paket

Tips

Adalah CapgoWatchSDK terutama dirancang 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 yang dihasilkan secara otomatis dengan 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()
        }
    }
}

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

Membuat Poin Masuk Aplikasi juga memerlukan kemampuan WatchConnectivity.

1. Pilih proyek Anda di Navigator Proyek

2. Pilih Target iOS App (bukan target jam tangan)

3. Pergi ke Tab Tanda Tangan & Kemampuan Klik

4. Click Cari dan tambahkan

5. WatchConnectivity WatchConnectivity Jika tersedia atau mungkin ditambahkan secara otomatis

6. Plugin Capacitor menghandle 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 Run Klik 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 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 memercayai komputer di kedua perangkat

Tips

Untuk debug aplikasi baik secara bersamaan:

1. Jalankan aplikasi iOS terlebih dahulu
2. Kemudian 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)")
}

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

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

Troubleshooting

Applikasi Jam Tangan Tidak Muncul di Jam Tangan

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

Pesan Tidak Diterima

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

“Error Aktivasi Sesinya Tidak Berhasil”

1. Hubungi WatchConnector.shared.activate() di awal siklus aplikasi
2. Pada iOS, plugin diaktifkan secara otomatis - pastikan plugin diimpor
3. Pastikan kemampuan WatchConnectivity ditambahkan ke target iOS

Masalah Pembangunan dengan CapgoWatchSDK

1. Pastikan paket ditambahkan ke target jambukan target iOS
2. Membersihkan folder pembangunan: Produk → Membersihkan Folder Pembangunan (Tombol Ctrl + Shift + K)
3. Reset katalog paket: File → Paket → Reset Katalog Paket

Masalah Simulator

1. Reset simulator: Gawai → Hapus Semua Konten dan Pengaturan
2. Pastikan simulator iOS dan watchOS kompatibel
3. Kedua simulator harus berjalan untuk komunikasi berfungsi

Next Steps

• Membuat Aplikasi Wear OS untuk jam tangan Android
• Referensi API - Dokumentasi lengkap API
• Polanya Komunikasi - Kapan menggunakan metode masing-masing
• Aplikasi Contoh - Contoh aplikasi yang berfungsi sepenuhnya

Lanjutkan dari Membuat Aplikasi watchOS

Jika Anda menggunakan Membuat Aplikasi watchOS untuk merencanakan kerja plugin native, 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.