自學系列 | iOS Swift | 第一課：開發工具＋ App 基礎觀念＋ 基礎 UI
用 AVFoundation 做一個簡易變聲 App
前言：為什麼會有「自學系列」
當我還是程式初學者時，覺得自學最麻煩的就是：那些課程大綱、專有名詞我根本看不懂。如果有個已經會的人直接跟我說要學什麼，給我一個 overview，就能省下很多時間。
這篇文章承接上一篇 自學系列 | iOS Swift | 用免費的線上學習資源入門 iOS App，在上一篇文章中我整理了對於 iOS App 初學者來說，有哪些基礎要學，並且介紹 Udacity iOS App 的線上課程。
這篇是線上課程第一課的導讀，第一課會教你做出這個影片中的 app，它可以錄下你的聲音，還可以讓聲音產生各種奇怪的變形。
導讀：做變聲App的過程中，可以學到什麼？
底下是第一堂課的連結。
在完成變聲 app 的過程中，可以學到底下幾個主題，我會一一介紹這些主題在學什麼，希望讓大家看教學影片時能有比較清晰的概念：
下文的用意是希望當大家看 Udacity 的影片有疑惑、感覺不知道在學什麼、或是學這個要幹嘛時，搭配這篇閱讀可以有點方向感。
1. 開發工具
- 寫 iOS App 的第一個動作：打開 Xcode
回想一下打報告時，第一件事就是打開 Word 或 Google Doc，而要寫 iOS App 時，第一件事則是打開 Xcode。Xcode 是寫 iOS App 需要使用的開發工具，舉凡寫 code、管理資料夾、執行 code、跑出 iPhone 模擬器、debug…諸多工作都在 Xcode 上執行。
它的介面看似功能很多，但掌握影片中教的常用功能就好，其他的有需要再查，「千萬不要花時間去鑽研每個功能」，就像我們用 Microsoft Word 也不會先學完所有功能再開始打字，這樣報告永遠交不出去。
- 初學者的好夥伴：Storyboard
使用 Xcode 開發 app 有個好處是，我們可以使用視覺化的方式(即 storyboard)做出過去要用程式碼寫的 UI 介面，讓初學者比較容易上手。比方說要做一個開始錄音的按鈕，我們只要拉一個 UIButton 元件到畫面上即可，過去這些動作都要用 Code 來做。
雖然 Storyboard 真的很好用，但多人一起協作時很容易出錯，因為Storyboard 隱藏太多細節，不像 Code 是一行行清楚的文字。因此建議使用 Storyboard 之餘，還是要學一下用 Code 去寫 UI 畫面。
- 寫程式遇到問題怎麼辦？Google、Stack Overflow、Document
當我們寫 Code 遇到問題，最快的就是直接 Google，或是到 Stack Overflow 上發問，但有些很細微的東西，還是要看 Document(文件) 才能知道。影片有教在 Xcode 中直接開啟 Swift 的 Document，我們也可以上 Apple Developer 網站查看 Document。
2. 觀念
- 使用 App 的時間軸：Life Cycle (生命週期)
App 有所謂的「生命週期」，在不同狀態會執行不同任務。例如點開 App 之前、使用 App 的過程、暫時關掉去用其他 App…這些都表示 App 處在不同的狀態。
不只 App 本身有生命週期，App 裡每一頁看到的畫面 (View Controller) 也有生命週期，畫面即將出現、已經出現、即將消失、已經消失…都代表 View Controller 的不同階段。瞭解這些狀態的不同，才能將功能寫在正確的位置，例如我們希望在畫面出現之前，先讓錄音的 Button 顯示紅色，就可以把設定顏色的程式碼寫在 viewWillAppear 這個函式裡。
3. 畫面/操作
- 畫面（View Controller/ Navigation Controller）
在這堂課的變聲 App 中，總共有兩個畫面，每一頁畫面都是一個 View Controller，當我們在主畫面錄完聲音，點按鈕進入下一頁變聲頁面，那就是下一頁的 View Controller。串連起來這一頁頁之間前後關係的，就是 Navigation Controller 負責的事。
Navigation Controller 就像一個容器，第一個裝進去的 View Controller 是主畫面，第二個裝進去的是第二頁…就像資料結構中的「Stack」一樣 (不知道 Stack 可以先不管它)。我們經常使用的「回到上一頁/進入下一頁」功能其實就是 Navigation Controller 的應用。
- UIKit 元件：按鈕 UIButton
UIKit 是 iOS App 中各種 UI 元件的集合，UI 元件就是我們在 App 上看到的各種按鈕(UIButton)、文字(UILabel、UITextview)、圖片(UIImage)…等等。在這個變聲 App 中，因為我們需要錄音、播放等功能，所以使用到 UIButton。
影片會教如何在 Storyboard 中拉一個 UIButton，然後跟程式碼做連結，用 Code 去控制按鈕。有 IBOutlet 跟 IBAction 兩種方法，前者可以設定按鈕的屬性(例如按鈕中的文字、顏色)，後者可以設定按鈕的邏輯(例如被按下之後要開始錄音)。
- 排版（Auto-layout/Stack Views）
iPhone 有很多不同的 size，所以排版是一個大問題。當我們把文字、圖片、按鈕放到畫面上，按照 iPhone 8 的大小排版精美後，放到 iPhone 8 Plus 上排版就可能亂掉。因此我們要想辦法用「相對位置/相對比例」來描述元件的大小，而非設定絕對位置，這就是 Auto-layout 在做的事。
Stack View 則是讓排版從一次排一個元件，變成一次可以排多個元件。還記得上面講 Navigation Controller 提到的 Stack 嗎？這邊的 Stack 是相同的意思，一個容器裝進去第一個 UIButton、第二個 UIButton、第三個 UIButton… Stack View 讓在這個容器中的所有 UIButton 都有一致的間隔、大小，不用一個個去調整版面。
4. 設計模式 (Design Pattern)
- 寫程式必須各司其職：MVC 原則
MVC 三個字母分別代表 Model、View、Controller，Model 負責管理 data、View(介面)負責跟使用者溝通、Controller 則是負責處理邏輯，作為 Model(data) 跟 View(UI) 溝通的橋樑。寫程式時要盡量把三者分開，讓每一塊的功能都很明確，出錯時才容易找到問題所在。
關於 MVC 原則，通常要等寫了幾次雜亂的程式碼而痛苦不已之後，才能體會它的重要，等學的東西夠多、寫的程式碼也夠多的時候，可以再回頭來看白鬍子老先生這部影片的前十分鐘片段，他將 MVC 講的很清楚。
- Delegation
Delegation 是一種寫程式的方法，用於當 A 想叫 B 做事情的時候。實際生活中的例子像是：主管請實習生整理開會資料、媽媽叫小孩收拾玩具、總統委任你去當法國大使…其中被叫去做事的，就是 Delegate(代理人)。
以變聲 App 來說，我們希望當按下停止錄音的按鈕後，RecordSoundsViewController 就要執行停止錄音這件事情，那我們就要設定 RecordSoundsViewController 是這個任務的代理人，所以才會寫下
audioRecorder.delegate = self其中 self 就是 RecordSoundsViewController。
5. App 主題
當你要做 AR 的 App，不要害怕，Apple 已經幫我們開發好一整個函式庫(ARKit)，有各種 AR 功能可以運用。當你要做 AI 相關的 App，不要害怕，Apple 已經幫我們開發好一整個函式庫(CoreML)，有各種 Machine Learning 的功能可以運用。
你需要做的只是，去學這些函式庫怎麼用！
- AVFoundation
同理，要做一個變聲 App，我們要學的是 AVFoundation 這個函式庫中，負責處理錄音的，以及負責處理聲音頻率的功能。這兩個功能在 Udacity 課程裡講了很多，我就不多描述了。
學完第一課，你已經開發出一個 App 了！
同時還學會使用開發工具、瞭解 App 生命週期的觀念、碰過幾個基礎 UI 元件、運用了一點寫程式的原則及Delegation 模式、還運用函式庫處理了錄音跟變聲功能。
準備好前往下一課了嗎？
第二堂課：介面開發 (UIKit)
第三堂課：網路資料傳輸處理 (Networking)
第四堂課：手機上的資料儲存 (Core Data)
第五堂課：從發想到上架的方法論
陸續更新，請持續關注！如果覺得這篇文章對你有幫助，請幫我拍拍手！
