[譯] 零基礎 macOS 應用開發（一）

本文翻譯自 raywenderlich.com 的 macOS 開發經典入門教程，已諮詢對方網站，可至多翻譯 10 篇文章。
翻譯它只是由於宿舍太吵太熱，只有這樣才能一句一句看完，並做爲本身的筆記，但願各位有英語閱讀能力的話，仍是去閱讀英文原吧，畢竟不管是 Xcode，抑或是官方的文檔，仍是各類最前沿的資訊都只有英文版本。

相關連接
零基礎 macOS 應用開發（一）：原文 / 譯文(本文)
零基礎 macOS 應用開發（二）：原文 / 譯文
零基礎 macOS 應用開發（三）：原文 / 譯文

你想要學習開發你本身的 macOS app 嗎？
有一個好消息要告訴你！在這個教程中你將會發現，Apple 讓開發 macOS app 這件事變得無比簡單。你將會學習到如何去建立你的第一個 macOS app——即便你是一個徹底的小白。

• 在第一部分中，你將學會如何獲取 macOS 開發所須要的工具們。而後，經過建立一個簡單的「Hello, World!」app，你將會粗略地認識 Xcode——如何運行一個 app、編輯代碼、設計 UI 以及調試你的代碼。
• 在第2、三部分中，你將會建立一個複雜的多的「Egg Timer」app，並瞭解一個 macOS app 的各個組成部分——從一個 app 是如何啓動的，到 UI 是如何被構建的，一直處處理交互。

因此你還在等什麼呢？桌面級 app 的世界正在等着你！

注意：關於如何開始學習這個系列，這裏有一些提示：

• 若是你從未學習過 Swift，這個系列涉及了一些 Swift 知識，因此請先看看咱們的 Swift 教程。
• 若是你已經有過 iOS 的開發經驗，第一部分的內容則能夠看做一個複習。保險起見，請快速地瀏覽一下這些內容，而後直接跳轉到下一個部分。
• 這個課程是爲徹底的小白而準備的——你不須要擁有任何 iOS 或 macOS 開發經驗！

開始

要成爲一個 macOS 開發者，你須要兩個東西：

1. 一臺運行着 macOS Sierra 的 Mac：macOS 操做系統只能在蘋果電腦上運行，所以不管是開發仍是運行 macOS app，你都須要一臺 Mac。
2. Xcode：這是建立 macOS app 的 IDE（集成開發環境）。稍後你將學會如何在 Mac 上安裝它。

當你完成 app 的開發，但願將它上傳至 App Store 進行銷售時，你須要一個 Apple 的開發者帳戶。但直到你已經準備好讓你的 app 飛向整片世界的藍天，這都不是一個硬性要求。甚至你已經決定發佈你的 app，也只有在你準備經過 Mac App Store 進行銷售時纔會須要一個開發者帳戶。若是你已是一個 iOS 開發者，那你已經搞定了一切——Apple 已經將各類開發者帳戶融合爲一個，所以你只須要一個帳戶就能夠爲各類 Apple 設備分發 app。

不一樣於有些其餘平臺，爲 macOS 開發 app 只須要一個工具：Xcode。Xcode 這個 IDE 包含了建立 macOS、iOS、watchOS 和 tvOS app 時所須要的一切。
若是你尚未安裝好 Xcode，點擊你 Mac 左上角的 Apple 圖標，並選擇 App Store 來打開 App Store。即使 Xcode 是免費的，你仍須要一個 App Store 的帳戶來下載 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你取個名字——Hello World，並確保 Language 設置爲 Swift，以及 Use Storyboards 被勾選。其餘選項所有取消勾選。

點擊 Next 和 Create 來保存你的新項目。

運行你的 app

Xcode 已經爲你的 app 應用了一個基礎的模版，並添加了其運行所須要的全部文件。所以，什麼都不用作而直接運行它其實還挺有趣的。
點擊工具欄上的 播放按鈕▶️ 或使用鍵盤快捷鍵 ⌘R 來運行你的 app。Xcode 如今會將全部的代碼編譯成機器語言，將 app 運行所須要的全部資源文件打包，而後運行它。

