哈囉大家好，我是享哥。今天想跟大家分享我近期使用 Vibe Coding 實作的「報價單系統」。 你可以直接前往 報價單測試網站 進行實際體驗！ 這個報價單系統是我很久以前就非常想做的專案，過去因為卡在一些技術問題，一直沒有動手實作。這次藉由 Vibe Coding 的協助，我成功開發出了這個具備後台編輯、公開報價頁、商務型電子簽署，以及 JSON / PDF 匯出功能的 MVP（最小可行性產品）。 系統核心定位與開發理念這套系統的核心在於提供一個流暢的線上報價流程。從後台建立報價單開始，到生成專屬的公開連結發送給客戶，客戶檢視無誤後能直接在線上完成簽名，最後系統會自動產生 PDF 留存。此外，我也加入了 JSON 的匯出與匯入功能，方便進行資料的備份與快速搬移。 後台管理與核心功能展示進入管理員登入介面後（我預設了一個 demo 測試帳號，大家可以在測試網站中登入），系統的總覽頁面會清楚劃分出幾個核心區塊，方便業務與管理人員操作： 1. 客戶與產品服務建檔 客戶名單：可以事先新增、管理客戶的聯絡資訊，在建立報價單時就能直接透過下拉選單帶入，省去重複輸入的麻煩。 產品與服務：可以預先建立好公司的各項產品或服務模組，包含計價單位、單價等。 2. 報價單範本設定在撰寫報價單時，經常會用到重複的條款或項目。系統支援建立「範本」，你可以將常用的預設條款（例如：付款條件、智慧財產權歸屬、保固範圍等）或是專案明細存成範本，未來開立新報價單時只要一鍵套用即可，大幅提升效率。 3. 權限控管設計在系統設定部分，我特別區分了「管理員」與「業務」的權限。一般業務帳號可以建立報價單、管理客戶與產品，但無法進入核心的系統設定頁面，藉此確保資料與系統的安全性。 線上報價與電子簽署流程這是整套系統最核心的運作流程： 建立報價單：選定客戶、套用範本、確認服務項目與金額無誤後進行儲存。 發送公開連結：系統會產生一個專屬的「公開報價頁連結」。雖然正式環境應該直接串接 Email 系統寄出，但為了 Demo 方便，目前採用生成公開連結的方式，讓業務可以直接複製並發給客戶。 客戶線上檢視：客戶點擊連結後，會看到一個排版專業、乾淨的報價單頁面，包含雙方資訊、報價明細、條款與匯款帳號等。 電子簽署：若客戶確認無誤，可以在頁面底部直接進行簽名。系統支援三種簽名方式： 手寫簽名：直接在畫布上滑鼠/手指簽名。 輸入姓名：由系統生成標準字體。 上傳圖檔：適合習慣使用公司大小章圖檔的企業客戶。 生成並下載 PDF：送出簽署後，系統會自動跳轉並生成一份包含簽名的完整 PDF 報價單，雙方皆可下載留存。一旦完成簽署，該份報價單在後台就會被鎖定，無法再被修改或刪除，確保合約的有效性。若需修改，只能複製一份新的報價單重新跑流程。 系統上線的挑戰：Cloudflare PDF 匯出踩坑經驗在開發這個專案時，我遇到最大的困難其實是「上線（Deployment）」。 我在本地端（Localhost）測試時，所有功能包含 PDF 匯出都運作得非常順暢。但當我將系統部署到線上，並串接資料庫與 Cloudflare 時，卻發生了許多 Bug。 這主要是因為我使用了 Cloudflare 內建的 PDF function 來生成檔案。這類雲端服務的功能在本地環境和實際線上環境的運作邏輯有時會有落差，導致我花了不少時間在解決上線後才冒出來的錯誤。 如果你未來也打算開發類似的系統，特別是會用到 PDF 套版或是需要部署到線上環境的專案，請務必有心理準備：你需要具備一定的線上環境部署與除錯能力。 AI 自動化開發心得與 Debug 建議這是我花了兩三天時間，透過 Vibe Coding 密集開發出來的成果。我最大的心得是：遇到問題、處理問題的能力依然是核心。 就算有 AI 輔助，程式還是會報錯。當你在線上環境遇到問題時，我的 Debug 建議是： 在瀏覽器按下右鍵，選擇「檢查（Inspect）」。 切換到 Console（主控台） 標籤頁。 查看裡面出現的紅字錯誤訊息。 將這些錯誤訊息完整複製下來，丟給 AI，請它幫你分析這些問題出在哪裡，然後一步一步去修正。 無論你今天是部署在 Cloudflare、AWS 還是 GCP，每一個雲端環境都會有自己獨特的毛病與設定問題（例如我遇到的上線後 PDF 無法生成）。只有自己實際走過一次流程，下次才會知道坑在哪裡。 常見問答 (FAQ)Q1: 這套線上報價單系統適合哪些使用情境？很適合接案工作者、小型工作室、數位服務公司，或是本來就有大量客製化報價需求的團隊。尤其當你常常需要反覆製作報價單、傳送給客戶確認，再追蹤簽署狀態時，這類系統能明顯減少來回溝通與人工整理文件的時間。 Q2: 電子簽署完成後，為什麼報價單不能再直接修改？因為一旦完成簽署，這份文件就已經進入具有合意證明意義的狀態。如果簽完還能直接改內容，等於破壞文件的可信度。所以系統在簽署後會鎖定該筆報價單，若真的需要調整內容，正確做法是複製一份新的版本重新送出，這樣才能保留完整的歷程。 Q3: 為什麼系統要支援手寫、輸入姓名、上傳圖檔三種簽名方式？因為不同客戶的習慣差很多。有些人偏好直接手寫簽名，有些人只想快速輸入姓名，也有些企業客戶會習慣蓋公司章或使用既有簽名圖檔。把三種方式都提供出來，可以降低客戶完成簽署的門檻，也比較符合真實商務場景。 Q4: PDF 匯出在本地正常，但部署到 Cloudflare 後出問題，常見原因是什麼？最常見的問題不是程式本身完全不能跑，而是「本地環境和正式環境的執行條件不一樣」。像是 Cloudflare 的執行限制、函式支援差異、路由設定、資源存取方式，甚至字型與 PDF 生成流程都有可能不同。所以只要牽涉到 PDF、檔案處理、第三方服務或部署平台特殊功能，就一定要預留線上除錯時間。 Q5: 如果我也想做自己的報價單系統，最應該先做好哪幾件事？我會建議先把流程想清楚，而不是一開始就追求功能很多。至少先定義好「客戶資料」、「產品/服務項目」、「報價單範本」、「公開頁面」、「簽署完成後的鎖定規則」這幾個核心模組。只要主流程先跑通，後續再慢慢補上通知、權限細分、更多匯出格式或 CRM 整合，會比一開始就做很大更實際。 希望這次的專案分享對大家有幫助！如果你對於 AI 自動化開發、AI 應用，或是如何規劃這類系統的架構有興趣，都歡迎提出來一起討論！

前言：打造每日自動選股網站Hello，又見面啦！我是享哥。今天要跟大家分享的是我的自動選股網站專案——Daily Stock Picks。 最近發現只要是跟「錢」有關的內容，大家似乎都比較感興趣，所以我決定做一個選股網站來試試水溫。這個網站的核心概念非常明確：系統每天會定時去撈取 API 資料，並利用預設好的交易策略，自動篩選出符合條件的台股清單，方便投資人參考。 網站核心：三大選股策略這個網站主要包含了三種不同的選股策略，每天下午五點會自動執行篩選機制： 1. 均線多頭篩選出目前呈現多頭排列趨勢的股票。這可以幫助我們找到正處於上升趨勢、動能較強的投資標的。 2. 高殖利率針對喜歡穩定配息的投資者，這個策略會篩選出具有高殖利率的股票。從網站實際運作的畫面上可以看到，這個條件通常會命中滿多檔股票的。 3. 60 日突破這個策略會尋找近期突破 60 日新高的股票。不過，因為這個策略需要較長天期（60 日）的歷史交易資訊，如果資料庫還沒有累積足夠的歷史資料，畫面上可能暫時會沒有符合條件的標的呈現。 開發細節：API 串接與資料獲取在資料來源方面，我是使用公開的 臺灣證券交易所 OpenAPI 來獲取每日交易資訊。 如果要做到極度即時的交易訊號，通常需要串接銀行或券商的專屬 API；但因為我們目前的目標只是一個每日盤後更新的「公開資料選股清單」，所以每天去拉取一次盤後資料就已經非常夠用了。 不過，這裡也有一個實務上的限制：如果一次想抓太大量的歷史資料，API 端有機會直接擋下來。因此我實際上是用「分批排程」的方式，慢慢把歷史資料補齊，而不是一次把全部資料硬拉回來。這也代表像 60 日突破 這種仰賴長天期資料的策略，從系統剛上線到真正完整運作，中間本來就需要一些時間累積。 在資料累積方面，網站的設計分為兩個階段： 第一階段：剛上線時，會先抓取當天的最新交易資料。 第二階段：隨著時間推移，歷史資料會逐漸累積完成。當擁有超過 60 天的資料後，依賴歷史紀錄的策略（如 60 日突破）就能夠精準運作。 自動化關鍵：Cloudflare 每日定時排程這個網站最重要的技術亮點，在於使用了 Cloudflare 的排程設定。 我在 Cloudflare 中設定了一個 Cron Trigger 觸發活動。由於 Cloudflare 使用的是 UTC 時間，而我們需要配合台灣時間（UTC+8）每天下午五點來抓取盤後資料，所以在排程時間上，我設定為 0 11 * * 1-5（每天早上 11:00 UTC），這正好會對應到台灣時間的下午五點。透過這個自動化排程，系統就能每天準時幫我們更新最新的選股清單。 後台管理：手動觸發更新機制在開發或測試的過程中，常常會遇到一個痛點：我們不可能總是慢慢等每天下午五點的排程自動執行，才去確認程式有沒有寫錯。 為了增添系統彈性，我特地做了一個簡單的後台監看介面。在這裡，開發者只要輸入設定好的 ADMIN_TOKEN，就可以透過「手動抓取今日資料」的按鈕，隨時觸發撈取資料的動作。比起自己去打 API 更新資料，透過這個小工具能省下很多麻煩。 常見問答 (FAQ)Q1: 這個每日自動選股網站適合拿來做即時當沖或盤中交易嗎？比較不適合。這個專案的定位是「盤後更新的公開資料選股網站」，重點在於每天固定整理出一份可參考的候選清單，而不是提供秒級更新的交易訊號。如果你要做盤中策略、即時警示或自動下單，通常還是要串接更即時的券商或專業行情 API。 Q2: 為什麼網站要等累積超過 60 天資料後，60 日突破 策略才會比較準？因為這個策略本身就依賴至少 60 個交易日的歷史價格資料來判斷是否創高。如果資料庫才剛建立，歷史資料還不完整，就算程式邏輯正確，也可能因為樣本不足而抓不到符合條件的股票。再加上公開 API 大量抓取時可能會擋請求，所以我實際上是用分批排程慢慢回補歷史資料；也因此這類策略通常要讓系統先跑一段時間，效果才會穩定。 Q3: Cloudflare Cron 為什麼不是直接設定成台灣時間下午五點？因為 Cloudflare Cron Trigger 使用的是 UTC 時區，所以要自行換算成台灣時間（UTC+8）。文中設定的 0 11 * * 1-5，意思是每週一到週五的 UTC 11:00 執行，剛好對應台灣時間下午五點。這是很多人在做排程時最容易搞混的地方。 Q4: 如果我想測試資料更新流程，一定要等排程時間到了才知道有沒有成功嗎？不用，這也是後台手動觸發功能存在的原因。你可以在開發或除錯時，先透過後台輸入 ADMIN_TOKEN 手動執行一次更新，確認 API 串接、資料寫入與策略計算都正常，這樣就不用每天等到固定時間才能驗證。 Q5: 這份選股清單可以直接當成投資建議嗎？不建議直接照單全收。比較好的做法，是把它當成「初步篩選工具」，幫你先從大量股票中找出可能值得進一步研究的標的，後續還是要搭配基本面、產業趨勢、風險承受度與自己的交易策略一起判斷。系統可以幫你省時間，但不能取代投資決策本身。 結語：透過 Vibe Coding 實現創意這次的專案很高興也是透過 Vibe Coding 的方式獨立完成的。 每天實踐 Vibe Coding 其實都需要不斷去思考：到底有什麼樣的新題材、新應用是可以吸引大家目光的？如果你對 AI 自動化開發或是更多有趣的 AI 應用有任何新的想法，都非常歡迎隨時跟我討論與分享。希望今天這個「每日自動選股網站」的實戰經驗，能帶給大家一些不一樣的想法與靈感！

