每日出門前，你可能都要打開巴士或港鐵 App，重新搜尋路線、車站及方向。假如常用路線可以直接顯示在 iPhone 主畫面，不用每次重新搜尋，查看到站時間就會方便得多。

今次 DotAI Spot 教學會由這個真實生活需要出發，示範如何使用 Codex＋Scriptable，製作一個香港交通到站時間 Widget。

小組件可以顯示已收藏的路線、上車站、目的地、最近幾班車的預計到站時間，以及資料更新時間。

重點不是教你一開始就開發完整 App，而是透過一個實際小工具，學識如何將想法變成清楚需求，再讓 AI 協助拆規格、寫程式及測試。

TL;DR｜這次會完成甚麼？

完整教學會帶你由零完成以下流

程：

• 向 Codex 清楚描述交通 Widget 的用途

• 將大概念拆成第一版必做功能

• 建立一個固定路線的最小可行版本

• 將 JavaScript 程式碼放入 Scriptable 運行

• 把 Scriptable Widget 加到 iPhone 主畫面

• 加入路線、車站及不同交通工具的收藏

• 用 Widget Parameter 顯示不同收藏

• 測試無班次、網絡失敗及資料格式異常等情況

第一版計劃支援九巴、龍運、新大嶼山巴士、綠色小巴、港鐵及輕鐵。紅色小巴則暫時不加入，因為公開資料未必足夠穩定，不適合作為新手教學的第一個版本。

1、降低開發門檻｜不用由 Xcode 和 Swift 開始

不少人一想到「製作 iPhone 工具」，就以為一定要先學 Swift、安裝 Xcode，再處理 Apple Developer 帳戶、程式簽署及 App 上架。

對第一次接觸開發的新手來說，這條路線很容易令注意力由「解決問題」變成「處理技術設定」。

所以今次會使用一個較直接的組合：

• Codex：協助拆解需求、生成程式碼及設計測試

• Scriptable：在 iPhone 上執行 JavaScript

• iPhone Widget：將結果直接放到主畫面顯示

簡單來說，Codex 就像一位協助你寫程式的技術拍檔；Scriptable 則負責在手機執行程式及顯示 Widget。

你不需要一開始理解每一行程式碼，但需要知道自己想解決甚麼問題，以及每一步要驗證甚麼。

2、拆清楚需求｜不要只叫 AI「幫我整 App」

很多 Vibe Coding 新手第一句會輸入：

幫我整一個交通 App。

幫我整一個交通 App。

幫我整一個交通 App。

問題是，AI 不知道你想做原生 App、網頁、桌面工具，還是 iPhone Widget，也不知道第一版需要做到甚麼程度。

比較清楚的要求，應該包括：

• 使用場景是 iPhone 主畫面

• 不使用 Xcode

• 希望以免費工具完成

• 顯示收藏路線及最近三班車

• 使用者沒有程式開發經驗

• 第一版先追求可以正常運行

講清楚背景後，再請 Codex 先整理「第一版必做功能」、「暫時不做的功能」、「操作流程」及「需要測試的情況」。

這一步看似未開始寫程式，其實是整個項目最重要的部分。規格愈清楚，之後生成的程式碼就愈不容易偏離方向。

3、先跑通流程｜由固定路線開始測試

完整版本可以加入多種交通工具及收藏功能，但第一步不需要一次做完。

教學會先用一條固定路線建立最小版本，例如顯示：

• 路線號碼

• 上車站

• 目的地

• 最近三班到站時間

• 最後更新時間

第一階段只需要確認三件事：

1. 交通到站資料能否正常讀取

2. 程式碼能否在 Scriptable 執行

3. Widget 畫面能否正常顯示

只要這三部分成功，之後才逐步加入收藏、刪除、改名及多 Widget 顯示功能。

這種做法可以避免一次加入太多功能。即使程式出錯，亦較容易知道問題來自資料讀取、程式邏輯，還是 Widget 顯示。

4、加入收藏功能｜一個 Widget 顯示一組常用路線

固定路線版本成功後，下一步就是加入「我的交通收藏」。

使用者可以新增常搭的巴士路線、上車站、港鐵方向或輕鐵車站，之後再將不同收藏分配到不同 Widget。

這裡會用到 Widget Parameter。

要留意，Widget Parameter 並不是路線號碼，而是 Widget 的編號。例如：

• Parameter 1 顯示第一組收藏

• Parameter 2 顯示第二組收藏

• Parameter 3 顯示第三組收藏

換句話說，你可以在主畫面放多個 Scriptable Widget，每一個顯示不同的常用路線。之後想更換收藏，也不需要重新複製程式碼，只需要在 Scriptable 裡重新選擇即可。

5、統一交通資料｜不同格式變成同一個畫面

九巴、港鐵、綠色小巴及輕鐵的資料格式未必相同。

你可以將它們想像成幾份欄位完全不同的 Excel 表格。程式需要先將各種資料整理成一致格式，例如：

交通工具
路線或路線名稱
上車站
目的地或方向
預計到達時間
更新時間

交通工具
路線或路線名稱
上車站
目的地或方向
預計到達時間
更新時間

交通工具
路線或路線名稱
上車站
目的地或方向
預計到達時間
更新時間

整理後，Widget 才可以使用同一套畫面顯示不同交通工具。

這亦是教學其中一個重要概念：真正實用的程式，不只是成功取得資料，而是要將不同來源整理成使用者看得明的結果。

5、主動測試錯誤｜AI 寫完程式不代表完成

Vibe Coding 並不是 Codex 寫完程式碼，看到畫面出現就算完成。

完整教學亦會示範如何請 Codex 設計測試，包括：

• 第一次使用時沒有收藏

• 查詢時沒有即將到達的班次

• 手機暫時沒有網絡

• 官方資料格式出現異常

• 不同車站使用相同名稱

• 多個 Widget 使用不同收藏

• 港鐵、輕鐵及小巴採用不同資料格式

目標不是保證程式永遠不會出錯，而是當問題發生時，畫面不會直接顯示一大段普通使用者看不明的錯誤訊息。

6、認識系統限制｜Widget 未必每分鐘刷新

iPhone 主畫面 Widget 的刷新時間由 iOS 系統管理。

程式可以要求系統稍後更新，但不能保證每分鐘準時刷新。因此，即使交通資料來源已經更新，主畫面顯示的時間亦可能有少量延遲。

需要立即查看最新資料時，可以點擊 Widget，進入 Scriptable 查看即時預覽。

這是 iOS Widget 的系統限制，並不代表程式失效。實際使用交通服務時，仍應以交通營辦商的官方資料及現場情況為準。

DotAI 編輯觀察｜真正要學的是解題方法

這個項目最值得新手學習的，不只是如何複製一段 JavaScript。

完整流程其實是：

發現生活問題
→ 寫清楚需求
→ 讓 Codex 拆解規格
→ 製作最小版本
→ 放到手機驗證
→ 逐步加入收藏功能
→ 處理錯誤及系統限制

發現生活問題
→ 寫清楚需求
→ 讓 Codex 拆解規格
→ 製作最小版本
→ 放到手機驗證
→ 逐步加入收藏功能
→ 處理錯誤及系統限制

發現生活問題
→ 寫清楚需求
→ 讓 Codex 拆解規格
→ 製作最小版本
→ 放到手機驗證
→ 逐步加入收藏功能
→ 處理錯誤及系統限制

當你掌握這套方法，之後亦可以製作天氣提醒、工作日程、資料摘要、個人待辦事項，甚至其他適合自己日常生活的小工具。

想查看完整 Prompt、Scriptable 安裝步驟、Widget Parameter 設定、多交通工具收藏方式及測試流程，可前往 DotAI Spot 閱讀完整 Step by Step 教學。