Google Charts, Ajax, Project Zero 및 WebSphere sMash를 사용한 멋진 매시업 작성

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 샘플 코드 영어원문  제안 및 의견 피드백

난이도 : 초급

Dan Jemiolo, Advisory Software Engineer, IBM

원문 게재일 : 2008 년 3 월 25 일
번역 게재일 : 2008 년 10 월 13 일

Google Charts는 개발자가 단순한 HTTP GET 요청을 사용하여 차트와 그래프를 생성할 수 있는 멋진 서비스입니다. 이 서비스의 모든 기능은 HTTP를 통해 사용할 수 있기 때문에 이 서비스를 Project Zero로 제작된 웹 애플리케이션에 쉽게 통합할 수 있습니다. 이 기사에서는 Groovy 스크립트를 사용하여 성가신 HTTP URL을 생성하지 않고도 Google Charts를 사용하는 방법을 살펴봅니다. 사용자가 차트와 그래프를 시각적으로 만들 수 있도록 해주는 유용한 웹 인터페이스를 작성합니다. Project Zero 플랫폼을 사용하여 매시업 애플리케이션을 작성하는 것이 얼마나 쉬운지 보여주는 샘플 프로젝트를 시도합니다.

편집자 주: IBM® WebSphere® sMash 및 IBM WebSphere sMash Developer Edition은 명성이 높은 Project Zero 인큐베이터 프로젝트를 기반으로 하고 있다. Project Zero는 WebSphere sMash 개발 커뮤니티이며 개발자에게 최신 빌드와 최신 기능, 커뮤니티 지원과 함께 애플리케이션을 개발하는 데 필요한 무료 플랫폼을 계속해서 제공한다.

시작하기 전에

이 기사에서는 Project Zero M4를 다운로드하였고 이것을 사용하여 하나 이상의 애플리케이션을 작성하였다고 가정한다. Groovy 스크립팅, Ajax 기술 및 HTML을 기본적으로 이해하고 있어야 하며 이 모든 사항은 Zero의 튜토리얼과 샘플에 설명되어 있다. Project Zero와 관련 기술에 대한 소개 자료 링크는 참고자료 섹션을 확인한다.

Project Zero 커뮤니티 Project Zero 웹 사이트를 둘러보고 Project Zero에서 현대적 웹 애플리케이션에 필요한 강력하지만 지극히 단순한 개발 및 실행 플랫폼을 어떻게 제공하는지 확인해 보라. 활동적인 커뮤니티에서는 프로젝트 개발을 논의하고 개발자에게 도움을 주며 사용자의 의견을 필요로 한다.

소개: Google Charts API

Google Charts는 개발자가 단순한 HTTP GET 요청을 사용하여 차트와 그래프를 생성할 수 있는 멋진 서비스이다. 클라이언트에서는 원하는 차트 유형을 표시하는 하나 이상의 쿼리 매개변수와 함께 요청을 http://chart.apis.google.com/chart에 전송하며 이러한 쿼리 매개변수의 완전한 목록은 Google Charts API 문서(참고자료 확인)에서 확인할 수 있다. 현재 이 API에서는 차트 제목, 레이아웃, 색상, 축, 데이터 및 범례와 같은 다양한 속성을 제어할 수 있다. 그림 1은 작동 중인 간단한 API 예이다.

이 이미지를 오른쪽 마우스 단추로 누른 후 등록 정보를 누르면 이 차트를 생성하기 위해 사용된 URL을 확인할 수 있다. 쿼리 문자열 매개변수의 특정 역할은 후속 섹션에서 살펴본다. 이 과정에서 알 수 있는 중요한 사실은 쿼리 매개변수 이름은 평범하며 이 이름을 하나의 URL에 모두 결합하게 되면 결과적으로 길고 불편해진다는 점이다. 다음 섹션에서는 이러한 복잡한 URL을 Project Zero에서 실행하는 일부 Groovy 코드를 사용하여 캡슐화할 것이다.

개선된 RESTful 차트 API 작성하기

