# 我用 N8n 和 ChatGPT 在一個週末架起了互動網頁，不會寫 code 也行

▋ 一切從「我不想學 React」開始

說實話，我一直對寫網頁有點恐懼。不是技術上的恐懼，而是心理上的——每次想到要開 VS Code、設定環境、學新框架，我就會拖延症發作。那時候我在做一個小專案，需要一個能接收表單、呼叫 API、然後即時反饋結果的簡單網頁。我跟朋友說起這事，他就問我：「你聽過 N8n 嗎？」

我那時候根本沒聽過。結果他說：「你可以用 N8n 直接架網頁，不用寫一行 HTML。」我當時真的是半信半疑，但因為時間緊張，我就試試看。

▋ N8n 的網頁功能比我想的強大太多

一開始我以為 N8n 只是一個自動化工具，就像 Zapier 那類的東西。結果登進去之後才發現，它有一個「Webhook」功能，而且搭配它內建的表單和回應模組，你根本可以把它當作一個簡單的網頁後端。

最神奇的是，你可以直接在 N8n 裡面設計一個表單介面。不用 HTML、不用 CSS，就是拖拖拉拉就能搞定。然後你設定一個 Webhook，讓你的前端（或甚至是一個靜態 HTML 檔案）去呼叫它，N8n 就能接收資料、處理邏輯、回傳結果。

我花了大概一個小時摸清楚介面，又花了兩個小時建立了第一版的工作流程。那一刻真的有點爽，因為感覺自己好像做了什麼了不起的事，但其實只是拖拖拉拉點點滑鼠。

▋ Webhook API 讓互動成為可能

Webhook 才是整個過程的關鍵。簡單講，它就是一個「回呼函式」——你在網頁上填完表單、按下送出，它會自動把資料送到 N8n 的 Webhook 端點，N8n 收到後就執行你設計好的工作流程，然後把結果吐回來給網頁。

我設定的工作流程是這樣的：網頁表單 → N8n Webhook 接收 → 做一些資料驗證 → 呼叫 ChatGPT API 生成內容 → 把結果存到資料庫 → 回傳 JSON 給前端。整個流程不超過五個步驟，N8n 裡面都有現成的模組。

這邊有個小坑。一開始我沒設定好 CORS（跨域資源共享），導致前端怎麼都無法正確連接到 Webhook。後來才弄懂說，N8n 的 Webhook 其實預設就支援 CORS，我只是設定錯了參數。花了半小時除錯，才發現是自己的前端程式碼問題。

▋ ChatGPT 和 LLM 讓網頁瞬間有了「智能」

真正的轉折點是當我把 ChatGPT 整合進來。原本我以為自己還得寫一堆邏輯來處理用戶的輸入、生成內容、格式化輸出。結果直接把 OpenAI 模組拖進 N8n，填上 API Key，設定一個 Prompt，然後把表單的資料作為輸入丟給 ChatGPT——boom，網頁瞬間變成了一個能「思考」的東西。

用戶在表單裡填入一個問題，按下送出，N8n 就把這個問題送給 ChatGPT，ChatGPT 生成答案，然後直接在網頁上顯示出來。感覺起來就像一個真正的應用，但其實背後的邏輯簡單得要死。

我試著用不同的 LLM——試過 Claude、試過 Llama（透過本機 Ollama）。每一次切換都只是改變 N8n 裡面的幾個參數而已。沒有任何重新編寫 code 的工作，就純粹是配置。這讓我有種超強的掌控感。

▋ 但現實沒有想的那麼美好

當然，過程中也碰到不少坑。首先是效能的問題。一開始每次呼叫 ChatGPT 都得等個 3-5 秒，用戶體驗其實還好，但如果有多個人同時用，N8n 的免費版就會開始卡頓。我後來升級了付費方案，情況才改善。

再來是 Webhook 的穩定性。有一次我的 Webhook 無預警地掛掉，用戶的表單資料全部沒進去。我花了一個小時才發現是 N8n 的執行紀錄滿了。後來才知道要定期清理執行歷史。

還有一個我一開始沒想到的問題是安全性。我的 Webhook URL 是公開的，任何人只要知道這個 URL，就可以隨意呼叫它、浪費我的 API 額度。我後來加了 API Key 驗證，或是用 N8n 的內建安全機制去限制來源 IP。

▋ 現在我怎麼用它

到現在為止，我已經用 N8n + ChatGPT 架了三個小專案。有一個是客戶反饋系統——用戶填表單、系統自動用 ChatGPT 分析情緒、分類問題、生成回應建議。另一個是內容產生器——用戶輸入一些關鍵詞，系統自動生成社群貼文文案。第三個是一個簡單的問答機器人，接入了知識庫。

每一個專案從概念到上線，都不超過一個週末。我也不用擔心伺服器、不用擔心部署、不用擔心擴展。N8n 本身就幫我處理了這些事。

說實話，我現在看待「寫網頁」這件事的心態完全改變了。我不再認為一定要會 JavaScript 或 React 才能做出交互式的應用。只要你理解「資料流」、「API 呼叫」、「工作流程」這些概念，N8n 就能讓你快速實踐。

▋ 給想試試看的人的建議

如果你也想玩玩看，我會建議：先從一個簡單的 Webhook 開始，不要一口氣整合太多東西。把 N8n 的基本邏輯摸清楚，理解「觸發」、「動作」、「條件」這些元素怎麼運作。然後再慢慢加入 ChatGPT、資料庫、郵件通知這些。

別被複雜的工作流程嚇到。N8n 社群其實很活躍，很多現成的模板和教學。有不懂的地方就問 Google、問 ChatGPT，或是直接在社群裡發問。我的經驗是，絕大多數的問題都有人遇過、也都有解決方案。

最後想說的是，這種「低代碼」或「無代碼」的工具其實改變了什麼是「懂技術」的定義。你不一定要會寫 code，但你要懂邏輯、懂系統思維、懂怎麼用現有的工具去組合出想要的結果。在這個 AI 滿天飛的時代，這種能力可能比傳統的編程技能更有用。