Saltar al contenido

Crear una aplicación de reloj de Apple

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.

Antes de comenzar, asegúrate de tener:

  • Xcode 15 o posterior (descarga desde Mac App Store)
  • macOS Sonoma o posterior (para el último watchOS SDK)
  • Un proyecto de iOS existente Capacitor (corre npx cap add ios si no has hecho esto)
  • cuenta de desarrollador de Apple (funciona una cuenta gratuita para el desarrollo)

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

  • Directorioios/
    • DirectorioApp/
      • DirectorioApp/ Tu aplicación principal de iOS
      • App.xcodeproj
      • App.xcworkspace Utiliza esto para abrir el proyecto
      • Podfile
    • DirectorioMyWatch/ Directorio
      • MyWatch/Fuente de la aplicación de reloj MyWatchApp.swift
        • Directorio
        • ContentView.swift
        • DirectorioAssets.xcassets/
      • MyWatch.xcodeproj
  1. Navegue hasta su proyecto Capacitor ios/App carpeta
  2. Abrir App.xcworkspace no .xcodeprojpor doble clic
  3. Esperar a que Xcode indexe el proyecto
  1. En Xcode, vaya a Archivo → Nuevo → Objetivo…

  2. En el selector de plantillas:

    • Seleccione watchOS pestaña en la parte superior
    • Seleccionar App
    • Hacer clic Siguiente
  3. Configura tu aplicación de reloj:

    • Nombre del producto: MyWatch (o tu nombre preferido)
    • Equipo: Selecciona tu equipo de desarrolladores de Apple
    • Identificador de 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 Aplicación de iOS Existente)
    • Deshacer Incluir Scene de Notificación (a menos que lo necesite)
    • Deshacer Incluya Complicación (a menos que lo necesite)
  4. Haga clic Terminar

  5. Cuando se le pregunte “Activar el esquema ‘MyWatch’?”, haga clic Activar

Paso 3: Configure la configuración de la aplicación de reloj

Sección titulada “Paso 3: Configure la configuración 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, “MyWatch”) de la lista de objetivos

  3. Vaya a la General pestaña:

    • Nombre de pantalla: El nombre mostrado debajo del icono de la aplicación (por ejemplo, “Mi App”)
    • Identificador de paquete: Debe terminar con .watchkitapp
    • Versión: Coincidir con la versión de tu aplicación iOS
    • Número de compilación: Coincidir con el número de compilación de tu aplicación iOS
  4. Ir a Firma y capacidades pestaña:

    • Habilitar Gestionar automáticamente la firma
    • Seleccione su Equipo
    • Xcode creará perfiles de configuración de forma automática
  5. Establecer Info de despliegue:

    • Despliegues mínimos: watchOS 9.0 o posterior

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

Título de la sección “Paso 4: Agregue CapgoWatchSDK mediante el Administrador de Paquetes de Swift”

El CapgoWatchSDK proporciona un conjunto de desarrollo listo para usar WatchConnector clase para comunicación.

  1. En Xcode, ve a Archivo → Agregar Dependencias de Paquetes…

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

    https://github.com/Cap-go/capacitor-watch.git
  3. Presiona Enter y espera a que Xcode cargue el paquete

  4. Configura el paquete:

    • Regla de dependencia: “Hasta la próxima versión mayor” con “8.0.0”
    • Haz clic Agregar Paquete
  5. Elige qué productos agregar:

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

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

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

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

Paso 6: Configura la aplicación de iOS para WatchConnectivity

Sección titulada “Paso 6: Configure la aplicación iOS para WatchConnectivity”

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

  1. En el Navegador de Proyecto, seleccione su proyecto

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

  3. Vaya a Firma y capacidades pestaña

  4. Haga clic en + Capacidad

  5. Busque y agregue Conectividad de reloj (si está disponible) o puede ser agregado 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>
  1. Seleccione su esquema de reloj desde el selector de esquemas (en la parte superior de la ventana de Xcode)

  2. Elegir 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. Haz clic en el botón Ejecutar o presiona Cmd + R

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

  1. Conecta tu iPhone mediante USB

  2. Asegúrate de que tu Apple Watch esté pairado con ese iPhone

  3. Selecciona tu esquema de reloj

  4. Selecciona tu Apple Watch física desde la lista de dispositivos

  5. Haz clic Ejecutar

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

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

La aplicación del 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)")
}
// 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

Sección titulada “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()
  1. 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)
  2. Verifique que ambas aplicaciones estén firmadas con el mismo equipo
  3. En un dispositivo físico: Abra la aplicación de reloj en el iPhone → Mi reloj → desplácese para encontrar su aplicación → active
  1. Verifique que ambas aplicaciones tengan activada la sesión de WC
  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
  1. Llamar WatchConnector.shared.activate() temprano en el ciclo de vida de la aplicación
  2. En iOS, el plugin se activa automáticamente - asegúrese de que el plugin esté importado
  3. Verifique que la capacidad de WatchConnectivity esté agregada al objetivo iOS
  1. Asegúrese de que el paquete esté agregado a la meta de relojNo objetivo iOS
  2. Limpiar carpeta de compilación: Producto → Limpiar Carpeta de Compilación (Cmd + Shift + K)
  3. Resetear cachés de paquetes: Archivo → Paquetes → Resetear Cachés de Paquetes
  1. Resetear los simuladores: Aparato → Borrar todo el contenido y ajustes
  2. Asegurarse de que los simuladores de iOS y watchOS sean pares compatibles
  3. Ambos simuladores necesitan estar en ejecución para que la comunicación funcione