WatchOS 앱 만들기

GitHub

이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함한 설정 지시를 복사하세요.

이 가이드는 watchOS 동반 앱을 처음부터 만들기 위해 Xcode에서 프로젝트 설정, CapgoWatchSDK 통합 및 SwiftUI를 사용하여 기능적인 watch 앱을 빌드하는 방법을 안내합니다.

필수 조건

시작하기 전에 다음을 확인하세요:

Xcode 15 이상 (Mac 앱 스토어에서 다운로드)
macOS Sonoma 이상 (최신 watchOS SDK)
기존 Capacitor iOS 프로젝트 (실행) npx cap add ios 만약 아직도),
Apple Developer 계정 (개발을 위해 무료 계정이 작동합니다)

프로젝트 구조 개요

이 가이드를 완료한 후 프로젝트는 다음 구조를 가집니다.

디렉토리ios/
- 디렉토리App/
  - 디렉토리App/ (iOS 앱)
    …
  - App.xcodeproj
  - App.xcworkspace (프로젝트를 열기 위해 사용하세요)
  - Podfile
- 폴더MyWatch/ (새로운 시계 앱)
  - 폴더MyWatch/ (시계 앱 소스)
    MyWatchApp.swift
    ContentView.swift
    폴더Assets.xcassets/
    …
  - MyWatch.xcodeproj

Step 1: iOS 프로젝트를 Xcode에서 열기

Xcode에서 Capacitor 프로젝트로 이동하세요. ios/App 폴더
열기 App.xcworkspace (아니오) .xcodeprojXcode에서 프로젝트를 열기 위해 이 파일을 더블 클릭하세요.
프로젝트가 인덱싱될 때까지 기다리세요.

워크스페이스에는 CocoaPods 의존성이 포함되어 있습니다. 프로젝트가 필요로 하는 의존성을 포함합니다.

Step 2: watchOS Target 추가 Xcode에서
파일 → 새 항목 → Target…
- 템플릿 선택기에서: watchOS 위쪽 탭
- 선택 앱
- 클릭 다음
시계 앱을 구성하세요:
- 제품 이름: MyWatch (또는 선호하는 이름)
- 팀: Apple Developer 팀을 선택하세요
- : iOS 앱과 일치해야 하는 조직 식별자: iOS 앱과 일치해야 하는 조직 식별자 (예: app.capgo)
- Bundle Identifier: 자동으로 생성됩니다 (예: app.capgo.myapp.watchkitapp)
- Language: Swift
- User Interface: SwiftUI
- Watch App Type: 앱 (기존 iOS 앱을 위한 앱이 아닌)
- Uncheck 알림 장면 포함 (알림 장면이 필요하지 않다면)
- Uncheck Include Complication (unless you need it)
Click Finish
When prompted “‘MyWatch’ scheme 활성화 하시겠습니까?”, 활성화

Step 3: Watch 앱 설정 구성

프로젝트 탐색기 (왼쪽 사이드바)에서 프로젝트를 선택하세요 (상단 blue 아이콘)
목표 기기 (예: “MyWatch”)를 선택하세요
설정 일반 탭:
- 표시 이름: 앱 아이콘 아래에 표시되는 이름 (예: "My App")
- 패키지 식별자: .watchkitapp
- 버전: iOS 앱 버전과 일치
- 빌드: iOS 앱 빌드 번호와 일치
로 이동 인증 및 기능 탭:
- 활성화 자동 서명 관리
- 선택하세요 팀
- Xcode는 자동으로 배포 프로파일을 생성합니다.
설정 배포 정보:
- 최소 배포: watchOS 9.0 이상

4단계: Swift 패키지 관리자를 통해 CapgoWatchSDK 추가

CapgoWatchSDK는 사용하기 쉬운 SDK를 제공합니다. WatchConnector 통신을 위한 클래스입니다.

Xcode에서 파일 → 패키지 의존성 추가…

검색 필드에 입력하세요:

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

엔터를 누르고 Xcode가 패키지를 가져올 때까지 기다리세요.
패키지를 구성하세요:
- 의존성 규칙: '다음 주요 버전까지' '8.0.0'
- 클릭 패키지 추가
추가할 제품을 선택하세요:
- 중요: 오직 선택 CapgoWatchSDK
- MyWatch와 같은 목표를 (예를 들어, "MyWatch"), iOS 앱이 아닌
- 클릭 패키지 추가

