애플워치 앱 만들어보기 시작 !

많은 사람들이 애플워치를 살 때는 여러가지 이유가 있겠지요.
제가 애플워치를 구매한 이유에도 여러가지가 있지만 그 중에 꽤나 큰 비중을 차지했던
애플워치 앱 만들어보기 !!!

오늘 글은 그 시작에 대한 글입니다.
그래서 글의 내용이 깊지는 않겠지만 저처럼 애플워치 앱을 만들어보고 싶다면
저와 함께 이 여정의 시작을 함께 해보시면 어떨까요 ? 🎈 (목표는 여름 안에 무언가 ... 해보기 ...)

watchKit 공식문서는 여기 있습니다 :)

1. 프로젝트 파일 생성하기

언제나처럼 새프로젝트 파일을 열어봅니다
항상 눌렀던 iOS 탭이 아닌 watchOS 탭을 눌러주세요 !

그럼 이렇게 두가지의 선택지가 나옵니다.
첫번째는 앱과 워치앱을 함께 만드는 경우 / 두번째는 워치앱만 만드는 경우겠죠 ?
어떤식으로 프로젝트 파일이 생성되는지 보여드릴게요 !

iOS App with Watch App	Watch App

저는 혹시 몰라서 우선 왼쪽을 눌러서 작업을 시작했습니다 !

2. 스토리보드 구성하기

여기에서 Interface 스토리보드가 기존 iOS 앱에서 main 스토리보드,
InterfaceController가 ViewController라고 생각하시면 될 것 같아요 ㅎㅎ

스토리보드를 열어보시면 기본으로 이렇게 구성되어있습니다.
다른 뷰들은 alert 와 관련되어 있다는 생각이 드네요.. !
저는 우선 왼쪽 위의 뷰를 다루어 보았습니다.

저는 우선 이런식으로 화면 구성을 해주었습니다.
앱과는 레이아웃 구성하는 방식이 조금 다른 것 같네요. (사실 크게 차이는 없습니다)

우선 아래는 horizontal group으로 묶어서 주었고
size에서 width를 relative to container를 선택해주었습니다.
그리고 왼쪽 - 버튼을 0.2 / 라벨부분을 0.6 / 오른쪽 부분을 0.2 만큼 잡아서 3개의 합이 1이 되도록 해주었습니다.

이렇게 해주었더니 화면의 크기에 따라 구성 요소들의 크기가 유동적으로 변하는 모습을 확인할 수 있었습니다.

SE - 40mm	5 - 44mm

그리고 오늘 물 얼마나 마셨니 ? 라벨과 아래 group의 간격을 주기 위해서
둘을 vertical group으로 묶어주고 spacing을 주었습니다.

spacing 0	spacing 30

3. ViewController 구성하기

import WatchKit
import Foundation


class InterfaceController: WKInterfaceController {
    var count: Int = 0

    @IBOutlet weak var countLabel: WKInterfaceLabel!
    
    override func awake(withContext context: Any?) {
        self.countLabel.setText("\(count)잔")
    }
    
    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
    }
    
    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
    }
    
    @IBAction func minusAction() {
        if count > 0 {
        count = count - 1
        self.countLabel.setText("\(count)잔")
        }
    }
    
    @IBAction func plusAction() {
        count = count + 1
        self.countLabel.setText("\(count)잔")
    }
}

viewcontroller는 앱과 거의 같은 방식으로 구성할 수 있습니다.
Life Cycle을 확인해보시면 워치의 라이프 사이클을 좀 더 자세히 확인하실 수 있습니다.

오늘은 우선 + 와 - 버튼을 우리가 생각하는대로 작동하게끔 해보았습니다 ㅎ-ㅎ

4. 내 워치에 빌드해보기

워치와 xcode를 직접 연결하는 방법이 아니라 워치와 연결된 아이폰과 연결하여
휴대폰을 통해 빌드를 하는 방식입니다 ! 그래서 워치와 연결된 아이폰을 연결해주어야 합니다.

휴대폰을 연결하면 이렇게 자동으로 휴대폰을 통한 ~~의 애플워치 라고 뜹니다 ! (ddony는 제 휴대폰...)
이 상태로 빌드를 해줍니다 !

그럼 이렇게 ... 저기 보일랑 말랑한 회색 아이콘이 보이시나요 ...? 이렇게 저의 앱이 설치되었습니다 !

0잔	3잔

이렇게 작동도 시켜보았습니다 😄
물론 데이터가 저장되지 않기 때문에 앱을 껐다가 키면 0잔으로 시작합니다 ㅠ_ㅠ ,,,
다음에는 좀 더 앱다운 앱을 만들어보도록 할게요 ! (다음 목표는 스크롤 ~)

끝