H3 2012 발표자료 Bridge over troubled water : make plug-in for Appspresso -KTH 이상찬

1. Bridge
Over
Troubled Water
앱스프레소 Lab | 이상찬
1

2. 자기소개
1. 모바일 게임
C, Java
2. 무인민원발급기
Delphi, RS232C
3. KTH 공채 34기
4. 앱스프레소
Objective-C, JavaScript
2

3. 발표 내용
1. 앱스프레소 발자취
2. 브릿지 아키텍쳐 설명
3. 앱스프레소 플러그인 개발 설명
4. 플러그인 개발 데모
3

4. 창세기
4

5. Browser
as a
Platform
5

6. 6

7. 7

8. 8

9. Cross Platform Framework
Appspresso 1.0 beta
WAC support
9

10. On the Fly Debugging
Appspresso 1.0 RC
Plug-in Development Kit
10

11. Appspresso 1.0
WAC API 2.0 support
11

12. Appspresso 1.1
Appspresso Debug Extention
12

13. beta RC 1.0 1.1
각종 시상식
국내외 컨퍼런스 참가
4만 다운로드 돌파
13

14. Open Source on Github
14

15. iOS Android WP8
JSB webView
Troubled Water
WebSocket Sencha
JavaScript CSS3 HTML5
15

16. 왜 웹앱 개발은 험난할까요
1. iOS
UIWebView 와 Safari 의 의도된 성능차
Linked In App을 만드는 과정에서의 실패담
Facebook App을 웹앱으로 만드는 것을 포기
Zynga는 JS Binding 기술을 통해 무엇을?
2. Android
Sencha의 속이 터지는 반응 속도
HTML5 스펙을 제대로 지원하지 못함 (web socket등)
16

17. 17

18. 하이브리드 앱 개요
1. mobile web application
2. HTML5 + CSS3 + JavaScript
3. JS function -> ObjC method
혹은 그 반대로 지원.
4. 혹은, JS 로 짠 프로젝트가 네이티브 언어로
변환 되는 형태도 존재.
18

19. 명세서
1. HTML로 button을 만듦.
2. 1에서 만든 버튼에서 JS 함수 실행.
3. JS 함수는 같은 이름의 네이티브 메소드 실행.
4. 네이티브 메소드는 확인, 취소가 있는 알림창
을 띄움.
5. 알림창에서 사용자가 누른 버튼을 알려줌.
19

20. 명세서를 구현
1. (HTML) <button>foo</button>
2. (JS) var bar = function () {};
3. (ObjC)
- (void) bar {
UIAlertView *alert = ..
[alert show];
[alert release]
};
20

21. 지금은 구현중입니다.
var Bar = function(){
go to Native, Plz};
-(void) bar : {
Web View
Foo
[UIAlertView show]
return button index
21

22. What the..
22

23. Bridge
23

24. 폰갭
var Bar = function {}
make function Bar()
?
to HTTP Request
Web View
Foo
Web View Delegate
Start Request
send Result
24

25. 폰갭
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) callback
25

26. 폰갭의 단점
1. 플러그인의 구조가 자유롭다 못해 폰갭만의 플
러그인 구조라는 것이 없다.
2. 비동기 호출 밖에 지원할 수 없다.
3. 폰갭만의 개발 구조가 있는 것이 아니므로 각
플랫폼별로 그 특성에 따라야만 한다.
4. 통합 개발 환경을 지원하지 않는다.
26

27. Bridge
Over
Troubled Water
27

28. 앱스프레소 브릿지의 지향점
1. 표준 스펙을 정의하고, 그에 따르면 각 플랫폼
에서 동일하게 작동하도록 한다.
2. 동기 / 비동기 호출 지원 할 수 있어야 한다.
기왕이면 W3C 위젯 스펙도 지원하자.
3. 개발구조를 통일함으로써, 플랫폼이 바뀌더라
도 개발언어만 바꾸면 되는 것을 보장한다.
4. 통합 개발 환경을 지원한다.
28

29. 브릿지는 이러합니다.
Appspresso
Appspresso Plugin
?! var bar = function()
- (void) bar;
29

