Crear una aplicación de reloj

Esta guía te guía a través de la creación de una aplicación de compañero de reloj watchOS desde cero, incluyendo la configuración del proyecto en Xcode, la integración del CapgoWatchSDK y la creación de una aplicación de reloj funcional con SwiftUI.

Requisitos previos

Antes de comenzar, asegúrate de tener:

• Xcode 15 o posterior (descarga desde la Tienda de Mac)
• macOS Sonoma o posterior (para la última versión de watchOS SDK)
• Un proyecto de iOS existente Capacitor (corre npx cap add ios si no has hecho)
• cuenta de desarrollador de Apple una cuenta gratuita funciona para el desarrollo)

Resumen de la estructura del proyecto

Después de completar esta guía, tu proyecto tendrá esta estructura:

• Carpetaios/

  • CarpetaApp/

    • CarpetaApp/ (su aplicación principal de iOS)

      • …
    • App.xcodeproj
    • App.xcworkspace (utilice esto para abrir el proyecto)
    • Podfile
  • DirectorioMyWatch/ (nueva aplicación de reloj)

    • DirectorioMyWatch/ (fuente de la aplicación de reloj)

      • MyWatchApp.swift
      • ContentView.swift
      • DirectorioAssets.xcassets/

        • …
    • MiReloj.xcodeproj

Paso 1: Abra su proyecto de iOS en Xcode

1. Navegue hasta su proyecto Capacitor ios/App carpeta
2. Abrir App.xcworkspace (no .xcodeproj) al hacer doble clic en él
3. Espere a que Xcode indexe el proyecto

Cuidado

Siempre abre el .xcworkspace archivo, no .xcodeproj. El entorno de trabajo incluye dependencias de CocoaPods que su proyecto necesita.

Paso 2: Agregar un objetivo de reloj

1. En Xcode, vaya a Archivo → Nuevo → Objetivo…

2. En el selector de plantillas:

   • Seleccione reloj pestaña en la parte superior
   • seleccionar Aplicación
   • hacer clic Siguiente

3. Configura tu aplicación de reloj:

   • Nombre del producto: MyWatch (o el nombre que prefieras)
   • EquipoSelecciona tu equipo de desarrolladores de Apple
   • Identificador de la organizaciónDebería coincidir con tu aplicación iOS (por ejemplo, app.capgo)
   • Identificador de paquete: Se generará automáticamente (por ejemplo, app.capgo.myapp.watchkitapp)
   • Lenguajecontext
   • : SwiftInterfaz de usuario
   • : SwiftUITipo de aplicación de reloj
   • : Aplicación (no Aplicación para Aplicación de iOS existente) Deshacer Incluir escena de notificación
   • (a menos que lo necesite) Incluir Complicación (a menos que lo necesites)

4. Hacer clic Terminar

5. Cuando se le pregunte ‘Activar el esquema ‘Mi Reloj’?, haga clic Activar

Paso 3: Configurar ajustes de la aplicación de reloj

1. En el Navegador de Proyectos (barra lateral izquierda), seleccione su proyecto (el icono azul en la parte superior)

2. Seleccione su objetivo de reloj (por ejemplo, ‘Mi Reloj’) de la lista de objetivos

3. Vaya a la General pestaña:

   • Nombre de pantallaNombre de pantalla: El nombre que se muestra debajo del icono de la aplicación (por ejemplo, "Mi aplicación")
   • Identificador de paqueteIdentificador de paquete: Debe terminar con .watchkitapp
   • VersiónVersión: Coincidir con la versión de la aplicación iOS
   • CompilaciónCompilación: Coincidir con el número de compilación de la aplicación iOS

4. Ir a Firma y capacidades pestaña:

   • Activar Gestionar automáticamente la firma
   • Seleccione su Equipo
   • La aplicación Xcode creará perfiles de configuración de forma automática

5. Establecer Información de despliegue:

   • Despliegues mínimos: watchOS 9.0 o posterior

Paso 4: Agregue CapgoWatchSDK mediante el Administrador de Paquetes de Swift

El CapgoWatchSDK proporciona una solución lista para usar WatchConnector clase para la comunicación.

1. En Xcode, ve a Archivo → Agregar dependencias de paquetes…

2. En el campo de búsqueda, escribe:

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

3. Pulsa Enter y espera a que Xcode obtenga el paquete

4. Configura el paquete:

   • Regla de dependencia: “Hasta la próxima versión mayor” con “8.0.0”
   • Pulsa Agregar paquete

5. Elige qué productos agregar:

   • IMPORTANTE: Solo seleccione CapgoWatchSDK
   • Asegúrese de que esté agregado a su (por ejemplo, “MiReloj”), no la aplicación iOS Haga clic
   • Agregar Paquete Consejo

El

está diseñado específicamente para aplicaciones de watchOS. Proporciona CapgoWatchSDK , un ObservableObject que maneja todas las complejidades de WatchConnectivity por usted. WatchConnector__CAPGO_KEEP_0__

Step 5: Implementa la Aplicación de Reloj

Ahora crearemos la aplicación de reloj code. Reemplaza los archivos generados automáticamente con los siguientes:

