CH09｜AI Agent 旅遊地圖網站實作工作坊

課程：智慧行動生活（Smart Life in the AI Era）
對應週次：Week 11（11/20）
授課時數：2 節課（100 分鐘）
章節編號：CH09

一、教學目標

完成本堂課後，學生應能：

說明 AI Agent 的概念，以及它如何串接多個工具完成複雜任務。
操作 NotebookLM 上傳旅遊素材（PDF/網頁連結），並讓 AI 整理行程草稿。
使用 Prompt 引導 Claude 或 Gemini 生成包含 Leaflet.js 互動地圖的 HTML 網站程式碼。
修改 HTML 檔案中的景點座標與說明，替換成自己選擇的旅遊地點（至少 5 個景點）。
將完成的 HTML 網站上傳至 Netlify，取得公開分享的網址連結。

二、教學流程（100 分鐘）

時間	分鐘數	教學活動	教師行動
00:00	10 min	老師示範成品：2026 九州自駕旅行計畫	投影展示完成的互動旅遊地圖網站，演示地圖點擊、景點資訊視窗、Google Maps 導航連結等功能
00:10	10 min	講授：什麼是 AI Agent？	說明 AI Agent 如何串接 NotebookLM（資料整理）→ Gemini/Claude（程式生成）→ Netlify（部署）的完整流程
00:20	10 min	步驟①：NotebookLM 上傳素材	帶領學生至 notebooklm.google.com，上傳旅遊相關 PDF 或網頁連結，請 AI 整理行程草稿
00:30	30 min	步驟②③：AI 生成 HTML + 修改座標	帶領學生使用 Gemini 生成 HTML 程式碼；示範如何修改景點座標與說明文字
01:00	15 min	步驟④：加入 Google Maps 導航連結	說明 Google Maps 連結格式，帶領學生為每個景點加入一鍵導航功能
01:15	15 min	步驟⑤：Netlify 部署上線	帶領學生前往 netlify.com，拖曳上傳 HTML 資料夾，取得公開網址
01:30	10 min	個人作業說明 + Q&A	說明個人作業繳交規則（學號＋姓名＋ Netlify 網址發佈至課程社群）；解答技術疑問

三、核心概念與知識內容

3.1 什麼是 AI Agent？

AI Agent（AI 代理人）是能夠自主規劃、決策並執行多步驟任務的 AI 系統。它不只是回答單一問題，而是能夠串接多個工具、服務和資料來源，完成複雜的目標。

本次實作的 AI Agent 流程：

素材資料（PDF/網頁）
        ↓ 步驟①
NotebookLM
（AI 整理行程草稿）
        ↓ 步驟②
Gemini / Claude
（AI 生成 HTML 程式碼）
        ↓ 步驟③
你親自修改景點資訊
（人機協作：AI 提供框架，人加入個人化內容）
        ↓ 步驟④
加入 Google Maps 導航連結
        ↓ 步驟⑤
Netlify 部署
（公開上線，全球可存取）

3.2 示範成品：2026 九州自駕旅行計畫

老師的示範網站使用以下技術組合：

技術	功能
Leaflet.js	開源地圖框架，免費，提供互動式地圖底圖與標記功能
OpenStreetMap	開源地圖資料，Leaflet.js 預設底圖來源
HTML/CSS/JavaScript	網站結構、樣式與互動邏輯（由 AI 生成，不需要你懂程式）
Google Maps 連結	點擊景點後可一鍵跳轉 Google Maps 開啟導航
Netlify	免費靜態網站托管，拖曳上傳即可上線

3.3 如何找景點的 GPS 座標？

前往 Google Maps
搜尋景點名稱
點擊景點圖示後，URL 列中出現類似 @24.1234,120.6789 的數字，即為緯度（Latitude）與經度（Longitude）
或在景點上長按，直接顯示座標

台灣常用景點座標範例：

台中國家歌劇院：緯度 24.1627，經度 120.6458
台中舊火車站：緯度 24.1375，經度 120.6847
逢甲夜市：緯度 24.1814，經度 120.6429

3.4 生成 HTML 的核心 Prompt 模板

使用以下 Prompt 請 AI 生成旅遊地圖網站的 HTML 程式碼：

你是一位前端工程師，請幫我用 HTML、CSS 和 JavaScript 建立一個旅遊地圖網站，
技術要求：
- 使用 Leaflet.js（從 CDN 載入，不需安裝）搭配 OpenStreetMap 底圖
- 地圖預設中心點設在[你的旅遊地區]，縮放層級 12
- 加入以下景點標記（Marker），每個景點點擊後顯示 Popup 資訊視窗：
  1. 景點名稱：[景點1]，座標：[緯度, 經度]，說明：[簡短介紹]，
     Google Maps 連結：https://maps.google.com/?q=[緯度],[經度]
  （以上格式重複列出你的 5 個以上景點）
- 網站標題：[你的旅遊計畫標題]
- 設計風格：清爽、現代，適合旅遊主題
- 輸出完整的單一 HTML 檔案（所有 CSS 和 JavaScript 內嵌在 HTML 中）

3.5 Netlify 免費部署流程

前往 netlify.com
使用 Google 帳號登入（免費，無需信用卡）
點擊「Add new site」→「Deploy manually」
將你的 HTML 檔案（或包含 HTML 的資料夾）拖曳到上傳區域
等待 30–60 秒，取得自動生成的公開網址（格式如：xyz-abc-123.netlify.app）
點擊網址確認網站正常顯示

四、實作步驟（課堂操作）

步驟①：NotebookLM 素材整理（15 分鐘）

