Vibe Coding 實戰：打造專屬線上報價單系統與電子簽署功能

Описание: 相關提示詞請參考部落格文章內容
https://blog.es2idea.com/posts/vibe-c...

---

【 AI 寫碼的真實挑戰：從零打造報價單系統的踩坑實錄 】

一直以來，我都非常想做一套專屬的報價單系統。
很多人以為，用 AI 寫程式最難的是把功能做出來。
其實不是，真正的魔王關卡，在於將本地端完美運行的專案推上雲端。

這幾天，我終於實作了 VibeCoding 報價單系統。
它涵蓋了後台報價編輯、公開報價頁，到商務型電子簽署。
甚至整合了 JSON 與 PDF 的匯出與匯入功能。

這不是單純的報表工具。
而是一個完整的 Quote-to-Close 流程體驗。
目標是讓大家在沒有外部雲端資源的情況下，也能跑完業務流程。

▋ 系統核心模組解析

首先是登入與總覽介面。
你可以管理報價單、客戶名單、產品與服務，並建立常用範本。
至於系統設定，則嚴格限制僅限管理員權限進入。

接著是建立報價單的流程。
直接套用預設範本，帶入預設條款、專案明細與客戶資訊。
從付款條件到智慧財產權歸屬，都能一鍵載入。

最後是發送與公開連結。
系統會模擬寄發電子郵件，並產生專屬公開網址。
客戶點開即可檢視所有報價細節與匯款資訊。

▋ 客戶端的無縫簽署體驗

公開報價頁不只用來展示，更是用來成交的。
客戶確認無誤後，可以直接在線上進行電子簽署。
支援手寫簽名、輸入姓名，甚至上傳印章圖檔。

簽署送出後，系統會自動跳轉生成 PDF 檔。
這份文件會將客戶的簽名直接壓印在報價單上。
一旦完成簽署，報價單就會永久鎖定，無法再被修改或刪除。

若需要微調，只能複製一份全新的報價單重新提交。
同時，這套系統也支援匯出 JSON 檔。
未來需要大量建立或修改時，直接匯入檔案就能快速還原設定。

▋ AI 開發的最痛領悟

這套系統花了我兩三天的時間密集實作。
開發過程中最痛苦的，絕對是上線部署。
在本地端測試一切完美，一上線卻出現各種預料之外的報錯。

從資料庫連線到 Cloudflare 專屬的 PDF 產出功能。
環境的切換，往往是 AI 自動化寫碼最容易翻車的盲區。
AWS、GCP 或是 Cloudflare，每一個部署環境都有自己的脾氣。

要解決這個問題，你必須具備基礎的除錯（Debug）思維。
遇到畫面卡住，直接點開網頁的 Console 面板。
把紅色的錯誤訊息全部複製下來，精準丟給 AI 去排查問題根源。

這套報價系統已經正式放上線。
我開了一個 Demo 測試帳號，歡迎大家登入實際操作看看。
如果你對 AI 開發、自動化或是系統建置有想法，隨時來找我討論。

#VibeCoding #AI寫程式 #報價單系統 #自動化工作流 #系統部署 #Debug技巧 #電子簽署 #雲端開發 #SaaS開發

---

📍 影片時間軸
00:00 介紹 VibeCoding 報價單系統 (MVP) 專案與其核心功能。
00:40 分享開發過程中遇到的挑戰，特別是從本地端部署到雲端 (Cloudflare) 時，生成 PDF 遇到的 Bug。
01:18 實際展示登入報價單管理後台，介紹總覽、客戶、產品與範本等功能區塊。
02:11 示範如何建立新報價單，利用預設範本快速帶入報價內容與條款。
03:04 說明並展示如何產生公開的報價單連結（使用測試模式避免實際寄信）。
03:36 預覽客戶端看到的公開報價單頁面。
03:55 示範電子簽署功能，說明簽名的三種方式並實際操作手寫簽名流程。
04:30 送出簽名後，展示系統自動生成的 PDF 報價單（包含簽名圖檔），並提供下載。
05:22 說明報價單一旦完成簽署後，即無法再進行修改與刪除。
05:52 展示如何透過匯入 JSON 檔快速建立或修改報價單。
06:19 分享使用 AI 寫程式工具的心得，強調 Debug 能力在此類開發模式中的重要性。
06:30 提供 Debug 實用技巧：開啟瀏覽器開發者工具 (Console) 複製錯誤訊息，並交由 AI 協助排錯。
06:45 提醒開發者，在本地端測試正常的功能，部署到不同的雲端環境可能會遇到不一樣的問題。

---
【 數位轉型，邀你同行 】
如需企業數位轉型輔導、內訓課程或主題演講邀約。
請來信說明貴單位背景、需求目標與可聯絡時段，將儘速回覆安排。
部落格文章：https://blog.es2idea.com/
Email：[email protected]