Page 0: Page 1: Open Social App 만들기 Page 2: • 목표 – Open Social Application을 컨테이너에 추가해 보자. • 내용 – Open Social – Open Social API Page 3: Open Social • 다양한 SNS 사이트에서 사용 가능한 Common API를 제공 Page 4: 용어 • • • • 컨테이너 가젯 프로파일 뷰 Page 5: 컨테이너 • OpenSocial API로 만들어진 APP가 실행되는 곳. Page 6: 가젯(Gadget) • 컨테이너에 포함되는 응용 프로그램 • Xml 파일 예 • 일반적으로 사용하는 HTML, CSS, JS를 이용. => 재활용 가능 Page 7: 프로파일 • 개인 정보 • 개인 공간 Page 8: 뷰(View) • 컨테이너가 가젯을 위해 제공하는 공간. • 프로파일 – 프로파일과 함께 제공 – 작고 제약이 있음 • 캔버스 – 가젯을 위한 전용 공간 Page 9: Open Social API Page 10: Hello World <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“Hello World"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <![CDATA[ Hello World! ]]> </Content> </Module> Page 11: 실행하기(test) • Xml 파일을 웹에 호스팅 한다. • Orkut 의 sandbox에 접속, 그리고 로그인. http://sandbox.orkut.com • Xml파일의 주소를 응용프로그램으로 등록 Page 12: 주요 개념 • People – Owner, viewer • Relationships – Friends • Activities • Persistence • Views Page 13: 주요기능 • • • • • 사용자에게 정보를 CURD 사용자의 친구 목록 가져오기 사용자의 Actiities를 생성하기 읽기 사용자만의 data를 CURD Permission Control Page 14: Data 요청하기 • 특징 – 비동기. – 한번에 여러 개 요청 가능. – 요청의 순서가 의미를 갖는다. var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('VIEWER'), 'viewer'); var idspec = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIE NDS" }); req.add(req.newFetchPeopleRequest(idspec), 'viewerFriends'); req.add(req.newFetchPersonAppDataRequest('VIEWER', 'gifts'), 'data'); req.send(onLoadFriends); Page 15: Data 요청하기 function onLoadFriends(data) { var viewer = data.get('viewer').getData(); var viewerFriends = data.get('viewerFriends').getData(); var giftData = data.get('data').getData(); var friends = new Array(); viewerFriends.each( function(person) { friends[person.getId()] = person.getDisplayName(); }); updateGiftList(viewer, giftData, friends); } Page 16: makeRequest • 원격 서버에 있는 데이터를 가져올 때. – 예) 스토리큐에 있는 큐 정보를 가져오고자 할 때. Orkut url Slide Q Story Q Gadgets.io.makeRequest(url…) User Page 17: makeRequest • 보호된 자원으로 접근이 필요할 경우 Oauth 사용 가능. gadgets.io.makeRequest(url, callback, opt_params) • http://code.google.com/intl/ko/apis/opensoci al/articles/makerequest-0.8.html Page 18: jQuery 사용 • http://code.google.com/p/opensocial-jquery/ Page 19: