使用 PhoneGap Build 將網路應用程式封裝為原生行動應用程式

PhoneGap Build 是一項雲端架構服務,可讓您將網路應用程式封裝為原生行動裝置應用程式。PhoneGap Build 支援下列行動裝置作業系統的原生應用程式封裝:

  • iOS
  • Android
  • BlackBerry
  • webOS
  • Symbian
  • Windows Phone 8

如需有關 PhoneGap Build 服務的詳細資訊,請參閱 PhoneGap 網站

如需 PhoneGap Build 服務的使用說明,請參閱 PhoneGap Build 文件

Dreamweaver CC 2014 版的最新更新 (2014 年 10 月) 和更新版本不支援 Dreamweaver 與 PhoneGap Build 直接整合以封裝應用程式的功能。不過,您可以直接存取線上 PhoneGap Build 服務並且使用最新功能更新來封裝網路應用程式。

使用 Dreamweaver CC 中的 PhoneGap Build 服務 (2014 年 10 月和更新版本)

  1. 登入 PhoneGap Build 服務。您可以繼續使用現有的 Adobe ID。

  2. 登入後,系統會將您重新導向至網站的「應用程式」區段。以包含 HTML、CSS 和 JavaScript 檔案的 ZIP 檔案形式上傳您的網頁資源,或指向 Git 或 SVN 儲存庫。

    PhoneGap Build 服務的「應用程式」區段

  3. PhoneGap Build 服務會在幾分鐘之內編譯並封裝內容,然後您就會收到所有行動平台的下載連結。

如需有關 PhoneGap Build 服務的任何協助,請造訪支援頁面社群論壇

使用 Dreamweaver CC 中的 PhoneGap Build 服務 (2014 年 6 月)

建立 PhoneGap Build 服務帳戶

如果您沒有 PhoneGap Build 服務帳戶,就無法使用 PhoneGap Build 和 Dreamweaver。這些帳戶是免費的,而且設定方式很簡單。若要建立帳戶,請造訪 PhoneGap Build 網站

您必須先透過確認電子郵件驗證帳戶,然後帳戶才會生效。

設定開發環境

封裝應用程式之前,您必須根據想要封裝的應用程式種類以及想要測試的裝置,完成許多設定工作。您可能會想要設定下列部分選項、所有選項或完全不設定任何選項:

Android SDK:如果您想要使用 Android 模擬器,在本機電腦上測試 Android 應用程式,就必須下載並安裝 Android SDK。如需相關指示,請參閱 Android 文件

一旦您安裝了 Android SDK 之後,就必須啟動 Android SDK and AVD Manager,然後選取想要在本機電腦上使用的 Android 工具。Dreamweaver 會使用您在此初始設定期間選取的資訊來填入「PhoneGap Build 服務」面板中的 Android 模擬器設定。如需有關指定這些設定的詳細資訊,請參閱 Android 文件

 

重要事項:如果您想要使用 Android 模擬器,在本機測試應用程式,就應該在進行測試之前,依照所需的方式讓模擬器獨立於 Dreamweaver 運作。

webOS SDK/PDK:如果您想要使用 webOS 模擬器,在本機電腦上測試 webOS 應用程式,就必須下載並安裝 webOS SDK/PDK。

QR (快速回應) 碼讀取器:如果您想要輕鬆地將封裝的應用程式傳送至裝置,就需要使用 QR 碼讀取器 (使用 Dreamweaver 來封裝應用程式時,一旦應用程式完成封裝之後,您將會收到應用程式的 QR 碼,它會顯示在「PhoneGap Build」面板中)。目前市面上有許多不同的 QR 碼讀取器可免費下載。如需詳細資訊,請利用 Google 搜尋「QR 碼讀取器」。

安裝 PhoneGap Build 附加元件

從 Dreamweaver 之中使用 PhoneGap Build 服務之前,必須先安裝 PhoneGap Build 附加元件。

若要安裝附加元件,請移至「視窗 > 瀏覽附加元件」。隨即顯示 Adobe Creative Cloud 附加元件頁面。搜尋 PhoneGap Build 附加元件,然後遵循畫面上的指示安裝附加元件。

重要事項:安裝附加元件之前,務必確認您已為 Adobe Creative Cloud 帳戶啟用檔案同步功能。如需詳細資訊,請參閱在 Adobe Creative Cloud 上啟用檔案同步

