Xcode 入門：做出你的第一個 iOS App
技 iLab學校技術長進階技術・終端機・系統維修・依官方資訊整理開始前
「我想自己做一個 App，可是完全不會寫程式，這台 Mac 做得到嗎？」這句話我們在門市櫃台前聽過太多次。通常問的人手上拿著一台 MacBook Air，眼神裡半是好奇半是怕麻煩。我的回答都一樣：做得到，而且比你想的快。真的坐下來跟我們一起點兩下，第一個會動的 App 跑出來，差不多就是一杯咖啡的時間。
很多人以為做 iOS App 要先繳 Apple 的年費、要有一支拿來測試的手機、要先把 Swift 語法背熟才敢動手。其實這三件事在「做出第一個 App」這個階段全都不需要。你只要一台 macOS Sonoma（14）以上的 Mac，裝好免費的 Xcode，連 Apple ID 都用平常那個就行。
先把 Xcode 裝起來，這步最花時間
實話講，整個流程裡最久的不是寫程式，是下載 Xcode。它大概 8 到 10 GB，在門市網路順的時候也要等個十幾分鐘，所以我都會建議客人「先按下載，我們邊等邊聊」。
去 App Store 搜「Xcode」，點「取得」再「安裝」就好。裝完第一次打開，它會跳一個「Install Additional Components」的視窗，按下 Install 讓它把模擬器那一包環境補齊，這又要幾分鐘。這裡有個地方我每次都會特別交代：Xcode 一定要從 App Store 裝，別圖快去外面抓 .dmg。早年有過 XcodeGhost 那種被動手腳的版本流出，正版管道雖然慢一點，但乾淨。
下載這段你可以放著去做別的事，回來大概就好了。
開一個新專案，欄位別被嚇到
Xcode 打開後會看到歡迎視窗，選「Create New Project…」。接著平台挑 iOS、範本挑最普通的 App，按 Next。
下一頁那一堆英文欄位是大家最容易卡住的地方，其實要動的沒幾個：
- Product Name 填
HelloiLab這種英文、沒空格的名字就好 - Team 下拉選你的 Apple ID，免費帳號就會出現
- Organization Identifier 填
tw.edu.ilab這種反過來寫的網域格式 - Interface 一定要選 SwiftUI
- Language 選 Swift
- Include Tests 別勾，第一個 App 先不管它
很多人會盯著 Organization Identifier 發愣，以為要自己真的有那個網域。不用。它只是 App 的一個唯一標籤，練習階段你高興填什麼都行。填完按 Next，挑個資料夾存（我習慣放 ~/Developer/），按 Create。
進到主畫面，先認認路
專案一建好，畫面會分成三塊：左邊是你的檔案、中間是寫程式碼的地方、右邊那塊會即時把畫面畫給你看的叫 Canvas。Xcode 預設會幫你開好一個叫 ContentView.swift 的檔，裡面長這樣：
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}
#Preview {
ContentView()
}
不用全懂，但有三件事先記住就夠用了。第一，畫面上每個東西在 SwiftUI 裡都是一個 View，那個 body 就是負責回傳「這個畫面長怎樣」。第二，SwiftUI 是宣告式的——你只要描述你要的樣子，怎麼更新畫面交給系統算，這跟以前那種一行一行指揮的寫法很不一樣。第三，最下面那個 #Preview 是 Xcode 15 之後的寫法，讓右邊 Canvas 直接把結果畫出來，不用每改一次都去開模擬器，省事很多。
動手改成一個會加減的計數器
光看不練沒感覺，我們直接把 ContentView.swift 整個換掉，貼上這段：
import SwiftUI
struct ContentView: View {
@State private var count = 0
var body: some View {
VStack(spacing: 32) {
Text("iLab 計數器")
.font(.largeTitle)
.bold()
Text("\(count)")
.font(.system(size: 80, weight: .thin, design: .rounded))
.foregroundStyle(.blue)
HStack(spacing: 24) {
Button("－") {
if count > 0 { count -= 1 }
}
.font(.title)
.buttonStyle(.bordered)
Button("＋") {
count += 1
}
.font(.title)
.buttonStyle(.borderedProminent)
}
}
.padding()
}
}
#Preview {
ContentView()
}
貼完右邊 Canvas 應該就跳出一個有大數字跟兩顆按鈕的畫面了。這幾行裡值得停下來看的有幾個地方。@State private var count = 0 是 SwiftUI 的狀態管理，重點在於這個數字一變，畫面會自己跟著重畫，你不用親手去叫它更新。VStack 跟 HStack 一個直排一個橫排，spacing 管中間留多寬。按鈕的寫法也很直白，Button("－") { 做什麼 }，大括號裡就是按下去要跑的事。最後那個 .buttonStyle(.borderedProminent)，一行就讓按鈕變成系統那種藍底樣式，不用自己刻。
這個 @State 好用，但它只管得到自己這個 View 內的事。等你之後想做大一點、要在好幾個畫面之間共用同一份資料，再去學 @StateObject 搭 ObservableObject,或是 iOS 17 之後那個更乾淨的 @Observable。第一個 App 先別想那麼遠。
按下播放，先在模擬器裡跑跑看
左上角有個裝置選單，挑一台模擬器，例如「iPhone 16」，然後按 Command+R，或直接點旁邊那顆播放鍵。等一下模擬器會自己開起來，把你的 App 裝進去、打開。這時候去戳那兩顆「＋」「－」，數字會跟著跳，那一刻通常是客人最有成就感的時候——自己寫的東西真的動了。
想裝到自己手機上？免費帳號也可以
模擬器玩過癮之後，下一個常見的問題是：「那能不能裝到我自己的 iPhone 看看？」可以，而且不用花錢。
先用線把 iPhone 接上 Mac，手機跳「信任此電腦？」就按信任、輸密碼。回到 Xcode，裝置選單從模擬器改成你 iPhone 的名字。接著確認 Apple ID 有登入——路徑是 Xcode → Settings → Accounts。然後到 Signing & Capabilities 那一頁，Team 選你個人的 Apple ID，它會標成「Personal Team」。都對了就再按一次 Command+R，它會編譯好直接灌進手機。
第一次灌進去，iPhone 多半會擋你，跳「未受信任的開發者」。別慌，這是正常的。去手機的 設定 → 一般 → VPN 與裝置管理，找到你的 Apple ID，點「信任」，App 就開得起來了。
卡住的時候，這兩招最常用
帶過這麼多次，會卡住的地方其實就那幾個。
右邊 Canvas 預覽一直轉圈或紅字報錯，先別重裝。按一下 Canvas 右上角的「Resume」（或 Option+Command+P）讓它重畫一次。要是還卡，就關掉 Xcode，把編譯快取清掉再開：
rm -rf ~/Library/Developer/Xcode/DerivedData
這個資料夾只是放編譯過程的暫存，清掉不會碰到你的原始碼，但常常能解掉那些莫名其妙的建置錯誤。
另一個常見的是按 Run 跳出「Signing for “HelloiLab” requires a development team」。這其實就是在說你還沒選簽章。點左邊那個藍色的專案圖示，找到 Target「HelloiLab」，進 Signing & Capabilities，在 Team 那欄選你登入的 Apple ID 就解決了。如果下拉選單裡根本沒有你的帳號，那是還沒登入，回 Xcode → Settings → Accounts 補上。
做完這一輪，你手上就有一個自己從零點出來、還能裝進口袋的 App 了。會卡的地方多半不是程式邏輯，而是 Xcode 那些藏在選單裡的設定，而這正是當面帶最快的部分——有人在旁邊指一下，本來要查半小時的東西兩分鐘就過了。如果你還在猶豫手邊這台 Mac 跑不跑得動，或想知道要做開發、剪片、寫程式哪種規格才夠，可以先用我們的選機小幫手抓個方向，也歡迎直接來店裡，我們開一台 Mac 陪你把第一個 App 點出來。