Add "Creating a watchOS App"

Author: WillieWangWei

Framework-Integration/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -104,6 +104,90 @@
       "idiom" : "ios-marketing",
       "filename" : "landmark_app_icon_1024x1024.png",
       "scale" : "1x"
+    },
+    {
+      "size" : "24x24",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_48x48.png",
+      "scale" : "2x",
+      "role" : "notificationCenter",
+      "subtype" : "38mm"
+    },
+    {
+      "size" : "27.5x27.5",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_55x55.png",
+      "scale" : "2x",
+      "role" : "notificationCenter",
+      "subtype" : "42mm"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_58x58-2.png",
+      "role" : "companionSettings",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_87x87-1.png",
+      "role" : "companionSettings",
+      "scale" : "3x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_80x80-2.png",
+      "scale" : "2x",
+      "role" : "appLauncher",
+      "subtype" : "38mm"
+    },
+    {
+      "size" : "44x44",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_88x88.png",
+      "scale" : "2x",
+      "role" : "appLauncher",
+      "subtype" : "40mm"
+    },
+    {
+      "size" : "50x50",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_100x100.png",
+      "scale" : "2x",
+      "role" : "appLauncher",
+      "subtype" : "44mm"
+    },
+    {
+      "size" : "86x86",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_172x172.png",
+      "scale" : "2x",
+      "role" : "quickLook",
+      "subtype" : "38mm"
+    },
+    {
+      "size" : "98x98",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_196x196.png",
+      "scale" : "2x",
+      "role" : "quickLook",
+      "subtype" : "42mm"
+    },
+    {
+      "size" : "108x108",
+      "idiom" : "watch",
+      "filename" : "landmark_app_icon_216x216.png",
+      "scale" : "2x",
+      "role" : "quickLook",
+      "subtype" : "44mm"
+    },
+    {
+      "size" : "1024x1024",
+      "idiom" : "watch-marketing",
+      "filename" : "landmark_app_icon_1024x1024-1.png",
+      "scale" : "1x"
     }
   ],
   "info" : {

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_100x100.png

@@ -45,7 +45,7 @@ struct CategoryHome: View {
                 }
                 .listRowInsets(EdgeInsets())
 
-                NavigationLink(destination: LandmarkList()) {
+                NavigationLink(destination: LandmarkList { LandmarkDetail(landmark: $0) }) {
                     Text("See All")
                 }
             }

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_1024x1024-1.png

@@ -7,9 +7,11 @@ A view showing a list of landmarks.
 
 import SwiftUI
 
-struct LandmarkList: View {
+struct LandmarkList<DetailView: View>: View {
     @EnvironmentObject private var userData: UserData
 
+    let detailViewProducer: (Landmark) -> DetailView
+    
     var body: some View {
         List {
             Toggle(isOn: $userData.showFavoritesOnly) {
@@ -19,8 +21,7 @@ struct LandmarkList: View {
             ForEach(userData.landmarks) { landmark in
                 if !self.userData.showFavoritesOnly || landmark.isFavorite {
                     NavigationLink(
-                        destination: LandmarkDetail(landmark: landmark)
-                    ) {
+                    destination: self.detailViewProducer(landmark).environmentObject(self.userData)) {
                         LandmarkRow(landmark: landmark)
                     }
                 }
@@ -30,15 +31,15 @@ struct LandmarkList: View {
     }
 }
 
-struct LandmarksList_Previews: PreviewProvider {
+#if os(watchOS)
+typealias PreviewDetailView = WatchLandmarkDetail
+#else
+typealias PreviewDetailView = LandmarkDetail
+#endif
+
+struct LandmarkList_Previews: PreviewProvider {
     static var previews: some View {
-        ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
-            NavigationView {
-                LandmarkList()
-                    .previewDevice(PreviewDevice(rawValue: deviceName))
-                    .previewDisplayName(deviceName)
-            }
-        }
-        .environmentObject(UserData())
+        LandmarkList { PreviewDetailView(landmark: $0) }
+            .environmentObject(UserData())
     }
 }

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_172x172.png

@@ -0,0 +1,70 @@
+/*
+See LICENSE folder for this sample’s licensing information.
+
+Abstract:
+Helpers for loading images and data.
+*/
+
+import Foundation
+import CoreLocation
+import SwiftUI
+import ImageIO
+
+let landmarkData: [Landmark] = load("landmarkData.json")
+let features = landmarkData.filter { $0.isFeatured }
+let hikeData: [Hike] = load("hikeData.json")
+
+func load<T: Decodable>(_ filename: String, as type: T.Type = T.self) -> T {
+    let data: Data
+    
+    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
+    else {
+        fatalError("Couldn't find \(filename) in main bundle.")
+    }
+    
+    do {
+        data = try Data(contentsOf: file)
+    } catch {
+        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
+    }
+    
+    do {
+        let decoder = JSONDecoder()
+        return try decoder.decode(T.self, from: data)
+    } catch {
+        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
+    }
+}
+
+final class ImageStore {
+    typealias _ImageDictionary = [String: CGImage]
+    fileprivate var images: _ImageDictionary = [:]
+
+    fileprivate static var scale = 2
+    
+    static var shared = ImageStore()
+    
+    func image(name: String) -> Image {
+        let index = _guaranteeImage(name: name)
+        
+        return Image(images.values[index], scale: CGFloat(ImageStore.scale), label: Text(verbatim: name))
+    }
+
+    static func loadImage(name: String) -> CGImage {
+        guard
+            let url = Bundle.main.url(forResource: name, withExtension: "jpg"),
+            let imageSource = CGImageSourceCreateWithURL(url as NSURL, nil),
+            let image = CGImageSourceCreateImageAtIndex(imageSource, 0, nil)
+        else {
+            fatalError("Couldn't load image \(name).jpg from main bundle.")
+        }
+        return image
+    }
+    
+    fileprivate func _guaranteeImage(name: String) -> _ImageDictionary.Index {
+        if let index = images.index(forKey: name) { return index }
+        
+        images[name] = ImageStore.loadImage(name: name)
+        return images.index(forKey: name)!
+    }
+}

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_196x196.png

@@ -0,0 +1,31 @@
+/*
+See LICENSE folder for this sample’s licensing information.
+
+Abstract:
+The model for a hike.
+*/
+
+import SwiftUI
+
+struct Hike: Codable, Hashable, Identifiable {
+    var name: String
+    var id: Int
+    var distance: Double
+    var difficulty: Int
+    var observations: [Observation]
+
+    static var formatter = LengthFormatter()
+    
+    var distanceText: String {
+        return Hike.formatter
+            .string(fromValue: distance, unit: .kilometer)
+    }
+
+    struct Observation: Codable, Hashable {
+        var distanceFromStart: Double
+        
+        var elevation: Range<Double>
+        var pace: Range<Double>
+        var heartRate: Range<Double>
+    }
+}

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_216x216.png

@@ -0,0 +1,54 @@
+/*
+See LICENSE folder for this sample’s licensing information.
+
+Abstract:
+The model for an individual landmark.
+*/
+
+import SwiftUI
+import CoreLocation
+
+struct Landmark: Hashable, Codable, Identifiable {
+    var id: Int
+    var name: String
+    fileprivate var imageName: String
+    fileprivate var coordinates: Coordinates
+    var state: String
+    var park: String
+    var category: Category
+    var isFavorite: Bool
+    var isFeatured: Bool
+
+    var locationCoordinate: CLLocationCoordinate2D {
+        CLLocationCoordinate2D(
+            latitude: coordinates.latitude,
+            longitude: coordinates.longitude)
+    }
+    
+    var featureImage: Image? {
+        guard isFeatured else { return nil }
+        
+        return Image(
+            ImageStore.loadImage(name: "\(imageName)_feature"),
+            scale: 2,
+            label: Text(verbatim: name))
+    }
+
+    enum Category: String, CaseIterable, Codable, Hashable {
+        case featured = "Featured"
+        case lakes = "Lakes"
+        case rivers = "Rivers"
+        case mountains = "Mountains"
+    }
+}
+
+extension Landmark {
+    var image: Image {
+        ImageStore.shared.image(name: imageName)
+    }
+}
+
+struct Coordinates: Hashable, Codable {
+    var latitude: Double
+    var longitude: Double
+}

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_48x48.png

@@ -0,0 +1,30 @@
+/*
+See LICENSE folder for this sample’s licensing information.
+
+Abstract:
+An object that models a user profile.
+*/
+import Foundation
+
+struct Profile {
+    var username: String
+    var prefersNotifications: Bool
+    var seasonalPhoto: Season
+    var goalDate: Date
+    
+    static let `default` = Self(username: "g_kumar", prefersNotifications: true, seasonalPhoto: .winter)
+    
+    init(username: String, prefersNotifications: Bool = true, seasonalPhoto: Season = .winter) {
+        self.username = username
+        self.prefersNotifications = prefersNotifications
+        self.seasonalPhoto = seasonalPhoto
+        self.goalDate = Date()
+    }
+    
+    enum Season: String, CaseIterable {
+        case spring = "🌷"
+        case summer = "🌞"
+        case autumn = "🍂"
+        case winter = "☃️"
+    }
+}

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_55x55.png

@@ -0,0 +1,15 @@
+/*
+See LICENSE folder for this sample’s licensing information.
+
+Abstract:
+A model object that stores app data.
+*/
+
+import Combine
+import SwiftUI
+
+final class UserData: ObservableObject {
+    @Published var showFavoritesOnly = false
+    @Published var landmarks = landmarkData
+    @Published var profile = Profile.default
+}

Framework-Integration/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_58x58-2.png

@@ -23,7 +23,9 @@
 
 完成本教程，你将获得一个这样的 App 以及一套精彩的 `SwiftUI` 代码：
 
-![](https://github.com/WillieWangWei/SwiftUI-Tutorials/blob/master/preview.gif)
+![](https://github.com/WillieWangWei/SwiftUI-Tutorials/blob/master/preview-iOS.gif)
+
+![](https://github.com/WillieWangWei/SwiftUI-Tutorials/blob/master/preview-watchOS.gif)
 
 > **觉得不错？给个 Star 或 Follow 👌**
 
@@ -34,6 +36,7 @@
 | v1.0.0 | 完成初版 |
 | v1.0.1 | 同步官方文档<br>增加成品预览 |
 | v1.0.2 | 同步官方文档<br>优化翻译，修复翻译错误，让阅读更流畅<br>增加了代码高亮<br>标记出了代码修改范围，便于上下文对比 |
+| v1.0.3 | 新增章节《创建 watchOS App》<br>修复代码bug<br>增加 watchOS App 成品预览<br> |
 
 ## 调整