0
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...
Web 經由 plugin 獲取超能力
1. Sensor
2. Native API
3. MultiThread
4. Connect anywhere Wifi(Http、TCP/IP)、Bluetooth
5. ...
環境要先安裝好
● Android SDK
● NodeJS
●
● GenyMotion
npm install cordova
cordova create hello com.example.hello HelloWorld
Create Android Project
目錄名稱
package Name
App Name
Step1:
cd helloStep2:
...
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:
Ste...
拍照 App
Youtube
來來來,來寫plugin
JavaScript invoke Java's Method
cordova.exec(
function(winParam) {},
function(error) {},
"service", "action",
["firstArgum...
Success callback
cordova.exec(
function(winParam) {},
function(error) {},
"service", "action",
["firstArgument", "secondAr...
Failure callback
cordova.exec(
function(winParam) {},
function(error) {},
"service", "action",
["firstArgument", "secondAr...
getActivity().runOnUiThread(...)
@Override
public boolean execute(String action, JSONArray args, final
CallbackContext cal...
getThreadPool().execute(...)
@Overridepublic boolean execute(String action, JSONArray args, finalCallbackContext callbackC...
Camera code trace
trace camera
www/plugins/...camera/www/Camera.js
org.apache.cordova.camera.CameraLauncher
同時只能用一
個相機?
好了,開始自幹 Cordova plugin
先宣告,ServiceName、實作類別
記得 ServiceName、實作類別(含Class)
Service
Name
package.
Class
新增Echo類別
Copy & Read,了解參數傳遞和用法
繼承
action
找不到方法
回呼
成功 & 失敗
方法
在JS使用 cordova.exec(...)方法
一個plugin (Service) 可以有多種Action,Action攜帶JSONArray
exec(<successFunction>, <failFunction>,<service...
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
Upcoming SlideShare
Loading in...5
×

App開發 - Web Developer的逆襲

809

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
809
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "App開發 - Web Developer的逆襲"

  1. 1. Web Developer 的逆襲 Cordova (Phonegap) Plugin 加碼演出串接 Parse 2014/03/22 Marty
  2. 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. 3. Web 經由 plugin 獲取超能力 1. Sensor 2. Native API 3. MultiThread 4. Connect anywhere Wifi(Http、TCP/IP)、Bluetooth 5. ...
  4. 4. 環境要先安裝好 ● Android SDK ● NodeJS ● ● GenyMotion npm install cordova
  5. 5. cordova create hello com.example.hello HelloWorld Create Android Project 目錄名稱 package Name App Name Step1: cd helloStep2: cordova platform add androidStep3: $ $ $
  6. 6. WebView - 先天限制!
  7. 7. Android activity
  8. 8. install APK cordova build$ cd platforms/android/ant-build$ adb install -r HelloWorld-debug.apk$ Step1: Step2: Step3:
  9. 9. 沒有Android手機 ?
  10. 10. 來來來,裝plugin cordova plugin add org.apache.cordova.camera$
  11. 11. 用 JQMDesigner 設計畫面,匯出 html 匯出HTML
  12. 12. 更新 html 檔案 $project/www/index.html 改成用本地的
  13. 13. install APK - Camera cordova build$ cd platforms/android/ant-build$ adb install -r HelloWorld-debug.apk$ Step1: Step2: Step3:
  14. 14. 拍照 App Youtube
  15. 15. 來來來,來寫plugin
  16. 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. 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. 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. 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. 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. 21. Camera code trace
  22. 22. trace camera
  23. 23. www/plugins/...camera/www/Camera.js
  24. 24. org.apache.cordova.camera.CameraLauncher 同時只能用一 個相機?
  25. 25. 好了,開始自幹 Cordova plugin
  26. 26. 先宣告,ServiceName、實作類別 記得 ServiceName、實作類別(含Class) Service Name package. Class
  27. 27. 新增Echo類別 Copy & Read,了解參數傳遞和用法 繼承 action 找不到方法 回呼 成功 & 失敗 方法
  28. 28. 在JS使用 cordova.exec(...)方法 一個plugin (Service) 可以有多種Action,Action攜帶JSONArray exec(<successFunction>, <failFunction>,<service>, <action>, [<args>]); $
  29. 29. config.xml index.html Echo.java
  30. 30. 完成 Cordova plugin
  31. 31. BaaS (Backend as a Service)
  32. 32. 先試試存資料...
  33. 33. 用 Web API 串接 (Parse) http://www.parsecdn.com/js/parse-1.2.18.min.js
  34. 34. Thanks , 一起玩吧! ● How to call back from java to javascript in cordova ● MOPCON 2013 Session + Parse
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×