30. 앱스프레소 브릿지 구조
1. 이름의 근간은 배의 부품에 두고 있음.
2. keel(용골)
3. chronometer(항해용 정밀시계)
4. sail (돛)
5. paddle & screw (노, 스크루)
30

31. keel
1. keel.js
2. 앱스프레소 브릿지 구조를 위한 자바스크립트
객체들의 선언 및 구현이 되어 있음.
3. function 를 앱스프레소용 request로 변환
4. execSync/execAsync/watch
5. W3C 위젯 스펙 등등..
31

32. chronometer
1. keel 에 선언된 내용을 네이티브 코드로 선언.
2. AxPlugin 관련 객체들
3. AxRuntime 관련 객체들
4. AxFile 관련 객체들
5. iOS 델리게이트 선언
32

33. Sail
1. Chronometer 의 구현체.
2. 소형 웹 서버를 내장하여, 각 요청을 배분함.
3. 플러그인을 관리하는 역할을 함.
4. JS에 대응할 플러그인 객체를 연결함.
5. 런타임내 자원을 관리함.
33

34. paddle & screw
1. deviceapi(WAC)도 플러그인으로 존재
contact, camera 등등
2. 각 플랫폼에 맞춘 UI 등을 사용하도록 함
ax.ext.ui, ax.ext.net 등등
34

35. 앱스프레소 브릿지
KEEL
Chronometer
paddle
Sail
screw
35

36. 앱스프레소 작동 예
Sail Keel
Plugin Server execSync
Manager Manager
execAsync
JSON JS to Native
Session Response
Foo
Web View
Plugin
JS function
UI Manager
Native method
File Manager
Widget Manager
36

37. Plug-in
Development Kit
37

38. 플러그인 개발의 전제사항
1. Objective C로 개발이 가능해야 함.
2. 혹은 JAVA로 개발이 가능해야 함.
3. Appspresso 유경험자.
38

39. 플러그인 만드는 법
1. 플러그인 프로젝트를 만듭니다.
2. 플러그인 프로젝트를 어플리케이션 프로젝트
에 추가합니다.
3. 플러그인 프로젝트를 구현합니다.
4. 빌드합니다.
5. appspresso.com 참조하세요.
39

40. 데모 : 앱 프로젝트 제작 후 플러그인 프로젝트 추가하기
동영상 시연
40

41. 플러그인 프로젝트에서 작업해야 할 것
1. function을 추가하고 구현합니다.
2. (필요할 경우) 스태틱 라이브러리, 프레임웍,
jar 등을 추가합니다.
41

42. 플러그인은 다음의 클래스를 가지고 있습니다
1. AxPlugin
activate / deactivate / execute
2. AxPluginContext
실행될 메소드와 아규먼트에 대한 정보를 가짐.
3. AxRuntimeContext
현재 실행중이 앱 런타임의 정보를 가짐.
42

43. 플러그인 모듈 프로젝트에서 작업해야 할 것
1. activate / deactivate
아규먼트로 AxRuntimeContext 가 들어옴.
플러그인 생성 / 제거시에 불려짐.
43

44. 플러그인 모듈 프로젝트에서 작업해야 할 것
2. execute
아규먼트로 AxPluginContext가 들어옴.
AxPluginContext 에서 method 관련 정보를
얻음.
해당 정보를 토대로 네이티브 코드 작성.
44

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

46. 데모 : 명세서대로 플러그인 개발해보기
1. JS에 bar()를 추가함.
2. HTML 수정
3. ObjC에 bar()에 대응하는 부분 추가함.
4. ObjC에 알림창에 대한 delegate 추가.
46

47. 데모 : 명세서대로 플러그인 개발해보기
동영상 시연
47

48. 참 쉽죠?
48

49. Tech Support
질문은 구글 그룹스로~
appspresso.com 먼저 확인해주세요~
개발하신 내용을 꼭 명시해 주세요.
플랫폼 종류, 에러메시지도 같이 올려주시면
감사하겠습니다.
49

50. 감사합니다.
개발실 / 앱스프레소 Lab / 이상찬
gyaleon@kthcorp.com
@gyaleon
50