• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
行動商務實務 - PhoneGap Advance
 

行動商務實務 - PhoneGap Advance

on

  • 556 views

 

Statistics

Views

Total Views
556
Views on SlideShare
556
Embed Views
0

Actions

Likes
2
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    行動商務實務 - PhoneGap Advance 行動商務實務 - PhoneGap Advance Presentation Transcript

    • PhoneGap Advance2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢
    • 大綱 打包與安裝 APK Phonegap Device App2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 2
    • 打包與安裝 APK 開啟開發模式2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 3
    • 打包與安裝 APK 在Eclipse中使用導引視窗建立APK 安裝  1.WEB / FTP  2.SD  3.ECLIPSE 直接安裝2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 4
    • 打包與安裝 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/ 文孝義 方毓賢 5
    • 打包與安裝 APK2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 6
    • 打包與安裝 APK2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 7
    • 打包與安裝 APK2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 8
    • 打包與安裝 APK2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 9
    • 打包與安裝 APK2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 10
    • Phonegap Device App 請下載 上課用的範例程式檔 將檔案解壓縮,放到 專案下 assets/www/2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 11
    • Phonegap Device App<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> 2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 12
    • Phonegap Device App 網頁一開始需要註冊Phonegap 已準備好的 事件 deviceInfo 是事件處理程式 function init() { document.addEventListener("deviceready", deviceInfo, true); }2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 13
    • Phonegap Device Appvar 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;}; 2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 14
    • Phonegap Device App 程式說明 DEMO2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 15
    • Phonegap Device App 取得GPS 資料var getLocation = function() { var suc = function(p) { alert(p.coords.latitude + " " + p.coords.longitude); }; var locFail = function() { }; navigator.geolocation.getCurrentPosition(suc, locFail);};2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 16
    • Phonegap Device App 相機照相 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 }); }2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 17
    • Phonegap Device App<div id="viewport" class="viewport" style="display: none;"> <img style="width:60px;height:60px" id="test_img" src="" /> </div> 2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 18