Google FusionTables + Google Visualization API

Google FusionTables + Google Visualization API

이 포스트에 사용되는 원시데이터(퓨전테이블)는
NEW - Google Fusion Tables의 첫 화면 좌하단에 링크된 ''Astraptes fulgerator: demo data'을 사용하였다.

먼저, 'Astraptes fulgerator: demo data'의 컬럼구성을 살펴보면 아래와 같다.

SpreadSheet 'Deletion'를 새롭게 만들고, 예제로 사용할 만큼의 자료만 추려서 'Deletion'에 넣는다.

'My Drive' root에 SpreadSheet 'Deletion'가 생성되었고,

필요한 만큼의 자료도 들어왔다.

* SpreadSheet는
Google Visualization API에서 제공하는 Google Visualization API Query Language를 SpreadSheet함수 'QUERY'로 쉽고, 편안하게 해결코져...

** var MYobj={} 에 상수, 변수를 몽땅 쑤셔넣는 것은 그저 개인적인 습관.


SpreadSheet 'Deletion'에 추가적으로 Sheet 'Pivot'을 만든다.

Google Visualization API Query Language를 사용하듯 SpreadSheet함수 'QUERY'로 쉽고, 편안하게 필요한 자료를 쿼리한다.

심플한 몇 줄의 코드로....

더 이상 사용하지 않을 녀석들은 청소하고 간다.

여기까지 정리하면,
Fusion Tables REST API로 Fusion Tables을 만지작거렸고,
Apps Script의 SpreadsheetApp로 Spreadsheet를 쪼물거렸고,
SpreadSheet함수 'QUERY'로 쉽고, 편안하게 Google Visualization API에서 제공하는 Google Visualization API Query Language를 흉내냈다.
마지막으로, Apps Script의 DriveApp로 Spreadsheet도 확실히 삭제했다.

이제, 간단한 Web Apps를 만들어 보자.


Welcome screen의 좌하 'Web App' 선택.

서버측의 Content Service를 Templated HTML, 즉 Index.html로부터 HTML Service를 할 때, IFRAME Sandbox Mode로 해라.
클라이언트측 자바스크립트 (client-side JavaScript)에서 서버측 함수를 호출 (calling a function on the server)하면, 즉 'GetPivotContents()'을 호출하면 결과값 'MY'를 넘겨줘라.
정도로 이해하면 될까?

Templated HTML으로 사용될 Index.html
'main-heading' div는 로딩이 끝나면 'hidden'속성으로 감춰질 것이고,
에러가 발생하면 'hidden'속성의 에러메시지는 표출될 것이다.

'BASE' div에는 부모 테이블챠트용으로 사용할 것이며,
'DASHBOARD' div에는 'FILTER' div와 'SUB' div를 묶었다.
'FILTER' div에는 StringFilter, 'SUB' div는 자식 테이블챠트용으로 사용할 것이다.
가독성을 위해 꾸미기를 생략하고, 코드를 단순화했다.

꾸미기는 생략하고, Stylesheet.html 역시 'hidden'속성 하나로 최소화했다.

JavaScript.html
첫 세줄은 필수.(CODE 1,2,3)
jquery와 Google Chart를 사용하는데 필요한 Google JSAPI loader와 'controls'패키지와 함께 Google Visualization API를 로드한다.

서버측 함수호출 (calling a function on the server), 즉 'GetPivotContents()'을 호출하여 결과값 'MY'를 넘겨받은 후 Google Chart를 구성한다.(CODE 6~16)
넘겨받은 'MY'로 DataTable을 만들고(CODE 29,30),
요구하는 형태로 데이타를 reformat한다.(CODE 32~34)
챠트에 사용할 데이타 준비를 위한 추가적인 정보는 도움말 참고

부모 챠트용 'BASE' div에 Table Chart를 ChartWrapper로 구성.(CODE 36~47)
장.단점이 있는 ChartWrapper로 챠트를 사용(to wrap)할 지 여부는 각자 취향.

자식 챠트용 'SUB' div에 역시 ChartWrapper로 Table Chart를 구성.(CODE 66~76)

부모 챠트와 자식 챠트를 콘트롤할 Control은 google.visualization.StringFilter로써, google.visualization.ControlWrapper로 처리하여 'FILTER' div에 넣어준다.(CODE 56~65)
자식 챠트와 ControlWrapper는 google.visualization.Dashboard로 묶어(CODE 77,78), 'DASHBOARD' div에 넣는다.(CODE 55)

Handling Events
부모 챠트에서 발생한 Events를 google.visualization.events.addListener()에서 잡아서, 궁극적으로 자식 챠트에 반영한다.(CODE 49~53)

* (CODE 21~27)은
전체적인 흐름을 포스팅하는 예제용이라 코드를 심플하게 표현하고자 앞서 생략한 내용을 가독성을 위해 나중에 넣어준 코드이며,
컬럼의 타입을 미리 명시적으로 정해주면 불필요한 코드이다.

** 예제실행


전문가가 아닌 초보라 스스로 올바르게 이해하고 있는지 모른다.

처음으로 돌아가서,
궂이 SpreadSheet를 만들고, SpreadSheet함수 'QUERY'를 사용한 목적은
클라이언트측에서 원본데이터(퓨전테이블)로의 어떠한 접근도 허용하지 않는 방법을 찾기 위함이다.

이 포스트의 개념이
보안이 보장되는 방법인지, 보장되지 않는 방법인지 잘 모르겠다.
전문가의 고견을 기대해 본다.