注意：當你第一次在 Xcode 中運行一個 app 的時候，你可能會被詢問是否要 Enable Developer Mode on this Mac（在這臺 Mac 上啓用開發者模式），請放心地點擊 Enable，這可能會要求你輸入 Mac 的開機密碼。開發者模式容許 Xcode 附加調試器到你的 app 的進程——這對於開發一個 app 來講極其有用！

你如今應該能看到一個空白的窗口了，但請不要灰心——你如今已經能作到這些了：

• 這個窗口能夠調整大小、最小化和全屏；
• 這個 app 擁有已經擁有了一套完整的菜單選項，這其中有不少都已經能夠正常使用而不用你作任何事情。
• Dock 欄上的 app 圖標也擁有了常見的菜單。

可是如今是時候來把這個空空的屏幕變得更有趣了，因此請退出這個 app 並返回到 Xcode。

Xcode 的界面

Xcode 將許多功能融合在同一個窗口中，所以許多東西並不能同時顯示出來。要想成爲一個 Xcode 高手，你須要知道你須要的功能在哪裏，以及如何打開它們。
當你在 Xcode 裏打開一個新的工程，你已經擁有了一個帶有工具欄和三個主要面板的窗口。

左邊的窗口是 Navigator（導航器），在這個面板的頂部有八個標籤將它分紅了八個部分。你所最經常使用到的是第一個——Project（項目）——它列出了項目中全部的文件，你能夠點擊這些文件來編輯它們。
中間的面板是 Editor（編輯器），這裏會顯示你在 Project Navigator（項目導航器）裏選擇的文件。
右側的面板是 Utilities（工具集）面板，這裏顯示的內容會會隨着你在 Editor 裏進行的操做而變化。

添加 UI

你可使用 Storyboard 來設計 app 的 UI（用戶交互界面）。你的 app 已經有了一個 storyboard，因此在 Project Navigator（工程導航器） 中點擊 Main.stroyboard 來將之顯示在編輯器中。
你的屏幕自動切換了，是否是很神奇！在編輯器中，你如今能夠看到文檔的線框圖，以及可視化的 UI 編輯器。
看一看你可視化編輯器中的東西。這兒有三個主要的區域，每個都有着一個文本佔位符：

• Application Scene：頂部的菜單欄；
• Window Controller Scene：配置窗口會有怎樣的表現；
• View Controller Scene：放置 UI 控件的地方。

在 Utilities 面板裏，你將會看見上半部分有八個標籤頁，而下半部分有四個標籤頁
下半部分的區域呈現了你能夠插入到你的項目裏的東西。如今你須要插入 UI 控件，因此點擊第三個圖標 Object Library。
在底部的過濾器（輸入框）中，輸入「text」，而後找到並拖動一個 Text Field 到你的 View Controller Scene。

如今搜索「button」並拖動一個 Push Button 到 View Controller Scene 中。最後，再添加一個 Label。
如今，點擊播放按鈕▶️或按下 ⌘R 來編譯並運行你的 app，你就能看到這三個 UI 元素了。試着在輸入框中打些字——它如今已經支持全部標準的鍵盤快捷鍵了：複製、粘貼、剪切、撤銷、重作…可是界面上的按鈕仍是什麼都作不了，文本也只顯示了一個「Label」，因此如今咱們該把它們鏈接起來。

配置 UI

返回 Main.storyboard 並點擊界面上的 Button，在右側的 Utilities 面板中，點擊第四個標籤頁 Attributes Inspector。
把按鈕的標題改成「Say Hello」，此時的按鈕可能不夠寬，因此請點擊菜單欄上的 Editor，而後點擊 Size to Fit Content。（若是 Size to Fit Content 選項不可用，先點擊空白處取消選中這個按鈕，再從新選擇它，而後再試一次）。

