웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #1 웹앱 Overview 웹앱개요 HTML5 웹어플리케이션개요 JS 모바일프레임웍소개하이브리드앱개요하이브리드솔루션소개 / i

Size: px

Start display at page:

Download "웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #1 웹앱 Overview 웹앱개요 HTML5 웹어플리케이션개요 JS 모바일프레임웍소개하이브리드앱개요하이브리드솔루션소개 / i"

동규 장곡
6 years ago
Views:

1 웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #1 웹앱 Overview #2 jquerymobile #3 Appspresso Overview & API Review #4 Appspresso Tutorial I #5 Appspresso Tutorial II #6 Appspresso Tutorial III ibare77@gmail.com / ibare@kthcorp.com Blog:

2 웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #1 웹앱 Overview 웹앱개요 HTML5 웹어플리케이션개요 JS 모바일프레임웍소개하이브리드앱개요하이브리드솔루션소개 ibare77@gmail.com / ibare@kthcorp.com Blog:

3 웹앱이란? Mobile Web Site HTML, CSS, Javascript Web App HTML, CSS, Javascript Image, Video Multi Page URL VS. Image, Video Single Page URL Widget, Web Store

4 웹앱실행구조

5 브라우저기반웹앱스토어 Google Web Store Mozilla Web Store Opera Widget Store..

6 오픈웹앱마켓

7 HTML5 가제공하는것 Drag & Drop SVG New Form Worker Microdata Video ARIA Javascript Audio Canvas CSS3 WebSocket Geolocation Web Storage Semantic WebGL MathML Files Device Element Offline Application

8 모바일에서의 HTML5 html5test.com Desktop Mobile IE9 beta Firefox4 Chrome Safari Opera WebKit

9 JS 모바일프레임웍 웹표준기술만으로네이티브앱 UX 구현자바스크립트기반의자동화된렌더링제공네이트브앱유사컨트롤제공 CSS3 트렌지션, 애니메이션자바스크립트 API 방식, HTML 마크업방식으로구분

10 jqtouch 가볍고빠른기본프레임웍 ios 에최적화된프레임웍확장플러그인네이티브웹킷애니메이션간단한테마지원

11 jquerymobile jquery 팀개발다양한브라우저호환성지원멀티스크린지원많은수의 UX 컨트롤지원자동화된프레임웍구조모바일웹서비스에최적화 ARIA 표준지원

12 Sencha Touch 강력한라이브러리제공자바스크립트 API 기반개발 ios, Android, BlackBerry 6 Sencha 스타일컨트롤제공모델뷰컨트롤러구현 (MVC) 스마트폰과타블렛레이아웃자동변환

멀티플렛폼, 멀티디바이스 1,000,000 Mobile Internet Devices & Users (MM in Log Scale) 100,000 10,000 1,000 100 10 Mainframe Minicomputer 10MM+ Units

13 멀티플렛폼, 멀티디바이스 1,000,000 Mobile Internet Devices & Users (MM in Log Scale) 100,000 10,000 1, Mainframe Minicomputer 10MM+ Units Increasing Integration PC 100MM+ Units Desktop Internet 1B+ Units / Users 10B++ Units?? 1 1MM+ Units Morgan Stanley

14 멀티플렛폼, 멀티디바이스

15 공통점은? 브라우저 제공

16 웹앱 vs. 하이브리드앱 2007 Add to Home Screen

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

18 PhoneGap 오픈소스프레임웍플렛폼별개발템플릿제공 6개의모바일플렛폼지원네이티브 API 접근지원플러그인확장지원

19 PhoneGap GEO LOCATION NOTIFICATION VIBRATION NOTIFICATION SOUND ACCELEROMETER CAMERA COMPASS CONTACTS FILE MEDIA (AUDIO RECORDING) STORAGE

20 PhoneGap

21 Appcelerator Titanium 오픈소스프레임웍대부분의네이티브 API 지원모바일, 데스크탑앱빌드웹표준기술사용네이티브앱빌드 ( 모바일 ) 통합 IDE 제공, Titanium Studio

22 Appcelerator Titanium Native User Experience Native Performance + Native UX (tables,view,tabs,alert, button or more) Location-based Service GeoLocation, Compass, Native maps Social Networking Facebook, Twiter, Yahoo YQL, and more Rich Multimedia Camera, Video Camera, Streaming Analytics Unlimited Extensibility User, Session and Event Analytics

23 Appcelerator Titanium

24 Appcelerator Titanium

25 Appcelerator Titanium var t = Titanium.UI.create2DMatrix().scale(0); var w = Titanium.UI.createWindow({ backgroundcolor:'#336699', height:400, width:300, borderradius:10, transform:t }); var t1 = Titanium.UI.create2DMatrix().scale(1.1); var a = Titanium.UI.createAnimation(); a.transform = t1; a.duration = 200; a.addeventlistener('complete', function() {...

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

27 Appspresso

28 Q&A

29 웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #2 jquerymobile jqm 개요 jqm 구조 jqm UI 컴포넌트 jqm API ibare77@gmail.com / ibare@kthcorp.com Blog:

30 jquerymobile Features Lightweight size Progressive enhancement Compatible with all major mobile platforms Built on jquery core Automatic initialization HTML5 Markup-driven configuration Accessibility New events Powerful theming framework New plugins

31 Automatic initialization jquery.mobile-1.0a4.1.css jquery min.js jquery.mobile-1.0a4.1.js <BODY> <DIV data-role= page id= home > <DIV data-role= header > <DIV data-role= content > <DIV data-role= footer > <DIV data-role= page id= about >.

32 Automatic initialization flow jquery.mobile-1.0a2.css jquery min.js mobileinit jquery.mobile-1.0a2.js. activebtnclass activepageclass nonhistoryselectors subpageurlkey $.mobile ajaxlinksenabled ajaxformsenabled defaulttransition loadingmessage.

33 Automatic Page Link <A HREF= #home >HOME</A> <A HREF= home.html >HOME</A> <FORM ACTION= home.html > <INPUT TYPE= SUBMIT > </FORM>

34 Multi Page Structure file 1 BODY data-role= page id= page1 data-role= header H1 data-role= content. href= link Stack History Management file 2 file 3 <!doctype html> <html>... <div data-role= page... data-role= page id= page2. Ajax

35 Accessibility Automatic ARIA data-role content listview header dialog. role main listbox banner dialog..

36 Event tab tabhold swipe swipeleft pagebeforeshow pagebeforehide pageshow pagehide swiperight scrollstart scrollstop

37 Themes data-theme= b data-theme= d <button data-theme= a >OK</button> <button data-theme= c >Cancel</button>..

38 Transitions data-transition= pop Transitions from jqtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.. <a href= #about data-role= button data-transition= fade >About</a>.

39 Components: Dialog Flip Pop data-role= dialog. <a href= #about data-role= dialog >About</a> Slide Up.

40 Components: Header data-role= header. <div data-role= header > <h1>edit Contact</h1> </div> <div data-role= content >.

41 Components: Footer data-role= footer <div data-role= content >. </div>  <div data-role= footer > <button data-icon= delete > Remove</button>. </div>

42 Components: Navbar data-role= navbar <div data-role= content >. </div>  <div data-role= footer > <button data-icon= delete > Remove</button>. </div>

43 Components: Button data-role= button. <a href= #target data-role= button >Button </a>.

44 Components: Forms

45 Components: Listview data-role= listview. <div data-role= content > <ul data-role= listview > <li><a href= # >Inbox</a></li> <li><a href= # >Outbox</a></li> <li><a href= # >Drafts</a></li> <li><a href= # >Sent</a></li> <li><a href= # >Trash</a></li> </ul> </div> .

46 Components: Listview

47 Q&A

48 웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #3 Appspresso Overview Appspresso 개요개발환경설치개발, 테스트환경 Appspresso API review ibare77@gmail.com / ibare@kthcorp.com Blog:

49 Appspresso Overview Enhanced Native API Project Template Plug-in Development Kit Eclipse IDE WAC 2.0 Waikiki API On the fly development Include Javascript framework

50 Eclipse IDE

51 Appspresso Extension API WAC API 에서제공되지않는 API 제공 Plug-in 구조로되어있어지속적인확장가능 Plug-in Development Kit (PDK) Open Source Project

52 On the fly development 빌드없이수정된소스를런타임에바로적용가능 Javascript 디버깅 DOM Dump Chrome 익스텐션지원

53 Include javascript framework Project 템플릿제공 jquerymobile Sencha Touch

54 Supported Platform iphone ipad Android Phone Android Tablet Blackberry Windows Phone 7 webos Phone webos Tablet BlackBerry Tablet Symbian Meego Kindle Source : Appcelerator 9, 2010

55 앱스프레소다운로드

56 앱스프레소다운로드

57 JDK HOME

58 Android SDK HOME

59 ios Certificate

60 앱스프레소프로젝트생성

61 프로젝트설정

62 템플릿선택

63 프로젝트탐색기

64 Project.xml - Overview

65 Project.xml - Android

66 Project.xml - ios

67 Project.xml - Feature

68 실행단말선택

69 실행 & 테스트

70 WAC 2.0 Waikiki API WAC Waikiki API 2.0 beta 버전지원 Export WAC widget package Deviceapis Accelerometer Orientation Camera Devicestatus Filesystem Messaging Geolocation Contact Calendar Task Deviceinteration

71 Accelerometer deviceapis.accelerometer const float EARTH_GRAVITY = -9.8 PendingOperation getcurrentacceleration (AccelerationSuccessCallback, ErrorCallback) long watchacceleration(accelerationsuccesscallback, ErrorCallback, AccelerationOptions) void clearwatch(long watchid) AccelerationOptions long minnotificationinterval Acceleration float xaxis, yaxis, zaxis void AccelerationSuccessCallback(Acceleration)

72 Camera deviceapis.camera PendingOperation getcameras(cameraarraysuccesscallback, ErrorCallback) PendingOperation captureimage(cameracapturesuccesscallback, ErrorCallback, CameraOptions) PendingOperation startvideocapture (CameraCaptureSuccessCallback, ErrorCallback, CameraOptions) void stopvideocapture() PendingOperation createpreviewnode (CameraPreviewSuccessCallback, ErrorCallback) void CameraArraySuccessCallback(CameraArray cameras) void CameraCaptureSuccessCallback(String filename) void CameraPreviewSuccessCallback(HTMLElement domobj)

73 Device Status Aspect Properties Components Battery batterylevel, batterybegincharged _default CellularHardware status _default CellularNetwork isinroaming, signalstrength, operatorname _default Device imei, model, version, vendor _default Display resolutionheight, pixelaspectratio, dpiy, resolutionwidth, dpix, colordepth _active, _default MemoryUnit size, removable, availablesize _default OperatingSystem language, version, name, vendor _active, _default WebRuntime wacversion, supportedimageformats, version, name, vendor _active, _default WiFiHardware status _default WiFiNetwork ssid, signalstrength, networkstatus _active, _default

74 Contact deviceapis.pim.contact PendingOperation getaddressbooks(addressbookarraysuccesscallback, ErrorCallback) AddressBook const short SIM_ADDRESS_BOOK = 0, DEVICE_ADDRESS_BOOK = 1 short type String name Contact createcontact(contactproperties) PendingOperation addcontact(addcontactsuccesscallback, ErrorCallback, Contact) PendingOperation updatecontact(successcallback, ErrorCallback, Contact) PendingOperation deletecontact(successcallback, ErrorCallback, String id) PendingOperation findcontacts(contactarraysuccesscallback, ErrorCallback, ContactFilter filter)

75 GeoLocation Message Crew Module

76 Appspresso

77 Q&A

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

WAC 2.0 & Hybrid Web App 권정혁 ( @xguru ) 1 HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API Mobile Web App needs Device APIs Camera Filesystem Acclerometer Web Browser Contacts Messaging