프레임워크 통합 - watchOS 앱 만들기
이 튜토리얼에서는 SwiftUI에 대해 이미 배운 것을 많이 적용하고, 적은 노력으로 Landmarks 앱을 watchOS로 마이그레이션할 수 있는 기회를 제공합니다.
iOS 앱용으로 만든 공유 데이터 및 보기를 복사하기 전에 먼저 watchOS 대상을 프로젝트에 추가합니다. 모든 자산이 제자리에 있으면 SwiftUI 보기를 사용자 정의하여 watchOS에 세부 정보 및 목록 보기를 표시합니다.
단계에 따라 이 프로젝트를 빌드하거나 완성된 프로젝트를 다운로드하여 직접 탐색하세요.
예상 시간 : 25분
Xcode version : 13.1 이상
섹션 1
watchOS 대상 추가
watchOS 앱을 만들려면 먼저 watchOS 대상을 프로젝트에 추가하세요. Xcode는 watchOS 앱에 대한 그룹 및 파일을 앱을 빌드하고 실행하는 데 필요한 체계와 함께 프로젝트에 추가합니다.
1 단계
파일 > 새로 만들기 > 대상을 선택합니다. 템플릿 시트가 나타나면 watchOS 탭을 선택하고 iOS 앱용 Watch App 템플릿을 선택한 후 다음을 클릭합니다.
이 템플릿은 iOS 앱을 동반자로 설정하여 프로젝트에 새로운 watchOS 앱을 추가합니다.
2 단계
시트에서 제품 이름으로 WatchLandmarks를 입력합니다. Interface를 SwiftUI로, Life Cycle을 SwiftUI App으로, Language를 Swift로 설정합니다. 알림 장면 포함 확인란을 선택한 다음 마침을 클릭합니다.
3단계
Xcode에서 WatchLandmarks(Complication) 구성표를 활성화하라는 메시지가 표시되면 취소를 클릭합니다.
대신 다음에 선택하는 WatchLandmarks 체계로 시작하고 싶을 것입니다.
4단계
WatchLandmarks 구성표를 선택하십시오.
이를 통해 watchOS 앱을 빌드하고 실행할 수 있습니다.
5단계
WatchLandmarks Extension 프로젝트를 선택하고 프로젝트의 일반 탭으로 이동합니다. iOS 앱 설치 없이 실행 지원 확인란을 선택합니다.
가능하면 독립적인 watchOS 앱을 만드십시오. 독립 watchOS 앱에는 iOS 컴패니언 앱이 필요하지 않습니다.
섹션 2
대상 간에 파일 공유
watchOS 대상이 설정되면 iOS 대상에서 일부 리소스를 공유해야 합니다. Landmark 앱의 데이터 모델, 일부 리소스 파일 및 두 플랫폼이 수정 없이 표시할 수 있는 모든 보기를 재사용합니다.
먼저 watchOS 앱의 진입점을 삭제합니다. LandmarksApp.swift에 정의된 진입점을 대신 재사용하기 때문에 필요하지 않습니다 .
1 단계
프로젝트 네비게이터에서 WatchLandmarks Extension 폴더의 첫 번째 항목을 삭제합니다. 메시지가 표시되면 휴지통으로 이동을 선택합니다.
이 파일에는 Watch 관련 앱 정의가 있습니다. 이름은 Xcode 프로젝트 이름에 따라 다르지만 항상 WatchLandmarks Extension 그룹의 첫 번째 항목입니다. 다음 몇 단계에서 대신 iOS 앱 정의를 재사용합니다.
다음으로 watchOS 대상이 기존 iOS 대상과 공유할 수 있는 앱의 진입점을 포함하여 모든 파일을 선택합니다.
2 단계
프로젝트 네비게이터에서 Command-클릭하여 다음 파일을 선택하십시오. LandmarksApp.swift, LandmarkList.swift, LandmarkRow.swift, CircleImage.swift, MapView.swift
첫 번째는 공유 앱 정의입니다. 나머지는 앱이 변경 없이 watchOS에 표시할 수 있는 보기입니다.
3단계
계속 Command 키를 누른 상태에서 클릭하여 다음 모델 파일을 추가합니다. ModelData.swift, Landmark.swift, Hike.swift, Profile.swift
이러한 항목은 앱의 데이터 모델을 정의합니다. 모델의 모든 측면을 사용하지는 않겠지만 앱을 성공적으로 컴파일하려면 모든 파일이 필요합니다.
4단계
모델에서 로드한 리소스 파일(landmarkData.json, hikeData.json 및 Assets.xcassets ) 을 추가하려면 Command 키를 누른 상태에서 클릭하십시오.
5단계
파일 속성에서 Target Membership 섹션의 WatchLandmarks Extension 확인란을 선택합니다.
이렇게 하면 이전 단계에서 선택한 기호를 watchOS 앱에서 사용할 수 있습니다.
마지막으로 이미 가지고 있는 iOS 앱 아이콘과 일치하는 watchOS 앱 아이콘을 추가합니다.
6단계
WatchLandmarks 폴더에서 Assets.xcasset 파일을 선택하고 빈 AppIcon 항목을 삭제합니다.
다음 단계에서 이것을 교체합니다.
7단계
다운로드한 프로젝트의 리소스 폴더에서 AppIcon.appiconset 폴더를 WatchLandmark의 자산 카탈로그로 드래그하십시오 .
나중에 알림을 만들 때 알림의 출처를 식별하는 데 도움이 되도록 시스템에서 앱 아이콘을 표시합니다.
섹션 3
상세도 만들기
이제 시계 앱에서 작업하기 위한 iOS 대상 리소스가 준비되었으므로 랜드마크 세부 정보를 표시하기 위한 시계 전용 보기를 만들어야 합니다. 상세 보기를 테스트하기 위해 가장 큰 시계 크기와 가장 작은 시계 크기에 대한 사용자 정의 미리 보기를 만들고 모든 것이 시계 화면에 맞도록 원형 보기를 약간 변경합니다.
1 단계
LandmarkDetail.swift 라는 WatchLandmarks Extension 폴더에 새 사용자 정의 보기를 추가하십시오 .
이 파일은 대상 멤버십에 의해 iOS 프로젝트에서 동일한 이름을 가진 파일과 구별됩니다. 이는 Watch Extension 대상에만 적용됩니다.
2 단계
modelData, .landmark 및 landmarkIndex 속성을 새 LandmarkDetail 구조에 추가합니다
사용자 입력 처리에서 추가한 속성과 동일합니다 .
3단계
미리 보기에서 모델 데이터의 인스턴스를 만들고 이를 사용하여 LandmarkDetail 구조의 이니셜라이저에 랜드마크 개체를전달합니다. 또한 뷰의 환경 개체를 설정해야 합니다.
4단계
body() 메서드에서 CircleImage 뷰를 반환합니다 .
여기 에서 iOS 프로젝트의 CircleImage 뷰를 재사용합니다. 크기 조정 가능한 이미지를 만들었으므로 scaledToFill()에 대한 호출 은 표시를 채우도록 원의 크기를 조정합니다.
5단계
가장 큰 시계 모드(44mm)와 가장 작은 시계 모드(40mm)에 대한 미리 보기를 만듭니다.
가장 큰 시계 모드와 가장 작은 시계 모드에 대해 테스트하여 앱이 디스플레이에 맞게 얼마나 잘 확장되는지 확인할 수 있습니다. 항상 그렇듯이 지원되는 모든 장치 크기에서 사용자 인터페이스를 테스트해야 합니다.
원 이미지의 크기가 디스플레이를 채우도록 조정됩니다. 불행히도 이로 인해 클리핑이 발생합니다. 클리핑 문제를 해결하려면 에 이미지를 포함 VStack하고 원형 이미지가 모든 시계에 맞도록 레이아웃을 추가로 변경합니다.
6단계
VStack에 원 이미지를 포함합니다. 이미지 아래에 랜드마크 이름과 해당 정보를 표시합니다.
보시다시피 정보가 시계 화면에 잘 맞지 않지만 VStack스크롤 보기 내에 배치하여 수정할 수 있습니다.
7단계
스크롤 보기에서 세로 스택을 래핑합니다.
이렇게 하면 보기 스크롤이 켜지지만 다른 문제가 발생합니다. 이제 원 이미지가 전체 크기로 확장되고 이미지 크기에 맞게 다른 UI 요소의 크기가 조정됩니다. 원과 랜드마크 이름만 화면에 나타나도록 원 이미지의 크기를 조정해야 합니다.
8단계
scaleToFill() 을 scaleToFit()으로 변경 하고 패딩을 추가합니다.
이렇게 하면 디스플레이의 너비와 일치하도록 원 이미지의 크기가 조정되고 랜드마크 이름이 원 이미지 아래에 표시됩니다.
9단계
구분선 뒤에 MapView를 추가합니다.
지도가 화면 밖에 나타나지만 실시간 미리보기를 활성화하면 아래로 스크롤하여 지도를 볼 수 있습니다.
10단계
뒤로 버튼에 제목을 추가합니다.
이것은 뒤로 버튼의 텍스트를 "랜드마크"로 설정합니다.
섹션 4
랜드마크 목록 추가
iOS용으로 생성한 LandmarkList 시계 앱에서도 작동하며 watchOS용으로 컴파일할 때 방금 만든 시계별 세부 정보 보기로 자동으로 이동합니다. 다음으로 목록을 시계의 ContentView에 연결하여 시계 앱의 최상위 보기 역할을 합니다.
1 단계
WatchLandmarks Extension 폴더에서 ContentView.swift를 선택합니다.
LandmarkDetail.swift와 마찬가지로 watchOS 대상에 대한 콘텐츠 보기는 iOS 대상에 대한 것과 동일한 이름을 갖습니다. 이름과 인터페이스를 동일하게 유지하면 대상 간에 파일을 쉽게 공유할 수 있습니다.
watchOS 앱의 루트 보기는 기본 "Hello, World!"를 표시합니다. 메시지.
2 단계
목록 보기를 표시하도록 ContentView 수정 합니다.
미리보기에 환경 개체로 모델 데이터를 제공해야 합니다. LandmarksApp은 이미 iOS에서와 마찬가지로 런타임 시 앱 수준에서 이를 제공하지만 필요한 모든 미리 보기에도 제공해야 합니다 .
3단계
실시간 미리보기를 시작하여 앱이 어떻게 작동하는지 확인하세요.
섹션 5
사용자 정의 알림 인터페이스 만들기
watchOS용 Landmarks 버전이 거의 완성되었습니다. 이 마지막 섹션에서는 즐겨찾는 위치 중 하나에 가깝다는 알림을 받을 때마다 랜드마크 정보를 표시하는 알림 인터페이스를 만듭니다.
메모
이 섹션에서는 알림을 받은 후 알림을 표시하는 방법에 대해서만 설명합니다. 알림을 설정하거나 보내는 방법은 설명하지 않습니다.
1 단계
NotificationView.swift를 열고 랜드마크, 제목 및 메시지에 대한 정보를 표시하는 뷰를 만듭니다.
모든 알림 값이 가 될 수 있기 때문에 nil 미리 보기에는 두 가지 버전의 알림 보기가 표시됩니다. 첫 번째는 데이터가 제공되지 않은 경우 기본값을 표시하고 두 번째는 제공한 제목, 메시지 및 위치를 표시합니다.
2 단계
NotificationController를 열고 landmark, title 및 message 속성 을 추가합니다 .
이러한 속성은 수신 알림에 대한 값을 저장합니다.
3단계
body()이러한 속성을 사용 하려면 메서드를 업데이트하세요 .
이 메서드는 이전에 만든 알림 뷰를 인스턴스화합니다.
4단계
LandmarkIndexKey를 정의합니다 .
이 키를 사용하여 알림에서 랜드마크 인덱스를 추출합니다.
5단계
알림에서 데이터를 구문 분석하도록 didReceive(_:) 메서드를 업데이트합니다 .
이 메서드는 컨트롤러의 속성을 업데이트합니다. 이 메서드를 호출하면 시스템이 컨트롤러의 body속성을 무효화하여 탐색 뷰를 업데이트합니다. 그러면 시스템이 Apple Watch에 알림을 표시합니다.
Apple Watch는 알림을 수신하면 알림 카테고리와 연결된 앱의 장면을 찾습니다.
6단계
LandmarksApp.swift로 이동하여 LandmarkNear 카테고리를 사용하여 WKNotificationScene을 추가 합니다 .
장면은 watchOS에서만 의미가 있으므로 조건부 컴파일을 추가하십시오.
LandmarkNear 카테고리를 사용하고 알림 컨트롤러에서 예상하는 데이터를 전달 하도록 테스트 페이로드를 구성합니다.
7단계
PushNotificationPayload.apns 파일을 선택하고 title, body, category 및 landmarkIndex 속성 을 업데이트합니다 . 카테고리로 설정 해야 합니다 . subtitle, WatchKit Simulator Actions 및 customKey 와 같이 자습서에서 사용되지 않은 키도 삭제합니다 .
페이로드 파일은 원격 알림에서 서버에서 보낸 데이터를 시뮬레이션합니다.
8단계
Landmarks-Watch(Notification) 체계를 선택하고 앱을 빌드하고 실행합니다.
알림 체계를 처음 실행하면 시스템에서 알림을 보낼 수 있는 권한을 요청합니다. 허용을 선택합니다.
9단계
권한을 부여한 후 시뮬레이터는 Landmarks 앱을 발신자로 식별하는 데 도움이 되는 앱 아이콘, 알림 보기 및 알림 작업에 대한 버튼을 포함하는 스크롤 가능한 알림을 표시합니다.
https://developer.apple.com/tutorials/swiftui/creating-a-watchos-app