관광정보 서비스 오픈 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 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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); } | cs |
JS 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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); } }); }); } | cs |
결과물
이렇게 지도 위의 마커(Marker)를 클릭하면 출력하고자 했던 항목들이 뜨게 됩니다.