如今點擊並選中 Text Field。在這個 app 中，用戶將在這裏輸入他們的名字，當他們點擊按鈕時，app 會顯示「Hello」+他們的名字。爲了提示用戶，咱們在 Attributes Inspector 中爲輸入框中添加一個佔位符。
把輸入框稍微拖大一些，以便能放下一些較長的名字，而後把按鈕拖動到它的右邊。當你在 View Controller Scene 中拖動元素時，會出現一些藍色的虛線來幫助你根據 Apple’s Human Interface Guidelines（Apple 人機交互指南）對齊並放置元素。

把 Label 放置在輸入框的下方。由於這個 Label 十分重要，咱們把它的字體改大一些，選中這個 Label，在 Attributes Inspector 中把 Font 更改成 System Regular 30。

不如來些更刺激的吧！把文字的顏色改爲紅色。

你不知道用戶的名字會有多長，因此咱們須要從新調整輸入框的大小，以適應字體的高度，並把寬度調整爲和窗口的寬度差很少。
編譯並運行你的 app 來檢查一下你的 UI 設置是否生效了。一旦你以爲 Label 中的文字效果令你滿意，把 Label 的 Title 刪除，這樣一來就清空了 Label 裏的文字。

鏈接 UI 與代碼

你的 app 如今沒法按照你預期的那樣工做，你仍須要添加代碼來讓你的代碼能與 UI 通信。爲了創建這種聯繫，你須要使用 Xcode 的 Assistant Editor，先在導航器中選中 Main.storyboard，按住 Option⌥ 鍵的同時點擊 ViewController.swift，這個操做將會在不關閉以前打開的文件的狀況下，爲 ViewController.swift 打開第二個編輯器面板。
先在屏幕上的東西可能看起來有些擁擠（固然這也取決於你的顯示器尺寸），因此點擊工具欄最右上方的按鈕來隱藏 Utilities 面板。若是你的顯示器空間仍是不夠，把 Navigator 面板也一併隱藏了。

