Cordova and PhoneGap Apps
Apache Cordova provides APIs and packaging tools for creating an app for an Android, iOS, BlackBerry, or Windows Phone device. Touch 2.3 introduces tools and an API for working with Cordova and PhoneGap.
PhoneGap is built on top of Cordova and both have access to the Cordova API. PhoneGap and Cordova differ by how their packaging tools are implemented. PhoneGap provides a remote building interface at Adobe PhoneGap Build that lets you package and emulate an app for a single platform in the cloud. Cordova packaging tools let you build simultaneously for multiple platforms on your computer. In addition, Cordova is constantly updated by the open source community, whereas PhoneGap updates are coordinated by Adobe.
While Cordova and PhoneGap make it easy to package an app, you still need a certificate and AppID for each platform for the market in which you want to distribute your app, such as for Google Play or the Apple App Store.
Sencha Cmd version 4.0 and later provides access to Cordova and PhoneGap. You can easily enable or disable access, package an app, and run an emulator or simulator. You can use the Sencha Cmd Cordova and PhoneGap commands to package and emulate a Touch app.
See the Apache Cordova Platform Guides for information.
- While PhoneGap builds BlackBerry version 10 locally, the BlackBerry version at the Adobe PhoneGap Build site is version 6.
- If you're used to packaging your app using the Sencha Touch procedure of
configuring the packager.json file, the packager.json file is not used in
Cordova and PhoneGap packaging. Instead, you specify the App ID when you
start Cordova or PhoneGap, and then configure the
using information from the PhoneGap site.
See also: PhoneGap example config.xml file
Before Creating an App
Before developing an app:
- Install Java JRE.
- Install Node.js
- If you plan to package and emulate with Cordova, after Node.js is installed, use this command to install Cordova:
npm install -g cordovaImportant Whether or not you install Cordova to package and emulate your app, the Cordova API is available to your apps. The Cordova packaging and emulating package does not affect the use of the Cordova APIs in a Cordova or PhoneGap app.
- If you plan to package and emulate with PhoneGap, after Node.js is installed, use this command to install PhoneGap:
npm install -g phonegapNotes
• You must register with the free Adobe PhoneGap Build site and obtain a username and password to access the PhoneGap remote building site.
• Sencha recommends that you install both Cordova and PhoneGap--both are free (as is access to the Adobe PhoneGap Build site). Both software packages provide features that help your app development.
- Install Sencha Cmd version 4.0 or later.
- Create your app's file structure with:
sencha -sdk /path/to/SenchaTouch generate app MyApp /path/to/MyAppFor more information, see the Getting Started guide.
- If you are developing for Android, download the Android SDK Manager.
- If you are developing for iOS, complete iOS provisioning on the Apple iOS provisioning profiles portal (requires an Apple ID, password, and a purchased developer license). Use this site to obtain a certificate, identify devices, and get an AppID. In addition, download and install the free Xcode software. You can use the Xcode simulator to debug your iOS app before installing your app on a device. Xcode only works on a Mac with the Lion, Mountain Lion, or Mavericks OS X versions.
- If you are developing for BlackBerry, review the BlackBerry Native SDK and register to sign your apps with the BlackBerry Keys Order Form.
- Create a config.xml using the information
provided by PhoneGap. This file resides at the root level of your project where your index.html file resides.
If you are porting from
packager.jsonto Cordova, the
config.xmlfile is not similar, however, after you register your app with the Apple Developer Program, and for Android in the AndroidManifest.xml file, most of the parameters in
packager.jsonwill be provided for. In addition, the default settings in
config.xmlhandle most app conditions, so there will be fewer items to change.
PhoneGap example config.xml file
Developing a Cordova or PhoneGap App
To develop an app:
- Change directory to your project directory.
- Enable support for Cordova - If for iOS, see
iOS Note below:
sencha cordova init [AppID]And/or enable support for PhoneGap:
sencha phonegap init [AppID]
If you need to remove support for Cordova or PhoneGap, see the Remove Note below.
- If using Cordova, configure the
cordova.local.propertiesfile to indicate which platforms you're building for. This file contains a single statement and lists the build targets separated by a space - this example lists all the target platforms:
cordova.platforms=ios android blackberry wp8
- If using PhoneGap, configure the
phonegap.local.propertiesfile to indicate which platforms you're building for. This file contains information you need to pass to the Adobe PhoneGap Build site to create your app - PhoneGap only lets you specify one platform at a time:
phonegap.platform=ios phonegap.build.remote=true phonegap.build.remote.username=<Your_PhoneGap_Username> phonegap.build.remote.password=<Your_PhoneGap_Password>Note If you set
phonegap.build.remote=false, PhoneGap builds locally on your computer.
- Use the Cordova API
to develop your app. Touch 2.3 provides
an extensive set of device APIs in the
Ext.device.<API>.PhoneGapnamespaces. Alternatively, you can access the Cordova functions directly in your app by preceding the API with
navigator, for example for the Compass API, use:
navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);
- Create your app using Sencha Touch or Sencha Architect.
- Emulate your app with:
sencha app build -run native
- Package your app with:
sencha app build native
If your app runs on iOS, supply a unique AppID that you get from the Apple developer site. Access to the Apple developer site requires that you specify your Apple Developer username and password.
You can remove support for Cordova or PhoneGap with:
sencha cordova remove
Or for PhoneGap with:
sencha phonegap remove
The remove command also deletes these files in your project directory:
- If Cordova, the
- If PhoneGap, the
- The config.xml file.
Sencha Cmd Ant Commands
Starting with Sencha Cmd version 4.0, the Cordova/PhoneGap implementation provides extra functionality that you can access using the Ant component in Sencha Cmd.
|sencha ant cordova-build||Builds all platforms without building the Sencha app.|
|sencha ant cordova-clean||Deletes all files in the general |
|sencha ant cordova-emulate||Emulates all platforms without building the Sencha app.|
|sencha ant cordova-prepare||Prepares all platforms without building the Sencha app.|
|sencha ant cordova-sencha-build||Builds into the Cordova general |
|sencha ant cordova-sencha-emulate||Builds then emulates in all platforms.|
|sencha ant cordova-sencha-prepare||Builds then Emulates in all platforms.|
|sencha ant phonegap-build||Builds then Emulates in all platforms.|
|sencha ant phonegap-clean||Deletes all the files in the |
|sencha ant phonegap-run||Runs the native app without building the Sencha app.|
|sencha ant phonegap-sencha-build||Builds the Sencha app and the PhoneGap native platform.|
|sencha ant phonegap-sencha-run||Builds the Sencha app and the PhoneGap native app then runs the native app.|