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