[ITOnAir]데브멘토 동영상, 장동수 KTH 웹플랫폼Lab 차장(1/2부)_Dev & Tech Festival <!--StartFragment-->하이브리드앱의 개요모바일 플랫폼 춘추전국시대앱스프레소 소개, WAC 2.0 Waikiki API앱스프레소 Extension API, Device API 및 데모영상   <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />본 영상은 데브멘토 ITOnAir (tv.devmento.co.kr) 또는 다음tv팟(tvpot.daum.net/pot/Itonair)을 통해 웹과 모바일로 시청하실 수 있습니다.

1. 앱스프레소를 이용한
모바일 앱 개발
<iolothebard at gmail dot com>
1

2. 하이브리드앱 개요
2

3. 모바일 플랫폼 - 春秋戰國時代
3

4. Mobile App Architecture
Native Mobile Applications Hybrid Mobile Applications Mobile Web Applications
Proprietary
UI Toolkit JavaScript Frameworks/Libraries
UI Toolkit
Web Standards
Proprietary
Frameworks HTML5 CSS JavaScript
Native Libraries Platform Dependant Device API Platform Independent Device API
Proprietary
Built-in Web Browser
Development Environment
Platform Specific Native SDK
Android SDK/ND
iPhone SDK .NET Mobile …
K
4

5. Native Apps: PROS & CONS
Native UX High Cost
High Performance Too Difficult
Full Device Resource Long STore Process
App Store Too Many Device
Gaming Machine Too Many Platform
Version Management
5

6. Web Apps: PROS & CONS
Open Web Standard Device Resource
HTML, CSS, JS Accessibility
Multi Device Confidence
Multi Platform Cross-domain
Realtime Performance
6

7. Hybrid Apps
Application Quality
Native!
Mobile!
Web Apps BEST
Applications!
Native Resource
Hybrid!
Mobile!
Native App Market Applications!
Fast Development
Mobile!
Web! WORST
Low Cost Applications!
Development Cost
7

8. 하이브리드앱 개발 프레임웍
8

9. 앱스프레소 소개
9

10. Appspresso
통합 개발환경 지원, Eclipse IDE
iOS, Android, W3C Widget
JS Frameworks 포함
향상된 네이티브 API 제공
WAC / Waikiki API
On The Fly Development
Plug-in Development Kit (PDK)
10

11. 앱스프레소 다운로드
11

12. 앱스프레소 IDE(Eclipse Plugin)
12

13. 앱스프레소 IDE(Eclipse Plugin)
13

14. WAC 2.0 Waikiki API
WAC

15. Waikiki

16. API

17. 2.0

18. beta

19. 버전

20. 지원
Export

21. WAC

22. widget

23. package
Deviceapis Messaging
Accelerometer Geolocation
Orientation Contact
Camera Calendar
Devicestatus Task
Filesystem Deviceinteration
14

24. Appspresso Extension API
•WAC API 에서 제공되지 않는 API 제공
•Plug-in 구조로 되어있어 지속적인 확장 가능
•Plug-in Development Kit (PDK)
•Open Source Project
ax.ext.android
ax.ext.ios
ax.ext.net
ax.ext.media
ax.ext.ui
Custom

25. APIs...
15

26. Device APIs
16

27. deviceapis
•deviceapis
•deviceapis.accelerometer
•deviceapis.orientation
•deviceapis.devicestatus
•deviceapis.filesystem
•deviceapis.messaging
•navigator.geolocation
•deviceapis.pim
•deviceapis.pim.contact
•deviceapis.pim.calendar
•deviceapis.pim.task
•deviceapis.deviceinteraction
17

28. accelerometer
accId = deviceapis.accelerometer.watchAcceleration(
function watcher(acceleration){
var dx = Math.round(acceleration.xAxis * Math.pow(10, 1)) /
Math.pow(10, 1) * -1;
var dy = Math.round(acceleration.yAxis * Math.pow(10, 1)) /
Math.pow(10, 1) * -1;
},
function (error) { ... },
{ minNotificationInterval : 10 }
);
18

29. 19

30. camera
deviceapis.cameramanager.getCameras(function(cams) {
if(cams.length 0) {
mainCamera = cams[0];
try {
op = mainCamera.createPreviewNode(function(previewNode) {
myParent.appendChild(previewNode);
}, function (e) { ... });
} catch (e) { ... }
} else {
alert(no cameras found);
}
}, function (error) { ... }
);
20

31. 21