�ݺ�ߣ

모바일전략과 웹앱

WEB APP

기술 개발실 최두립
COUPLEWITH@INTERPARK.COM

I. 모바일 환경으로본 웹앱의 미래
1.모바일 플랫폼 동향
• 모바일 플랫폼 동향
• 플랫폼의 시대

2.웹 환경의 변화와 미래
• 2013 IT 트랜드와 모바일
• Future is Mobile

2

II. 웹앱 개발 기술과 문제 극복
3.모바일과 HTML5
모바일 환경의 HTML5



웹앱기술의 한계




웹앱 성능 개선 기술

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

웹앱개발툴

Javascript 프레임웍

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

3

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

4


•

2013 IT 트랜드와 모바일
•

Future is Mobile

5

모바일 환경의 개념


 모바일 장치나 정보 기기를 제어하는 운영체제 (Wikipedia)
 모바일 OS ≠ 스마트폰OS, 하지만 동일한 개념으로 이용.

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

6

모바일 환경 : 대중화 시대

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


7

모바일 환경 : OS 환경 변화

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

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

8

모바일 환경 : OS 현황


[영국의 /slideshow/did-you-know-20130703/28871096/&아이크로싱(iCrossing)]
http://connect.icrossing.co.uk/2013-mobile-market-share-infographic_10062

9

모바일 환경 : 2015 ?


Android, iOS, Windows
(80.6%)
Market Share

Predicted
2011

Predicted
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%

10

모바일 플랫폼


Platform !
H/W

OS
(s/w)

service

융합

11

모바일 플랫폼


Android

iOS

WebOs

Windows
Phone

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

라이선스

Open
Source

Closed
Source

Open
Source

Closed
Source

Open
Source

WebBrowser
Engine

WebKit

WebKit

WebKit

Trident

WebKit2

패키지관리

APK

iTunes

App Catalog

Zune Software

개발언어

C++,java

C, C++,
Objective-C

C

C#, VB.NET,
Silverlight,
native C/C++,

Html5, c,c++

SDK/ IDE

Android SDK
Eclipse

iOS SDK
Xcode

WP 8 SDK
Visual Studio

Tizen-SDK
Tizen IDE

개발자 수수료

$25
(Google Play )

$99/year

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

$99/year
(100 free apps)

12

2013 새로운 플랫폼의 개막
 Ubunto Touch (2013.2)


Tizen (2013.5, v2.1)

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

• Orange, NTT DoCoMo, Samsung,
Huawei ,Intel
• HTML5 /W3C, Tizen Web APIs

WebApp

 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++

13

모바일 플랫폼


Platform 시대
H/W

OS
(s/w)

service

융합

14

IT 산업의 변화 : 융합,결합,연결


15

IT 산업의 변화 :지식(K),가치 (V)1.모바일 플랫폼 동향

플랫폼

지식화

정보화

인프라

16


•

2013 IT 트랜드와 모바일
•

Future is Mobile

17

2013 IT 전략 기술 전망


• Tizen
• Web-app in desktop
• IoT ( internet of thngs )
M2M : Machine 2
Machine

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

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

• CPNT
(Content,Platform ,
Network, Terminal)

19

2013 IT 4대 메가 트렌드

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


20

모바일이 미래 !


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/

21

웹 환경의 변화


Web Browsers

Chrome
Firefox
36.2%

Operating Systems

Screen Resolutions

17.71%

1

Windows 7

43.10%

1

1366x768

19.15%

2

Chrome 27

8.45%

2

Windows XP

20.99%

2

1024x768

12.17%

3

Firefox 20

7.43%

3

iOS

9.31%

3

1280x800

8.82%

Safari 6.1

6.31%

4

Apple OS X

8.40%

4

1920x1080

6.24%

5

Internet Explorer 8

6.18%

5

Windows Vista

4.73%

5

1280x1024

6.16%

6

Internet Explorer 9

5.71%

6

Android

4.52%

6

1440x900

5.35%

7

Firefox 21

5.60%

7

Windows 8

4.26%

7

768x1024

4.68%

8

Internet Explorer 7

4.72%

8

Linux

2.73%

8

1600x900

3.85%

9

IE 7.8.9
16.6%

Chrome 26

