← 所有學員作品

新竹停車場即時空位查詢:不會寫程式,用 AI 一天做上線

新竹停車場空位即時查詢:串接新竹市政府開放資料,每 20 秒更新附近停車場剩幾位、推薦停哪裡、走過去幾分鐘。不用會寫程式,用 Claude Code 一天做到上線的經驗分享

  • 網站工具應用/APP
  • 資源整理
  • 開源專案
  • Vibe Coding
  • Claude Code

以視界學院新竹教室為圓心,即時顯示附近停車場還剩幾個位子、建議停哪裡、走過來要幾分鐘。學員出發前打開看一眼,到了直接停。

9 月 19 號早上開始做,當天晚上就改到第 6 版,上線、綁好自己的網域、開源到 GitHub。

Before:找車位找了半小時

有一次我趕時間,在教室附近找車位找了半小時。

越急越想快,就在幾個停車場之間來回跑。這家滿了換下一家,下一家也滿了再繞回來。跑了一圈又一圈,沒有比較快。

學員也一樣。來上課常聽到的抱怨之一,就是停車不方便。

我們能做的,就是在報名信裡貼三個停車場地址。學員自己開 Google 地圖查、自己猜哪一個還有位子,猜錯就再繞一圈。

After:一個網址丟進群組就好

  • 頁面每 20 秒更新一次,資料直接來自新竹市政府的即時停車開放資料
  • 附近停車場依「有位優先、距離最近」排好,每張卡片寫走路幾分鐘
  • 最上面一張推薦卡直接告訴你停哪;位子太少會提醒可能要排隊,全滿就一鍵擴大範圍
  • 累積兩週的歷史資料後,卡片還會寫「平日這個時段通常剩約 N 位」,連幾點出門比較好停都知道
  • 手機可以加到主畫面,用起來像一個 App

成本是一台每月 6 美元的小主機,而且那台主機本來就在跑別的東西。

上線後,學員的反應是「超棒的」。

還有人直接問我:「可以付你錢,幫我做一個我店附近的嗎?」

我說不用,我要開源,你自己也做得出來。

我怎麼跟 AI 分工

我不是工程師。這個系統我一行程式都沒寫,我做的是三件事:

  1. 定需求:圓心在哪、範圍多大、要推薦還是只列清單,這些都是我決定的
  2. 當第一個使用者:每一版做完,我拿手機實際打開看,覺得哪裡怪就直接講
  3. 拍板:AI 會給我好幾個做法,我選一個,其他的丟掉

Claude Code 負責剩下的全部:找政府開放資料、寫頁面、在主機上設定排程抓資料、申請 HTTPS 憑證、寫部署腳本、上線後跑健檢。

它還會自己踩坑再自己修,而且每個坑都會寫回部署腳本,下次重跑就不會再踩。

流程圖載入中…

我寫的程式碼是零,但這一天我做的決定,比寫一個禮拜的企劃還多。

印象最深的四個轉折

轉折一:「頁面數字都不動,是不是壞了?」

上線當天下午,我看數字一直沒動,第一個反應是「系統壞了」。

AI 沒有急著改程式,它先查了三件事:主機的資料一秒前才抓過;再直接去問市政府的資料,發現市府那邊 55 個停車場整批停止更新了 43 分鐘;再看過去一小時,大部分停車場數字其實有在變,不動的那幾個是真的滿了。

結論:我們的系統沒壞,是上游卡住,加上真的沒位子。

我從這件事學到:「看起來壞了」跟「真的壞了」中間,差的是證據。

轉折二:我把 AI 做的警告框打回去

為了讓大家知道資料可能過時,AI 在整個頁面上方加了一個大大的警告框。

我看了覺得不對。一跳出來,學員會以為整個服務都壞了。我跟它說:「能不能只在有問題的那個停車場上標註就好?」

改完之後,資料正常時畫面完全乾淨,只有真的過時的那一張卡片,會出現一行灰色小字「這個數字是 N 分鐘前的」。

異常資訊要標在出問題的那個項目上,不要讓整個畫面替它背鍋。

轉折三:免費額度差點兩天就爆

我想加 YouBike 圖層,要用交通部的 TDX 資料。AI 一開始的做法是每分鐘去抓一次。

後來它去查了官方收費頁,才發現免費會員一個月只有 3 點。照原本的做法,一個月要吃掉 69 點,兩天就會被停權。

最後改成「有人打開 YouBike 圖層才去抓,5 分鐘沒人看就一次都不叫」,再加一個每月 4,000 次的保險絲,超過就自動停。

轉折四:外地學員的一句話,長出天氣功能

有些從外地來上課的學員,會順口問我新竹的天氣。

一句很小的問題,但我聽進去了:他們不只不知道停哪,也不知道要不要帶傘、帶外套。

我把這個觀察丟給 Claude Code,不到半天,頁面上方就多了一條天氣列:目的地現在幾度、3 小時內會不會下雨、紫外線強不強,最後給一句白話建議。

AI 做得很快,但「要做什麼」是從學員身上看出來的。

工具誰都能用,決定做什麼的,是對人的觀察。

成果與應用情境

  • 學院自己用:課前把連結丟到群組,學員出門前看一眼
  • 開源給所有實體店家:有人想付錢請我做,我選擇直接開源。程式碼放在 GitHub(CasperHsu/vision-parking,MIT 授權)。同在新竹市的店家,改一組座標就是自己的停車頁,可以放進官網、LINE、Google 商家檔案
  • 分享會素材:我把整個開發過程做成一場分享會簡報,講的就是「一個不會寫程式的人,一天做出一個真的有人在用的系統」

別人的資料會斷,但我自己累積的資料不會。

課程學習心得與評價

我覺得這是目前市面上最划算的一堂課。

很多我自己摸索時卡住的問題,在課裡都找到了答案。

謝謝雷蒙推出這堂課。

留言與交流

使用 GitHub 帳號回覆作者,分享你的想法。