More Related Content Similar to 하이브리드앱 개발 전략과 이슈 Similar to 하이브리드앱 개발 전략과 이슈 (20) 23. 기술
프레임웍
HTML5 CSS 자바스크립트
네이티브
67. API
· http://www.w3.org/TR/battery-status/
· HTML
70. 마이크...)
· http://www.w3.org/TR/html-media-capture/
· 파일
71. API
· http://www.w3.org/TR/FileAPI/
· 주소록
72. API
· http://www.w3.org/TR/contacts-api/
· 캘린더
73. API
· http://www.w3.org/TR/calendar-api/
· 메시징
76. Emails)
· http://www.w3.org/TR/messaging-api/
· 네트웍
78. API
· http://www.w3.org/TR/netinfo-api/
· 위치
80. API
· http://www.w3.org/TR/geolocation-API/
· ...
8
87. API
· deviceapis.accelerometer
· 자이로
89. API
· deviceapis.orientation
· 단말
91. API
· deviceapis.devicestatus
· 로컬
94. API
· deviceapis.filesystem
· 카메라
95. API
· deviceapis.camera
· 메시지
100.
· deviceapis.messaging
· PIM
103. 할일)
· deviceapis.pim
· 기타
108. 배경화면...)
· deviceapis.deviceinteraction
· ...
9
113. Quality
BEST 네이티브
하이브리드
웹 WORST
Development
217. 결합
WebView
WebViewClient
219. WebChromeClient
loadUrl
addJavascriptInterface
UIWebView
UIWebViewDelegate
loadRequest
stringByEvaluatingJavascriptFromString
22
221. 코드(안드로이드)
웹서버 컨텐츠 불러오기
public class NoticeActivity extends Activity {
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webView = (WebView)findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
...
webView.loadUrl(http://m.pudding.kr/pud/mNotice.kth);
...
}
...
}
앱에 포함된 정적 컨텐츠 불러오기
public class HelpActivity extends Activity {
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webView = (WebView)findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
...
webView.loadUrl(file:///android_asset/www/help.html);
...
}
...
}
23
223. 코드(iOS)
웹 서버 컨텐츠 불러오기
@interface NoticeViewController : UIViewController {
IBOutlet UIWebView *webView;
...
@end
@implementation HelpViewController
...
- (void)viewDidLoad {
...
NSURL *url = [NSURL URLWithString:@http://m.pudding.kr/pud/mNotice.kth];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webView loadRequest:requestObj];
...
} 앱에 포함된 정적 컨텐츠 불러오기
... @interface HelpViewController : UIViewController {
@end IBOutlet UIWebView *webView;
...
@end
@implementation HelpViewController
...
- (void)viewDidLoad {
...
NSString *bundlePath = [[NSBundle mainBundle] bundlePath];
NSString *path = [bundlePath stringByAppendingPathComponent:@/www/help.html];
NSURL *url = [NSURL fileURLWithPath:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
...
}
...
@end
24
225. 코드(안드로이드)
링크 클릭 가로채기
...
WebView webView = (WebView)findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
if(!url.startsWith(http://m.pudding.kr/pud/”) {
new AndroidDialog.Builder(NoticeActivity.this)
.setMessage(“딴데로 갈라구?? -_-+”)
.setPositiveButton(아니... 여기 있을께 ㅠㅠ”, new DialogInterface.OnClickListener() {
dialog.dismiss();
})
.setNegativeButton(갈꼬얌!, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int witch) {
dialog.dismiss();
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
NoticeActivity.this.startActivity(intent);
}
}).show();
return false;
} else if ...
...이러쿵 저러쿵...
} else if ...
...어쩌구 저쩌구...
} else if ...
...구시렁 구시렁...
}
view.loadUrl(url);
return true;
}
});
webView.loadUrl(http://m.pudding.kr/pud/mNotice.kth);
...
25
227. 코드(iOS)
링크 클릭 가로채기
@interface NoticeViewController : UIViewControllerUIWebViewDelegate, UIAlertViewDelegate {
IBOutlet UIWebView *webView;
NSString *externalUrl;
...
@implementation HelpViewController
...
- (void)viewDidLoad {
NSURL *requestUrl = [NSURL URLWithString:@http://m.pudding.kr/pud/mNotice.kth];
[webView loadRequest:[NSURLRequest requestWithURL:requestUrl]];
[webView setDelegate:self]
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSString *url = [[request URL] absoluteString];
if(![url hasPrefix:@http://m.pudding.kr/pud/mNotice.kth]) {
self.externalUrl = url;
UIAlertView *alertView = [UIAlertView alloc] initWithTitle:nil
message:@딴데로 갈라구?? -_-+ delegate:self
cancelButtonTitle:@아니... 여기 있을께 ㅠㅠ otherButtonTitles:@갈꼬얌!, nil];
[alertView show];
[alertView release];
return NO;
} else if ...
...구시렁 구시렁...
}
return YES;
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
if(buttonIndex == YES self.externalUrl) {
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:self.externalUrl];
}
}
...
26
229. 코드(안드로이드)
URL을 이용한 네이티브와 웹의 통신::자바스크립트
function getFieldValue(fieldId) {
var fieldValue = document.getElementById(fieldId).value;
location.href = ‘custom://getFieldValue?fieldId=’ + fieldId + ‘fieldValue=’ + fieldValue;
}
function setFieldValue(fieldId, fieldValue) {
document.getElementById(fieldId).value = fieldValue;
}
URL을 이용한 네이티브와 웹의 통신
webView.loadUrl(“javascript:getFieldValue(‘userName’)”); // 결과는 나중에... 비동기!! -_-;
...
webView.loadUrl(“javascript:setFieldValue(‘userName’, ‘“ + userName + “‘“);
...
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
if(!url.startsWith(custom://getFieldValue”) {
Uri uri = Uri.parse(url);
String fieldId = uri.getQueryParameter(“fieldId”);
String fieldValue = uri.getQueryParameter(“fieldValue”);
if(fieldId.equals(“userName”)) {
userName = fieldValue; // 결과가 도착했다! 이제 어떡하지? 비동기!! OTL
} else if ...
} else if ... // 나는 엘시프가 씨러요! ㅠㅠ
}
return false;
} else if ...
} else if ... // 나는 엘시프가 씨러요! ㅠㅠ
}
view.loadUrl(url);
return true;
}
});
...
27
231. 코드(iOS)
URL을 이용한 네이티브와 웹의 통신
NSString *script = [NSString stringWithFormat:@“getFieldValue(‘%@’)”, fieldId];
[webView stringByEvaluatingJavaScriptString:script];
...
NSString *script = [NSString stringWithFormat:@“setFieldValue(‘%@’, ‘%@‘)“, fieldId, fieldValue];
[webView stringByEvaluatingJavaScriptString:script];
...
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSString *url = [[request URL] absoluteString];
if(![url hasPrefix:@custom://getFieldName]) {
NSDictionary *params = [HttUtils decodeQueryString:[[request URL] query]];
NSString *fieldId = [params objectForKey:@”fieldId”];
NSString *fieldValue = [params objectForKey:@”fieldValue”];
if(fieldId isEqualToString:@”userName”) {
self.userName = fieldValue;
} else if ...
} else if ...
} else if ... // 나는 엘시프가 씨러요! ㅠㅠ
}
[paramArray release];
return NO;
} else if ...
} else if ...
} else if ... // 나는 엘시프가 씨러요! ㅠㅠ
}
return YES;
}
...
28
234. 결합
자바스크립트
캐시
그래봤자,
문자열~
URL 쿠키
어차피,
꼼수
그리고...
HTTP!
그림 출처: http://petticoatsandpistols.com/2010/05/12/
29
281. PhoneGap
· 홈페이지
· http://phonegap.com/
· 특징
· 단말별
326. Titanium
· 홈페이지
· http://www.appcelerator.com/
· 특징
· 초기(2008)에는
359. Appspresso
· 홈페이지
· http://www.appspresso.com/
· 특징
· 국내에서
389. 비교
구분 PhoneGap Titanium Appspresso
라이센스 OSS/부분유료 OSS/부분유료 Not-OSS/무료
지원
450. 프레임웍
·AppMobi
· http://www.appmobi.com/
·RhoMobile
· http://www.rhomobile.com/
·QuickConnect
· http://www.quickconnectfamily.org/
·WorkLight(IBM)
· http://www.worklight.com/
·HyWAI(ETRI)
· http://www.w3c.or.kr/hywai/
·and
526. 비교
jQueryMobile Sencha
527. Touch jQTouch
라이센스 MIT GPLv3/상업용 MIT
UI컴포넌트 ★★ ★★★★★ ★
브라우져지원 ★★★ ★★★★ ★★
난이도
★★★/★★★ ★/★ ★★★★/★★★★
(개발/디자인)
접근성 ★★★★ ★ ★★
성능
★★★/★★ ★/★★★ ★★★/★★★
(로딩/실행)
문서
★★/★★★ ★★★/★ ★/★
(공식/비공식)
개발자
528. 커뮤니티 ★★★★★ ★★★ ★★
43
532. Mobile
· http://dojotoolkit.org/features/mobile
·WinkToolkit
· http://www.winktoolkit.org/
·Jo
· http://joapp.com/
·iUI
· http://code.google.com/p/iui/
534. Touch
· http://dhtmlx.com/touch/
·and
584. 하이브리드앱
네이티브앱 네이티브앱
구분 웹앱 하이브리드앱
(안드로이드) (iOS)
JavaScript*
Java Objective-C
Language CoffeeScript
C/C++ C/C++
Objective-J
파일
파일 HTTP,
588. 캐시
I/O 네트웍
네트웍 웹스토리지,
590. IndexedDB
iCloud
android.* *.framework DOM,
596. 라이브러
java.* lib*.dylib +
602. APIs
android.view.*
GUI Cocoa
603. Touch HTML,CSS,Canvas,SVG,...
...
OS Linux iOS 웹브라우져 웹런타임
46
659. 인터페이스
index.html
Active
Page
show/hide
49
663. 서버
HTML
로컬
캐시 스토리지 캐시 앱
Static
665. Fragment
Placeholder Data Template
+
이름 클래스 레벨 ★ ♥ ♦ 이름 클래스 레벨
iolo bard 만렙 iolo bard 만렙 foreach
장동수 개발자 쪼렙 장동수 개발자 쪼렙 ★ ♥ ♦
... ... ... ... ... ... end
50
