Hybrid app
0 likes•1,313 views
The document discusses different types of mobile apps: native apps, web apps, and hybrid apps. Native apps use platform-specific APIs and must be separately developed for each platform. Web apps can be accessed through a mobile browser but do not have access to device functionality. Hybrid apps combine features of both - they are developed with web technologies like HTML, CSS and JavaScript but have access to some device functionality by wrapping the web content in a native container and allowing connections to some native APIs. This allows for cross-platform development while retaining some device-specific capabilities.
Hybrid app
- 1. Hybrid App 아키텍트를 꿈꾸는 사람들 cafe.naver.com/architect1 현수명 soomong.net #soomong
- 2. Native App Hybrid App Web App
- 3. Native App Platform API 사용가능 - 막강함 - 지식 필요 Cross-Platform Porting - 새로 개발이나 마찬가지
- 4. Platform API 사용 불가능 Cross-Platform Porting - 원래 가능 - HTML + CSS + JavaScript Web App
- 5. Platform API 사용가능 Hybrid App Cross-Platform Porting
- 6. HTML5 + CSS + JavaScript Cross-Platform Porting
- 7. Platform API 사용가능 - PhoneGap - Appcelerator Titanium - Appspresso
- 8. public class WebViewDemo extends Activity { @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); mWebView = (WebView) findViewById(R.id.webview); mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo"); mWebView.loadUrl("file:///android_asset/demo.html"); } final class DemoJavaScriptInterface { public String clickOnAndroid() { return "Hello Web App World"; } } } Web App
- 9. <html> <head> <script language="javascript"> function wave() { document.getElementById("hello").innerHTML= demo.clickOnAndroid(); } </script> </head> <body> <b id="hello"> Hello </b><br> <a onClick="window.demo.clickOnAndroid()“> Click me! </a> </body> </html> Web App
- 10. public class App extend DroidGap { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android/asset/www/index.html"); } } <!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> </head> <body> <h1>Hello World</h1> </body> </html> Hybrid App
- 11. Web UI -> Touch UI - JQuery Mobile - JQTouch - Sencha Touch
- 12. 감사합니다