PhoneGap Build is a cloud-based service that lets you package your web applications as native mobile applications. PhoneGap Build supports native application packaging for the following mobile device operating systems:

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

For more information on the PhoneGap Build service, see the PhoneGap website.

For help using the PhoneGap Build service, see the PhoneGap Build documentation.

Dreamweaver's direct integration with PhoneGap Build to package applications is not supported in the latest update to the 2014 release Dreamweaver CC (October 2014), and later. However, you can directly access the online PhoneGap Build service and make use of the latest feature updates to package your web applications.

Use PhoneGap Build service in Dreamweaver CC (October 2014 and later)

  1. Log in to the PhoneGap Build service. You can continue to use your existing Adobe ID.

  2. After logging in, you are redirected to the “Apps” section of the site. Uploading your web assets as a ZIP file containing HTML, CSS and JavaScript files, or point to a Git or SVN repository.

    The Apps section of the PhoneGap Build service
    The Apps section of the PhoneGap Build service

  3. PhoneGap Build service compiles and packages the content within minutes and you will receive download links for all mobile platforms.

For any assistance with the PhoneGap Build service, visit the support page or the community forum.

Use PhoneGap Build service in Dreamweaver CC (June 2014)

Create a PhoneGap Build service account

You cannot use PhoneGap Build and Dreamweaver without a PhoneGap Build service account. Accounts are free and easy to set up. To create one visit the PhoneGap Build website.

You'll need to validate the account through a confirmation email before the account becomes active.

Set up the development environment

Depending on what kinds of applications you want to package and which devices you want to test on, there are various setup tasks you need to complete before packaging your application. You may want to set up some, all, or none of the following options:

Android SDK If you want to test Android applications on your local computer using an Android emulator, you'll need to download and install the Android SDK. For instructions, see the Android documentation.

Once you've installed the Android SDK, you'll need to start the Android SDK and AVD Managers, and select the Android tools you want to work with locally on your computer. Dreamweaver uses the information you select during this initial setup to populate the Android emulator settings in the PhoneGap Build Service panel. For more information on specifying these settings, see the Android documentation.

 

IMPORTANT: If you want to use an Android emulator to test your application locally, you should get the emulator working the way you want it to work independently of Dreamweaver before you do your testing.

webOS SDK/PDK If you want to test webOS applications on your local computer using a webOS emulator, you'll need to download and install the webOS SDK/PDK.

QR (Quick Response) code readers If you want to easily transfer your packaged app to your device, you'll need a QR code reader. (When you package an application using Dreamweaver, you'll receive a QR code for the app, which will appear in the PhoneGap Build panel, once the app has been packaged.) A number of different code readers are available for free from various marketplaces. For more information, google "QR code reader".

Install the PhoneGap Build add-on

Before using the PhoneGap Build service from within Dreamweaver, you must install the PhoneGap Build add-on.

To install the add-on, go to Window > Browse Add-Ons. The Adobe Creative Cloud Add-Ons page appears. Search for the PhoneGap Build add-on and follow the on-screen instructions to install the add-on.

Important: Before installing add-ons, ensure that you have enabled file sync for your Adobe Creative Cloud account. See Enable file sync on Adobe Creative Cloud for more details.

