GWT/AppEngine/C2DM

Google Web Toolkit[CODE: GWT Sample 예제 ]

최근 클라이언트 디바이스 , 접속방법 -> 다양화멀티 디바이스 / Browser 를 지원하는 웹 애플리케이션 개발 증가

많은 양의 JavaScript 및 AJAX 컴포넌트 코드 어렵고 부담스러운 일

복잡한 JavaScript 코드를 객체지향 언어인 Java 프로그래밍 언어를 사용해서 개발

JAVA 로 작성[CODE: GWT Sample 예제 ]

public class Person { final String firstName; final String lastName; public Person(String firstName, String lastName) { this.firstName = firstName; this.lastName = lastName;

} public String getName(){ return firstName + " " + lastName;

}}public class Test implements EntryPoint { public void onModuleLoad() { TextBox nameField = new TextBox(); Person usr = new Person("Brian", "Lee"); nameField.setText(usr.getName()); RootPanel.get("nameFieldContainer").add(nameField); }}

결과[CODE: GWT Sample 예제 ]

실제 생성된 JavaScriptfunction Person(firstName, lastName){ this._firstName = firstName; this._lastName = lastName;}function getName(e){ return e._firstName + ' ' + e._lastName;}function TextBox(){ var e =

parent.document.createElement('INPUT'); e.type = 'text'; e.style = 'gwt-TextBox'; return e;}function setText(e, str){ e.value = str;}function get(elem_id){ return document.getElementById(elem_id);}function add(container, child){ container.appendChild(child);}function onModuleLoad(){ var nameField, usr; nameField = new TextBox; usr = new Person('Brian', 'Lee'); setText(nameField, getName(usr)); add(get('nameFieldContainer'), nameField);}

나름의 최적화최적화된 JavaScript]

function Person(){ this.firstName = 'Brian'; this.lastName = 'Lee';}setText(nameField, usr.firstName + ' ' + usr.lastName);

클라이언트와 서버간 통신 (GWT RPC)최적화된 JavaScript]

비동기 처리 방식인 AJAX 웹 애플리케이션에서 보편적으로 사용

사용자에게 좀 더 인터렉티브하고 자연스러운 경험 제공

GWT RPC 는 HTTP 기반에서 클라이언트와 서버간의 Java 오브젝트를 쉽게 주고 받을 수 있도록 한다 .

서버에서 클라이언트에게 제공하는 코드를 보통 ' 서비스 ' (Java Servlet)

클라이언트에서는 프록시 클래스 ( 자동 생성 , 서버제공 서비스 정의 ) 를 사용

GWT 는 클라이언트와 서버간의 전달되는 Java 객체 ( 보통 서비스메소드의 인자 또는 리턴값으로 전달 ) 의 직렬화GWT RPC 는 SOAP 과 REST 에 기반한 웹서비스와는 다르고 클라이언트와 서버간에 데이터를 전송하는데 간단하고 , 처리에 가벼운 방법을 제공한다 .

클라이언트와 서버간 통신 (GWT RPC)최적화된 JavaScript]

1. 클라이언트 : RPC 를 사용하여 서버로 부터 서비스 받을 인터페이스를 정의 ,

어떤 메소드 형태로 해당 서비스를 제공 받을지 정의한다

@RemoteServiceRelativePath("stockPrices")

public interface StockPriceService extends RemoteService {

StockPrice getSumPrices(StockPrice[] items) throws IllegalArgumentEx-

ception;

}

클라이언트와 서버간 통신 (GWT RPC)최적화된 JavaScript]

2. 서버 : 클라이언트에 제공할 서비스 구현 코드 (Servlet 형태 ) 를 작성한다 . 작성된 코드 ( 클래스 ) 는 'RemoteServiceSevlet' 을 상속받고 , 1 번에서 작성한 서비스 할 ( 받을 ) 인터페이스를 실제 구현한다 .

public class StockPriceServiceImpl extends RemoteServiceServlet implements Stock-PriceService{ public StockPrice getSumPrices(StockPrice[] items) throws IllegalArgumentExcep-tion{ int sum = 0; for (int i=0; i<items.length; i++) { sum += items[i].getPrice(); }

StockPrice stk = new StockPrice(); stk.setSymbol(" 총합 "); stk.setPrice(sum); return stk; }}

클라이언트와 서버간 통신 (GWT RPC)최적화된 JavaScript]

3. 클라이언트 : 클라이언트가 서버에서 제공하는 서비스를 호출했을 때 비동기 방식으로 응답 받기 위한 콜백 인터페이스를 정의하고 , 비동기 응답 처리를 위한 콜백 오브젝트를 작성한다 .

final StockPriceServiceAsync stockPriceSvc = GWT.create(StockPriceService.class);

AsyncCallback<StockPrice> callback = new AsyncCallback<StockPrice>() { public void onSuccess(StockPrice result) { nameField.setText(result.getSymbol() + ":" + result.getPrice()); }};

stockPriceSvc.getSumPrices(items, callback);

AppEngine

온라인 서비스를 안정적으로 처리할 서버 , 미들웨어 , 데이타베이스 및 네트웍 직접 구성 ?

애플리케이션의 인기가 수직 상승하면서 방문자 수가 급격히 늘어날경우 최대 부하량의 예측이 어렵다 . 비용을 생각 무한정 인프라 자원을 넉넉하게 구성 ?

수도세 , 전기세를 내듯이 인프라 자원을 쓴 만큼만 비용을 지불하면 ?

PAAS(platform-as-a-service) 라는 도구를 통해 애플리케이션을 더욱 쉽게작성 , 전개 및 배포

AppEngine

AppEngine

Python, Java, Go 언어를 지원하는 런타임 환경과 SDK 를 제공하며 각 환경은 웹애플리케이션 개발을 위한 표준 프로토콜과 기술을 제공한다 .

▫ Sandbox : 보안이 뒷 받침된 환경에서 수행된다 . 해당 애플리케이션이 수행되는 공간은 다른 환경( 다른 애플리케이션 , OS, 하드웨어 등 ) 과는 독립적으로 분리되어 운영몇가지 제한적인 측면도

∙ 앱엔진에서 구동되는 애플리케이션은 앱엔진이 제공하는 URL Fetch 와 email서비스를 통해서만 다른 외부 컴퓨터에 접근할 수 있다 . 반대로 외부 컴퓨터에서 해당애플리케이션에 접근하려면 , 지정된 포트의 HTTP( 또는 HTTPS) 요청을 통해서만접근가능 하다 .

∙ 애플리케이션이 직접 파일 시스템에 쓸 수 없다 . 단지 파일을 읽을 수 만 있다 . 만약파일 업로드나 데이터 저장 같은 지속적인 상태 유지를 위해서는 앱엔진 Datastore 또는메모리 캐쉬등을 이용한다 .

∙ 애플리케이션 코드는 웹 요청 , 예정된 Task 에 의해서만 수행되고 , 30 초를 초과하는애플리케이션 코드는 앱엔진에 의해 중단된다 . 뿐만 아니라 요청 핸들러는 하위프로세스를 생성하거나 , 요청에 대한 응답이 보내진 후에는 다른 코드를 수행하지않는다 .

AppEngine

▫ DataStore데이터를 분산 저장하고 , 손쉽게 저장공간을 객체 (object) 데이터베이스로 이해해야

Datastore 는 일관성 제공과 최적화된 동시성 제어를 한다 . 예를 들어 , 하나의 데이터 엔터티에 대해 업데이트를 수행하려고 할 때 다른 프로세스가 동일한 엔터티를 업데이트 하고 있어 오류가 발생한다면 , 해당 업데이트가 성공할 때 까지 동일한트랜젝션 내에서 여러 번 업데이트를 수행

▫ Google 계정당연한 얘기일 수 있으나 앱엔진은 사용자 인증을 위해서 Google 계정과의 연동을 지원한다 . 앱엔진 애플리케이션에서 Google 계정을 가지고 해당 애플리케이션에 로그인 할 수 있다 . 또한 Google 계정에 연결된 여러가지 정보 (ID/email 주소 / 표시이름 등 ) 를애플리케이션에서 사용할 수 있다 . 따라서 애플리케이션에서 따로 새로운 계정을 생성할 필요 없이 Google 계정을 사용할 수 있어서 , 사용자가 빠르게 해당 애플리케이션을시작할 수 있게 한다 .

▫ 앱엔진 서비스앱엔진에서 애플리케이션 개발을 용이하게 하기 위해 여러가지 서비스를 제공한다 .사용할 수 있는 서비스 API 는 URL Fetch, Mail, Memcache, Image 처리 관련 API,주기적인 Task 및 Background Task 처리가 있다 .

AppEngine

▫ DataStore데이터를 분산 저장하고 , 손쉽게 저장공간을 객체 (object) 데이터베이스로 이해해야

Datastore 는 일관성 제공과 최적화된 동시성 제어를 한다 . 예를 들어 , 하나의 데이터 엔터티에 대해 업데이트를 수행하려고 할 때 다른 프로세스가 동일한 엔터티를 업데이트 하고 있어 오류가 발생한다면 , 해당 업데이트가 성공할 때 까지 동일한트랜젝션 내에서 여러 번 업데이트를 수행

▫ Google 계정당연한 얘기일 수 있으나 앱엔진은 사용자 인증을 위해서 Google 계정과의 연동을 지원한다 . 앱엔진 애플리케이션에서 Google 계정을 가지고 해당 애플리케이션에 로그인 할 수 있다 . 또한 Google 계정에 연결된 여러가지 정보 (ID/email 주소 / 표시이름 등 ) 를애플리케이션에서 사용할 수 있다 . 따라서 애플리케이션에서 따로 새로운 계정을 생성할 필요 없이 Google 계정을 사용할 수 있어서 , 사용자가 빠르게 해당 애플리케이션을시작할 수 있게 한다 .

▫ 앱엔진 서비스앱엔진에서 애플리케이션 개발을 용이하게 하기 위해 여러가지 서비스를 제공한다 .사용할 수 있는 서비스 API 는 URL Fetch, Mail, Memcache, Image 처리 관련 API,주기적인 Task 및 Background Task 처리가 있다 .

C2DM

APNS(apple push notification service)

Android Cloud to Device Messaging Frame-work

C2DM

서버 -> 안드로이드 디바이스로 데이터를 보내는 푸쉬 서비스 ( 폴링은 이제 그만 )

대용량의 데이터를 전송하는 것이 아니라 , lightweight 메시지 전송용(1024 바이트 )

서버에 새로운 데이타가 있다는 걸 애플리케이션에게 알림

C2DM 은 메세지 순서와 전달에 대한 개런티가 없음 . 새로운 메시지를 즉시 전달하는데 사용

안드로이드 애플리케이션에서 메시지 수신을 위한 별도의 처리가 필요 없음 . 애플리케이션이 설치되어 있고 , 브로드케이스 리시버와 퍼미션이 있으면 안드로이드 시스템에서 메시지가 도착했을 때 Intent broadcast 로 해당 애플리케이션을 동작시킨다 .

android 2.2 버전 이상 , 구글 계정 설정이 필요 .

C2DM

- 컴포넌트 ( 물리적인 엔터티 )

☞ 모바일 디바이스 : 안드로이드 2.2 이상 , 구글 계정에 로그인 되어 있어야 함 ☞Third-Party App. Server : 안드로이드 디바이스 ( 애플리케이션 ) 으로 메시지를 보내는 서버 .

 ☞C2DM Server : 구글이 운영 , Third-Party 애플리케이션 서버로 부터의 메시지를 디바이스로 전달해주는 역할

- 인증 ☞Sender ID : 애플리케이션 개발자 ID. 해당 애플리케이션을 인증하는데 사용 ☞Application ID : 애플리케이션 ID, manifest 의 패키지 명 . 수신된 메시지가 올바른 애플리케이션을 찾게함 ☞Registration ID: C2DM 서버가 발급 , 애플리케이션이 해당 ID 를 third-party 서버에 보냄 . 나 너가 보낸 메시지를 받을 수 있는 디바이스야라고 ..특정 디바이스의 특정 애플리케이션이라는 걸 나타냄 ☞ 구글 계정 : 로그인 되어 있어야 ☞Sender Auth Token :  ClientLogin Auth token 은 third-party 애플리케이션 서버에 저장하고 , third-party 서버가 구글 서비스에 접근할 수 있는 권한을 줌

C2DM

 ☞ C2DM 활성화    1. 메시징 서비스 사용을 위해 디바이스 C2DM 서버에 등록 , indent(REGISTER) 를 C2DM 서버로 보냄 (Sender ID 와 ApplicationID 포함 )    2. C2DM 서버는 REGISTRATION indent 를 브로드 케스트 ( 애플리케이션의 Registration ID 를 보냄 )       Google 은 주기적으로 Registration ID 를 갱신하기 때문에 , 그에 대한 처리 필요    3. 등록절차를 완료하기 위해 , 애플리케이션은 Registration ID 를 애플리케이션 서버로 보냄 . 서버는 해당 ID 를 저장해야 함    

☞ 메시지 전송 : 서버 -> 디바이스    1. 전송할 디바이스의 Registration ID 를 가지고 있어야 함 .    2.  ClientLogin authorization token 도 있어야 함 ( 구글로긴 )    3. application 서버는 C2DM 서버로 메시지를 보낸다 . C2DM 서버는 device 가 활성화 되었을 때 디바이스로 메시지 전송

☞ 메시지 수신 : Android 앱 <- C2DM    1. 안드로이드 시스템에서 메시지가 도착했을 때 Intent broadcast 로 해당 애플리케이션을 동작시킨다 .

C2DM

C2DM

DEMO

http://code.google.com/p/chrometophone/

http://cloudtasksio.appspot.com/

이벤트

스파게티 소스를 피하기 위해서는 EventBus 를 사용하자

Model – View - Presenter

Model – View - Presenter

class Phone implements ContactDe-tail { final ContactDetailId id; String number; String label; // work, home...}

class PhoneEditor { interface Display { HasClickHandlers getSaveBut-ton(); HasClickHandlers getCancelBut-ton(); HasValue<String> getNumber-Field(); HasValue<String> getLa-belPicker(); …

Display interface using characteristic inter-faces

void bindDisplay(Display display) { this.display = display; display.getSaveButton().addClickHandler(new ClickHan-dler() { public void onClick(ClickEvent event) { doSave(); } });

display.getCancelButton().addClickHandler(new Click-Handler() { public void onClick(ClickEvent event) { doCancel(); } });}

Model – View - Presenter

com.google.web.bindery.even-t.shared.Event<H extends Even-tHandler>

Type<H>ⓢ

Type<H>ⓢ

com.google.gwt.event.shared.GwtEvent<H extends EventHandler>

사용자 정의 이벤트 : GwtEvent( 이벤트 )

생성될 떄마다 index 가 +1 증가

구현해야 하는 메소드1. getAssociatedType : 이벤트를

등록할 때 사용된 Type 클래스2. dispatch(H handler) : 해당

핸들러를 수행

GWT 위젯 /DOM 이벤트의 ROOT

이벤트를 등록 (HandlerManager) 할 때 사용됨

Type 은 Static 이다 .

com.google.gwt.event.shared.Even-tHandler

사용자 정의 이벤트 : EventHandler( 이벤트 핸들러 )

ⓘMark Interface

com.google.gwt.event.shared.Sim-pleEventBus

사용자 정의 이벤트 : 등록 및 발생

직접적인 의존성 없이 객체들을 연결 ( 이벤트 소스 없이 연결가능 ), ( 이벤트 TYPE, 이벤트 핸들러 ) 등록 및 관심있는 대상에게 이벤트를 전파함

com.google.gwt.event.shared.EventBus

com.google.we-b.bindery.even-t.shared.EventBus

com.-google.gwt.even-t.shared.HasHandlers

ⓘ

이 interface 를 구현한 클래스는 이벤트 TYPE의 연결되어 있는 핸들러의 리스트를 가지고 있고 , 해당 이벤트 TYPE 에 맞는 핸들러를 수행한다 .

addHandleraddHandler-

ToSourcefireEvent(Event<?>)fireEventFrom-

Source

fireEvent(GwtEvent<?> event)

Event -> GwtEvent 로 변환

사용자 정의 이벤트 : 예제

public interface FriendEditEventHandler extends EventHandler { void onEditFriend(FriendEditEvent event);}

이벤트 핸들러 정의

이벤트 정의

public class FriendEditEvent extends GwtEvent<FriendEditEventHandler>{ public static Type<FriendEditEventHandler> TYPE = new Type<FriendEditEventHandler>(); private final String id; public FriendEditEvent(String id) { this.id = id; } public String getId() { return id; } @Override public Type<FriendEditEventHandler> getAssociatedType() { return TYPE; } @Override protected void dispatch(FriendEditEventHandler handler) { handler.onEditFriend(this); }}

사용자 정의 이벤트 : 예제

private SimpleEventBus eventBus = new SimpleEventBus();

이벤트 버스 생성

이벤트 등록

eventBus.addHandler(FriendEditEvent.TYPE, new FriendEditEven-tHandler() { public void onEditFriend(FriendEditEvent event) { GWT.log("AppController: Friend edit event received. Id: " + even-t.getId()); xxx } });

이벤트 발생

eventBus.fireEvent(new FriendEditEvent(“0001“));

사용자 인터페이스 : Widget

com.google.gwt.user.client.ui.UIObject

Type<H>ⓢ

Type<H>ⓢ

com.google.gwt.event.shared.GwtEvent<H>

생성될 떄마다 index 가 +1 증가

- 모든 UI 의 슈퍼 클래스- 단순이 DOM 엘리먼트를 둘러싸다 .- 이벤트를 받을 수 없다 .-Style 을 적용시킬 수 있다 . cf) GWT 의 스타일명은 [project]-[widget] 이다 . 생성자에서 setStyleName() 이 호출된다 .-ㅇㅇ

GWT 위젯 /DOM 이벤트의 ROOT

이벤트를 등록 (HandlerManager) 할 때 사용됨

Type 은 Static 이다 .