使用 PhoneGap Build 封裝行動裝置應用程式

  1. 請確定您已經建立具有 index.html 網頁 (通常是應用程式的起始網頁) 的 Dreamweaver 網站。

    註解:PhoneGap Build 只支援使用 HTML、CSS 和 JavaScript 檔案。您的網站不可包含伺服器網頁,例如 PHP、CFM 或其他種類的伺服器架構網頁。

  2. 選擇「網站 > PhoneGap Build 服務 > PhoneGap Build 服務」。

  3. 提供您的登入資訊並登入 PhoneGap Build。如果您尚未建立 PhoneGap Build 帳戶,請參閱建立 PhoneGap Build 服務帳戶

  4. 讓「建立為新專案」保持選取狀態,然後按一下「繼續」。

  5. 請針對您的目標作業系統,視需要輸入金鑰與密碼。只有 Android、iOS 與 Blackberry 系統需要用到簽署金鑰資訊。

    如果您只能建構一個應用程式,可能是因為您尚未訂閱 PhoneGap 服務。

    註解:

    如果您輸入的資訊不正確,則組建作業會失敗,並顯示錯誤訊息,指出您已輸入錯誤的金鑰或是密碼。如果您並未輸入任何資訊,iOS 組建作業會失敗,並顯示需要簽署金鑰的錯誤訊息。Android 與 Blackberry 應用程式都使用除錯認證來建構。

    輸入目標作業系統所要求的金鑰和密碼。

  6. 請注意,Dreamweaver 會將 ProjectSettings 檔案新增至網站的根目錄 (您可能必須重新整理「檔案」面板才能看見此檔案)。這個檔案非常重要,因為 PhoneGap Build 服務會用它來追蹤應用程式。

    此外,Dreamweaver 也會將 config.xml 檔案新增至網站根目錄。請按兩下這個簡單的 XML 檔案,加以開啟。

    config.xml 檔

    編輯這個檔案的內容,藉以自訂應用程式的識別。如果您沒有這樣做,所有應用程式都將具有相同的預設應用程式名稱。

    如需有關使用 config.xml 檔案的詳細資訊,請參閱 PhoneGap Build 文件

  7. 儲存已編輯的 config.xml 檔案、關閉它,然後按一下「PhoneGap 服務」面板中的「重建」。當 PhoneGap 完成每個平台的應用程式封裝作業時,您將會看見組建已完成的訊息。

    新增功能, dreamweaver, HTML5, CSS, 轉換, 網路應用程式, 網路套件, 效果, CSS3, 流變格線版面, Phonegap, 新功能, jquery, business catalyst, 網頁字體, ftp 改善功能, PSD 最佳化, dreamweaver cs6
    PhoneGap 服務面板會顯示何時完成組建。

    註解:

    若要封裝適用於 Windows 8 的組建,您必須直接登入 https://build.phonegap.com,上傳所需檔案,並且編譯組建。

    根據預設,Dreamweaver 會使用 PhoneGap Build 版本 2.9.0。如果您要使用最新版 PhoneGap Build,請執行下列步驟:

    1. 從網站根資料夾的 config.xml 檔案移除下列行:
    2. <preference name="phonegap-version" value="2.9.0" />

    3. 儲存檔案。
    4. 重建專案。

    一旦您的組建完成之後,有許多選項可用。您可以將應用程式檔案下載至電腦、掃描組建的 QR 碼以將應用程式傳送至裝置,或是使用模擬器來模擬應用程式 (僅限 Adroid 和 webOS)。

下載應用程式檔案

若要從 PhoneGap Build 下載應用程式,請按一下「PhoneGap Build 服務」面板中的「下載應用程式」按鈕 (向下箭頭)。

註解:下載功能不適用於沒有簽署金鑰的 iOS 應用程式。如需詳細資訊,請參閱 PhoneGap Build 文件

下載的應用程式檔案名稱如下:

  • iOS - app.ipa
  • Android - app.apk
  • BlackBerry - app.jad
  • webOS - app.ipk
  • Symbian- app.wgz

掃描 QR 碼以將應用程式傳送至裝置

繼續進行之前,您的裝置必須擁有 QR 碼讀取器。如需詳細資訊,請參閱設定開發環境

註解:QR 碼不適用於沒有簽署金鑰的 iOS 應用程式。如需詳細資訊,請參閱 PhoneGap Build 文件

  1. 在「PhoneGap Build 服務」面板中,按一下您想要下載之應用程式的 QR 碼。
  2. 啟動行動裝置上的 QR 碼讀取器並掃描 QR 碼。
  3. 一旦應用程式完成下載之後,您就可以直接在裝置上加以啟動。
  4. 按一下「回到建置面板」按鈕,即可返回組建清單。
註解:QR 碼不適用於沒有簽署金鑰的 iOS 應用程式。

模擬應用程式 (僅限 Android 和 webOS)

重要事項:繼續進行之前,您必須先安裝 Android SDK 及/或 webOS SDK/PDK。您也必須在 SDK 應用程式內部指定任何想要在本機使用的 SDK/AVD 資訊。如需詳細資訊,請參閱設定開發環境

  1. 選擇「網站 > PhoneGap Build 服務 > PhoneGap Build 設定」,以開啟「PhoneGap Build 設定」面板。
  2. 指定 Android 及/或 webOS SDK 的位置,然後按一下「儲存」。這些位置會告知 Dreamweaver 要在何處尋找所需的資訊,以便將您的應用程式傳送至模擬器。
  3. 在「PhoneGap Build 服務」面板 (「網站 > PhoneGap Build 服務 > PhoneGap Build 服務」) 中,針對您想要模擬的應用程式按一下「模擬」(面向左右) 按鈕。
  4. 如果您先前在 SDK 應用程式內部指定了 SDK/AVD 資訊,應該就會出現預先填入該項資訊的視窗。
  5. 選擇您想要用於模擬的 SDK/AVD,然後按一下「啟動」。

註解:模擬器的執行速度通常很慢。您的模擬器可能需要一些時間來啟動並載入應用程式。

使用 PhoneGap 和 Dreamweaver 建立及部署 Android 應用程式

Kevin Hoyt - Adobe 開發人員推廣專家

使用 PhoneGap 建立及部署 iOS 應用程式

Kevin Hoyt - Adobe 開發人員推廣專家

Adobe 標誌

登入您的帳戶