공공데이터API(미세먼지) 활용하여 웹을 만들어보자②(react,node.js)

이제 서버페이지에서

공공데이터와 연결해보자

 

나의 서버페이지의 경로는 요래생겼다 왜이렇게했는지는 모른다 걍 익숙하다.

 

body-parser, cors, express 모듈을 사용했다. 

 

<<server.js>>

const express = require('express');             //익스프레스 모듈 가져오기 
const app = express();
const cors = require('cors');                   //cors를 사용하고 싶다
const bodyParser = require('body-parser');      //body-parser을 사용하고 싶다
const port =5000;                               //서버포트는 5000번 포트
const route = require('./routes/index');        //router가 있는 곳이다 만들 index.js다
app.use(bodyParser.json());

app.use(cors());
app.use('/', route);
app.listen(port, ()=>{
    console.log(`express is running on ${port}`);   //익스프레스 연결 확인
})

 

<<index.js>>

const bodyParser = require('body-parser');
const { query } = require('express');
const express = require('express');
const airdata = require('./airdata'); //여기서 만들어논 함수를 사용할거다
const router = express.Router();

router.use(bodyParser.urlencoded({extended: true}))



router.post('/location',function (req,res){ ///프론트에서 fetch로 요청한 location 친구

    console.log("연결 1!!!")    //확인용
    airdata(req.body.sidoName,(error, {air}={})=>{  //airdata함수에 fetch해준 req->body->sidoName를 보내준다
        if(error){      //에러 발생시
            console.log("가나다라마바사!!");
            return res.send({error})
        }
        return res.send(air);   // airdata에서 받은 객체를 프론틀앤드로 보내준다. 
    })
})


module.exports = router;

 

router.post 안의 airdata 함수를 살펴보자

 

 

서비스키는 공공데이터 포털 마이페이지에서 볼 수 있다.

api url은 문서에 적혀있다.

 

<<airdata.js>>

const request = require('request')
const serviceKey = 'JGdWD1%2BbDnKrXTJsfpXg내 서비스키tFJizvd1Gg%2BMoLSJPQXNKvScQPw%2BqJGIWjVkmvUfWBrjQUA%3D%3D'
//공공데이터 포털에서 받은 내 서비스키 

var parse = require('json-parse')
const airdata = (sidoName, callback) => {       // index.js에서 보내준 시/도 이름을 여기서 받았다.

    console.log("에어데이타!!!!!!");            //진입햇는지 확인용

    const url = 'http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?';
    //api사용하기 위한 url이다. 끝에 '?'물음표를 붙여야된다.

    //요청시 필요한 정보들을 붙여 준다 ,,,뭐뭐필요한지 명세에 적혀있다
    var queryParams = encodeURIComponent('ServiceKey') + '=' + serviceKey   //서비스키
    queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('1');  
    queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1');
    queryParams += '&' + encodeURIComponent('dataTerm') + '=' + encodeURIComponent('DAILY');    //데이터측정시간
    queryParams += '&' + encodeURIComponent('ver') + '=' + encodeURIComponent('1.3'); //버젼
    queryParams += '&' + encodeURIComponent('sidoName') + '=' + encodeURIComponent(sidoName);  //시도 이름
    queryParams += '&' + encodeURIComponent('_returnType') + '=' + encodeURIComponent('json')   //josn으로 받기
    
    request(
        {
        url: url + queryParams, // url과 queryParams합쳐놓은거 
        method: 'GET'
        }, function (error, response, body) 
        {
        // console.log(url+queryParams);
        //console.log('Status', response.statusCode);
        //console.log('Headers', JSON.stringify(response.headers));
        // console.log('Reponse received', body);

        callback(undefined,{    //body를 air이름으로 만들어서 index.js에 보내준다
            air:body
        })
        });
        
}

module.exports = airdata;

 

url + queryParams 를 하게 해주면 openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?ServiceKey=JGdWD1%2BbDnKrXTJsfpXgKfTI9AwTqjxsiwdMGGZtFJizvd1Gg%2BMoLSJPQXNKvScQPw%2BqJGIWjVkmvUfWBrjQUA%3D%3D&numOfRows=1&pageNo=1&dataTerm=DAILY&ver=1.3&sidoName=%EB%B6%80%EC%82%B0&_returnType=json

 

위와 같이 붙여서 나온다.  웹서핑하면서 어딘가 많이 본 url모습이다.

 

 

---

이래해주면 

index.js에서 router.post('./location 친구가 프론트로 보내주고 

 

 

main.js 에서 json파일을 쪼개서 원하는 정보를 출력시킨다. 

  .then(res => res.json())    // 서버로부터 받음
        .then(json => {
            console.log(json);      
            console.log(json.list[0].dataTime);     //dataTime (측정시간) 콘솔 출력
            console.log(json.list[0].pm10Value);    //pm10Value 미세먼지 지수 콘솔출력
            console.log(json.list[0].pm25Value);    //pm25Value 미세먼지 지수 콘솔출력
        });

 

 

아 참고로

body(=air)의 모습은 이렇기 때문에 ↑같이 해줘야 원하는걸 꺼낼 수 잇따.

 

---

서치를 눌러주면 

 

 

위와 같이 데이터 측정 시간과 미세먼지농도, 초미세먼지 농도가 출력 된다. 

한 시간마다 업데이트 되는것 같다.

 

이제 미세먼지 주의보, 생활기상지수등 더 가져와 봐야겠다.