웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #1 웹앱 Overview #2 jquerymobile #3 Appspresso Overview & API Review #4 Appspresso Tutorial I #5 Appspresso Tutorial II #6 Appspresso Tutorial III Twitter: @ibare Email: ibare77@gmail.com / ibare@kthcorp.com Blog: http://www.ibare.kr
웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #1 웹앱 Overview 웹앱개요 HTML5 웹어플리케이션개요 JS 모바일프레임웍소개하이브리드앱개요하이브리드솔루션소개 Twitter: @ibare Email: ibare77@gmail.com / ibare@kthcorp.com Blog: http://www.ibare.kr
웹앱이란? 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
웹앱실행구조
브라우저기반웹앱스토어 Google Web Store Mozilla Web Store Opera Widget Store..
오픈웹앱마켓
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
모바일에서의 HTML5 html5test.com Desktop Mobile 300 250 200 150 100 50 0 IE9 beta Firefox4 Chrome Safari Opera WebKit
JS 모바일프레임웍 웹표준기술만으로네이티브앱 UX 구현자바스크립트기반의자동화된렌더링제공네이트브앱유사컨트롤제공 CSS3 트렌지션, 애니메이션자바스크립트 API 방식, HTML 마크업방식으로구분
jqtouch 가볍고빠른기본프레임웍 ios 에최적화된프레임웍확장플러그인네이티브웹킷애니메이션간단한테마지원
jquerymobile jquery 팀개발다양한브라우저호환성지원멀티스크린지원많은수의 UX 컨트롤지원자동화된프레임웍구조모바일웹서비스에최적화 ARIA 표준지원
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 Increasing Integration PC 100MM+ Units Desktop Internet 1B+ Units / Users 10B++ Units?? 1 1MM+ Units 1960 1970 1980 1990 2000 2010 2020 Morgan Stanley
멀티플렛폼, 멀티디바이스
공통점은? 브라우저 제공
웹앱 vs. 하이브리드앱 2007 Add to Home Screen
하이브리드앱개발프레임웍
PhoneGap 오픈소스프레임웍플렛폼별개발템플릿제공 6개의모바일플렛폼지원네이티브 API 접근지원플러그인확장지원
PhoneGap GEO LOCATION NOTIFICATION VIBRATION NOTIFICATION SOUND ACCELEROMETER CAMERA COMPASS CONTACTS FILE MEDIA (AUDIO RECORDING) STORAGE
PhoneGap
Appcelerator Titanium 오픈소스프레임웍대부분의네이티브 API 지원모바일, 데스크탑앱빌드웹표준기술사용네이티브앱빌드 ( 모바일 ) 통합 IDE 제공, Titanium Studio
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
Appcelerator Titanium
Appcelerator Titanium
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() {...
Appspresso 통합개발환경지원, Eclipse IDE ios, Android, W3C Widget JS Frameworks 포함향상된네이티브 API 제공 WAC / Waikiki API On The Fly Development Plug-in Development Kit (PDK)
Appspresso
Q&A
웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #2 jquerymobile jqm 개요 jqm 구조 jqm UI 컴포넌트 jqm API Twitter: @ibare Email: ibare77@gmail.com / ibare@kthcorp.com Blog: http://www.ibare.kr
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
Automatic initialization jquery.mobile-1.0a4.1.css jquery-1.4.4.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 >.
Automatic initialization flow jquery.mobile-1.0a2.css jquery-1.4.4.min.js mobileinit jquery.mobile-1.0a2.js. activebtnclass activepageclass nonhistoryselectors subpageurlkey $.mobile ajaxlinksenabled ajaxformsenabled defaulttransition loadingmessage.
Automatic Page Link <A HREF= #home >HOME</A> <A HREF= home.html >HOME</A> <FORM ACTION= home.html > <INPUT TYPE= SUBMIT > </FORM>
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
Accessibility Automatic ARIA data-role content listview header dialog. role main listbox banner dialog..
Event tab tabhold swipe swipeleft pagebeforeshow pagebeforehide pageshow pagehide swiperight scrollstart scrollstop
Themes data-theme= b data-theme= d <button data-theme= a >OK</button> <button data-theme= c >Cancel</button>..
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>.
Components: Dialog Flip Pop data-role= dialog. <a href= #about data-role= dialog >About</a> Slide Up.
Components: Header data-role= header. <div data-role= header > <h1>edit Contact</h1> </div> <div data-role= content >.
Components: Footer data-role= footer <div data-role= content >. </div> <!-- end content --> <div data-role= footer > <button data-icon= delete > Remove</button>. </div>
Components: Navbar data-role= navbar <div data-role= content >. </div> <!-- end content --> <div data-role= footer > <button data-icon= delete > Remove</button>. </div>
Components: Button data-role= button. <a href= #target data-role= button >Button </a>.
Components: Forms
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> <!-- end content -->.
Components: Listview
Q&A
웹비즈니스와앱스프레소 KTH / 기술연구소 웹플렛폼 Lab / 김민태 #3 Appspresso Overview Appspresso 개요개발환경설치개발, 테스트환경 Appspresso API review Twitter: @ibare Email: ibare77@gmail.com / ibare@kthcorp.com Blog: http://www.ibare.kr
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
Eclipse IDE
Appspresso Extension API WAC API 에서제공되지않는 API 제공 Plug-in 구조로되어있어지속적인확장가능 Plug-in Development Kit (PDK) Open Source Project
On the fly development 빌드없이수정된소스를런타임에바로적용가능 Javascript 디버깅 DOM Dump Chrome 익스텐션지원
Include javascript framework Project 템플릿제공 jquerymobile Sencha Touch
Supported Platform iphone ipad Android Phone Android Tablet Blackberry Windows Phone 7 webos Phone webos Tablet BlackBerry Tablet Symbian Meego Kindle 0 25 50 75 100 Source : Appcelerator 9, 2010
앱스프레소다운로드
앱스프레소다운로드
JDK HOME
Android SDK HOME
ios Certificate
앱스프레소프로젝트생성
프로젝트설정
템플릿선택
프로젝트탐색기
Project.xml - Overview
Project.xml - Android
Project.xml - ios
Project.xml - Feature
실행단말선택
실행 & 테스트
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
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)
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)
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
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)
GeoLocation Message Crew Module
Appspresso
Q&A