你有沒有試過：想做一個 App，一打開 Xcode，卻覺得按鈕與面板多得不知從何下手？
其實入門不一定要先啃完整個開發環境。用 Swift Playgrounds，你可以用 iPad 或 Mac，在一個較乾淨的畫面裡，寫出第一個會動的小小 App。
這篇會帶你做兩個例子：
- 基礎：一個計數器——按下按鈕，數字就加一
- 生活實用：抽籤今晚食什麼——幾個選項，按下按鈕隨機抽出一個並顯示
這篇是獨立入門文，沒上過課也可以跟著做。若你之後想再進一步，用 AI 幫忙產出程式碼、再自己只改一處，可以留意我們的「Swift Playgrounds × AI 寫 Apps」。
你需要什麼設備？
- iPad（建議較新型號）或 Mac
- 免費的 Swift Playgrounds App（可在 App Store 下載）
- 不需要有編程經驗；有鍵盤會較方便，但不是必須
小提醒：Swift Playgrounds 裡可以建立「App」類型專案，用 SwiftUI 寫介面。這篇例子會用 SwiftUI，不會用 UIKit。
入門步驟（先跑得通，再慢慢明白）
1. 打開 Swift Playgrounds，建立一個 App 專案
打開 App 之後，選擇建立新的 App（不是舊式 Playground 頁面那種）。見到空白畫面與程式碼區，就對了。
2. 認清兩個區域
- 左邊／中間：你撰寫的 Swift 程式
- 右邊或 Preview：App 畫面預覽
你改過程式之後，通常會即時看到畫面變化。如果沒有更新，按一次 Run（執行）即可。
3. 先貼上一段完整程式，不必一次讀懂每一行
入門最常見的卡關，往往不是「不會寫」，而是「不知道從哪裡開始」。所以每個例子都會提供完整、可直接貼上的程式：貼上 → 執行 → 看畫面 → 再只改一處。
記住一個原則：不必全部明白，先找錨點——哪裡顯示文字、哪裡有按鈕、哪裡記住會變的資料。
基本操作示範：改字、執行、看 Preview
無論你貼哪個例子，都試做這三件事：
- 找到標題那一行 Text，改幾個字，看 Preview 有沒有變。
- 找到按鈕上的文字，改成你喜歡的說法。
- 真正按按鈕（或操作介面），看畫面會不會跟著動。
如果改完沒有反應：檢查有沒有漏掉括號、有沒有多刪了行，或重新 Run 一次。這很常見，大家都是這樣過來的 ^_^
例子一（基礎）：一個計數器（@State ＋ Button）
核心只有兩樣：
@State：記住「現在的數字是多少」（像一塊記分板）Button：按一下，就改記分板；畫面跟著更新
把 App 專案裡的內容換成下面這段完整程式（可以直接貼上）：
import SwiftUI
@main
struct CounterApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
// 記分板：記住目前數字
@State private var count = 0
var body: some View {
VStack(spacing: 24) {
Text("My Tiny Counter")
.font(.largeTitle)
.bold()
Text("Count: \(count)")
.font(.title)
Button("Add 1") {
count += 1
}
.buttonStyle(.borderedProminent)
}
.padding()
}
}讀碼：三個錨點
@State private var count = 0——數字記在這裡。Button("Add 1") { count += 1 }——按按鈕就讓數字 +1。Text("Count: \(count)")——畫面顯示現在的數字。
只改一處（建議）
選下面其中一項即可：
- 把初始數字改成
3 - 把按鈕文字改成
Tap me - 把
count += 1改成count -= 1（變成減一）
改完再 Run。如果你說得出「哪一行負責更新」，你已經踏入寫 App 的門口。
想再多試一點：加第二個按鈕 Reset（count = 0），或數字到 10 就顯示 Nice!。
例子二（生活實用）：抽籤今晚食什麼（Button ＋ 隨機）
計數器練熟「狀態會變」之後，試一個晚餐猶豫時很實用的小程式：預先寫好幾個選項，按下按鈕就隨機抽出一個並顯示。若想一次看清有哪些選擇，下面也可以列出全部選項。
這裡會用到：
@State：記住選項清單，以及「現在抽中哪一項」Button：按一下就隨機挑選Text：顯示抽中結果- （可選）再列出全部選項，方便你知道「籤筒」裡有什麼
同樣換成下面這段完整程式：
import SwiftUI
@main
struct DinnerPickerApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
@State private var options = [
"🍜 拉麵",
"🍣 壽司",
"🍕 Pizza",
"🥗 沙律",
"🍛 咖喱飯"
]
@State private var picked: String? = nil
var body: some View {
NavigationStack {
VStack(spacing: 24) {
Text(picked ?? "今晚食什麼好？")
.font(.title)
.bold()
.multilineTextAlignment(.center)
.padding()
Button("抽籤！") {
picked = options.randomElement()
}
.buttonStyle(.borderedProminent)
// 可選：顯示全部選項，看看籤筒裡有什麼
List(options, id: \.self) { option in
Text(option)
}
}
.padding()
.navigationTitle("今晚食什麼")
}
}
}讀碼：四個錨點
options——籤筒裡有哪幾項（一個字串陣列）。picked——現在抽中哪一項；一開始是nil，所以先顯示提示句。Button("抽籤！")——按完用randomElement()隨機選一個，寫入picked。List(options…)——（可選）把全部選項列出；不想顯示可以整段刪除。
只改一處（建議）
- 改
options裡的幾項（例如改成你家裡真的會吃的） - 改按鈕文字為
幫我決定！ - 改提示句
今晚食什麼好？為今日午餐抽籤
想再多玩一點：加第二個按鈕「再抽一次」（其實同一個 randomElement() 就夠）；或抽中之後，用顏色／字級再強調結果。同一套「記住狀態 → 按按鈕改狀態 → 畫面更新」，就是計數器的生活版。
小重點： picked 用可選型（String?），是因為一開始還沒抽。畫面用 picked ?? "今晚食什麼好？"——有結果就顯示結果，沒有就顯示提示。之後做抽獎、隨機溫習題、隨機播放清單，都是這條思路。
常見問題 FAQ
Q：一定要用 Mac 嗎？
A：不一定。iPad 安裝 Swift Playgrounds 就可以跟著這篇做；Mac 也可以。之後若要正式上架 App Store，才主要用 Xcode；入門階段 Playgrounds 已經很夠用。
Q：同 Xcode 有什麼分別？
A：Xcode 功能齊全，適合正式專案；Swift Playgrounds 介面較簡單，適合學 SwiftUI 與快速試作想法。你現在學到的 @State、Button、陣列與隨機，之後到 Xcode 也用得上。
Q：兩個例子要兩個專案嗎？
A：初學建議開一個 App 專案，先跑通計數器；想試「抽籤今晚食什麼」就換掉 ContentView（或整個檔案）再貼第二段。熟練之後，可以自己開兩個專案分開保存。
Q：為什麼程式要寫得這麼「完整」？
A：因為 Swift Playgrounds 的 App 專案需要完整結構才能跑起來。省略 import 或 @main，很容易一貼就出現紅字。入門寧可貼完整檔，再慢慢認清每一塊。
Q：我可以用 AI 幫忙寫嗎？
A：可以。之後若你上「Swift Playgrounds × AI 寫 Apps」五節課，會練習：寫清楚提示詞 → AI 產出完整 SwiftUI 程式碼 → 你讀關鍵幾行 → 只改一處。這篇先不依賴 AI，是想讓你親手感受「畫面如何因為狀態而改變」。
Q：出現紅色錯誤怎麼辦？
A：先核對有沒有漏括號、有沒有中英標點混用、有沒有改壞 struct 名稱。還是不行就還原上面的完整例子，再只改一處。一步一步來，完全沒問題。
Q：「抽籤今晚食什麼」之後可以變成什麼？
A：同一條思路——「記住一些選項，按按鈕隨機改『現在的結果』，畫面跟著更新」——可以變成隨機溫習題、抽誰洗碗、簡易抽獎。課堂裡的「今日三件事」則是另一條路：輸入＋清單；你學會狀態之後，兩條路都組得出來。
結語
寫 App 不必一開始就又大又漂亮。你今天只要做到兩件事其中一件就很好：按一下按鈕，數字會變；或者 按一下按鈕，今晚吃什麼就決定了。
從計數器到「抽籤今晚食什麼」，你已經在用真正的 SwiftUI 概念動手。有興趣再深造，就去看看「Swift Playgrounds × AI 寫 Apps」；想自己繼續摸索，就把選項改成你在意的小事——午餐、週末去哪、隨機播哪首歌，都可以。