[Did you know] 모바일 전략과 웹앱 20130703

WEB APP

기술 개발실 최두립

[email protected]

모바일전략과 웹앱

2

I. 모바일 환경으로본 웹앱의 미래

1.모바일 플랫폼 동향

• 모바일 플랫폼 동향

• 플랫폼의 시대

2.웹 환경의 변화와 미래

• 2013 IT 트랜드와 모바일

• Future is Mobile

3

II. 웹앱 개발 기술과 문제 극복

3.모바일과 HTML5 모바일 환경의 HTML5

웹앱기술의 한계

웹앱 성능 개선 기술

4.웹앱개발 프레임웍 웹앱개발툴

Javascript 프레임웍

5.VM을 활용한 안드로이드 웹개발

4

INTRO MOVIE (1)

Did You Know 3.0 Show

• Social networking is exploding

• Knowledge is exploding

• Time to market is evaporating

• Computing power is exploding

http://tech-clarity.com/future-manufacturing-plm/1368

5








6

모바일 환경의 개념

모바일 장치나 정보 기기를 제어하는 운영체제 (Wikipedia)

모바일 OS ≠ 스마트폰OS, 하지만 동일한 개념으로 이용.

* MWC 2013을 통해 바라본 차세대 모바일OS 생태계 전망 2013.03.28


7

모바일 환경 : 대중화 시대

* MWC 2013을 통해 바라본 차세대 모바일OS 생태계 전망 2013.03.28


8

모바일 환경 : OS 환경 변화

• 폐쇄적, 라이선스 형태, 불안정성, OS제작사-기기 제조사 간 분리

• 개방적 라이선스 , OS, 개발툴, Store 등 Virtical Platform 생태계

9

모바일 환경 : OS 현황

http://connect.icrossing.co.uk/2013-mobile-market-share-infographic_10062

[영국의 '아이크로싱(iCrossing)]


10

모바일 환경 : 2015 ?

Market SharePredicted

2011Predicted

2015

Android 39.5% 45.4%

iOS 15.7% 15.3%

Windows Phone

5.5% 20.9%

BlackBerry 14.9% 13.7%

Symbian 20.9% 0.2%

Others 3.5% 4.6%

Android, iOS, Windows (80.6%)


11

모바일 플랫폼

Platform !

H/W OS(s/w) service 융합


12

모바일 플랫폼

Android iOS WebOsWindowsPhone

Tizen

주도기업 Google Apple LGE MicroSoft Samsung

시장 점유율 75.0% 17.3% <0.1% 3.2%

최종버전 4.2.2 6.1.3 2.2.4 8

운영체제 Linux Darwin Linux Window s 8 Linux

라이선스OpenSource

ClosedSource

OpenSource

ClosedSource

OpenSource

WebBrowserEngine

WebKit WebKit WebKit Trident WebKit2

패키지관리 APK iTunes App Catalog Zune Software

개발언어 C++,javaC, C++,

Objective-CC

C#, VB.NET, Silverlight,

native C/C++, Html5, c,c++

SDK/ IDEAndroid SDK

EclipseiOS SDKXcode

WP 8 SDKVisual Studio

Tizen-SDKTizen IDE

개발자 수수료$25

(Google Play )$99/year

$99/year(100 free apps)

http://en.wikipedia.org/wiki/List_of_mobile_software_distribution_platforms (2013.6)


13

2013 새로운 플랫폼의 개막

Tizen (2013.5, v2.1)• Orange, NTT DoCoMo, Samsung,

Huawei ,Intel• HTML5 /W3C, Tizen Web APIs

Ubunto Touch (2013.2)

• Ubuntu TV, Ubuntu for Android• C, C++, QML, HTML5

Firefox OS (2013.2, v1.0)

• Chinese ZTE, LGE, Huawei ,TCL • Boot to Gecko• HTML5• JavaScript ,open web APIs

WebOS(2012.1, v3.0.5)

• LGE, HP• HTML5, C, C++


WebApp

14

모바일 플랫폼

Platform 시대

H/W OS(s/w) service 융합


15

IT 산업의 변화 : 융합,결합,연결 1.모바일 플랫폼 동향

16

IT 산업의 변화 :지식(K),가치 (V)

플랫폼 지식화

정보화

인프라


17








19

2013 IT 전략 기술 전망

• 창조경제• 비용절감 -> 가치창출지식 사회, 지식 혁신(노나카이쿠치로 SECI 모델(Social,ExternalizationCombiation,Internalization)

• CPNT(Content,Platform ,Network, Terminal)

• BODYBring on your device스마트폰과 PC를 병행

• Tizen

• Web-app in desktop

• IoT ( internet of thngs )

M2M : Machine 2

Machine


20

2013 IT 4대 메가 트렌드

http://www.microsoft.com/korea/Press/pressroom/2013/01/02.aspx


21

모바일이 미래 !

Mobile is Eating the World!

• http://www.slideshare.net/bge20/2013-05-bea (Mobile is Eating the World by Benedict Evans, Digital at BookExpo America (BEA)• http://www.globalnerdy.com/2013/06/17/mobile-is-eating-the-world/


22

웹 환경의 변화

Screen Resolutions

1 1366x768 19.15%

2 1024x768 12.17%

3 1280x800 8.82%

4 1920x1080 6.24%

5 1280x1024 6.16%

6 1440x900 5.35%

7 768x1024 4.68%

8 1600x900 3.85%

9 320x480 3.48%

10 1680x1050 2.96%

Operating Systems

1 Windows 7 43.10%

2 Windows XP 20.99%

3 iOS 9.31%

4 Apple OS X 8.40%

5 Windows Vista 4.73%

6 Android 4.52%

7 Windows 8 4.26%

8 Linux 2.73%

9 BlackBerry 0.59%

10 Windows 2003 0.25%

Web Browsers

1 Internet Explorer 7 32.02%


3 Firefox 3 15.11%

4 Firefox 2 14.55%

5 Firefox 1.5 1.92%

6 Safari 3.1 1.18%

7 Safari 3 0.81%

8 Opera 9.2 0.69%

9 Mozilla 1.9 0.58%

10 Safari 2 0.51%

Screen Resolutions

1 1024x768 40.15%

2 1280x800 16.54%

3 1280x1024 15.10%

4 1440x900 6.49%

5 800x600 5.18%

6 1680x1050 4.61%

7 1152x864 3.24%

8 1920x1200 1.45%

9 1280x768 1.43%

10 1280x960 1.09%

Operating Systems

1 Windows XP 74.32%

2 Windows Vista 14.21%

3 Apple OS X 5.35%

4 Windows 2000 2.16%

5 Linux 2.13%

6 Windows 2003 0.71%

7 Windows 98 0.56%

8 Windows ME 0.23%

9 SymbianOS 0.13%

10 Unknown Mac 0.05%

IE 6.759.5%

IE 7.8.916.6%

ChromeFirefox36.2%

Web Browsers

1 Chrome 26 17.71%

2 Chrome 27 8.45%

3 Firefox 20 7.43%

4 Safari 6.1 6.31%



7 Firefox 21 5.60%


9 Internet Explorer10 4.40%

10 Safari 6 3.42%

http://www.w3counter.com/globalstats.php (2013.5)

2013.5

2008.5


23

웹 환경의 변화

2013.5

2008.5

HTML5 환경= 51.5%

HTML5= 0%

http://www.w3counter.com/globalstats.php (2013.5)


24

웹 VS 모바일 : 시장 동향

1.86billion phones and 53% of them will be smartphones. in 2013.

CCS Insight predicts.

http://www.globalnerdy.com/2013/06/17/mobile-is-eating-the-world/#sthash.M6AoyOLp.dpuf


25


1 in 3 American adults owns a tablet (2012.12)• Adults ages 35-44 (49%) /College graduates (49%)• 3% of adults said they owned a tablet (2010.5)

http://pewinternet.org/Reports/2013/Tablet-Ownership-2013/Findings.aspx


26


The Future is Mobile


http://pewinternet.org/Reports/2013/Tablet-Ownership-2013/Findings.aspx

27

모바일의 개념 변화

Mobile

Mobility



App Web

TabletPC

Smartphone

Tv Etc.

WEB + APP

28

WidgetAPP WEB


모바일의개념 변화

29

2부

30








31

Mobile 개발

개발 요소 성능 문제

WHY MOBILE !

32

모바일 환경의 HTML5

33

WEBAPP 알아야 할 것 …

N-Screen

Mobile Network

UDID/UUID

Viewport

HTML5javascript

Cache

화면사이즈

Webkit

Device-API

Touch

Device

http://www.w3c.or.kr/~hollobit/MWAC/10/mwac10-5.pdf

모바일 {-.-};;

CSS3

Media-query

34

모바일 핵심 WEBKIT

WebKit WebKit2

Process model Single Process Multi Process

API type Blocking API Non-blocking API

http://download.tizen.org/misc/media/conference2012/wednesday/ballroom-c/2012-05-09-1100-1140-webkit-efl_and_webkit2-efl.pdf

35

W3C HTML5 요소 ITEMS XHR, XHR 2.0 ( XMLHttpRequest )

Web IDL

HTML5

Widget 1.0

Requirements, P&C, Digital Sig., APIs & Events, Access Request Policy,

CSS3

Select Level3, Media Query

Web Application API

Web Storage, Web Database, Web Workers, Web Sockets API, Server-Sent Events,

Offline Web Applications

Geolocation API

Device APIs and Policy

DOM Level 3

36

HTML5 기술 요소

OfflineWeb

WebStorage

WebDatabase

XHR (Ajax)

WebSocket

GPS Network Touch.Camera

Canvas

SVG

Mobile

D

evic

eD

eskt

op

브라우저

Native API WAC API

http://specs.wacapps.net/ WAC Specifications 2.1 참조

Video/Audio Storage

OPEN API

open-GL

Frame Work

37

모바일 개발에 필요한 것?

38

APP개발 환경 이해

Native Hybrid Hybrid

ServerPart

DevicePart

Node,java,php, python

C,java,objectC,html5,javascript

39

WEBAPP의 요구 사항(1)

모바일 브라우저에서 동작

Native 수준의 GUI/UX 지원

Native 수준의 성능

단말 내부 접근 (Hardware Interface API 지원)

개발 소스 재활용

Cross platform (Android, iOS, BlackBerry 등)

Multi Device ( N-screens )

40

WEBAPP의 요구 사항(2)

Open Source Archtecture 고려 사항

Community 활성화

안정성 , 라이선스

H/W , S/W 지원 범위

UI Framework

Native Api (device)

개발 용이성

41

WEBAPP 개발 요구 역량

42

APP 종류와 개발 전략

빠름플랫폼종속적오프라인Native API

느림비종속적온라인개발쉬움

Cost & updates단말접근불가

비용

시간

내부 자원 역량

목표시장

기능성

43

WEBAPP은 문제가 ~~!

44

WEBAPP기술 한계 극복

성능

• Dom Fragment

• Offline-Web 기술

• Cache (manifest)

• Local Storage

UX• Touch Handling

• Rendring

• Canvas & SVG

• CSS transition

• More UI experience !!

• jQuery Overhead

45

WEB기술 한계

Web pages are getting bigger, year after year. ( page contains 98 page objects, a 13% increase from last year.

In 1995, the average page contained just 2.3 objects.)

http://www.strangeloopnetworks.com/blog/free-report-2012-state-of-the-union-on-e-commerce-page-speed-and-website-performance/

46

WEB LOADING TIME(1)

https://newrelic.com/docs/features/how-does-real-user-monitoring-work

서버 사용자

병목 구간

47

WEB LOADING TIME(2)

http://commondatastorage.googleapis.com/io-2013/presentations/239-%20Instant%20Mobile%20Websites-%20Techniques%20and%20Best%20Practices.pdf

Design for High Latency Rule1. Avoid landing page redirects

2. Minimize server processing time

3. Eliminate render blocking resources

4. Prioritize visible content

Redirect(Round trip))

1

2

4

3

48

WEBAPP 성능 개선 기술

DOM Fragment

Offline Web

49

DOM FRAGMENT

for (var i=0; i < items.length; i++){

var item = document.createElement("li");

item.appendChild(document.createTextNode("Option " + i);

list.appendChild(item);

}

http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/

var fragment = document.createDocumentFragment();

for (var i=0; i < items.length; i++){

var item = document.createElement("li");

item.appendChild(document.createTextNode("Option " + i);

fragment.appendChild(item);

}

list.appendChild(fragment);

DOM노드반복부하

DOM노드영향 감소

50

OFFLINE-WEB

성능

Cache

WebSQL

Web Storage

http://dev.opera.com/articles/view/taking-your-web-apps-offline-web-storage-appcache-websql/

MVC

Offline

51

WEB STORAGE (1)

http://www.w3.org/TR/2011/WD-html5-20110525/offline.html

http://www.w3schools.com/html/html5_webstorage.asp

• secure and faster

• store large amounts of data(5~10MB)

• Performance

• stored in key/value pairs

localStorage

sessionStorage

no expiration date

deleted when the browser closed

• getItem(key)

• setItem(key, value)

• removeItem(key)

• clear()

Item list

Item detail

Storage

(기시판,이메일,일정,글쓰기 임시저장등)

목록페이지

52

WEB STORAGE (2)

// Store value on browser for duration of the session

sessionStorage.setItem('key', 'value');

// Retrieve value (gets deleted when browser is closed and re-opened)

alert(sessionStorage.getItem('key'));

// Store an object using JSON

localStorage.setItem('key', JSON.stringify({name: 'value'}));

alert(JSON.parse(localStorage.getItem('key')).name); // value

http://dev.opera.com/articles/view/web-storage/http://en.wikipedia.org/wiki/Web_storage

sessionStorage.setItem

localStorage.setItem

<textarea id="draft" rows="10" cols="30"></textarea>

function saveMessage(){ var message = document.getElementById("draft"); localStorage.setItem("message", message.value)

}

글쓰기

임시저장

53

WEB STORAGE (3)

주의 사항 설 명

Storage per origin origin : scheme/host/portThe same origin will share the same storage space ( http://example.org/bb, http://example.org:8080/aa )

Storage limit storage limit at 5 Mb per domain

Security considerations and associated best practices

DNS spoofing attacks

Where not to use it different users are using different pathnames on a single domain

Web Storage is not part of the HTML5 spec

http://www.w3.org/TR/webstorage/persistent data storage of key-value pair data in Web clients

http://dev.opera.com/articles/view/web-storage/

54

WEB CACHE (1)

http://www.w3.org/TR/2011/WD-html5-20110525/offline.html

<!DOCTYPE HTML><html manifest=“offlache.manifest">...</html>

CACHE MANIFEST# rev 13.6.12.11

CACHE:/theme.css/logo.gif/main.js

NETWORK:login.asp

FALLBACK:/html/ /offline.htm

AddType text/cache-manifest .manifest

CACHE MANIFEST 지시자

# rev N 캐시 버전> 서버 변경시 웹사용

CACHE: 캐시할 파일 목록

NETWORK: 항상 캐시 하지 않을 파일

FALLBACK: 온라인 연결 불가시 대체 파일

• 웹서버 MIME 설정• 페이지별 설정

55

WEB CACHE (2)

http://grinninggecko.com/developing-cross-platform-html5-offline-app-1/

56

기타 WEB STORAGE 기술

lostorage.js localStorage API https://github.com/js-coder/lostorage.js

store.js cross browser local storage https://github.com/marcuswestin/store.js

lawnchair simple json storage http://brian.io/lawnchair/

57








58

웹앱 개발 툴

59

HYBRID MOBILE APP FRAMEWORKS

개발툴

Name License 지원 환경Latest Version

Website

Cordova / Apache(PhoneGap)

OpenHybrid & native App

2.5.0http://cordova.apache.org/

TitaniumAppcelerator

Proprietary Native Hybrid 3.0.2http://www.appcelerator.com/platform/titanium-sdk

WorklightIBM

Proprietary iOS, Android, blackberry... 5

http://www-01.ibm.com/software/mobile-solutions/worklight/

ADF Mobile Frame-work / Oracle

Proprietary 11.1.1.6Oracle Application Development Frame-work

KonyOne - 5.0http://www.kony.com/technology/develop/studio

Appresso OpenHybrid AppiOS, Android

http://appspresso.com/ko/

http://en.wikipedia.org/wiki/HTML5_in_mobile_devices#Hybrid_Mobile_Apps (2013.6)http://download.oracle.com/otn_hosted_doc/jdeveloper/11gdemos/ADF112/ADF112.html

60

[프레임웍]Apple iOS / Android / Hybrid App

Cross Platform [각 플랫폼 웹엔진 환경]HTML5, CSS, JS로 앱개발

Web Standards

[Waikiki API]WAC의 표준 device API 규격 지원

카메라, 주소록, 중력센서, 단말 상태,파일 시스템 접근WAC API

Studio[통합 개발 환경]

iOS와 Android 앱을 빌드"on the fly building" 로 재컴파일 없이 디버깅

Plug - In[ PDK(Plug-inDevelopment Kit) 포함 ]네이티브 언어로 사용자 정의 함수 작성

JavaScript API로 노출

http://appspresso.com/ko/

61

PHONEGAP (1)

http://coenraets.org/slides/MAX2013_Architecting_Phonegap_Apps.pdf

62

PHONEGAP (2)

• 아파치 오픈 소스 프로젝트 편입http://cordova.apache.org

device API

Apache ProjectJavascrip 만으로 Native Code 없이 Device 접근

개발 참고 : http://docs.phonegap.com소스 : http://www.phonegapessentials.com/content/chapter-source-code.html

https://build.phonegap.com/

63

PHONEGAP (3) : 호환성

http://phonegap.com/about/feature/

64

IBM WORKLIGHT HTML5, 하이브리드 및 네이티브 애플리케이션 개발

애플리케이션 라이프사이클 지원 (백엔드 통합 및 인증을 통해 개발에서부터 사후 배포등 )

IBM Worklight Studio 및 IBM Worklight SDK는 iOS, 안드로이드, 블렉베리 및 윈도우폰등

ftp://public.dhe.ibm.com/software/pdf/mobile-enterprise/WSW14182USEN.pdfhttp://public.dhe.ibm.com/software/kr/worklight_v5.pdf

65

구분 기능 세부 내용

App Dev Center Build html & PhoneGap apps in the cloud

HTML5 PhoneGap apps

Intel® XDK Cross platform development kit Andriod, iOs, kindle, html5 Apps

App Framework Library for HTML5 App UI 라이브러리jQuery 호환 프레임웍

App Game Interfaces

HTML5 기반 캔버스,음향,물리

App Starter quick-start wizard generate the App Framework

템플릿,화면 레이아웃사용자 정의 해더,푸터

http://xdk-software.intel.com/

66

웹앱개발환경통합개발환경게임개발

https://appcenter.html5tools-software.intel.com

67

JAVASCRIPT FRAMEWORK

PATTERNS

(UI / MVC / 기타.)

68

W3C DEVICE-API 예시• Messaging Javascript examplesendMessage()

http://specs.wacapps.net/messaging/index.html#introduction

onSMS()

69

SINGLE PAGE ARCH.(SPA)

• Fast• Works offline• Control over experience

• More Complex• Memory management• Modular Strategy

단점장점

70http://net.tutsplus.com/articles/web-roundups/20-javascript-frameworks-worth-checking-out/

71

ZEPTO.JS

jQuery-compatible API

페이지 경량화 라이브러리

<script>

document.write('<script src=' +

('__proto__' in {} ? 'zepto' : 'jquery') +

'.js><\/script>')

</script>

https://github.com/madrobby/zepto/blob/master/examples/touch_events.htmlhttp://zeptojs.com/

<ul id=items><li>List item 1 <span class=delete>DELETE</span></li><li>List item 2 <span class=delete>DELETE</span></li><li>List item 3 <span class=delete>DELETE</span></li><li>List item 4 <span class=delete>DELETE</span></li>

</ul>

<script>$('#items li').swipe(function(){$('.delete').hide()$('.delete', this).show()

})

$('.delete').tap(function(){$(this).parent('li').remove()

})</script>

TouchEvent처리

Jquery 호환

72

SOCKET.IO

크로스 브라우저 환경 대안 (CSRF : 보안 문제)

MIT 라이센스를 가진 오픈소스 / Guillermo Rauch

Node.js 모듈 : Socket.io / Web 표준 기술 : Web Socket

WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling등 통합한 API

브라우저와 웹 서버의 종류와 버전에 따라 구동

브라우저에 Flash Plugin v10.0.0 이상(FlashSocket 지원 버전) 설치시FlashSocket을 사용

Flash Plugin이 없으면 AJAX Long Polling 방식사용

https://github.com/learnboost/socket.io/http://helloworld.naver.com/helloworld/1336

ClientServer

HTTP

Socket

Node.Js socket.io-client.js

app_socket = io.connect('http://host:3333');io = require('socket.io').listen(3333);

73

MOBILE UI FRAMEWORK

구분 라이선스 특징 지원분야

jQtouch OpenEasy Setup, Native WebKit Animations Image Preloading, Callback Events · Native UI & Themes, Swipe Detection

iPhone, Android, iPod Touch

Sencha Touchfree

commercialGPLv3

High-performance HTML5MVC, Chart, Sencha Cmd

iOS, Android, BlackBerry, Kindle Fire

M-Project MITGame , MVCOffline, local storage, positioning, touch optimized UI

SmartphoneTablets Desktops

jQueryMobile Open

Native UI, Touch Optimized Web,ThemeRoller , Codiqa (UI prototype)

smartphone tablets

Mobilo.js OpenNative UI, MVC, Easy-to-use ,Mobello Studio : Layout Edit, Debug

smartphone tablets

JO OpenMVC, GUI and light Data layerPhoneGap

Mobile, Desktop Browser & App

74

Sencha Touch• Sencha Architect Build for Mobile and

Desktop

• Sencha Ext JS JavaScript Framework for Rich Desktop Apps

• Sencha Architect

• Sencha Touch

• Eclipse Plugin for Sencha Touch

• Sencha Touch Charts

• Sencha Mobile Packaging

• Sencha Support Package

• Sencha GXT Application Framework for Google Web Toolkit

75http://codiqa.com/

온라인 UI 개발 / 테스팅

UI Build

Testing

Source

76

MVC

Content Binding

Dynamic Value Computing

Event Handling

http://www.the-m-project.org/

Espresso - Node based build tool and optimizer

Native packaging (ipa/apk)

MVC Architecture

Multi-device support

JavaScript date object

Stable EnvironmentjQuery, jQ mobile

HTML5 & CSS3

77http://joapp.com/docs/

• MVC Class

• DOM 조작 & 이벤트

• Client-side storage ( Nitobi, LawnChair)

store JSON objects

• joDoc easy-to-read and easy-to-write

PhoneGap (GUI)

MyClass = function(x) { // constructor this.x = x;

}; MyClass.prototype = {

mymethod: function() { // some method

}, myothermethod: function() {

// another method }

};

var x = new myClass(name);

78

JAVASCRIPT PATTERN

Observer Pattern

// inside the Subject, we setup an event observers can subscribe to

this.changeEvent = new joSubject(this);

// to fire the event inside the Subject

this.changeEvent.fire(somedata);

// simple case, using Function.bind()

somesubject.changeEvent.subscribe(this.mymethod.bind());

// explicit context (this)

somesubject.changeEvent.subscribe(this.mymethod, this);

// optional data which gets passed with the event fires

somesubject.changeEvent.subscribe(this.mymethod, this, "hello");

publisher

Subscriber

http://joapp.com/docs/#joSubject

Event Driven

79








80

VM을 활용한 안드로이드 웹개발

81

WEBAPP 개발 환경

eclipse

Eclipse-plugin

Android SDK

Appresso Phone-Gap

Device-VM

Device

DDMS

OTG

Android Virtual Device (AVD)

Dalvik Debug Monitor Server

(DDMS)

APIs

Platformtools

SDK Tools debugging and testing

developing and debugging your application

Android platform APIs, document. sample

82

안드로이드 아키텍처

Hardware abstracelayer(HAL)- 하드웨어 인터페이스- 드라이버

Linux 2.6 kenel- Low-level device driver

System server- 윈도우, 노티 관리

메니저 관련

Media server- 미디어 플레이- 레코딩 관련 서비스

어플리케이션/프레임웍- 프로그램/개발프레임

웍 IPC ( inter process communication)- 프로세스간 커뮤니케

이션(siginal, file,message,pipe,memory etc.)

83

VIRTUAL BOX

http://source.android.com

http://androvm.org/blog/download/

가상이미지 다운로드

84

VM-설정

https://www.virtualbox.org/

1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging

VirtualBox 설치

85

VM-설정


Android 가상 시스템 가져오기

86

VM-설정


Android 가상 시스템 설정

87

VM-설정


가상 머신 구동

88

VM-설정

NAT 내부네트웍 일반드라이버 브릿지호스트 전용


가상 네트웍 설정

PC가상 머신

89

VM-설정

adb connect 10.20.4.33adb connect 192.168.56.101


Android – 디버거 연결

90

SDK에서 DEBUGING(1)


환경 구성 : SDK 프로젝트와 단말간의 디버그 연결

SDK – 프로젝트 디버깅

91

SDK에서 DEBUGING(2)


환경구성 : 프로젝트 디버깅 설정

• Google on the fly 기능 사용 가능• 브라우저 로 실시간 테스팅

SDK – 프로젝트 디버깅환경 설정

92

에스프레소 프로젝트

프레임웍 샘플

GUI 기반 프로젝트 개발

• 프로젝트 생성

93

에스프레소 : PLUG-IN 설정

Native Device API

• 프로젝트 환경 파일

확장 API

94

에스프레소 : 환경파일

<?xml version="1.0" encoding="UTF-8"?><project name="com.couple.with.todo" default="build" basedir="."><description>Appspresso Build Script</description>

<property file="build.properties" />

<import file="${ax.sdk.dir}/build-app.xml" /></project>

• 프로젝트 컴파일 속성

• 프로젝트 컴파일 설정

# build properties for app buildapp.id=com.couple.with.todoapp.version=1.0.0ax.sdk.dir=D:/AppData/Appspresso1.1.2/plugins/com.appspresso.cli_1.0.0.201207271616/axhome

95

에스프레소 > JO

JO 프레임웍 테마

96

에스프레소 : INDEX.HTML

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"><meta name="format-detection" content="false"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">

JO 프레임웍 샘플

97

에스프레소 > JQ.TOUCH

JQ.Touch 프레임웍

98

SUMMARY

Tablet

Widget

JavaScript Html5 성능

플랫폼 동향

앱개발 툴프레임웍

모바일 미래

웹앱 개발

99

감사합니다.

AS

[Did you know] 모바일 전략과 웹앱 20130703

Technology

Transcript of [Did you know] 모바일 전략과 웹앱 20130703