implement get currnet weather infromation api
- implement get currnet weather infromation api - connect the api with frontend
Showing
2 changed files
with
98 additions
and
1 deletions
... | @@ -4,6 +4,7 @@ var axios = require("axios"); | ... | @@ -4,6 +4,7 @@ var axios = require("axios"); |
4 | 4 | ||
5 | const openAPIKey = require("./secrets.json").openAPIKey; | 5 | const openAPIKey = require("./secrets.json").openAPIKey; |
6 | const googleMapKey = require("./secrets.json").googleAPIKey; | 6 | const googleMapKey = require("./secrets.json").googleAPIKey; |
7 | +const weatherAPIKey = require("./secrets.json").weatherAPIKey; | ||
7 | 8 | ||
8 | axios.create({ | 9 | axios.create({ |
9 | // TODO : 웹을 AWS에 올릴때, 해당 baseURL이 달라져야할 수 있음 | 10 | // TODO : 웹을 AWS에 올릴때, 해당 baseURL이 달라져야할 수 있음 |
... | @@ -25,6 +26,39 @@ router.get("/", async function (req, res, next) { | ... | @@ -25,6 +26,39 @@ router.get("/", async function (req, res, next) { |
25 | res.send(airCondition); | 26 | res.send(airCondition); |
26 | }); | 27 | }); |
27 | 28 | ||
29 | +router.get("/weather", async function (req, res, next) { | ||
30 | + console.log("경도:", req.query.latitude); | ||
31 | + console.log("경도:", req.query.longitude); | ||
32 | + | ||
33 | + let airCondition = ""; | ||
34 | + let response = await getEnglishPosition( | ||
35 | + req.query.latitude, | ||
36 | + req.query.longitude | ||
37 | + ) | ||
38 | + .then((encodedStation) => getWeather(encodedStation)) | ||
39 | + .then((result) => { | ||
40 | + airCondition = result; | ||
41 | + }); | ||
42 | + | ||
43 | + res.send(airCondition); | ||
44 | +}); | ||
45 | + | ||
46 | +const getWeather = (encodedStation) => { | ||
47 | + return axios | ||
48 | + .get( | ||
49 | + "https://api.openweathermap.org/data/2.5/weather?q=" + | ||
50 | + encodedStation + | ||
51 | + "&appid=" + | ||
52 | + weatherAPIKey | ||
53 | + ) | ||
54 | + .then(function (response) { | ||
55 | + return response["data"]; | ||
56 | + }) | ||
57 | + .catch(function (error) { | ||
58 | + console.log(error.response); | ||
59 | + }); | ||
60 | +}; | ||
61 | + | ||
28 | const getPosition = (lat, lon) => { | 62 | const getPosition = (lat, lon) => { |
29 | return axios | 63 | return axios |
30 | .get( | 64 | .get( |
... | @@ -58,6 +92,29 @@ const getPosition = (lat, lon) => { | ... | @@ -58,6 +92,29 @@ const getPosition = (lat, lon) => { |
58 | console.log(error.response); | 92 | console.log(error.response); |
59 | }); | 93 | }); |
60 | }; | 94 | }; |
95 | + | ||
96 | +const getEnglishPosition = (lat, lon) => { | ||
97 | + return axios | ||
98 | + .get( | ||
99 | + "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + | ||
100 | + lat + | ||
101 | + "," + | ||
102 | + lon + | ||
103 | + "&location_type=ROOFTOP&result_type=street_address&key=" + | ||
104 | + googleMapKey + | ||
105 | + "&language=en" | ||
106 | + ) | ||
107 | + .then(function (response) { | ||
108 | + let stationName = | ||
109 | + response["data"].results[0]["address_components"][3]["long_name"]; | ||
110 | + console.log("STATION : ", stationName); | ||
111 | + return (encodedStation = encodeURI(stationName)); | ||
112 | + }) | ||
113 | + .catch(function (error) { | ||
114 | + console.log(error.response); | ||
115 | + }); | ||
116 | +}; | ||
117 | + | ||
61 | /* GET route airCondition listing. */ | 118 | /* GET route airCondition listing. */ |
62 | router.get("/route", async function (req, res, next) { | 119 | router.get("/route", async function (req, res, next) { |
63 | console.log("출발지:", req.query.departure); | 120 | console.log("출발지:", req.query.departure); | ... | ... |
... | @@ -31,6 +31,12 @@ export default class Home extends Component { | ... | @@ -31,6 +31,12 @@ export default class Home extends Component { |
31 | region: "은평구청", | 31 | region: "은평구청", |
32 | curAirCondition: null, | 32 | curAirCondition: null, |
33 | routeInformation: null, | 33 | routeInformation: null, |
34 | + temperature: null, | ||
35 | + humidity: null, | ||
36 | + weather: null, | ||
37 | + icon: null, | ||
38 | + wind: null, | ||
39 | + cloud: null, | ||
34 | }; | 40 | }; |
35 | } | 41 | } |
36 | 42 | ||
... | @@ -303,6 +309,35 @@ export default class Home extends Component { | ... | @@ -303,6 +309,35 @@ export default class Home extends Component { |
303 | .finally(function () { | 309 | .finally(function () { |
304 | // always executed | 310 | // always executed |
305 | }); | 311 | }); |
312 | + | ||
313 | + API.get("airCondition/weather", { | ||
314 | + params: { | ||
315 | + latitude: position["Ha"], | ||
316 | + longitude: position["Ga"], | ||
317 | + }, | ||
318 | + }) | ||
319 | + .then((response) => { | ||
320 | + let resp = response["data"]; | ||
321 | + console.log(resp); | ||
322 | + console.log("현재온도 : " + (resp.main.temp - 273.15)); | ||
323 | + console.log("현재습도 : " + resp.main.humidity); | ||
324 | + console.log("날씨 : " + resp.weather[0].main); | ||
325 | + console.log("상세날씨설명 : " + resp.weather[0].description); | ||
326 | + console.log("날씨 이미지 : " + resp.weather[0].icon); | ||
327 | + console.log("바람 : " + resp.wind.speed); | ||
328 | + console.log("구름 : " + resp.clouds.all + "%"); | ||
329 | + this.setState({ | ||
330 | + temperature: (resp.main.temp - 273.15).toFixed(3), | ||
331 | + humidity: resp.main.humidity, | ||
332 | + weather: resp.weather[0].main, | ||
333 | + icon: resp.weather[0].icon, | ||
334 | + wind: resp.wind.speed, | ||
335 | + cloud: resp.clouds.all + "%", | ||
336 | + }); | ||
337 | + }) | ||
338 | + .catch(function (error) { | ||
339 | + console.log(error); | ||
340 | + }); | ||
306 | }; | 341 | }; |
307 | let setDepart = document.createElement("Button"); | 342 | let setDepart = document.createElement("Button"); |
308 | setDepart.innerHTML = "출발지로 설정하기"; | 343 | setDepart.innerHTML = "출발지로 설정하기"; |
... | @@ -400,7 +435,12 @@ export default class Home extends Component { | ... | @@ -400,7 +435,12 @@ export default class Home extends Component { |
400 | <br /> 미세먼지 등급 <br /> {pm10Image} <br /> | 435 | <br /> 미세먼지 등급 <br /> {pm10Image} <br /> |
401 | 미세먼지 지수 : {this.state.curAirCondition.pm10Value} <br /> | 436 | 미세먼지 지수 : {this.state.curAirCondition.pm10Value} <br /> |
402 | 초미세먼지 등급 <br /> {pm25Image} <br /> | 437 | 초미세먼지 등급 <br /> {pm25Image} <br /> |
403 | - 초미세먼지 지수 : {this.state.curAirCondition.pm25Value} <br />{" "} | 438 | + 초미세먼지 지수 : {this.state.curAirCondition.pm25Value} <br /> |
439 | + 현재 온도 : {this.state.temperature} ℃ <br /> | ||
440 | + 현재 습도 : {this.state.humidity} <br /> | ||
441 | + 날씨 : {this.state.weather} <br /> | ||
442 | + 바람 : {this.state.wind} <br /> | ||
443 | + 구름 : {this.state.cloud} <br />{" "} | ||
404 | </h5> | 444 | </h5> |
405 | ); | 445 | ); |
406 | } | 446 | } | ... | ... |
-
Please register or login to post a comment