Créer une application watchOS

Ce guide vous guide à travers la création d'une watchOS complémentaire à partir de zéro, y compris la configuration du projet dans Xcode, l'intégration de l'API CapgoWatchSDK et la création d'une application de montre fonctionnelle avec SwiftUI.

Pour OS Wear, utilisez Créer une application OS Wear au lieu de cela.

Prerequisites

Avant de commencer, assurez-vous d'avoir :

• Xcode 15 ou une version ultérieure (télécharger depuis l'App Store Mac)
• macOS Sonoma ou une version ultérieure (pour la dernière version de watchOS SDK)
• Un projet iOS existant Capacitor (lancer npx cap add ios si vous n'avez pas
• Un compte Apple Developer (un compte gratuit fonctionne pour le développement)

Structure de Projet

Après avoir terminé ce guide, votre projet aura cette structure :

• Répertoireios/

  • RépertoireApp/

    • RépertoireApp/ (votre application iOS principale)

      • …
    • App.xcodeproj
    • App.xcworkspace (utilisez celui-ci pour ouvrir le projet)
    • Podfile
  • RépertoireMonWatch/ (nouvelle application d'horloge)

    • RépertoireMonWatch/ (source de l'application d'horloge)

      • MonWatchApp.swift
      • Voir le fichier ContentView.swift
      • RépertoireAssets.xcassets/

        • …
    • MyWatch.xcodeproj

Étape 1 : Ouvrez votre projet iOS dans Xcode

1. Naviguez vers le dossier de votre projet Capacitor ios/App dossier
2. Ouvrez App.xcworkspace pas .xcodeprojdouble-cliquez dessus
3. Attendez que Xcode indexe le projet

Attention

Ouvrez toujours le .xcworkspace fichier .xcodeproj. Le workspace inclut les dépendances CocoaPods dont votre projet a besoin.

Étape 2 : Ajouter une cible watchOS

1. Allez dans Xcode Dans Xcode, allez à

2. Fichier → Nouveau → Cible…

   • Select Sélectionnez barre de navigation en haut
   • watchOS Choisissez
   • Application Suivant

3. Configurez votre application horlogère :

   • Nom du produit: MyWatch (ou votre nom préféré)
   • Équipe: Sélectionnez votre équipe de développeurs Apple
   • Identifiant de l'organisation: Should match your iOS app (e.g., app.capgo)
   • Identifiant de l'application: Sera généré automatiquement (par exemple, app.capgo.myapp.watchkitapp)
   • Langue: Swift
   • Interface Utilisateur: SwiftUI
   • Type d'Application de Montre: App (not App for Existing iOS App)
   • Désactiver Inclure la Scene de Notification (sauf si vous en avez besoin)
   • Désactiver Inclure la Complication (sauf si vous en avez besoin)

4. Cliquez Terminer

5. When prompted “Activate ‘MyWatch’ scheme?”, cliquez sur Activer

Étape 3 : Paramètres de l'application de montre

1. Dans le navigateur de projet (barre latérale gauche), sélectionnez votre projet (l'icône bleue en haut)

2. Sélectionnez votre cible de montre (par exemple, « MyWatch ») de la liste des cibles

3. Allez dans la Général tab:

   • Identifiant de l'applicationLe nom affiché sous l'icône de l'application (par exemple, “Mon application”)
   • Identifiant de Bundle: Devrait se terminer par .watchkitapp
   • Version: Correspond à votre version d'application iOS
   • Build: Match your iOS app build number

4. Allez à Onglet : Signature et Capacités tab :

   • Activer Gérer automatiquement la signature
   • Sélectionnez votre Équipe
   • Xcode créera automatiquement les profils de provisionnement.

5. Configurez Informations de déploiement:

   • Informations de déploiementMinimums de déploiement

Étape 4 : Ajoutez CapgoWatchSDK via Gestionnaire de Packages Swift

Le CapgoWatchSDK fournit un module prêt à l'emploi WatchConnector classe pour la communication.

1. Allez dans Xcode Fichier → Ajouter les dépendances de package…

2. Dans le champ de recherche, saisissez :

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

3. Appuyez sur Entrée et attendez que Xcode récupère le package

4. Configurer le package :

   • Règle de dépendance: « Jusqu'à la prochaine version majeure » avec « 8.0.0 »
   • Cliquez Ajouter un package

5. Choisissez les produits à ajouter :

   • IMPORTANT: Sélectionnez uniquement CapgoWatchSDK
   • Vérifiez qu'il est ajouté à votre cible watch (exemple : “MonWatch”), pas l’application iOS
   • Cliquer Ajouter le package

Conseil

C'est CapgoWatchSDK est spécifiquement conçu pour les applications watchOS. Il fournit WatchConnector, un objet Observable qui gère toutes les complexités de WatchConnectivity pour vous.

Étape 5 : Mettre en œuvre l'application de montre

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

Créez l'Entrée d'Application

Modifier 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 Créez la vue principale

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

Étape 6 : Configurez l'application iOS pour WatchConnectivity

Votre application iOS nécessite également la capacité WatchConnectivity.

1. Dans le navigateur de projet, sélectionnez votre projet

2. Sélectionnez votre Cible d'application iOS pas la cible de montre

3. Allez à Case de signature et de capacités Case

4. Cliquez + Capacité

5. Recherchez et ajoutez WatchConnectivity (si disponible) ou elle peut être ajoutée automatiquement

6. Le plugin Capacitor gère automatiquement le côté iOS, mais assurez-vous que votre fichier Info.plist contient :

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

Étape 7 : Construire et Exécuter

Exécuter sur le Simulateur

1. Choisissez votre schéma d'horloge à partir du sélecteur de schéma (haut de la fenêtre Xcode)

2. Choisissez un simulateur d'horloge Apple :

   • Cliquez sur le sélecteur de périphérique à côté du schéma
   • Choisissez un simulateur d'horloge Apple (par exemple, « Apple Watch Series 9 (45mm) »)

3. Cliquez sur Run Construire et exécuter Cmd + R

4. Le simulateur iOS lancera avec à la fois un iPhone et un Apple Watch.

Exécutez sur appareil physique

1. Connectez votre iPhone via USB

2. Assurez-vous que votre montre Apple est pairée avec cet iPhone

3. Sélectionnez votre schéma de montre

4. Sélectionnez votre montre Apple physique dans la liste des appareils

5. Cliquez Démarrez

6. First time: You may need to trust your computer on both devices

Tip

Pour déboguer les deux applications simultanément :

1. Exécutez l'application iOS en premier
2. Exécutez ensuite l'application de montre avec « Déboguer → Attacher au processus » pour la montre

Étape 8 : Tester la communication

De l'iPhone (Capacitor) à l'Apple Watch

Dans votre application Capacitor :

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

Sous-titre : « De la montre à l'iPhone »

Sous-titre : « De la montre à l'iPhone » 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)")
}

Manipuler les messages sur 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'] }
  });
});

