Drupal X PhoneGap    Building Mobile Applications with Drupal                 Kuro Hsu @ Drupal 嘉義小聚                      ...
Why ?
行動裝置是趨勢
Android          Java   BlackBerry         Java       iOS        Objective-C     Palm OS      C, C++, Pascal    Symbian   ...
HTML5 Cross Platform APIs• Events – 觸控事件 window.addEventListener("touchstart",    touchEvents,   false); window.addEventLi...
HTML5 Cross Platform APIs• Events – 手勢事件 window.addEventListener("gesturestart", gstEvents, false); window.addEventListene...
HTML5 Cross Platform APIs• Events – 加速度計window.addEventListener("devicemotion", accel, false);function accel(ev){  // ev.a...
HTML5 Cross Platform APIs • 地理定位功能window.navigator.geolocation.getCurrentPosition(success, [failure, [options]] );if(windo...
HTML5 Cross Platform APIs• LocalStorage / SessionStoragelocalStorage["bar"] = "hello world!";var foo = localStorage.getIte...
Web vs. Native                 網頁程式   原生應用    開發成本         相對較低   相對高    開發時間          短      長    可移植性          高     不可 ...
Welcome To Facebook
Web vs. Hybrid vs. Native                網頁程式   混合型    原生應用   開發成本         相對較低   相對較低   相對高   開發時間          短      短     ...
PhoneGap
What is PhoneGap / Cordova ?
What is PhoneGap / Cordova ?
What is PhoneGap / Cordova ? • PhoneGap 是一個基於 HTML5 跨平台的行   動開發平台。  它提供我們利用現有的 Web 應用程式就能夠  存取原生的功能,並且包裝成手機上的 App 。
PhoneGap 如何運作• 1. 首先準備好你的 HTML / CSS / JavaScript 程式
PhoneGap 如何運作• 2. 將寫好的 Web 應用程式透過  PhoneGap 包裝起來
PhoneGap 如何運作• 2. 將寫好的 Web 應用程式透  過 PhoneGap 包裝起來• 並取得與行動裝置功能的聯繫
PhoneGap 如何運作• 3. 最後包裝成一個原生的  App , 並發布至目標平台上  執行。
PhoneGap 如何運作
PhoneGap 內建 API  Accelerometer   Events  Camera          File  Capture         Geolocation  Compass         Media ...
http://phonegap.com/about/feature
PhoneGap API / Plugins: • 外部模組 / API :   官方雖無內建, 但可以自行寫程式擴充     https://github.com/phonegap/phonegap-plugins
Demo
Accelerometer APIfunction onSuccess(acceleration) {    alert(Acceleration X:  + acceleration.x + n +          Acceleration...
Media APIfunction playAudio(url) {    var my_media = new Media(url,    // success callback    function() {        console....
Cameranavigator.camera.getPicture(onPhotoDataSuccess, onFail,{  quality: 50,  destinationType: destinationType.DATA_URL,  ...
Local App ? Internet !!
Drupal is the best choice!
模組安裝 Services                     - http://drupal.org/project/services Views                     - http://drupal.org/pro...
Setting - Service
Setting - Service
Setting - Service
Setting - Service
Setting - Views
Demo !
{"sessid":"abcdefghijklmnopqrstuvwxyandznowiknowmyabcsnexttimewontyousingwithme",    "user":{        "uid":0,        "host...
登入
登出
新增文章
刪除文章
自己動手做 App!  5分鐘出好菜
PhoneGap Build
Thanks ! Kuro Hsu   kurotanshi @ gmail.com   http://kuro.tw   http://www.plurk.com/kurotanshi   http://www.facebook.c...
Building PhoneGap Apps with Drupal.
Building PhoneGap Apps with Drupal.
Building PhoneGap Apps with Drupal.
Building PhoneGap Apps with Drupal.
Building PhoneGap Apps with Drupal.
Building PhoneGap Apps with Drupal.
Upcoming SlideShare
Loading in …5
×

Building PhoneGap Apps with Drupal.

2,561 views
2,524 views

Published on

2013/03/09 @ Drupal 嘉義小聚

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

No Downloads
Views
Total views
2,561
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Building PhoneGap Apps with Drupal.

  1. 1. Drupal X PhoneGap Building Mobile Applications with Drupal Kuro Hsu @ Drupal 嘉義小聚 2013/03/09
  2. 2. Why ?
  3. 3. 行動裝置是趨勢
  4. 4. Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#各平台:“我們有自己的玩法”
  5. 5. HTML5 Cross Platform APIs• Events – 觸控事件 window.addEventListener("touchstart", touchEvents, false); window.addEventListener("touchmove", touchEvents, false); window.addEventListener("touchend", touchEvents, false); window.addEventListener("touchcancel", touchEvents, false); function touchEvents(ev){ // do something... }
  6. 6. HTML5 Cross Platform APIs• Events – 手勢事件 window.addEventListener("gesturestart", gstEvents, false); window.addEventListener("gestureend", gstEvents, false); window.addEventListener("gesturechange", gstEvents, false); function gstEvents(ev){ // do something... }
  7. 7. HTML5 Cross Platform APIs• Events – 加速度計window.addEventListener("devicemotion", accel, false);function accel(ev){ // ev.acceleration.x/y/z; // do something…}
  8. 8. HTML5 Cross Platform APIs • 地理定位功能window.navigator.geolocation.getCurrentPosition(success, [failure, [options]] );if(window.navigator.geolocation){ var geo = navigatoe.geolocation(); geo.getCurrentPosition(getPosSuccess);}function getPosSuccess(pos){ var lat = pos.coords.latitude; var lon = pos.coords.longitude;}
  9. 9. HTML5 Cross Platform APIs• LocalStorage / SessionStoragelocalStorage["bar"] = "hello world!";var foo = localStorage.getItem("bar");localStorage.setItem("bar", "Hello JavaScript!");localStorage.removeItem("bar");localStorage.clear();
  10. 10. Web vs. Native 網頁程式 原生應用 開發成本 相對較低 相對高 開發時間 短 長 可移植性 高 不可 執行效能 快 最快 裝置功能存取 不可 全部 App Store 上架 不可 可 擴充性 無 有
  11. 11. Welcome To Facebook
  12. 12. Web vs. Hybrid vs. Native 網頁程式 混合型 原生應用 開發成本 相對較低 相對較低 相對高 開發時間 短 短 長 可移植性 高 高 不可 執行效能 快 快 最快 裝置功能存取 不可 大部分可 全部 App Store 上架 不可 可 可 擴充性 無 有 有
  13. 13. PhoneGap
  14. 14. What is PhoneGap / Cordova ?
  15. 15. What is PhoneGap / Cordova ?
  16. 16. What is PhoneGap / Cordova ? • PhoneGap 是一個基於 HTML5 跨平台的行 動開發平台。 它提供我們利用現有的 Web 應用程式就能夠 存取原生的功能,並且包裝成手機上的 App 。
  17. 17. PhoneGap 如何運作• 1. 首先準備好你的 HTML / CSS / JavaScript 程式
  18. 18. PhoneGap 如何運作• 2. 將寫好的 Web 應用程式透過 PhoneGap 包裝起來
  19. 19. PhoneGap 如何運作• 2. 將寫好的 Web 應用程式透 過 PhoneGap 包裝起來• 並取得與行動裝置功能的聯繫
  20. 20. PhoneGap 如何運作• 3. 最後包裝成一個原生的 App , 並發布至目標平台上 執行。
  21. 21. PhoneGap 如何運作
  22. 22. PhoneGap 內建 API Accelerometer Events Camera File Capture Geolocation Compass Media Connection Notification Contacts Storage Device
  23. 23. http://phonegap.com/about/feature
  24. 24. PhoneGap API / Plugins: • 外部模組 / API : 官方雖無內建, 但可以自行寫程式擴充  https://github.com/phonegap/phonegap-plugins
  25. 25. Demo
  26. 26. Accelerometer APIfunction onSuccess(acceleration) { alert(Acceleration X: + acceleration.x + n + Acceleration Y: + acceleration.y + n + Acceleration Z: + acceleration.z + n + Timestamp: + acceleration.timestamp +n);};function onError() { alert(onError!);};var watchID =navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
  27. 27. Media APIfunction playAudio(url) { var my_media = new Media(url, // success callback function() { console.log("playAudio(): Audio Success"); }, // error callback function(err) { console.log("playAudio(): Audio Error:" + err); }); // Play audio my_media.play();}
  28. 28. Cameranavigator.camera.getPicture(onPhotoDataSuccess, onFail,{ quality: 50, destinationType: destinationType.DATA_URL, targetWidth: 300, targetHeight: 200});
  29. 29. Local App ? Internet !!
  30. 30. Drupal is the best choice!
  31. 31. 模組安裝 Services - http://drupal.org/project/services Views - http://drupal.org/project/views Views datasource - http://drupal.org/project/views_datasource Chaos tools - http://drupal.org/project/ctools
  32. 32. Setting - Service
  33. 33. Setting - Service
  34. 34. Setting - Service
  35. 35. Setting - Service
  36. 36. Setting - Views
  37. 37. Demo !
  38. 38. {"sessid":"abcdefghijklmnopqrstuvwxyandznowiknowmyabcsnexttimewontyousingwithme", "user":{ "uid":0, "hostname":"127.0.0.1", "roles":{ "1":"anonymous user" }, "cache":0, "session":"", "timestamp":"1321994670" }}
  39. 39. 登入
  40. 40. 登出
  41. 41. 新增文章
  42. 42. 刪除文章
  43. 43. 自己動手做 App! 5分鐘出好菜
  44. 44. PhoneGap Build
  45. 45. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi

×