Package mobile applications with PhoneGap Build

  1. Make sure that you've created a Dreamweaver site with an index.html page (usually the start page of your application).

    Note: PhoneGap Build supports the use of HTML, CSS and JavaScript files only. Your site cannot contain server pages such as PHP, CFM, or other kinds of server-based pages.

  2. Choose Site > PhoneGap Build Service > PhoneGap Build Service.

  3. Provide your login information and log in to PhoneGap Build. If you haven't created a PhoneGap Build account, see Create a PhoneGap Build service account.

  4. Leave Create as a New Project selected and click Continue.

  5. For the operating systems that you are targeting, enter the Key and password as required. Signing key information is required only for Android, iOS, and Blackberry.

    If you are unable to build more than one application, it could be because you are not subscribed to the PhoneGap service.

    Note:

    If you enter incorrect information, the build fails with an error message indicating that you entered an incorrect Key or password. If you do not enter any information, iOS build fails with Signing key required error. Android and Blackberry apps are built using the debug certificates.

    Enter the required Key and password for the targeted operating system
    Enter the required Key and password for the targeted operating system.

  6. Notice that Dreamweaver adds a ProjectSettings file to the root of your site. (You might need to refresh the Files panel to see it.) This file is very important, as the PhoneGap Build service uses it to track your application.

    Dreamweaver also adds a config.xml file to your site root. Double-click this simple XML file to open it.

    config.xml file
    config.xml file

    Customize the identity of your application by editing the contents of this file. If you don't, all of your applications will have the same default application name.

    For more information on working with the config.xml file, see the PhoneGap Build documentation.

  7. Save the edited config.xml file, close it, and click Rebuild in the PhoneGap Service panel. As PhoneGap finishes packaging your application for each platform, you'll see messages indicating that the build is complete.

    what's new, dreamweaver, HTML5, CSS, transitions, web application, web package, effects, CSS3, fluid grid layout, Phonegap, new features, jquery, business catalyst, web fonts, ftp improvements, PSD optimization, dreamweaver cs6
    The PhoneGap Service panel indicates when the build is complete.

    Note:

    To package a build for Windows 8, you need to directly log in to https://build.phonegap.com, upload the required files, and compile the build.

    By default, Dreamweaver uses PhoneGap Build version 2.9.0. If you want to use the latest version of PhoneGap Build, perform the following steps:

    1. Remove the following line from the config.xml file at the site root folder:
    2. <preference name="phonegap-version" value="2.9.0" />

    3. Save the file.
    4. Rebuild the project.

    Once your builds are complete, you have a number of options. You can download the application files to your computer, scan a build's QR code to transfer the application to your device, or emulate the application using an emulator (Adroid and webOS only).

Download application files

To download an application from PhoneGap Build, click the Download Application button (downward-facing arrow) in the PhoneGap Build Service panel.

Note: Download is not available for iOS applications without a signing key. For more information, see the PhoneGap Build documentation.

The names of the downloaded application files are as follows:

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

Scan a QR code to transfer an application to a device

You need to have a QR code reader on your device before proceeding. For more information, see Set up the Development Environment.

Note: QR codes are not available for iOS applications without a signing key. For more information, see the PhoneGap Build documentation.

  1. In the PhoneGap Build Service panel, click the QR code for the application you want to download.
  2. Start the QR code reader on your mobile device and scan the QR code.
  3. Once the application has finished downloading, you can launch it directly on your device.
  4. Return to the build list by clicking the Back to Build Panel button.
Note: QR codes are not available for iOS applications without a signing key.

Emulate an application (Android and webOS only)

IMPORTANT: You need to have the Android SDK and/or the webOS SDK/PDK installed before proceeding. You also need to have specified any SDK/AVD information you want available locally from within the SDK applications. For more information, see Set up the Development Environment.

  1. Open the PhoneGap Build Settings panel by choosing Site > PhoneGap Build Service > PhoneGap Build Settings.
  2. Specify locations for the Android and/or webOS SDKs and click Save. These locations tell Dreamweaver where to find the information it needs to send your application to the emulator(s).
  3. In the PhoneGap Build Service panel (Site > PhoneGap Build Service > PhoneGap Build Service), click the Emulate (sideways facing) button for the application you want to emulate.
  4. If you previously specified your SDK/AVD information from within the SDK applications, a window should appear, pre-populated with information.
  5. Choose the SDK/AVD you want to use for emulation and click Launch.

Note: Emulators can be notoriously slow. It may take some time for your emulator to launch and load the application.

Create and deploy an Android app with PhoneGap and Dreamweaver

Create and deploy an Android app with PhoneGap and Dreamweaver
Kevin Hoyt - Adobe Developer evangelist

Create and deploy an iOS app with PhoneGap

Create and deploy an iOS app with PhoneGap
Kevin Hoyt - Adobe Developer evangelist

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy