[H3 2012] Bridge over troubled water : make plug-in for Appspresso

BridgeOverTroubled Water앱스프레소 Lab | 이상찬

1

자기소개

1. 모바일 게임C, Java

2. 무인민원발급기 Delphi, RS232C

3. KTH 공채 34기4. 앱스프레소

Objective-C, JavaScript

2

발표 내용

1. 앱스프레소 발자취

2. 브릿지 아키텍쳐 설명

3. 앱스프레소 플러그인 개발 설명

4. 플러그인 개발 데모

3

창세기

4

Browser as a

Platform

5

6

7

8

Appspresso 1.0 betaWAC support

Cross Platform Framework

9

Appspresso 1.0 RCOn the Fly Debugging

Plug-in Development Kit

10

Appspresso 1.0WAC API 2.0 support

11

Appspresso 1.1

Appspresso Debug Extention

12

beta RC 1.0 1.1

각종 시상식

국내외 컨퍼런스 참가

4만 다운로드 돌파

13

Open Source on Github

14

Troubled Water

iOS Android WP8

JavaScript HTML5CSS3

WebSocket Sencha

JSB webView

15

왜 웹앱 개발은 험난할까요

1. iOSUIWebView 와 Safari 의 의도된 성능차Linked In App을 만드는 과정에서의 실패담 Facebook App을 웹앱으로 만드는 것을 포기Zynga는 JS Binding 기술을 통해 무엇을?

2. AndroidSencha의 속이 터지는 반응 속도HTML5 스펙을 제대로 지원하지 못함 (web socket등)

16

17

하이브리드 앱 개요

1. mobile web application

2. HTML5 + CSS3 + JavaScript

3. JS function -> ObjC method 혹은 그 반대로 지원.

4. 혹은, JS 로 짠 프로젝트가 네이티브 언어로 변환 되는 형태도 존재.

18

명세서

1. HTML로 button을 만듦.

2. 1에서 만든 버튼에서 JS 함수 실행.

3. JS 함수는 같은 이름의 네이티브 메소드 실행.

4. 네이티브 메소드는 확인, 취소가 있는 알림창을 띄움.

5. 알림창에서 사용자가 누른 버튼을 알려줌.

19

명세서를 구현

1. (HTML) <button>foo</button>

2. (JS) var bar = function () {};

3. (ObjC)- (void) bar { UIAlertView *alert = .. [alert show]; [alert release]};

20

var Bar = function(){go to Native, Plz};

Web ViewFoo

21

지금은 구현중입니다.

