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

Building PhoneGap Apps with Drupal.

on

  • 1,542 views

2013/03/09 @ Drupal 嘉義小聚

2013/03/09 @ Drupal 嘉義小聚

Statistics

Views

Total Views
1,542
Views on SlideShare
1,480
Embed Views
62

Actions

Likes
5
Downloads
0
Comments
0

2 Embeds 62

http://www.im.wfu.edu.tw 58
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. Building PhoneGap Apps with Drupal. Presentation Transcript

  • Drupal X PhoneGap Building Mobile Applications with Drupal Kuro Hsu @ Drupal 嘉義小聚 2013/03/09
  • Why ?
  • 行動裝置是趨勢
  • Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#各平台:“我們有自己的玩法”
  • 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... }
  • 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... }
  • HTML5 Cross Platform APIs• Events – 加速度計window.addEventListener("devicemotion", accel, false);function accel(ev){ // ev.acceleration.x/y/z; // do something…}
  • 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;}
  • HTML5 Cross Platform APIs• LocalStorage / SessionStoragelocalStorage["bar"] = "hello world!";var foo = localStorage.getItem("bar");localStorage.setItem("bar", "Hello JavaScript!");localStorage.removeItem("bar");localStorage.clear();
  • Web vs. Native 網頁程式 原生應用 開發成本 相對較低 相對高 開發時間 短 長 可移植性 高 不可 執行效能 快 最快 裝置功能存取 不可 全部 App Store 上架 不可 可 擴充性 無 有
  • Welcome To Facebook
  • Web vs. Hybrid vs. Native 網頁程式 混合型 原生應用 開發成本 相對較低 相對較低 相對高 開發時間 短 短 長 可移植性 高 高 不可 執行效能 快 快 最快 裝置功能存取 不可 大部分可 全部 App Store 上架 不可 可 可 擴充性 無 有 有
  • 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 Connection Notification Contacts Storage Device
  • 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 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);
  • 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();}
  • Cameranavigator.camera.getPicture(onPhotoDataSuccess, onFail,{ quality: 50, destinationType: destinationType.DATA_URL, targetWidth: 300, targetHeight: 200});
  • Local App ? Internet !!
  • Drupal is the best choice!
  • 模組安裝 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
  • Setting - Service
  • Setting - Service
  • Setting - Service
  • Setting - Service
  • Setting - Views
  • Demo !
  • {"sessid":"abcdefghijklmnopqrstuvwxyandznowiknowmyabcsnexttimewontyousingwithme", "user":{ "uid":0, "hostname":"127.0.0.1", "roles":{ "1":"anonymous user" }, "cache":0, "session":"", "timestamp":"1321994670" }}
  • 登入
  • 登出
  • 新增文章
  • 刪除文章
  • 自己動手做 App! 5分鐘出好菜
  • PhoneGap Build
  • Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi