AI 摘要
- Google Gemini 可協助新手製作實時巴士到站預報器。
- 程式使用香港政府開放 API 取得巴士到站資料。
- 完成的網頁可透過 Netlify 免費發布。
對沒有程式設計經驗的使用者而言，製作一個能夠實際運作的手機 App 或網頁工具，過去往往需要學習 HTML、CSS、JavaScript 及資料 API。這篇教學則以 Google Gemini 作為 AI 程式編寫助手，示範如何從零製作一個「實時巴士到站預報器」，並利用香港政府「資料一線通」（Data.gov.hk）的開放 API 取得巴士到站資料，最後透過 Netlify 免費發布到網路。
整個流程以網頁程式為主，使用者可先在電腦上生成及測試 HTML 檔案，再將完成的程式發布至網路，讓手機及其他裝置透過網址開啟。
為何選擇 Google Gemini 協助寫程式？
教學選用 Google Gemini，主要考慮到它的操作介面較容易上手，能以繁體中文溝通，香港用戶亦可直接存取。文章亦提到，如希望使用功能更強大的模型，可考慮升級 Gemini Advanced（Pro 模型），費用約為每月 HK$38。
不過，AI 生成程式碼並不代表使用者毋須理解程式運作方式。這次示範的重點是建立一個入門級網頁工具；若日後需要加入資料庫、更複雜的互動介面或更多功能，仍需進一步學習相關技術。
目標：顯示指定巴士路線的未來三班車
這個實時巴士到站預報器的目標，是在開啟網頁後顯示使用者預先選定的巴士路線，以及未來三班車的預計到站時間。
程式會使用香港政府「資料一線通」（Data.gov.hk）提供的開放 API，自動取得最新的巴士資料。由於 API 以巴士站的專屬識別碼作為查詢依據，整個製作流程會先找出 STOP ID，再取得該站的路線資料，最後整合成個人化的查詢面板。
階段一：找出巴士站 STOP ID
程式不能只根據「觀塘定富街」這類巴士站名稱查詢資料，必須使用每個巴士站所對應的專屬 STOP ID。因此，第一步是請 Google Gemini 生成一個搜尋巴士站識別碼的小工具。
向 Gemini 提出需求
開啟 Google Gemini，輸入以下提示：
「請為我寫一個網頁程式，讓我可以找出一個巴士站的 STOP ID。」
下載及執行程式
等待 Gemini 生成由 HTML、CSS 及 JavaScript 組成的網頁程式。
在 Gemini 介面右上角選擇「下載程式碼」。
將檔案儲存為副檔名為 .html 的檔案，例如 find-stop-id.html。
在電腦上雙擊檔案，使用 Chrome、Edge 或 Safari 等瀏覽器開啟。
搜尋巴士站
在生成的網頁輸入巴士站名稱，例如「觀塘定富街」，再按下搜尋。工具會列出相關候車位置及對應的 STOP ID。使用者應記下希望查詢的站點識別碼，供下一個階段使用。
階段二：查詢巴士路線及到站時間
取得 STOP ID 後，下一步是確認該站有哪些巴士路線經過，以及目前的預計到達時間。
向 Gemini 提出第二個需求
再次回到 Google Gemini，輸入以下提示：
「幫我寫一個網頁程式，可以讓我輸入 STOP ID 之後，從政府的 API 中找出這個所有途經路線的實時到站時間。」
Gemini 會按照要求生成另一個 HTML 網頁程式。使用者可將程式碼下載或複製，另存為 HTML 檔案，再於瀏覽器中開啟。
測試政府開放 API 查詢
在網頁輸入上一階段記下的 STOP ID，按下查詢後，頁面會列出經過該巴士站的路線及預計到達時間。這個步驟可用來確認程式能夠連接政府提供的即時資料來源。
階段三：製作個人化預報面板
完成站點及路線資料查詢後，便可要求 Gemini 將功能整合為一個較方便日常使用的面板。教學建議加入獨立設定頁面，避免 STOP ID 及路線選項直接佔用主頁面空間。
向 Gemini 提出整合需求
可輸入以下提示：
「寫一個網頁程式，讓我在設定頁面填上 STOP ID，然後讓我選擇想要的巴士路線。之後，從政府的 API 中找出我選擇的所有巴士路線的實時到站時間，然後在主頁面上，顯示出我選擇的巴士路線，接下來 3 班將會到站的車在多少分鐘之後到站。」
設定預報器
將生成的程式碼儲存為 HTML 檔案，並建議命名為 index.html，方便後續發布。
在瀏覽器開啟檔案，進入網頁的設定頁面。
輸入已取得的 STOP ID，例如 7380707A36C032B9。
選擇需要追蹤的巴士路線，例如 16 及 1A。
儲存設定並返回主頁面。
完成後，主頁面會顯示已選取的巴士路線，以及接下來三班車的預計到站時間。
使用 Netlify 免費發布網頁
如果 HTML 檔案只保存在電腦中，便只能在該部電腦上使用。教學使用 Netlify 將網站發布到網路，讓使用者可在手機或其他裝置開啟。Netlify 提供以拖曳檔案方式發布網頁的流程，適合沒有部署經驗的初學者。
註冊 Netlify 帳戶
前往 Netlify 網站，按下「Sign Up」註冊免費帳戶，登入後進入 Dashboard 儀錶板。
新增專案並上傳檔案
在 Netlify 儀錶板左方選單進入「Projects」。
按下「Add new project」。
向下捲動至「Upload your project files」區塊。
將階段三完成的 HTML 檔案拖曳至指定的虛線框中。
若檔案尚未命名為 index.html，Netlify 可能會提示重新命名，可選擇「Rename and deploy」。
取得網址並公開網站
上傳完成後，Netlify 會在數秒內建立網站，並產生一個專屬網址，例如 illustrious-boba-6ee172.netlify.app。
網站初始狀態為 Private。若要讓手機或其他使用者開啟，需按下「Make public」，再於確認視窗中再次按下「Make public」。完成後，任何取得該網址的人都可以開啟這個網頁應用程式。
使用方式及實際限制
發布後，使用者可以將專屬網址複製到手機瀏覽器中開啟，也可以按照手機作業系統提供的功能，將網頁加入主畫面，方便日後查閱巴士到站時間。
這個教學展示了 AI 如何協助沒有程式基礎的使用者快速建立簡單工具，但仍有幾項限制需要注意：
示範主要以 HTML 網頁程式為基礎，功能範圍較適合入門用途。
程式的資料來源依賴香港政府開放 API，實際資料內容及更新狀況取決於該 API。
教學沒有加入資料庫，因此不適合處理較複雜的資料儲存需求。
AI 生成的程式碼仍需測試及檢查，若要加入更複雜的功能或互動介面，使用者需要進一步學習程式設計。
文章最後指出，Google Gemini 只是 AI 輔助程式編寫的其中一個起點，ChatGPT 及 Claude 亦是市面上可考慮的工具。對希望繼續深入學習的人而言，應在實際使用 AI 生成程式碼的同時，逐步理解網頁結構、API 呼叫及資料處理等基本概念。
Reference Link : unwire.hk
