C1 하이브리드 앱 어떻게 개발해야 하나

  • 3,904 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,904
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
215
Comments
0
Likes
7

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

Transcript

  • 1. 하이브리드 앱어떻게 개발해야 하나? KTH 앱스프레소팀장 한기태
  • 2. 하이브리드앱? 2
  • 3. 하이브리드앱? 연비 3
  • 4. 하이브리드 앱? 4
  • 5. 하이브리드 앱? 5
  • 6. 하이브리드 앱? • Layout HTML • Design CSS • Event Handler JavaScript 6
  • 7. 하이브리드 앱? Web Resource WebView (Boilerplate) Native App: iOS, Android 크로스 플랫폼 앱 스토어 7
  • 8. 왜 하이브리드 앱인가? 8
  • 9. 왜 하이브리드 앱인가? Objective C Java Cocoa, iPhone SDK Android SDK Xcode Eclipse + ADT 9
  • 10. 왜 하이브리드 앱인가? Vic Gundotra. Vice-President of Engineering for Google 10
  • 11. 웹 기술의 비약적 발전: HTML5, CSS3 11
  • 12. 웹 기술의 비약적 발전: HTML5, CSS3 Vic Gundotra. Vice-President of Engineering for Google 12
  • 13. 웹 기술의 비약적 발전: JavaScript UI Framework 13
  • 14. 웹 기술의 비약적 발전: JavaScript UI Framework 14
  • 15. 웹 기술의 비약적 발전: 웹 OS, 웹 플랫폼 B2G(Boot to Gecko) 15
  • 16. 하이브리드 앱 개발 방법론 16
  • 17. 하이브리드 앱 개발방법론 17
  • 18. Device API 보안상의 이유로 웹에서는 로컬 자원에 대한 접근 금지 Device API  카메라, 센서, 주소록, 파일 시스템 등 로컬 자원의 활용 가능 표준화 동향  W3C DAP(Device APIs and Policy) OMTP BONDI API + Nokia WRT API 18
  • 19. Device API PhoneGap의 방식 alert(ScriptingObject.add(3, 4)); 19
  • 20. Device API PhoneGap의 방식 document.location = "myapp:" + "ScriptingObject:" + "add:" + "3:" + "4"; 20
  • 21. 하이브리드 앱 프레임워크 Rhodes 21
  • 22. Rhomobile Rhodes  Ruby  특정 벤더의 비표준 기술  축적된 지식, 자산의 재활용 불가 22
  • 23. Appcelerator Titanium  AWT와 유사한 자체 Window Toolkit  특정 벤더의 비표준 기술  축적된 지식, 자산의 재활용 불가 23
  • 24. PhoneGap 하이브리드 앱 개발 방법론을 프레임워크화  오픈 소스  개발 환경, 개발 도구 없음: 샘플 소스  웹 표준 기반  Device API는 자체적으로 제정한 스펙  유일하게 6가지 모바일 플랫폼 지원  iOS, Android, RIM BlackBerry, HP webOS, Nokia Symbian, Samsung Bada 24
  • 25. Appspresso ‘11.03.14 국내 최초의 범용 하이브리드 앱 프레임워크 세계 최초로 표준 Device API와 통합개발환경을 지원하는 하이브리드 앱 프레임워크 25
  • 26. Appspresso WAC Waikiki API Sensor Camera Contact Device Status SMS File System Native API 26
  • 27. Appspresso 27
  • 28. Appspresso 크로스 플랫폼 웹 표준 기반 표준 Device API (WAC Waikiki API): WAC Compatibility 통합개발환경 제공 One Click Build PDK(Plug-in Development Kit)  Open Source Appspresso Plug-in Project 개설 예정 On the fly building – Demo 28
  • 29. 바람직한 하이브리드 앱 구조 Hybrid App ≠ Web Site 29
  • 30. 바람직한 하이브리드 앱 구조 Web Site 서버에서 모든 것을 다 처리한다 브라우저는 거들 뿐 30
  • 31. 바람직한 하이브리드 앱 구조 Web Site 사용자 액션  페이지 이동 JavaScript 다시 로드 / parsing 상태 잃어 버림  Cookie / Session 31
  • 32. 바람직한 하이브리드 앱 구조 Hybrid App 브라우저에서 모든 것을 다 처리한다 서버는 거들 뿐 32
  • 33. 바람직한 하이브리드 앱 구조 Local Resource: HTML, CSS, JS, Image, … SDA(Single DOM Architecture) Partial Update 33
  • 34. 바람직한 하이브리드 앱 구조 Partial Update Local Resource 34
  • 35. 바람직한 하이브리드 앱 구조 http://microjs.com 35
  • 36. 바람직한 하이브리드 앱 구조iScroll (http://cubiq.org./iscroll)iScroll for jQuery Mobile (https://github.com/yappo/javascript-jquery.mobile.iscroll) 36
  • 37. Q&A 37