macOS 开发入门教程: Part 1

原文：macOS Development for Beginners: Part 1
作者：Sarah Reichelt
译者：kmyhy

你想开发自己的的 macOS App 吗？

好消息！苹果让 macOS 开发变得超级简单，这个系列教程会教你如何进行 macOS App。你将学习如何创建您的第一个 macOS App——那怕你完全没有接触过 macOS 开发。

在第一部分，你会先学习如何获得 macOS 开发工具。然后，创建一个简单的”Hello,World!” App，你会先了解一下 Xcode，学习如何运行一个 App，编写代码、设计 UI 以及调试代码。

在第二、三部分，你将创建更复杂的 Egg Timer App，并了解一个 macOS App 是由什么组成，从 App 的启动到构造 UI 以及处理用户交互的各种方法。

还等什么呢？桌面 App 世界就在你的面前！

注意：对于如何学习本系列教程我们给出一些建议：
因为本系列需要具备一定的 Swift 技能，如果你不熟悉 Swift，你可以参考我们的 Swift 教程。如果你具备一定的 iOS 经验，本系列第一部分会是一个回顾。快速浏览一下标题，然后跳到下一部分。否则，请按部就班地阅读。本系列完全针对入门者——不需要 iOS 或者 macOS 开发经验。

开始

要成为一个 macOS 开发者，你需要具备：

• 一台运行 macOS Sierra 的 Mac：macOS 操作系统只能运行在苹果电脑上，你需要一台 Mac 用于开发并运行 macOS App。
• Xcode：这是用于创建 macOS App 的 IDE。在这一节我们会学习如何安装 Xcode。

当你编译好 App ，如果你准备将 App 上传到 App Store 进行发布，你需要拥有一个付费的 Apple 开发者账号。如果你不准备将 App 发布到外边，这个步骤是不必要的。甚至如果你不想将 App 发布到 Mac App Store，这一步也不是必须的。如果你已经有一个 iOS App 的发布账号，你可以拥有一个完整的集合——苹果已经将开发者账号进行了整合，因此你只需要一个账号，就可以向任意苹果设备进行分发。

和别的平台不同，macOS 开发只需要安装一个工具：Xcode。Xcode 是一个开发 macOS、iOS、watchOS、tvOS App 的统一 IDE（集成开发环境）。

如果你还没有安装 Xcode，点击左上角菜单栏的苹果图标，选择 App Store…，打开 Mac App Store。你需要有一个 App Store 账号才能下载 Xcode，虽然它是免费的。

Hello World!

长久以来，每当学习一门新语言或者新的平台，你总是用一个 Hello world 开始，macOS 开发也不例外。

打开 Xcode，如果你没有打开它的话。你会看到 Xcode 欢迎窗口——如果你没有看到它，请从 Window 菜单中选择 Welcom to Xcode。

运行 App

Xcode用一个基本的模板为 App 创建所需的文件。这一步，我们来运行 App 看看它为我们做了些什么。

点击工具栏中的 Play 按钮或者 Command-R ，运行 App。Xcode 会将代码编译成机器码，将必要的资源进行打包并执行它。

Xcode 界面

Xcode 将大量的功能封装在一个小盒子里，因此无法一次显示所有的东西。要成为一个讲效率的 Xcode 用户，你必须知道这些东西都放在哪里——以及如何找出它们。

当你在 Xcode 中打开一个新项目，你会看到一个带工具栏和 3 个主面板的窗口：

添加 UI

我们用 Storyboard 来设计 UI。你的 App 已经有一个故事版了，在项目导航器中，点击 Main.storyboard，打开编辑器。

你看到的东西会发生明显变化。在编辑器中，你会看到这个 UI 的文档树窗口和可视化编辑器。

看一眼可视化编辑器。有 3 个主要的部分，每部分都在文档树中有一个文字性的描述：

• Application Scene: 菜单栏和菜单条。
• Window Controller Scene: 设置窗口的外观。
• View Controller Scene: 放置 UI 元素的地方。

在工具面板中，你会看到上面有 8 个 tab,下面有 4 个 tab。

底部的面板用于切换你可以添加到项目中的各种东西。因为你现在想添加 UI 元素，你可以使用 Object library，即从左到右的第三个 tab。

在底部的搜索栏中，输入 text，缩小可选择的范围，然后拖一个 Text Field 到你的 View Controller 场景中。

设置 UI

回到 Main.storyboard，点击按钮，选择它。在工具面板中，打开属性面板——顶部面板的第 4 个 tab。

将按钮标题（title)修改为 “Say Hello”。如果按钮宽度不足以显示所有文字，可以使用 EditorSize to Fit Content 菜单。（如果 Size to Fit Content 是禁用的，点击别的地方反选按钮对象，然后重新选中它，再试一次）。

将 UI 连接到代码

这个 App 仍然还未完成，为了能够完成它，你需要编写代码，代码必须能够和 UI 进行交互。要创建这种连接，在项目导航器中，Option+左键点击 ViewController.swift。这将创建第二个编辑器窗口，内容就是 ViewController 的代码。

窗口看起来有点凌乱，这要看你的显示器大小了，可以用工具栏最右边的按钮将工具面板隐藏。如果你需要更多的空间，可以将导航器也隐藏。

var name = nameField.stringValue if name.isEmpty { name = "World" } let greeting = "Hello (name)!" helloLabel.stringValue = greeting

现在 ViewController.swift 中完整代码是这个样子（顶部的版权声明被删掉了）。行号外边的圆点表明有一个连接指向了故事版中的界面。

调试

有时候，程序员会犯错误——真是令人难以置信，但这是真的。这样，我们就需要调试代码了。Xcode 允许代码在执行到某一行时停下，单步执行代码，查看变量值，以便找出错误的原因。

在 ViewController.swift 找到 sayButtonClicked 方法，在 var name =line 这一句的行号外边单击。这会添加一个蓝色的箭头。这是一个激活的断点，当你点击按钮时，调试器会在这里停下。再次点击它一下，它会转变成灰色。这就会变成非激活断点，当代码开始调试后不会在此停止。要完全移除这个断点，将它拖到行号栏以外即可。

图片

除了代码和 UI，App 还需要一些图片。用于各种屏幕类型（视网膜屏和非视网膜屏），经常需要提供几个版本的图片资源。为了简化这个工作，Xcode 使用了 Asset 库来保存和组织 App 中的图片资源。

在项目导航器中，点击 Assets.xcassets。这里只有一个 AppIcon，用于保存 App 需要用到的各种分辨率下的图片。点击 AppIcon —— 你会看到它需要我们提供 10 种不同大小的图片，覆盖了各种可能的分辨率，如果你在这里只提供了一种图片，Xcode 会尽量使用好这张图片。这种体验并不太好，因为你应该提供所有尺寸的图标，但在本教程中，我们只使用一个图标。

下载示例图标，它的大小是 512x512。将它拖到 Mac 512px 1x 位置。

查看帮助

还是在编辑器中，Xcode 会包含了所有编写 App 时要用到的文档。

打开 HelpDocument and API Reference 菜单。搜索 NSButton，选择 Swift 语言，然后点击最上边的搜索结果，阅读关于按钮和按钮的属性。

结束

在下一部分，你将开始创建更复杂的 App，我在那里等你哟！

如果你有任何问题和建议，请在下面留言。