App開發 - Web Developer的逆襲

1,406 views

Published on

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

No Downloads
Views
Total views
1,406
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
24
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×