Crear una aplicación de reloj watchOS
Copiar una solicitud de configuración con los pasos de instalación y la guía de markdown completa para este plugin.
Esta guía te guía a través de la creación de una aplicación de compañero de reloj de 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
Sección titulada “Requisitos previos”Antes de comenzar, asegúrate de tener:
- Xcode 15 o posterior (descargar desde Mac App Store)
- macOS Sonoma o posterior (para el último watchOS SDK)
- Un proyecto iOS Capacitor existente (ejecutar
npx cap add iossi no lo has hecho) - Cuenta de desarrollador de Apple (una cuenta gratuita funciona para el desarrollo)
Resumen de la estructura del proyecto
Sección titulada “Resumen de la estructura del proyecto”Después de completar esta guía, tu proyecto tendrá esta estructura:
Directorioios/
DirectorioApp/
DirectorioApp/ (su aplicación principal de iOS)
- …
- App.xcodeproj
- App.xcworkspace (utilice esto para abrir el proyecto)
- Podfile
DirectorioMiReloj/ (nueva aplicación de reloj)
DirectorioMiReloj/ (fuente de la aplicación de reloj)
- MyWatchApp.swift
- ContentView.swift
DirectorioAssets.xcassets/
- …
- MyWatch.xcodeproj
Paso 1: Abre tu proyecto de iOS en Xcode
Sección titulada “Paso 1: Abre tu proyecto de iOS en Xcode”- Navegue a su proyecto Capacitor
ios/Appcarpeta - Abrir
App.xcworkspaceno.xcodeproj) haciendo doble clic en él - Espera a que Xcode indexe el proyecto
Paso 2: Agregar un objetivo de reloj
Sección titulada “Paso 2: Agregar un objetivo watchOS”-
En Xcode, vaya a Archivo → Nuevo → Objetivo…
-
En el selector de plantillas:
- Seleccione pantalla de watchOS pestaña en la parte superior
- Seleccione Aplicación
- Haga clic Siguiente
-
Configure su aplicación de reloj:
- Nombre del producto:
MyWatch(o el nombre que prefieras) - Equipo: Selecciona tu equipo de desarrollador de Apple
- Identificador de la organización: Debe coincidir con tu aplicación iOS (por ejemplo,
app.capgo) - Identificador de la aplicación: Se generará automáticamente (por ejemplo,
app.capgo.myapp.watchkitapp) - Idioma: Swift
- Interfaz de usuario: SwiftUI
- Tipo de aplicación de reloj: Aplicación (no aplicación para la aplicación de iOS existente)
- Deshacer Incluir escena de notificación (a menos que lo necesite)
- Deshacer Incluir complicación (a menos que lo necesite)
- Nombre del producto:
-
Hacer clic Finalizar
-
Cuando se le pregunte “Activar ‘MiReloj’ esquema?”, haga clic Activar
Paso 3: Configura Configuración de la Aplicación de Reloj
Sección titulada “Paso 3: Configura Configuración de la Aplicación de Reloj”-
En el Navegador de Proyectos (barra lateral izquierda), selecciona tu proyecto (el icono azul en la parte superior)
-
Selecciona tu objetivo de reloj (por ejemplo, “Mi Reloj”) de la lista de objetivos
-
Vaya a la página general: Nombre de la Pantalla
- : El nombre que se muestra debajo del icono de la aplicación (por ejemplo, “Mi Aplicación”)Identificador de la Caja
- : Debe terminar conVersión
.watchkitapp - __CAPGO_KEEP_0__: Sincronice la versión de su aplicación iOS
- Compilar: Sincronice el número de compilación de su aplicación iOS
-
Ir a Firma y Capabilities pestaña:
- Habilitar Administrar automáticamente la firma
- Seleccione su Equipo
- Xcode creará perfiles de configuración automáticamente
-
Configurar Información de Despliegue:
- Despliegues Mínimos: watchOS 9.0 o posterior
Paso 4: Agregar CapgoWatchSDK mediante Gestor de Paquetes de Swift
Sección titulada “Paso 4: Agregar CapgoWatchSDK mediante Gestor de Paquetes de Swift”El CapgoWatchSDK proporciona una clase lista para su uso WatchConnector para la comunicación.
-
En Xcode, vaya a Archivo → Agregar Dependencias de Paquetes…
-
En el campo de búsqueda, ingrese:
https://github.com/Cap-go/capacitor-watch.git -
Presione Enter y espere a que Xcode cargue el paquete
-
Configura el paquete:
- Regla de dependencia: “Hasta la próxima versión mayor” con “8.0.0”
- Hacer clic Agregar paquete
-
Elige qué productos agregar:
- IMPORTANTE: Solo selecciona
CapgoWatchSDK - Asegúrate de que esté agregado a tu watch target (por ejemplo, “MiWatch”), no la aplicación de iOS
- Hacer clic Agregar Paquete
- IMPORTANTE: Solo selecciona
Paso 5: Implementar la aplicación de reloj
Sección titulada “Paso 5: Implementar la aplicación de reloj”Ahora, crémos 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
Sección titulada “5.1 Crea el punto de entrada de la aplicación”Editar MyWatch/MyWatchApp.swift:
import SwiftUIimport CapgoWatchSDK
@mainstruct MyWatchApp: App { init() { // Activate WatchConnectivity when app launches WatchConnector.shared.activate() }
var body: some Scene { WindowGroup { ContentView() } }}5.2 Crea la Vista Principal
Sección titulada “5.2 Crea la Vista Principal”Editar MyWatch/ContentView.swift:
import SwiftUIimport 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 statusstruct 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()}Paso 6: Configura la aplicación de iOS para WatchConnectivity
Sección titulada “Paso 6: Configura la aplicación de iOS para WatchConnectivity”También necesita la capacidad de WatchConnectivity tu aplicación de iOS.
-
En el Navegador de Proyectos, selecciona tu proyecto
-
Selecciona tu Objetivo de aplicación de iOS (no el objetivo de reloj)
-
Ir a Registro y capacidades pestaña
-
Haga clic + Capacidad
-
Buscar y agregar WatchConnectivity (si está disponible) o puede ser agregado automáticamente
-
El plugin Capacitor maneja el lado iOS automáticamente, pero asegúrese de que su Info.plist tenga:
<key>WKCompanionAppBundleIdentifier</key><string>app.capgo.myapp.watchkitapp</string>
Paso 7: Compilar y ejecutar
Sección titulada “Paso 7: Compilar y ejecutar”Ejecutar en Simulador
Sección titulada “Ejecutar en Simulador”-
Seleccione el esquema de reloj desde el selector de esquemas (parte superior de la ventana de Xcode)
-
Seleccione 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)”)
-
Haga clic en el botón Ejecutar o presione
Cmd + R -
El simulador de iOS se lanzará con ambos iPhone y Apple Watch
Ejecutar en Dispositivo Físico
Sección titulada “Ejecutar en Dispositivo Físico”-
Conecta tu iPhone mediante USB
-
Asegúrate de que tu reloj Apple esté pairado con ese iPhone
-
Selecciona tu esquema de reloj
-
Selecciona tu reloj Apple físico desde la lista de dispositivos
-
Hacer clic Ejecutar
-
Primera vez: Puede que debas confiar en tu computadora en ambos dispositivos
Paso 8: Prueba la comunicación
Sección titulada “Paso 8: Prueba la comunicación”De iPhone (Capacitor) a Reloj
Sección titulada “De iPhone (Capacitor) a Reloj”En tu aplicación Capacitor:
import { CapgoWatch } from '@capgo/capacitor-watch';
// Check connectionconst info = await CapgoWatch.getInfo();console.log('Watch reachable:', info.isReachable);
// Send a messageif (info.isReachable) { await CapgoWatch.sendMessage({ data: { action: 'update', value: 'Hello from iPhone!' } });}De Reloj a iPhone
Sección titulada “De Reloj a iPhone”La aplicación del reloj utiliza WatchConnector:
// Send message (fire and forget)WatchConnector.shared.sendMessage(["action": "buttonTapped"])
// Send message with replyWatchConnector.shared.sendMessage(["request": "getData"]) { reply in print("Got reply: \(reply)")}Gestionar Mensajes en iPhone
Sección titulada “Gestionar Mensajes en iPhone”// Listen for messages from watchawait CapgoWatch.addListener('messageReceived', (event) => { console.log('Message from watch:', event.message); // { action: 'buttonTapped' }});
// Handle messages that need a replyawait 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
Sección titulada “Avanzado: Delegado personalizado para más control”Si necesita más control, implemente WatchConnectorDelegate:
import SwiftUIimport 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 = handlerWatchConnector.shared.activate()Solución de problemas
Sección titulada “Solución de problemas”La aplicación de reloj no aparece en el reloj
Sección titulada “La aplicación de reloj no aparece en el reloj”- Asegúrese de que los IDs de paquete estén relacionados correctamente (el ID de paquete de la aplicación de reloj debe ser el ID de paquete de la aplicación de iOS +
.watchkitapp) - Verifique que ambas aplicaciones estén firmadas con el mismo equipo
- En dispositivo físico: Abra la aplicación de reloj en el iPhone → Mi reloj → desplácese para encontrar su aplicación → active ON
No se están recibiendo mensajes
Sección titulada “No se están recibiendo mensajes”- Verificar que ambas aplicaciones tengan activada la sesión WC
- Comprobar
isReachableantes de enviar mensajes - Para una entrega garantizada, utilice
transferUserInfoen lugar desendMessage - Asegurarse de que los oyentes estén registrados antes de que el otro dispositivo envíe mensajes
Error de Sesión No Activada
Sección titulada “Error de Sesión No Activada”- Llamar
WatchConnector.shared.activate()temprano en el ciclo de vida de la aplicación - En iOS, el plugin se activa automáticamente - asegúrese de que el plugin esté importado
- Verifique que la capacidad de WatchConnectivity se haya agregado al objetivo iOS
Errores de compilación con CapgoWatchSDK
Sección titulada “Errores de compilación con CapgoWatchSDK”- Asegúrese de que el paquete se agregue al target de reloj, no al objetivo iOS
- Eliminar carpeta de compilación: Producto → Eliminar Carpeta de Compilación (Cmd + Shift + K)
- Reiniciar cachés de paquetes: Archivo → Paquetes → Reiniciar Cachés de Paquetes
Problemas del Simulador
Sección titulada “Problemas del Simulador”- Reiniciar los simuladores: Dispositivo → Borrar todo el contenido y ajustes
- Asegúrese de que los simuladores de iOS y watchOS sean pares compatibles
- Ambos simuladores deben estar en ejecución para que la comunicación funcione
Pasos Siguientes
Sección titulada “Pasos Siguientes”- API Referencia - Complete API documentación
- Patrones de Comunicación - Cuando utilizar cada método
- Ejemplo de Aplicación - Ejemplo de aplicación completo