前往 notebooklm.google.com，以 Google 帳號登入
建立新筆記本，命名為「我的旅遊地圖計畫」
上傳至少一項素材（可選擇以下任一）：
- 你曾去過的旅遊地點的相關網頁 URL
- 一份行程規劃的 Google Docs 或 PDF
- 直接貼上旅遊景點的文字描述
在 NotebookLM 右側聊天欄輸入：
「請根據這份旅遊資料，整理出 5 個以上的景點清單，每個景點包含名稱、簡短介紹、建議停留時間。」
截圖儲存 AI 整理的景點清單

步驟②：AI 生成 HTML 程式碼（30 分鐘）

打開 Gemini 或 Claude（均支援 Google 帳號登入）
使用 3.4 章節的 Prompt 模板，填入你的景點資料
複製 AI 生成的 HTML 程式碼
在電腦上開啟「記事本（Notepad）」或「VS Code」
貼上程式碼，另存為 index.html
雙擊 index.html 在瀏覽器中預覽效果

步驟③：修改景點座標與說明（包含在步驟②中）

在 HTML 程式碼中找到景點資訊區段，修改為你自己的旅遊地點：

使用 Google Maps 查詢每個景點的 GPS 座標
修改每個景點的名稱和說明文字
確認每個景點的 Google Maps 導航連結正確

步驟④：加入 Google Maps 導航連結（15 分鐘）

確認每個 Popup 視窗中包含以下連結格式：

html

<a href="https://maps.google.com/?q=緯度,經度" 
   target="_blank">🗺️ 在 Google Maps 中開啟導航</a>

步驟⑤：Netlify 部署（20 分鐘）

前往 netlify.com，以 Google 帳號登入
點擊「Deploy manually」
拖曳 index.html 到部署區
等待部署完成，截圖保存取得的公開網址
在手機瀏覽器打開網址，確認在行動裝置上正常顯示

五、課堂提問與討論引導

提問 1（技術反思）：

「這次你用 AI 生成了 HTML 程式碼，但你可能看不懂那段程式碼。你覺得這樣有學到什麼嗎？AI 工具是否讓你繞過了應該學習的技能？」

提問 2（創意應用）：

「這個旅遊地圖網站，除了分享旅遊行程，你覺得還可以用在哪些其他場景？（例如：社區資源地圖、校園導覽……）」

提問 3（AI Agent 延伸）：

「今天我們用的是手動串接多個工具的『準 AI Agent』流程。你覺得未來完全自動化的 AI Agent 出現後，旅遊規劃產業會有什麼變化？」

六、課後延伸資源

📖 Leaflet.js 官方文件：leafletjs.com（學習更多地圖功能）
🌐 Netlify 官方文件：docs.netlify.com
🗺️ Google My Maps：另一個不需要程式碼的免費地圖製作工具
⏰ 作業截止提醒：個人作業（AI 旅遊地圖網站）請在 Week 12 前，將「學號＋姓名＋ Netlify 網址」發佈至課程社群

七、評量重點

評量項目	比重	說明
課堂實作參與	平時成績	完成 NotebookLM 整理截圖 + Netlify 部署網址
學習日誌 Week 11	平時成績	記錄製作過程的心得與遇到的技術問題
個人作業：AI 旅遊地圖網站	平時成績	於課程社群發文繳交（格式：學號＋姓名＋ Netlify 網址）

八、教師備注與注意事項

💻 電腦設備需求：本次實作需要在電腦上操作（儲存 HTML 檔案、Netlify 拖曳上傳）。若部分學生只帶手機，建議兩人一組共用一台電腦，或提前告知學生需攜帶筆電。
⚠️ AI 生成程式碼的錯誤率：AI 偶爾會生成有語法錯誤的 HTML。若學生的地圖頁面出現空白，常見原因：1. Leaflet.js CDN 連結錯誤（可換用官方 CDN）；2. 座標格式錯誤（需為數字，不可有中文字）。
🌐 網路速度考量：Netlify 上傳和地圖載入需要穩定網路。若課堂網路不佳，可讓學生先在本機預覽，課後再完成 Netlify 部署。
📱 老師示範成品：準備 2026 九州自駕旅行計畫的旅遊地圖網站 Netlify 連結，在課堂開始時投影展示，激發學生的製作動機與期待感。示範成品的原始 HTML 可在課後提供給遇到困難的學生作為參考。
🔗 備用方案：若 Gemini 生成的 HTML 有語法錯誤，可改用 Claude（claude.ai，Google 帳號登入），Claude 在程式碼生成方面通常更穩定。

CH09｜AI Agent 旅遊地圖網站實作工作坊 ​

一、教學目標 ​

二、教學流程（100 分鐘） ​

三、核心概念與知識內容 ​

3.1 什麼是 AI Agent？ ​

3.2 示範成品：2026 九州自駕旅行計畫 ​

3.3 如何找景點的 GPS 座標？ ​

3.4 生成 HTML 的核心 Prompt 模板 ​

3.5 Netlify 免費部署流程 ​

四、實作步驟（課堂操作） ​

步驟①：NotebookLM 素材整理（15 分鐘） ​

步驟②：AI 生成 HTML 程式碼（30 分鐘） ​

步驟③：修改景點座標與說明（包含在步驟②中） ​

步驟④：加入 Google Maps 導航連結（15 分鐘） ​

步驟⑤：Netlify 部署（20 分鐘） ​

五、課堂提問與討論引導 ​

六、課後延伸資源 ​

七、評量重點 ​

八、教師備注與注意事項 ​