• Save
Building PhoneGap Apps with Drupal.
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Building PhoneGap Apps with Drupal.

on

  • 2,293 views

2013/03/09 @ Drupal 嘉義小聚

2013/03/09 @ Drupal 嘉義小聚

Statistics

Views

Total Views
2,293
Views on SlideShare
2,229
Embed Views
64

Actions

Likes
5
Downloads
0
Comments
0

2 Embeds 64

http://www.im.wfu.edu.tw 60
https://www.google.com.tw 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building PhoneGap Apps with Drupal. Presentation 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