2025-02-07- JavaScript 系列八：第6課 ── 天氣查詢應用程式-步驟01

發表於 2025-09-06 閱讀次數：

2025-02-07- JavaScript 系列八：第6課 ── 天氣查詢應用程式-步驟01

2025-02-07- JavaScript 系列八：第6課 ── 天氣查詢應用程式-步驟01

這個天氣查詢應用程式練習可以幫助你學會串接 API 並顯示資料，是很實用的技能。下面我會給你一個清楚的架構和建議使用的中央氣象局 API。

🌤️【應用程式架構】天氣查詢 App

1️⃣ 頁面 UI

一個下拉選單（<select>）：讓使用者選擇「縣市」
一個顯示天氣資訊的區塊：顯示以下資料
- 天氣現象（如：晴時多雲）
- 最高溫度（℃）
- 最低溫度（℃）
- 降雨機率（%）

2️⃣ 程式邏輯

使用者選擇縣市
程式透過 Fetch API 向中央氣象局發送請求，取得對應的天氣資料
顯示於畫面上

🧭【建議使用的 API】

中央氣象局（CWB）的開放資料平台提供了適合的資料：

🔗 API 文件入口：
https://opendata.cwb.gov.tw/index

建議使用的 API：
📘「36 小時天氣預報」：F-C0032-001

這個 API 會回傳每個縣市接下來 36 小時內的天氣預測
每個縣市都包含：天氣現象、最高/最低溫、降雨機率

🔑【註冊並取得 API 金鑰】

到中央氣象局開放資料平台註冊帳號
註冊後，登入後台
建立一個「應用程式」，就會拿到一組 API Key（稱作 Authorization）

🔗【API 呼叫方式（GET）範例】

1	https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=你的API_KEY&locationName=臺北市

Authorization: 請填入你的 API 金鑰
locationName: 填入縣市名稱（例如：臺北市、桃園市、高雄市）

🧱【建議的程式結構】

weather-app/
├── index.html     ← UI 結構
├── style.css      ← 美化頁面
└── script.js      ← 主要 JavaScript 程式邏輯

0%