-(void) bar : {[UIAlertView show]

return button index

22

What the..

Bridge

23

Web ViewFoo

Web View DelegateStart Request

make function Bar()to HTTP Request

var Bar = function {}

send Result

?24

폰갭

폰갭

1. (JS) PhoneGap 큐 초기화

2. (JS) url : “gap://command/args”

3. (ObjC) start request : “gap://”

4. (ObjC) execute : command(args)

5. (ObjC) send Result

6. (JS) callback25

폰갭의 단점

1. 플러그인의 구조가 자유롭다 못해 폰갭만의 플러그인 구조라는 것이 없다.

2. 비동기 호출 밖에 지원할 수 없다.

3. 폰갭만의 개발 구조가 있는 것이 아니므로 각 플랫폼별로 그 특성에 따라야만 한다.

4. 통합 개발 환경을 지원하지 않는다.

26

Bridge Over

Troubled Water

27

앱스프레소 브릿지의 지향점

1. 표준 스펙을 정의하고, 그에 따르면 각 플랫폼에서 동일하게 작동하도록 한다.

2. 동기 / 비동기 호출 지원 할 수 있어야 한다. 기왕이면 W3C 위젯 스펙도 지원하자.

3. 개발구조를 통일함으로써, 플랫폼이 바뀌더라도 개발언어만 바꾸면 되는 것을 보장한다.

4. 통합 개발 환경을 지원한다.

28

브릿지는 이러합니다.

29

Appspresso

?!Appspresso Plugin

var bar = function()

- (void) bar;

앱스프레소 브릿지 구조

1. 이름의 근간은 배의 부품에 두고 있음.

2. keel(용골)

3. chronometer(항해용 정밀시계)

4. sail (돛)

5. paddle & screw (노, 스크루)

30

keel

1. keel.js

2. 앱스프레소 브릿지 구조를 위한 자바스크립트 객체들의 선언 및 구현이 되어 있음.

3. function 를 앱스프레소용 request로 변환

4. execSync/execAsync/watch

5. W3C 위젯 스펙 등등..

31

chronometer

1. keel 에 선언된 내용을 네이티브 코드로 선언.

2. AxPlugin 관련 객체들

3. AxRuntime 관련 객체들

4. AxFile 관련 객체들

5. iOS 델리게이트 선언

32

Sail

1. Chronometer 의 구현체.

2. 소형 웹 서버를 내장하여, 각 요청을 배분함.

3. 플러그인을 관리하는 역할을 함.

4. JS에 대응할 플러그인 객체를 연결함.

5. 런타임내 자원을 관리함.

33

paddle & screw

1. deviceapi(WAC)도 플러그인으로 존재

contact, camera 등등

2. 각 플랫폼에 맞춘 UI 등을 사용하도록 함

ax.ext.ui, ax.ext.net 등등

34

앱스프레소 브릿지

35

KEEL

Sail

Chronometer

screw

paddle

앱스프레소 작동 예

36

Sail

ServerManager

Plugin Manager

UI ManagerFile Manager

JSON

Session

Widget Manager

Response

JS to Native

Keel

execSync

execAsync

PluginJS function

Native method

Web ViewFoo

Plug-in Development Kit

37

플러그인 개발의 전제사항

1. Objective C로 개발이 가능해야 함.

2. 혹은 JAVA로 개발이 가능해야 함.

3. Appspresso 유경험자.

38

플러그인 만드는 법

1. 플러그인 프로젝트를 만듭니다.

2. 플러그인 프로젝트를 어플리케이션 프로젝트에 추가합니다.

3. 플러그인 프로젝트를 구현합니다.

4. 빌드합니다.

5. appspresso.com 참조하세요.

39

데모 : 앱 프로젝트 제작 후 플러그인 프로젝트 추가하기

40

동영상 시연

플러그인 프로젝트에서 작업해야 할 것

1. function을 추가하고 구현합니다.

2. (필요할 경우) 스태틱 라이브러리, 프레임웍, jar 등을 추가합니다.

41

플러그인은 다음의 클래스를 가지고 있습니다

1. AxPluginactivate / deactivate / execute

2. AxPluginContext실행될 메소드와 아규먼트에 대한 정보를 가짐.

3. AxRuntimeContext현재 실행중이 앱 런타임의 정보를 가짐.

42

플러그인 모듈 프로젝트에서 작업해야 할 것

1. activate / deactivate

아규먼트로 AxRuntimeContext 가 들어옴.플러그인 생성 / 제거시에 불려짐.

43

플러그인 모듈 프로젝트에서 작업해야 할 것

2. execute

아규먼트로 AxPluginContext가 들어옴. AxPluginContext 에서 method 관련 정보를 얻음.해당 정보를 토대로 네이티브 코드 작성.

44

플러그인 모듈 프로젝트에서 작업해야 할 것

2. execute

45

데모 : 명세서대로 플러그인 개발해보기

1. JS에 bar()를 추가함.

2. HTML 수정

3. ObjC에 bar()에 대응하는 부분 추가함.

4. ObjC에 알림창에 대한 delegate 추가.

46

데모 : 명세서대로 플러그인 개발해보기

47

동영상 시연

참 쉽죠?

48

Tech Support

질문은 구글 그룹스로~

appspresso.com 먼저 확인해주세요~개발하신 내용을 꼭 명시해 주세요.플랫폼 종류, 에러메시지도 같이 올려주시면 감사하겠습니다.

49

감사합니다.개발실 / 앱스프레소 Lab / 이상찬

gyaleon@kthcorp.com@gyaleon

50