Saltar al contenido
Capgo - Desarrollar, enviar y actualizar Capacitor apps Capgo

Ejemplos y Casos de uso

GitHub

Esta guía proporciona ejemplos prácticos para patrones de aplicaciones de reloj comunes utilizando @capgo/capacitor-watchFunciona tanto para TypeScript iOS y Android; los ejemplos de interfaz de usuario de watch se muestran a continuación SwiftUI (Antiárea). Refleje los mismos payloads en Wear OS con el Rutas de Capa de Datos Example 1: Tracker de salud y fitness

Sección titulada “Example 1: Tracker de salud y fitness”

Título de la sección “Ejemplo 1: Seguimiento de Salud y Fitness”

Syncronice datos de entrenamiento entre el reloj y el teléfono.

import SwiftUI
import CapgoWatchSDK


struct WorkoutView: View {
    @ObservedObject var connector = WatchConnector.shared
    @State private var heartRate: Double = 0
    @State private var calories: Double = 0
    @State private var isTracking = false


    var body: some View {
        VStack(spacing: 12) {
            // Heart Rate Display
            HStack {
                Image(systemName: "heart.fill")
                    .foregroundColor(.red)
                Text("\(Int(heartRate)) BPM")
                    .font(.title2)
            }


            // Calories
            HStack {
                Image(systemName: "flame.fill")
                    .foregroundColor(.orange)
                Text("\(Int(calories)) cal")
            }


            // Start/Stop Button
            Button(isTracking ? "Stop" : "Start") {
                toggleTracking()
            }
            .buttonStyle(.borderedProminent)
            .tint(isTracking ? .red : .green)
        }
        .onReceive(Timer.publish(every: 1, on: .main, in: .common).autoconnect()) { _ in
            if isTracking {
                updateMetrics()
            }
        }
    }


    private func toggleTracking() {
        isTracking.toggle()
        if isTracking {
            // Notify phone that workout started
            connector.sendMessage([
                "event": "workoutStarted",
                "timestamp": Date().timeIntervalSince1970
            ])
        } else {
            // Send final summary to phone
            do {
                try connector.updateApplicationContext([
                    "workoutComplete": true,
                    "totalCalories": calories,
                    "avgHeartRate": heartRate,
                    "endTime": Date().timeIntervalSince1970
                ])
            } catch {
                print("Failed to update context: \(error)")
            }
        }
    }


    private func updateMetrics() {
        // Simulate heart rate (in real app, use HealthKit)
        heartRate = Double.random(in: 120...160)
        calories += Double.random(in: 0.1...0.3)


        // Send real-time updates if phone is reachable
        if connector.isReachable {
            connector.sendMessage([
                "heartRate": heartRate,
                "calories": calories,
                "timestamp": Date().timeIntervalSince1970
            ])
        }
    }
}

Ejemplo 2: Control Remoto de Hogar Inteligente

Ejemplo 2: Control remoto de hogar inteligente

Controla dispositivos de la casa inteligente desde tu reloj.

import SwiftUI
import CapgoWatchSDK


struct SmartHomeView: View {
    @ObservedObject var connector = WatchConnector.shared
    @State private var devices: [SmartDevice] = []
    @State private var isLoading = false


    var body: some View {
        NavigationView {
            Group {
                if isLoading {
                    ProgressView("Loading...")
                } else if devices.isEmpty {
                    Text("No devices")
                        .foregroundColor(.secondary)
                } else {
                    List(devices) { device in
                        DeviceRow(device: device, onToggle: { toggleDevice(device) })
                    }
                }
            }
            .navigationTitle("Home")
            .toolbar {
                Button(action: refreshDevices) {
                    Image(systemName: "arrow.clockwise")
                }
            }
        }
        .onAppear {
            refreshDevices()
        }
        .onChange(of: connector.lastMessage) { message in
            handleMessage(message)
        }
    }


    private func refreshDevices() {
        guard connector.isReachable else {
            // Load from cached context
            loadFromContext()
            return
        }


        isLoading = true
        connector.sendMessage(["action": "getDevices"]) { reply in
            DispatchQueue.main.async {
                isLoading = false
                if let deviceList = reply["devices"] as? [[String: Any]] {
                    devices = deviceList.compactMap { SmartDevice(from: $0) }
                }
            }
        }
    }