Hello 我是享哥！今天跟大家分享是我 Vibe Coding 的一個作品，會跟你講我的思路，跟我如何去做到這樣子一個作品。好，話不多說，我們開始吧！ 為什麼想打造這個接案網站？大家看到的這個畫面，是我 Vibe Coding 的一個網站，它是一個形象網站。為什麼會有這樣子的想法跟起源？最近在接案時，我發現這常常是接案遇到的痛點：不管跟業主怎麼溝通，他都不知道要給什麼資料。 所以，不如先做一個 Demo 給他看。他知道至少會有首頁、文章、產品、關於我們、常見問題，跟聯絡我們這些項目，他也就會知道要給我類似的相關問題跟內容。這就是開發這個網站的出發點。 Demo 網站展示 網站核心功能：滿足業主的基本需求產品型錄與聯絡表單對方希望有一個產品分類，最核心的功能會是產品這塊。你點進來，它可以去洽詢產品，比如說連到公司的聯絡表單，或是說直接聯絡他、打電話給他。這裡是他的產品型錄，這是最基本他可能會需要用到的一個功能。 文章與最新消息展示再來是文章這塊，比如說公司有很多最新消息，或是有一些內容希望用文章的方式來做呈現。這些我都會先做假資料，讓他大概能看到它實際的樣子。 內建 CMS 後台管理系統這些內容我們可以透過類似 WordPress 這種 CMS 的後台來做管理。我們也做了一個專屬的後台，也就是說如果增加了什麼內容（例如文章有什麼更新），它會同步在前台顯示，這是一個最大的優勢。當然，不論你要新增內容、產品文章，包括輪播圖或媒體要上架，這些東西都是可以輕鬆完成的。 實用亮點：一鍵切換產業主題模板第二個亮點就是我設計的主題模板。也就是說今天我接到了比較偏「工業設備」這塊的案子，我可以先套用該主題，它會先備份並套用起來。 這些全部都是假資料，當我重整一下，你看它就變成了「打造穩定智慧工廠的產線」。圖片都是先用網路上高品質的圖庫去做應用。主要是讓他看到 Demo 網站，讓他知道這些區塊應該要提供什麼樣的素材（比如說他需要給照片套進去，以及相關的資訊內容），大幅方便我們在接案的時候使用。 因應不同組織屬性的彈性調整當然有的時候除了產品型錄，我們要的可能是比較像「社團組織官網」這種類型。套完版之後，它的一些網址跟內容會比較不太一樣，所以需要重新重整。 像剛剛的「文章」就變成了「最新消息」，因為對社團來說，他們比較需要的是最新消息的發佈；社團沒有產品，所以該區塊可能就會變成「活動」，這部分可能要再微調修改一下。不過這主要是先給業主看一下，原來整個網站的概念會是什麼樣的呈現，後續大家可以再去做一些調整跟處理，這就是套版設計的魅力。 技術架構：AI Coding 與 Cloudflare 部署要完成這些功能，除了 AI 的 coding 以外，我們還需要進行部署。我是使用 Cloudflare 去做部署的，大家可以稍微再去查一下，包括它的 D1 資料庫，或是相關可以放產品、圖片等內容的儲存方案，它都可以做很好的支援。這是目前最流暢、最簡單的設計 vibe coding 做法。 以上跟大家分享我的 vibe coding 的作品！至於實際怎麼做，之後會再錄相關一系列的影片跟大家分享。 常見問答 (FAQ)Q1: 什麼是內建 CMS 的接案網站？內建 CMS 的接案網站，指的是前台網站與後台內容管理系統整合在同一個專案裡，業主可以自己新增文章、產品、圖片與首頁素材，不需要每次改內容都回頭找工程師處理。 Q2: 為什麼做接案提案時，先準備一個 Demo 網站很重要？因為很多業主其實不知道網站需要準備哪些資料，先做出可操作的 Demo，能讓對方快速理解首頁、產品、文章、聯絡表單與常見問題等區塊長什麼樣子，也比較容易收集正確素材。這篇提到的展示站也可以直接參考： Demo 網站展示 Q3: 這種 Vibe Coding 接案網站適合哪些產業使用？很適合需要品牌形象頁、產品型錄、最新消息或活動頁面的產業，例如工業設備、服務型公司、教育品牌、協會組織與中小企業官網，都可以用同一套架構再做細部調整。 Q4: Cloudflare 在這個 AI 接案網站架構中主要負責什麼？Cloudflare 主要負責網站部署與雲端基礎設施，像是 Pages、Workers、D1 資料庫與媒體儲存相關服務，能讓網站前台、後台與資料管理放在同一個生態系裡，部署流程也相對單純。 Q5: 用 AI 打造可切版的 CMS 網站，對接案流程有什麼幫助？最大的幫助是把提案、製作 Demo、內容上架與後續維護整合成更快的工作流。你可以先用 AI 快速完成初版，再依不同產業切換主題模板，讓業主更快看到成果，也更容易推進合作與簽約。 如果你想要了解更多 AI 自動化，或是 AI 相關應用的話，請訂閱我、關注我！

