Yahoo Pipes 와 Flex 활용방안 정말 화면이 이쁘네요.

야후파이프라는 API 가 나온지는 (2007년 2월7일 발표) 꽤 된 거 같은 데 저는 이제서야 이것을 알았네요. 그것도 일년이 지난 이번달 2008년 3월 마소잡지를 보고서 ㅜㅜ

야후파이프에서 대한 자세한 정보는 아래의 링크를 통해서 …….

http://www.zdnet.co.kr/news/enterprise/dev/0,39031103,39155348,00.htm

[그림1 : 야후 파이프 메인화면]

일단 야후파이프의 웹주소는, http://pipes.yahoo.com/pipes/ 입니다.

(호기심발동 일단 주소를 눌러보니 센스 발휘하시는 분은 Good~)

야후에 이미 가입되어 있으신분은 로그인 하시고 저와 같이 작업하시면 되겠습니다.

 

야후파이프의 작동사양은, à 익스플로러 7.0 이상 , 파이어폭스 최신 버전

참고) 익스플로러 6.0 sp2 버전은 정상작동 안됩니다.

가급적이면 파이어폭스를 통해 작업하시는 것이 정신건강에 좋습니다.

[그림2 : 파이프 생성]

상단의 메뉴중 [Create a pipe] 를 꾹 눌러줍니다. ~ 기대하시라 개봉박두

그러면 갑자기 황당하게 모눈종이에 커다랗게 [여기에다 모듈을 끌어요!~] 라는 글자만 덩그러니 보입니다.

(아~ 처음 접속하신 분은 간단한 동영상 강좌가 나오긴 합니다. )

아직까지 많이 익히지 않았지만 본 강좌를 꾸밀 정도로 구성해 보기로 했습니다.

 

옆에 메뉴트리중 [URL Builder] 모듈 모눈종이 끌어당긴다. 그러면 자동으로 모듈이 생성되고 [Pipe Output] 라는 모듈로 같이 생긴다. 이것이 나중에 최종적인 output 이 되는 것이다.

URL Builder 항목중에서 Base 는 우리가 데이터를 얻어 올 경로가 써 주면 된다.

 

구글  news 홈페이지를 보면 좌측 옆쪽에 RSS 가 있다, 이것을 누르면 우리가 바라는 경로를 알 수 있다. 그 경로를 Base 에 기술하고

? 뒤에 나오는 것은 모두 인자값으로

Query Parameters 가 되는 것이다.

Query Parameters 옆에 있는 + 버튼을 누르면서 하나씩 정확히 입력하면 된다.

자세한 것은 생략 ( 너무 서운해 생각마세요. 아래까지 읽어가시면 경로와 기타 사항 자세히 알 수 있습니다. 헤헤 ~~~ )

* 모듈을 하나씩 설명하자면,

Fetch Feed  : URL 에서 넘어온 값들을 패치하는 거

Sort         : 아이템의 발행일로 정렬

Unique       : 중복 데이터 제거

Truncate     : 건수 40 개만 출력되고 나머진 삭제

다 작성되면 [Save] 를 누르면 저장되고 ,

[Run Pipe] 를 누르면 실행화면으로 이동하게 된다.

그럼 결과화면을 봐야 겠죠 ^^ (안봐도 되~나????)

 

정말 멋지지 않나요? 이미 알고 계신분은 패스~~

전 첨 봤을 때 정말 깜짝 놀랬습니다.~

<?xml:namespace prefix = o /><?xml:namespace prefix = o /> 

이 화면에 나온 결과를 FLEX 로 받을 수 없을까 고민하다 알아내게 되었지요..

그럼 이제서야 플렉스로 들어가네요. 우선 소스부터 공개 개봉박두!!!!!

<?xml version="1.0" encoding="utf-8"?> <mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml"     fontSize="11"   backgroundColor="#FFFFFF"     layout="absolute"> <mx:Style>              List {                               rollOverColor: #e4c3ec;                               selectionColor: #70aceb; } </mx:Style>          <mx:Script>            <![CDATA[                import mx.controls.Alert;                          import mx.rpc.events.ResultEvent;                                                   public function getPipe():void                          {                                       currentState = "searching";                                       pipesService.send();                          }                                                   public function pipeRetrieved(event:ResultEvent):void                          {                                       currentState='resultsRetrieved'                              }            ]]>     </mx:Script>         <mx:states>         <mx:State name="resultsRetrieved">             <mx:AddChild position="lastChild">                          <!-- We're expecting RSS, so we bind to channel.item, essentially an XMLList.  -->                 <mx:List                                                 dataProvider="{pipesService.lastResult.channel.item}"                                                 left="10"                                                 right="267"                                                 top="64"                                                 bottom="10">                                                 <mx:itemRenderer>                                                     <mx:Component>                                                         <mx:HBox                                                            width="100%"                                                             height="100%"                                                             toolTip="{data.link}"                                                             mouseOver="linkButton.visible = true;"                                                             mouseOut="linkButton.visible = false;">                                                                                                                        <mx:LinkButton id="linkButton"                                                                 visible="false"                                                                 icon="@Embed('assets/89.jpg')"                                                                 click="navigateToURL(new URLRequest(data.link))"/>                                                        <!--     <mx:Label                                                                       width="100%"                                                                       height="100%"                                                                 htmlText="{data.title}"                                                                 doubleClickEnabled="true"                                                                 doubleClick="navigateToURL(new URLRequest(data.link))"/> -->                                                                                                                             <mx:TextArea editable="false"  doubleClick="navigateToURL(new URLRequest(data.link))"                                                                        height="175" width="100%" htmlText="{data.description}"/>                                                                                                                           </mx:HBox>                                                     </mx:Component>                                                 </mx:itemRenderer>                                              </mx:List>             </mx:AddChild>                     </mx:State>         <mx:State name="searching">             <mx:AddChild position="lastChild">                 <mx:Image                    horizontalCenter="0"                    verticalCenter="0"                    source="assets/cog.swf"                    alpha="0.6"/>             </mx:AddChild>                         <mx:SetProperty                      target="{searchButton}"                      name="enabled"                      value="false"/>         </mx:State>     </mx:states>         <mx:HBox width="100%">            <mx:Label                         text="Yahoo Pipes &amp; Flex Example"                         fontWeight="bold"                         top="10"                         left="10"/>                                          <mx:Button id="searchButton"                         label="Go"                         right="581"                         top="8"                         click="getPipe()"/>     </mx:HBox>             <!--                *  야후 파이프 와 연결 resultFormat="e4x" 옵션을 통해 Xml 형태로 리턴     -->     <mx:HTTPService id="pipesService"         resultFormat="e4x"         url="http://pipes.yahooapis.com/pipes/pipe.run?_id=913b824fb44716e3425c3551c5e5b7fd&amp;_render=rss"         result="pipeRetrieved(event)"/>   </mx:Application>

 

여기서 가장 중요한 부분인

<mx:HTTPService id="pipesService"

        resultFormat="e4x"

        url="http://pipes.yahooapis.com/pipes/pipe.run?_id=913b824fb44716e3425c3551c5e5b7fd&amp;_render=rss"

        result="pipeRetrieved(event)"/>

 

이것을 보면 경로뒤에 _id= 보입니다. 이것이 방금 생성한 파이프의 아이디 인데. 본인이 만드신 것을 여기서 붙여넣기 하시면 됩니다. 다른 것은 건드리지 마시고요….

 

[실행결과]

플렉스 소스에 대한 자세한 설명은

갠적으로 쪽지로 보내주시거나 제 블로그에 댓글로 물어봐 주세요~

(고수님들 앞에서 어찌 감히…)

 

지금까지, 야후파이프와 플렉스와 합동작전을 해 보았습니다.

야후파이프를 통한다면 여러사이트에 흩어져 있는 RSS 중에 자기가 원하는 정보를 가져올 수 있고

이것을 이용하면 보안샌드박스문제를 교묘히 피할 수 있을 거 같네요. ^^

 

이상 허접한 글을 올립니다.

 

URL

BASE       :   http://news.google.com/news

output       :   rss

ie           :   UTF-8

hi           :   ko

예제의 쓰인 야후파이프

http://pipes.yahoo.com/pipes/pipe.info?_id=913b824fb44716e3425c3551c5e5b7fd