Uhren-Repository __CAPGO_KEEP_0__

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

Before you begin, ensure you have:

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

Übersicht über die Projektstruktur

Nach Abschluss dieser Anleitung wird Ihr Projekt diese Struktur haben:

• Verzeichnisios/

  • VerzeichnisApp/

    • VerzeichnisApp/ (Ihr Haupt-App für iOS)

      • …
    • App.xcodeproj
    • App.xcworkspace (Benutzen Sie dies, um das Projekt zu öffnen)
    • Podfile
  • VerzeichnisMyWatch/ (neue Watch-Anwendung)

    • VerzeichnisMyWatch/ (Quelle der Watch-Anwendung)

      • MeinWatchApp.swift
      • InhaltView.swift
      • VerzeichnisAssets.xcassets/

        • …
    • MyWatch.xcodeproj

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

1. Navigieren Sie zu Ihrem Capacitor-Projekt ios/App Ordner
2. Öffnen App.xcworkspace nicht .xcodeprojdurch Doppelklicken
3. Warten Sie, bis Xcode das Projekt indexiert

Warnung

Öffnen Sie immer das .xcworkspace Datei .xcodeproj. Das Workspace enthält CocoaPods-Abhängigkeiten, die Ihr Projekt benötigt.

Schritt 2: Hinzufügen eines watchOS-Ziels

1. Schritt 2: Hinzufügen eines watchOS-Ziels In Xcode gehen Sie zu

2. Datei → Neues → Ziel…

   • Select Wählen Sie Oberer Reiter
   • Choose Wählen Sie
   • App Nächster

3. Konfigurieren Sie Ihre Uhranwendung:

   • Produktname: MyWatch (oder Ihren bevorzugten Namen)
   • Team: Wählen Sie Ihr Apple-Entwicklerteam
   • Organisations-Bezeichner: Sollte Ihrem iOS-App entsprechen (z.B. app.capgo)
   • Bundle-Bezeichner: Wird automatisch generiert (z.B. app.capgo.myapp.watchkitapp)
   • Sprache: Swift
   • Benutzeroberfläche: SwiftUI
   • Arten von Uhrenanwendungen: App (kein App für bestehende iOS-App)
   • Entfernen Benachrichtigungsszene einschließen (es sei denn, Sie benötigen sie)
   • Entfernen Komplikation einschließen (es sei denn, Sie benötigen sie)

4. Klicken Fertigstellen

5. When du aufgefordert wirst “‘MyWatch’-Schem aktivieren?”, klicke Aktivieren

Schritt 3: Konfiguration der Watch-App-Einstellungen

1. In der Projektnavigator (linker Seitenleiste), wähle dein Projekt (das blaue Icon oben)

2. Wähle dein Watch-Target (z.B. “MyWatch”) aus der Liste der Ziele

3. Gehe zur Allgemein tab:

   • Anzeigename: Der Name, der unter dem App-Icon angezeigt wird (z.B. “Mein App”)
   • Bundle-IdentifierSollte mit einem Punkt enden. .watchkitapp
   • Version: Passen Sie Ihre iOS-Anwendungsversion an
   • BuildPassen Sie die iOS-Anwendungsbuildnummer an

4. Gehe zu Zertifizierung & Fähigkeiten tab:

   • tab: Automatisches Signieren verwalten
   • Wählen Sie Team
   • Xcode erstellt Provisioning-Profiles automatisch

5. Setzen Bereitstellungsinformationen:

   • Zuordnungs-Informationen: watchOS 9.0 oder später

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

Der CapgoWatchSDK bietet einen fertig konfigurierten WatchConnector Klasse für die Kommunikation.

1. In Xcode gehen Sie zu Datei → Paketabhängigkeiten hinzufügen…

2. In der Suchleiste 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 Paket hinzufügen

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

   • WICHTIG: Wählen Sie nur CapgoWatchSDK
   • Stellen Sie sicher, dass es in Ihrem watch-Ziel enthalten ist z.B. "Mein Watch", nicht die iOS-Anwendung
   • Klicken Paket hinzufügen

Tipp

Der CapgoWatchSDK ist speziell für WatchOS-Anwendungen entwickelt. Es bietet WatchConnector, eine ObservableObject, die alle WatchConnectivity-Komplexitäten für Sie handhabt.

Schritt 5: Implementieren Sie die Watch App

Erstellen wir nun die Watch-App code. Ersetzen Sie die automatisch generierten Dateien durch die folgenden:

5.1 Erstellen Sie den Anwendungs-Einstiegspunkt

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 Erstellen Sie die Hauptansicht

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: Konfigurieren Sie die iOS-Anwendung für WatchConnectivity

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

1. Im Projekt-Explorer wählen Sie Ihr Projekt

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

3. Gehe zu Signierung und Fähigkeiten tab

4. Klicken Sie + Fähigkeit

5. Suchen Sie nach und fügen Sie WatchConnectivity (wenn verfügbar) oder es kann automatisch hinzugefügt werden

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

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

Schritt 7: Erstellen und Ausführen

Im Simulator ausführen

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

2. Wählen Sie einen Uhrsimulator:

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

3. Klicken Sie auf Laufen button (▶️) oder drücken Cmd + R

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

Run auf physischem Gerät

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 Laufen

6. Zuerst: Sie müssen Ihrem Computer auf beiden Geräten vertrauen

Tip

Um beide Apps gleichzeitig zu debuggen:

1. Die iOS-App zuerst ausführen
2. Dann die Uhr-App mit „Debug → Attach to Process“ für die Uhr ausführen

Schritt 8: Kommunikation testen

Von iPhone (Capacitor) zu Uhr

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 Uhr zu iPhone

Die Uhr-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 dem iPhone bearbeiten

// 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

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

Hilfe bei Problemen

App auf dem Uhr nicht sichtbar

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

Nachrichten werden nicht empfangen

1. Stellen Sie sicher, dass beide Apps WCSession aktiviert haben
2. Überprüfen isReachable bevor Nachrichten gesendet werden
3. Für eine garantierte Zustellung verwenden Sie transferUserInfo anstatt sendMessage
4. Stellen Sie sicher, dass Hörer registriert sind, bevor das andere Gerät Nachrichten sendet

„Sitzung nicht aktiviert“-Fehler

1. Anrufen WatchConnector.shared.activate() früh im App-Lebenszyklus
2. Aktiviert sich auf iOS automatisch - Importieren Sie die Plugin
3. Überprüfen Sie, ob die WatchConnectivity-Fähigkeit zum iOS-Ziel hinzugefügt wurde

Fehler beim Bauen mit CapgoWatchSDK

1. Stellen Sie sicher, dass das Paket zum watch Zielnicht zum Ziel iOS
2. Ordner für den Clean Build: Produkt → Ordner für den Clean Build (Cmd + Shift + K)
3. Package-Caches zurücksetzen: Datei → Pakete → Package-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 - API-Dokumentation abschließen
• Kommunikationsmuster - Wann verwenden Sie jede Methode
• Beispiel-App - Vollständiges funktionierendes Beispiel

Weitermachen von Creating a watchOS App

Wenn Sie Creating a watchOS App verwenden Erstellen einer watchOS-Anwendung zum Planen von native Plugin-Arbeiten, verbinden Sie es mit Verwendung von @capgo/capacitor-watch für die native Fähigkeit in Verwendung von @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.