行動商務實務 - phonegap advance
DESCRIPTION
TRANSCRIPT
中央資管 - 43013
PhoneGap Advance2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
2
大綱
打包與安裝 APK Phonegap Device App
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
3
打包與安裝 APK
開啟開發模式
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
4
打包與安裝 APK
在 Eclipse 中使用導引視窗建立 APK 安裝
1.WEB / FTP 2.SD 3.ECLIPSE 直接安裝
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
5
打包與安裝 APK
透過 WEB 安裝 APK Http File Server
http://www.rejetto.com/hfs/ 安裝 WEB SERVER 或是 HTTP FILE
SERVER 在手機上開啟瀏覽器，開啟你的 Web
Server 網址。點選要下載安裝的 APK 。Android 會自動辨別下載，下載完成後，等待安裝。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
6
打包與安裝 APK
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
7
打包與安裝 APK
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
8
打包與安裝 APK
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
9
打包與安裝 APK
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
10
打包與安裝 APK
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
11
Phonegap Device App
請下載 上課用的範例程式檔 將檔案解壓縮，放到 專案下
assets/www/
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
12
Phonegap Device App
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
<head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>PhoneGap</title> <!-- 其他程式放在這 例如 JQuery Mobile- > <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"> <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> <script type="text/javascript" charset="utf-8" src="main.js"></script> <!-- 自己寫的程式放在這 - > </head>
13
Phonegap Device App
網頁一開始需要註冊 Phonegap 已準備好的事件deviceInfo 是事件處理程式
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
function init() {document.addEventListener("deviceready", deviceInfo, true);
}
14
Phonegap Device App
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
var deviceInfo = function() { document.getElementById("platform").innerHTML = device.platform; document.getElementById("version").innerHTML = device.version; document.getElementById("uuid").innerHTML = device.uuid; document.getElementById("name").innerHTML = device.name; document.getElementById("width").innerHTML = screen.width; document.getElementById("height").innerHTML = screen.height; document.getElementById("colorDepth").innerHTML = screen.colorDepth;};
15
Phonegap Device App
程式說明 DEMO
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
16
Phonegap Device App
取得 GPS 資料
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
var getLocation = function() { var suc = function(p) { alert(p.coords.latitude + " " + p.coords.longitude); }; var locFail = function() { }; navigator.geolocation.getCurrentPosition(suc, locFail);};
17
Phonegap Device App
相機照相
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
function dump_pic(data) { var viewport = document.getElementById('viewport'); console.log(data); viewport.style.display = ""; viewport.style.position = "absolute"; viewport.style.top = "10px"; viewport.style.left = "10px"; document.getElementById("test_img").src = data;}function show_pic() { navigator.camera.getPicture(dump_pic, fail, { quality : 50 });}
18
Phonegap Device App
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
<div id="viewport" class="viewport" style="display: none;"> <img style="width:60px;height:60px" id="test_img" src="" /> </div>