王派洲老師 2015/9/17 跨平台移動程式設計-課程一
課程大綱 課程簡介 移動程式設計平台簡介 跨平台移動程式設計平台 Apache cordova與phonegap差異 軟體安裝與測試 建立第一個cordova project
課程簡介 利用混合式方式(hybrid)進行行動應用設計 涵蓋範圍：Html5, CSS3, Javascript, jQuery, jQuery Mobile, cordova 授課老師：王派洲老師。L306-2，Tel:2533131分機4327，pwang@mail.stust.edu.tw 平時(30%)、期中(30%)、期末(30%)、project(10%)。考試上機考
移動程式設計平台 原生平台(native platform) 混合平台(Hybrid platform) iOS: xcode (Objective c) Android: Eclipse (java) Windows mobile: Microsoft visual studio (c#) 混合平台(Hybrid platform) HTML5 based cordova、phonegap、appbuilder、appcelerator Non-html5 based: apache flex 網頁平台(web platform) HTML5 + Css3
Adobe phonegap與Apache cordova Adobe將phonegap捐贈給Apache，apache將phonegap更名為cordova。兩者之間並無差異，apache持續地改善cordova並免費地讓大家來使用。大家可以想成cordova為phonegap核心引擎。 http://phonegap.com/ http://cordova.apache.org/
軟體安裝 使用apache cordova進行移動應用設計時，主要將手持式設備的相關功能透過html方式呈現在手持式設備上，因此課程軟體將涵蓋HTML、css與javascript。在手持式設備版面設計我們將採用使用率最高的javascript framework(jquery mobile)，同時課程測試將以普及率最高的android為主。因此同學需安裝下列軟體 安裝java jdk (http://www.oracle.com/technetwork/java/javase/downloads/index.html) 安裝node.js (https://nodejs.org/en/) 安裝git (http://git-scm.com/) 解壓縮apache ant 並設定路徑(http://ant.apache.org/bindownload.cgi) 根據自己機器作業系統的版本安裝android adt並更新sdk版本至最新版
路徑設定-JDK 安裝java jdk http://www.oracle.com/technetwork/es/java/javase/downloads/index.html 下在安裝後，請在使用者環境變數中設定 JAVA_HOME的變數，並將其路徑設置安裝JDK的檔案夾路徑 控制台-系統及安全性-系統-進階系統設定-環境變數 請在PATH加入JDK檔案夾bin位置
路徑設定-ANT 安裝ANT 解壓縮後，請在使用者環境變數中設定 ANT_HOME的變數，並將其路徑設置安裝ANT的檔案夾路徑 控制台-系統及安全性-系統-進階系統設定-環境變數 請在PATH加入ANT檔案夾bin位置
路徑設定-Android SDK 安裝Android SDK 安裝後，請在PATH加入Android SDK中sdk目錄中platform-tools與tools路徑位置
路徑設定-Node.js 安裝完Node.js後確認PATH路徑包含C:\Users\[使用者]\AppData\Roaming\npm
模擬器設定) 安裝Android adt 右邊兩個按鈕一個為Android SDK Manager, 一個為Android virtual device manager Sdk manager用於管理android sdk, 請確定 要安裝api 19(android 4.4.2) Virtual device用於設定模擬器
安裝 Cordova 安裝cordova(所有的cordova命令必須在網路連接下才能執行) 請進入命令提示字元並輸入 npm install -g cordova
CLI命令 安裝cordova 更新Cordova 建立應用專案 加入執行平台 npm install -g cordova npm update –g cordova 建立應用專案 cordova create 專案目錄名稱 專案封裝名稱 專案標題名稱 封裝名稱一般為反向URL再加上應用程式名稱 加入執行平台 cordova platform add wp8 cordova platform add windows8 cordova platform add amazon-fireos cordova platform add android cordova platform add blackberry10 cordova platform add firefoxos
CLI命令(2) 檢視安裝執行平台 移除安裝平台 執行應用程式 建立應用程式 加入plugin 顯示目前加入plugin 移除pluing cordova platforms ls 移除安裝平台 cordova platform rm android 執行應用程式 cordova run android 建立應用程式 cordova build Cordova build android 加入plugin cordova plugin add org.apache.cordova.device 顯示目前加入plugin cordova plugin ls 移除pluing cordova plugin rm org.apache.cordova.device
第一個cordova project Cordova project建立與平台設定，均藉 由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸 入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld Cordova會為project產生一新目錄，名稱 為Hello tw.edu.stust.mis.hello為project的封裝名稱， 一般為反轉網域名稱加上project名稱 Helloworld為應用程式顯示標題
第一個cordova project (2) 在建立project之後，所有其他的動作均須在project 目錄中完成 在命令提示字元中輸入 cd hello進入hello目錄 加入開發移動平台 cordova platform add android
第一個cordova project (3) 在建立project之後，所有其他的動作均須在project 目錄中完成 在命令提示字元中輸入 cd hello進入hello目錄 加入開發移動平台 cordova platform add android
第一個cordova project (4) 確認安裝平台 cordova platform ls
cordova project目錄 Project中重要目錄包含platforms, plugins, www platforms包含安裝平台、plugins包含安裝套件、www則包含app應用程式 所有的app應用程式均以網頁及Javascript編寫並儲存於www目錄中
cordova project目錄(2) Project中config.xml Content src用於設定於www目錄中app的起 始頁面
第一個cordova project 請利用網頁編輯程式開啟www目錄中index.html檔 請注意cordova app是利用網頁做為APP版面設計，用Javascript進行使用者 互動
第一個cordova project (2) 請利用網頁編輯程式開啟www目錄中 index.html檔 <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum- scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
第一個cordova project-(3) 請利用網頁編輯程式開啟www目錄中index.html檔 <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <meta name="msapplication-tap-highlight" content="no" /> <title>Hello World</title> </head>
第一個cordova project-(4) <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> </head> Meta標籤為表頭資料宣告標籤，meta宣告內容可用於瀏覽器、搜尋引擎或其他網頁服務 Charset=“utf-8”用於宣告網頁編碼方式 name="format-detection" content="telephone=no“ 手持式設備瀏覽器支援點選撥話(click-on-call)的功能，但是透過自動偵測會有許多誤判情況，因此透過宣告將自動偵測功能關閉
第一個cordova project-(5) <head> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> </head> Viewport為手持式設備瀏覽器的可視區域 user-scalable=no設定使用者不可以進行內容放大或縮小 initial-scale=1, maximum-scale=1, minimum-scale=1設定起始比例、最大比例與最小比例 width=device-width, height=device-height設定viewport的寬與高 請注意如設viewport寬為320px，而設備實際寬度為640px，則內容會放大2倍 https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/
執行project cordova run android 如果有設定Android模擬器則會等待開啟模擬器後顯示結果
執行project (2)
手持式設備DPI資訊 http://en.wikipedia.org/wiki/Comparison_of_high-definition_smartphone_displays https://developer.chrome.com/multidevice/webview/pixelperfect 1dppx(dot per css pixel)=96dpi
連接實體設備 Samsung HTC ASUS http://www.samsung.com/tw/support/usefulsoftware/KIES/ HTC http://www.htc.com/tw/software/htc-sync-manager/ ASUS