選中輸入框，按住 Control⌃ 鍵的同時把文本框拖動到 class ViewController : NSViewController { 和 override func viewDidLoad() { 之間的那一行，鬆開鼠標時會彈出一個小窗口，在「name」中輸入 nameField，而後點擊 Connect。

對 Label 作一樣的事情，並把它命名爲 helloLabel。
看一看 Xcode 自動生成的代碼，你將會看見它們都以 @IBOutlet 開頭，這是「Interface Builder Outlet」的縮寫，也就是告訴 Storyboard 編輯器這些對象的名稱是如何與視覺元素關聯起來的。
對於那個按鈕，代碼中不須要給它起名字，但它須要知道用戶什麼時候點擊了這個按鈕。與 @IBAction 不一樣，這種鏈接叫作 @IBAction。
和先前同樣，選中按鈕，按住 Control⌃ 鍵的同時把文本框拖動到 ViewController.swift 中。這一次把 Connection 選項設置爲 Action，並把 name 設置爲 sayButtonClicked。這將會建立一個按鈕被電擊時會調用的一個函數。

如今萬事俱備，只差代碼了！點擊右側編輯器面板右上角的「×」關閉 Assistant Editor，回到 ViewController.swift。若是你隱藏了 Navigator，點擊右上角的按鈕或按下 ⌘1 來直接跳轉到 Project Navigator。
把以下代碼輸入到 sayButtonClicked 函數中：

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

在刪除了頂部自動生成的版權信息後，完成了的 ViewController.swift 中的代碼看起來應該像下邊截圖中的同樣。行號左邊的小氣泡代表這是一個 Stroyboard 與接口的鏈接點。

如今編譯並運行你的 app。
什麼也不輸入並點擊 Say Hello 按鈕，你將會看到「Hello World!」；而輸入了你的名字以後再點擊就能看到你專屬的問候語了。

調試

有時，咱們開發者會犯錯——相信我，真的會的。當咱們犯了錯，就須要調試咱們的代碼。Xcode 容許咱們在代碼的任何一點暫停，而後一行一行地運行代碼，讓你檢查每一行運行後各個變量的值，以此來找到錯誤。
在 ViewController.swift 中找到 sayButtonClicked，點擊 var name = 左邊的行號，一個藍色的小旗子將會出現，這是一個激活了的斷點，當你點擊你 app 界面上的按鈕時，調試器會讓程序在這裏暫停。再次點擊它，它會變成淺淺的藍色，這是一個未激活的斷點，它將不會暫停代碼，也不會啓動調試器。要完全移除一個斷點，把它從行號那一條中拖出去便可。

再次添加一個斷點並運行你的 app，點擊 Say Hello 按鈕，Xcode 會移動到最頂層，並把有斷點的那一行高亮顯示。在 Editor 面板的最底部，將會有兩個部分：Variables（變量）和 Console（控制檯）。Variables 部分展現了此函數中用到的全部變量以及 self（也就是 View Controller）和 sender（也就是按鈕）。

在 Variables 部分的上方有幾個控制調試器的按鈕。請把鼠標挨個放在這些按鈕上，根據彈出的工具提示看看他們是作什麼的。點擊 Step Over 按鈕來運行下一行代碼。
在 Variables 部分中，你能夠看到 name 是一個空的字符串，因此再連續點擊 Step Over 按鈕兩次，調試器會移動到 if語句中，並把 name 變量設置爲「World」。
在 Variables 部分中選中 Name 變量，點擊下方的 Quick Look 按鈕來查看具體的內容，電擊 Print Description 按能夠把它的信息輸出到 Console 部分中。若是「World」沒有被正確地設置，你應該能在這裏看到，並想出對應的對策。

當你檢查完全部的變量內容後，點擊 Continue program execution 按鈕來中止調試，並讓程序繼續運行。你可使用界面右上角的按鈕來隱藏調試器。

圖像

除了代碼和 UI，你的 app 還須要一些圖像。根據屏幕的不一樣（Retina 顯示屏和非 Retina 顯示屏），你常常須要爲一套資產提供多個版本。爲了簡化這個流程，Xcode 使用 Asset Libraries 來存儲和管理這些 app 須要的資產。
在 Project Navigator 中點擊 Assets.xcassets，到目前爲止裏邊只有一個 AppIcon，它包含了不一樣分辨率下的 app 的圖標。點擊 AppIcon，你會看到它須要 10 個不一樣的圖片來照顧全部的狀況，但若是你只提供了一個，那麼 Xcode 會盡可能讓它發揮最大功效，但這並非一個正確的作法——你須要盡力爲你的 app 提供全部尺寸的圖標，但在這個教程中，咱們只准備了一個圖標。
下載 512×512 像素的示例圖標，把它拖動到 Mac 512pt 1x 的方框中。

編譯並運行你的 app，查看 Dock 欄中的圖標，若是你看到的仍是默認圖標，請在 Product 菜單中選擇 Clean，而後再次運行。

得到幫助

除了一個編輯器，Xcode 還包含了你編寫 macOS app 所須要的全部文檔。
在 Help 菜單中選擇 Documentation and API Reference。搜索 NSButton，請確保當前選中的語言是 Swift，只需點擊頂部的搜索結果，就能夠找到全部關於按鈕的信息了。

還有一種方法，能夠在你的代碼中直接查看相關的文檔，返回 ViewController.swift，找到 sayButtonClicked 所在的行，按住 Option⌥ 鍵的同時點擊 stringValue，一個快速的查詢面板將會彈出，在底部還有一個 Property Reference 的連接，點擊它就能夠在文檔中查看更多信息。
Option⌥ +鼠標點擊是一個特別好的學習方式，你甚至能夠爲你本身編寫的函數添加本身編寫的文檔，以便從此快速查閱。
Help 菜單中還包括了 Xcode Help，在這裏你能夠了解到更多的 Xcode 信息。

---

下一趴：零基礎 macOS 應用開發（二）?