Day 05：決定前端戰場：在 Xcode 實踐 AI 生成的 MVC 架構

嗨，大家今天過得好嗎？歡迎來到鐵人賽 Day 5。

昨天我們準備好了一份「結構化 Prompt」，今天終於要進入大家最期待的環節：打開編輯器，直接讓 AI 幫我們寫 Code！

在這 30 天的全端專案裡，我們的前端主戰場是 iOS 原生的 SwiftUI。如果你是網頁前端開發者，其實概念也是相通的（只是把 Xcode 換成 VSCode，SwiftUI 換成 React/Vue），因為我們最核心的重點在於「架構」。

準備戰場：建立 Xcode 專案與目錄

請打開 Xcode，建立一個全新的 iOS App 專案，介面 (Interface) 選擇 SwiftUI。

專案建好後，先別急著貼程式碼。為了貫徹我們的開發紀律，請在專案目錄下先建好三個資料夾 (Groups)：

• 📁 Models
• 📁 Views
• 📁 Controllers

這看起來是很老派的動作，但在 Vibe Coding 時代，這三個資料夾就是你的防波堤，用來阻擋 AI 把程式碼弄成一坨爛泥。

見證奇蹟：丟出我們的 Prompt

現在，把我們 Day 4 寫好的那段「【角色 ＋ 架構 ＋ 任務 ＋ 限制】」Prompt，丟給你習慣的 AI（不管是 ChatGPT、Claude，或是直接在 Cursor / Xcode 裡呼叫 Copilot 都可以）。

因為我們明確限制了「必須嚴格遵守 MVC 且分檔輸出」，AI 吐出來的程式碼不會是一長串的 ContentView.swift，而是會乖乖切成三個檔案。讓我們把這些 Code 分別貼進剛剛建好的資料夾裡：

1. Model 層 (放在 Models 資料夾)

Model 只負責定義資料結構，非常乾淨。

// HardwareRequest.swift
import Foundation

struct HardwareRequest {
    var budget: String = ""
    var purpose: String = "3A 遊戲"
}

2. Controller 層 (放在 Controllers 資料夾)

在 SwiftUI 裡，我們通常會用 ObservableObject 來實作 Controller（有些人會叫它 ViewModel，但在這個專案我們遵循 MVC 的思維）。這裡負責處理所有的邏輯與狀態。

// HomeController.swift
import Foundation
import SwiftUI

class HomeController: ObservableObject {
    @Published var requestData = HardwareRequest()
    
    let purposeOptions = ["3A 遊戲", "影音剪輯", "文書處理"]
    
    // 預留給未來串接 API 的 Function
    func submitRequest() {
        guard let budgetInt = Int(requestData.budget), budgetInt > 0 else {
            print("請輸入有效的預算金額")
            return
        }
        
        print("準備發送 API 請求...")
        print("預算：\(budgetInt)，用途：\(requestData.purpose)")
        // TODO: 之後會在這裡把資料打包成 JSON，發給 n8n Webhook
    }
}

3. View 層 (放在 Views 資料夾)

這裡就是負責畫面的 ContentView.swift。你看，因為邏輯都被抽走了，View 裡面的程式碼變得超級清爽，它只需要專心負責「長相」跟「綁定資料」就好。

// ContentView.swift
import SwiftUI

struct ContentView: View {
    // 實體化 Controller
    @StateObject private var controller = HomeController()
    
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("請輸入您的需求")) {
                    TextField("輸入預算 (如: 30000)", text: $controller.requestData.budget)
                        .keyboardType(.numberPad)
                    
                    Picker("選擇用途", selection: $controller.requestData.purpose) {
                        ForEach(controller.purposeOptions, id: \.self) { option in
                            Text(option).tag(option)
                        }
                    }
                }
                
                Button(action: {
                    controller.submitRequest()
                }) {
                    Text("產生推薦菜單")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(8)
                }
            }
            .navigationTitle("AI 硬體菜單配對")
        }
    }
}