你想學(xué)習(xí)如何開發(fā)自己的 macOS app 嗎？
好消息！蘋果讓 macOS 開發(fā)變得相當(dāng)簡(jiǎn)單，在本教程中你會(huì)學(xué)到該怎么做。你將學(xué)習(xí)如何為 macOS 創(chuàng)建第一個(gè) app——哪怕你是一個(gè)純小白。
- 在第一部分中，你將首先了解如何獲取開發(fā) macOS 所需的工具。然后，在創(chuàng)建一個(gè)簡(jiǎn)單的“Hello，World！” app 時(shí)，會(huì)帶你瀏覽Xcode，了解如何運(yùn)行 app、編輯代碼、設(shè)計(jì) UI 和調(diào)試代碼。
- 在第 2 和第 3 部分中，你會(huì)創(chuàng)建一個(gè)更復(fù)雜的 Egg Timer app，了解構(gòu)成一個(gè) macOS 應(yīng)用程序的組件，從應(yīng)用程序啟動(dòng)、構(gòu)建 UI 一直到處理用戶交互。
那你還在等什么？桌面 app 的世界的大門已經(jīng)打開！
注意：開始之前，這里有一些指導(dǎo)：
- 如果你不懂 Swift，本教程需要你了解一些 Swift，所以先看看 Swift 教程 吧。
- 如果你已經(jīng)有 iOS 經(jīng)驗(yàn)，第一部分就會(huì)是一次回顧。迅速瀏覽一遍主題，確定后就直接跳到下一部分吧。
- 如果都不是，繼續(xù)閱讀吧。本教程是為純小白準(zhǔn)備的——不需要 iOS 或 macOS 開發(fā)經(jīng)驗(yàn)！
上手
要成為 macOS 開發(fā)者，你需要做兩件事：
- 一臺(tái)運(yùn)行 macOS Sierra 的 Mac：macOS 操作系統(tǒng)只在蘋果電腦上運(yùn)行，所以你需要一臺(tái) Mac 來開發(fā)和運(yùn)行 macOS app。
- Xcode：用于創(chuàng)建 macOS app 的 IDE。你會(huì)在這個(gè)部分的后面學(xué)習(xí)如何安裝它。
構(gòu)建應(yīng)用程序后，如果要將其上傳到 App Store 進(jìn)行分發(fā)，你還需要支付蘋果開發(fā)者賬號(hào)。但在你準(zhǔn)備把 app 發(fā)布到全世界之前這都不是必須的，而且只在你想通過 Mac App Store 進(jìn)行分發(fā)的情況下。如果你已經(jīng)有一個(gè)用于分發(fā) iOS app 的開發(fā)者帳戶，那么就已經(jīng)全部搞定了——蘋果已經(jīng)合并了開發(fā)者帳戶，因此只需要一個(gè)帳戶即可為任何蘋果設(shè)備分發(fā)應(yīng)用程序。
和其他平臺(tái)不同，macOS 開發(fā)需要只安裝一個(gè)工具：Xcode。 Xcode 是一個(gè)IDE（集成開發(fā)環(huán)境），包括開發(fā) macOS，iOS，watchOS 和 tvOS app 所需的一切。
如果你還沒有 Xcode，請(qǐng)點(diǎn)擊菜單左上角的蘋果圖標(biāo)，然后選擇 App Store ... 以打開 Mac App Store。雖然 Xcode 是免費(fèi)的，但你需要一個(gè) App Store 帳戶來下載它。
搜索 Xcode 并單擊安裝按鈕開始下載。下載、安裝后（可能需要一段時(shí)間——它是相當(dāng)大），從應(yīng)用程序文件夾中打開它。第一次運(yùn)行 Xcode 時(shí)，以及每次大更新后，它會(huì)要求權(quán)限來安裝其他組件。輸入密碼并允許 Xcode 安裝這些組件。
Hello World！
根據(jù)學(xué)習(xí)新編程語(yǔ)言或平臺(tái)的長(zhǎng)期傳統(tǒng)，你要從創(chuàng)建一個(gè) macOS 的 Hello World! app 開始。
如果還沒有運(yùn)行 Xcode，打開它。你應(yīng)該會(huì)看到 Welcome to Xcode 窗口 - 如果沒有看到，請(qǐng)從 Window 菜單中選擇 Welcome to Xcode。
點(diǎn)擊 Create a new Xcode project，在下一個(gè)對(duì)話框里選擇頂部選項(xiàng)卡中的 macOS。從 Application 部分中選擇 Cocoa Application，然后點(diǎn)擊 Next。
給新的 app 起個(gè)名字——HelloWorld——確保語(yǔ)言設(shè)置為 Swift，并選中 Use Storyboards。取消選中所有其他選項(xiàng)。
單擊 Next 和 Create 以保存新的 app 項(xiàng)目。
運(yùn)行 App
Xcode 已經(jīng)為你的 app 創(chuàng)建了具備所有必需文件的基本模板。在這個(gè)階段，運(yùn)行 app 看看你免費(fèi)得到了哪些東西是很有意思的。
單擊工具欄中的播放按鈕或使用 Command-R 快捷鍵運(yùn)行 app。 Xcode 現(xiàn)在將所有的代碼編譯成機(jī)器代碼，捆綁應(yīng)用程序所需的資源，然后執(zhí)行它。
注意：第一次在 Xcode 中構(gòu)建和運(yùn)行 app 時(shí)，系統(tǒng)可能會(huì)詢問你是否要在此 Mac 上啟用開發(fā)者模式。你可以安全選擇啟用，此時(shí)可能需要輸入密碼。開發(fā)者模式允許 Xcode 將調(diào)試器附加到正在運(yùn)行的進(jìn)程——這將在構(gòu)建 app 時(shí)非常有用！
你現(xiàn)在應(yīng)該看到了一個(gè)空白的窗口，但不要失望——看看你已經(jīng)做到了什么：
- 窗口是可調(diào)整大小的，可以最小化也可以全屏。
- 有一套完整的菜單，雖然你沒有做任何事，其中許多已經(jīng)在工作了。
- Dock 圖標(biāo)有常用的菜單。
但現(xiàn)在是時(shí)候讓顯示效果更有趣了，所以退出 app，回到 Xcode。
Xcode 界面
Xcode 將很多功能單獨(dú)分裝，所以一次無法看到全部。要成為一個(gè)高效的 Xcode 用戶，你需要知道它們都在哪里——以及如何獲得它們。
左面板是導(dǎo)航面板，在頂部有8個(gè)顯示選項(xiàng)。主要使用的是第一個(gè) ——項(xiàng)目——其中列出了項(xiàng)目中的所有文件，并允許單擊任何一個(gè)來編輯它。
中間面板是編輯器面板，將顯示你從項(xiàng)目導(dǎo)航器中選擇的任何內(nèi)容。
右側(cè)面板是實(shí)用工具面板，它將根據(jù)編輯器面板中查看的內(nèi)容而有所不同。
添加 UI
用 Storyboard 來設(shè)計(jì)用戶界面。你的 app 已經(jīng)有一塊 storyboard 了，所以轉(zhuǎn)到項(xiàng)目導(dǎo)航器，然后點(diǎn)擊 Main.storyboard 以在編輯器面板中顯示它。
你的顯示屏剛剛發(fā)生了戲劇性的變化！在“編輯器”面板中，現(xiàn)在可以看到 Document Outline 和 UI 的可視化編輯器。
看看能夠在可視化編輯器中看到的東西。有三個(gè)主要區(qū)域，每個(gè)在 Document Outline 中也有相應(yīng)的文本表示：
- Application Scene：菜單欄和項(xiàng)目。
- Window Controller Scene：配置窗口行為。
- View Controller Scene：UI 元素所在的地方／
在 實(shí)用工具 面板里，可以看到頂部包含 8 個(gè)選項(xiàng)卡，底部包含 4 個(gè)選項(xiàng)卡。
底部是一些你可以插入到項(xiàng)目里的東西。現(xiàn)在需要插入 UI 元素，所以選擇 Object library，從左數(shù)第三個(gè)。
在底部的過濾器（filter）中，輸入 “text” 來減少可選的數(shù)量，并將 Text Field 拖動(dòng)到 View Controller Scene 中。
現(xiàn)在過濾 “button” 并將 Push Button 拖動(dòng)到 View Controller Scene 中。最后，添加一個(gè) Label。
現(xiàn)在，使用播放按鈕或 Command-R 來運(yùn)行 app。你會(huì)看到這三個(gè) UI 元素。嘗試在 text field 里輸入——它已經(jīng)支持所有標(biāo)準(zhǔn)的編輯快捷方式：復(fù)制、粘貼、剪切、全選、撤銷、重做等。但是按鈕毫無反應(yīng)，label 只是顯示了 “Label”，所以是時(shí)候讓它們更具交互性了。
配置 UI
回到 Main.storyboard 然后點(diǎn)擊選中那個(gè) button。在右側(cè)的 實(shí)用工具 面板中，確保顯示 Attributes Inspector——頂部的第 4 個(gè)按鈕。
將 button 的標(biāo)題改為 “Say Hello”。該按鈕可能不夠?qū)挘瑹o法顯示所有文本，所以打開 Editor 菜單然后選擇 Size to Fit Content，應(yīng)該能解決這個(gè)問題。（如果 Size to Fit Content 是灰色的，點(diǎn)擊任意其他地方來取消選中按鈕，然后重新選擇它試試。）
現(xiàn)在點(diǎn)擊 text field 以選中它。在這個(gè) app 中，用戶會(huì)在這里輸入他們的名字，如果點(diǎn)擊按鈕，app 會(huì)在 label 里顯示 “Hello 這里是名字”。要幫助用戶使用，使用 Attributes Inspector 以為 text field 添加一些 placeholder 文本。
把 text field 拉大一點(diǎn)，以便可以輸入長(zhǎng)名字，然后把按鈕拖到它的右邊。在 View Controller Scene 里拖動(dòng)對(duì)象的時(shí)候，會(huì)出現(xiàn)藍(lán)色的線以幫助你排列和放置對(duì)象，基于蘋果人機(jī)界面指南（Apple’s Human Interface Guidelines）。
把 label 放在 text field 和 button 下方。由于 label 會(huì)是最重要的那個(gè)，所以讓它的字體再大一點(diǎn)。在 Attributes Inspector 里選擇 label，將字體改為 System Regular 30。
不如讓文本變成紅色，更刺激一點(diǎn)？
你無法知道用戶可能會(huì)輸入多長(zhǎng)的名字，所以調(diào)整 field 的大小以適應(yīng)該字體的高度，寬度填滿窗口。
構(gòu)建并運(yùn)行 app，以檢查 UI 改動(dòng)是否生效。如果你對(duì) label 中文字的外觀感到滿意，就刪除 label 的 標(biāo)題，以便 label 從空開始。
把 UI 連接到代碼
這個(gè) app 仍然不知道你想干什么，但為了使它工作，需要開始添加代碼，該代碼必須能夠與 UI 通信。要做鏈接的話，需要使用 Xcode 的 Assistant Editor。在 Main.storyboard 可見的情況下，在 Project Navigator 中按住 option 點(diǎn)擊選中 ViewController.swift。這將創(chuàng)建包含 ViewController 代碼的第二個(gè)編輯器面板。
根據(jù)顯示器的大小，現(xiàn)在可能看起來有點(diǎn)局促，所以使用工具欄中最右邊的按鈕來隱藏實(shí)用工具。如果需要更多空間，就隱藏導(dǎo)航器。
選中 text field。按住 Control 鍵并從 text field 拖動(dòng)到 ViewController 類聲明的頂部。放開，在彈出框的名稱框中輸入 nameField，然后單擊 Connect。
對(duì) labe 執(zhí)行相同操作，將其命名為 helloLabel。
看看 Xcode 生成的代碼，你會(huì)看到這些都有 @IBOutlet 標(biāo)記。這是 Interface Builder Outlet 的簡(jiǎn)寫，告訴 storyboard 編輯器這些對(duì)象名稱可用于鏈接到可視對(duì)象。
對(duì)于按鈕，代碼不需要有名字，但它需要知道用戶何時(shí)點(diǎn)擊按鈕。這需要一個(gè) @IBAction 而不是一個(gè) @IBOutlet。
選中按鈕并按住 Control 拖動(dòng)到 ViewController.swift 中。這次，將Connection 彈出窗口更改為 Action，并將名稱設(shè)置為sayButtonClicked。這將創(chuàng)建按鈕被點(diǎn)擊時(shí)調(diào)用的函數(shù)。
現(xiàn)在一切準(zhǔn)備就緒，可以寫代碼了。使用右上角的 X 來關(guān)系 Assistant Editor，然后切換到 ViewController.swift。如果您已隱藏導(dǎo)航器，請(qǐng)單擊右上角的切換按鈕，或按 Command-1 直接跳轉(zhuǎn)到項(xiàng)目導(dǎo)航器。 在sayButtonClicked 中輸入以下代碼。
var name = nameField.stringValue
if name.isEmpty {
name = "World"
}
let greeting = "Hello \(name)!"
helloLabel.stringValue = greeting
ViewController.swift 中的完整代碼現(xiàn)在看起來像這樣（在刪除頂部常見的版權(quán)聲明后）。行號(hào)旁邊的點(diǎn)點(diǎn)表示與 storyboard 連接的接口。
構(gòu)建并運(yùn)行 app。 單擊 Say Hello 按鈕而不輸入任何內(nèi)容，你會(huì)看到 “Hello World！”。現(xiàn)在輸入你的名字，然后再次點(diǎn)擊按鈕查看你自己的個(gè)人問候。
調(diào)試
有時(shí)候，程序員會(huì)犯錯(cuò)誤——我知道這很難相信，但事實(shí)就是這樣。Xcode 允許我們?cè)谌我恻c(diǎn)停止代碼，逐行運(yùn)行，檢查每個(gè)點(diǎn)的變量值，以便我們可以找到錯(cuò)誤。
找到 ViewController.swift 里的 sayButtonClicked 并單擊 var name = 旁邊的行號(hào)。將出現(xiàn)一個(gè)藍(lán)色的矩形。這是一個(gè)活動(dòng)斷點(diǎn)，單擊按鈕，調(diào)試器將停止在這里。再次點(diǎn)擊它，它會(huì)變成淺藍(lán)色。它現(xiàn)在是一個(gè)非活動(dòng)斷點(diǎn)，不會(huì)停止代碼并啟動(dòng)調(diào)試器。要完全刪除斷點(diǎn)，請(qǐng)將其拖出行號(hào)。
再次添加斷點(diǎn)并運(yùn)行 app。點(diǎn)擊 Say Hello 按鈕。Xcode 會(huì)跳到前面來，斷點(diǎn)代碼行高亮顯示。在編輯器面板的底部，現(xiàn)在將有兩個(gè)新部分：變量和控制臺(tái)。變量部分顯示此函數(shù)中使用的變量以及 self——視圖控制器和sender——按鈕。
在變量顯示器上方是一組用于控制調(diào)試器的按鈕。將鼠標(biāo)放在每一個(gè)上，閱讀提示，看看它是做什么的。單擊 Step Over 按鈕移動(dòng)到下一行。
在變量顯示器中，你可以檢查 name 是否為空字符串，因此再單擊 Step Over 兩次。調(diào)試器將移入并通過 if 語(yǔ)句，并將 name 變量設(shè)置為 “World”。
在變量顯示器中選擇 name 變量，然后單擊下面的 Quick Look 按鈕以查看內(nèi)容。現(xiàn)在單擊 Print Description 按鈕以查看打印在控制臺(tái)中的信息。如果“World”值沒有正確設(shè)置，你將能夠在這里看到，并嘗試修復(fù)代碼。
檢查 name 變量的內(nèi)容后，點(diǎn)擊 Continue program execution 按鈕以停止調(diào)試，讓程序繼續(xù)。使用右上角的按鈕來隱藏調(diào)試區(qū)域／
圖片
除了代碼和用戶界面，app 還需要一些插圖。由于不同的屏幕類型（Retina 和非 Retina），經(jīng)常需要提供每個(gè) asset 的多個(gè)版本。為了簡(jiǎn)化這個(gè)過程，Xcode 使用 Asset Libraries 來存儲(chǔ)和組織應(yīng)用程序附帶的 assets。
在項(xiàng)目導(dǎo)航器中，單擊 Assets.xcassets。到目前為止唯一的項(xiàng)目是 AppIcon，它包含用于顯示 app 圖標(biāo)所有分辨率所必需的圖片。點(diǎn)擊AppIcon——你可以看到它需要 10 個(gè)不同的圖片來覆蓋所有的可能性，但如果你提供任意一個(gè)，Xcode 也會(huì)盡可能利用它。這不是好的做法，因?yàn)槟銘?yīng)該提供所有需要的圖標(biāo)尺寸，但對(duì)于本教程來說，一個(gè)圖標(biāo)就足夠了。
下載 示例圖標(biāo) ，它是一個(gè) 512 x 512 像素的圖像。將其拖動(dòng)到 Mac 512pt 1x 框中。
構(gòu)建并運(yùn)行 app，以查看 Dock 欄中的圖標(biāo)。如果仍然看到的是默認(rèn) app 圖標(biāo)，請(qǐng)退出 HelloWorld 應(yīng)用程序，返回 Xcode 并在 Product 菜單里選擇 Clean，然后再次運(yùn)行 app。
獲取幫助
除了作為一個(gè)編輯器，Xcode 還包含編寫 macOS 應(yīng)用程序所需的所有文檔。
打開 Help 菜單，然后選擇 Documentation and API Reference。搜索NSButton。確保 Swift 是所選語(yǔ)言，然后單擊頂部搜索結(jié)果，就可以閱讀有關(guān)按鈕和按鈕屬性的所有詳細(xì)信息。
還有一種方法可以直接從代碼中獲取相關(guān)文檔。回到 ViewController.swift 并找到 sayButtonClicked 中的第一行。按住 Option 單擊 stringValue 這個(gè)單詞。彈出窗口顯示了簡(jiǎn)短的描述。在彈出窗口的底部是屬性引用的鏈接。單擊此鏈接，文檔將打開以顯示更多信息。
按住 Option 點(diǎn)擊通常是一個(gè)很好的學(xué)習(xí)方式，你甚至可以為自己的功能添加文檔，使它以相同的方式顯示。
Help 菜單還包括有關(guān) Xcode 環(huán)境的特定信息的 Xcode 幫助。
下一步？
在本教程的下一部分中，你會(huì)開始創(chuàng)建一個(gè)更復(fù)雜的應(yīng)用程序。希望在那里看到你！
如果你對(duì)本教程有任何問題或意見，請(qǐng)?jiān)谙路皆u(píng)論！
團(tuán)隊(duì)
www.raywenderlich.com 上的每篇教程都由一個(gè)專門的開發(fā)者團(tuán)隊(duì)創(chuàng)建，以符合我們的高質(zhì)量標(biāo)準(zhǔn)。在本教程中工作的團(tuán)隊(duì)成員有：
技術(shù)編輯
Zoltán Matók
終稿編輯
Michael Briscoe
團(tuán)隊(duì)負(fù)責(zé)人
Michael Briscoe
