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.

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:
$
$
$

6. WebView - 先天限制!

7. Android activity

8. install APK
cordova build$
cd platforms/android/ant-build$
adb install -r HelloWorld-debug.apk$
Step1:
Step2:
Step3:

9. 沒有Android手機 ?

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

21. Camera code trace

22. trace camera

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

24. org.apache.cordova.camera.CameraLauncher
同時只能用一
個相機?

25. 好了，開始自幹 Cordova plugin

26. 先宣告，ServiceName、實作類別
記得 ServiceName、實作類別(含Class)
Service
Name
package.
Class

27. 新增Echo類別
Copy & Read，了解參數傳遞和用法
繼承
action
找不到方法
回呼
成功 & 失敗
方法

28. 在JS使用 cordova.exec(...)方法
一個plugin (Service) 可以有多種Action，Action攜帶JSONArray
exec(<successFunction>, <failFunction>,<service>, <action>, [<args>]);
$

29. config.xml
index.html
Echo.java

30. 完成 Cordova plugin

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