머드초보의 블로그

네이트에서 cyworld가 opensocial에 참가한다는 글을 보았는데요.
8월중에 api를 공개했네요. opensocial 표준으로 작성된 것으로 보이구요. 아직은 0.8인데, 0.9를 지원할 예정인 듯 합니다.

facebook 같은 경우에는 flash를 위한 라이브러리를 제공하는데요. 여긴 제공하지 않아서 javascript라이브러리를 이용해서 개발해야합니다. ExternalInterface를 이용하면 데이터를 받을 수 있고, 요청할 수 있습니다^^

개발자등록하기
http://devsquare.nate.com/ 여기가 데브스퀘어! 네이트앱스토어 관련 사이트입니다.
여기에 가시면 '개발자 등록하기' 버튼이 있습니다. 대충 작성하고(?) 등록하면 되는데, 사진이 필수부분입니다-_-

테스트하기
http://devsquare.nate.com/appstore/javascript 여기에 가면 아주 간단한 '자신의 프로필 가져오기', '일촌 목록가져오기' 등등의 javascript 라이브러리 사용법이 있어요. 여기에서 아무코드나 긁어다가 좌측상단에 프로필정보에 보면 앱스등록 버튼이 있어요. 그걸 클릭하고, sandbox라는 메뉴가 있는데요. 거기가 테스트존같은 겁니다.
거기에 소스를 붙여넣으면 결과가 아래에 나와요 ^^

플래시 넣기
플래시는 gadgets.flash.embedFlash함수를 이용해서 삽입합니다.
[code]gadgets.flash.embedFlash("swf주소",
    "divFlash",
    "10",
    {
        id:"flashOpenSocialTest",
        width: 200,
        height: 300,
        wmode: "transparent",
        allowScriptAccess: "always"
    }
);[/code]

일촌목록을 가져오는 예제와 플래시 연동하는 소스
module소스
[code]<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="플래시테스트">
        <Require feature="opensocial-0.8" />
        <Require feature="flash" />
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
            <script type="text/javascript">
                function thisMovie(movieName) {
                    if(navigator.appName.indexOf("Microsoft") != -1) {
                        return window[movieName];
                    } else {
                        return document[movieName];
                    }
                };
               
                function request() {
                    var idspec = opensocial.newIdSpec({ "userId" : "OWNER" , "groupId" : "FRIENDS"});
                    var req = opensocial.newDataRequest();
                    var opt_params = {};      
                    opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
                    req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), "get_owner");
                    req.add(req.newFetchPeopleRequest(idspec, opt_params), "get_friends");
                    req.send(response);
                };

                function response(dataResponse) {
                   
                    var owner = dataResponse.get('get_owner').getData();
                    var friends = dataResponse.get('get_friends').getData();
                   
                   
                    var ownerId = owner.getDisplayName();
                   
                    var myFriends = [];

                    friends.each(function(person) {
                        myFriends.push({name: person.getDisplayName()});
                    });
                    thisMovie("flashOpenSocialTest").responseData(ownerId, myFriends);
                };
               
                function init() {
                    gadgets.flash.embedFlash("http://localhost/OpenSocialTest-debug/OpenSocialTest.swf",
                        "divFlash",
                        "10",
                        {
                            id:"flashOpenSocialTest",
                            width: 200,
                            height: 300,
                            wmode: "transparent",
                            allowScriptAccess: "always"
                        }
                    );
                }

                gadgets.util.registerOnLoadHandler(init);
            </script>

            <div id="divFlash"></div>

     ]]>
   </Content>
 </Module>[/code]