在 AI 時代，我們得到了一位強大的「超級員工」——AI。他可以幫你寫顧問報告、行銷企劃、甚至直接生成程式碼。但要真正用好 AI，並不是「一鍵成功」這麼簡單，而是一段需要學習與合作的旅程。 這篇文章將為初學者或剛接觸 Vibe Coding 的朋友，分享三個核心觀念： 如何與 AI 合作 為什麼在 Vibe Coding Basics 課程選擇 Cloudflare 部署 如何正確處理 API Key，避免爆帳單與安全問題 AI 是超級員工，但你得學會如何領導AI 很強大，但也有「幻覺」(Hallucination) 問題。這意味著你必須學會如何引導它： 提供清楚的 Context：你必須給它足夠的上下文，否則它可能會胡言亂語。 具備批判性思考：你要學會檢查 AI 的回答是否正確，並不斷反問自己：「這是真的嗎？我要怎麼驗證？我要怎麼追問？」 這是一種全新的學習能力。在 AI 時代，最重要的技能就是判斷與學習。AI 能生成顧問報告、行銷分析，但如果我們沒有批判性思考，它就只是一個「會說話的機器」。反過來，若能善用 AI，我們就能把學習速度提升 10 倍甚至 100 倍。 系統開發的殘酷現實：萬物皆有成本做任何服務，都繞不開一個現實：資訊系統都是要錢的。 部署到 GCP（Google Cloud）→ API 按量計價。 呼叫 Gemini API → 每次請求都會算錢。 不管是誰付錢，作為開發者或創業者，我們都必須學會看帳單、估算成本、計算損益。Google Cloud 的整合度很高，功能很強大，但對新手來說門檻也高： 功能太多：學習曲線陡峭。 收費項目太細：很容易在不經意間踩到收費的坑。 因此，在 Vibe Coding Basics 課程中，我不建議大家一開始就直接部署到 GCP，而是先走一條比較簡單、免費額度更多的路線：Cloudflare。 為何 Vibe Coding 課程選擇 Cloudflare？Cloudflare 提供了一組對新手非常友善的工具組合，非常適合快速驗證想法： Workers (運算環境) 無伺服器 (Serverless)，上傳程式碼就能運行。 適合做「API 代理」，幫前端轉發請求到 AI API，並將 API Key 安全地藏在後端。 R2 (物件儲存) 用來存放圖片、檔案等靜態資源。 類似 Google Cloud Storage 或 AWS S3，但提供了佛心的免費額度。 D1 (SQL 資料庫) 儲存文字資料，例如聊天紀錄、使用者筆記等。 與 Workers 原生整合，使用上極為方便。 為了讓大家更清楚 Cloudflare 的免費方案有多大方，這裡整理了核心服務的用量額度： 服務 (Service) 免費額度項目 (Free Tier Metric) 免費額度 (Free Limit) Cloudflare Workers 請求 (Requests) 每日 100,000 次 CPU 執行時間 (CPU Time) 每次請求 10 毫秒 Cloudflare R2 儲存空間 (Storage) 每月 10 GB A 類操作 (Writes, Lists) 每月 1,000,000 次 B 類操作 (Reads) 每月 10,000,000 次 Cloudflare D1 儲存空間 (Storage) 共 5 GB 讀取資料列 (Rows Read) 每日 5,000,000 列 寫入資料列 (Rows Written) 每日 100,000 列 從上表可以看到，對於初期的專案開發、學習和測試來說，這個額度綽綽有餘，幾乎不用擔心產生費用。 Cloudflare 的主要好處在於： 部署簡單：不需要學習複雜的 VM、IAM、VPC 設定。 免費起步 (Free Tier) ：新手練習時不用擔心燒錢。 快速驗證：非常適合打造 MVP (最小可行產品)。 範例流程：一個 AI 筆記小工具 使用者在前端介面輸入一段文字。 前端將請求發送到我們的 Cloudflare Worker (後端代理)。 Worker 在後端安全地帶上 API Key，呼叫 Google Gemini API。 Gemini API 回傳摘要結果給 Worker，Worker 再將結果回傳給前端顯示。 使用者的輸入與 AI 生成的結果可以存到 D1 資料庫，相關圖片則放到 R2。 👉 結果：一個功能完整的服務就跑起來了！你可以在免費額度內完整體驗，學到系統性思維，又不必擔心帳單爆炸。 API Key 的終極安全心法：絕不外洩許多新手會犯一個致命錯誤：直接把 API Key 寫死在前端程式碼中。 ⚠️ 錯誤示範： 123fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=AIzaxxxxx...", { // ...}) 這樣做，任何人只要打開瀏覽器的開發者工具，就能輕鬆複製你的 API Key，然後用你的額度去濫用，最終帳單還是算在你頭上。 正確做法：使用 Worker 作為後端代理 將金鑰儲存在 Cloudflare Secrets在你的專案目錄下執行指令，將金鑰存為環境變數。 1npx wrangler secret put GEMINI_API_KEY 在 Worker 程式碼中讀取金鑰Worker 可以從環境變數 env 中讀取你剛剛設定的金鑰，並在後端發起請求。 1234567891011121314151617181920212223242526272829export interface Env { GEMINI_API_KEY: string;}export default { async fetch(req: Request, env: Env): Promise<Response> { const body = await req.json<{ prompt: string }>(); const baseUrl = [ "https://generativelanguage.googleapis.com/v1beta/models/", "gemini-pro:generateContent?key=" ].join(""); const resp = await fetch( baseUrl + env.GEMINI_API_KEY, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contents: [{ parts: [{ text: body.prompt }] }], }), } ); return new Response(await resp.text(), { headers: { "Content-Type": "application/json" }, }); },}; 前端只呼叫自己的 Worker 端點前端現在不再需要知道 API Key，只需呼叫我們部署在 Cloudflare 上的 Worker 即可。 12345await fetch("/api/ai", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: userInput }),}); 👉 透過這種方式，API Key 從頭到尾都只存在於安全的後端環境，完全不會暴露在前端。 再進一步的安全守則 來源限制 (CORS) ：只允許你的網站網域呼叫 API，不要設定為 * (允許所有來源)。 短效 Token (JWT) ：對於需要登入的服務，由伺服器簽發有時效性的 Token，並由 Worker 進行驗證。 速率限制與配額：設定 API 呼叫頻率上限，避免服務被惡意請求刷爆。 觀測與告警：在雲端後台設定帳單警戒線，當金額超過時自動通知或停用服務。 金鑰輪替 (Rotation) ：定期更新 API 金鑰，且永遠不要將金鑰寫死在程式碼中。 永遠不要做的三件事： ❌ 把金鑰 commit 到 GitHub 或任何公開的程式碼倉庫。 ❌ 試圖把金鑰混淆或加密後放在前端（這沒有用）。 ❌ 在錯誤訊息中回傳任何與金鑰相關的資訊。 學習的本質：從踩坑到成長學習 AI 應用開發，就像帶領一位新進的超級員工：一開始難免會踩坑，可能會遇到 API key 洩漏、帳單超支、CORS 跨域問題等。但每踩一次坑，你就學會了一項關鍵技能，無論是成本控制、系統安全還是架構思維。 這也是為什麼在 Vibe Coding Basics 裡，會建議大家： 先用 Cloudflare：讓你專注於享受 AI 帶來的創造力，快速打造產品。 之後再進 GCP：在有了基礎後，再深入學習更完整的生產環境部署與成本管理。 常見問答 (FAQ)Q1: AI 回答的內容我可以直接相信並使用嗎？絕對不行。 請永遠將 AI 生成的內容視為「草稿」而非「最終答案」。你必須親自驗證其正確性，特別是對於事實、數據、程式碼或任何關鍵資訊。學會對 AI 的產出進行批判性思考與驗證，是比學會提問更重要的技能。 Q2: Cloudflare 的免費額度用完了會怎麼樣？會不會突然收到天價帳單？不會。 Cloudflare 的免費方案在用量達到上限時，服務可能會暫停運作或回傳錯誤，直到下一個計費週期開始，但不會自動升級並向你收費。你需要手動綁定付款資訊並升級到付費方案，用量超出免費額度的部分才會開始計費。因此，新手可以放心練習，不會有意外的帳單。 Q3: 我的專案很小，只有自己用，API Key 放前端應該沒關係吧？不行，這是最危險的壞習慣。 無論專案規模大小，都不能將 API Key 暴露在前端。網路上的惡意爬蟲會持續掃描 GitHub 等公開平台或網站原始碼，一旦金鑰洩漏，可能在幾分鐘內就被盜用並產生高額費用。請從一開始就養成透過後端代理來保護金鑰的正確觀念。 Q4: 我可以直接學 GCP/AWS 嗎？為什麼推薦先從 Cloudflare 開始？當然可以直接學習 GCP/AWS，它們是功能更強大的商業級平台。但它們的學習曲線也更陡峭，功能和計費方式非常複雜，新手很容易迷失方向或踩到費用陷阱。Cloudflare 提供了一個更簡潔、整合度高的「新手村」，讓你用最低的門檻和成本，快速體驗一個完整應用的開發與部署流程，先建立起核心概念與信心。 總結：你的 AI 開發第一步 AI 是強大的員工，但你需要學會如何領導與判斷。 Cloudflare 是新手的練功場：透過 Workers + R2 + D1 的組合，讓你用極低成本啟動你的服務。 API Key 必須藏在後端：這是絕對不能妥協的安全鐵則。 擁抱錯誤：學習的過程就是不斷踩坑、檢討、然後變得更強。 在 AI 時代，最重要的能力不是寫出多厲害的程式，而是快速學習、準確判斷、以及有效管理成本的能力。