Your SlideShare is downloading. ×
  • Like
  • Save
Building PhoneGap Apps with Drupal.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building PhoneGap Apps with Drupal.

  • 2,320 views
Published

2013/03/09 @ Drupal 嘉義小聚

2013/03/09 @ Drupal 嘉義小聚

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,320
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Drupal X PhoneGap Building Mobile Applications with Drupal Kuro Hsu @ Drupal 嘉義小聚 2013/03/09
  • 2. Why ?
  • 3. 行動裝置是趨勢
  • 4. Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#各平台:“我們有自己的玩法”
  • 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. 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. HTML5 Cross Platform APIs• Events – 加速度計window.addEventListener("devicemotion", accel, false);function accel(ev){ // ev.acceleration.x/y/z; // do something…}
  • 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. 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. Web vs. Native 網頁程式 原生應用 開發成本 相對較低 相對高 開發時間 短 長 可移植性 高 不可 執行效能 快 最快 裝置功能存取 不可 全部 App Store 上架 不可 可 擴充性 無 有
  • 11. Welcome To Facebook
  • 12. Web vs. Hybrid vs. Native 網頁程式 混合型 原生應用 開發成本 相對較低 相對較低 相對高 開發時間 短 短 長 可移植性 高 高 不可 執行效能 快 快 最快 裝置功能存取 不可 大部分可 全部 App Store 上架 不可 可 可 擴充性 無 有 有
  • 13. PhoneGap
  • 14. What is PhoneGap / Cordova ?
  • 15. What is PhoneGap / Cordova ?
  • 16. What is PhoneGap / Cordova ? • PhoneGap 是一個基於 HTML5 跨平台的行 動開發平台。 它提供我們利用現有的 Web 應用程式就能夠 存取原生的功能,並且包裝成手機上的 App 。
  • 17. PhoneGap 如何運作• 1. 首先準備好你的 HTML / CSS / JavaScript 程式
  • 18. PhoneGap 如何運作• 2. 將寫好的 Web 應用程式透過 PhoneGap 包裝起來
  • 19. PhoneGap 如何運作• 2. 將寫好的 Web 應用程式透 過 PhoneGap 包裝起來• 並取得與行動裝置功能的聯繫
  • 20. PhoneGap 如何運作• 3. 最後包裝成一個原生的 App , 並發布至目標平台上 執行。
  • 21. PhoneGap 如何運作
  • 22. PhoneGap 內建 API Accelerometer Events Camera File Capture Geolocation Compass Media Connection Notification Contacts Storage Device
  • 23. http://phonegap.com/about/feature
  • 24. PhoneGap API / Plugins: • 外部模組 / API : 官方雖無內建, 但可以自行寫程式擴充  https://github.com/phonegap/phonegap-plugins
  • 25. Demo
  • 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. 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. Cameranavigator.camera.getPicture(onPhotoDataSuccess, onFail,{ quality: 50, destinationType: destinationType.DATA_URL, targetWidth: 300, targetHeight: 200});
  • 29. Local App ? Internet !!
  • 30. Drupal is the best choice!
  • 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. Setting - Service
  • 33. Setting - Service
  • 34. Setting - Service
  • 35. Setting - Service
  • 36. Setting - Views
  • 37. Demo !
  • 38. {"sessid":"abcdefghijklmnopqrstuvwxyandznowiknowmyabcsnexttimewontyousingwithme", "user":{ "uid":0, "hostname":"127.0.0.1", "roles":{ "1":"anonymous user" }, "cache":0, "session":"", "timestamp":"1321994670" }}
  • 39. 登入
  • 40. 登出
  • 41. 新增文章
  • 42. 刪除文章
  • 43. 自己動手做 App! 5分鐘出好菜
  • 44. PhoneGap Build
  • 45. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi