使用 Xcode Playground 探索软件包和项目

使用 Xcode Playground 探索软件包和项目

Xcode Playgrounds 帮助开发人员探索 Swift 和框架 API，并为快速试验提供便笺。了解 Xcode Playgrounds 如何利用 Xcode 的现代构建系统，为资源提供改进支持，并与你的项目、框架和 Swift 软件包集成，从而提升文档记录和开发工作流程。

资源
- Fruta: Building a Feature-Rich App with SwiftUI
- - 高清视频
  - 标清视频
相关视频

WWDC23
- 使用 Xcode Playgrounds 创建原型
WWDC20
- Swift 软件包资源和本地化
WWDC19
- 在 Create ML 中训练对象检测模型
下载

（你好 WWDC 2020）你好欢迎来到 WWDC
欢迎观看《使用 Xcode Playground 探索软件包和项目》我叫 Chris Miles 我是 Xcode 团队的工程经理开发者喜欢使用 Xcode Playgrounds 来快速尝试新想法并学习和探索 API 以及框架今天我很高兴来跟大家介绍我们对 Xcode 12 所做的增强它们能让 Playground 在大家的工程中与 Swift 软件包及框架无缝配合在 Xcode 12 中 Playground 已经完全与 Xcode 的新构建系统整合这样的整合使 Playground 在配合软件包、工程和资源方面有了许多改进首先我会跟大家展示现在 Playground 在 Swift 软件包中的出色表现它是包含可运行代码的软件包说明文档的极佳选择然后我会展示 Playground 在导入工程目标方面的改进比如框架和软件包依赖关系在本视频的最后我会展示如何在 Playground 中使用需要构建支持的资源比如机器学习模型及资源目录我们首先看看 Xcode Playgrounds 如何与 Swift 软件包配合这里能看到我有一个 Swift 软件包叫做 NutritionFacts 我双击“Package.swift” 在 Xcode 中打开它 NutritionFacts 针对许多常见的食物提供准确的营养信息在食谱和美食 app 中它非常有用 NutritionFacts 很棒的一点是作者附上了详细的说明文档解释如何使用其 API 更棒的是这个说明文档写成了一个 Playground 文件 Playground 非常适合写说明文档而且现在它们在 Xcode 12 中与软件包还能做到无缝配合让我们看一下
在这个导航器中我打开 Playground 文件夹然后选择 NutritionFacts Playground 我们看到了这个软件包的描述接着是如何使用其 API 的详细说明文档另外还有几个示例代码片段由于这是 Playground 文件我们可以运行这段代码我们点击工具栏的“执行”选项来运行它 Playground 会执行这段代码在右边我们可以看到一个实时视图这是软件包提供的视图它以我们熟悉的格式列出了营养成分表
在编辑器中我们看到一个例子即利用标识符检索一个项目然后获取与之相关的营养信息 Playground 帮助我们理解了代码因为它在右侧的结果栏显示了每一个语句的结果
如大家所见 Xcode 12 中的 Playground 可以和软件包无缝配合之所以能实现这一点靠的是 Playground 与新构建系统的融合该系统知道如何构建软件包并使其可以导入到 Playground 代码中我推荐大家在下次需要写说明文档时或为你们的 Swift 软件包写教程时使用 Playground 大家不要忘记利用它的一个优势那就是用户可以在 Playground 中运行示例代码并看到实时的结果接下来我要跟大家展示 Xcode 12 是怎样便于 Playground 使用工程中的框架和软件包依赖关系的
我要用到一个叫 Fruta 的工程我们在 Xcode 中打开它并在模拟器中运行工程 Fruta 是一个 iOS 和 Mac app 它可以用来浏览和订购奶昔你们甚至可以用 Apple Pay 购买奶昔的制作食谱这样你们就可以在家自己做奶昔了我们在模拟器中看看这个 app 我们看到了一个可供选择的奶昔列表如果我们选择一个奶昔我们可以看到一个用 Apple Pay 购买的选项向上滚屏之后我们可以看到这种奶昔的部分配料我们选择一种看看详细的插图然后轻点 “i” 按钮来查看这个配料的营养成分你们可能会认出来这正是 NutritionFacts 软件包提供的视图本工程在那个软件包中存在依赖关系大家在左边的导航器中可以看出来
即使该软件包是工程的依赖项软件包中的任何 Playground 也仍然可供使用让我们打开这个软件包看看然后打开我们前面已经打开的 NutritionFacts playground 在这里我们看到了同样的内容和前面一样我们可以执行这个 Playground 查看结果
因此软件包中的 Playground 不论是像我们开始的那样直接打开软件包还是像现在作为工程的软件包依赖项都可以运行不过要记住和所有软件包依赖项中的所有文件一样 Playground 会变成只读的这个工程还包含一个框架叫做 UtilityViews 我们来看看工程编辑器这里能看到 UtilityViews 的框架目标现在在 Playground 中使用框架比以往都要容易只要它们都在同一个工作区就可以我给大家演示一个例子在导航器中我打开 Playground 文件夹我们会看到一个 Playground 叫 SmoothieLab 我们打开 SmoothieLab 注意顶栏会有一些构建活动这是因为 Xcode 12 中有个 Playground 新选项叫 Build Active Scheme 我打开这个 inspector 让大家看看我们看到在 Playground 设置中这个新选项在设置的底部当启用 Build Active Scheme 时它让 Xcode 为当前选择的方案自动构建所有目标并使任何模块均能导入至 Playground 中因此当我们打开 Playground 时 Xcode 已经为当前选中的方案构建好了所有目标使得 Playground 可以导入 UtilityViews 框架以及 NutritionFacts 软件包 SmoothieLab 是一个实用型 Playground 用来设计新的奶昔我们可以选择一些原材料以不同的数量将其组合然后检查它们的营养价值我们甚至可以用图表来解析其热量组成只需要使用 UtilityViews 框架提供的图表视图我们来运行 Playground 看一看这种奶昔的热量组成
在实时视图下我们可以看到热量成分的解析图表我们通常希望把脂肪成分控制在 25% 以下所以我们点击图表看一下百分比本例中约占 33% 所以我们可能要调低奶昔中花生酱的用量不过这个稍后再说大家可以看到 Playground 是一个很方便的工具可以帮我们组合配料设计出各方面均衡的奶昔至少是营养均衡的奶昔我们还没有设计出可以计算奶昔口味如何的算法但我没意见因为品尝的步骤是我在奶昔设计中最喜爱的环节现在 playground 可以无缝地与工程目标对接比如说框架和软件包 Xcode 会代劳构建这些目标这样就可以将它们导入到你们的 Playground 代码中只要确定你们启用了 Build Active Scheme 有个好消息是对于新的 Playground 该选项是自动启用的另外还要保证你们想导入的模块要么应是活动方案中的一部分要么对该方案构建的另一个目标有依赖关系在 Xcode 12 中的另一项极大的增强是 Playground 可以保留完整的构建日志我们来看看 SmoothieLab 的构建日志我们切换到报告导航器在最顶端我们可以看到 SmoothieLab Playground 的构建日志我们选择它打开构建日志在构建日志中我们能看到构建期间的全部详情如作为活动方案的组成而构建的目标详情以及为了支持 Playground 而构建的模块包含 Playground 内的编译后的源代码以及资源对于诊断构建故障构建日志极其重要我们很高兴看到它能在 Playground 中使用 Playground 与 Xcode 的新构建系统的结合还有一个好处那就是由构建系统所支持的一切资源类型现在也在 Playground 中得到支持我在此展示一个样例在 Playground 中使用一些需要构建系统支持的资源
我们回到 Fruta 工程我想对 Fruta 增加一个特色功能让用户可以把自己的 iPhone 摄像头对准其最喜欢的水果然后 Fruta 会像变戏法一样向用户提议与看到的水果相配的奶昔要做到这点我要使用机器学习来进行对象检测和图像分类有一些现成的分类工具已可供使用所以我想用几张样例图像试用其中一个工具看看它能不能胜任这份工作我要使用 Xcode 中的一个 Playground 来试验首先我们先找几张测试用的样例水果图像我们正好在 Fruta 工程中已经有几张可用的图像我们切回到模拟器并返回还记得我们之前看过这张橙子图像吗？如果我们退出这一屏就能看到其他配料的图像我们先在工程里找到这些图吧我先把模拟器隐藏起来现在我们用不到它了展开共享文件夹然后我们看一下资源目录我们能看到 app 图标、一些配色然后在 Ingredients 文件夹中我们能看到我们加入奶昔的各种配料的图像我想这可以作为一个测试机器学习模型的优秀样例数据集所以我们先建立一个副本按住 Option 键并把它拖动到桌面上
现在我们不需要保持这个工程打开所以我们关闭工程并创建一个新的 Playground 我们选择“文件”然后选“新 Playground”
我们使用一个 iOS 的空 Playground
我们给它起名叫 ML Fruta 并把它保存到桌面
我要扩大窗口的尺寸增加一些工作空间现在我们把资源目录拖曳到 Playground 的资源文件夹中注意 Playground 会替我们编译资源目录让我们可以直接从代码中访问这些资源我们可以使用 UIImage(named 参数
指定在资源目录中文件夹的名称以及一张图像的名称现在我们执行这个 Playground 看看结果如何在结果中我们看到图像的宽度如果使用快速查看打开图像我们就能看到预览看来没问题我们可以访问这个资源目录中的图像现在我们只需要一个机器学习模型我要切换到 Safari 浏览器我前面在用它浏览 Apple 开发者网站上的机器学习区在 Core ML 模型的页面上我们能看到多个图像分类和对象检测模型我想试试这个名叫 YOLOv3 的模型它可以检测场景中的多个对象并将其分别进行分类我想这很适合于用摄像头对准一碗水果并把拍到的每一种水果都识别出来那么我们点击 View Models 就可以在上方下载到全精度的模型为节省时间我已经下载好了现在最小化 Safari 浏览器
我来把模型从桌面上拖曳到 Playground 的资源区 Xcode 会自动替我们将模型编译好在它编译的时候我们来选择模型以在编辑器里看到它的详细信息有个很重要的细节是模型类它显示在上方它能告诉我们这个类的名称该名称由构建系统自动生成以在我们的 Swift 代码中使用现在我们要用到它回到 Playground 我们加入代码来导入 CoreML 然后我要把变量命名为 yoloModel 然后使用自动生成的类名称 YOLOv3 来创建一个有默认配置的新实例然后我们来获取模型的属性我们运行 Playground 看看结果
我们得到了一个模型的文本描述可以在这里预览看到输入数据输出数据以及其他属性的详细内容很不错我们有了机器学习的模型还有用于测试的图像只要把它们结合起来就可以了做到这一点有个简单的方法就是使用 Vision 框架我要替换这段代码改成导入 Vision 框架我要定义一个数组包括三种开始测试时使用的配料然后我们可以使用我们的 yolo 模型建立一个 Vision 框架的 CoreML 模型的实例有了它我们就可以创建一个 CoreML 请求用它来为图片的机器学习发起请求我想先构思一下各个请求的结果就是先展示每张图片并画出一个矩形框起图像内检测到的任何对象为了实现这点我调用了一些过去我用过的代码我用快速查看让你们看一看它定义了几个结构体用于保存我们所做的对象检测结果以及一些我们用来显示图像并为图像中检测到的任何对象画矩形框的 SwiftUI 视图我们在此不深入讨论这些代码但我们会将它们提供在演讲的网站上把支持代码拖曳到 Playground 的源代码区后 Xcode 会将其编译现在我们就可以利用这些代码了
我们对配料名称轮流进行识别为资源目录中的每一项获取图像然后我们创建一个对该图像的图像请求处理程序我们用它来执行我们的机器学习请求之后我们只需要传递结果每个结果都是一个 RecognizedObjectObservation 我们枚举这些观测获取具有最高信心值的标签以及图像中该对象的边界框并将其返回为一个已识别对象
最后对于每一幅图像我们以一个对象检测结果的形式返回结果我们来预览一下最下方所得到的结果 Xcode 会轮流处理三幅图像然后我们就可以预览结果我们已经得到每幅图像的处理结果下面要让结果可视化我们可以设置一个 Playground 实时视图将其置于 RecognizedObjectVisualizer 并传递结果我们继续运行
在右侧我们可以看见对象检测的结果我们传递的第一张图像是一根香蕉橙色字样写着“香蕉” 它被以 100% 的准确度检出这是个很不错的结果第二幅图像是三个橙子我们能看到三个橙子以很高的信心值被检出这个结果很不错
第三张图像是一瓶杏仁奶我们可以看到机器学习模型检测到了瓶子并给出很高的信心值不过并未将其详细分类成一瓶牛奶或一瓶杏仁奶这是因为这个模型接受过检测瓶子的训练但是它没有接受特别训练去检测瓶装牛奶或者瓶装杏仁奶我觉得这倒是没问题就这个模型本来接受的训练而言它的表现很出色了我想我们的 app 可以使用这个模型下一步就是继续深入训练这个模型使用在我们的应用场景中想要检测的各种原料作为训练数据要了解如何训练机器学习模型的更多内容我建议大家看一看 WWDC 2019 的一期演讲即《在 CreateML 中训练对象检测模型》
这个例子演示了如何在 Playground 中使用需要构建系统支持的资源我们来总结一下本次演讲中涵盖的内容在 Xcode 12 中 Playground 与新构建系统实现了完全整合当启用新选项 Build Active Scheme 时当前选中的方案内的所有目标都会被自动构建并可以在相同工作区内的 Playground 中进行导入这样任何框架或者 Swift 软件包都可以导入到你们的 Playground 代码之中
一切构建系统所能识别的资源类型现在都可以在 Playground 中使用比如说资源目录和机器学习模型如我演示的那样
完整的 Playground 构建日志现在可在报告导航器中查看让诊断 Playground 构建期间的故障变得更加轻松
Playground 非常适合记载含有可运行代码的软件包和框架也不要忘了 Playground 是一件用来快速以代码记录新想法或者编写实用代码的称手工具我期待着了解 Playground 如何帮助你们让你们的软件包和工程做得更好感谢大家的观看

8:53 - Playgrounds and resources Demo: Part 1

import UIKit
let image = UIImage(named: "ingredient/orange")

10:18 - Playgrounds and resources Demo: Part 2

import CoreML
let yoloModel = try YOLOv3(configuration: MLModelConfiguration()).model

10:54 - Playgrounds and resources Demo: Part 3

import UIKit
import CoreML
import Vision

let ingredientNames = [
    "banana",
    "orange",
    "almond-milk",
]

let yoloModel = try YOLOv3(configuration: MLModelConfiguration()).model
let model = try VNCoreMLModel(for: yoloModel)

let request = VNCoreMLRequest(model: model) {_,_ in }

11:24 - Recognized Object Visualizer

import Foundation
import SwiftUI
import UIKit

// MARK: Model

/// The result of object detection on an image.
public struct ObjectDetectionResult : Identifiable {
    public var name: String
    public var image: UIImage
    public var id: String
    public var objects: [RecognizedObject]

    public init(name: String, image: UIImage, id: String, objects: [RecognizedObject]) {
        self.id = id
        self.name = name
        self.image = image
        self.objects = objects
    }
}

/// An object recognized by an image classifier.
public struct RecognizedObject : Identifiable {
    public var id: Int
    public var label: String
    public var confidence: Double
    public var boundingBox: CGRect

    public init(id: Int, label: String, confidence: Double, boundingBox: CGRect) {
        self.id = id
        self.label = label
        self.confidence = confidence
        self.boundingBox = boundingBox
    }
}

// MARK: Views

public struct RecognizedObjectVisualizer : View {
    public var results: [ObjectDetectionResult]
    public var imageSize: CGFloat = 400

    public init(withResults results: [ObjectDetectionResult]) {
        self.results = results
    }

    public var body: some View {
        List(results) { result in
            Spacer()

            VStack(alignment: .center) {
                RecognizedObjectsView(
                    image: result.image,
                    objects: result.objects
                )
                .frame(width: imageSize, height: imageSize)

                Text(result.name.capitalized)

                Spacer(minLength: 20)
            }

            Spacer()
        }
    }
}

struct RecognizedObjectsView : View {
    var image: UIImage
    var objects: [RecognizedObject]

    var body: some View {
        GeometryReader { geometry in
            Image(uiImage: image)
                .resizable()
                .overlay(
                    ZStack {
                        ForEach(objects) { object in
                            Rectangle()
                                .stroke(Color.red)
                                .shadow(radius: 2.0)
                                .frame(
                                    width: object.boundingBox.width * geometry.size.width / image.size.width,
                                    height: object.boundingBox.height * geometry.size.height / image.size.height
                                )
                                .position(
                                    x: (object.boundingBox.origin.x + object.boundingBox.size.width / 2.0) * geometry.size.width / image.size.width,
                                    y: geometry.size.height - (object.boundingBox.origin.y + object.boundingBox.size.height / 2.0) * geometry.size.height / image.size.height
                                )
                                .overlay(
                                    Text("\(object.label.capitalized) (\(String(format: "%0.0f", object.confidence * 100.0))%)")
                                        .foregroundColor(Color.red)
                                        .position(
                                            x: (object.boundingBox.origin.x + object.boundingBox.size.width / 2.0) * geometry.size.width / image.size.width,
                                            y: geometry.size.height - (object.boundingBox.origin.y - 20.0) * geometry.size.height / image.size.height
                                        )
                                )
                        }
                    }
                )
        }
    }
}

11:48 - Playgrounds and resources Demo: Part 4

let results = ingredientNames.compactMap { ingredient -> ObjectDetectionResult? in

    guard let image = UIImage(named: "ingredient/\(ingredient)") else { return nil }

    let handler = VNImageRequestHandler(cgImage: image.cgImage!)
    try? handler.perform([request])
    let observations = request.results as! [VNRecognizedObjectObservation]

    let detectedObjects = observations.enumerated().map { (index, observation) -> RecognizedObject in

        // Select only the label with the highest confidence.
        let topLabelObservation = observation.labels[0]
        let objectBounds = VNImageRectForNormalizedRect(observation.boundingBox, Int(image.size.width), Int(image.size.height))

        return RecognizedObject(id: index, label: topLabelObservation.identifier, confidence: Double(topLabelObservation.confidence), boundingBox: objectBounds)
    }

    return ObjectDetectionResult(name: ingredient, image: image, id: ingredient, objects: detectedObjects)
}

results

12:33 - Playgrounds and resources Demo: Part 5

import PlaygroundSupport

PlaygroundPage.current.setLiveView(
    RecognizedObjectVisualizer(withResults: results)
        .frame(width: 500, height: 800)
)

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC23

WWDC20

WWDC19