Your SlideShare is downloading. ×
0
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,179

Published on

H3 2012 발표자료 …

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,179
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • 보스께서 말씀하사 (클릭)\n브라우저 애저 플랫폼이라 (클릭)\n\n
  • 따르는 자들로 하야 삽을 잡게 하더라.(클릭)\n
  • 파고 파고 또 파기를 셀 수도 없더라.(클릭)\n
  • 어느날 아무것도 없던 곳에서 솟아나는게 있더라.(클릭)\n보스가 보시기에 좋았더라. 하야 이름을 앱스프레소라 하라.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 2011 H3 에서 발표\n
  • 2011 H3 에서 발표\n
  • \n
  • \n
  • 일반적인 버전 컨트롤 상에서는 다음과 같은 모양일 것 입니다. (클릭)\n방통위에서 주최하는 Moiba 에서 솔루션 대상을 수상했습니다. (클릭)\n2011년 H3 와 Deview 에서 앱스프레소에 대한 발표를 했었구요. 그외에도 MWC 같은 해외 컨퍼런스에도 초청받을 수 있었습니다.(클릭)\n또한, 여러분의 성원에 힘입어 4만 다운로드를 돌파할 수 있었습니다. 이 자리를 빌어 감사드립니다.\n
  • 일반적인 버전 컨트롤 상에서는 다음과 같은 모양일 것 입니다. (클릭)\n방통위에서 주최하는 Moiba 에서 솔루션 대상을 수상했습니다. (클릭)\n2011년 H3 와 Deview 에서 앱스프레소에 대한 발표를 했었구요. 그외에도 MWC 같은 해외 컨퍼런스에도 초청받을 수 있었습니다.(클릭)\n또한, 여러분의 성원에 힘입어 4만 다운로드를 돌파할 수 있었습니다. 이 자리를 빌어 감사드립니다.\n
  • 일반적인 버전 컨트롤 상에서는 다음과 같은 모양일 것 입니다. (클릭)\n방통위에서 주최하는 Moiba 에서 솔루션 대상을 수상했습니다. (클릭)\n2011년 H3 와 Deview 에서 앱스프레소에 대한 발표를 했었구요. 그외에도 MWC 같은 해외 컨퍼런스에도 초청받을 수 있었습니다.(클릭)\n또한, 여러분의 성원에 힘입어 4만 다운로드를 돌파할 수 있었습니다. 이 자리를 빌어 감사드립니다.\n
  • 일반적인 버전 컨트롤 상에서는 다음과 같은 모양일 것 입니다. (클릭)\n방통위에서 주최하는 Moiba 에서 솔루션 대상을 수상했습니다. (클릭)\n2011년 H3 와 Deview 에서 앱스프레소에 대한 발표를 했었구요. 그외에도 MWC 같은 해외 컨퍼런스에도 초청받을 수 있었습니다.(클릭)\n또한, 여러분의 성원에 힘입어 4만 다운로드를 돌파할 수 있었습니다. 이 자리를 빌어 감사드립니다.\n
  • 정확히 기간은 안정해짐.\n현재 깃헙에 올려놓고 private 으로 오픈 준비중.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. BridgeOverTroubled Water앱스프레소 Lab | 이상찬 1
    • 2. 자기소개1. 모바일 게임 C, Java2. 무인민원발급기 Delphi, RS232C3. KTH 공채 34기4. 앱스프레소 Objective-C, JavaScript 2
    • 3. 발표 내용1. 앱스프레소 발자취2. 브릿지 아키텍쳐 설명3. 앱스프레소 플러그인 개발 설명4. 플러그인 개발 데모 3
    • 4. 창세기 4
    • 5. Browser as aPlatform 5
    • 6. 6
    • 7. 7
    • 8. 8
    • 9. Cross Platform FrameworkAppspresso 1.0 beta WAC support 9
    • 10. On the Fly DebuggingAppspresso 1.0 RC Plug-in Development Kit 10
    • 11. Appspresso 1.0WAC API 2.0 support 11
    • 12. Appspresso 1.1Appspresso 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 application2. HTML5 + CSS3 + JavaScript3. 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 RequestWeb 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 Result6. (JS) callback 25
    • 26. 폰갭의 단점1. 플러그인의 구조가 자유롭다 못해 폰갭만의 플 러그인 구조라는 것이 없다.2. 비동기 호출 밖에 지원할 수 없다.3. 폰갭만의 개발 구조가 있는 것이 아니므로 각 플랫폼별로 그 특성에 따라야만 한다.4. 통합 개발 환경을 지원하지 않는다. 26
    • 27. Bridge OverTroubled 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. keel1. keel.js2. 앱스프레소 브릿지 구조를 위한 자바스크립트 객체들의 선언 및 구현이 되어 있음.3. function 를 앱스프레소용 request로 변환4. execSync/execAsync/watch5. W3C 위젯 스펙 등등.. 31
    • 32. chronometer1. keel 에 선언된 내용을 네이티브 코드로 선언.2. AxPlugin 관련 객체들3. AxRuntime 관련 객체들4. AxFile 관련 객체들5. iOS 델리게이트 선언 32
    • 33. Sail1. Chronometer 의 구현체.2. 소형 웹 서버를 내장하여, 각 요청을 배분함.3. 플러그인을 관리하는 역할을 함.4. JS에 대응할 플러그인 객체를 연결함.5. 런타임내 자원을 관리함. 33
    • 34. paddle & screw1. deviceapi(WAC)도 플러그인으로 존재 contact, camera 등등2. 각 플랫폼에 맞춘 UI 등을 사용하도록 함 ax.ext.ui, ax.ext.net 등등 34
    • 35. 앱스프레소 브릿지 KEELChronometer paddle Sail screw 35
    • 36. 앱스프레소 작동 예 Sail Keel Plugin Server execSyncManager 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-inDevelopment 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 / execute2. 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

    ×