PhoneGap 快速指南

上一頁
下一頁

PhoneGap - 概述

移動裝置、手持裝置和行動式裝置已經開啟了軟體工程的新革命。這些體積小巧但功能強大的裝置能夠執行使用高階程式語言建立的應用程式。擁有這些裝置的人們傾向於最大限度地利用它們，因為這些裝置（例如手機）非常方便，隨時隨地都可以使用。

移動裝置的架構類似於計算機系統。它具有定製的硬體、韌體和作業系統。

Mobile

這三項內容大多是專有的，並在一家旗艦組織下進行設計、開發和組裝。應用程式（應用軟體）由旗艦組織和外部開發者共同開發。

市場上有多種廣為人知的移動作業系統，包括專有和開源類別。最常用的移動作業系統包括：

  • Android
  • iOS
  • BlackBerry
  • Windows
Mobile Operating System

每個移動作業系統都提供自己的一套工具和環境來開發在其上執行的應用程式。為一個作業系統製作的應用程式無法在任何其他平臺上執行，因為它們完全不同。為了增加使用者覆蓋面，開發者傾向於涵蓋所有主要的移動作業系統。

因此，開發一個可以在所有主要作業系統平臺上執行的應用程式程式，並保持其在所有平臺上的外觀、感覺和功能相同，是一項繁瑣的任務。對於這項工作，開發者需要了解所有平臺，並對不同作業系統的主要開發工具有很好的理解。

PhoneGap

PhoneGap 可以被視為上述所有問題的解決方案。PhoneGap 是一個框架，使開發者可以使用標準 Web API 為所有主要的移動作業系統開發應用程式。它是開源且免費的。

開發者只需要瞭解使用 HTML、CSS 和 JavaScript 的 Web 開發。PhoneGap 負責其餘工作，例如應用程式的外觀和感覺以及在各種移動作業系統之間的可移植性。

Mobile OSI

使用 PhoneGap，可以為所有主要的移動作業系統（如 Apple iOS、Android、BlackBerry、Windows 等）建立應用程式。這不需要開發者精通上述任何平臺，也不需要開發者從頭開始編寫應用程式程式碼。

PhoneGap 允許使用者將資料內容上傳到網站，並自動將其轉換為各種應用程式檔案。

在本教程中，我們將學習如何在不使用任何離線工具的情況下，線上建立適用於 Apple、Android 和 Windows 平臺的應用程式。

PhoneGap - 環境搭建

在本章中，我們將學習如何設定基本環境，以便輕鬆建立應用程式。雖然 PhoneGap 支援使用 Cordova 命令列介面和 Github 儲存庫機制離線建立應用程式，但我們將專注於最省力的方法。

我們假設您精通 Web 技術，並且您的 Web 應用程式已準備好作為應用程式釋出。因為 PhoneGap 僅支援 HTML、CSS 和 JavaScript，所以必須僅使用這些技術建立應用程式。

從開發者的角度來看，應用程式的軟體包中應包含以下專案：

  • 配置檔案
  • 應用程式圖示
  • 資訊或內容（使用 Web 技術構建）

配置

我們的 Web 應用只需要一個配置檔案即可配置所有必要的設定。其名稱為 config.xml。此檔案包含編譯應用程式所需的所有必要資訊。

讓我們看看我們的示例中的 config.xml：

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" 
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "https://tutorialspoint.tw" email = "contact@tutorialspoint.com">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

所有配置內容都包含在 <widget> 標籤中。簡要說明如下：

<widget id = ”app_id”>

id 是您在各個應用商店中預留的應用 ID。它採用反向域名樣式，例如 com.tutorialspoint.onlineviewer 等。

<widget version = "x.y.z">

這是應用程式的版本號，格式為 x.y.z，其中 (x,y,z) 為正整數，例如 1.0.0，它表示主版本號.次版本號.修訂版本號系統。

<name> App Name</name>

這是應用程式的名稱，它將顯示在移動螢幕上的應用程式圖示下方。可以使用此名稱搜尋您的應用程式。

<description> My First Web App </description>

這是關於應用程式是什麼以及它做什麼的簡短描述。

<author> Author_Name </author>

此欄位包含建立者或程式設計師的姓名，通常設定為釋出此應用程式的組織的名稱。

<preferences name = "permissions" value = "none">

preferences 標籤用於設定各種選項，例如應用程式的 FullScreen、BackgroundColor 和 Orientation。這些選項採用名稱值對的形式。例如：name = "FullScreen" value = "true" 等。因為我們不需要任何這些高階設定，所以我們將許可權設定為 none。

<icon>

允許我們嚮應用程式新增圖示。它可以用多種方式編碼，但由於我們正在學習所有內容的快捷方式，所以這裡是這樣做的。.src 確定圖示影像的路徑。gap:platform 確定此圖示用於哪個作業系統平臺。gap:qualifier 是 Android 裝置使用的密度。iOS 裝置使用 width & height 引數。

圖示

