Membuat Aplikasi watchOS
Salin prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.
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
Judul bagian “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 iosjika Anda belum) - Akun Pengembang Apple (akun gratis bekerja untuk pengembangan)
Struktur Proyek Ringkasan
Judul Bagian “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
Judul Bagian “Langkah 1: Buka Projek iOS Anda di Xcode”- Navigasikan ke folder projek Capacitor Anda
ios/Appfolder - Buka
App.xcworkspacedengan mengklik ganda.xcodeprojTunggu Xcode untuk mengindeks projek - Peringatan
Langkah 2: Tambahkan Target watchOS
Judul bagian “Langkah 2: Tambahkan Target watchOS”-
Pergi ke Xcode, lalu: File → Baru → Target…
-
Pada pilihan template:
- Pilih tab watchOS di atas Pilih
- Aplikasi Section titled “Step 2: Add a watchOS Target”
- Klik Berikutnya
-
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)
- Nama Produk:
-
Klik Selesai
-
Ketika Anda diminta “Aktifkan skema ‘MyWatch’?”, klik Aktifkan
Langkah 3: Konfigurasi Pengaturan Aplikasi Jam Tangan
Bagian berjudul “Langkah 3: Konfigurasi Pengaturan Aplikasi Jam Tangan”-
Pada Navigator Proyek (sisi kiri), pilih proyek Anda (ikon biru di atas)
-
Pilih target jam tangan Anda (misalnya, “MyWatch”) dari daftar target
-
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
-
Pergi ke Pengesahan & Kemampuan tab:
- Mengaktifkan Menangani otomatis pengesahan
- Pilih Anda Tim
- Xcode akan membuat profil pengaturan secara otomatis
-
Set Info Pengiriman:
- Deploymen Minimum: watchOS 9.0 atau lebih baru
Langkah 4: Tambahkan CapgoWatchSDK melalui Pengelola Paket Swift
Judul Bagian “Langkah 4: Tambahkan CapgoWatchSDK melalui Pengelola Paket Swift”CapgoWatchSDK menyediakan kelas yang sudah siap digunakan WatchConnector untuk komunikasi.
-
Di Xcode, pergi ke File → Tambahkan Dependensi Paket…
-
Ini adalah bidang pencarian, masukkan:
https://github.com/Cap-go/capacitor-watch.git -
Tekan Enter dan tunggu Xcode untuk mengunduh paket
-
Konfigurasi paket:
- Aturan Ketergantungan: “Hingga Versi Utama Berikutnya” dengan “8.0.0”
- Klik Tambahkan Paket
-
Pilih produk mana yang ingin ditambahkan:
- PENTING: Pilih hanya
CapgoWatchSDK - Pastikan sudah ditambahkan ke target perangkat (misalnya, “MyWatch”), bukan aplikasi iOS
- Klik Tambah Paket
- PENTING: Pilih hanya
Langkah 5: Implementasikan Aplikasi Jam
Bab berjudul “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
Judul Bagian “5.1 Buat Poin Masuk Aplikasi”Edit MyWatch/MyWatchApp.swift:
import SwiftUIimport CapgoWatchSDK
@mainstruct MyWatchApp: App { init() { // Activate WatchConnectivity when app launches WatchConnector.shared.activate() }
var body: some Scene { WindowGroup { ContentView() } }}5.2 Buat Tampilan Utama
Judul Bagian “5.2 Buat Tampilan Utama”Edit MyWatch/ContentView.swift:
import SwiftUIimport 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 statusstruct 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
Judul Bagian “Langkah 6: Konfigurasi Aplikasi iOS untuk WatchConnectivity”Aplikasi iOS Anda juga memerlukan kemampuan WatchConnectivity.
-
Dalam Navigator Proyek, pilih proyek Anda
-
Pilih target Aplikasi iOS (bukan target jam tangan)
-
Pergi ke Tab Signing & Capabilities Klik
-
Tambahkan Capabilitas Cari dan tambahkan
-
WatchConnectivity (jika tersedia) atau mungkin ditambahkan secara otomatis Plugin __CAPGO_KEEP_0__ menghandle sisi iOS secara otomatis, namun pastikan Info.plist Anda memiliki:
-
Capacitor
<key>WKCompanionAppBundleIdentifier</key><string>app.capgo.myapp.watchkitapp</string>
Langkah 7: Bangun dan Jalankan
Bagian berjudul “Langkah 7: Bangun dan Jalankan”Jalankan pada Simulator
Bagian berjudul “Jalankan pada Simulator”-
Pilih skema jam tangan dari selector skema (atas jendela Xcode)
-
Pilih simulator jam tangan:
- Klik pada selector perangkat di samping skema
- Pilih simulator Apple Watch (misalnya, “Apple Watch Series 9 (45mm)”
-
Klik tombol Run tombol (▶️) atau tekan
Cmd + R -
Simulator iOS akan diluncurkan dengan iPhone dan Apple Watch
Jalankan pada Perangkat Fisik
Bagian berjudul “Jalankan pada Perangkat Fisik”-
Hubungkan iPhone Anda melalui USB
-
Pastikan Apple Watch Anda terpasang dengan iPhone tersebut
-
Pilih skema jam tangan Anda
-
Pilih Apple Watch fisik Anda dari daftar perangkat
-
Klik Jalankan
-
Pertama kali: Anda mungkin perlu mempercayai komputer Anda pada kedua perangkat
Langkah 8: Tes Komunikasi
Judul Bagian “Langkah 8: Tes Komunikasi”Dari iPhone (Capacitor) ke Jam Tangan
Judul Bagian “Dari iPhone (Capacitor) ke Jam Tangan”Dalam aplikasi Capacitor Anda:
import { CapgoWatch } from '@capgo/capacitor-watch';
// Check connectionconst info = await CapgoWatch.getInfo();console.log('Watch reachable:', info.isReachable);
// Send a messageif (info.isReachable) { await CapgoWatch.sendMessage({ data: { action: 'update', value: 'Hello from iPhone!' } });}Dari Jam Tangan ke iPhone
Judul Bagian “Dari Jam Tangan ke iPhone”Aplikasi jam tangan menggunakan WatchConnector:
// Send message (fire and forget)WatchConnector.shared.sendMessage(["action": "buttonTapped"])
// Send message with replyWatchConnector.shared.sendMessage(["request": "getData"]) { reply in print("Got reply: \(reply)")}Tangani Pesan di iPhone
Bagian berjudul “Tangani Pesan di iPhone”// Listen for messages from watchawait CapgoWatch.addListener('messageReceived', (event) => { console.log('Message from watch:', event.message); // { action: 'buttonTapped' }});
// Handle messages that need a replyawait 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
Bagian berjudul “Maju: Delegasi Kustom untuk Kontrol Lebih Lanjut”Jika Anda memerlukan kontrol yang lebih lanjut, implementasikan WatchConnectorDelegate:
import SwiftUIimport 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 = handlerWatchConnector.shared.activate()Pengaturan
Bagian berjudul “Pengaturan”Aplikasi Jam Tangan Tidak Muncul di Jam Tangan
Bagian berjudul “Aplikasi Jam Tangan Tidak Muncul di Jam Tangan”- Pastikan ID paket yang terkait dengan benar (ID paket aplikasi jam tangan harus sama dengan ID paket aplikasi iOS +
.watchkitapp) - Pastikan kedua aplikasi tersebut ditandatangani dengan tim yang sama
- Pada perangkat fisik: Buka aplikasi Jam Tangan di iPhone → My Watch → gulir ke bawah untuk menemukan aplikasi Anda → aktifkan ON
Pesan Tidak Diterima
Judul bagian “Pesan Tidak Diterima”- Verifikasi kedua aplikasi tersebut memiliki WCSession yang diaktifkan
- Cek
isReachablesebelum mengirim pesan - Untuk pengiriman yang dijamin, gunakan
transferUserInfodaripadasendMessage - Pastikan pendengar terdaftar sebelum perangkat lain mengirim pesan
”Sesi Tidak Diaktifkan” Error
Judul Bagian: "Error Aktivasi Sesi Tidak Aktif"- Panggil
WatchConnector.shared.activate()di awal siklus aplikasi - Pada iOS, plugin diaktifkan secara otomatis - pastikan plugin diimpor
- Periksa bahwa kemampuan WatchConnectivity ditambahkan ke target iOS
Error Pembangunan dengan CapgoWatchSDK
Judul Bagian: "Error Pembangunan dengan CapgoWatchSDK"- Pastikan paket ditambahkan ke target jam, bukan target iOS
- Membersihkan folder pembangunan: Produk → Membersihkan Folder Pembangunan (Cmd + Shift + K)
- Mengatur ulang cache paket: File → Paket → Mengatur Ulang Cache Paket
Masalah Simulator
Bagian berjudul “Masalah Simulator”- Mengatur ulang simulator: Perangkat → Menghapus Semua Konten dan Pengaturan
- Pastikan simulator iOS dan watchOS adalah pasangan yang kompatibel
- Kedua simulator harus berjalan untuk komunikasi dapat berfungsi
Langkah-Langkah Selanjutnya
Bagian berjudul “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
Bagian berjudul “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