Web Developer 的逆襲Cordova (Phonegap) Plugin

加碼演出串接 Parse

2014/03/22 Marty

今天玩什麼?

1. Cordova CLI (create、add android、build)

2. GenyMotion (run Android app)

3. Install Cordova Plugin & Trace (camera)

4. How to write a Cordova Plugin5. BaaS (Parse)

Web 經由 plugin 獲取超能力

1. Sensor2. Native API3. MultiThread4. Connect anywhere Wifi(Http、TCP/IP)、Bluetooth5. ...

環境要先安裝好

● Android SDK● NodeJS●● GenyMotion

npm install cordova

cordova create hello com.example.hello HelloWorld

Create Android Project

目錄名稱

package Name

App Name

Step1:

cd helloStep2:

cordova platform add androidStep3:

$

$

$

WebView - 先天限制!

Android activity

install APK

cordova build$

cd platforms/android/ant-build$

adb install -r HelloWorld-debug.apk$

Step1:

Step2:

Step3:

沒有Android手機 ?

來來來，裝plugin

cordova plugin add org.apache.cordova.camera$

用 JQMDesigner 設計畫面，匯出 html匯出HTML

更新 html 檔案 $project/www/index.html

改成用本地的

install APK - Camera

cordova build$

cd platforms/android/ant-build$

adb install -r HelloWorld-debug.apk$

Step1:

Step2:

Step3:

拍照 App

Youtube

來來來，來寫plugin

JavaScript invoke Java's Method

cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42,false]);

@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if ("beep".equals(action)) { this.beep(args.getLong( 0)); callbackContext.success(); return true; } return false; // "MethodNotFound" error.}

JavaScript

Java

Success callback

cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42,false]);

@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if ("beep".equals(action)) { this.beep(args.getLong( 0)); callbackContext.success(); return true; } return false; // "MethodNotFound" error.}

JavaScript

Java

Failure callback

cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42,false]);

@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if ("beep".equals(action)) { this.beep(args.getLong( 0)); callbackContext.success(); return true; } return false; // "MethodNotFound" error.}

JavaScript

Java

getActivity().runOnUiThread(...)

@Overridepublic 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去安排執行

getThreadPool().execute(...)

@Overridepublic boolean execute(String action, JSONArray args, final CallbackContext 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

Camera code trace

trace camera

www/plugins/...camera/www/Camera.js

org.apache.cordova.camera.CameraLauncher

同時只能用一個相機?

好了，開始自幹 Cordova plugin

先宣告，ServiceName、實作類別

記得 ServiceName、實作類別(含Class)

ServiceName package.

Class

新增Echo類別

Copy & Read，了解參數傳遞和用法

繼承

action

找不到方法

回呼成功 & 失敗方法

在JS使用 cordova.exec(...)方法

一個plugin (Service) 可以有多種Action，Action攜帶JSONArray

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);$

config.xml

index.html

Echo.java

完成 Cordova plugin

BaaS (Backend as a Service)

先試試存資料...

用 Web API 串接 (Parse)

http://www.parsecdn.com/js/parse-1.2.18.min.js

Thanks , 一起玩吧!

● How to call back from java to javascript in cordova

● MOPCON 2013 Session + Parse