Day 12：資料變形記：掌握 Edit Fields 節點與 API 資料閉環

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

昨天我們在 n8n 成功收到了 SwiftUI 傳來的 budget 和 purpose，但如果你仔細觀察昨天的 iOS 模擬器，轉圈圈結束後，畫面並沒有跳出精美的結果卡片，反而是在 Console 噴出了 Decoding Error。

為什麼會這樣？因為在我們 Day 11 的設定中，n8n 的 Webhook 節點預設會把「最後一個節點的結果」回傳給前端。由於昨天 Webhook 後面什麼都沒接，它就把前端傳來的原始資料（或者一包空的 OK）原封不動地丟了回去。

但我們的前端 Swift 是一個**強型別（Strongly Typed）**的語言，它正在痴痴地等待我們 Day 8 定義好的 HardwareMenu 格式：

{
  "cpu": "字串",
  "gpu": "字串",
  "totalPrice": 整數,
  "reason": "字串"
}

資料格式對不起來，Swift 的 JSONDecoder 當然直接報錯罷工。今天，我們要在 n8n 裡把資料「變形」成前端看得懂的樣子，完成這個全端資料閉環 (Data Loop)。

認識 n8n 的資料塑型大師：Edit Fields (Set) 節點

在 n8n 中，如果你想要新增、修改或刪除資料的欄位，最常用到的就是 Edit Fields (舊版稱為 Set) 節點。

讓我們回到 n8n 的畫布：

1. 點擊 Webhook 節點右邊的 + 號，搜尋 Edit Fields 並新增它。
2. 點開 Edit Fields 節點，你會看到它可以讓你自由定義 Assignments (賦值)。
3. 點擊 Add Assignment，我們要來手動拼湊出前端需要的四個欄位。

在我們還沒串接資料庫跟 AI 之前，今天我們先在這裡「寫死」一組假資料，來驗證前後端資料流是否真正打通。

請新增以下四個欄位 (Field Name) 與對應的值 (Value)：

• Field Name: cpu ➔ Value: Intel Core i5-13400F (字串)
• Field Name: gpu ➔ Value: RTX 4060 Ti (字串)
• Field Name: reason ➔ Value: 這是來自 n8n 後端捏出來的假資料，我們成功打通 API 啦！ (字串)
• Field Name: totalPrice ➔ Value: 29500 (等等，這裡有雷！)

踩坑警告：跨語言的「資料型別」陷阱

在這裡我要特別停下來，講一個全端開發超容易踩到的坑。

n8n 主要是基於 JavaScript 打造的，在 JS 的世界裡，型別非常寬鬆（Weakly Typed）。你在 totalPrice 的 Value 欄位填入 29500，n8n 預設很可能會把它當作字串 (String) "29500" 來處理。

但是！我們在 SwiftUI 的 Model 裡，是這樣定義的：
let totalPrice: Int

如果 n8n 吐了一個字串給 Swift，Swift 的 JSONDecoder 發現型別不符，會毫不留情地直接 Crash，導致你的 App 畫面一片空白。 很多新手查了半天，以為是網路沒通，結果只是因為數字被包在引號裡面。

【解法】
在 n8n 的 Edit Fields 節點中，設定 totalPrice 時，請特別注意：

1. 將 Value 旁邊的類型標籤（預設可能是 String）點擊一下，改為 Number。
2. 或者，如果你是用 Expression (表達式) 模式輸入，請寫 {{ 29500 }}，而不是純文字的 29500。

確保 n8n 右邊的 Output 預覽視窗裡，totalPrice 的值是綠色的數字 29500，而不是帶引號的 "29500"。

見證奇蹟的時刻：全端閉環完成！

把 Edit Fields 節點設定好，並且確認它連在 Webhook 節點後面。

1. 在 n8n 畫面下方，點擊 「Execute Workflow」 讓它進入監聽狀態。
2. 打開你的 Xcode 跑起 iOS 模擬器。
3. 隨便輸入個預算，按下「產生推薦菜單」！

這一次，你不會再看到紅字報錯了。兩秒鐘的轉圈圈後，一張精美的 ResultCardView 會彈出來，上面顯示的正是你剛剛在 n8n Edit Fields 裡設定好的 CPU、GPU 以及那段「來自 n8n 後端捏出來的假資料」字眼！

小結

恭喜你！到今天為止，我們已經有了一個具備實質意義的全端架構。
前端（SwiftUI）負責收集資料並發送請求 ➔ 後端（n8n Webhook）接收請求 ➔ 後端處理與變形資料（Edit Fields） ➔ 前端接收並完美渲染出畫面。

現在的 n8n 工作流還很短，只有 [Webhook] -> [Edit Fields]。明天，我們要把戰場往更深處推進，拿掉寫死的假資料，正式接入關聯式資料庫 PostgreSQL，讓我們的硬體菜單擁有真實的時價資料庫後盾！

大家記得先把 PostgreSQL 環境準備好（也可以用 Docker 架設），我們 Day 13 見！