HTML5 + PhoneGap + Android

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

Native App、Web App與Hybrid App之比較表

相關技術方塊 • HTML5：HTML5 + jQuery(Javascript) + jQuery Mobile • PhoneGap：行動裝置控制模組(例如硬體) • HTML5與PhoneGap透過瀏覽器的webkit串接 • 最後透過SDK(Android、iOS、Windows)封裝兩者

PhoneGap • 又稱 Apache Cordova • 行動開發框架(frame) • 透過這個框架，開發者可以專心寫 HTML, JavaScript 與 CSS，與 Native 溝通的事就交給 PhoneGap • 所以寫網頁的人也可以加入行動App的開發

利用PhoneGap開發Android • http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html 其他系統： http://docs.phonegap.com/en/2.7.0/guide_getting-started_index.md.html#Getting%20Started%20Guides

下載PhoneGap • Download the latest copy of PhoneGap and extract its contents. We will be working with the Android directory. • http://phonegap.com/download/

PhoneGap for Android • 步驟0：準備好需要的網頁 • 步驟1：使用Eclipse建立Android專案 • 步驟2：下載PhoneGap開發包(目前是2.7版) • 步驟3：解壓縮PhoneGap開發包，取出lib\android目錄內的cordova-2.7.0.jar與cordova-2.7.0.js

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

步驟4：在Android專案內的assets目錄建立www目錄，用來放置HTML網頁(離線模式)步驟4：在Android專案內的assets目錄建立www目錄，用來放置HTML網頁(離線模式) • 步驟5：把cordova.jar(原始是cordova-2.7.0.jar，建議更名)複製到/libs裡，cordova.js(原始是cordova-2.7.0.js)複製到/assets/www裡

步驟6：修改程式 • 把Class extends 從Activity改成 DroidGap • 把setContentView(R.layout.main);改成 super.loadUrl(“file:///android_asset/www/index.html”);

步驟7：將既有的網頁加入到assets/www內，配合步驟6，首頁命名為index.html步驟7：將既有的網頁加入到assets/www內，配合步驟6，首頁命名為index.html <!DOCTYPE HTML> <html> <head> <title>Hello Inside</title> <script type="text/javascript" charset="utf-8″ src="cordova.js"></script> </head> <body> <h1>PhoneGap架構測試</h1> </body> </html> 發佈測試看看！

先整合jQuery與jQuery Mobile • 加入jQuery與jQuery的相關js到assets\www內 • 加入下列tag到assets\www\index.html中 • <meta charset="utf-8" /> • <meta name="viewport" content="width=device-width, initial-scale=1"/> • <script src="jquery-1.9.1.min.js"></script> • <link rel="stylesheet" href="jquery.mobile-1.3.0.min.css"> • <script src="jquery.mobile-1.3.0.min.js"></script>

修改index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="jquery.mobile-1.3.0.min.css"> <script src="jquery.mobile-1.3.0.min.js"></script> <script type="text/javascript" charset="utf-8″ src="cordova.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>

result

提醒 • 到這裡只是可以載入HTML與jQuery，尚未碰到PhoneGap • 要可以執行PhoneGap，除了cordova.jar與cordova.js外，還需要 • 1個res/xml的目錄，裡面需要一個檔案config.xml (可以從下載的PhoneGap包內取得) • 修改AndroidManifest.xml 沒這個會出現少cordova class 沒這個會無法啟動cordova

修改AndroidManifest.xml • 加入一堆硬體權限 <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.RECORD_VIDEO"/> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />

PhoneGap呼叫架構 • 載入js • <script type="text/javascript" src="cordova.js"></script> • 載入PhoneGap • document.addEventListener("deviceready",onDeviceReady,false); • 載入完畢，執行需要的動作 • function onDeviceReady() • 硬體呼叫 • Navigator.硬體.動作

先測試看看 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>PhoneGap</title> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript"> function onDeviceReady() { document.getElementById("hihi").innerHTML = "跨出成功的第一步^^"; } function init(){ document.addEventListener("deviceready", onDeviceReady, false); } window.onload = init; </script> </head> <body> <h1 id="hihi">沒成功, 繼續加油!</h1> </body> </html> • 寫一個測試網頁(傳統js呼叫)

但如果把jQuery與PhoneGap合在一起 <script> $(document).ready(function{ document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.getElementById("hihi").innerHTML = "跨出成功的第一步^^"; } }); </script> <div data-role="content"> <div id="hihi">沒成功, 繼續加油!</div> <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> 結果不能執行….

需要改寫jQuery before <script> $(document).ready(function{ document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.getElementById("hihi").innerHTML = "跨出成功的第一步^^"; } }); </script> after <script> $(document).bind("mobileinit", function() { $.support.cors = true; $.mobile.allowCrossDomainPages = true; }); document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.getElementById("hihi").innerHTML = "跨出成功的第一步^^"; } </script>

終於全部整合了！

使用Camera測試看看 • Index.html上加入連結takephoto.html <div data-role="content"> <div id="hihi">沒成功, 繼續加油!</div> <ul data-role="listview" data-inset="true"> <li><a href="takephoto.html" data-ajax="false">camera</a></li> <li><a href="#">選項2</a></li> <li><a href="#">選項3</a></li> </ul> </div>

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> 啟動照相顯示照片

<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>

其他硬體 http://docs.phonegap.com/en/2.4.0/cordova_camera_camera.md.html#Camera

HTML5 + PhoneGap + Android

HTML5 + PhoneGap + Android

Presentation Transcript

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5