天氣應用 API 整合

2024 iThome 鐵人賽

DAY 23

JavaScript

JavaScript 基礎：端開發的第一步系列第 23 篇

16th鐵人賽

ahpao

2024-10-07 01:17:58

138 瀏覽

分享至

第二十三天：天氣應用 API 整合

1. 取得 OpenWeatherMap API 金鑰

首先到 OpenWeatherMap 註冊並獲取一個 API 金鑰。這個金鑰將用於發送 API 請求。

2. 應用邏輯概述

應用程序將包括以下功能：

使用者可以輸入一個城市名稱。
點擊「查詢」按鈕後，發送 API 請求以獲取該城市的天氣數據。
當請求成功時，顯示城市名稱、當前溫度、天氣描述等。
若城市名稱無效或 API 請求失敗，顯示錯誤訊息。

3. 基本 HTML 結構

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天氣應用</title>
</head>
<body>
  <h1>天氣查詢</h1>
  
  <input type="text" id="cityInput" placeholder="請輸入城市名稱">
  <button id="searchBtn">查詢天氣</button>
  
  <div id="weatherInfo"></div>

  <script src="app.js"></script>
</body>
</html>

4. JavaScript (app.js)

// 你的 API 金鑰
const apiKey = 'YOUR_API_KEY'; // 請替換為你自己的 API 金鑰

// 取得 DOM 元素
const searchBtn = document.getElementById('searchBtn');
const cityInput = document.getElementById('cityInput');
const weatherInfo = document.getElementById('weatherInfo');

// 當使用者點擊「查詢」按鈕時
searchBtn.addEventListener('click', async () => {
  const city = cityInput.value.trim();
  
  if (!city) {
    weatherInfo.innerHTML = '請輸入城市名稱';
    return;
  }

  // 清空之前的結果
  weatherInfo.innerHTML = '';

  try {
    const weatherData = await getWeatherData(city);
    displayWeatherInfo(weatherData);
  } catch (error) {
    weatherInfo.innerHTML = `錯誤：${error.message}`;
  }
});

// 發送 API 請求，取得天氣數據
async function getWeatherData(city) {
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=zh_tw`;
  
  const response = await fetch(apiUrl);
  
  if (!response.ok) {
    throw new Error('無法獲取天氣數據，請檢查城市名稱');
  }
  
  const data = await response.json();
  return data;
}

// 顯示天氣信息
function displayWeatherInfo(data) {
  const cityName = data.name;
  const temp = data.main.temp;
  const description = data.weather[0].description;
  
  weatherInfo.innerHTML = `
    <h2>${cityName}</h2>
    <p>溫度：${temp}°C</p>
    <p>天氣狀況：${description}</p>
  `;
}