주소 표시줄만을 사용하여 브라우저에서 차트를 작성할 수 있으면 좋지만 소개에서 언급한 바와 같이 그렇게 하면 실제로 매우 지루한 작업이 될 수 있다. 주소 표시줄에서 차트를 작성할 수 있다는 점은 비개발자 관점에서 보면 매우 유용해 보이지만 단순한 예제를 벗어나면 URL이 너무 길어진다. 더 나은 디자인 방법은 개발자의 경우 HTTP POST와 JSON을 사용하여 차트 작성을 표시하고 비개발자의 경우 그 위에 그래픽 인터페이스를 제공하는 것이다. 이렇게 하면 개발자나 비개발자가 차트 레이아웃이나 데이터의 문제점을 디버그하기가 수월해진다. Groovy 스크립트로 차트 URL 작성을 캡슐화한 후 Ajax 기반 웹 인터페이스에서 HTTP를 통해 이 스크립트를 호출하도록 하여 Project Zero와 함께 이러한 방식을 구현할 수 있다.

샘플 프로젝트 작성

작업한 내용을 보여주기 위하여 두 개의 프로젝트를 작성하는데 하나는 Groovy 랩퍼 코드를 유지하기 위한 것이고 다른 하나는 샘플 Ajax UI를 유지하기 위한 것이다. Groovy 코드와 Ajax 코드를 각각 유지하려면 zero.charts와 chart.maker라는 이름으로 두 개의 Zero 애플리케이션을 작성해야 한다. 두 프로젝트는 다른 애플리케이션에서 Groovy 코드를 쉽게 재사용할 수 있도록 별도로 유지된다. zero.charts 애플리케이션에서 작업을 시작한다.

Groovy에서 차트 URL 생성하기

Groovy를 사용하여 차트 생성을 단순화하려면 먼저 차트 세부사항을 지정하기 위해 사용하는 데이터 구조를 정의한다. Google Charts에서 사용한 원래의 매개변수 이름 대신 JSON을 사용하여 더 자세한 데이터 구조를 정의하는데, JSON을 사용하면 일반 데이터 유형(예를 들면 쉼표로 분리된 직렬화된 정수를 사용하는 문자열이 아닌 실제 정수 배열)에 의존하며 차트 생성 프로그램에 어떤 값이 전달되는 중인지 더 쉽게 알 수 있다. Listing 1에는 Ajax 클라이언트와 Groovy 스크립트 간의 통신에 사용할 데이터 구조가 표시되어 있다.

                
    
    {
        title: "Sales for 1H 2008",
        type: "bvg",
        height: 300,
        width: 300,
        data: [34, 21, 28, 19, 48, 40],
        xaxis: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        yaxis: [0, 40]
    }
      

Listing 1에 표시된 JSON 오브젝트는 FireBug나 간단한 JavaScript 경보 같은 도구를 사용하여 개발 과정에서 검사할 수 있다. 이렇게 하면 http://chart.apis.google.com/chart?cht=bvg&chs=500x600&chtt=Sales%20for%201Q%202008&chd=t:134,219,188&chxt=x,y&chxl=0:|Jan|Feb|Mar|1:||300과 같은 긴 문자열보다 디버그하거나 유효성을 확인하기가 더 쉽다.

물론 결국에는 여전히 이러한 URL을 Google의 서버로 전송하여 원하는 차트를 얻어야 한다. 그렇게 하기 위하여 JSON 오브젝트의 해당 필드 값을 차트 URL로 복사하는 간단한 Groovy 메소드를 쓴다. Groovy의 GString 유형을 사용하면 java.lang.StringBuilder를 작성하거나 하나씩 값을 추가하지 않고도 URL 문자열을 한 라인에 만들 수 있다. 이 Groovy 메소드의 코드는 Listing 2에 표시되어 있다.

                
      
    def create(chart)
    {
        return "http://chart.apis.google.com/chart?chxt=x,y" + 
               "&cht=${chart.type}&chs=${chart.width}x${chart.height}" + 
               "&chtt=${chart.title}&chd=t:${chart.data.join(',')}" + 
               "&chxl=0:|${chart.xaxis.join('|')}|1:|${chart.yaxis.join('|')}";
    }      
      

