이번 챕터는 Open Weather API를 이용해서 날씨 데이터를 받아와 날씨 웹 어플리케이션을 제작하는 것을 배울것이다.
기본 용어
웹 어플리케이션을 제작하기 위해 기본적으로 숙지해야 할 용어들이 있다.
- API
- Application Programming Interface의 약자로 두 개의 어플리케이션이 서로 통신하는 방법(요청과 응답)을 정의하는 것이다.
- JSON
- JavaScript Object Notation
- Key/ value 형식을 전달하기 위해 정의된 형식으로 {키 : 값, 키 : 값} 의 형태로 여러 쌍을 저장한다.
Open Weather API
Open Weather은 40,000개 이상의 기상 관측소 데이터 기반으로 70,000개의 도시의 현재 날씨 정보를 제공한다.
https://openweathermap.org/api
API Key 얻기
Weather API를 사용하기 위해서는 API Key를 받아야한다.
로그인 후 아래 그림처럼 My API Keys에 들어간다.
My API Keys에 들어가면 기본적으로 설정되어 있는 Key 하나를 볼 수 있다.
이 API Key는 후에 API를 불러오기 위해 필요한 설정값이다.
현재 날씨 API불러오기
Weather API를 불러오기 위해 다음 URL를 불러와야한다.
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
URL은 다음과 같은 설정값을 갖고 있다. 중괄호안에 해당 단위에 맞게 작성한다.
예를들어 서울의 정보를 얻기 위해서는 다음과 같이 작성해 주소입력을 하면 아래 그림과 같이 나오는 것을 알 수 있다.
그림을 보면 JSON형식인것을 볼 수 있다. JSON을 다루는 법은 좀있다 설명하겠다.
해당 파일에 temp설정을 보면 288.23으로 되어 있는 것을 볼 수 있는데 이것은 단위가 K(켈빈)단위기 때문이다.
이것을 섭씨로 변환하기 위해서는 경도와 APIKEY사이에 units=metric을 추가해야한다.
즉. https://api.openweathermap.org/data/2.5/weather?lat=37.5667&lon=126.9783&units=metric&appid={API Key}
이 되야한다.
3시간 간격의 예보 API불러오기
3시간 간격의 미래 예보 API를 불러오기 위해서는 다음의 URL를 불러와야 한다.
https://api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API key}
현재날씨랑 다른것은 2.5/ 이후에 weather냐 forecast냐이다.
API 데이터 받아오기
getJSON
API를 불러오기 위해서 위의 메서드를 불러와야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
</body>
<script>
$(document).ready(function(){
let url = 'https://api.openweathermap.org/data/2.5/weather?lat=37.5667&lon=126.9783&units=metric&appid={API KEY}';//API KEY 넣기
$.getJSON(url,function(data){
console.log(data);
})
})
</script>
</html>위와 같이 코딩해서 열어보면 console에 Data가 들어와 있는 것을 알 수 있다.
이중 현재 도시, 현재 날씨, 현재 기온, 최저 기온, 최고 기온을 뽑아 웹에 뿌려보자.
현재 도시는 data.name, 현재 날씨는 data.weather[0].main 이처럼 들어있다. 이를 코딩을 해보면 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<p id="city"></p>
<h1 id="weather"></h1>
<h2 id="temp"></h2>
<p id="temp_minmax"></p>
</body>
<script>
$(document).ready(function(){
let url = 'https://api.openweathermap.org/data/2.5/weather?lat=37.5667&lon=126.9783&units=metric&appid={API KEY}';//API KEY 넣기
$.getJSON(url,function(data){
console.log(data);
let city = data.name;
let weather = data.weather[0].main
let temp = data.main.temp;
let temp_max = data.main.temp_max;
let temp_min = data.main.temp_min;
$('#weather').text(weather);
$('#temp').text(temp);
$('#temp_minmax').text(temp_max+'/'+temp_min);
$('#city').text(city);
});
})
</script>
</html>
아이콘 적용하기
Weather Condition Code
https://openweathermap.org/weather-conditions 서 원하는 아이콘은 볼 수 있다.
날씨에 맞는 아이콘을 불러오기 위해서는 http://openweathermap.org/img/wn/+ 원하는 아이콘 +@2x.png로 불러온다.
Moment.js
Moment.js는 시간 형식을 다루기 위한 라이브러리다.
https://cdnjs.com/libraries/moment.js서 cdn형식으로 추가하여 사용한다.
문제.
current API를 그냥 불러오면 현재 온도가 K단위로 나온다. 이것을 섭씨로 변경하려면 어떻게 해야하는가?
주소 경도와 API Key 사이에 units=metric을 추가한다.
JQuery를 이용해 API를 불러오기 위해서는 어떻게 해야하는가?
getJSON메서드를 이용해 불러올 수 있다. 표기법은 $.getJSON(url,function(){ })이다.
'웹어플리케이션' 카테고리의 다른 글
| 웹어플리케이션_Chapter05_JQuery3 : 이벤트&애니메이션 (0) | 2022.10.04 |
|---|---|
| 웹어플이케이션_Chapter04_JQuery 2 (0) | 2022.09.28 |
| 웹어플리케이션_Chapter01_개요 (0) | 2022.09.06 |