YouTube 影片筆記

三分鐘把教學文章變成可重複使用的AI技能生成巴士App

YTGet 編輯室夏sir網上教室觀看 8,579 觀看原片

原片標題：用 Gemini Spark 及 Skill 網頁變巴士時間 APP 話咁易

原片說明

【用 Gemini Spark 及 Skill｜網頁變巴士時間 APP 話咁易！】睇完 unwire.hk 教學仲要逐個步驟慢慢跟？今集同大家分享點樣將成篇教學「自動化」！只要將教學指示轉化為 Gemini Spark 入面嘅專屬「Skill」，日後只需一句 Prompt，2-3 分鐘內就能自動生成讀取政府 Data.gov.hk 即時開放數據嘅單一網頁程式，仲可以免費 Host 上 Netlify 隨時喺手機打開！不管是香港大學（HKU）定係香港真光中學中學嘅巴士站，想整幾多個專屬預報器都話咁易，即刻睇片學嘢啦！ 📍 時間軸 Timestamps： 00:00 影片開場：介紹實時巴士到站 App 與靈感來源（unwire.hk） 00:23 展示成品：港大（HKU）與賽馬會官立中學專屬巴士預報器 00:43 實時數據來源：香港政府「資料一線通」（Data.gov.hk）Open API 01:31 突破傳統寫法：點樣將教學 Steps 轉化為 Gemini Spark 的「Skill」？ 02:18 在 Gemini Spark 建立與設定自訂 Skill（My Bus Route Info） 03:15 實戰生成：一句 Prompt 讓 Spark 在 2-3 分鐘自動產出 index.html 04:08 免費發布教學：下載代碼並透過 Netlify Drop 一鍵部署上網 04:47 更改專案自訂網址（Project Configuration）與上線測試 05:17 功能展示：30 秒自動 Refresh、搜尋功能與手機即時預報 05:54 總結：AI 時代善用 Prompt 與 Skill，輕鬆解決生活實質問題！ 06:22 結尾原創歌曲欣賞 🔗 相關實用連結：巴士到站時間 APP HKU： https://hku-bus-stops.netlify.app/ 真光中學： https://tlhk-bus-stops.netlify.app/ • AI 幫手寫程式新手教學：從零製作「實時巴士到站預報器」並免費放上網：https://unwire.hk/2026/09/08/ai-programming/ai/ • 香港政府資料一線通：https://data.gov.hk • 免費網頁託管服務：https://app.netlify.com/drop #GeminiSpark #Gemini #香港巴士 #DataGovHK #AI編程 #Netlify #夏Sir網上教室 #STEM教育 #開放數據

如果我有三分鐘，大概只夠泡一碗泡麵，但夏Sir 竟然用三分鐘讓 AI 生出了一個巴士到站 APP。也太扯，他直接把 unwire 的教學文章丟給 Gemini Spark，變成一個可以重複使用的 Skill，以後想幫哪個站做預報器，打一句話就搞定。

00:00夏Sir 開場介紹要做巴士到站時間 APP
00:46解釋實時資料來自香港政府 Data.gov.hk 的開放 API
02:20把 unwire 教學文章丟給 Gemini，要求轉成 Skill
03:38示範將 Skill 的 instruction 貼進 Gemini Spark
05:04輸入 Prompt 指定做香港大學的巴士即時到站工具
06:22下載產出的 index.html 檔案
07:00上傳到 Netlify Drop 並更改專案名稱
07:32展示成品：30 秒自動更新、搜尋功能與手機即時預報

把教學文章變成一張「技能卡」

夏Sir 的關鍵動作，是讓 Gemini 把 unwire 那篇圖文並茂的教學，濃縮成一份 Skill 的指令格式。這份指令就像以前電腦的 Macro，把「讀取政府 API、生成網頁、設定更新頻率」這些步驟全部打包。以後不用重新看文章，只要叫出這個 Skill，換個站名，AI 就會自動生出另一個 APP，這招真的解決了重複勞動的麻煩。

免費上架，手機馬上能用

生成出來的 index.html 檔，透過 Netlify Drop 這個免費服務，直接把檔案拖進去就完成發布。夏Sir 還提醒要進 Project Configuration 改掉 Netlify 亂派的網址，換成好記的名字。整個流程沒有碰到複雜的伺服器設定，成品點開就是一個會每 30 秒自動重新整理、還能搜尋站名的網頁，傳給朋友就能用。