[날씨 외부 API] openweathermap api 와 fontawesome 아이콘 이용해서 날씨 정보 가져오기

오픈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를 복사합니다! . 

 

출처 : namjackson.tistory.com/27

 

 

--꼬바리의 글

JSON형태로 값을 받아오게 된는데 출력시 이쁘게 출력 하고싶은 마음에

저는 fontawesome.com/start 이라는 아이콘과 연결해서 만들었습니다.

Font Awesome

-일단 폰트어썸이라는 사이트 에서 회원가입 후 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는 오픈웨더앱 회원가입후 받은 본인 키를 입력해주시면 됩니다.

 

 

결과 출력값 =>

외부 api 를 사용한 제주도 날씨 출력

 

 

CSS로 글자크기와 색상 변경 가능합니다^^