    private func toggleDevice(_ device: SmartDevice) {
        connector.sendMessage([
            "action": "toggleDevice",
            "deviceId": device.id,
            "newState": !device.isOn
        ]) { reply in
            DispatchQueue.main.async {
                if reply["success"] as? Bool == true {
                    // Update local state
                    if let index = devices.firstIndex(where: { $0.id == device.id }) {
                        devices[index].isOn.toggle()
                    }
                }
            }
        }
    }


    private func loadFromContext() {
        if let deviceList = connector.applicationContext["devices"] as? [[String: Any]] {
            devices = deviceList.compactMap { SmartDevice(from: $0) }
        }
    }


    private func handleMessage(_ message: [String: Any]) {
        // Handle push updates from phone
        if let update = message["deviceUpdate"] as? [String: Any],
           let deviceId = update["id"] as? String,
           let isOn = update["isOn"] as? Bool {
            if let index = devices.firstIndex(where: { $0.id == deviceId }) {
                devices[index].isOn = isOn
            }
        }
    }
}


struct SmartDevice: Identifiable {
    let id: String
    let name: String
    let type: String
    var isOn: Bool


    init?(from dict: [String: Any]) {
        guard let id = dict["id"] as? String,
              let name = dict["name"] as? String,
              let type = dict["type"] as? String,
              let isOn = dict["isOn"] as? Bool else {
            return nil
        }
        self.id = id
        self.name = name
        self.type = type
        self.isOn = isOn
    }
}


struct DeviceRow: View {
    let device: SmartDevice
    let onToggle: () -> Void


    var body: some View {
        HStack {
            Image(systemName: iconName)
                .foregroundColor(device.isOn ? .yellow : .gray)
            Text(device.name)
            Spacer()
            Toggle("", isOn: .constant(device.isOn))
                .labelsHidden()
                .onTapGesture { onToggle() }
        }
    }


    var iconName: String {
        switch device.type {
        case "light": return device.isOn ? "lightbulb.fill" : "lightbulb"
        case "thermostat": return "thermometer"
        case "lock": return device.isOn ? "lock.fill" : "lock.open"
        default: return "power"
        }
    }
}

Ejemplo 3: Centro de Notificaciones

Sección titulada “Ejemplo 3: Centro de Notificaciones”

Envía notificaciones personalizadas al reloj.

import { CapgoWatch } from '@capgo/capacitor-watch';


class NotificationService {
  async sendNotification(title: string, body: string, data?: any) {
    const info = await CapgoWatch.getInfo();


    if (info.isReachable) {
      // Send immediately if watch is reachable
      await CapgoWatch.sendMessage({
        data: {
          type: 'notification',
          title,
          body,
          data,
          timestamp: Date.now()
        }
      });
    } else {
      // Queue for later delivery
      await CapgoWatch.transferUserInfo({
        userInfo: {
          type: 'notification',
          title,
          body,
          data,
          timestamp: Date.now()
        }
      });
    }
  }


  async sendUrgentAlert(message: string) {
    // Use sendMessage for urgent alerts (requires watch to be reachable)
    const info = await CapgoWatch.getInfo();


    if (!info.isReachable) {
      console.warn('Watch not reachable for urgent alert');
      return false;
    }


    await CapgoWatch.sendMessage({
      data: {
        type: 'urgentAlert',
        message,
        haptic: 'warning',
        timestamp: Date.now()
      }
    });


    return true;
  }
}


// Usage
const notifications = new NotificationService();


// Regular notification (queued if watch unavailable)
await notifications.sendNotification(
  'Order Update',
  'Your order has shipped!',
  { orderId: '12345' }
);


// Urgent alert (requires watch to be active)
const sent = await notifications.sendUrgentAlert('Security alert: New login detected');

Ejemplo 4: Servicio de sincronización de datos

Sección titulada “Ejemplo 4: Servicio de sincronización de datos”

Mantén los datos sincronizados entre teléfono y reloj.

import { CapgoWatch } from '@capgo/capacitor-watch';


class DataSyncService {
  private syncQueue: any[] = [];
  private isSyncing = false;


  async initialize() {
    // Listen for sync requests from watch
    await CapgoWatch.addListener('messageReceivedWithReply', async (event) => {
      if (event.message.action === 'sync') {
        const data = await this.getDataForSync(event.message.lastSyncTime);
        await CapgoWatch.replyToMessage({
          callbackId: event.callbackId,
          data: { items: data, syncTime: Date.now() }
        });
      }
    });


    // Listen for data from watch
    await CapgoWatch.addListener('userInfoReceived', (event) => {
      this.handleWatchData(event.userInfo);
    });


    // Monitor connectivity for sync opportunities
    await CapgoWatch.addListener('reachabilityChanged', (event) => {
      if (event.isReachable && this.syncQueue.length > 0) {
        this.processSyncQueue();
      }
    });
  }


  // Push important data to watch (guaranteed delivery)
  async pushToWatch(data: any) {
    await CapgoWatch.transferUserInfo({
      userInfo: {
        type: 'dataUpdate',
        data,
        timestamp: Date.now()
      }
    });
  }


  // Update shared state (latest value only)
  async updateSharedState(state: any) {
    await CapgoWatch.updateApplicationContext({
      context: {
        ...state,
        lastUpdated: Date.now()
      }
    });
  }


  // Queue data for sync when watch becomes available
  queueForSync(data: any) {
    this.syncQueue.push(data);
    this.attemptSync();
  }


  private async attemptSync() {
    const info = await CapgoWatch.getInfo();
    if (info.isReachable) {
      await this.processSyncQueue();
    }
  }


  private async processSyncQueue() {
    if (this.isSyncing || this.syncQueue.length === 0) return;


    this.isSyncing = true;


    while (this.syncQueue.length > 0) {
      const item = this.syncQueue.shift();
      await CapgoWatch.transferUserInfo({ userInfo: item });
    }


    this.isSyncing = false;
  }


  private async getDataForSync(lastSyncTime: number): Promise<any[]> {
    // Return data modified since lastSyncTime
    // This would query your database/API
    return [];
  }


  private handleWatchData(data: any) {
    console.log('Received from watch:', data);
    // Process and save data from watch
  }
}

Consejos para una buena práctica

Sección titulada “Buenas prácticas”

1. Elige el método de transferencia adecuado

Sección titulada “1. Elige el método de transferencia adecuado”
MétodoUso de casoDelivery
sendMessageInteractivo, sensible al tiempoInmediato (falla si es inalcanzable)
updateApplicationContextInteractivo, sensible al tiempoInmediato (falla si es inalcanzable)
transferUserInfoEstado de la aplicación actualSolo el valor más reciente

2. Maneje la desconexión con amabilidad

Sección titulada “2. Maneje la desconexión con amabilidad”
async function smartSend(data: any, important: boolean) {
  const info = await CapgoWatch.getInfo();


  if (info.isReachable) {
    // Send immediately
    await CapgoWatch.sendMessage({ data });
  } else if (important) {
    // Queue for later
    await CapgoWatch.transferUserInfo({ userInfo: data });
  } else {
    // Update context (will be available when watch opens app)
    await CapgoWatch.updateApplicationContext({ context: data });
  }
}

3. Minimice el tamaño de los datos

Sección titulada “3. Minimice el tamaño de los datos”
// Bad - sending large objects
connector.sendMessage(["user": fullUserObject])


// Good - send only what's needed
connector.sendMessage([
    "userId": user.id,
    "name": user.displayName,
    "avatarUrl": user.avatarUrl
])

4. Utiliza Haptics de manera adecuada

Sección titulada “4. Utilice los Haptics de manera adecuada”
import WatchKit


// Success feedback
WKInterfaceDevice.current().play(.success)


// Failure feedback
WKInterfaceDevice.current().play(.failure)


// Navigation feedback
WKInterfaceDevice.current().play(.click)


// Notification
WKInterfaceDevice.current().play(.notification)

5. Cache en el reloj

Sección titulada “5. Cache en el reloj”
class DataCache {
    private let defaults = UserDefaults.standard


    func save(_ data: [String: Any], forKey key: String) {
        if let encoded = try? JSONSerialization.data(withJSONObject: data) {
            defaults.set(encoded, forKey: key)
        }
    }


    func load(forKey key: String) -> [String: Any]? {
        guard let data = defaults.data(forKey: key),
              let dict = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else {
            return nil
        }
        return dict
    }
}

Próximos Pasos

Página titulada “Próximos Pasos”

Sigue adelante desde Ejemplos y Casos de Uso

Página titulada “Sigue adelante desde Ejemplos y Casos de Uso”

Si estás utilizando Ejemplos y Casos de Uso para planificar el trabajo de plugin nativo, conecte con Usando @capgo/capacitor-watch para la capacidad nativa en Usando @capgo/capacitor-watch Directorio de Plugins Capgo para el flujo de trabajo del producto en Directorio de Plugins Capgo Plugins Capacitor por Capgo para el detalle de implementación en Plugins 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 Ionic Enterprise Plugin Alternatives.