app開發 - web developer的逆襲
TRANSCRIPT
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$
更新 html 檔案 $project/www/index.html
改成用本地的
install APK - Camera
cordova build$
cd platforms/android/ant-build$
adb install -r HelloWorld-debug.apk$
Step1:
Step2:
Step3:
來來來，來寫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