Energe Management System(EMS) Graph Mashup

Energe Management System(EMS) Graph Mashup

Energe Management System(EMS) 에서 사용할 수 있는 포틀릿(날씨가젯, 그래프가젯, 구글가젯)을 기준으로 화면을 구성하고 각 포틀릿 간의 파이프 라인 연동 시에 트랜스 포머를 이용하여 데이터를 변환한 후 전달하는 형식으로 비쥬얼 매시업을 구현한다.
포틀릿은 그 내부에 Shindig Container를 포함하고 이 Container는 OpenSocial을 포함한다. 그곳에서 발생한 이벤트는 Shindig의 Hub를 통해 OpenAjaxHub에 전달되고 그것을 통해 포틀릿간 통신이 이루어 진다.

1. 서론

uEngine의 웹 포탈 화면에서 각 포틀릿들은 WSRP의 규약에 따라 사용자가 임의로 정의하고 배치할 수 있다. 이렇게 배치된 포틀릿들은 각각이 독립된 영역으로 동작하기 때문에 서로의 연관관계를 설정하기 위해서는 매시업 기술을 이용한 연결이 필요하다. 이에 앞서 uEngine에서는 비쥬얼적인 방법의 통합을 언급하고 실현했다. 그러나 각 포틀릿 상의 Contents가 동작하는 것에 있어서 단순한 연결로는 모든 문제를 해결하지 못한다. 이에 각 Contents가 입력받고 출력할 수 있는 각 지점을 OpenSocial의 XML을 파싱하여 분석해 내고 그것을 연결함으로 이 문제를 해결하려 한다. 또한, 파이프 라이닝이 되는 연결 선상에서 각 데이터의 변화를 관리할 트랜스포머 계층도 이번 연구에 포함된다. 이러한 관리를 위해서 각 설정 값들을 관리할 표준이 요구되고, 그 표준을 OpenSocial의 XML 표준을 조금 변형시킨 uEngine의 표준을 적용할 것을 제안한다.

2. 관련연구

매시업(Mash-up)이란 인터넷상에서 제공되고 있는 다양한 서로 다른 서비스와 기능을 조합하고 응용하여 새로운 차원의 컨텐츠나 서비스를 만들어 내는 것, 그런 서비스를 제공하는 웹 사이트 또는 어플리케이션을 의미한다. 이런 매시업의 종류는 크게 3가지로 분류할 수 있다. 첫 번째는 연관된 데이터를 통합하고 관리하는 데이터 매시업이 있고, 두 번째는 SOA 등과 같이 서비스 시점에 대해 서고의 연관성을 맺어 주는 서비스 매시업이 있다. 마지막 세 번째는 그림1과 그림2와 같이 uEngine이 제시한 형태의 표현과 같은 비쥬얼 적인 상태에서 서로의 통합이나 연계를 만들 수 있는 비쥬얼 매시업이 있다.

그림1 매시업 GUI 환경

그림2 매시업 결과 실행 화면

어떤 종류의 매시업을 사용하든 관계는 없겠지만 모든 서비스나 기능의 조합에 있어서 가장 중요한 것은 데이터의 전달과 변환이다. 실제 임의의 동적으로 변하는 임의의 데이터를 전달하고 관리하는 방법은 상당히 어렵고 힘들다. 그러나 동적인 컨텐츠를 구성하고 연계하기 위해서는 이 문제를 해결해야 한다. 이미 OpenSocial이나 OpenAjax Aliance에서는 이와 유사한 문제를 해결하기 위해 Hub라는 기술을 이용하여 Cross 도메인 서로간의 통신을 가능하게 만들었고, Portal Engine인 Liferay 도 WSRP에 준수한 포틀릿들 같의 서비스 매시업의 일종을 구현해 두었다. 그러나 이 모든 부분들은 각기 하나의 형식에 있어서만의 연동만 있을 뿐 uEngine이 제시하는 전체적이고 포괄적인 형태의 비쥬얼 매시업과 트랜스 포머를 구현해 두지는 않았다. 본 연구는 웹 위젯 오픈서비스들의 규격인 OpenSocial 을 지원하여 OpenSocial.org에서 제공되는 거대한 어플리케이션들을 활용할 수 있으면서도 위젯들 간의 데이터 매시업을 지원하는 통합 매시업 환경과 매시업 시의 데이터 트랜스 포메이션과 구현을 목적으로 한다.

3. 접근방법

기본적인 매시업의 구성 형태는 uEngine의 Liferay 형 포탈 상에서 시작한다. 포탈 메인에서 각 포틀릿들은 managedHub의 연결 객체를 매개로 하여 생성되고 각 포틀릿들은 그 내부에 OpenSocial 규약에 의거하여 gadget을 xml 형태로 포함한다.

그림3 uEngine 포탈에서의 위젯 호출

그림4 OpenAjaxHub Component Model

그림5 Shindig를 이용한 OpenSocial

포함하는 Container로는 Shindig가 사용되고 Shindig와 OpenSocial 간의 통신은 Shindig가 구현하고 있는 Hub 객체를 이용한다. 그림 3은 uEngine 포탈과 그 상에 구현되어 있는 각 위젯들 간의 연결 모습을 보여 준다. 또한 그림 4와 그림 5는 각각 OpenAjaxHub의 Component 모델과 Shindig의 포함 관계를 보여 준다. 여기서 데이터의 매시업 관계를 설정하기 위한 outlet에 관한 정보가 필요한데 그 부분은 OpenSocial을 기반으로 XML을 호출하여 형상을 출력하는 Shindig에서 해답을 찾을 수 있다. Shindig가 호출하는 XML에는 "UserPref"라는 태그가 존재하는데 이 태그는 해당 위젯이 동작하는데 필요한 초기 매개변수의 역할을 하고 있다. 한가지 부족한 점은 이 태그가 외부로 빠져나가는 데이터의 표시 역할을 하지 않는다는 것인데 그것을 uEngine에서는 변형하여 다음과 같은 코드 형태를 구성한다.

[XML Code Redefine]
<Module>
 <UserPref name="..."... direction="in/out" desc="..."/>
 <Content>
  <![CDATA[ html & javascript source ]]>
 </Content>
</Module>

이렇게 구성된 XML을 호출하여 화면 UI를 구성하게 되면 PipeLine을 할 때 "UserPref"의 값을 읽어 자동으로 연결 지점을 생성하게 되고 그것을 이어서 하나의 파이프라인으로 동작하게 만든다. 그림 6은 이렇게 추출된 지점의 정보를 표시하는 부분을 실행한 것이다.

그림6 uEngine의 파이프 라이닝 실제

추출되는 지점들은 in 지점과 out 지점으로 구분되는데 XML에서 direction이 지정되어 있지 않거나 in으로 지정되어 있는 부분은 파란색 진입점으로 표시되고 out으로 지정되어 있는 부분은 붉은색의 출구점으로 표시된다. 각 연결 지점을 통해 데이터가 이동하게 되고 각 연결 지점에서는 파이프 라이닝의 관리와 트랜스 포머가 가능하다. 그림 7은 각 지점에서의 파이프 라이닝 관리와 트랜스 포머가 가능한 관리창을 표시한 것인데 이는 파이프라이닝이 발생한 위치를 클릭함으로 나타낼 수 있다.

그림7 파이프라인 관리와 트랜스 포머 실제

이렇게 연결되고 트랜스 포메인션된 상태에서 한 영역의 이벤트를 발생 시키게 되면 연결되어 있는 모든 부분에 영향을 주어 각 포틀릿이 동작하게 된다. 그림 8은 날씨 위젯에서 도시의 정보를 바꾸면 그 도시의 일사량과 도시명을 그래프 위젯으로 전달하고 그렇게 전달된 정보를 다시 구글맵 위젯으로 전달하여 해당 지역의 일사량 정보나 Co2 발생 정보를 지도상에 표시할 수 있도록 만들어 둔 것이다.

그림8 파이프라이닝과 트랜스 포메이션된 화면의 실행 결과를 표시

연결된 각각의 트랜스 포머는 기 존재하는 uEngine의 트랜스 포머 로직을 따라 작성되고 웹에서 실제 동작하는 엔진은 AJAX의 호출에 따라 실시간으로 통신하게 된다.

4. 결론 및 향후계획

본 연구에서는 기존에 제시된 uEngine의 비쥬얼 매시업을 더욱 진화 시켜 각 포틀릿에서 표시하는 위젯이나 가젯의 outlet을 표준화 시켜 데이터를 연동시켜 동작하는 것에 영향을 줄 수 있는 요소들을 제시하고 있다. 이것을 이용하여 연동되는 데이터는 트랜스 포머라는 중간 계층에 의해 변환되고 전달되므로 사용자는 각 위젯이나 가젯이 전달하는 데이터가 정적이지 않은 상태에서도 서로를 유기적으로 결합할 수 있게 된다. 아직 완벽한 표준이라고 얘기 할 수 없지만 향후 이 부분에 대한 표준을 XML의 스키마로 작성하여 배포하고 OpenSocial을 지향하는 모든 Application에 대해 이와같은 규약을 따르도록 제시한다면 많은 웹을 비쥬얼 적인 환경에서 완벽하게 호환되는 형태로 매시업을 진행할 수 있을 것이다.

참고문헌

[1] Frederik D. K., et al. SMash: Secure Component Model for Cross-Domain
Mashups on Unmodified Browsers. available online at http://domino.research.ibm.com/comm/research_projects.nsf/pages/web_2.0_security.smash.html/$FILE/fp332-dekeukelaere.long.pdf
[2] Yahoo Corp. Pipes Service.
http://pipes.yahoo.com
[3] Open Mashup Alliance. Enterprise Mashup Markup Language Specification. available online at http://www.openmashup.org/omadocs/v1.0/index.html
[4] Microsoft Popfly.
http://en.wikipedia.org/wiki/Microsoft_Popfly
[5] OpenSocial Foundation.
http://www.opensocial.org
[6] Apache Shindig. http://shindig.apache.org
[7] OpenAjax Alliance. 
http://www.openajax.org/index.php
[8] XStream. http://xstream.codehaus.org
[9] Liferay Inc. Liferay Portlet Engine.
http://www.liferay.com



원본출처 : http://www.uengine.org:8088/wiki/index.php/진화된_비쥬얼_매시업과_트랜스_포머_논문

<EMS Mashup Graph 보기_동영상>