AI 幫手寫程式新手教學：從零製作「實時巴士到站預報器」並免費放上網

你是否曾經想過自己寫一個實用的手機 App 或網頁工具，卻因為不懂寫程式沒有下文。現在有了 AI 的幫助，寫程式已經不再是遙不可及的夢想。

這篇教學會以最淺顯易懂的方式，帶領完全沒有程式基礎的你，利用目前最容易上手、升級付費版門檻低（Pro 版只需每月約 HK$38）的 Google Gemini，一步步寫出一個實用的「實時巴士到站預報」網頁程式。最後，我們還會教你如何免費將這個程式發布到網路上，讓你隨時隨地在手機上使用，甚至分享給親朋好友。

為什麼選擇 Google Gemini？

目前的 AI 工具百花齊放，但我們這次選擇 Google Gemini（特別是對於香港用戶），主要有以下幾個原因：

1. 容易上手：介面直觀，支援流暢的繁體中文溝通。
2. 升級門檻低：如果想體驗更強大的模型，升級 Gemini Advanced（Pro 模型）的費用相對親民。
3. 無障礙使用：香港用戶可以直接存取，無需複雜的網路設定。

這次，我們會將我們的要求，直接向 Google Gemini 親述，並要求它直接輸出「網頁程式」。這可說是目前最簡單直接，利用 AI 輔助寫程式，而又最快可獲得最終成果的方法。但現在只是一個「入門」，想要進一步活用資料庫、獲取更多互動介面，你就要由這裡起點，一路鑽研下去了。

我們的目標：專屬巴士到站預報器

這次我們要挑戰的目標是：寫一個網頁程式，一打開就能看到我們常搭的巴士路線，最近 3 班車什麼時候到站。

為了達成這個目標，我們會利用香港政府「資料一線通」（Data.gov.hk）提供的開放 API（應用程式介面）。簡單來說，就是讓我們的程式可以自動去政府的資料庫抓取最新的實時巴士資訊。這方面的知識大家都毋須特別學習，因為 Google Gemini 可為你完成。

▲我們的目標是寫一個這樣的網頁程式

要達到最終目標，我們需要分三個階段來進行：

階段一：尋找「巴士站 ID」

要查詢特定巴士站的到站時間，我們不能只給程式巴士站的名稱（例如「觀塘定富街」），程式需要一個專屬的「身份證號碼」，我們將叫它做 STOP ID。

所以，第一步，我們要請 Gemini 幫忙寫一個「找出巴士站 STOP ID」的小工具。

1. 向 Gemini 下達指令（Prompt）：打開 Google Gemini，輸入以下指令：

「請為我寫一個網頁程式，讓我可以找出一個巴士站的 STOP ID 」

▲打開 Google Gemini，並將指令（Prompt，或叫提示詞）直接輸入到指令欄位便可

▲具有程式編寫能力的 Google Gemini，能夠為你製作一個簡單的網頁程式

2. 獲取程式碼並執行：Gemini 會快速生成一段由 HTML、CSS 和 JavaScript 組成的程式碼。

1. • 在 Gemini 介面右上角點擊「下載程式碼」按鈕。
   • 你會將內容儲存為一個副檔名為 .html 的檔案（例如 find-stop-id.html）。
   • 在你的電腦上，直接雙擊這個檔案，它就會在瀏覽器（如 Chrome 或 Edge 或 Safari）中打開。

3. 尋找目標站點：在打開的網頁中，就是 Google Gemini 為你撰寫的網頁應用程式。在這裡輸入你常去的巴士站名稱（今次示範例子：觀塘定富街），點擊搜尋。你就會看到該站點的各個候車位置及其對應的 STOP ID 了。請把你想查詢的 STOP ID 記下來。

▲這個就是我們第一個「AI 幫手寫的程式」！但它的工作十分單純，只有一個輸入欄位，然後功能是幫你在香港政府提供的數據庫中，找出資料

階段二：找出該站的所有巴士路線

有了 STOP ID，我們接下來要確認這個站點到底有哪些巴士路線經過。

1. 向 Gemini 下達指令：再次回到 Gemini，輸入新的指令：

「幫我寫一個網頁程式，可以讓我輸入 STOP ID 之後，從政府的 API 中找出這個所有途經路線的實時到站時間。」

2. 獲取並執行程式：同樣地，下載或複製 Gemini 提供的程式碼，存成另一個 .html 檔案並在電腦上打開。

3. 測試查詢：在網頁的輸入框中填入剛剛記下的 STOP ID，點擊查詢。網頁就會列出經過該站的所有巴士路線以及目前的預計到達時間。這證明我們已經成功連上了政府的實時數據庫。

▲這是我們第二個靠 AI 幫手寫的程式，所有介面設計都有 Gemini 一手包辦。如果你想在設計上花點心思，就要在提示詞上加入你的要求

階段三：製作你的專屬預報面板

前面的步驟幫助我們了解了背後的運作原理。現在，我們要整合這些資訊，製作最終的專屬預報器。

1. 向 Gemini 下達最終指令：這是最關鍵的一步。請將你的需求具體地告訴 Gemini：

「寫一個網頁程式，讓我在設定頁面填上 STOP ID，然後讓我選擇想要的巴士路線。之後，從政府的 API 中找出我選擇的所有巴士路線的實時到站時間，然後在主頁面上，顯示出我選擇了的巴士路線，接下來 3 班將會到站的車在多少分鐘之後到站。」

2. 獲取並執行專屬程式：如同前兩次，獲取程式碼並儲存為 .html 檔案（建議命名為 index.html，這對後續發布很重要）。在電腦上打開它。

3. 設定你的專屬面板：

• 在網頁中進入「設定」頁面。
• 輸入你查詢到的 STOP ID（例如：7380707A36C032B9）。
• 選擇你感興趣的巴士路線（例如：16, 1A）。
• 儲存設定。

▲小編要求它有一個設定介面，就是希望它不要在主畫面中出現，獨立分割出來

4. 回到主頁面，你現在可以直接看到你選擇的巴士路線，接下來 3 班車還要多久才會到了。

將程式放上網：隨時隨地，手機也能看

現在我們有了一個完美的網頁程式，但它只存在你的電腦裡。如果想在手機上查看，或者分享給朋友，我們需要把它放上網。

我們會使用一個名為 Netlify (netlify.com) 的免費服務，它可讓用戶把自己的網頁放上網。它對新手極度友善，只需簡單的拖曳就能完成網站發布。

步驟 1：註冊 Netlify 帳戶

前往 netlify.com，點擊「Sign Up」註冊一個免費帳戶，之後進入「Dashboard」儀錶板。

步驟 2：新增專案 (Add new project)

登入 Netlify 後，你會看到儀表板。先點擊左方選單「Projects」（專案），再找到並點擊 「Add new project」 按鈕。

步驟 3：上傳你的 HTML 檔案

在接下來的頁面中，向下捲動找到 「Upload your project files」 區塊。

直接將你在「階段三」儲存的那個 .html 檔案（最好已命名為 index.html，如果不是，Netlify 會提示你改名，選擇「Rename and deploy」即可）拖曳到這個虛線框內。

▲上載時，頁面會查詢檔案是否要改名，這裡為了方便，請讓它為你改名，按「Rename and deploy」

步驟 4：獲取專屬網址並公開分享

稍等幾秒鐘，Netlify 就會處理完畢，並為你生成一個專屬的網址（例如：illustrious-boba-6ee172.netlify.app）。

此時，你的網站預設是私密的（Private）。要讓手機或其他設備可以使用，你需要：

1. 點擊 「Make public」 按鈕。
2. 在彈出的確認視窗中，再次點擊 「Make public」。

▲開放公眾後，你會獲得一個網址，網路上所有人都可經此網址來打開你的應用程式

大功告成！

現在，你可以把這個專屬網址複製到手機的瀏覽器中打開。你已經成功利用 AI 寫出了一個實用的網頁程式，並且成功將它發佈到網際網路上了。

你可以將這個網址加到手機主畫面，以後出門前點一下，就能輕鬆掌握巴士到站時間！

▲在 iPhone 上實際運作這個巴士到站預報器

▲你可以將頁面加到 iPhone 的主頁，以後一按便可開啟自己親手製作的到站時間表

最後，小編想介紹返，今次教學只是 AI 寫程式的一個起點，限制包括有只可使用 HTML 網頁撰寫程式，以及不能連接其他資料庫。目前市面有眾多 AI 程式編寫工具，當中較為推薦的是 ChatGPT 又或者 Claude。如果你想繼續在 AI 程式撰寫方面鑽研，除了可在 Google Gemini 上繼續發展，也可到以下這篇文章，繼續通過 Claude 官方提供的中文課程，免費學習 AI 編程。