html5 + phonegap + android 建國科技大學 資管系 饒瑞佶 2013/5 v1
TRANSCRIPT
HTML5 + PhoneGap + Android
建國科技大學 資管系饒瑞佶
2013/5 V1
Native App Web App Hybrid App特性 不同的行動裝置作業
系統各自提供開發需要的 SDK ，彼此並不相容
可以跨行動裝置平台，直接透過瀏覽器來執行
將 Web App 與Native App 兩 種開發方式混合使用，截長補短
需要的 IT技術 Java, Object-C 或 .NET等
HTML5+CSS3+JavaScript
綜合前兩者
跨平台能力 低 強 強使用者經驗與效能
最佳 尚可 可
與行動裝置本機資源整合性
最佳 弱 尚可
學習門檻 高 最低 低上架銷售 可 不行 可
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
串接示意圖
WebkitJavascriptinterface
WebkitHTML5
Browser
GPS WiFiCompass Camera …
行動裝置本機硬體
Native Code 控制
BT
+
Web App
8
• 步驟 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
<!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. 硬體 . 動作
先測試看看• 寫一個測試網頁 ( 傳統 js 呼叫 )
<!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>
但如果把 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 <script> $(document).ready(function{ document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.getElementById("hihi").innerHTML = " 跨出成功的第一步 ^^"; } });</script>
before
<script> $(document).bind("mobileinit", function() { $.support.cors = true; $.mobile.allowCrossDomainPages = true; }); document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.getElementById("hihi").innerHTML = " 跨出成功的第一步 ^^"; }</script>
after
終於全部整合了！
使用 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