,

Diese Anleitung führt Sie durch die Erstellung einer watchOS-Kompanion-App von Grund auf, einschließlich Projekt-Einrichtung in Xcode, Integration des CapgoWatchSDK und der Erstellung einer funktionsfähigen Uhr-App mit SwiftUI.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Xcode 15 oder später (herunterladen vom Mac App Store)
• macOS Sonoma oder später (für die neueste Version von watchOS SDK)
• Eine bestehende Capacitor-iOS-Projekt (ausführen, wenn Sie noch nicht haben) npx cap add ios Ein Apple-Entwicklerkonto
• (ein kostenloses Konto reicht für die Entwicklung aus) Voraussetzungen

Projektstrukturübersicht

Nach Abschluss dieser Anleitung wird Ihr Projekt diese Struktur haben:

• Verzeichnisios/

  • VerzeichnisApp/

    • Verzeichnis(Ihr Haupt-iOS-Anwendung) App.xcodeproj

      • …
    • App.xcworkspace
    • __CAPGO_KEEP_0__ (use this to open the Projekt)
    • Podfile
  • VerzeichnisMyWatch/ (neue Uhr app)

    • VerzeichnisMyWatch/ (Quelle der Uhr app)

      • MyWatchApp.swift
      • ContentView.swift
      • VerzeichnisAssets.xcassets/

        • …
    • MeineWatch.xcodeproj

Schritt 1: Öffnen Sie Ihr iOS-Projekt in Xcode

1. Navigieren Sie zu Ihrem Capacitor-Projekt in Ihrem ios/App Ordner
2. Öffnen App.xcworkspace (nicht .xcodeproj) durch Doppelklicken darauf
3. Warten Sie, bis Xcode das Projekt indexiert

Vorsicht

Öffnen Sie immer das .xcworkspace Datei, nicht .xcodeprojDie Arbeitsumgebung enthält CocoaPods-Abhängigkeiten, die Ihr Projekt benötigt.

Schritt 2: Fügen Sie einen watchOS-Ziel hinzu

1. Gehen Sie in Xcode zu Datei → Neues → Ziel…

2. In der Vorlagenauswahl:

   • Wählen Sie watchOS Registerkarte oben
   • Wählen Sie App
   • Klicken Sie Zurück

3. Konfigurieren Sie Ihre Uhranwendung:

   • Produktname: MyWatch (oder Ihr bevorzugter Name)
   • Team: Wählen Sie Ihr Apple-Entwicklerteam
   • Organisations-Identifier: Sollte Ihrem iOS-App (z.B. app.capgo)
   • Bundle-Identifier: Wird automatisch generiert (z.B. app.capgo.myapp.watchkitapp)
   • SpracheSwift
   • BenutzerschnittstelleSwiftUI
   • Arten von Apple Watch AppsApp (keine App für bestehende iOS-App)
   • Entfernen Benachrichtigungen einschließen (es sei denn, Sie benötigen es)
   • Entfernen Komplikationen einschließen (es sei denn, Sie benötigen es)

4. Klicken Abschließen

5. Wenn Sie aufgefordert werden “Die ‘MyWatch’-Schematik aktivieren?”, klicken Sie Aktivieren

Schritt 3: Konfigurieren Sie die Watch-App-Einstellungen

1. Wählen Sie in der Projekt-Navigator-Leiste (links) Ihr Projekt (das blaue Icon oben) aus

2. Wählen Sie Ihr Watch-Target (z.B. “MyWatch”) aus der Liste der Ziele

3. Gehe zur Allgemein Registerkarte:

   • Anzeigename:Der Name, der unter der App-Icon-Anzeige angezeigt wird (z.B. “Meine App”)
   • Bundleschlüssel: Soll mit .watchkitapp
   • Version: Passen Sie Ihre iOS-Anwendungsversion an
   • Build: Passen Sie Ihre iOS-Buildnummer an

4. Zu Zertifizierung und Fähigkeiten tab:

   • Aktivieren Automatisch die Zertifizierung verwalten
   • Wählen Sie Ihr Team
   • Xcode wird Provisionierungsprofile automatisch erstellen

5. Setzen Deployments-Info:

   • Mindestanforderungen an Deployments: watchOS 9.0 oder später

Schritt 4: Fügen Sie CapgoWatchSDK über Swift Package Manager hinzu

Das CapgoWatchSDK bietet eine fertige Lösung für die Kommunikation. WatchConnector In Xcode gehen Sie zu

1. Datei → Abhängigkeiten hinzufügen… Die CapgoWatchSDK bietet eine fertige Lösung für die Kommunikation.

2. In der Suchfeld, eingeben:

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

3. Drücken Sie Enter und warten Sie, bis Xcode das Paket abruft

4. Konfigurieren Sie das Paket:

   • Abhängigkeitsregel: „Bis zur nächsten Hauptversion“ mit „8.0.0“
   • Klicken Sie Paket hinzufügen

5. Wählen Sie, welche Produkte hinzugefügt werden sollen:

   • WICHTIG: Wählen Sie nur CapgoWatchSDK
   • Stellen Sie sicher, dass es zu Ihren Produkten hinzugefügt ist Zielgerät überwachen (z. B. „Mein Uhr“), nicht die iOS-Anwendung
   • Klicken Paket hinzufügen

Tipp

Es ist speziell für watchOS-Anwendungen entwickelt und bietet CapgoWatchSDK , eine ObservableObject, die alle WatchConnectivity-Komplexitäten für Sie handhabt. WatchConnectorSchritt 5: Implementieren Sie die Uhranwendung

Abschnitt mit dem Titel „Schritt 5: Implementieren Sie die Uhranwendung“

Now let’s create the watch app code. Replace the auto-generated files with the following:

5.1 App-Einstiegspunkt erstellen

Bearbeiten 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 Hauptansicht erstellen

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

Schritt 6: iOS-App für WatchConnectivity konfigurieren

Ihre iOS-App benötigt die WatchConnectivity-Fähigkeit.

1. Wählen Sie in der Projekt-Navigator Ihr Projekt aus.

2. Wählen Sie Ihr iOS App Ziel (kein Ziel für die Uhr)

3. Gehe zu Signierung und Fähigkeiten Registerkarte

4. Klicken Sie + Fähigkeit

5. Suchen Sie nach und fügen Sie WatchConnectivity (wenn verfügbar) oder es wird möglicherweise automatisch hinzugefügt

6. Das Plugin Capacitor handhabt die iOS-Seite automatisch, aber stellen Sie sicher, dass Ihr Info.plist folgende enthält:

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

Schritt 7: Erstellen und Ausführen

Auf dem Simulator ausführen

1. Wählen Sie Ihr Watch-Schema aus der Schemeselektor (oben im Xcode-Fenster)

2. Wählen Sie einen Apple Watch-Simulator:

   • Klicken Sie auf den Geräteauswahlbutton neben dem Schema
   • Wählen Sie einen Apple Watch-Simulator (z.B. „Apple Watch Series 9 (45mm)“)

3. Klicken Sie auf den Ausführen Button (▶️) oder drücken Sie Cmd + R

4. Der iOS Simulator wird mit beiden iPhone und Apple Watch gestartet

Auf physischem Gerät ausführen

1. Verbinden Sie Ihr iPhone über USB

2. Stellen Sie sicher, dass Ihr Apple Watch mit diesem iPhone pairt ist

3. Wählen Sie Ihr Watch-Schema

4. Wählen Sie Ihr physisches Apple Watch aus der Geräteliste

5. Klicken Sie Ausführen

6. Erstes Mal: Sie müssen auf beiden Geräten Ihr Computer vertrauen

Tipp

Um beide Apps gleichzeitig zu debuggen:

1. Zuerst das iOS-App ausführen
2. Dann die Watch-App mit „Debug → Prozess anhängen“ für die Watch ausführen

Schritt 8: Kommunikation testen

Von iPhone (Capacitor) zu Watch

In Ihrer Capacitor-App:

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

Von Watch zu iPhone

Die Watch-App verwendet 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)")
}

Nachrichten auf iPhone verarbeiten

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

Erweitert: Benutzerdefinierte Delegate für mehr Kontrolle

Wenn Sie mehr Kontrolle benötigen, implementieren Sie 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()

Fehlersuche

App auf Uhr nicht sichtbar

1. Sicherstellen, dass die Bundle-IDs korrekt miteinander in Beziehung stehen (Watch-App-Bundle-ID sollte iOS-App-Bundle-ID + .watchkitapp)
2. Überprüfen, ob beide Apps mit demselben Team signiert sind
3. Bei physischem Gerät: Öffnen Sie die Watch-App auf dem iPhone → Meine Uhr → scrollen Sie, um Ihre App zu finden → Aktivieren Sie mit der Schaltfläche

Nicht empfangene Nachrichten

1. Überprüfen Sie, ob beide Apps die WCSession aktiviert haben
2. Überprüfen isReachable vor dem Senden von Nachrichten
3. Für eine sichere Zustellung verwenden Sie transferUserInfo anstatt sendMessage
4. Sicherstellen, dass die Listener vor dem Senden von Nachrichten durch das andere Gerät registriert sind

Fehler „Sitzung nicht aktiviert“

1. Rufen Sie WatchConnector.shared.activate() frühzeitig im Lebenszyklus der App
2. On iOS aktiviert sich der Plugin automatisch - stellen Sie sicher, dass das Plugin importiert ist
3. Überprüfen Sie, ob die WatchConnectivity-Fähigkeit zur iOS-Zielgruppe hinzugefügt wurde

Build-Fehler mit CapgoWatchSDK

1. Stellen Sie sicher, dass das Paket zur Watch-Zielgruppeund nicht zur iOS-Zielgruppe
2. Ordnen Sie den Build-Ordner auf Produkt → Ordner für den Build löschen (Cmd + Shift + K)
3. Paket-Caches zurücksetzen: Datei → Pakete → Paket-Caches zurücksetzen

Simulator-Probleme

1. Die Simulator zurücksetzen: Gerät → Alle Inhalte und Einstellungen löschen
2. Stellen Sie sicher, dass iOS- und watchOS-Simulator ein kompatibles Paar sind
3. Beide Simulator müssen läuft, damit die Kommunikation funktioniert

Nächste Schritte

• API Referenz - Vollständige API Dokumentation
• Kommunikationsmuster - Wann Sie jede Methode verwenden sollten
• Beispiel-App - Vollständiges funktionierendes Beispiel

Fortsetzen Sie von der Erstellung einer App für watchOS

Wenn Sie native Plugin-Arbeit planen, verbinden Sie es mit Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-watch für die native Fähigkeit in Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-watch Using @capgo/capacitor-watch for the native capability in Using @capgo/capacitor-watch, Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren, und Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen.