1. GWT/AppEngine/C2DM

2. Google Web Toolkit [CODE: GWT Sample 예제] 최근 클라이언트 디바이스 , 접속방법 -> 다양화 멀티 디바이스 /Browser를지원하는 웹 애플리케이션 개발 증가 많은 양의 JavaScript 및 AJAX 컴포넌트 코드 어렵고 부담스러운 일 복잡한 JavaScript 코드를 객체지향 언어인 Java프로그래밍 언어를 사용해서 개발

3. JAVA로 작성 [CODE: GWT Sample 예제] publicclass Person { final String firstName; final String lastName; public Person(String firstName, String lastName) { this.firstName = firstName; this.lastName = lastName; } public String getName(){ returnfirstName + " " + lastName; } } publicclass Test implements EntryPoint { publicvoid onModuleLoad() { TextBox nameField = new TextBox(); Person usr = new Person("Brian", "Lee"); nameField.setText(usr.getName()); RootPanel.get("nameFieldContainer").add(nameField); } }

4. 결과 [CODE: GWT Sample 예제]

5. 실제 생성된 JavaScript function Person(firstName, lastName){ this._firstName = firstName; this._lastName = lastName; } function getName(e){ return e._firstName + ' ' + e._lastName; } function TextBox(){ vare = 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); }

6. 나름의 최적화 최적화된JavaScript] function Person(){ this.firstName = 'Brian'; this.lastName = 'Lee'; } setText(nameField, usr.firstName + ' ' + usr.lastName);

7. 클라이언트와 서버간 통신(GWT RPC) 최적화된JavaScript] 비동기 처리 방식인 AJAX웹 애플리케이션에서 보편적으로 사용 사용자에게 좀 더 인터렉티브하고 자연스러운 경험 제공 GWT RPC는 HTTP 기반에서 클라이언트와 서버간의 Java 오브젝트를 쉽게 주고 받을 수 있도록 한다. 서버에서 클라이언트에게 제공하는 코드를 보통 '서비스' (Java Servlet) 클라이언트에서는 프록시 클래스(자동 생성, 서버제공 서비스 정의)를 사용 GWT는 클라이언트와 서버간의 전달되는 Java 객체(보통 서비스 메소드의 인자 또는 리턴값으로 전달)의 직렬화 GWT RPC는 SOAP과 REST에 기반한 웹서비스와는 다르고 클라이언트와 서버간에 데이터를 전송하는데 간단하고, 처리에 가벼운 방법을 제공한다.

8. 클라이언트와 서버간 통신(GWT RPC) 최적화된JavaScript] 1. 클라이언트: RPC를 사용하여 서버로 부터 서비스 받을 인터페이스를 정의, 어떤 메소드 형태로 해당 서비스를 제공 받을지 정의한다 @RemoteServiceRelativePath("stockPrices") publicinterface StockPriceService extends RemoteService { StockPrice getSumPrices(StockPrice[] items) throws IllegalArgumentException; }

9. 클라이언트와 서버간 통신(GWT RPC) 최적화된JavaScript] 2. 서버:클라이언트에 제공할 서비스 구현 코드(Servlet형태)를 작성한다. 작성된 코드(클래스)는 'RemoteServiceSevlet' 을 상속받고, 1번에서 작성한 서비스 할(받을) 인터페이스를 실제 구현한다. publicclass StockPriceServiceImpl extends RemoteServiceServlet implements StockPriceService{ publicStockPrice getSumPrices(StockPrice[] items) throws IllegalArgumentException{ intsum = 0; for (int i=0; i<items.length; i++) { sum += items[i].getPrice(); } StockPrice stk = new StockPrice(); stk.setSymbol("총합"); stk.setPrice(sum); returnstk; } }

10. 클라이언트와 서버간 통신(GWT RPC) 최적화된JavaScript] 3. 클라이언트: 클라이언트가 서버에서 제공하는 서비스를 호출했을 때 비동기 방식으로 응답 받기 위한 콜백 인터페이스를 정의하고, 비동기 응답 처리를 위한 콜백오브젝트를 작성한다. final StockPriceServiceAsync stockPriceSvc = GWT.create(StockPriceService.class); AsyncCallback<StockPrice> callback = new AsyncCallback<StockPrice>() { publicvoid onSuccess(StockPrice result) { nameField.setText(result.getSymbol() + ":" + result.getPrice()); } }; stockPriceSvc.getSumPrices(items, callback);

11. AppEngine 온라인 서비스를 안정적으로 처리할 서버, 미들웨어, 데이타베이스 및 네트웍 직접 구성? 애플리케이션의 인기가 수직 상승하면서 방문자 수가 급격히 늘어날 경우 최대 부하량의 예측이 어렵다. 비용을 생각 무한정인프라 자원을 넉넉하게 구성? 수도세, 전기세를 내듯이 인프라 자원을 쓴 만큼만 비용을 지불하면? PAAS(platform-as-a-service)라는 도구를 통해 애플리케이션을 더욱 쉽게 작성, 전개 및 배포

12. AppEngine

13. AppEngine Python, Java, Go 언어를 지원하는 런타임 환경과 SDK를 제공하며 각 환경은 웹 애플리케이션 개발을 위한 표준 프로토콜과 기술을 제공한다. ▫ Sandbox : 보안이 뒷 받침된 환경에서 수행된다. 해당 애플리케이션이 수행되는 공간은 다른 환경(다른 애플리케이션, OS, 하드웨어 등)과는 독립적으로 분리되어 운영 몇가지 제한적인 측면도 ∙ 앱엔진에서 구동되는 애플리케이션은 앱엔진이 제공하는 URL Fetch와 email 서비스를 통해서만 다른 외부 컴퓨터에 접근할 수 있다. 반대로 외부 컴퓨터에서 해당 애플리케이션에 접근하려면, 지정된 포트의 HTTP(또는 HTTPS) 요청을 통해서만 접근가능 하다. ∙ 애플리케이션이 직접 파일 시스템에 쓸 수 없다. 단지 파일을 읽을 수 만 있다. 만약 파일 업로드나 데이터 저장 같은 지속적인 상태 유지를 위해서는 앱엔진 Datastore 또는 메모리 캐쉬등을 이용한다. ∙ 애플리케이션 코드는 웹 요청, 예정된 Task에 의해서만 수행되고, 30초를 초과하는 애플리케이션 코드는 앱엔진에 의해 중단된다. 뿐만 아니라 요청 핸들러는 하위 프로세스를 생성하거나, 요청에 대한 응답이 보내진 후에는 다른 코드를 수행하지 않는다.

14. AppEngine ▫ DataStore 데이터를 분산 저장하고, 손쉽게 저장공간을 객체(object) 데이터베이스로 이해해야 Datastore는 일관성 제공과 최적화된 동시성 제어를 한다. 예를 들어, 하나의 데이터 엔터티에 대해 업데이트를 수행하려고 할 때 다른 프로세스가 동일한 엔터티를 업데이트 하고 있어 오류가 발생한다면, 해당 업데이트가 성공할 때 까지 동일한 트랜젝션 내에서 여러 번 업데이트를 수행 ▫ Google 계정 당연한 얘기일 수 있으나 앱엔진은 사용자 인증을 위해서 Google 계정과의 연동을 지원한다. 앱엔진 애플리케이션에서 Google 계정을 가지고 해당 애플리케이션에 로그인 할 수 있다. 또한 Google 계정에 연결된 여러가지 정보(ID/email주소/표시이름 등)를 애플리케이션에서 사용할 수 있다. 따라서 애플리케이션에서 따로 새로운 계정을 생성할 필요 없이 Google 계정을 사용할 수 있어서, 사용자가 빠르게 해당 애플리케이션을시작할 수 있게 한다. ▫ 앱엔진 서비스 앱엔진에서 애플리케이션 개발을 용이하게 하기 위해 여러가지 서비스를 제공한다. 사용할 수 있는 서비스 API는 URL Fetch, Mail, Memcache, Image 처리 관련 API, 주기적인 Task및 Background Task 처리가 있다.

15. AppEngine ▫ DataStore 데이터를 분산 저장하고, 손쉽게 저장공간을 객체(object) 데이터베이스로 이해해야 Datastore는 일관성 제공과 최적화된 동시성 제어를 한다. 예를 들어, 하나의 데이터 엔터티에 대해 업데이트를 수행하려고 할 때 다른 프로세스가 동일한 엔터티를 업데이트 하고 있어 오류가 발생한다면, 해당 업데이트가 성공할 때 까지 동일한 트랜젝션 내에서 여러 번 업데이트를 수행 ▫ Google 계정 당연한 얘기일 수 있으나 앱엔진은 사용자 인증을 위해서 Google 계정과의 연동을 지원한다. 앱엔진 애플리케이션에서 Google 계정을 가지고 해당 애플리케이션에 로그인 할 수 있다. 또한 Google 계정에 연결된 여러가지 정보(ID/email주소/표시이름 등)를 애플리케이션에서 사용할 수 있다. 따라서 애플리케이션에서 따로 새로운 계정을 생성할 필요 없이 Google 계정을 사용할 수 있어서, 사용자가 빠르게 해당 애플리케이션을시작할 수 있게 한다. ▫ 앱엔진 서비스 앱엔진에서 애플리케이션 개발을 용이하게 하기 위해 여러가지 서비스를 제공한다. 사용할 수 있는 서비스 API는 URL Fetch, Mail, Memcache, Image 처리 관련 API, 주기적인 Task및 Background Task 처리가 있다.

16. C2DM APNS(apple push notification service) Android Cloud to Device Messaging Framework

17. C2DM 서버 -> 안드로이드 디바이스로 데이터를 보내는 푸쉬 서비스(폴링은 이제 그만) 대용량의 데이터를 전송하는 것이 아니라, lightweight 메시지 전송용(1024바이트) 서버에 새로운 데이타가 있다는 걸 애플리케이션에게 알림 C2DM은 메세지 순서와 전달에 대한 개런티가 없음. 새로운 메시지를 즉시 전달하는데 사용 안드로이드 애플리케이션에서 메시지 수신을 위한 별도의 처리가 필요 없음. 애플리케이션이 설치되어 있고, 브로드케이스 리시버와 퍼미션이 있으면 안드로이드 시스템에서 메시지가 도착했을 때 Intent broadcast로 해당 애플리케이션을 동작시킨다. android 2.2 버전 이상, 구글 계정 설정이 필요.

18. 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 서버가 구글 서비스에 접근할 수 있는 권한을 줌

19. 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로 해당 애플리케이션을 동작시킨다.

20. C2DM

21. C2DM

22. DEMO http://code.google.com/p/chrometophone/ http://cloudtasksio.appspot.com/

24. 이벤트 스파게티 소스를 피하기 위해서는 EventBus를 사용하자

25. Model – View - Presenter

26. Model – View - Presenter classPhone implementsContactDetail { finalContactDetailId id; String number; String label; // work, home... } classPhoneEditor { interfaceDisplay { HasClickHandlers getSaveButton(); HasClickHandlers getCancelButton(); HasValue<String> getNumberField(); HasValue<String> getLabelPicker(); … Display interface using characteristic interfaces

27. Model – View - Presenter void bindDisplay(Display display) { this.display= display; display.getSaveButton().addClickHandler(new ClickHandler() { publicvoid onClick(ClickEvent event) { doSave(); } }); display.getCancelButton().addClickHandler(new ClickHandler() { publicvoid onClick(ClickEvent event) { doCancel(); } }); }

28. 사용자 정의 이벤트 : GwtEvent(이벤트) com.google.web.bindery.event.shared.Event<H extends EventHandler> Type<H> ⓢ 구현해야 하는 메소드 getAssociatedType : 이벤트를 등록할 때 사용된 Type클래스 dispatch(H handler) : 해당 핸들러를 수행 이벤트를 등록(HandlerManager)할 때 사용됨 GWT위젯/DOM이벤트의 ROOT 생성될 떄마다 index 가 +1 증가 Type<H> ⓢ com.google.gwt.event.shared.GwtEvent<Hextends EventHandler> Type은 Static 이다.

29. 사용자 정의 이벤트 : EventHandler(이벤트 핸들러) com.google.gwt.event.shared.EventHandler ⓘ Mark Interface

30. 사용자 정의 이벤트 : 등록 및 발생 이 interface를 구현한 클래스는 이벤트 TYPE의 연결되어 있는 핸들러의 리스트를 가지고 있고, 해당 이벤트 TYPE에 맞는 핸들러를 수행한다. 직접적인 의존성 없이 객체들을 연결(이벤트 소스 없이 연결가능), (이벤트 TYPE, 이벤트 핸들러) 등록 및 관심있는 대상에게 이벤트를 전파함 ⓘ com.google.gwt.event.shared. HasHandlers com.google.web.bindery.event.shared. EventBus addHandler addHandlerToSource fireEvent(GwtEvent<?> event) fireEvent(Event<?>) fireEventFromSource com.google.gwt.event.shared.EventBus Event -> GwtEvent로 변환 com.google.gwt.event.shared.SimpleEventBus

31. 사용자 정의 이벤트 : 예제 이벤트 핸들러 정의 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() { returnTYPE; } @Override protected void dispatch(FriendEditEventHandler handler) { handler.onEditFriend(this); } }

32. 사용자 정의 이벤트 : 예제 이벤트 버스 생성 private SimpleEventBus eventBus = new SimpleEventBus(); 이벤트 등록 eventBus.addHandler(FriendEditEvent.TYPE, new FriendEditEventHandler() { public void onEditFriend(FriendEditEvent event) { GWT.log("AppController: Friend edit event received. Id: " + event.getId()); xxx} }); 이벤트 발생 eventBus.fireEvent(newFriendEditEvent(“0001“));

33. 사용자 인터페이스 : Widget com.google.gwt.user.client.ui.UIObject Type<H> ⓢ -모든 UI의 슈퍼 클래스 -단순이 DOM 엘리먼트를 둘러싸다. -이벤트를 받을 수 없다. -Style을 적용시킬 수 있다. cf) GWT의 스타일명은 [project]-[widget] 이다. 생성자에서 setStyleName()이 호출된다. -ㅇㅇ 이벤트를 등록(HandlerManager)할 때 사용됨 GWT위젯/DOM이벤트의 ROOT 생성될 떄마다 index 가 +1 증가 Type<H> ⓢ com.google.gwt.event.shared.GwtEvent<H> Type은 Static 이다.