코드중 주의해야할 것은...-_- <Require feature="flash" />가 없으면 안됨 ㄷㄷ 2시간동안 고생했음 ㄷㄷ
그리고, allowScriptAccess: "always"로 해야함 ㄷㄷ
아 또, 디폴트로는 20개만 가져오게 되어있는데요. 옵션을 줘서 100으로 바꿔주시면 100명가져올 수 있어요.
opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
옵션에 대한 자세한 내용은 aproxacs님 블로그에! http://www.aproxacs.com/203
플렉스코드
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    width="200" height="300"
    applicationComplete="applicationCompleteHandler()">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function applicationCompleteHandler():void
            {
                Security.allowDomain("*");
                if (ExternalInterface.available)
                {
                    ExternalInterface.call("request");
                    ExternalInterface.addCallback("responseData", responseData);
                }
            }
           
            private function responseData(ownerId:String, friends:Array):void
            {
                list.dataProvider = friends;           
            }
        ]]>
    </mx:Script>
    <mx:Label text="일촌목록" />
    <mx:List id="list" width="100%" height="100%" labelField="name"/>
</mx:Application>[/code]
얘도 Security.allowDomain("*")로 해야함-_-
소스는 간단합니다. 애플리케이션 로딩이 완료되면 일촌목록을 요청하는 request함수를 호출하고, 호출이 완료된 response함수에서 해당 플래시에 responseData를 호출해 데이터를 받으면 됩니다.
강현구녀석.....여전히 일등이군-_-

사실 어떤 블로그를 보고 구글에서 세미나 한다고 해서 가보고 싶어서 신청했는데, 되서 가게 되었는데....난....App Engine이 뭔지도 모르고....OpenSocial은 또 뭐고.....-_-; 아무것도 모르는 상태에 가서 세미나를 들었습니다. 역시나......뭔소린지 하나도 모르고 그냥 돌아왔습니다 ㅠ

우선 처음에 가니....구글코리아가 여기 강남에 있었군요-_-; 참 색다른 경험이였습니다-_-; 알록달록한 것이 참 이쁘네요. 암튼, 시간이 좀 늦어져서 좀 늦게 20분 후에 시작했던 것 같네요.

Making Money with OpenSocial

간단하게 오픈소셜로 수익을 얻을 수 있는 것을 발표했습니다. 그 첫번째로 광고구요. 광고는 인터넷에서 필수적인 수익모델이죠^^ Buddy Poke라는 것이 가장 유명한 것 같은데, 지금 방금 실행해보니....대체 뭐하는 건지 모르겠습니다-_-; 전 친구가 하나도 없어서 그런가요?-_-; 그냥 어떤 놈이 나와서 저한테 손만 흔드는군요-_-; 왠지 플렉스로 만든 것 같습니다. 플렉스 컴포넌트들이 막 보이네요.
http://www.buddypoke.com/

두번째로는 Virtual Currency네요. 이건 국내에서 게임 업체나 커뮤니티업체들이 많이 하는 모델이죠. 아바타 사려면 돈을 결제해야하는 그런...cyworld에 도토리 보내 달라고 하는 복혜은이 생각나네요(친구입니다-_-).

세번째는 offers인데요. 어떤 요구사항을 들어주고, 돈이나 Point를 받는거죠. 이것도 국내에서 많이 하는..-_-; OK CashBag모을 때나 던전앤파이터를 하는데, 캐쉬가 모자라서 창고를 못살 때 쓰는 좋은 방법이죠-_-; 아래는 Mobsters라는 건데, 게임인 듯 한데, 뭔가 복잡하군요. 이곳에서 쓰이는 돈을 받기위해서 어딘가 회원가입을 해서 Cash를 모아야하나 봅니다-_-;
http://profile.myspace.com/Modules/Applications/Pages/Canvas.aspx?appId=104283

네번째는 Brand Marketing이라고 하는데, 뭘 말하는건지 모르겠네요.

위에 사례를 들어보니...오픈소셜 애플리케이션을 만들고 싶군요. 마이스페이스같은 SNS서비스에 APP를 만드는 것인 것 같습니다. 한번 알아봐야하겠습니다(뒷조사를..-_-)


Google App Engine