Step 5: Watch 앱 구현

이제 code을 생성해 보겠습니다. 자동으로 생성된 파일을 다음과 같이 교체하세요.

5.1 앱 진입점 생성

수정 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 메인 뷰 생성

수정 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: WatchConnectivity를 위한 iOS 앱 설정

또한 iOS 앱도 WatchConnectivity 기능이 필요합니다.

프로젝트 탐색기에서 프로젝트를 선택하세요.
프로젝트 iOS 앱 목표 (시계 목표가 아닌)
프로젝트 탐색기에서 인증 및 기능 탭
클릭 + 기능
WatchConnectivity 기능을 추가하세요. __CAPGO_KEEP_0__ (if available) 또는 자동으로 추가될 수 있습니다
Capacitor 플러그인은 iOS 측을 자동으로 처리하지만, Info.plist에 다음을 포함하십시오.
```
<key>WKCompanionAppBundleIdentifier</key>
<string>app.capgo.myapp.watchkitapp</string>
```

7단계: 빌드 및 실행

시뮬레이터에서 실행

시뮬레이터에서 선택:
장치 선택기에서 클릭
- Apple Watch 시뮬레이터를 선택하십시오 (예: “Apple Watch Series 9 (45mm)””)
- 시뮬레이터에서 Apple Watch를 선택하십시오
Click the Run 버튼 (▶️) 또는 Cmd + R
iOS 시뮬레이터가 아이폰과 애플 워치가 함께 시작됩니다.

실제 기기에서 실행

아이폰을 USB로 연결하세요.
아이폰과 연결된 애플 워치가 있는 것을 확인하세요.
워치 스케마를 선택하세요.
실제 애플 워치를 기기 목록에서 선택하세요.
Click Run
처음 사용: 양쪽 장치에서 컴퓨터를 신뢰해야 할 수 있습니다

8단계: 통신 테스트

iPhone (Capacitor)에서 시계로

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

From Watch to iPhone

The watch app uses 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)")
}

Handle Messages on 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'] }
  });
});

Advanced: Custom Delegate for More Control

If you need more control, implement 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()

Troubleshooting

시계 앱이 나타나지 않는 문제

시계 앱과 iOS 앱의 Bundle ID가 정확히 연결되어 있는지 확인하세요 (시계 앱의 Bundle ID는 iOS 앱의 Bundle ID와 같습니다.) .watchkitapp)
iOS 앱과 시계 앱이 동일한 팀으로 서명되어 있는지 확인하세요
실제 기기에서: iPhone에서 Watch 앱을 열고 → My Watch → 앱을 찾으세요 → 앱을 켜세요

메시지가 전달되지 않는 문제

WCSession이 활성화되어 있는지 두 앱 모두 확인하세요
Check isReachable 메시지를 전송하기 전에
보장된 전달을 위해 사용하세요 transferUserInfo __CAPGO_KEEP_0__ sendMessage
__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_4__ WatchConnector.shared.activate() __CAPGO_KEEP_5__
__CAPGO_KEEP_6__
__CAPGO_KEEP_7__

__CAPGO_KEEP_8__

__CAPGO_KEEP_10__ __CAPGO_KEEP_11__iOS가 아닌 대상
빌드 폴더를 정리하세요: Product → 빌드 폴더 정리 (Cmd + Shift + K)
패키지 캐시를 초기화하세요: File → Packages → 패키지 캐시 초기화

심уля터 문제

심уля터를 초기화하세요: Device → 모든 콘텐츠와 설정을 삭제
iOS와 watchOS 심уля터가 호환되는 pairs를 확인하세요
두 심уля터 모두 동작 중이어야 통신이 가능합니다.

다음 단계

API Reference - API 문서를 완전히 읽으세요
통신 패턴 - 각 방법을 사용할 때
예제 앱 - 완전한 작동 예제

watchOS 앱 만들기에서 계속

Capgo를 사용 중이라면 watchOS 앱 만들기 native 플러그인 작업을 계획하기 위해, 그것을 연결하세요. Using @capgo/capacitor-watch native 기능을 위한 Using @capgo/capacitor-watch, Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리 내의 제품 워크플로우에 대해 Capacitor 플러그인에 의해 Capgo Capacitor 플러그인에 의해 Capgo에 의해 구현된 구체적인 구현 세부 사항에 대해 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트하는 구체적인 구현 세부 사항에 대해, Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체에 대한 제품 워크플로우에 대해