有各種尺寸的裝置使用相同的移動作業系統，因此要定位一個平臺的使用者，您也需要提供所有移動型別的圖示。重要的是，我們準備的圖示的形狀和大小必須與特定移動作業系統要求的完全一致。

這裡我們使用資料夾 res/icon/ios 和 res/icon/android/drawable-xxxx.。

為了快速完成這項工作，您可以建立一個大小為 1024x1024 的徽標，然後登入 makeappicon.com。此網站將幫助您立即為 Android 和 iOS 平臺建立所有尺寸的徽標。

App Icons

提供大小為 1024x1024 的圖示影像後，makeappicon.com 應提供以下內容：

iOS 圖示

IOS

Android 圖示

Android

該網站為您提供了一個選項，可以將所有徽標以 zip 格式透過電子郵件傳送給您（當然，也就是電子郵件！）。

PhoneGap - 應用內容

離線網站被複制到本地硬碟驅動器，並在使用者需要時無需任何網際網路連線即可訪問。同樣，此離線 Web 應用程式將允許您建立一個 Web 應用程式，該應用程式將完整下載到使用者的移動裝置，使用者可以在沒有網際網路連線的情況下訪問該應用程式。

此類應用程式的示例可能包括包含故事、簡短教程或使用者感興趣的任何其他離線內容的應用程式，使用者即使在沒有網際網路連線的情況下也可以離線閱讀。

離線應用

下圖顯示了離線應用程式的資料夾結構。在根目錄下，它只需要兩個檔案，config.xml 和 index.xml。

Offline PhoneGap App

config.xml 包含我們在上一節中學習的應用程式配置設定。index.html 檔案包含 Web 內容的主頁。

這裡要學習的一件重要事情是，所有 html 檔案中的所有連結都應僅包含相對路徑。也就是說，不應該有絕對路徑或 base href 標籤。

線上應用

下圖顯示了我們的應用程式處於線上模式的資料夾結構。在線上模式下，所有 Web 內容都從網際網路網站載入。

Online PhoneGap App

您可能會注意到，線上模式應用程式中缺少 data 資料夾，因為所有檔案都駐留在實際伺服器上，並且可以透過網際網路訪問。index.html 檔案包含實際連結，因為它包含在 Web 伺服器上，並且所有連結都是絕對連結或與 base href 標籤一起使用。

確定應用程式的模式並在上述檔案結構中組織其檔案後，您需要使用任何標準 zip 工具壓縮檔案並儲存它。我們將在下一節中使用此檔案。

簽名您的應用

任何應用程式都必須由其開發者或開發組織簽名，以保持秩序井然。為此，您需要簽名您的應用程式。您可能需要 keytool，它是標準 Java 發行版的一部分。

在 Windows 命令提示符或 Linux Shell 中的 %JAVA_HOME% 中執行以下命令：

keytool -genkey -v -keystore my_keystore.keystore 
   -alias TutorialsPoint -keyalg RSA -keysize 2048 -validity 10000

這應該會生成 my_keystore.keystore 檔案，我們將在下一節中需要它。

PhoneGap - 應用編譯

現在我們準備編譯我們的第一個基於 Web API 的快速模式應用程式。在本最終部分中，我們將學習如何將 Web 內容轉換為應用程式格式，該格式可以上傳到線上應用程式商店。

PhoneGap 接受在 GitHub 上建立的使用者登入名或使用 Adobe ID。GitHub 是一種儲存庫服務，使用者可以將內容上傳到其中並透過提供其 URL 引用來使用它們。例如，我們剛剛建立的內容可以上傳到 GitHub，然後直接呼叫 PhoneGap。

以下步驟詳細說明如何建立 Adobe ID。

建立 Adobe ID

訪問 www.build.phonegap.com 並點選註冊

將開啟一個新視窗，如下所示：

Adobe

填寫您的詳細資訊並點選註冊。您現在可以使用相同的使用者 ID 登入 PhoneGap。預設情況下，此頁面應指向 PhoneGap 控制檯，如下所示：

Adobe PhoneGap

點選“上傳 .zip 檔案”並上傳我們建立的 .zip 檔案，其中包含完整的 Web 內容和配置。成功上傳後，您應該會看到以下視窗：

First App

您可能會立即發現 iOS 應用程式的處理失敗了，因為我們沒有提供任何簽名的金鑰。我們只關注 Android，您可以看到它已由 PhoneGap 建立。此應用程式無法上傳到 Google 商店，因為它沒有使用金鑰簽名。

點選 Android 圖示，應該會出現以下螢幕：

First App2

點選 Android 圖示旁邊的下拉選項選單（顯示為“未選擇金鑰”），點選新增金鑰，應該會出現以下螢幕：

Keystore

提供您選擇的標題和別名，然後點選金鑰庫檔案。提供上一節中建立的金鑰庫檔案。然後點選其旁邊的“重新構建”按鈕。

透過此過程構建的應用程式可以直接上傳到 Google Play。點選 .apk 檔案，您可以下載您的第一個基於 Web 的免費應用程式。

上傳前，應在虛擬裝置或真實裝置上測試應用程式。

列印頁面
上一頁
下一頁
廣告