대부분 Listing 2의 코드는 JSON 오브젝트에서 값을 직접 가져와서 $ 구문을 사용하여 URL에 삽입한다. 그러나 JSON 필드가 배열인 경우에는 그렇지 않으며 이러한 경우에는 해당 값을 하나의 문자열로 병합해야 한다. join() 메소드를 사용하면 이 작업을 손쉽게 할 수 있다.

Listing 2의 코드를 /zero.charts/app/scripts/charts.groovy로 복사해야 한다. 이 코드를 /app/scripts 디렉토리에 저장하면 애플리케이션에 있는 다른 모든 Groovy 스크립트와 애플리케이션의 종속성 목록에 zero.charts가 있는 모든 애플리케이션에서 이 코드를 이용할 수 있다. 코드를 쉽게 재사용할 수 있도록 하기 위하여 마지막으로 해야할 작업은 코드에 Groovy를 바인딩하는 것이며 이렇게 하면 개발자가 Zero의 더 일반적인 invokeMethod()를 사용하지 않고도 해당 코드에서 직접 create() 메소드를 호출할 수 있다. Groovy 바인딩을 추가하려면 Listing 3의 Java™ 클래스 정의를 /zero.charts/java 디렉토리에 복사한다. 굵은체로 된 라인은 이러한 바인딩을 제공하지 않았을 경우에 개발자가 입력해야 한다.

                

    package zero.charts;

    import java.io.FileNotFoundException;
    import java.util.Map;

    import org.codehaus.groovy.runtime.MethodClosure;

    import zero.core.groovysupport.bindings.InvokeBindings;

    public class ChartsBindings extends InvokeBindings
    {
        public void addVariables(Map<String, Object> variables)
        {
            super.addVariables(variables);
            variables.put("create", new MethodClosure(this, "create"));
        }
        
        public Object create(Map<String, Object> chart) 
            throws FileNotFoundException, NoSuchMethodException
        {
            return invokeMethod("charts.groovy", "create", new Object[]{ chart });
        }
    }
      

다음으로 넘어가기 전에 Listing 3에서 create()로 전달 중인 매개변수 유형이 java.util.Map이라는 점을 유의한다. Zero에서 JSON 오브젝트와 Map은 동일하다. Zero의 모든 I/O API는 해당하는 경우 Map을 JSON에서(으로) 직렬화하는 방법을 인식하며 따라서 단지 JSON 오브젝트를 조작하기 위해서 특정 API를 학습할 필요가 없다.

Listing 3의 Java 클래스가 설정되는 즉시 이것을 구성 파일에 등록하여 Zero에서 인식할 수 있도록 하면 된다. Listing 4에는 Groovy 바인딩이 동작하는지 그리고 create()에 대한 호출이 제대로 해결되는지 확인하기 위하여 /zero.charts/config/zero.config에 추가되어야 하는 텍스트가 있다.

                
    
    /config/bindings/.groovy += ["zero.charts.ChartsBindings"]
      

HTTP POST를 통한 요청 차트

URL 생성 코드를 설정했으므로 이제 RESTful API를 사용하여 이 코드를 표시하면 된다. 이렇게 하려면 charts라고 하는 RESTful 리소스 유형을 작성하거나 HTTP POST 메소드를 사용하여 JSON의 차트 스펙을 승인하고 차트 URL을 리턴하면 된다. 이러한 동작은 RESTful 애플리케이션에서 정상적으로 구현된 것과는 약간 다르다. 일반적으로 HTTP POST를 사용하면 요청 URI와 동일한 도메인에서 리소스를 작성하고 이 새로운 리소스 코드를 위하여 URI를 리턴하는 코드가 실행된다. 사용자가 Google 차트 서비스를 가리키는 URI를 생성하여 리소스를 "작성 중"이고 클라이언트에서 그 URI를 따르는 경우 클라이언트는 해당 차트를 얻게 된다. 따라서 실제로 해당 서비스에서 작성되고 리턴되는 것은 HTTP 응답의 Location 헤더에 있는 차트가 유일하다.

Listing 5에는 charts 리소스를 처리하기 위한 Groovy 코드가 있다. 유일한 HTTP 메소드는 POST이며 이 메소드는 onCreate() 메소드에서 구현된다. 이 코드를 /zero.charts/app/resources/charts.groovy 파일에 복사해야 한다.

                
    
    import zero.json.Json;
    
    /**
     *
     * @success 201 Returns the URI for the desired chart in the Location header.
     * @error 500 The chart definition in the request body was not valid JSON.
     * @format application/json
     *
     */
    def onCreate()
    {
    	def chart = Json.decode(request.input[]);
    	
    	def chartImageURL = create(chart);
    	
    	request.headers.out.Location = chartImageURL;
    	request.status = 201;
    }
      

사용자 인터페이스로 넘어가기 전에 잠시 RESTdoc 테스트 인터페이스를 사용하여 REST API를 테스트해 보자. zero.charts 애플리케이션(zero run)을 실행하고 웹 브라우저에서 http://localhost:8080/resources/docs/charts로 이동한다. charts 리소스에 하나의 메소드(POST)가 있고 이 메소드를 누르면 테스트 양식(그림 2 참조)이 표시된다. JSON 데이터를 Listing 1에서 요청 본문에 복사하고 Send를 누른다. 사용자가 보는 요청에는 Google Charts URI가 있는 Location 헤더가 포함되어야 한다.

REST API가 설정되었으므로 이제 애플리케이션에서 이 API를 사용할 준비가 되었다. 다음 섹션에서는 Ajax를 사용하여 비주얼 차트 빌더를 작성하는 방법을 살펴본다.

보다 유용한 인터페이스 디자인하기

REST API를 사용하면 개발자는 보다 쉽게 차트를 생성할 수 있지만 이 API는 코드를 작성하지는 않지만 가끔 문서나 프리젠테이션을 하기 위해 차트나 그래프를 작성하는 99%의 컴퓨터 사용자에게는 도움이 되지 않는다.이러한 사용자를 위해 HTML 양식과 작은 JavaScript 그리고 Ajax API 중 가장 단순한 XMLHttpRequest를 사용하여 간단한 웹 기반 차트 빌더를 만들 수 있다. 그림 3에는 최종 결과가 표시되어 있는데 왼쪽에는 차트 정보를 입력할 수 있는 필드가 있으며 오른쪽에는 생성된 차트가 표시되어 있다.

사용자 인터페이스를 시작하려면 먼저 chart.maker 애플리케이션과 zero.charts 애프리케이션 간의 의존성을 작성해야 한다. 이렇게 하려면 zero:zero.charts를 /chart.maker/config/ivy.xml에 추가한다. 다음 두 섹션에서는 인터페이스에 필요한 마크업과 코드 중에서 가장 중요한 부분을 살펴본다. 이 기사에 있는 샘플 프로젝트를 다운로드하여 chart.maker 프로젝트를 살펴보면 완전한 마크업과 코드를 확인할 수 있다.

사용자 입력을 API 입력으로 맵핑하기

그림 3에서 알 수 있듯이 사용자가 차트 스펙을 입력하는 데 필요한 양식은 매우 간단하다. 하나의 입력 값을 제외한 양식에 있는 모든 값을 필수 JSON 형식으로 쉽게 변환할 수 있다. 추가 단계가 필요한 입력은 차트 유형뿐이며 차트 유형은 두 세 개의 문자 약어를 사용하여 Google Charts API에서 표현된다. 양식에는 차트 유형(Line Graph, Bar Chart - Vertical 및 Bar Chart - Horizontal)에 대한 완전한 설명이 표시되어 있어서 HTML 드롭다운 메뉴에서 이러한 설명과 해당 약어(lc, bvg 및 bhg)를 서로 맵핑해야 한다. Listing 6에는 필요한 HTML 드롭다운 메뉴가 정의되어 있으며 차트 유형 코드가 굵은체로 표시되어 있다. 기타 모든 입력 양식은 간단한 텍스트 상자(<input type="text"/>)로 되어 있다.

                
      
    <select id="chartType">
      <option value="lc">Line Graph</option>
      <option value="bvg">Bar Graph - Vertical</option>
      <option value="bhg">Bar Graph - Horizontal</option>
    </select>   
      

드롭다운 메뉴 마크업 이외에도 이러한 방식에 익숙하지 않은 사용자를 위해 해당 메뉴에서 선택한 값을 검색할 수 있는 일부 코드가 제공된다. 단순한 텍스트 상자와 달리 제어의 value 등록 정보를 읽을 수 없기 때문에 현재 선택된 것을 찾을 때까지 드롭다운 메뉴의 옵션을 반복해서 선택해야 한다. Listing 7에는 이렇게 하는 데 필요한 코드가 표시되어 있다.

                
    
    function getSelection(elementName)
    {
        var select = document.getElementById(elementName);
        
        for (var i = 0; i < select.options.length; i++)
            if (select.options[i].selected)
                return select.options[i].value;
        
        return null;
    }
      

또 다른 중요한 UI 요소는 양식 맨 밑에 있는 Create It! 단추이다. 이 단추를 사용하여 양식을 제출하기 보다는 이 단추를 REST API에 Ajax 요청을 하는 JavaScript 함수에 링크한다. 이렇게 하려면 JavaScript 함수 호출을 단추의 onClick 이벤트에 추가하면 된다. Listing 8에는 다음 섹션에서 구현할 createChart() 함수에 링크된 단추 누르기가 표시되어 있다.

                
    
    <input type="button" value="Create It!" onClick="createChart();"/>
    

자세히 다루게 될 마지막 UI 요소는 생성된 차트를 보여주는 이미지이다. Listing 9에는 페이지가 로드되는 경우에 숨겨지는 HTML <img/> 태그를 쓰는 방법이 표시되어 있다. JavaScript를 사용하여 해당 태그의 소스를 생성된 차트의 URL에 설정한 후 이 태그를 보이게 한다.

                
    
    <img id="chartImage" style="display:none;" src=""/>
    

이 모든 마크업과 코드를 함께 확인하려면 chart.maker 샘플 프로젝트의 /public/index.html 파일을 살펴보아야 한다. 다음 섹션에서는 UI 요소를 조정하여 사용자의 입력을 반영하는 차트를 보여주는 Ajax 지향 JavaScript(또는 해당 파일에 포함된)를 다룬다.

Ajax를 사용하여 생성된 차트 표시하기

REST API와 상호작용하기 위해서는 양식의 모든 입력 값을 읽고 이 값을 JSON 오브젝트로 패키지하여 이 JSON 오브젝트를 HTTP POST 요청에 포함하여 charts 리소스에 전송하는 createCharts() 함수를 구현해야 한다. HTTP POST 요청이 완료되면 Location 응답 헤더에서 차트 URL을 읽고 차트 이미지의 소스를 설정하거나 초기화하게 된다. Listing 10에는 이를 수행하는 코드가 표시되어 있다.

                
    
    function getHttpClient()
    {
        var hasXHR = window.XMLHttpRequest;
    	return hasXHR ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    }

    function createChart()
    {
        // step 1
    	var chart = {
    		title: getValue("chartTitle"),
    		type: getSelection("chartType"),
    		height: getValue("chartHeight"),
    		width: getValue("chartWidth"),
    		data: getValues("chartData"),
    		xaxis: getValues("xaxis"),
    		yaxis: getValues("yaxis")
    	};
        
        // step 2
    	var http = getHttpClient();
    	http.open("POST", "/resources/charts", true);
    	
        // step 3
    	http.onreadystatechange = function() {
    		if (http.readyState != 4)
    			return;
    		
    		var chartImage = document.getElementById("chartImage");
    		chartImage.src = http.getResponseHeader("Location");
    		chartImage.style.display = "block";
    	}
    	
        // step 4
    	http.send(JSON.stringify(chart));
    }
    

이 코드를 단계별로 살펴보자.

createCharts()에서는 먼저 해당하는 이름-값 쌍을 사용하여 JSON 오브젝트를 작성한다. getValue(s) 메소드는 Listing 7의 getSelection() 메소드와 유사한 단순한 유틸리티이다. 여기서는 필드 이름이 /app/scripts/charts.groovy 파일에서 예상하는 이름과 일치하는지 그리고 그 값의 형식이 올바른지 확인해야 한다.

두 번째 단계에서는 XMLHttpRequest 오브젝트를 작성하고 /resources/charts에 HTTP POST 요청을 시작한다. getHttpClient() 메소드는 웹 브라우저에 맞는 올바른 클래스를 인스턴스화하는지 확인하는 조건들을 숨긴다.

세 번째 단계에서는 요청이 전송되고 응답이 수신된 후에 일어나는 사항을 정의한다. 이 경우에는 Location 헤더의 값을 가져오고 이 값을 사용하여 chartImage.src의 값을 설정한 후 chartImage 스타일을 변경하여 그것이 더 이상 사용자에게 숨겨지지 않도록 한다.

마지막 단계에서는 HTTP POST 요청을 전송한다. 여기에는 JSON 오브젝트를 HTTP POST 요청 본문에 삽입될 수 있는 문자열로 변환하는 과정도 해당된다. JSON을 문자열로 바꾸는 표준 API가 없기 때문에 http://json.org의 오픈 소스 라이브러리를 사용하였다. createChart() 마지막에 있는 JSON.stringify() API 호출은 json2.js 파일에서 정의되며 이 파일은 http://www.json.org/json2.js에서 얻을 수 있다. http://json.org에서 이 JavaScript 라이브러리를 다운로드하여 /chart.maker/public 디렉토리에 추가해야 한다. 라이브러리가 설정되면 createCharts()의 마지막 라인이 아무런 문제없이 실행된다.

결론

멋진 매시업 애플리케이션을 작성하는 방법을 살펴보았으며 이 과정에서 Zero 애플리케이션에서 더 쉽게 재사용할 수 있는 Google Charts API를 만들어 보았다. 샘플 Ajax 인터페이스에서는 비주얼 차트 빌더에서 가능한 기본 기능만을 다루었지만 서버 측 코드에서는 추가하고 싶은 기타 여러 가지 기능을 지원할 수 있다. RESTful API를 유익한 서비스와 데이터 앞에 삽입하는 경우 Zero에 Groovy 스크립팅을 통합하면 많은 시간을 절약할 수 있다는 사실을 다시 한번 증명했다.

위로

다운로드 하십시오

	다운로드 방식에 대한 정보

참고자료

• Google Charts API에 대해 알아야 할 사항을 배울 수 있다.
  
  
• Project Zero에 대한 개요는 다음을 참고하라. Get started with Project Zero and PHP"(developerWorks, 2008년 1월 갱신됨)를 살펴본다.
  
  
• developerWorks Ajax resource center에는 멋진 Ajax 애플리케이션 개발을 시작하는 데 필요한 도구와 코드, 정보가 있다.
  
  
• Web 2.0이 개발자 커뮤니티의 관심 영역이 되면서 나날이 증가하고 있는 리소스 컬렉션을 Web development zone에서 확인할 수 있다.
  
  
• PHP의 속도를 올려야 하나요? PHP area를 살펴보자.
  
  
• developerWorks Project Zero space에는 Project Zero를 이용하여 개발을 시작하는 데 필요한 리소스가 있다.
  
  
• 계속 성장하고 있는 developerWorks의 Project Zero 컨텐츠 라이브러리를 찾아볼 수 있다.

• Project Zero M4를 다운로드하여 이 기사에 있는 프로젝트를 다시 작성해 볼 수 있다.
  
  

• projectzero.org 토론 포럼에 참여해 보자.
  
  
• developerWorks 포럼 & 블로그를 통해 developerWorks 커뮤니티에 참여하자.
  
  

필자소개

		Dan Jemiolo는 노스캐롤라이나주 Research Triangle Park, IBM Project Zero 팀의 Advisory Software Engineer이다. 그는 현재 Zero 플랫폼과 그 서비스 카탈로그에 필요한 재사용 가능한 구성요소에 관해 연구하고 있다. 그는 이전에 Apache Muse 2.0을 디자인하고 개발했으며 OASIS Web 서비스 표준 본문 개발에 참여했다. Dan은 Rensselaer Polytechnic Institute에서 컴퓨터 과학 석사 학위를 받은 후 IBM에 왔다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us