App開發 - Web Developer的逆襲
4 likes1,579 views
Web developers can gain superpowers by adding Cordova plugins to access native device capabilities like sensors, APIs, and multithreading. The document demonstrates how to create a Cordova plugin by implementing a Java class and interface and calling it from JavaScript using cordova.exec(). It also shows how to use the Parse backend service to store data from a Cordova app.
![JavaScript invoke Java's Method
cordova.exec(
function(winParam) {},
function(error) {},
"service", "action",
["firstArgument", "secondArgument", 42,false]);
@Overridepublic boolean execute(String action, JSONArray args, CallbackContextcallbackContext) throws JSONException {if ("beep".equals(action)) {this.beep(args.getLong( 0));callbackContext.success();return true;}return false; // "MethodNotFound" error.}
JavaScript
Java](https://image.slidesharecdn.com/app-webdeveloper-140322192146-phpapp02/85/App-Web-Developer-16-320.jpg)
![Success callback
cordova.exec(
function(winParam) {},
function(error) {},
"service", "action",
["firstArgument", "secondArgument", 42,false]);
@Overridepublic boolean execute(String action, JSONArray args, CallbackContextcallbackContext) throws JSONException {if ("beep".equals(action)) {this.beep(args.getLong( 0));callbackContext.success();return true;}return false; // "MethodNotFound" error.}
JavaScript
Java](https://image.slidesharecdn.com/app-webdeveloper-140322192146-phpapp02/85/App-Web-Developer-17-320.jpg)
![Failure callback
cordova.exec(
function(winParam) {},
function(error) {},
"service", "action",
["firstArgument", "secondArgument", 42,false]);
@Overridepublic boolean execute(String action, JSONArray args, CallbackContextcallbackContext) throws JSONException {if ("beep".equals(action)) {this.beep(args.getLong( 0));callbackContext.success();return true;}return false; // "MethodNotFound" error.}
JavaScript
Java](https://image.slidesharecdn.com/app-webdeveloper-140322192146-phpapp02/85/App-Web-Developer-18-320.jpg)
![在JS使用 cordova.exec(...)方法
一個plugin (Service) 可以有多種Action，Action攜帶JSONArray
exec(<successFunction>, <failFunction>,<service>, <action>, [<args>]);
$](https://image.slidesharecdn.com/app-webdeveloper-140322192146-phpapp02/85/App-Web-Developer-28-320.jpg)
App開發 - Web Developer的逆襲
- 1. Web Developer 的逆襲 Cordova (Phonegap) Plugin 加碼演出串接 Parse 2014/03/22 Marty
- 2. 今天玩什麼? 1. Cordova CLI (create、add android、build) 2. GenyMotion (run Android app) 3. Install Cordova Plugin & Trace (camera) 4. How to write a Cordova Plugin 5. BaaS (Parse)
- 3. Web 經由 plugin 獲取超能力 1. Sensor 2. Native API 3. MultiThread 4. Connect anywhere Wifi(Http、TCP/IP)、Bluetooth 5. ...
- 4. 環境要先安裝好 ● Android SDK ● NodeJS ● ● GenyMotion npm install cordova
- 5. cordova create hello com.example.hello HelloWorld Create Android Project 目錄名稱 package Name App Name Step1: cd helloStep2: cordova platform add androidStep3: $ $ $
- 8. install APK cordova build$ cd platforms/android/ant-build$ adb install -r HelloWorld-debug.apk$ Step1: Step2: Step3:
- 10. 來來來，裝plugin cordova plugin add org.apache.cordova.camera$
- 11. 用 JQMDesigner 設計畫面，匯出 html 匯出HTML
- 12. 更新 html 檔案 $project/www/index.html 改成用本地的
- 13. install APK - Camera cordova build$ cd platforms/android/ant-build$ adb install -r HelloWorld-debug.apk$ Step1: Step2: Step3:
- 14. 拍照 App Youtube
- 15. 來來來，來寫plugin
- 16. JavaScript invoke Java's Method cordova.exec( function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42,false]); @Overridepublic boolean execute(String action, JSONArray args, CallbackContextcallbackContext) throws JSONException {if ("beep".equals(action)) {this.beep(args.getLong( 0));callbackContext.success();return true;}return false; // "MethodNotFound" error.} JavaScript Java
- 17. Success callback cordova.exec( function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42,false]); @Overridepublic boolean execute(String action, JSONArray args, CallbackContextcallbackContext) throws JSONException {if ("beep".equals(action)) {this.beep(args.getLong( 0));callbackContext.success();return true;}return false; // "MethodNotFound" error.} JavaScript Java
- 18. Failure callback cordova.exec( function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42,false]); @Overridepublic boolean execute(String action, JSONArray args, CallbackContextcallbackContext) throws JSONException {if ("beep".equals(action)) {this.beep(args.getLong( 0));callbackContext.success();return true;}return false; // "MethodNotFound" error.} JavaScript Java
- 19. getActivity().runOnUiThread(...) @Override public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException { if ("beep".equals(action)) { final long duration = args.getLong(0); cordova.getActivity().runOnUiThread(new Runnable() { public void run() { ... callbackContext.success(); // Thread-safe. } }); return true; } return false; } 與UI互動的事，通知 UiThread去安排執行
- 20. getThreadPool().execute(...) @Overridepublic boolean execute(String action, JSONArray args, finalCallbackContext callbackContext) throws JSONException {if ("beep".equals(action)) {final long duration = args.getLong(0);cordova.getThreadPool().execute(new Runnable() {public void run() {...callbackContext.success(); // Thread-safe.}});return true;}return false;} 在ThreadPool做事，別阻礙 WebCore Thread
- 22. trace camera
- 28. 在JS使用 cordova.exec(...)方法 一個plugin (Service) 可以有多種Action，Action攜帶JSONArray exec(<successFunction>, <failFunction>,<service>, <action>, [<args>]); $
- 31. BaaS (Backend as a Service)
- 32. 先試試存資料...
- 33. 用 Web API 串接 (Parse) http://www.parsecdn.com/js/parse-1.2.18.min.js
- 34. Thanks , 一起玩吧! ● How to call back from java to javascript in cordova ● MOPCON 2013 Session + Parse