Avancé : Délégué personnalisé pour plus de contrôle

Si vous avez besoin de plus de contrôle, implémentez 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()

Aide au dépannage

Application de montre ne s'affiche pas sur la montre

1. Ensure bundle IDs are correctly related (watch app bundle ID should be iOS app bundle ID + .watchkitapp)
2. Vérifiez que les deux applications sont signées avec le même équipe
3. Sur appareil physique : Ouvrez l'application Watch sur iPhone → Mon Watch → défilez pour trouver votre application → activez-le

Messages qui ne sont pas reçus

1. Vérifiez que les deux applications ont WCSession activé
2. Vérifiez isReachable avant d'envoyer des messages
3. Pour une livraison garantie, utilisez transferUserInfo au lieu de sendMessage
4. Assurez-vous que les écouteurs sont enregistrés avant que l'autre appareil n'envoie des messages

Erreur « Session Non Activée »

1. Appeler WatchConnector.shared.activate() tôt dans le cycle de l'application
2. Sur iOS, le plugin s'active automatiquement - assurez-vous que le plugin est importé
3. Vérifiez que la capacité WatchConnectivity est ajoutée à la cible iOS

Erreurs de construction avec CapgoWatchSDK

1. Assurez-vous que le package est ajouté à la cible de montreet non à la cible iOS
2. Nettoyer le dossier de construction : Produit → Nettoyer le dossier de construction (Cmd + Maj + K)
3. Réinitialiser les caches de packages : Fichier → Packages → Réinitialiser les caches de packages

Problèmes de simulateur

1. Réinitialiser les simulateurs : Appareil → Effacer tout contenu et paramètres
2. S'assurer que les simulateurs iOS et watchOS sont des paires compatibles
3. Both simulators need to be running for communication to work

Étapes suivantes

• Création d'une application Wear OS pour des montres Android
• Référence API - Documentation complète de API
• Modèles de communication - Utiliser chaque méthode quand il faut
• Example App - Exemple d'application fonctionnel complet

Continuez depuis la création d'une application watchOS

Créer une application watchOS Créer une application watchOS Utiliser @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-watch Utilisation de @capgo/capacitor-watch pour la capacité native dans l'utilisation de @capgo/capacitor-watch, Répertoire du plugin Capgo pour le flux de travail du produit dans le répertoire du plugin Capgo Plugins Capacitor par Capgo pour le détail d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour les plugins pour le détail d'implémentation dans Ajouter ou mettre à jour les plugins, et Alternatives de plugins d'entreprise Ionic Pour le flux de travail du produit dans les plugins d'entreprise Ionic.