HTML5 + PhoneGap + Android

Size: px

Start display at page:

Download "HTML5 + PhoneGap + Android"

虾湛
6 years ago
Views:

1 HTML5 + PhoneGap + Android 建國科技大學資管系饒瑞佶 2013/5 V1 2016/7 V2

2 開始前建議您準備一台實體手機!

3 Native App Web App 與 Hybrid App 比較表 Native App Web App Hybrid App 特性不同的行動裝置作業可以跨行動裝置將 Web App 與系統各自提供開發需要的 SDK, 彼此並不相容平台, 直接透過瀏覽器來執行 Native App 兩種開發方式混合使用, 截長補短需要的 IT 技術 Java, Object-C 或.NET HTML5+CSS3+ 綜合前兩者等 JavaScript 跨平台能力低強強使用者經驗與效最佳尚可可能與行動裝置本機最佳弱尚可資源整合性學習門檻高最低低上架銷售可不行可

4 相關技術方塊 HTML5:HTML5 + jquery(javascript) + jquery Mobile PhoneGap(Cordova): 行動裝置硬體控制模組 HTML5 與 PhoneGap 透過瀏覽器的 webkit 串接 ( 中介者就是 JavaScript) 最後透過原始 SDK(Android ios Windows) 封裝上述兩者

5 PhoneGap 又稱 Apache Cordova ( 賣給 Adobe) 行動開發框架 (frame) 透過這個框架, 開發者可以專心寫 HTML, JavaScript 與 CSS, 與 Native 溝通的事就交給 PhoneGap 所以寫網頁的人也可以加入行動 App 的開發支援 Android 與 ios 是網頁 /JS 與原生程式碼 (JAVA Object-C SWIFT C#) 間的溝通橋樑

6 串接示意圖行動裝置本機硬體 GPS Compass Camera WiFi BT Native Code 控制 + Webkit HTML5 Browser Webkit Javascript interface Web App 6

7 安裝 PhoneGap/Cordova

8 安裝 PhoneGap 前準備 ide/cli/ 安裝 JDK 安裝 Android Studio with SDK 安裝 nodejs( Nodejs 建議不要安裝在路徑文字有空白的目錄上安裝 git, 安裝後建議登出 windows 再登入, 讓 Path 生效

9 輸入 node -v 安裝 nodejs 後

10 安裝 git

11 安裝 git 後登出 windows 後再登入, 讓 path 生效輸入 git --version

12 安裝 PhoneGap 確認 nodejs 與 git 安裝完成後輸入 npm install -g cordova

13 將 C:\Users\ 使用者代號 \AppData\Roaming\npm 加入 path 登出 windows 後再登入, 讓 path 生效

14 建立 PhoneGap Project 輸入 cordova create d:\cordova rcjao.ctu.im MyCordova 正確安裝後的訊息

15 D:\Cordova 實際目錄內容目前是空的

16 可能發生

17 Update cordova 需要一點時間

18 After update

19 專案中加入 Android 平台切換到專案目錄 cd Cordova 輸入 cordova platform add android

20 Add android platform

21 platforms 目錄出現 android 目錄與相關檔案

22 執行專案確認已安裝行動裝置的 adb USB 驅動, 且行動裝置正確連接到電腦切換到專案目錄輸入 cordova run

23 需要一段時間

26 In Device 如果你在裝置上看到這個畫面, 那就成功了!

$後續直接修改 d:\cordova 專案內的檔案需要修改的是 www 目錄內的 index.$

27 後續直接修改 d:\cordova 專案內的檔案需要修改的是 www 目錄內的 index.html 與 www\js 內的 index.js 如果要調整 Android 那就需要改 platforms\android

28 將 PhoneGap 專案載入 Android Studio

29 Import Project

30 選擇 d:\cordova\platforms\android

31 假如出現

32 After few minutes

33 run

34 In device 跟之前執行結果一致

35 整合 jquery Mobile

$先整合 jquery 與 jquery Mobile 加入 jquery 與 jquery 的相關 js 到 assets\www 內加入下列 tag 到 assets\www\index.html 中 <script type="text/javascript" src="jquery-2.2.4.$

36 先整合 jquery 與 jquery Mobile 加入 jquery 與 jquery 的相關 js 到 assets\www 內加入下列 tag 到 assets\www\index.html 中 <script type="text/javascript" src="jquery min.js"></script> <link rel="stylesheet" href="jquery.mobile min.css"> <script type="text/javascript" src="jquery.mobile min.js"></script>

37 修改 index.html <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script type="text/javascript" src="jquery min.js"></script> <link rel="stylesheet" href="jquery.mobile min.css"> <script type="text/javascript" src="jquery.mobile min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8" src="js/index.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>phonegap 測試 </h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#"> 選項 1</a></li> <li><a href="#"> 選項 2</a></li> <li><a href="#"> 選項 3</a></li> </ul> </div> <div data-role="footer"> <h1>2013/5/20</h1> </div> </div> </body> </html>

38 result

39 提醒到這裡只是載入 HTML 與 jquery/jquery Mobile, 尚未碰到 PhoneGap 要可以執行 PhoneGap, 需要有 cordova.js 1 個 res/xml 的目錄, 裡面需要一個檔案 config.xml 修改 AndroidManifest.xml 載入需要的 plugins

40 使用時主要是修改 index.html 加入需要的新版面 html 加入對應的處理事件 javascript 程式, 例如 index.html 對應的是 www\js\index.js

41 實際應用 (I) GPS 定位

42 建立 Locator 專案調用 GPS 定位 cordova create d:\locator rcjao.ctu.im Locator 加入 android platform cordova platform add android

加入 plugins cordova plugin add https://git-wipus.

43 加入 plugins cordova plugin add

44 Locator 專案載入 Android Studio 自動加入權限

45 修改 index.html 可以載入 Android studio 後修改 <body> <div class="app"> <div id="messagediv"></div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript">app.initialize();</script> </body> 呼叫 index.js 內的 initialize() 函式

46 修改 www\js\index.js ondeviceready: function() { app.display("locating..."); app.watchlocation(); },

47 watchlocation: function() { // onsuccess Callback // 成功取得 GPS 座標 function onsuccess(position) { app.clear(); app.display('latitude: ' + position.coords.latitude.tofixed(6)); app.display('longitude: ' + position.coords.longitude.tofixed(6)); app.display(new Date().toString()); } // 未取得 GPS 座標 // function onerror(error) { app.display(error.message); } // 設定 30 秒逾時則顯示錯誤 // var watchid = navigator.geolocation.watchposition(onsuccess, onerror, { timeout: 30000, enablehighaccuracy: true }); },

48 display: function(message) { var label = document.createtextnode(message), linebreak = document.createelement("br"); messagediv.appendchild(linebreak); // add a line break messagediv.appendchild(label); // add the text }, clear: function() { messagediv.innerhtml = ""; }

49 結果

50 實際應用 (II) 照相機

51 使用目前專案加入相機 plugin cordova plugin add cordova-plugin-camera

52 Android 專案會自動更新加入 plugin

53 使用 Camera 測試看看 Index.html 上加入連結 takephoto.html <body style="font-size: 1.4em;"> <a href="takephoto.html">camera</a> <br> <div class="app"> <div id="messagediv"></div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body>

54 takephoto.html <body> <div data-role="page"> <div data-role="header"> <h1>phonegap 照相 </h1> </div> <div data-role="content"> <a data-role="button" data-theme="b" id="take_photo"> 開始拍照 </a> <img style="display:none;width:180px;height:180px;" id="smallimage" src="" /> </div> <div data-role="footer"> <h1>2013/5/20</h1> </div> </div> </body> 啟動照相顯示照片

55 <script language="javascript"> $(document).ready(function(){ var picturesource; // 圖片來源 var destinationtype; // 設定資料回傳的格式 // 等待 PhoneGap 載入 document.addeventlistener("deviceready",ondeviceready,false); // PhoneGap 載入完畢 function ondeviceready() { picturesource=navigator.camera.picturesourcetype; destinationtype=navigator.camera.destinationtype; } // 使用手機上的相機拍照 $('#take_photo').click(function(){ navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 50, destinationtype: Camera.DestinationType.FILE_URI }); }); // 成功取得照片之後呼叫這個 function function onphotodatasuccess(imageuri) { // 顯示已拍攝的照片 $('#smallimage').attr("src",imageuri); $('#smallimage').show(); } // 當有錯誤發生時觸發此 function function onfail(message) { alert('failed because: ' + message); } }); </script>

56 結果

57 結果

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript