[날씨 API 사용하기]OpenWeatherMap을 이용한 날씨 API를 사용해보자!

오픈API란?

개발을 하다보면, 내가 스스로 얻을수 없는 정보들이 있다.

버스 정보라든가 , 날씨 정보라든가 , 도서관 정보 등의 데이터들이다.

대부분 국가, 기업, 기관등에서 해당 정보들을 공유한다.

해당 데이터들을 쉽게 사용할수 있도록 간단하고 쉽게 제공해주는것을 오픈API라고 한다!

이번에 사용한 API 는 날씨정보 API입니다 !

날씨를 제공해주는 API는 꽤 있으니,

이 OpenWeatherMap API가 마음에 들지않으면,

다른 API도 많으니 찾아보는것도 좋다!

( API를 선택한 이유는 해외날씨를 가져와야하기 때문이다!)

OpenWeatherMap 를 이용한 날씨정보를 가져오는 API를 소개해드립니다.

https://openweathermap.org/

우선 이 날씨 API는 완전 무료는 아니고, 부분적 무료입니다. 

자세한 가격정보는 아래 링크에 있습니다.

( 사실 전 많은 사용을 하지않을 것이라서 무료를 사용하긴 하는데, 필요에 따라서는 유료나 다른 API를 사용하셔야합니다 ) 

https://home.openweathermap.org/api_keys

사용방법은 간단합니다.

1. 해당 사이트에 가입을 합니다.

2. API Key를 발급받습니다.

3. API를 사용합니다.

끝입니다.

1. 해당 사이트를 가입합니다.

 >이메일정보만 입력하면, 가입이 완료

됩니다 ..!

2. 로그인 후, API Key를 발급받습니다.

 >아래의 API Key 탭으로 가시면, API가 기본적으로 하나 생성되어 있습니다.

> 아래의 API Key를 복사합니다! . 

3. API 를 사용합니다.

> 먼저 필요한 API 종류를 알아보고, 선택합니다.

> 여러종류의 API를 제공하고 있습니다,,,

( 부분적 무료, 유료 포함. )

> 위 사진의 원하는 API의 [API doc]을 눌러 상세한 API 사용법을 확인합니다 !!

https://openweathermap.org/api

> ( 저는 기본적은 Current Weather data를 사용하였습니다.)

> 여러종류의 호출법 ( 우편번호로 날씨 받기, 위도/경도로 받기, 도시이름으로 받기, 도시ID로 받기 등등 이 존재합니다.

> 사용법에 appid = 나의apiKey를 추가하여 호출합니다.

( ex> http://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=나의 API Key )

Json 형태의 Data가 오는 것을 알수 있습니다. !

자 이제, 간단하게 JavaScript, JQUERY를 사용하여, 몇몇 도시들의 현재 날씨정보를 받아와봅시다.

var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+city+"&appid="+"내APIKEY";
		$.ajax({
		    url: apiURI,
		    dataType: "json",
		    type: "GET",
		    async: "false",
		    success: function(resp) {
		    	console.log(resp);
		    	console.log("현재온도 : "+ (resp.main.temp- 273.15) );
		    	console.log("현재습도 : "+ resp.main.humidity);
		    	console.log("날씨 : "+ resp.weather[0].main );
		    	console.log("상세날씨설명 : "+ resp.weather[0].description );
		    	console.log("날씨 이미지 : "+ resp.weather[0].icon );
		    	console.log("바람   : "+ resp.wind.speed );
		    	console.log("나라   : "+ resp.sys.country );
		    	console.log("도시이름  : "+ resp.name );
		    	console.log("구름  : "+ (resp.clouds.all) +"%" ); 		    	
		    }
		})
	}

현재온도는 섭씨온도를 만들기위해 273을 뺍니다!

날씨이미지도 지원을 해줍니다.

var imgURL = "http://openweathermap.org/img/w/" + resp.weather[0].icon + ".png";
 $("html컴포넌트").attr("src", imgURL);

위처럼 사용하시면됩니다.

( 단 , 제공해주는 이미지크기가 작고 이쁘지 않은 관계로 저는 다른 이미지를 사용했습니다.

참고 : https://erikflowers.github.io/weather-icons/

)

ajax를 사용하여, 간단하게 도시의 날씨 정보를 받아오게됩니다.

이날씨 API를 활용하여, 아래의 웹페이지를 만듭니다! 

대부분의 API는 사용하기 쉽게 만들어져있고,

샘플도 많기 때문에, 어렵지 않습니다.

날씨데이터를 활용하여 개발해보세요!