- 專案背景：利用政府開放資料，用 AI 協作快速打造公廁尋找器
- 技術實作：Flask 後端處理查詢，Tailwind CSS 快速打造美觀前端
- Vibe Coding 核心：AI 協助拆解技術，省去翻閱文件的時間
- 關鍵突破：首次成功讓後端與前端結合，架設可用網站
- 核心洞見：AI 縮短想法到執行的距離，讓技術真正落地
一直以來，我都只把 Python 用在一些「幕後作業」，例如做數據分析、統計運算，或是開發個人用的小工具。這些成果雖然帶來方便和成就感，卻往往只呈現在指令列或圖表中，沒辦法分享給朋友。
我曾試著使用 Flask 架設網站，但因為缺乏設計美感，總覺得畫面不好看，最後也只做好後端就放棄。
靈感來源：公開資料與實際需求
某天下午，我在瀏覽政府的開放資料時，發現了一份「全國公廁建檔」的清單，裡頭詳細列出了全台灣各地的公廁資訊。對於平常待在金門的我來說，在台北要找廁所並不是那麼方便（畢竟在金門到處都是熟人、店家），於是腦中閃過一個念頭：「如果能一鍵帶我去廁所，應該很實用吧 xD？」
正好最近很紅各種 Vibe Coding 於是我決定和「GPT 好夥伴」一起來場小實驗。經過幾回合的切磋，很快就製作出了一個「附近公廁尋找器」的網站雛形。
從想法到成品：讓網站「看得見、用得上」
這次的開發過程中，AI 的協助讓我能更有效率地把「程式邏輯」和「網站介面」串接起來。簡單來說：
- 後端（Python / Flask）：就像「調酒中的自己」，負責做出實際功能，拿到公廁清單、執行查詢和計算等功能。
- 前端（網頁介面）：就像「酒館的外場」，面對使用者，提供點擊或輸入的位置選擇，並且把結果在網頁上顯示出來。
為了讓網頁美觀且容易操作，我嘗試了兩個幫忙設計網站外觀的工具，雖然目前的效果用一般 CSS 就可以了，但算是第一次嘗試用框架，未來有更大的專案就能知道要怎麼應用：
- Tailwind CSS：可以快速調整版面、字體、色塊等，不需要從零開始去寫所有的網頁格式。
- DaisyUI：在 Tailwind 的基礎上，再提供現成的按鈕、表單樣式等設計元素，更快速打造出好看的網站介面。
目前這個「附近公廁尋找器」功能並不複雜，主要是透過手機定位，找到最近的公廁位置，接著用開啟手機預設的地圖導航過去。然而，對我來說，能讓後端與前端真正結合，並架設到伺服器上給朋友們使用，已經算是一大突破—代表我已經開始有能力可以把腦中想法變成「看得到、用得上」的作品了。
AI Vibe Coding 大大縮短「想法」和「執行」的距離
過去，我對「做出一個好看又好用的網站」，雖然理論上知道該怎麼做，卻總是缺乏時間好好靜下心來，把不同框架的文件徹底研究一遍。然而，這次的「公廁尋找器」專案，因為有了 AI 協助，我只要先明確定義想解決的需求，再透過 AI 指令逐步拆解看似複雜的技術，也因此省去了許多翻閱文件的時間。在實踐中持續學習與成長，讓技術真正落地，為日常生活帶來更多新點子。當程式不再只是電腦螢幕上的指令，而能真正回應需求時，一切努力就更顯得有價值，對於未來的想像也越來越清晰。
常見問題
Vibe Coding 是什麼？
這個專案使用了哪些技術？
Python Flask 處理公廁資料查詢與計算，前端使用 Tailwind CSS 和 DaisyUI 快速打造美觀介面。資料來源是政府的全國公廁建檔開放資料。 需要什麼程式基礎才能嘗試 Vibe Coding？
AI 協作開發的優勢是什麼？
這個公廁尋找器可以試用嗎？
