자바스크립트로 외부에서 데이터를 가져와서 표현하는 방법이 있습니다. http://dna.daum.net 에서 제공하는 오픈API를 이용해서 알아보겠습니다.

http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn

위 주소는 다음에서 제공하는 apis.daum.net 웹 검색용 오픈API주소입니다. Querystring을 보면 다음과 같은 파라미터들이 전달됩니다.

q: 검색어

apikey: 다음에서 제공받은 apikey

output: 응답결과 데이터 형태 json 또는 xml

callback: JSONP를 위해 필요한 callback 함수 이름

* JSONP(다른 도메인 간의 데이터를 전달하기 위한 방법 http://en.wikipedia.org/wiki/JSONP) 


브라우저에서 호출하면 결과는 callbackfn({json format data}) 형태로 보입니다.


크롬 브라우저에서 ctrl+shift+J 를 눌러서 Console을 엽니다.

우선 callbackfn 함수입니다.

function callbackfn(res) { console.log(res); }


그리고 엘리먼트 하나를 만들어서 script 태그를 만들고 src에 위 주소를 붙입니다.

var element = document.createElement('script');

element.src = "http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn";


head 태그는 배열로 리턴되기 때문에 첫 번째 요소에 script 엘리먼트를 붙입니다. 

document.getElementsByTagName("head")[0].appendChild(element);


위 오픈API 주소가 호출되면서 자동으로 callbackfn() 함수가 실행되는 것을 볼 수 있습니다.




오전 2시간동안 WoC의 프로젝트 멤버들과 함께 쇼핑몰 위젯에 대한 SVN 연결을 시도 했습니다. openAPI에 대한 세션 발표와 개발환경구축에 관한 정리 시간이 있었고, 구글 코드에 만들어 놓은 지난 프로젝트를 받아서 실행하고 수정하는 것을 함께 했습니다.

http://code.google.com/p/shopgallery

학생들이 만든 위젯 초안도 마음에 듭니다.
http://yoshiboarder.tistory.com/9

한빛ENI교육센터에 스터디 진행이 저희 팀까지 두 팀이었습니다. 오후 스터디 모임은 TDD를 주제로 10명 조금 안 되는 사람들이 모이는 듯 했습니다.

지난 금요일 밤부터 토요일 새벽6시까지 양재동 다음 커뮤니케이션 3층에서 4번째 DevDay에 참가했습니다.

사용자 삽입 이미지

아웃백 도시락으로 저녁을 채웠습니다. ^^
사용자 삽입 이미지

5회는 9월에 제주 다음 미디어 센터에서 열린다고 합니다. 필참해야죠.
사용자 삽입 이미지


행사 마지막에 닌텐도 Wii를 경품으로 추첨을 했는데, 함께 간 오댈님 번호가 나왔습니다.
사용자 삽입 이미지

밤새 다른 분들과 활발하게 얘기를 하신 보람이 있었던 것 같습니다. 저는 토요일 회사에서 DB강의를 들어야 할 것 이 있어서 2시부터 6시까지 잠을 청했었습니다. ^^;
사용자 삽입 이미지

devday동안 작업했던 내용은 okjsp사이트 다음 openapi를 이용해서 카페 검색을 보여줬던 것을 블로그로 바꿨습니다.
까페 검색결과 링크를 클릭하고 들어가도 daum.net 리퍼러를 체크하기 때문에 카페 링크는 무용지물이 되어버린듯 합니다.
OPEN API : 지도, 검색 정보 등의 일부 데이터를 외부에 오픈해서 사용하도록 하는 프로그래밍 기술. 제3의 서비스 창출이 가능하게 된 Web2.0 프로그래밍 트렌드. 국내 Naver, 다음이 OpenAPI 주도.

Google File System : 전세계 웹검색 정보 등의 대용량 파일 처리를 위한 구글의 파일 분산 저장 시스템. 하루에 PC급 서버 10만대에서 20,000 테라바이트를 처리할 수 있는 병렬 컴퓨팅 설계 기법.

Google BigTable : 구글 파일 시스템을 응용한 대용량 분산 데이터베이스 시스템. 데이터베이스의 머신을 병렬화하여 확장성과 가용성 그리고 퍼포먼스를 무한히 늘려갈 수 있음.
개인적으로 2003년부터 철저히 외면했던 기술이었습니다. 허나 옥션의 openapi를 하다보니 지나칠 수 없는 기술이었습니다. 웹서비스가 어려웠던 이유 중 하나는 xml 봉투를 만드는 일과 이렇게 만들어진 봉투를 post방식으로 요청하는 것이 쉽지 않아서였습니다.

이클립스에는 이런 복잡 다단한 작업을 WTP에서 편하게 할 수 있는 기능을 제공합니다.
http://www.eclipse.org/webtools/jst/components/ws/1.5/tutorials/BottomUpWebService/BottomUpWebService.html
문서를 기본으로 웹서비스를 쉽게 이용하는 방법을 알아보겠습니다. webtools 플러그인이 장착된 이클립스에서 가능합니다. JEE 패키지나 WTP all-in-one 이클립스를 받아서 사용하시면 됩니다.


새로운 프로젝트를 만듭니다. web으로 필터링해서 보이는 Dynamic Web Project 를 선택합니다. 자바를 사용하기 때문에 Dynamic Web Project 를 이용합니다.
사용자 삽입 이미지


프로젝트 이름은 simplews 로 정했습니다. Apache Tomcat 5.5를 기준으로 했습니다. Target Runtime으로 설치된 톰캣을 지정해줍니다.
사용자 삽입 이미지


Axis2 Web Services는 선택하지 않습니다.
사용자 삽입 이미지


프로젝트가 만들어지면 src 아래 wtp 폴더를 만들고 Converter.java 파일을 복사해 넣습니다. 섭씨, 화씨 온도 변환 프로그램입니다. 아주 간단하죠. 이러면 일단 웹서비스를 만들 준비가 끝난 것입니다.


사용자 삽입 이미지


이제 웹서비스 서비스를 만드는 작업을 해보겠습니다. 웹서비스의 프로바이더와 클라이언트를 동시에 만들게 됩니다. File > New 에서 web으로 필터링하면 아까와 다르게 Web Service 항목이 보입니다. 이것을 선택합니다.
사용자 삽입 이미지


wtp.Converter 서비스 구현체를 선택합니다. 그리고 아래에 눈금게이지를 Test client까지 올립니다. 그리고 아래에 Monitor the Web service 항목을 체크합니다. Finish 버튼을 클릭하면 1분 정도의 작업이 진행될 것입니다.
사용자 삽입 이미지


관련된 프로젝트가 3개가 더 생겼습니다. 웹서비스를 지원하는 Servers, simplews client 프로젝트 그리고 JSR-109 Web Services 라는 듣보잡 프로젝트가 생성됩니다. 톰캣이 기동되고 서비스를 테스트할 수 있는 클라이언트 페이지가 에디터 영역에 뜹니다.
사용자 삽입 이미지


celsiusToFarenheit(float)를 클릭해서 값을 넣어 테스트해봅니다. 36.5 를 입력하면 화씨온도가 Result영역에 보이게 됩니다.
사용자 삽입 이미지


하단의 뷰에 TCP/IP Monitor 가 뜹니다. 보는 옵션을 Byte에서 XML로 바꿔주면 조금 더 가독성이 높일 수 있습니다. 왼쪽이 Envelope이고 오른쪽이 응답된 서비스 데이터입니다.
사용자 삽입 이미지


생성된 파일에 대해서 다음 글로 분석해보겠습니다.
http://www.programmableweb.com/apis/directory/1?apicat=Shopping&pagesize=All 


Viewing 1 to 29 of 29 APIs

API Description Category Updated
Amazon eCommerce Online retailer Shopping 2006-04-04
Amazon Historical Pricing Historical product sales data Shopping 2006-08-04
Authorize.Net Internet based payment gateway services Shopping 2007-02-20
AvantLink Affiliate marketing network Shopping 2007-07-21
Bountii Price Search Electronics and appliances price comparison service Shopping 2007-12-30
Cafe Press Customized retail product service Shopping 2006-03-06
CNET Shopping services Shopping 2007-02-01
Commission Junction Online affiliate programs Shopping 2006-09-23
DataUnison eBay Research eBay pricing and sales trend data Shopping 2006-10-21
Direct Textbook Book price comparison service Shopping 2007-06-11
eBay Online auction marketplace Shopping 2005-12-05
GoodStorm Online retail ecommerce Shopping 2006-07-16
Google Base Platform for structure and semi-structured data Shopping 2006-08-23
Google Checkout Shopping cart services Shopping 2006-08-31
LinkShare Affiliate marketing network Shopping 2007-10-08
Oodle Online classifieds service Shopping 2007-09-01
PaySimple Online payment gateway Shopping 2007-05-06
PriceGrabber Comparison shopping service Shopping 2008-01-12
PriceRunner Shopping comparision engine Shopping 2007-05-21
QuarkRank Consumer reviews service Shopping 2007-12-18
Rakuten Japanese shopping web service Shopping 2007-06-29
Shopping.com Online retail shopping Shopping 2006-06-14
Shopzilla Comparison shopping service Shopping 2008-01-04
SwapThing Community driven swapping site Shopping 2006-08-20
UPC Database UPC lookup service Shopping 2006-07-09
Windows Live Expo Online classifieds service Shopping 2006-06-07
Yahoo Shopping Shopping services Shopping 2005-11-19
Zazzle On-demand product creation service Shopping 2006-08-31
Zixxo Online coupons Shopping 2006-07-29

일단 스크랩입니다.
auction openapi를 이용한 소스입니다.

이클립스 자바 프로젝트 압축입니다.

http://code.google.com/p/shopgallery/source 
에서 최신의 소스를 받을 수 있습니다.

openapi

  • 기원
    • API를 오픈한다
      • Application Programming Interface
      • 분산 데이터
        • 원격 Select
      • 제한적 오픈이 다수
    • 구글맵과 크레이그리스트부동산정보
    • 아마존의 웹서비스를 통한 상품등록
  • 현황
    • 국내
      • 네이버/다음 포털 중심
      • 알라딘/옥션 등 상거래사이트
      • 오픈마루/미투데이 등의 서비스
    • 국외
      • http://www.programmableweb.com/
        • 594 API
        • 2648 mashups
      • Google을 필두
        • http://code.google.com
      • Facebook
        • http://developer.facebook.com
      • Amazon
      • Ebay
  • 구현
    • 구분
      • Remix
      • Mashup
    • 구현지점
      • Client Side Mixing
        • apikey 노출
        • 조작이 쉽고 다양성
        • 자바스크립트
      • Server Side Mixing
        • 서버의 부하
        • 서버 역할 증가
        • 서버사이드언어
  • 효과
    • 서비스 확장 아이디어 발굴
    • 서비스인지도 증가
      • powered by ...
    • 제휴업무의 간소화

mentee와의 만남이 기대되었습니다. 만났죠. 무진장 착해보였습니다. 대학교 3학년으로 기억하는데, 이번 방학은 알바도 포기하고 프로그램에만 전력을 다하겠다고 합니다.
기획서를 채택한 것은 쇼핑몰에 대한 관심이 컸기 때문이었는데, 역시나 미니샵 개발을 생각하고 있더군요. 저랑 아이디어를 동기화 시키는 시간을 1시간 좀 안되게 가졌습니다.

http://code.google.com/p/shopgallery 를 알려주었고, 옥션의 openapi 개발자 등록을 요청했습니다. 앞으로 19일까지는 데이터 전반에 대한 이해와 추출을, 그리고 2월 4일까지는 UI개발에 총력을 기울이기로 했습니다.
재밌는 것은 서로 얘기를 해 나가면서 위젯 애플리케이션의 기능이 점점 정제되어 간다는 느낌이 들었습니다. 말로 꺼내기 전 머리 속에서만 맴돌 던 것들의 1차적인 구현이 되는 것이죠. 그렇다고 말로 코딩하면서 "다 했다"라는 우를 범치는 않을 것입니다.

국방부 프로젝트에서 CIO를 맡으셨던 신형강 교수님의 소프트웨어 공학의 이해라는 시간도 좋았습니다. 물론 약간 졸기는 했지만, 교편을 잡은 분들이 기술의 공학적인 접근에 대한 이해를 갖고 계신 것이 후학들에게 정말 좋은 가이드가 될 것이라 생각합니다.

윤종수 판사님의 오픈소스 라이선스에 대한 강의는 갈 수록 이해가 잘 됩니다. 겸손하게 말씀하신 것이 기억남는데, 프로그램, 소프트웨어에 대한 라이센스를 전문으로 하는 법조계의 사람들이 하도 없어서 당신이 하신다고 하셨는데, 정말 블루오션입니다. 더 많은 전문가들이 많아졌으면 하는 바램도 있습니다. 특허권과 저작권의 차이에 대한 이해, 감사합니다.

이희승님의 오픈소스 개론도 깔끔하게 들었습니다. 누구보다 오픈소스에 대한 사회적 결과물과 영향력을 아시는 분이기 때문에 그렇죠. 제가 초긴축 재정상태라 점심을 더치페이한 것이 아쉬웠지만, (만원도 안되는 카레 값 정도는 제가 계산해드리고 싶었네요. ^^; 여름이후에나... 쩝) 개인적인 이야기들을 나눌 수 있어서 좋았습니다.

그 외에도 반가운 분들을 많이 뵐 수 있었습니다. 사진이 공개되면 같이 실어보고 싶습니다. 오픈마루의 권오성님 송시은님 만나서 반가웠습니다. 수고 많으시고요. 샌드위치랑 저녁 맛있었습니다. ^^ 계속 잘 부탁드리겠습니다.

저희 팀 열심히, 잘 할 겁니다.
http://okjsp.tistory.com/tag/openapi

오늘은 연세대에서 벌어지는 매시업 캠프에 참석하게 됩니다. 저주에 걸린 제 맥북프로를 가져갈 생각인데, 다 주인의 못남 때문이죠. ^^;


+ Recent posts