오픈API란?
개발을 하다보면, 내가 스스로 얻을수 없는 정보들이 있다.
버스 정보라든가 , 날씨 정보라든가 , 도서관 정보 등의 데이터들이다.
대부분 국가, 기업, 기관등에서 해당 정보들을 공유한다.
해당 데이터들을 쉽게 사용할수 있도록 간단하고 쉽게 제공해주는것을 오픈API라고 한다!
이번에 사용한 API 는 날씨정보 API입니다 !
날씨를 제공해주는 API는 꽤 있으니,
이 OpenWeatherMap API가 마음에 들지않으면,
다른 API도 많으니 찾아보는것도 좋다!
( API를 선택한 이유는 해외날씨를 가져와야하기 때문이다!)
OpenWeatherMap 를 이용한 날씨정보를 가져오는 API를 소개해드립니다.
우선 이 날씨 API는 완전 무료는 아니고, 부분적 무료입니다.
자세한 가격정보는 아래 링크에 있습니다.
( 사실 전 많은 사용을 하지않을 것이라서 무료를 사용하긴 하는데, 필요에 따라서는 유료나 다른 API를 사용하셔야합니다 )
https://home.openweathermap.org/api_keys
사용방법은 간단합니다.
1. 해당 사이트에 가입을 합니다.
2. API Key를 발급받습니다.
3. API를 사용합니다.
끝입니다.
1. 해당 사이트를 가입합니다.
>이메일정보만 입력하면, 가입이 완료 됩니다 ..!
2. 로그인 후, API Key를 발급받습니다.
>아래의 API Key 탭으로 가시면, API가 기본적으로 하나 생성되어 있습니다.
> 아래의 API Key를 복사합니다! .
출처 : namjackson.tistory.com/27
--꼬바리의 글
JSON형태로 값을 받아오게 된는데 출력시 이쁘게 출력 하고싶은 마음에
저는 fontawesome.com/start 이라는 아이콘과 연결해서 만들었습니다.
-일단 폰트어썸이라는 사이트 에서 회원가입 후 CDN을 꼭 넣어줘야합니다!
<%--아이콘 --%>
<script defer src="https://use.fontawesome.com/releases/v5.15.2/js/all.js" integrity="sha384-vuFJ2JiSdUpXLKGK+tDteQZBqNlMwAjhZ3TvPaDfN9QmbPb7Q8qUpbSNapQev3YF" crossorigin="anonymous"></script>
-HTML 코드
<div class="weather">
<div class="CurrIcon"></div>
<div class="CurrTemp"></div>
<div class="City"></div>
</div>
-JavaScript 코드
<script type="text/javascript">
$(document).ready(function() {
let weatherIcon = {
'01' : 'fas fa-sun',
'02' : 'fas fa-cloud-sun',
'03' : 'fas fa-cloud',
'04' : 'fas fa-cloud-meatball',
'09' : 'fas fa-cloud-sun-rain',
'10' : 'fas fa-cloud-showers-heavy',
'11' : 'fas fa-poo-storm',
'13' : 'far fa-snowflake',
'50' : 'fas fa-smog'
};
$.ajax({
url:'http://api.openweathermap.org/data/2.5/weather?q=도시이름&APPID=회원가입후 받은 키 값&units=metric',
dataType:'json',
type:'GET',
success:function(data){
var $Icon = (data.weather[0].icon).substr(0,2);
var $Temp = Math.floor(data.main.temp) + 'º';
var $city = data.name;
$('.CurrIcon').append('<i class="' + weatherIcon[$Icon] +'"></i>');
$('.CurrTemp').prepend($Temp);
$('.City').append($city);
}
})
});
</script>
jquery 형식으로 출력합니다.
url 에서 도시이름은 영어로 작성해주시고
(저는 jeju였습니다.)
APPID는 오픈웨더앱 회원가입후 받은 본인 키를 입력해주시면 됩니다.
결과 출력값 =>
CSS로 글자크기와 색상 변경 가능합니다^^
'Front-end > JQuery' 카테고리의 다른 글
[jQuery] 제이쿼리 AJAX (0) | 2021.04.29 |
---|---|
[jQuery] vanilla JS -> JQuery 표현법 (0) | 2021.04.29 |
[jQuery] 제이쿼리에서 아작스(AJAX) 사용 (0) | 2021.04.27 |
[jQuery] 제이쿼리 기초 : 조작하기, 이벤트, 이펙트 (0) | 2021.04.27 |
[jQuery] 제이쿼리 기초 : 시작하기, 선택자 (0) | 2021.04.27 |
댓글