在 Swift Playgrounds 中构建您的首个 App

在 Swift Playgrounds 中构建您的首个 App

学习如何使用 Swift Playgrounds 轻松地制作原型并构建 App。我们将介绍如何在空白项目的基础上开发 App，利用 SwiftUI 为它构建界面，以及借助 Swift Package Manager 添加来自开源软件包的额外功能。我们还将讨论您可以如何使用 Previews 和控制台调试问题，并指导您通过 TestFlight 将 App 提交到 App Store Connect 以便进行分发。

资源
- - 高清视频
  - 标清视频
相关视频

WWDC22
- 为 Swift Playgrounds 创作引人入胜的内容
下载

欢迎来到“在 Swift Playgrounds 中构建您的首个 App” 我是 Swift Playgrounds 团队的工程师 Collett Charlton 我是 Connor Wakamo Swift Playgrounds 团队的另一位工程师 Swift Playgrounds 是学习 Swift 编码的绝佳工具现在您可以更进一步可以通过它构建 App！今天我们将介绍在 Swift Playgrounds 中如何从一个空白模版构建一个 App 然后我们将展示如何使用预览和控制台进行调试最后我们会将 App 提交给 TestFlight
我们的团队非常喜欢泡茶和喝茶我们非常喜欢这个活动以至于我们想为此制作一个 App Connor 和我将构建一个 App 来帮助我们在下午茶时间提供给我们一份茶清单用来帮助我们选择每天喝什么 Swift Playgrounds 在 Mac 和 iPad 上工作得很好因为我今天带着 Mac 电脑所以我要开始在这里构建这个 App
无论您是编程新手还是经验丰富的开发者 Swift Playgrounds 都会为您提供开始编程的各种模版和教学内容对于开发我们的选茶 App 我们要首先单击空白 App 模板它在屏幕的左下角
现在我们有了模板让我们双击打开
好了右侧的实时交互式预览里显示了“Hello World”文本
在我们开始写代码前要使用 App 设置对程序进行一些功能的自定义为此我需要单击边栏左上角的 App Settings (App 设置) 按钮
在这里您可以自定义各种项目属性例如 App 名称和主题颜色您还可以添加自定义或占位符程序图标软件功能或用途的描述字符串和 Bundle ID 我会将 App 的名称更改为“Tea Time”
然后将主题颜色设置为棕色
然后把程序图标换成咖啡杯的占位符图标
好的现在重要的部分已经设置完毕让我们通过选择模板文本开始编写一些代码并将其替换为我们在库中的第一个视图可以通过单击项目工具栏中的加号按钮访问库它包含易于使用的代码片段如：视图修饰符、SF 符号和颜色我们将使用列表视图来显示我们的茶列表所以我将在搜索中键入 list (列表) 并单击将其插入代码段
现在我们有了列表视图下面向其中添加一些茶的项目
我将开始输入文本… 并使用回车键从内联代码完成面板接受并插入建议的完整代码
好的现在我们的列表视图里有了一个茶项目让我们再添加一些
等等我好像不小心加了两次“茉莉绿茶” 为了避免我们输入重复我们应该将它们存储为 orderedSet 幸运的是 Apple 的 swift-collection 包提供了这一功能所以让我们将 swift-collection 包添加到我们的项目中
为此让我们打开“文件”菜单并选择 Add Package (添加软件包)
我将首先输入 swift-collections 包的 URL 地址然后按回车键
获取包后我们需要查看包的版本以及其他可以添加到我们项目中的功能对于这个 App 我们将只选择 Collections (合集) 然后单击 Add to Project (添加至项目)
现在我们在 Packages 下的侧边栏中将 swift-collections 添加到我们的项目中让我们创建一个 String 类型的 OrderedSet 用来存储我们的茶列表
等等好像我们的程序有点问题让我们通过点击问题图标来看看
“在范围内找不到类型有序集” 哦我明白是什么问题了我忘记在我们的项目中导入 Collections 模块现在让我们导入它问题应该能得到解决
现在我们已经解决了这个问题下面让我们更新列表视图以使用我们刚刚创建的集合为此我们需要使用 ForEach 视图
好的这里就有内容了我们的列表正在从茶集合中展示各种茶的信息在我做这个项目时我对要添加的功能产生了越来越多的想法如果我们的 App 可以听到茶壶的叫声那就太酷了可以让我们知道什么时候倒茶我现在还不打算添加这个功能但让我们先来看看将采取哪些做法才能向用户解释清楚为什么我们的 App 需要使用麦克风
要添加它让我们回到我们的 App 设置并单击 Capability (功能)
使用右上角的加号按钮我们将看到可以添加到项目中的功能列表让我们找到“麦克风” 并点击“Add”将其添加对于目标描述字符串我们将编写：“Tea Time 使用麦克风监听茶壶的声音” 然后单击“Add” 关闭 App 设置
好的我们今天做了很多并且我非常高兴为您分享这个项目以及我与 Connor 在这个项目之中那些很酷的想法
我会与 Connor 在我们共享的 iCloud 文件夹中共享这个项目但首先我们要给它起一个比 My App 更好听的文件名称
现在我需要将文件拖拽到 iCloud 共享文件夹中
我已完成我的工作内容现在我将交给 Connor 来完成这个 App 谢谢 Collett 我会在 iPad 上完成优化这个项目由于我们是通过 iCloud 共享文件夹来共享我们的项目文件因此项目文件没有出现在 Swift Playgrounds 的项目的主列表中但如果我点击 Locations (位置) 我就可以从 iCloud 访问项目文件或者甚至可以从第三方文件提供商获取现在我已经处于我们的共享文件夹中所以我会点击 Tea Time 文件来打开项目我所做的任何程序更改都会自动更新这个共享项目看起来 Collett 是个很好的工程师把只添加了一些额外功能的项目文件上传到 iCloud 她在这里实现了一个 TabView 控件所以我们的项目不只有一个茶列表同时它还是一个助手类程序如果我点击 Assistant (助手) 选项卡可以看到它非常简单但可以工作我可以做一个推荐功能并且提供一些可能要喝的茶的建议
看来今天我应该喝茉莉清茶现在我知道 Collett 正在制作一种有趣的选茶新方法为它添加一些有趣的风格让我们打开侧边栏来找找看
看起来 TeaWheelView 像是我们正在找的所以让我们打开它
我们看到这里有一个收集数据集的视图让我们添加一个视图预览以便我们可以在 TeaWheelView 添加到主程序之前先看看效果滑到文件的底部
然后输入“PreviewProvider”
在这里我将通过按回车键来应用代码完成建议然后将其命名为 TeaWheelView_Previews
在右侧预览区域的底部此时出现页面切换箭头这表示 Swift Playgrounds 可以识别我的程序如果我点击 App 预览下方的右箭头… 这样就可以只使用我的视图预览而不是使用 App 的预览现在这里只显示了 “Hello, world!” 那么现在让我们添加一些代码来创建 TeaWheelView 首先我将添加一个包含一些条目的数组作为静态属性以便于我的预览可以使用它们
我会将光标放在两个方括号之间然后通过拖动右括号添加占位符
接下来我将用条目内容描述字符串替换这些占位符
现在我们已经有了一些条目让我们把它添加至 TeaWheelView 我会选择 Hello, world! 示例然后将其替换为显示刚创建的条目的 TeaWheelView 实例
我还需要添加一点 padding 空间
太好了现在我们的视图预览里显示了一个轮盘多漂亮的轮盘我可以旋转它它会根据停止的位置来选择不同的条目让我们回到助手选项卡并添加这个轮盘我将使用侧边栏打开名为 AssistantTab Swift 文件我将删除 Button 控件并将其替换为 TeaWheelView
TeaWheelView 可以通过使用可选的操作闭包当轮盘停止旋转时调用
我会用它把上一次选择的茶设置为 “选定的茶” 然后将 showPickAlert 设置为 true 以便 SwiftUI 显示告警信息
好的太棒了我们已把轮盘编辑好了那么现在让我们来试试吧我会旋转它… 然后它建议我喝字节乌龙茶我再刷一遍…
还是字节乌龙茶再一次
唔似乎有些不对劲即使它落在轮盘上的不同位置程序还总是推荐字节乌龙虽然那是一种很好的茶但我还是想要一些多样性的选择让我们切换回轮盘视图并试着查查到底怎么回事
从这里看不出哪里出了问题因为轮盘确实旋转了并降落在不同的位置让我们在视图预览中添加一个打印语句以便于检查预览是否也出了问题
现在当我转动轮盘时…
在源编辑器的左下方会弹出一条控制台消息条目一… 条目一…条目一啊哈每次旋转都会给我们条目一这表明某些功能并没有正确的关联起来因为它每次都给我第一个条目我将首先使用项目范围内的查找进行搜索我将点击位于屏幕左侧的侧边栏顶部的搜索框然后键入“first” 并按回车键
这个结果看起来像是我正在找的所以我会点击它
啊看来 Collett 在这里留下了一些调试代码这使轮盘每次都返回第一个条目而不是正确的结果让我们快速修改它然后再旋转一次
条目二 … 条目四太好了！看起来它已经可以正常工作了如果我们通过点击预览下方的左箭头切换回我们的 App 预览我们就可以在真实的 App 中测试一下功能转动轮盘然后它推荐给我英式早餐茶所以现在我们有了一个助手功能太厉害了！为了确认 App 在各种屏幕尺寸下都能正常工作我可以通过按下屏幕左上角的 Run (运行) 按钮让它在这个设备的真实窗口中运行程序
好的看起来所有功能都在这里了我有我的茶单功能和包含一个轮盘的助手功能我可以通过点击状态栏右侧的小 Swift 图标返回 Swift Playgrounds 项目然后在弹出的视窗中选择 Show Project (显示项目) 按钮
我已准备好我与朋友和家人一起测试这个 App Swift Playgrounds 让测试变得容易因为您可以从 Swift Playgrounds 把项目直接提交到 TestFlight 如果我打开 App Settings 并滚动到底部您会看到有一个 “Upload to App Store Connect”的按钮如果我点击这个按钮 Swift Playgrounds 会完成创建 App 记录以及将 App 上传到 App Store Connect 的所有麻烦工作这样我就可以将它发布到 TestFlight 并最终发布到 App Store
现在我的 App 已上传我可以前往 App Store Connect 并将其提交给 Beta App Review 稍等片刻后我们可以转到 TestFlight 并从那里安装它甚至可以安装在 iPhone 上
我将点击 Install (安装) 来安装 Tea Time
现在它已安装我点击 Open (打开) 按钮将其打开我会点击测试按钮这里会显示关于如何提供反馈的说明
好了我们的 App 正在 iPhone 上运行我今天应该喝什么茶？
看起来我要参加 Matt P 的茶话会了今天 Collett 和我向您展示了如何使用 Swift Playgrounds 在 Mac 和 iPad 上构建 App 我们演示了如何使用库和代码完成插入新的代码我们通过 iCloud 共享文件夹分享了我们的项目我们使用视图预览和控制台来调试我们的代码问题我们甚至直接从 iPad 向 TestFlight 提交了一个 App 希望您在此过程中学到了一些内容我们迫不及待地想看看您使用 Swift Playgrounds 构建的内容感谢您的收看希望您享受 WWDC 的其他讲座

3:31 - First Tea Item
```
Text("Jasmine Green")
```

Text("Jasmine Green")
Text("English Breakfast")
Text("Byte's Oolong")
Text("Golden Tippy Assam")
Text("Matt P's Tea Party")
Text("Darjeeling")
Text("Genmaicha")
Text("Jasmine Green")
Text("Vanilla Rooibos")

4:45 - OrderedSet of Teas

let teas: OrderedSet<String> = ["Byte's Oolong", "Golden Tippy Assam", "English Breakfast", "Matt P's Tea Party", "Darjeeling", "Genmaicha", "Jasmine Green", "Vanilla Rooibos"]

5:28 - ForEach View

ForEach(teas, id: \.self) { tea in
     Text(tea)
}

8:45 - Initial Preview Provider

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        Text("Hello, world!")
    }
}

9:22 - Preview Provider with TeaWheelView

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self)
            .padding()
    }
}

10:40 - TeaWheelView in Assistant Tab

TeaWheelView(dataSource.teas, action: { tea in
    lastPickedTea = tea
    showPickAlert = true
})

11:55 - Preview Provider with Print Statement

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self) {
            print($0)
        }
            .padding()
    }
}

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

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

资源

相关视频

WWDC22