openWeather - 무료 날씨 api

openWeather - 무료 날씨 api 

openweather에서는 날씨 api를 제공하는 회사입니다.

openweather의 weather api를 이용하면 날씨와 관련된 정보를 쉽게 받아 올 수 있습니다.

 

지금부터 openweather의 weather api 사용법에 대해서 알려드리겠습니다.

 

1.회원가입

아래의 openweather의 공식 사이트에 들어가서 회원가입을 합니다.

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

 

2.api key 발급받기

회원가입 후 상단 탭에서 api페이지로 이동한뒤 subscribe버튼을 눌러서 결제 페이지로 이동합니다.

좌 - api페이지 우 - subscribe페이지

api 페이지에서 여러 정보들이 있지만 어떤 subscribe버튼을 눌러도 결과 값은 같으니 subscribe를 눌러 결제페이지로 이동을 합니다.

 

subscribe 페이지에서도 Free모델부터 Enterprise모델 까지 다양한데 우리는 무료로 사용하는 Free의 Get API Key 버튼을 눌러 api를 발급 받으면됩니다.

 

api키를 발급받으면 아래와 같은 페이지로 이동하게 되는데 알람창이 뜨게 되면 회사명과 사용목적을 선택해준다.

 

내가 발급 받은 api key를 보고 싶다면 상단에 API keys를 눌러 이동하면 빨간 네모박스에 api key가 적혀져 있다.

정보 보호를 위해서 가렸다.

api key까지 발급 받았으면 weather api의 사전준비가 끝났다.

 

3.api 사용법

다시 상단 api 페이지로 이동해서 내가 원하는 기능의 API doc버튼을 눌러 사용법을 익히면된다.

제일 많이 사용하는 Current Weather Data의 API doc버튼을 눌러 사용법을 확인해 볼예정이다.

 

 

위치값을 받아오려면 위치사용에 동의를 해야지 받아 올 수 있다.

HTML

  <div id="weather">
      <span></span>
      <span></span>
  </div>

JS

const weather = document.querySelector("#weather span:first-child");
const city = document.querySelector("#weather span:last-child");
const API_KEY = "0bc739bf7c3715bc10192f4b4eab8d27";

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  console.log("You live in", lat, lng);
  const lon = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      city.innerText = data.name;
      weather.innerText = `날씨 - ${data.weather[0].main} | 온도 - ${data.main.temp} | 위치 - `;
    });
}
function onGeoError() {
  alert("Can't find you. No weather for you.");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);