Html5 phonegap android
This presentation is the property of its rightful owner.
Sponsored Links
1 / 25

HTML5 + PhoneGap + Android PowerPoint PPT Presentation


  • 152 Views
  • Uploaded on
  • Presentation posted in: General

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 

Download Presentation

HTML5 + PhoneGap + Android

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html5 phonegap android

HTML5 + PhoneGap + Android

建國科技大學 資管系

饒瑞佶

2013/5 V1


Html5 phonegap android

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


Html5 phonegap android

相關技術方塊

  • HTML5:HTML5 + jQuery(Javascript) + jQuery Mobile

  • PhoneGap:行動裝置控制模組(例如硬體)

  • HTML5與PhoneGap透過瀏覽器的webkit串接

  • 最後透過SDK(Android、iOS、Windows)封裝兩者


Phonegap

PhoneGap

  • 又稱 Apache Cordova 

  • 行動開發框架(frame)

  • 透過這個框架,開發者可以專心寫 HTML, JavaScript 與 CSS,與 Native 溝通的事就交給 PhoneGap

  • 所以寫網頁的人也可以加入行動App的開發


Phonegap android

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


Phonegap1

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

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


Html5 phonegap android

行動裝置本機硬體

串接示意圖

GPS

Compass

Camera

WiFi

BT

Native Code

控制

Webkit

HTML5

Browser

Webkit

Javascript

interface

Web App

+


Html5 phonegap android

  • 步驟4:在Android專案內的assets目錄建立www目錄,用來放置HTML網頁(離線模式)

  • 步驟5:把cordova.jar(原始是cordova-2.7.0.jar,建議更名)複製到/libs裡,cordova.js(原始是cordova-2.7.0.js)複製到/assets/www裡


Html5 phonegap android

  • 步驟6:修改程式

    • 把Class extends 從Activity改成 DroidGap

    • 把setContentView(R.layout.main);改成 super.loadUrl(“file:///android_asset/www/index.html”);


Html5 phonegap android

  • 步驟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 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

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

result


Html5 phonegap android

提醒

  • 到這裡只是可以載入HTML與jQuery,尚未碰到PhoneGap

  • 要可以執行PhoneGap,除了cordova.jar與cordova.js外,還需要

    • 1個res/xml的目錄,裡面需要一個檔案config.xml (可以從下載的PhoneGap包內取得)

    • 修改AndroidManifest.xml

沒這個會出現少cordova class

沒這個會無法啟動cordova


Androidmanifest xml

修改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" />


Phonegap2

PhoneGap呼叫架構

  • 載入js

    • <script type="text/javascript" src="cordova.js"></script>

  • 載入PhoneGap

    • document.addEventListener("deviceready",onDeviceReady,false);

  • 載入完畢,執行需要的動作

    • function onDeviceReady()

  • 硬體呼叫

    • Navigator.硬體.動作


Html5 phonegap android

先測試看看

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

但如果把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

需要改寫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>


Html5 phonegap android

終於全部整合了!


Camera

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

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>

啟動照相

顯示照片


Html5 phonegap android

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


Html5 phonegap android

其他硬體

http://docs.phonegap.com/en/2.4.0/cordova_camera_camera.md.html#Camera


  • Login