아....외국인입니다...뭔말하는지 못알아 듣겠군요. 다행히 통역해주시는 분이 계셨습니다만, 몇마디는 생까고 해주신 것오늘 가장 큰 깨달음은 영어공부를 해야한다였습니다-_-; 영어공부를 해야합니다...ㅠ
오늘 대충 얘기를 들어보니 App Engine은 구글에서 서버사이드환경을 제공하며 구글이 제공하는 Framework를 이용해서 손쉽게 웹애플리케이션을 구축할 수 있는 것 같습니다. 즉, 웹애플리케이션을 구동시키기 위한 서버 환경셋팅과정은 생까고, 구글에서 제공하는 서버환경 및 Database를 사용할 수 있는 것입니다. 뭐 단점이라면 지원언어가 Python밖에 없는 합니다. 아직 사용해보지는 않았지만, 이걸 사용한다면 서버 비용 절감 및 개발 시간 단축정도가 되겠네요. 게다가 구글인증을 사용해서 구글서비스와 손쉽게 연동이 되는 듯 하네요.

우선 처음에 얘기해준게 역시나 이거였습니다. 웹 애플리케이션 개발 시 문제점! 서버셋팅이죠. 서버머신도 있어야하고, 그곳에 여러 제품(Linux, Database 등)의 셋팅 등의 어려움이 있는데, App Engine에서는 이 모든 것을 하나에 담아서 제공합니다(아놔.....오늘부터 파이썬 파야하나....-_-)

또한 장점으로 쉽게 시작할 수 있고(파이썬 아닌사람이나-_-), 쉽게 변경이 가능하다고 하네요. 또한 구글과 같은 Infra를 사용해서인지 구글규모의 대규모 서비스도 가능하다고 하네요. 아...BigTable설명하면서 Database관련된 것을 보여줬는데, GQL(당연히 Google Query Language겠지-_-)라는 것을 이용해서 쿼리를 날립니다. SQL과 비슷한 문법으로....마치 HQL과 같은 형태로 App Engine에 맞게 최적화시킨 듯 합니다.

데모를 보여줬는데, 간단한 Hello World찍는 건데, 있다가 한번해봐야겠습니다. 설정할 수 있는 파일인 yaml(야믈이라고 읽더군요-_-)을 이용해서 뭐 하는 것 같은데...암튼, 방명록같은 것도 손쉽게 만들 수 있는 것 같습니다. 게다가 셋팅이 필요없는 개발환경을 제공하는 점이 너무 좋은 것 같네요. Java로 방명록 만드려면, 톰캣깔고, MySQL깔고, 뭐 그래야하는데, 이건 뭐 그런게 필요없는 듯 합니다. 좋아요~


App Engine + OpenSocial

뭐 두개를 이용해서 애플리케이션을 만들 수 있는 것 같은데, 둘 다 전혀 모르는 거라...그냥 멍하니 보다가 왔습니다.

아....보니까 OpenSocial애플리케이션 만드는 법이 Google에 Gadget(외국인들은 개짓이라고 발음합니다. 개짓하고있네-_-)만드는 거랑 같은 코드인 것 같네요. Module들어가고...전에 다음위젯뱅크 좀 보다가 본 건데, Javascript로 개발하는 듯 합니다. 지금 0.8버전까지 나왔는데, 지금은 기존처럼 Javascript형태로 개발이 가능한데, 나중에 템플릿기반의 개발이 가능한 듯 합니다. HTML태그를 입력하는 형태로 개발을 할 수 있는 듯 합니다. 마치 Flex에서 xml로 코딩할 수 있는 것 처럼이랑 비슷한 것 같습니다. 차후버전인 0.9에서 지원한다고 하네요.

아무것도 모르는 상태에서 글을 쓰려니 저도 뭔소리 한지도 모르겠네요. 그냥 들은 거랑 제 생각을 좀 포함해서 쓴겁니다. 잘못된 내용이 있을 수도 있습니다. 돌은 던지지 마시구요-_-;

제가 좋아하는 공책과 펜이군요. 공책과 펜을 너무 좋아합니다ㅠㅠ