관광정보 서비스 오픈 API 활용하기(Spring, JSON, AJAX)

관광정보 API를 활용해 프로젝트를 진행하면서 오픈 API를 처음 다뤄보게 되었습니다.

따로 배우지도 않은터라 구글링을 열심히 해가면 배웠어요.

그 중에서 제가 이해하기 쉬웠던건 아래 블로그였어요.

http://shlee0882.tistory.com/2

여기에 자바 코드를 파일로 올려주셔서 그걸 뜯어보고 하며 API를 활용할 수 있었습니다.

오픈 API, 공공 데이터를 받아보자(Spring, JSON, AJAX)

자신이 어떤 데이터가 필요한지 생각해보고, 메뉴얼을 보면서 원하는 데이터를 추려낼 방법을 모색하는게 좋겠어요.

제가 필요한건 Tour API(관광정보 서비스 API)에서 장소별 구체적인 내용이었습니다.

<API 활용 메뉴얼 일부>

항목 구분을 보면 필수(1)이라고 적혀있죠

요청 메시지, 즉, URL에 저 항목은 꼭 들어가야지 결과가 나오게 됩니다.

예를 들어)

코엑스 스카이 라운지의 정보가 얻고 싶다고 하면

MobileOS=ETC

MobileApp=TestName

ServiceKey=발급받은 인증키

contentid=1531680

contentTypeid=39

를 입력해주시면 됩니다.

이걸 이어서 주소로 적어보면

http://api.visitkorea.or.kr/openapi/service/rest/KorService/detailIntro?MobileOS=ETC&MobileApp=TestName&ServiceKey=발급받은 인증키&contentid=1531680&contentTypeid=39

('발급받은 인증키' 부분에 인증키를 넣으셔야 합니다.)

이런 형식이 되고 URL로 복붙하면

이렇게 생긴 XML 파일이 나오게 됩니다.

이걸 받아오면 되는데... 크게 두 방식이 있었어요.

1) JSON 파싱

2) XML 파싱

저는 JSON으로 파싱하는 법이 더 이해하기 쉽고 익숙해서 이 방법을 활용하였습니다.

JAVA 코드

public void callDetail(HttpServletRequest request, HttpServletResponse response, @RequestParam String contentId,
            @RequestParam String contentTypeId) throws Exception {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
 
        String addr = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/detailIntro?ServiceKey=";
        String serviceKey = "인증키";
        String parameter = "";
 
        PrintWriter out = response.getWriter();                                        //클라이언트로 보낼 TEXT DATA, JSON에 넣을 때 쭉 나열하는듯
 
        parameter = parameter + "&" + "contentId=" + contentId;        //JSP에서 받아올 contentid, contentTypeid
        parameter = parameter + "&" + "contentTypeId=" + contentTypeId;
        parameter = parameter + "&" + "MobileOS=ETC";
        parameter = parameter + "&" + "MobileApp=tour";
        parameter = parameter + "&" + "_type=json";
 
        addr = addr + serviceKey + parameter;
        URL url = new URL(addr);
 
        System.out.println(addr);
 
        InputStream in = url.openStream();                            //URL로 부터 자바로 데이터 읽어오도록 URL객체로 스트림 열기
 
        ByteArrayOutputStream bos1 = new ByteArrayOutputStream();        //InputStream의 데이터들을 바이트 배열로 저장하기 위해
        IOUtils.copy(in, bos1);            //InputStream의 데이터를 바이트 배열로 복사
        in.close();
        bos1.close();
 
        String mbos = bos1.toString("UTF-8");
 
        byte[] b = mbos.getBytes("UTF-8");
        String s = new String(b, "UTF-8");        //String으로 풀었다가 byte배열로 했다가 다시 String으로 해서 json에 저장할 배열을 print?? 여긴 잘 모르겠다
        out.println(s);
 
        JSONObject json = new JSONObject();
        json.put("data", s);                                                          
    }

JS 코드

    daum.maps.event.addListener(marker, 'click', function() {        //다음 맵에 있는 마커 클릭 이벤트
 
        $.ajax({        
              url: 'callDetail.do',
              type: 'get',
              data : {"contentId" : contentid, "contentTypeId" : contenttypeid},            //contentid, contentTypeid 서버로 전송
              dataType: 'json',
              success: function(data){
                  
                   var myItem = data.response.body.items.item;                                //이 경로 내부에 데이터가 들어있음
                   var output = '';
                         output += '<h4>'+myItem.treatmenu+'</h4>';                            //API 활용 메뉴얼 보면 Response 할 수 있는
                         output += '<h4>'+myItem.opentimefood+'</h4>';                        //데이터들이 있음
                         output += '<h4>'+myItem.reservationfood+'</h4>';                     //거기서 골라 쓰면 됨.
                      
                      $('#window').html(output);
              },
                  error: function(XMLHttpRequest, textStatus, errorThrown) { 
                 alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            } 
    });
    });
    } 

결과물

이렇게 지도 위의 마커(Marker)를 클릭하면 출력하고자 했던 항목들이 뜨게 됩니다.