行銷人的救星：Vibe Coding 自製專屬短網址生成器

感謝 Claude + MongoDB + Zeabur 讓我從科技麻瓜身份畢業了！

2025 年 3 月 21 日，我正式擺脫「科技麻瓜」身份，踏入 Vibe Coding 學院大門、成為 AI Coding 見習生！

事情的起因是這樣的——當我在整理公司不同行銷渠道的外連連結時，發現市面上沒有一個工具可以同時做到 「完全客製化品牌網址」 和 「簡化追蹤流程」。其實，這個痛點我在第一份 B2B 行銷工作時就遇過，許多數位行銷人員也經常面臨類似問題。

以往，由於不熟悉轉址 DNS 等技術細節，再加上沒有合適的 MarTech（行銷科技）工具 來降低自主開發門檻，這類問題通常需要技術團隊介入。對於沒有程式背景的人來說，開發一款符合需求的「專屬工具」幾乎是天方夜譚，只能委屈求全，使用現有解決方案。

然而，透過 Cursor 及 Claude 等 AI 協作與低程式門檻的 PaaS（Platform as a Service）部署服務如 Zeabur，即使沒有程式背景的人也能在短時間內完成開發部署並應用。

這次，我嘗試透過 Zeabur 的 Template 模板開發一款完全客製化的短網址生成器，過程中我使用 Claude AI 生成程式碼、MongoDB 儲存短網址資料，並一鍵部署到 Zeabur。短短 2-3 小時，我就開發出了一個運行中的小工具，並成功解決了原先的痛點。

進入實作正題前，先聊聊市面上既有短網址服務的兩大限制：

大多數短網址服務仍帶有平台品牌，例如最知名的 Bitly，對於品牌行銷（或是有強迫症的我）來說，這樣的網址不夠純粹。

我希望能夠使用 https://deploy.zeabur.app/buildtemplate 這樣的 完全客製化網域。

雖然這些服務提供基本的分析介面，但通常需要額外使用 Google Sheet 管理 UTM 參數，並且還要再透過 Campaign Builder 來建立追蹤連結。
長期下來，不但流程繁瑣，還可能因人為錯誤影響數據準確性。

為了整合連結的「生成」、「管理」以及「追蹤」三大功能，同時解決客製化短網址的需求，我花了 3 個小時跟 Claude 聊天，開發了一款可以自訂網域的短網址生成器，並且內建陽春的點擊數據追蹤機制，讓使用者可以透過 MongoDB 儲存轉址數據，並在後台觀看短網址的成效。

這次開發短網址生成器的過程，我完全沒有手寫程式碼，而是透過 Claude AI 對話逐步生成所需的程式邏輯，我完全沒有過 Node.js 開發的經驗，更不用說串接資料庫。

接著，我把程式碼丟回 GPT 嘗試理解 Claude 程式碼背後的邏輯：

短網址生成邏輯：Claude 生成了一個 crypto.randomBytes(3).toString('hex') 的方法，讓短網址擁有 6 位數的隨機 ID，確保不易衝突。
MongoDB 模型設計：透過 mongoose 設定 shortUrl 與 originalUrl 的 Schema，使應用能夠儲存與查詢網址資訊。
轉址處理與計數更新：建立了一個 API，在每次短網址被訪問時，自動查找 MongoDB 中的紀錄並重導向，同時更新點擊數據。
Express 路由設計：透過 app.post("/shorten") 讓用戶提交網址，app.get("/:shortId") 來處理轉址請求，形成完整的 API 結構。
錯誤處理與安全性：AI 也幫助我補充了錯誤處理邏輯，例如 URL 格式檢查、找不到短網址時的回應等，確保系統的穩定性。