DOJO004

Dashool 創辦人
喜歡調酒
Rails、Nextjs、TypeScript

教你如何用 React 製作自己的 Weather App!

React

前言

Hi 我DOJO。

這次簡單製作一個 Web App 單純的練習 + 好玩而已😀
請多指教。

目標

取得用戶所在地的天氣指標。

使用技術

Vite + React
Typescript
Weather API
Fontawesome

開始囉

建立 Vite + React

npm create vite@latest

我選擇直接修改 App.tsx 程式碼不多，就懶得整理了😛

獲取用戶的地址

為了取得用戶的所在地，我們要先開啟瀏覽器的功能。

const getUserLocation = () => {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const lat = position.coords.latitude;
          const lng = position.coords.longitude;

          getWeatherData(lat, lng);
        },
        (error) => {
          console.error("Error getting user location:", error);
        }
      );
    } else {
      console.error("Geolocation is not supported by this browser.");
    }
  };

成功開啟的話，應該就會在瀏覽器的右上角看到小小的 icon。

獲取天氣資料

我使用 WeatherAPI 來獲取資料，記得先去註冊拿金鑰。URL

註冊完成後，就可以在 User > My Api Keys 的地方看到金鑰了。

再來到 API 的頁面，選擇 Current Weather Data

點進去就可以看到要怎麼 call 這個 API了。

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

可以先用 post man 看看是不是能拿到資料。
拿到的資料應該會長得像這樣 :

{
  "coord": {
    "lon": 10.99,
    "lat": 44.34
  },
  "weather": [
    {
      "id": 501,
      "main": "Rain",
      "description": "moderate rain",
      "icon": "10d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 298.48,
    "feels_like": 298.74,
    "temp_min": 297.56,
    "temp_max": 300.05,
    "pressure": 1015,
    "humidity": 64,
    "sea_level": 1015,
    "grnd_level": 933
  },
  "visibility": 10000,
  "wind": {
    "speed": 0.62,
    "deg": 349,
    "gust": 1.18
  },
  "rain": {
    "1h": 3.16
  },
  "clouds": {
    "all": 100
  },
  "dt": 1661870592,
  "sys": {
    "type": 2,
    "id": 2075663,
    "country": "IT",
    "sunrise": 1661834187,
    "sunset": 1661882248
  },
  "timezone": 7200,
  "id": 3163858,
  "name": "Zocca",
  "cod": 200
}

這時候就可以來寫 function了!

有點長，所以另外拉一個檔案出來寫。

export default function getCurrentWeather(lat:number, lon:number) {
    console.log(lat, lon);
    
    return fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${import.meta.env.VITE_WEATHER_API_KEY}&units=metric`
    )
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
        throw error;
      });
  }

之後再 import 進來。

const getWeatherData = async (lat: number, lng: number) => {
    const data = await getCurrentWeather(lat, lng);
    console.log("current weather", data);
    setWeatherData(data);
  };

到這裡應該就沒什麼大問題了!
接下來就剩下排版而已，就交給各位自由發揮。

可以到 Github 觀看原始碼。連結

有 clone 下來的，記得將 api key 放到 .env 裡面喔。

謝謝收看!👋