4

2013.5

1

Internet Explorer10

4.40%

9

BlackBerry

0.59%

9

320x480

3.48%

3.42%

10 Windows 2003

0.25%

10

1680x1050

2.96%

10 Safari 6

Operating Systems

Web Browsers

Screen Resolutions

Internet Explorer 7

32.02%

1

Windows XP

74.32%

1

1024x768

40.15%

2

Internet Explorer 6

27.55%

2

Windows Vista

14.21%

2

1280x800

16.54%

Firefox 3

15.11%

3

Apple OS X

5.35%

3

1280x1024

15.10%

4

Firefox 2

14.55%

4

Windows 2000

2.16%

4

1440x900

6.49%

5

Firefox 1.5

1.92%

5

Linux

2.13%

5

800x600

5.18%

6

Safari 3.1

1.18%

6

Windows 2003

0.71%

6

1680x1050

4.61%

7

Safari 3

0.81%

7

Windows 98

0.56%

7

1152x864

3.24%

8

Opera 9.2

0.69%

8

Windows ME

0.23%

8

1920x1200

1.45%

9

Mozilla 1.9

0.58%

9

SymbianOS

0.13%

9

1280x768

1.43%

10

2008.5

1

3

IE 6.7
59.5%

Safari 2

0.51%

10

Unknown Mac

0.05%

10

1280x960

1.09%

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

22

웹 환경의 변화

HTML5 환경
= 51.5%

2013.5

2008.5

HTML5= 0%
http://www.w3counter.com/globalstats.php (2013.5)

23

웹 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

24



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

25



The Future is Mobile

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

26

모바일의 개념 변화


Mobility
Mobile

App
Tablet
PC

Smart
phone

Web
Tv

Etc.

WEB + APP

27

모바일의 개념 변화

APP

WEB

Widget

28








 웹앱개발툴
 Javascript 프레임웍

30

WHY MOBILE !

Mobile 개발

개발 요소

성능 문제

31

WEBAPP 알아야 할 것 …
화면사이즈

Touch

Mobile
Network

Device

UDID/UUID

모바일 {-.-};;
javascript

CSS3

HTML5

Webkit

Media-query

N-Screen

Device-API

Viewport

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

Cache

33

모바일 핵심 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

34

W3C HTML5 요소 ITEMS


XHR, XHR 2.0



Web IDL



HTML5



( XMLHttpRequest )

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

35

HTML5 기술 요소

Desktop

Canvas

open-GL
SVG

Frame Work

Mobile
Device

OfflineWeb

브
라
우
저

XHR (Ajax)
WebStorage
WebSocket
WebDatabase

Native API
GPS

Network

WAC API
Video/Audio

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

Camera

OPEN API
Touch.

Storage

36

모바일 개발에 필요한 것?

37

APP개발 환경 이해
Native

Hybrid

Hybrid

Server
Part
Node,java,php,
python

Device
Part
C,java,objectC,
html5,javascript

38

WEBAPP의 요구 사항(1)
 모바일 브라우저에서 동작

 Native 수준의 GUI/UX 지원
 Native 수준의 성능
 단말 내부 접근 (Hardware Interface API 지원)

 개발 소스 재활용
 Cross platform (Android, iOS, BlackBerry 등)
 Multi Device ( N-screens )

39

WEBAPP의 요구 사항(2)
 Open Source Archtecture 고려 사항
 Community 활성화
 안정성 , 라이선스
 H/W , S/W 지원 범위
개발 용이성

UI Framework

Native Api (device)

40

WEBAPP 개발 요구 역량

41

APP 종류와 개발 전략

비용
느림
비종속적
온라인
개발쉬움
단말접근불가

시간
내부 자원 역량
목표시장
기능성

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

42

WEBAPP기술 한계 극복
• Dom Fragment
• Offline-Web 기술
• jQuery Overhead

성능

• Cache (manifest)
• Local Storage

• Canvas & SVG
• Touch Handling

UX

• CSS transition

• Rendring
• More UI experience !!

44

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-websiteperformance/

45

WEB LOADING TIME(1)
서버

사용자

병목 구간

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

46

WEB LOADING TIME(2)
Design for High Latency Rule
1. Avoid landing page redirects

1
Redirect
(Round trip))

2. Minimize server processing time
3. Eliminate render blocking resources
4. Prioritize visible content

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

47

WEBAPP 성능 개선 기술

DOM Fragment
Offline Web

48

DOM FRAGMENT
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
list.appendChild(item);

DOM노드
반복부하

}

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);

DOM노드
영향 감소

}
list.appendChild(fragment);
http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/

49

OFFLINE-WEB
WebSQL
Web
Storage

Cache

Offline
성능

MVC

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

50

WEB STORAGE (1)

localStorage

no expiration date

sessionStorage

deleted when the
browser closed

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

•

getItem(key)

•

setItem(key, value)

•

removeItem(key)

•

clear()

목록
페이지

Storage

Item list

• Performance
• stored in key/value pairs

Item detail

http://www.w3.org/TR/2011/WD-html5-20110525/offline.html
http://www.w3schools.com/html/html5_webstorage.asp

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

51

WEB STORAGE (2)
// Store value on browser for duration of the session

sessionStorage.setItem(/slideshow/did-you-know-20130703/28871096/&key/slideshow/did-you-know-20130703/28871096/&, /slideshow/did-you-know-20130703/28871096/&value/slideshow/did-you-know-20130703/28871096/&);
// Retrieve value (gets deleted when browser is closed and re-opened)

sessionStorage.setItem

alert(sessionStorage.getItem(/slideshow/did-you-know-20130703/28871096/&key/slideshow/did-you-know-20130703/28871096/&));

localStorage.setItem
// Store an object using JSON

localStorage.setItem(/slideshow/did-you-know-20130703/28871096/&key/slideshow/did-you-know-20130703/28871096/&, JSON.stringify({name: /slideshow/did-you-know-20130703/28871096/&value/slideshow/did-you-know-20130703/28871096/&}));
alert(JSON.parse(localStorage.getItem(/slideshow/did-you-know-20130703/28871096/&key/slideshow/did-you-know-20130703/28871096/&)).name); // value

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

function saveMessage(){
var message = document.getElementById("draft");
localStorage.setItem("message", message.value)
}
http://dev.opera.com/articles/view/web-storage/
http://en.wikipedia.org/wiki/Web_storage

글쓰기

임시저장

52

WEB STORAGE (3)
주의 사항

설명

Storage per origin

origin : scheme/host/port
The 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 http://www.w3.org/TR/webstorage/
HTML5 spec
persistent data storage of key-value pair data in Web
clients

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

53

WEB CACHE (1)
•

페이지별 설정

•

웹서버 MIME 설정
AddType text/cache-manifest

<!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

CACHE MANIFEST

.manifest

지시자

# rev N

캐시 버전
> 서버 변경시 웹사용

CACHE:

캐시할 파일 목록

NETWORK:

항상 캐시 하지 않을 파일

FALLBACK:

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

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

54

WEB CACHE (2)

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

55

기타 WEB STORAGE 기술

lostorage.js

localStorage API

https://github.com/jscoder/lostorage.js

store.js

cross browser local storage

https://github.com/marcuswe
stin/store.js

lawnchair

simple json storage

http://brian.io/lawnchair/

56








 웹앱개발툴

57

HYBRID MOBILE APP FRAMEWORKS
 개발툴
Name
Cordova / Apache
(PhoneGap)
Titanium
Appcelerator

Worklight
IBM

License

Proprietary

Proprietary

Native Hybrid

iOS, Android, blackberry...

ADF Mobile FrameProprietary
work / Oracle

KonyOne

Appresso

-

Open

Hybrid App
iOS, Android

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

Website

2.5.0

http://cordova.apac
he.org/

3.0.2

http://www.appcele
rator.com/platform/
titanium-sdk

5

http://www-01.ibm.
com/software/mobi
le-solutions/worklig
ht/
Oracle Application
Development Fram
e-work

5.0

Hybrid & native App

Open

Latest
Version

11.1.1.6

지원 환경

http://www.kony.co
m/technology/deve
lop/studio
http://appspresso.c
om/ko/

59

Cross Platform

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

Web Standards

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

WAC API

[Waikiki API]
WAC의 표준 device API 규격 지원
카메라, 주소록, 중력센서, 단말 상태,파일 시스템 접근

Studio

[통합 개발 환경]
iOS와 Android 앱을 빌드
"on the fly building" 로 재컴파일 없이 디버깅

Plug - In

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

http://appspresso.com/ko/

60

PHONEGAP (1)

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

61

PHONEGAP (2)

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

device
API

개발

Apache Project
Javascrip 만으로 Native Code 없이 Device 접근

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

62

PHONEGAP (3) : 호환성

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

63

IBM WORKLIGHT


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



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



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

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

64

구분

기능

세부 내용

App Dev Center Build html & PhoneGap apps in HTML5
the cloud
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/

65

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

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

66

JAVASCRIPT FRAMEWORK
PATTERNS
(UI / MVC / 기타.)

67

W3C DEVICE-API 예시
• Messaging Javascript example
sendMessage()

onSMS()

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

68

SINGLE PAGE ARCH.(SPA)
장점

• Fast
• Works offline
• Control over experience

단점

• More Complex
• Memory management
• Modular Strategy

69

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

70

ZEPTO.JS


jQuery-compatible API

 페이지 경량화 라이브러리

<ul id=items>
<li>List item 1
<li>List item 2
<li>List item 3
<li>List item 4
</ul>

Jquery 호환
<script>
document.write(/slideshow/did-you-know-20130703/28871096/&<script src=/slideshow/did-you-know-20130703/28871096/& +
(/slideshow/did-you-know-20130703/28871096/&__proto__/slideshow/did-you-know-20130703/28871096/& in {} ? /slideshow/did-you-know-20130703/28871096/&zepto/slideshow/did-you-know-20130703/28871096/& : /slideshow/did-you-know-20130703/28871096/&jquery/slideshow/did-you-know-20130703/28871096/&) +
/slideshow/did-you-know-20130703/28871096/&.js></script>/slideshow/did-you-know-20130703/28871096/&)
</script>

<span
<span
<span
<span

class=delete>DELETE</span></li>

<script>
$(/slideshow/did-you-know-20130703/28871096/&#items li/slideshow/did-you-know-20130703/28871096/&).swipe(function(){
$(/slideshow/did-you-know-20130703/28871096/&.delete/slideshow/did-you-know-20130703/28871096/&).hide()
$(/slideshow/did-you-know-20130703/28871096/&.delete/slideshow/did-you-know-20130703/28871096/&, this).show()
})

Touch
Event처리

$(/slideshow/did-you-know-20130703/28871096/&.delete/slideshow/did-you-know-20130703/28871096/&).tap(function(){
$(this).parent(/slideshow/did-you-know-20130703/28871096/&li/slideshow/did-you-know-20130703/28871096/&).remove()
})
</script>

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

71

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 방식사용
HTTP

Node.Js

Server

io = require(/slideshow/did-you-know-20130703/28871096/&socket.io/slideshow/did-you-know-20130703/28871096/&).listen(3333);

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

Client
Socket

socket.ioclient.js

app_socket = io.connect(/slideshow/did-you-know-20130703/28871096/&http://host:3333/slideshow/did-you-know-20130703/28871096/&);

72

MOBILE UI FRAMEWORK
구분

라이선스

jQtouch

Open

Sencha Touch

free
commercial

GPLv3

특징

지원분야

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

iPhone,
Android, iPod
Touch

High-performance HTML5
MVC, Chart, Sencha Cmd

iOS, Android,
BlackBerry, Kindle
Fire
Smartphone
Tablets
Desktops

M-Project

MIT

Game , MVC
Offline, local storage, positioning, touch
optimized UI

jQuery
Mobile

Open

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

smartphone
tablets

Mobilo.js

Open

Native UI, MVC, Easy-to-use ,
Mobello Studio : Layout Edit, Debug

smartphone
tablets

JO

Open

MVC, GUI and light Data layer
PhoneGap

Mobile, Desktop
Browser & App

73

 Sencha Touch

• Sencha Architect Build for Mobile and
Desktop
• Sencha Ext JS JavaScript Framework for
Rich Desktop Apps
• Sencha GXT Application Framework for
Google Web Toolkit

• Sencha Architect
• Sencha Touch
• Eclipse Plugin for Sencha Touch
• Sencha Touch Charts
• Sencha Mobile Packaging
• Sencha Support Package

74

 온라인 UI 개발 / 테스팅

UI Build
Testing
Source

http://codiqa.com/

75

HTML5 & CSS3

 MVC
 Content Binding

MVC Architecture
Multi-device support

 Dynamic Value Computing
 Event Handling

Stable Environment
jQuery, jQ mobile
Native packaging
(ipa/apk)
JavaScript date object
Espresso - Node based
build tool and
optimizer
http://www.the-m-project.org/

76

•

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);

http://joapp.com/docs/

77

JAVASCRIPT PATTERN
 Observer Pattern

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

publisher

this.changeEvent = new joSubject(this);
// to fire the event inside the Subject
this.changeEvent.fire(somedata);

Event Driven
// simple case, using Function.bind()
somesubject.changeEvent.subscribe(this.mymethod.bind());

Subscriber

// 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");

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

78








 웹앱개발툴

79

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

80

WEBAPP 개발 환경
Appresso

Phone-Gap

Eclipseplugin

Device
OTG

eclipse

Android SDK
APIs
Platform
tools
SDK
Tools

Android platform APIs,
document. sample

DDMS

Dalvik Debug
Monitor Server
(DDMS)
developing and debugging

Device-VM

Android Virtual Device
(AVD)

your application
debugging and testing

81

안드로이드 아키텍처
어플리케이션/프레임웍
- 프로그램/개발프레임
웍

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

IPC ( inter process
communication)
- 프로세스간 커뮤니케
이션(siginal,
file,message,pipe,me
mory etc.)
System server
- 윈도우, 노티 관리
메니저 관련

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

Linux 2.6 kenel
- Low-level device driver

82

VIRTUAL BOX
http://source.android.com

가상이미지 다운로드

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

VM-설정
1. VirtualBox

2. Android Image

3. Network

4. adb Coonect

5. Debuging

https://www.virtualbox.org/ VirtualBox 설치

84

VM-설정
1. VirtualBox

2. Android Image

3. Network

4. adb Coonect

5. Debuging

Android
가상 시스템 가져오기

85

VM-설정
1. VirtualBox

2. Android Image

3. Network

4. adb Coonect

5. Debuging

Android
가상 시스템 설정

86

VM-설정
1. VirtualBox

2. Android Image

3. Network

4. adb Coonect

5. Debuging

가상 머신 구동

87

VM-설정
1. VirtualBox

2. Android Image

호스트 전용

3. Network

NAT

4. adb Coonect

내부네트웍

5. Debuging

일반드라이버

브릿지

가상 네트웍 설정

가상 머신

PC

88

VM-설정
1. VirtualBox

2. Android Image

3. Network

4. adb Coonect

5. Debuging

Android – 디버거 연결

adb connect 192.168.56.101
adb connect 10.20.4.33

89

SDK에서 DEBUGING(1)
1. VirtualBox

2. Android Image

3. Network

4. adb Coonect

5. Debuging

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

SDK – 프로젝트 디버깅

90

SDK에서 DEBUGING(2)
1. VirtualBox

2. Android Image

3. Network

4. adb Coonect

5. Debuging

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

•
•

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

91

에스프레소 프로젝트
• 프로젝트 생성

GUI 기반 프로젝트 개발

프레임웍 샘플

92

에스프레소 : PLUG-IN 설정
• 프로젝트 환경 파일

확장 API

Native Device API

93

에스프레소 : 환경파일
• 프로젝트 컴파일 설정
<?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 build
app.id=com.couple.with.todo
app.version=1.0.0
ax.sdk.dir=D:/AppData/Appspresso1.1.2/plugins/com.appspresso.cli_1.0.0.201207271616/axhome

94

에스프레소 > JO

JO 프레임웍 테마

95

에스프레소 : INDEX.HTML
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=devicewidth">
<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 프레임웍 샘플

96

에스프레소 > JQ.TOUCH

JQ.Touch 프레임웍

97

SUMMARY
Tablet
모바일 미래

플랫폼 동향
Widget

JavaScript

Html5 성능

프레임웍

앱개발 툴

웹앱 개발

98

�ݺ�ߣ

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

More Related Content

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