날씨 API에서 날씨에 따라 다른 아이콘 보이게 하기

날씨에 따라 다른 아이콘이 뜨게 하는 법에 대해 살펴보자.

 

 1 . 

OpenWeather 메인 페이지에 가서 

현재 날씨 데이터를 가져오고 있으니 current weather data의 API doc에 들어간다.

 

 

 2.   

그 안에 들어가면 List of condition codes가 있다. 

 

 

 

 3 .

List of condition codes를 눌러보면 weather condition codes를 볼 수 있다.

또는 아래 주소로 가면 된다.

https://openweathermap.org/weather-conditions

 

 

 4 .

Weather icons를 보면 

"id" : 500은 whether condition code 이다

"icon": "10n" 각각 코드에 따라서 보여지는 아이콘이 다르다. 

 

 

 

 

 5 .

아이콘 URL은 밑줄과 같다고 하였고, 아이콘 이름인 10d를 날씨에 따라 변경하면 될 것같다. 

 6 . 

api 데이터에서 아이콘을 누르면 녹색 버튼이 생기는데 

그  녹색 버튼을 누르고서 path copy를 한다. 

 

 

 7 . 

받아온 전체 데이터(weatherData) 중에서 아이콘 이름을 따로 저장한다.

이 icon에는 "03d"이 저장되어 있다.

const icon = weatherData.weather[0].icon

 

 8 . 

이 icon을 url 주소 안에 넣어주면 이미지와 연결이 된다. 

 

 

 9 . 

이 imageUrl을 이미지 태그 안 src에 넣어 클라이언트 브라우저로 보낸다.

 

 10 . 

브라우저에서 결과보기 

 

다음 포스트에서는 사용자가 지역 선정시

그 지역의 날씨가 나오게 하는 법을 알아보자.

 

 

 11 . 

코드 한 번에 보기 

 

const { response } = require("express");

const express = require("express");

const https = require("https");

 

const app = express();

 

app.get("/", function(req, res) {

const url = "https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=3db5c76812836cde318eb5d225";

https.get(url, function(response) {

console.log('statusCode:', response.statusCode);

 

response.on("data", function(data) {

const weatherData = JSON.parse(data)

const temp = weatherData.main.temp

const weatherDescription = weatherData.weather[0].description

const icon = weatherData.weather[0].icon

const imageUrl = "http://openweathermap.org/img/wn/" + icon + "@2x.png"

res.write("<h1>The temperature in London is " + temp + " degrees Celcius.</h1>");

res.write("<h3>The weather is currently " + weatherDescription + ". </h3>");

res.write("<img src=" + imageUrl + ">");

});

})

});

 

app.listen(3000, function() {

console.log("Server is running on port 3000.");

});