5.1 Crea el Punto de Entrada de la Aplicación

Editar 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 Crea la Vista Principal

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

Step 6: Configura la Aplicación de iOS para WatchConnectivity

También necesita su aplicación de iOS la capacidad de WatchConnectivity.

1. En el Navegador de Proyectos, seleccione su proyecto

2. Seleccione su Objetivo de aplicación de iOS (no el objetivo de la reloj)

3. Vaya a Configuración de firmas y capacidades pantalla

4. Haga clic Agregar capacidad

5. Busque y agregue WatchConnectivity (si está disponible) o puede agregarse automáticamente

6. El plugin Capacitor maneja el lado iOS automáticamente, pero asegúrese de que su archivo Info.plist tenga:

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

Paso 7: Compilar y Ejecutar

Ejecutar en Simulador

1. Seleccione su esquema de reloj desde el selector de esquemas (en la parte superior de la ventana de Xcode)

2. Elige un simulador de reloj:

   • Haga clic en el selector de dispositivo junto al esquema
   • Seleccione un simulador de Apple Watch (por ejemplo, “Apple Watch Series 9 (45mm)”)

3. Haga clic en el Ejecutar botón (▶️) o presione Cmd + R

4. El simulador de iOS se lanzará con ambos iPhone y Apple Watch

Ejecutar en Dispositivo Físico

1. Conecte su iPhone mediante USB

2. Asegúrese de que su Apple Watch esté pairado con ese iPhone

3. Seleccione su esquema de reloj

4. Seleccione su Apple Watch física desde la lista de dispositivos

5. Haga clic Ejecutar

6. Primera vez: Puede necesitar confiar en su computadora en ambos dispositivos

Consejo

Para depurar ambas aplicaciones simultáneamente:

1. Ejecutar la aplicación de iOS primero
2. Luego ejecute la aplicación de reloj con ‘Depurar → Unirse al proceso’ para la reloj

Paso 8: Probar la comunicación

Desde iPhone (Capacitor) a Reloj

En su aplicación 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!' }
  });
}

De la aplicación de reloj a iPhone

La aplicación de reloj utiliza 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)")
}

Gestionar mensajes en 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'] }
  });
});

Avanzado: Delegado personalizado para más control

Si necesita más control, implemente 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()

Solución de problemas

La aplicación de reloj no aparece en el reloj

1. Asegúrese de que los identificadores de paquete estén relacionados correctamente (el identificador de paquete de la aplicación de reloj debe ser el identificador de paquete de la aplicación de iOS +) .watchkitapp)
2. Verifique que ambas aplicaciones estén firmadas con el mismo equipo
3. En dispositivo físico: Abra la aplicación de reloj en el iPhone → Mi reloj → desplácese para encontrar su aplicación → active ON

Los mensajes no se están recibiendo

1. Verifique que ambas aplicaciones tengan WCSession activado
2. Verifique isReachable antes de enviar mensajes
3. Para una entrega garantizada, utilice transferUserInfo en lugar de sendMessage
4. Asegúrese de que los oyentes estén registrados antes de que el otro dispositivo envíe mensajes

Error de "Sesión no activada"

1. Llamar WatchConnector.shared.activate() contexto: Llamada a una función de JavaScript en un fragmento de texto de Capgo UI (clave de página `appflow_migration_step2`). Página/área: Comparación y migración de Appflow. Rol: Copia de sitio web. Visto en: página ionic-appflow.astro. Mantener exactamente los términos de producto/marca y de desarrollador de Capgo.
2. pronto en el ciclo de vida de la aplicación
3. En iOS, el plugin se activa automáticamente - asegúrese de que el plugin esté importado

Verificar que la capacidad de WatchConnectivity se haya agregado a la objetivo de iOS

1. Título de la sección "Errores de compilación con CapgoWatchSDK" Asegúrese de que el paquete esté agregado a la objetivo de la relojNo objetivo, iOS
2. Limpiar carpeta de compilación: Producto → Limpiar Carpeta de Compilación (Cmd + Mayús + K)
3. Resetear cachés de paquetes: Archivo → Paquetes → Resetear Cachés de Paquetes

Problemas del simulador

1. Resetear los simuladores: Dispositivo → Borrar Todo y Configuración
2. Asegurarse de que los simuladores de iOS y watchOS sean pares compatibles
3. Ambos simuladores deben estar ejecutándose para que la comunicación funcione

Pasos siguientes

• API Reference - Documentación completa de API
• Patrones de comunicación - Cuando utilizar cada método
• App de ejemplo - Ejemplo de aplicación funcional

Sigue adelante desde Crear una aplicación de reloj

Si estás utilizando Crear una aplicación de reloj para planificar el trabajo de plugin nativo, conecte con Usando @capgo/capacitor-watch para la capacidad nativa en Usando @capgo/capacitor-watch Directorio de Plugin Capgo para el flujo de trabajo del producto en Directorio de Plugin Capgo Plugins de Capacitor por Capgo para el detalle de implementación en Plugins de Capacitor por Capgo Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins, y Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise.