Vibe Coding 初體驗：AI 協作打造公廁尋找器

一直以來，我都只把 Python 這門程式語言用在一些「幕後作業」，例如做數據分析、統計運算，或是開發個人用的小工具。這些成果雖然帶來成就感，卻往往只呈現在指令列或圖表中，讓朋友看了也不知道該怎麼操作。

我曾試著使用 Flask 架設網站，但因為缺乏設計美感，總覺得畫面不好看，最後也只做好後端就放棄。

靈感來源：公開資料與實際需求

今天下午，我在瀏覽政府的開放資料時，發現了一份「全國公廁建檔」的清單，裡頭詳細列出了全台灣各地的公廁資訊。對於平常待在金門的我來說，在台北要找廁所並不是那麼方便（畢竟在金門到處都是熟人、店家），於是腦中閃過一個念頭：「如果能一鍵帶我去廁所，應該很實用吧 xD？」

正好最近很紅各種 Vibe Coding 於是我決定和「GPT 好夥伴」一起來場小實驗。經過幾回合的切磋，很快就製作出了一個「附近公廁尋找器」的網站雛形。

從想法到成品：讓網站「看得見、用得上」

這次的開發過程中，AI 的協助讓我能更有效率地把「程式邏輯」和「網站介面」串接起來。簡單來說：

• 後端（Python / Flask）：就像「調酒中的自己」，負責做出實際功能，拿到公廁清單、執行查詢和計算等功能。
• 前端（網頁介面）：就像「酒館的外場」，面對使用者，提供點擊或輸入的位置選擇，並且把結果在網頁上顯示出來。

為了讓網頁美觀且容易操作，我嘗試了兩個幫忙設計網站外觀的工具，雖然目前的效果用一般 CSS 就可以了，但算是第一次嘗試用 CSS 框架，未來有更大的專案就能知道要怎麼應用：

• Tailwind CSS：可以快速調整版面、字體、色塊等，不需要從零開始去寫所有的網頁格式。
• DaisyUI：在 Tailwind 的基礎上，再提供現成的按鈕、表單樣式等設計元素，更快速打造出好看的網站介面。

目前這個「附近公廁尋找器」功能並不複雜，主要是透過手機定位，找到最近的公廁位置，接著用開啟手機預設的地圖導航過去。然而，對我來說，能讓後端與前端真正結合，並架設到伺服器上給朋友們使用，已經算是一大突破—代表我已經開始有能力可以把腦中想法變成「看得到、用得上」的作品了。

下一步：夢酒館網站與更完整的網頁開發

這次的成功小嘗試，讓我重新燃起替「夢酒館」打造專屬網站的熱情。對於夢酒館，一直覺得他不只是個酒吧，長期以來一直想要嘗試各種數位工具，要有自己的線上平台，能發布活動訊息、管理訂位，發佈任務等等。過去因為不熟悉網頁技術而擱置的計畫，現在看起來似乎沒那麼遙遠了。

接下來，我打算使用 Nuxt.js（一種能輕鬆打造前後端整合網站的 Vue.js 擴充框架），把夢酒館的網站系統完善下來。除了更新各種活動資訊、串接訂位功能，也會考慮搜尋引擎優化（SEO），還有訓練屬於自己的檢索增強式生成大型語言模型 （RAG LLM），可以理解成有夢酒館資料庫的 ChatGPT，希望可以複製一個夢酒館店員出來 )，讓更多人能在線上就感受到第一線的夢酒館互動。

感想：AI Vibe Coding 大大縮短「想法」和「執行」的距離

過去，我對「做出一個好看又好用的網站」，雖然理論上知道該怎麼做，卻總是缺乏時間好好靜下心來，把不同框架的文件徹底研究一遍。然而，這次的「公廁尋找器」專案，因為有了 AI 協助，我只要先明確定義想解決的需求，再透過 AI 指令逐步拆解看似複雜的技術，也因此省去了許多翻閱文件的時間。在實踐中持續學習與成長，讓技術真正落地，為日常生活帶來更多新點子。當程式不再只是電腦螢幕上的指令，而能真正回應需求時，一切努力就更顯得有價值，對於未來的想像也越來越清晰。