NO IMAGE

原文: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,雖然它是免費的。

搜尋 Xcode,然後點選安裝,App 會開始下載。當它下載並安裝完成(可能需要點時間——包比較大),你可以從應用程式資料夾中開啟它。當第一次執行 Xcode,或者每次升級後,它都會問你安裝附加元件。輸入密碼,允許 Xcode 安裝這些元件。

Hello World!

長久以來,每當學習一門新語言或者新的平臺,你總是用一個 Hello world 開始,macOS 開發也不例外。

開啟 Xcode,如果你沒有開啟它的話。你會看到 Xcode 歡迎視窗——如果你沒有看到它,請從 Window 選單中選擇 Welcom to Xcode。

點選 Create a new Xcode project 然後在第二個對話方塊中,選擇頂部中間的 macOS Tab。選擇 Applictiona/Cocoa Application,然後點選 Next。

給新 App 一個名字——HelloWorld——語言設定為 Swift,勾選 Use Storyboard。反選剩下的選項。

點選 Next,Create,建立並儲存新專案。

執行 App

Xcode用一個基本的模板為 App 建立所需的檔案。這一步,我們來執行 App 看看它為我們做了些什麼。

點選工具欄中的 Play 按鈕或者 Command-R ,執行 App。Xcode 會將程式碼編譯成機器碼,將必要的資源進行打包並執行它。

注意:第一次編譯和執行 App 時,可能會問你是否需要開啟 Mac 上的開發者模式。你可以選擇開啟,同時輸入登入密碼。開發者模式允許 Xcode 向執行程序附加偵錯程式——這在 App 開發中可是非常有用的!

現在你可能會看到一個空白視窗,別擔心——讓我們先來看看你剛才做了些什麼:

  • 視窗大小可以拉伸,最小化或者全屏。
  • 有一個完整的選單,它們中的許多都能夠正常使用,同時你不需要做任何事情。
  • Dock 圖示有一些常用選單。

現在來顯示一些有趣的東西,請退出 App,回到 Xcode。

Xcode 介面

Xcode 將大量的功能封裝在一個小盒子裡,因此無法一次顯示所有的東西。要成為一個講效率的 Xcode 使用者,你必須知道這些東西都放在哪裡——以及如何找出它們。

當你在 Xcode 中開啟一個新專案,你會看到一個帶工具欄和 3 個主面板的視窗:

左邊是導航器,在頂部有 8 個選項。你用得最多的一個是第一個——Project(專案導航器)—— 它列出了專案中的所有檔案並允許你通過點選它們來進行編輯。

中間的是編輯器,用於顯示你從專案導航器中選中的東西。

右邊是工具,它的內容將根據你在編輯器中當前看到的內容而定。

新增 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 場景中。

現在將搜尋關鍵字改為 button,然後拖一個 Push Button 到 View Controller場景中。最後再新增一個 Label。

現在,編譯執行 App。點選 Play 按鈕或使用 Command R。你會看到這 3 個 UI 元素。在文字框中輸入一些內容——它支援所有的標準編輯方式:copy、paste、cut 和 select all、undo、redo 等等。但按鈕什麼都不會幹,Label 也只能顯示 Label。是時候來做一些互動了。

設定 UI

回到 Main.storyboard,點選按鈕,選擇它。在工具面板中,開啟屬性面板——頂部面板的第 4 個 tab。

將按鈕標題(title)修改為 “Say Hello”。如果按鈕寬度不足以顯示所有文字,可以使用 Editor\Size to Fit Content 選單。(如果 Size to Fit Content 是禁用的,點選別的地方反選按鈕物件,然後重新選中它,再試一次)。

現在,點選 text field,選中它。對於這個 App,使用者將在這裡輸入姓名 xxx,然後點選按鈕會在 Label 中顯示出 Hello xxx!。為了提示使用者,在屬性面板中找到 placeholder text屬性,輸入一些提示文字。

將 text field 拉大一點,以便輸入長名字,然後將按鈕放到它右邊。當你在 View Controller 場景中拖動物件時,會顯示藍色線條,有助於讓你對齊和防止物件,這是基於蘋果的人機介面指南的。

將 Label 放到 text field 和 按鈕的下方。因為 label 非常重要,需要將它的字型改大。選中 label,在屬性面板中,將 font 修改為 System Regular 30。

不妨將文字顏色改成紅色或者別的什麼醒目的顏色。

你不好說使用者的名字會用多長,因此要將 text field 的大小設定為符合字型高度,然後寬度基本能夠填滿視窗的寬度。

編譯執行 App,看看實際的效果。當你為 label 中顯示出來文字而高興時,別忘了刪除 label 的文字,以便讓 label 一開始是空的。

將 UI 連線到程式碼

這個 App 仍然還未完成,為了能夠完成它,你需要編寫程式碼,程式碼必須能夠和 UI 進行互動。要建立這種連線,在專案導航器中,Option 左鍵點選 ViewController.swift。這將建立第二個編輯器視窗,內容就是 ViewController 的程式碼。

視窗看起來有點凌亂,這要看你的顯示器大小了,可以用工具欄最右邊的按鈕將工具面板隱藏。如果你需要更多的空間,可以將導航器也隱藏。

選中 text field,按住 Control 鍵,從 text field 拖一條線到 ViewController類定義頭部。然後在彈出選單的 name 一欄輸入 nameField,然後點選 Connect。

在 label 上做同樣的動作,name 設定為 helloLabel。

看一眼 Xcode 生成的程式碼,你會看到有兩個用 @IBOutlet 宣告的屬性。這個關鍵字是 Interface Builder Outlet 的縮寫,用於告訴故事版這些物件的名字可以連線到一個視覺化元素。

對於按鈕,不需要在程式碼中建立這樣一個名字,但需要告訴我們什麼時候使用者點中了按鈕。這會使用 @IBAction 而不是 @IBOutlet 關鍵字。

選中按鈕,Control 左鍵拖一條線到 ViewController.swift。這次,需要將 Connection 修改為 Action,name 設為 sayButtonClicked。這會建立一個函式,當按鈕點選後呼叫它。

準備好編寫程式碼。點選右上角的 X 按鈕關閉助手編輯器。回到 ViewController.swift。如果你隱藏了導航器,點選右上角的轉換按鈕,或者用 Command 1 直接撥出專案導航器。

在 sayButtonClicked 方法中加入程式碼:

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

現在 ViewController.swift 中完整程式碼是這個樣子(頂部的版權宣告被刪掉了)。行號外邊的圓點表明有一個連線指向了故事版中的介面。

編譯執行 App。

點選 Say Hello 按鈕,不輸入任何文字,你會看到 Hellow World 字樣。輸入你的姓名,點選按鈕,你會看到一個給你的問候語。

除錯

有時候,程式設計師會犯錯誤——真是令人難以置信,但這是真的。這樣,我們就需要除錯程式碼了。Xcode 允許程式碼在執行到某一行時停下,單步執行程式碼,檢視變數值,以便找出錯誤的原因。

在 ViewController.swift 找到 sayButtonClicked 方法,在 var name =line 這一句的行號外邊單擊。這會新增一個藍色的箭頭。這是一個啟用的斷點,當你點選按鈕時,偵錯程式會在這裡停下。再次點選它一下,它會轉變成灰色。這就會變成非啟用斷點,當程式碼開始除錯後不會在此停止。要完全移除這個斷點,將它拖到行號欄以外即可。

再次新增這個斷點,執行 App。點選 Say Hello 按鈕。Xcode 會停止到斷點前面,並加亮顯示這句程式碼。在編輯器底部,出現兩個新的區域:變數和控制檯。變數欄顯示這個函式所用到的變數和 self ——即該 ViewController,以及 sender——即按鈕。

上圖中的變數顯示了幾個用於控制偵錯程式的按鈕。將滑鼠放到按鈕上,可以看到按鈕用途的提示。點選 Step Over 按鈕,會執行到下一行。

在變數欄,你可以看到 name 是一個空字串,因此連續點兩次 Step Over。偵錯程式會執行到 if 語句,設定 name 為 World 的地方。

在變數視窗中選中 name 變數,點選下方的 Quick Look 快速檢視按鈕,檢視它的內容。點選 Print Description 按鈕檢視控制檯中列印的資訊。如果 World 值沒有被正確賦值,你可以在這裡檢視並修復程式碼。

在檢視 name 變數的內容時,點選繼續執行 Continue program execution 按鈕,停止除錯,讓程式繼續執行。右上角的按鈕用於隱藏 Debug 視窗。

圖片

除了程式碼和 UI,App 還需要一些圖片。用於各種螢幕型別(視網膜屏和非視網膜屏),經常需要提供幾個版本的圖片資源。為了簡化這個工作,Xcode 使用了 Asset 庫來儲存和組織 App 中的圖片資源。

在專案導航器中,點選 Assets.xcassets。這裡只有一個 AppIcon,用於儲存 App 需要用到的各種解析度下的圖片。點選 AppIcon —— 你會看到它需要我們提供 10 種不同大小的圖片,覆蓋了各種可能的解析度,如果你在這裡只提供了一種圖片,Xcode 會盡量使用好這張圖片。這種體驗並不太好,因為你應該提供所有尺寸的圖示,但在本教程中,我們只使用一個圖示。

下載示例圖示,它的大小是 512×512。將它拖到 Mac 512px 1x 位置。

編譯執行 App,檢視 Dock 欄中的圖示。如果你看到的還是預設圖示,請退出 HelloWorld App,回到 Xcode,從 Product 選單中點選 Clean,然後再次執行 App。

檢視幫助

還是在編輯器中,Xcode 會包含了所有編寫 App 時要用到的文件。

開啟 Help\Document and API Reference 選單。搜尋 NSButton,選擇 Swift 語言,然後點選最上邊的搜尋結果,閱讀關於按鈕和按鈕的屬性。

還有一種方法,可以直接從程式碼中跳到對應的文件。回到 ViewController.swift,找到 sayButtonClicked 方法第一行程式碼。Option 滑鼠左鍵,點選 stringValue。會彈出一個視窗,顯示一個簡單描述。在彈出視窗底部有一個連線,可以跳轉到相關的參考文件。點選這個連線,文件會開啟,顯示詳細資訊。

Option 滑鼠左鍵是一種很好的學習方法,你甚至可以為自己的功能新增文件,並以同一種方式顯示。

在 Help 選單也有關於 Xcode 環境的幫助資訊。

結束

在下一部分,你將開始建立更復雜的 App,我在那裡等你喲!

如果你有任何問題和建議,請在下面留言。