Weitermachen von der Erstellung einer watchOS-App

Diese Anleitung führt Sie durch die Erstellung einer watchOS-Komponenten-App von Grund auf, einschließlich der Projektierung in Xcode, der Integration des CapgoWatchSDK und der Erstellung einer funktionsfähigen watch-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 das neueste watchOS SDK)
• Ein bestehendes Capacitor iOS-Projekt (ausführen) npx cap add ios If Sie noch nicht registriert sind, registrieren Sie sich für ein Konto bei Apple Developer.
• Apple-Entwicklerkonto (Ein kostenloses Konto reicht für die Entwicklung aus)

Übersicht über die Projektstruktur

Nach Abschluss dieses Leitfadens wird Ihr Projekt diese Struktur haben:

• Verzeichnisios/

  • VerzeichnisApp/

    • VerzeichnisApp/ Ihre Hauptanwendung für iOS

      • …
    • App.xcodeproj
    • App.xcworkspace (Verwenden Sie dies, um das Projekt zu öffnen)
    • Podfile
  • VerzeichnisMyWatch/ Verzeichnis

    • MyWatch/Quelle für die Uhranwendung MyWatchApp.swift

      • Verzeichnis
      • ContentView.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

Achtung

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

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

1. In Xcode gehen Sie zu Datei → Neu → Ziel…

2. In der Vorlagenauswahl:

   • Wählen Sie watchOS Registerkarte oben
   • Wählen Sie App
   • Klicken Sie Weiter

3. Konfigurieren Sie Ihre Uhranwendung:

   • Produktname: MyWatch (oder Ihr bevorzugter Name)
   • Team: Wählen Sie Ihr Apple-Entwicklerteam
   • Organisations-Identifier: Sollte Ihrem iOS-App entsprechen (z.B. app.capgo)
   • Bundle-Identifier: Wird automatisch generiert (z.B., app.capgo.myapp.watchkitapp)
   • Sprache: Swift
   • Benutzeroberfläche: SwiftUI
   • Arten von Watch-Apps: App (nicht App für bestehende iOS-App)
   • Ablehnen Benachrichtigungsszene einschließen (es sei denn, Sie benötigen es)
   • Ablehnen Komplikation einschließen (es sei denn, Sie benötigen es)

4. Klicken Sie Abschließen

5. Wenn Sie aufgefordert werden, ‘MyWatch’-Schematismus zu aktivieren, klicken Sie Aktivieren

Schritt 3: Konfigurieren Sie die Einstellungen für die Uhranwendung

1. Gehen Sie in den Projekt- Navigator (linkes Seitenleisten-Element), wählen Sie Ihr Projekt (das blaue Icon oben)

2. Wählen Sie Ihr Ziel für die Uhr (z.B. ‘MyWatch’) aus der Liste der Ziele

3. Gehen Sie zu der Allgemeine Einstellungen Registerkarte:

   • Anzeigename: Der Name, der unter dem App-Icon angezeigt wird (z.B. "Mein App")
   • Bundle-Identifier: Soll mit .watchkitapp
   • Version: Stimmmt mit Ihrer iOS-App-Version überein
   • Build: Stimmmt mit Ihrer iOS-App-Build-Nummer überein

4. Zu Zertifizierung und Fähigkeiten Registerkarte:

   • Aktivieren Automatisch die Signierung verwalten
   • Wählen Sie Ihr Team
   • Xcode erstellt die Bereitstellungsprofile automatisch

5. Setzen Bereitstellungs-Info:

   • Mindestens Bereitstellungen: watchOS 9.0 oder später

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

Das CapgoWatchSDK bietet eine fertige Lösung WatchConnector Klasse für Kommunikation.

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

2. In das Suchfeld eingeben:

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

3. Drücken Sie Enter und warten Sie, bis Xcode das Paket herunterlädt

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 watch target (z.B. „MeinWatch“), nicht die iOS-Anwendung
   • Klicken Sie Paket hinzufügen

Tipp

Die CapgoWatchSDK ist speziell für watchOS-Anwendungen entwickelt. Sie bietet WatchConnector, ein ObservableObject, das alle WatchConnectivity-Komplexitäten für Sie handhabt.

Schritt 5: Implementieren Sie die Uhr-App

Bereiten Sie nun die Uhr-App vor code. Ersetzen Sie die automatisch generierten Dateien durch die folgenden:

5.1 Erstellen Sie den Anwendungsstartpunkt

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. Wählen Sie im Projekt-Explorer Ihr Projekt

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

3. Gehe zu Zertifizierung und Fähigkeiten Registerkarte

4. Klicken Sie auf + Fähigkeit

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

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

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

Schritt 7: Erstellen und Ausführen

Auf Simulator ausführen

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

2. Wählen Sie einen Apple Watch-Simulator (z.B. „Apple Watch Series 9 (45mm)“)

   • 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 Button (▶️) oder drücken Sie Die iOS-Simulator wird mit beiden iPhone und Apple Watch Cmd + R

4. Run on Physical Device

Abschnitt mit dem Titel “Run on Physical Device”

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

2. Wählen Sie Ihr Watch-Schema

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

4. Klicken Sie

5. Run auf Ihrem Gerät ausführen]} Klicken Sie auf den Button (▶️) oder drücken Sie __CAPGO_KEEP_0__

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

Tipp

Um beide Apps gleichzeitig zu debuggen:

1. Lassen Sie die iOS-App zuerst laufen
2. Dann starten Sie die Watch-App mit „Debug → Attach to Process“ für die Watch

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 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)")
}

Botschaften auf 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

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

Problembehandlung

App auf Uhren nicht sichtbar

1. Stellen Sie sicher, dass die Bundle-IDs korrekt miteinander in Beziehung stehen (die Bundle-ID der Uhren-App sollte die Bundle-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 Uhren-App auf dem iPhone → Meine Uhr → scrollen Sie, um Ihre App zu finden → Aktivieren Sie sie

Nicht empfangene Nachrichten

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

”Sitzung nicht aktiviert”-Fehler

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

Build-Fehler mit CapgoWatchSDK

1. Stellen Sie sicher, dass das Paket zur Wachszieldatei hinzugefügt istnicht Zielgerät iOS
2. Ordner für den Clean-Build löschen: Produkt → Ordner für Clean-Build löschen (Cmd + Shift + K)
3. Paket-Caches zurücksetzen: Datei → Pakete → Paket-Caches zurücksetzen

Simulator-Probleme

1. Simulatoren 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 Simulatoren müssen läuft, damit die Kommunikation funktioniert

Nächste Schritte

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

Weitermachen von der Erstellung einer watchOS-App

Wenn Sie __CAPGO_KEEP_0__ verwenden Erstellung einer watchOS-App für die native Plugin-Arbeit zu planen, verbinden Sie es mit Mit @capgo/capacitor-watch für die native Fähigkeit in Mit @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, Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins, und Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen.