I share, therefore I am.: 以 Cordova 將 jQuery Mobile Web App 部署至 Android 手機

我們以 jQuery Mobile 開發好的 Web App 要怎麼運用 Apache Cordova 部署至 Android 智慧型手機上，成為貨真價實的 Android App 呢？

以下介紹運用 Cordova 部署 jQuery Mobile Web App 至 Android手機，必須先完成下列條件：

已安裝好 Apache Cordova 環境，包含 Android SDK，並可建立 Cordova 專案。
已將智慧型手機開啟 開發人員選項，並開啟 USB偵錯。
已將電腦安裝好智慧型手機 USB驅動程式，連接電腦與智慧型手機，並測試 Cordova 範例專案部署至手機成功。

若這三項條件尚未完成，您可以參考下列資料完成 Apache Cordova 的安裝：

😺 Cordova Documentation: Create your first Cordova app
😺 Cordova Documentation: Android Platform Guide
😺 Evothings.com: Install Cordova on Windows
😺 Evothings.com: Install Cordova on Linux

接下來就可以進行 jQuery Mobile Web App 部署了。

1．準備 jQuery Mobile Web App

您的 jQuery Mobile Web App 應為以下結構，目錄名才會和 Cordova 專案一致。

2．將 jquery.mobile-x.x.x.min.css, jquery-x.x.x.min.js, jquery.mobile-x.x.x.min.js 檔案下載放置到 css, js 目錄下，並修改 index.html include 路徑（下載 jQuery Mobile）。

3．建立一個新的 Cordova 專案

於命令視窗

cordova create myNewApp

4．加入 Android platform

於命令視窗

cd myNewApp

cordova platform add android

cordova platform ls //檢查 android platform 是否已加入

5．將此新 Cordova 專案的 www 目錄刪除，用 jQuery Mobile Web App 的 www 取代。

6．開啟 www 目錄下的 index.html 加入 cordova.js，此 js 檔不用放置到 www 目錄中， Cordova 會自行包含。


<!-- include cordova.js -->
<script src="cordova.js"></script>

7．將 index.html 加入「網頁安全政策 (Content-Security-Policy)」設定，上課範例因為使用了 Google Map Api 所以需加入 googleapis.com 以開啟網路及位置使用權限。


<!-- for "Content-Security-Policy" -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com https://csi.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.gstatic.com https://*.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://fonts.gstatic.com; media-src *; img-src 'self' 'unsafe-inline' https://*.gstatic.com https://*.googleapis.com; connect-src *;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

8．因為上課範例有使用 geolocation ，所以需加入 cordova geolocation plugin - Cordova 外掛。

於命令視窗

cordova plugin add cordova-plugin-geolocation

若不加入 geolocation 外掛，部署後執行就會看到這樣的錯誤訊息。

9．開啟 config.xml 確認 geolocation 外掛已加入：

10．構建專案

於命令視窗

cordova build android

11．部署專案至 Android 手機

於命令視窗

$ adb devices # 列出已連接的手機裝置

$ cordova run android --target= # 部署至選擇的手機裝置

jQuery Mobile Web App 專案就會部署到 Android 手機上。

geolocation 定位、Google Place Library 及路徑規劃功能就都能正確運作了。

完整 cordova 部署 index.html 程式碼


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com https://csi.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.gstatic.com https://*.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://fonts.gstatic.com; media-src *; img-src 'self' 'unsafe-inline' https://*.gstatic.com https://*.googleapis.com; connect-src *;">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <!-- Include meta tag to ensure proper rendering and touch zooming -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Include jQuery Mobile stylesheets -->
 <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
 <!-- Include the jQuery library -->
 <script src="js/jquery-1.11.3.min.js"></script>
 <!-- Include the jQuery Mobile library -->
 <script src="js/jquery.mobile-1.4.5.min.js"></script>

 <!-- myApp javascript myApp.js -->
 <script src="js/myApp.js"></script>
 <!-- include cordova.js -->
 <script src="cordova.js"></script>

 <!--<script async defer src="https://maps.google.com/maps/api/js?language=ja&region=JP"></script>-->
 <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>

<body>
<!-- My app first page -->
<div data-role="page" id="page1">
  <div data-role="header">
  <a href="#page1" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
  <a href="#page2" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-right" data-transition="flow">Option</a>
  <h1>My First App</h1>
  </div>

  <div data-role="main" class="ui-content">
  <a href="#page3" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-d-l ui-btn-icon-left">Get Open Data</a>
  <a href="#page4" class="ui-btn ui-corner-all ui-shadow ui-icon-location ui-btn-icon-left">Show Position</a>
  <a href="#page5" class="ui-btn ui-corner-all ui-shadow ui-icon-star ui-btn-icon-left">Show Spots</a>
  <a href="#page6" class="ui-btn ui-corner-all ui-shadow ui-icon-navigation ui-btn-icon-left">Show Spots by Distance</a>
  <a href="#page7" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Google Map Place Search</a>
  </div>

  <div data-role="footer">
  <h1>By Sean Lu</h1>
  </div>
</div>


<!-- My version page -->
<div data-role="page" data-dialog="true" id="page2">
  <div data-role="header">
    <h1>App version</h1>
  </div>

  <div data-role="main" class="ui-content">
    <img src="img/logo.png" alt="Smiley face" height="90" width="90"><br>
 <p>This app is composed by Sean Lu.</p>
    <a href="#" class="ui-btn" data-rel="back">Go to Page One</a>
  </div>

  <div data-role="footer">
    <h1>seaniwei@yahoo.com.tw</h1>
  </div>
</div>


<!-- Demo Kaohsiung Open Data page -->
<div data-role="page" id="page3">
  <div data-role="header">
  <a href="#page1" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
  <a href="#page2" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-right" data-transition="flow">Option</a>
  <h1>Demo Open Data</h1>
  </div>

  <div data-role="main" class="ui-content">
 <p id="showSpot"></p>
  </div>

  <div data-role="footer">
  <h1>By Sean Lu</h1>
  </div>
</div>

<!-- Show Current Position -->
<div data-role="page" id="page4">
  <div data-role="header">
  <a href="#page1" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
  <a href="#page2" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-right" data-transition="flow">Option</a>
  <h1>Show Current Position</h1>
  </div>

  <div data-role="main" class="ui-content">
 <p id="showLatLon"></p>
 <div id="showMap"></div>
  </div>

  <div data-role="footer">
  <h1>By Sean Lu</h1>
  </div>
</div>

<!-- Show Spots on Map -->
<div data-role="page" id="page5">
  <div data-role="header">
  <a href="#page1" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
  <a href="#page2" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-right" data-transition="flow">Option</a>
  <h1>Show Spots on Map</h1>
  </div>

  <div data-role="main" class="ui-content">
 <p id="showMsg"></p>
 <div id="showSpotMap"></div>
  </div>

  <div data-role="footer">
  <h1>By Sean Lu</h1>
  </div>
</div>


<!-- Show Distance -->
<div data-role="page" id="page6">
  <div data-role="header">
  <a href="#page1" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
  <a href="#page2" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-right" data-transition="flow">Option</a>
  <h1>Show Spots by Distance</h1>
  </div>

  <div data-role="main" class="ui-content">
 <label for="points">距離(公里):</label>
 <input type="range" name="points" id="points" value="10" min="0" max="20" data-highlight="true" data-show-value="true">
 <a href="#" id="P6_btn" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-top">顯示景點</a>
 <p id="showMessage"></p>
 <div id="showDistanceSpots"></div>
  </div>

  <div data-role="footer">
  <h1>By Sean Lu</h1>
  </div>
</div>

<!-- Google Place Library -->
<div data-role="page" id="page7">
  <div data-role="header">
  <a href="#page1" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
  <a href="#page2" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-right" data-transition="flow">Option</a>
  <h1>Google Map Place Search</h1>
  </div>

  <div data-role="main" class="ui-content">
   <label for="points">距離(公里):</label>
 <input type="range" name="points" id="p7_points" value="10" min="0" max="20" data-highlight="true" data-show-value="true">
 <a href="#" id="p7_btn" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-top">取得 Google Place Library 景點資料</a>
 <p id="p7_showMessage"></p>
 <div id="p7_showSpotMap"></div>
  </div>

  <div data-role="footer">
  <h1>By Sean Lu</h1>
  </div>
</div>

</body>
</html>

2017-06-14

以 Cordova 將 jQuery Mobile Web App 部署至 Android 手機