[ICOS 2013] 利用 PhoneGap 與 HTML5 開發手機應用程式

26,981 views
26,655 views

Published on

[ICOS 2013] 利用 PhoneGap & HTML5 開發手機應用程式

2013/04/27

Published in: Technology
1 Comment
82 Likes
Statistics
Notes
  • 請問PhoneGap開發的Android及IOS的APP, 程式是直接連Server的資料庫獲取資料, 或在Server端建立API程式, 透過API接收回傳的JSON格式的資料來顯示呢?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
26,981
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
82
Embeds 0
No embeds

No notes for slide

[ICOS 2013] 利用 PhoneGap 與 HTML5 開發手機應用程式

  1. 1. 利用 PhoneGap & HTML5開發手機應用程式Kuro Hsu @ ICOS 20132013/04/27
  2. 2. Why ?
  3. 3. 行動需求劇烈成長Source: http://wearesocial.sg/blog/2013/04/social-brands-go-mobile-or-stand-still/
  4. 4. 開發者表示: 哭哭 Android JavaBlackBerry JavaiOS Objective-CPalm OS C, C++, PascalSymbian C++Windows Phone C#
  5. 5. http://mobilehtml5.org/
  6. 6. Can I use... - http://caniuse.com/
  7. 7. Web vs. NativeWeb Native開發成本 相對較低 相對較高開發時間 快速 冗長可移植性 高 不可執行效能 ? 快速支援原生功能 無 完全支援上架至賣場 不可 可離線使用 不可 可
  8. 8. WEB NATIVE
  9. 9. Web vs. Hybrid vs. NativeWeb Hybrid Native開發成本 相對較低 相對較低 相對較高開發時間 快速 快速 冗長可移植性 好 相對較好 不可執行效能 ? ? 快速支援原生功能 無 可 完全支援上架至賣場 不可 可 可離線使用 不可 可 可
  10. 10. 嗯... ?
  11. 11. “ Our Biggest Mistake Was Betting Too Much On HTML5 “「Facebook 錯誤地將賭注押在HTML5 上,這是我們最大的錯誤。」
  12. 12. 慘遭打臉
  13. 13. Source: http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story“ So, when Mark Zuckerberg said HTML5 wasnt ready,we took a little offense to the comment.”「HTML5 絕不是 Facebook 行動 App 龜速的原因!」fastbook
  14. 14. PhoneGap
  15. 15.  專案從 2008 年開始 iPhoneDevCamp 最早期的原形是用來擴充 Geolocation 功能 2011 年開發團隊被 Adobe 收購,並將 PhoneGap 專案捐至 Apache 基金會。PhoneGap
  16. 16. Apache Cordova( Since PhoneGap 1.5.0 )
  17. 17. Apache Cordova Cordova 是個開源 (open source) 專案 PhoneGap 是它的實作 兩者的關係就像是 Webkit 與 Chrome http://incubator.apache.org/cordova/
  18. 18. 由唐鳳及 g0v 成員開發,並利用 PhoneGap 包裝成為離線 App.線上版:https://moedict.tw/
  19. 19. • PhoneGap 是一個基於 HTML5 的跨平台開發工具。• 利用網頁應用程式就能夠存取裝置上的原生功能,且能包裝成手機上的應用程式 (App) 。What is PhoneGap / Cordova ?
  20. 20. • 無邊框的瀏覽器 (Chromeless Browser)• 透過 PhoneGap 將 HTML 程式包裝成原生 App• 提供 JavaScript API 存取裝置功能What is PhoneGap / Cordova ?
  21. 21. 1. 首先準備好你的 HTML / CSS / JavaScript 程式PhoneGap 如何運作
  22. 22. PhoneGap 如何運作2. 將寫好的 Web 應用程式透過 PhoneGap 包裝起來 ( WebView )
  23. 23. PhoneGap 如何運作2. 將寫好的 Web 應用程式透過 PhoneGap 包裝起來,且透過 PhoneGap API 取得與行動裝置功能的聯繫
  24. 24. 3. 最後包裝成原生的應用程式,即可發佈至目標平台上。PhoneGap 如何運作
  25. 25. PhoneGap 如何運作
  26. 26. PhoneGap APIs / Plugins: Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization * InAppBrowser * Media Notification Storage Splashscreen *
  27. 27. Source: http://phonegap.com/about/feature
  28. 28.  https://github.com/phonegap/phonegap-pluginsPhoneGap APIs / Plugins:
  29. 29. Demo
  30. 30. 加速度計 Accelerometer APIfunction onSuccess(acceleration) {alert(Acceleration X: + acceleration.x + n +Acceleration Y: + acceleration.y + n +Acceleration Z: + acceleration.z + n +Timestamp: + acceleration.timestamp );};function onError() {alert(onError!);};var watchID =navigator.accelerometer.watchAcceleration(onSuccess, onError, options );
  31. 31. 多媒體 Media APIfunction playAudio(url) {var my_media = new Media( url ,// success callbackfunction() {console.log("playAudio(): Audio Success");},// error callbackfunction(err) {console.log("playAudio(): Audio Error:" + err);});// Play audiomy_media.play();}
  32. 32. UI 元件: CSS & HTML
  33. 33. 相機 Camera APInavigator.camera.getPicture(onPhotoDataSuccess, onFail,{quality: 50,destinationType: destinationType.DATA_URL,targetWidth: 300,targetHeight: 200});
  34. 34. 觸控事件 Touch Eventwindow.addEventListener(touchstart,touch_handler, false);window.addEventListener(touchmove,touch_handler, false);window.addEventListener(touchend,touch_handler, false);function touch_handler(e) {// do something......}
  35. 35. 動手做 App!
  36. 36. 動手做 App!之 5 分鐘出好菜
  37. 37. PhoneGap Build
  38. 38. PhoneGap Build1. 首先準備好你的 HTML / CSS / JavaScript2. 填寫 config.xml 檔案3. 將網頁及 config.xml 打包成 zip 檔案4. 上傳至 PhonGap Build -> 完成!
  39. 39. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi

×